Embed Size (px)
Citation preview
Aspiration Webbers
Workshop
Session # 2
Prepared & Presented By:
Moataz Hesham Gamal El-Din
MSTC’16
HTML & CSS
• Revision
• HTML• UI VS UE
Agenda
• Introduction to CSS
• Let’s Try
• CSS Syntax
Revision
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
HTML
user input:<Form> tag
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>
• 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">
Input Typestype="checkbox"
type="radio"
type=“date"
type=“text"
type=“password"
<!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>
Hyperlink: <a>tag
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>
<!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“/>
UI Vs. UX
How to improve the user interface ?
Good design
Logical Flow
Good flow Bad flow
Simple
What is CSS?
Cascading Style Sheets
CSS
HTML
CSS
Why CSS ?
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
CSS Syntax
CSS Rule
• Selector { property: value; }
declaration
• P{ color: red ; text-align: center; font-size:50px }
selector
property
valuedeclaration
declaration
Selector
• Element : - i.e. p { ……… }
- i.e. p,h1,h2{ ……… }
• Element ID : - i.e. #id{……………}
• class : - i.e. .class {……………}- i.e. p.class {……………}
LET’s Try !
Any Questions ?
