SlideShare a Scribd company logo
1 of 33
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 Types
type="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 flowBad flow
Simple
What is CSS?
ascading tyle heets
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
value
declaration
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 ?
/moataz.hesham.5
Contact Me:
moatazhesham2014@hotmail.com

More Related Content

Similar to MSTCCU'16 - Aspiration Webbers - Session 2 - HTML&CSS

Form using html and java script validation
Form using html and java script validationForm using html and java script validation
Form using html and java script validation
Maitree Patel
 
Introduction to angular js july 6th 2014
Introduction to angular js   july 6th 2014Introduction to angular js   july 6th 2014
Introduction to angular js july 6th 2014
Simona Clapan
 
TechDays 2013 Jari Kallonen: What's New WebForms 4.5
TechDays 2013 Jari Kallonen: What's New WebForms 4.5TechDays 2013 Jari Kallonen: What's New WebForms 4.5
TechDays 2013 Jari Kallonen: What's New WebForms 4.5
Tieturi Oy
 
HTML CSS Best Practices
HTML CSS Best PracticesHTML CSS Best Practices
HTML CSS Best Practices
hoctudau
 

Similar to MSTCCU'16 - Aspiration Webbers - Session 2 - HTML&CSS (20)

HTML5
HTML5HTML5
HTML5
 
Transform SharePoint default list forms with HTML, CSS and JavaScript
Transform SharePoint default list forms with HTML, CSS and JavaScriptTransform SharePoint default list forms with HTML, CSS and JavaScript
Transform SharePoint default list forms with HTML, CSS and JavaScript
 
Wicket 2010
Wicket 2010Wicket 2010
Wicket 2010
 
Form using html and java script validation
Form using html and java script validationForm using html and java script validation
Form using html and java script validation
 
25444215.pptx
25444215.pptx25444215.pptx
25444215.pptx
 
web development
web developmentweb development
web development
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
 
Angular - Chapter 4 - Data and Event Handling
 Angular - Chapter 4 - Data and Event Handling Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event Handling
 
Angular 2 Essential Training
Angular 2 Essential Training Angular 2 Essential Training
Angular 2 Essential Training
 
Introduction to HTML language Web design.pptx
Introduction to HTML language Web design.pptxIntroduction to HTML language Web design.pptx
Introduction to HTML language Web design.pptx
 
WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxWEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptx
 
Introduction to angular js july 6th 2014
Introduction to angular js   july 6th 2014Introduction to angular js   july 6th 2014
Introduction to angular js july 6th 2014
 
TechDays 2013 Jari Kallonen: What's New WebForms 4.5
TechDays 2013 Jari Kallonen: What's New WebForms 4.5TechDays 2013 Jari Kallonen: What's New WebForms 4.5
TechDays 2013 Jari Kallonen: What's New WebForms 4.5
 
web development
web developmentweb development
web development
 
Go Fullstack: JSF for Public Sites (CONFESS 2013)
Go Fullstack: JSF for Public Sites (CONFESS 2013)Go Fullstack: JSF for Public Sites (CONFESS 2013)
Go Fullstack: JSF for Public Sites (CONFESS 2013)
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
C# Advanced L09-HTML5+ASP
C# Advanced L09-HTML5+ASPC# Advanced L09-HTML5+ASP
C# Advanced L09-HTML5+ASP
 
HTML CSS Best Practices
HTML CSS Best PracticesHTML CSS Best Practices
HTML CSS Best Practices
 
025444215.pptx
025444215.pptx025444215.pptx
025444215.pptx
 

Recently uploaded

The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 

Recently uploaded (20)

Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptxOn_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 

MSTCCU'16 - Aspiration Webbers - Session 2 - HTML&CSS