View
1.443
Download
2
Category
Preview:
Citation preview
HTML + CSS Examples
MOHAMED LOEY
Agenda
Part I: Website1
Part II: Website 2
Website 1
STEP 1: The site HTML structure
Container Header
h1
p
Blog-post h2
p
em
Footer h3
p
STEP 2: WRITING THE HTML
Header
Code:
STEP 2: WRITING THE HTML
Blog-post
STEP 2: WRITING THE HTML
Code:
STEP 2: WRITING THE HTML
Footer
Code:
STEP 2: WRITING THE HTML
Container
Code:
STEP 3: HTML Webpage
STEP 3: HTML Webpage
Code:
STEP 4: Link CSS with HTML
Code:
STEP 5: Adding our style sheet
Body:
Result: Code:
STEP 5: Adding our style sheet
Container :
Result: Code:
STEP 5: Adding our style sheet
Header & Footer :
Result: Code:
STEP 5: Adding our style sheet
Footer :
Result: Code:
STEP 5: Adding our style sheet
Lead:
Result: Code:
STEP 5: Adding our style sheet
Blog-post:
Result: Code:
STEP 5: Adding our style sheet
H1,H2,H3:
Result: Code:
STEP 5: Adding our style sheet
Blog-post h2,p,em:
Result: Code:
STEP 6: Final CSS File
STEP 7: Your first Website with HTML and CSS
Website 2
STEP 1: The site HTML structure
Container
Header
H1
Navigation
ul
Content-container
Content
H2
P
Footer
STEP 2: WRITING THE HTML
Header
Code:
STEP 2: WRITING THE HTML
Navigation
Code:
STEP 2: WRITING THE HTML
Content-container
Code:
STEP 2: WRITING THE HTML
Footer
Code:
STEP 3: HTML Webpage
STEP 3: HTML Webpage
Code:
STEP 4: Link CSS with HTML
Code:
STEP 5: Adding our style sheet
Container:
Result: Code:
STEP 5: Adding our style sheet
Header :
Result: Code:
STEP 5: Adding our style sheet
Header :
Result: Code:
STEP 5: Adding our style sheet
Content:
Result: Code:
STEP 5: Adding our style sheet
Footer:
Result: Code:
STEP 6: Final CSS File
STEP 7: Your Second Website with HTML and CSS
THANK U
Recommended