html + css examples

39
HTML + CSS Examples MOHAMED LOEY

Upload: httpwwwbuedueg

Post on 29-Jan-2018

1.438 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: HTML + CSS Examples

HTML + CSS Examples

MOHAMED LOEY

Page 2: HTML + CSS Examples

Agenda

Part I: Website1

Part II: Website 2

Page 3: HTML + CSS Examples

Website 1

Page 4: HTML + CSS Examples

STEP 1: The site HTML structure

Container Header

h1

p

Blog-post h2

p

em

Footer h3

p

Page 5: HTML + CSS Examples

STEP 2: WRITING THE HTML

Header

Code:

Page 6: HTML + CSS Examples

STEP 2: WRITING THE HTML

Blog-post

Page 7: HTML + CSS Examples

STEP 2: WRITING THE HTML

Code:

Page 8: HTML + CSS Examples

STEP 2: WRITING THE HTML

Footer

Code:

Page 9: HTML + CSS Examples

STEP 2: WRITING THE HTML

Container

Code:

Page 10: HTML + CSS Examples

STEP 3: HTML Webpage

Page 11: HTML + CSS Examples

STEP 3: HTML Webpage

Code:

Page 12: HTML + CSS Examples

STEP 4: Link CSS with HTML

Code:

Page 13: HTML + CSS Examples

STEP 5: Adding our style sheet

Body:

Result: Code:

Page 14: HTML + CSS Examples

STEP 5: Adding our style sheet

Container :

Result: Code:

Page 15: HTML + CSS Examples

STEP 5: Adding our style sheet

Header & Footer :

Result: Code:

Page 16: HTML + CSS Examples

STEP 5: Adding our style sheet

Footer :

Result: Code:

Page 17: HTML + CSS Examples

STEP 5: Adding our style sheet

Lead:

Result: Code:

Page 18: HTML + CSS Examples

STEP 5: Adding our style sheet

Blog-post:

Result: Code:

Page 19: HTML + CSS Examples

STEP 5: Adding our style sheet

H1,H2,H3:

Result: Code:

Page 20: HTML + CSS Examples

STEP 5: Adding our style sheet

Blog-post h2,p,em:

Result: Code:

Page 21: HTML + CSS Examples

STEP 6: Final CSS File

Page 22: HTML + CSS Examples

STEP 7: Your first Website with HTML and CSS

Page 23: HTML + CSS Examples

Website 2

Page 24: HTML + CSS Examples

STEP 1: The site HTML structure

Container

Header

H1

Navigation

ul

Content-container

Content

H2

P

Footer

Page 25: HTML + CSS Examples

STEP 2: WRITING THE HTML

Header

Code:

Page 26: HTML + CSS Examples

STEP 2: WRITING THE HTML

Navigation

Code:

Page 27: HTML + CSS Examples

STEP 2: WRITING THE HTML

Content-container

Code:

Page 28: HTML + CSS Examples

STEP 2: WRITING THE HTML

Footer

Code:

Page 29: HTML + CSS Examples

STEP 3: HTML Webpage

Page 30: HTML + CSS Examples

STEP 3: HTML Webpage

Code:

Page 31: HTML + CSS Examples

STEP 4: Link CSS with HTML

Code:

Page 32: HTML + CSS Examples

STEP 5: Adding our style sheet

Container:

Result: Code:

Page 33: HTML + CSS Examples

STEP 5: Adding our style sheet

Header :

Result: Code:

Page 34: HTML + CSS Examples

STEP 5: Adding our style sheet

Header :

Result: Code:

Page 35: HTML + CSS Examples

STEP 5: Adding our style sheet

Content:

Result: Code:

Page 36: HTML + CSS Examples

STEP 5: Adding our style sheet

Footer:

Result: Code:

Page 37: HTML + CSS Examples

STEP 6: Final CSS File

Page 38: HTML + CSS Examples

STEP 7: Your Second Website with HTML and CSS

Page 39: HTML + CSS Examples

THANK U