MSTCCU'16 - Aspiration Webbers - Session 2 - HTML&CSS
- 2. HTML & CSS
- 3. • Revision • HTML • UI VS UE Agenda • Introduction to CSS • Let’s Try • CSS Syntax
- 4. Revision
- 5. Revision • ASP ? Web Application. Dynamic pages. • Web application ? Web Development VS Web Design?. Web Development Or Web Design?. Why web application?. • Static page Vs. Dynamic page • Introduction to HTML HTML VS. CSS. HTML Syntax. Important Tags
- 6. HTML
- 8. user input:<Form> tag <form action=‘’ method=‘’></form> <!DOCTYPE html> <html> <head> </head> <body> <form action=‘’ method=‘’> UserName:<input type="text" name="fName“/> password: <input type="password" name="pass"/> <input type="submit" value="Login"/> </form> </body> </html>
- 9. • The Action Attribute : - The action attribute defines the action to be performed when the form is submitted. - i.e. <form action=“nextPage.html"> user input:<Form> tag • The Method Attribute: -The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms. - i.e. <form action=“nextPage.html" method="get"> OR <form action=“nextPage.html" method=“post">
- 11. <!DOCTYPE html> <html> <head> </head> <body> <a href=“http://www.bing.com"> visit address</a> </body> </html> Hyperlink: <a>tag <a href=“http://www.bing.com">Visit address</a>
- 13. Hyperlink: <a>tag • Absolute URL - i.e. <a href=“http://www.bing.com"> visit address</a> • Relative URL (Local Link) - (without http://www....). - i.e. <a href=“nextpage.html"> visit address</a> <a href="url">link text</a>
- 14. <!DOCTYPE html> <html> <head> </head> <body> <img src="E:duck.jpg" width="300“ height="300"/> </body> </html> Images:<img> tag <img src="" width=“300“ height=“300“/>
- 15. UI Vs. UX
- 17. How to improve the user interface ?
- 18. Good design
- 19. Logical Flow Good flowBad flow
- 20. Simple
- 22. What is CSS? ascading tyle heets
- 23. HTML
- 24. CSS
- 25. Why CSS ?
- 26. Where to …… ? • Inline: - i.e. <p style=“color :red;”>………<p> • Internal: - i.e. <style> p{ color :red ; } </style> • External: - i.e. <link rel="stylesheet" type="text/css" href="style.css"> - style.css
- 27. CSS Syntax
- 28. CSS Rule • Selector { property: value; } declaration • P{ color: red ; text-align: center; font-size:50px } selector property value declaration declaration
- 29. Selector • Element : - i.e. p { ……… } - i.e. p,h1,h2{ ……… } • Element ID : - i.e. #id{……………} • class : - i.e. .class {……………} - i.e. p.class {……………}
- 30. LET’s Try !
- 32. Any Questions ?