<<

HTML and CSS- Layout

Kanida Sinmai [email protected] http://mis.csit.sci.tsu.ac.th/kanida HTML Layout

• Frame • Table •

– Block • HTML5 layout elements Example HTML5 Layout HTML Layout – using Frame

HTML Frames HTML Layout – using Frame

HTML Frames HTML5 doesn’t support Frame anymore!!! iFrame – inline Frame

iFrame – inline CSS

iFrame – Try this and see what happen

What do you see any differences between them?

This is an iframe.

This is an iframe. HTML – Table layout HTML Layout – using Tables HTML Layout using Tables

This is Web Page Main title
Main Menu HTML PHP PERL...	Technical and Managerial Tutorials
Copyright © 2007 Tutorialspoint.com

HTML Layout – using Tables

Three Column HTML Layout

Main Menu
HTML
PHP
PERL...

Technical and Managerial Tutorials

Right Menu
HTML
PHP
PERL...

HTML Layout using

HTML Layouts using DIV, SPAN

This is Web Page Main title

Main Menu

HTML
PHP
PERL...

Technical and Managerial Tutorials

Right Menu

HTML
PHP
PERL...

HTML using

City Gallery

#header { background-color:black;

color:white; London
text-align:center; Paris
padding:5px; Tokyo
}

#nav { line-height:30px;

background-color:#eeeeee;

London

height:300px;

width:100px; London is the capital city of England. It is the most populous city in the float:left; United Kingdom, padding:5px; with a metropolitan area of over 13 million inhabitants. }

#section {

Standing on the River Thames, London has been a major settlement for width:350px; two millennia, float:left; its history going back to its founding by the Romans, who named it padding:10px; Londinium. }

#footer {

background-color:black; color:white; padding:5px; } HTML5 Layout

HTML5 Layout

City Gallery

header { background-color:black; nav { line-height:30px;

background-color:#eeeeee;

London

height:300px;

width:100px; London is the capital city of England. It is the most populous city in the float:left; United Kingdom, padding:5px; with a metropolitan area of over 13 million inhabitants. }

section {

Standing on the River Thames, London has been a major settlement for width:350px; two millennia, float:left; its history going back to its founding by the Romans, who named it padding:10px; Londinium. }

footer {

background-color:black; color:white; padding:5px; } Semantic Elements

• A semantic element clearly describes its meaning to both the browser and the developer. • Examples of non-semantic elements:

and - Tells nothing about its content. • Examples of semantic elements: ,

, and - Clearly defines its content. New Semantic Elements in HTML5

•