Basic HTML5 lay out concept -

Html 5 Basic structure

<!DOCTYPE html>

Mansour

HTML <!DOCTYPE> Declaration


Mansour

<!DOCTYPE html>

<html>

</html>

This is an HTML document.


Mansour

<!DOCTYPE html>

<html lang="en">

</html>

To declare the language of a Web page


Mansour

<!DOCTYPE html>

<html lang="en">

<head>

</head>

</html>

Opening and closing of HTML <head> Tag


Mansour

<!DOCTYPE html>

<html lang="en">

<Head>

<meta charset="utf-8">

</head>

</html>

To define charset for html5 doctype


Mansour

<!DOCTYPE html>

<html lang="en">

<Head>


<Title>

</title>

</head>

</html>

To define charset for Html5 doctype

Title of the document


Mansour

<!DOCTYPE html>

<html lang="en">

<Head>


<Title>

</title>

</head>

<Body>

</body>

</html>

To define charset for Html5 doctype

Title of the document

The content of the HTML document......


Mansour

<!DOCTYPE html>

<html lang="en">

<Head>


<title>

</title>

</head>

<body>

</body>

</html>


Mansour

<!DOCTYPE html>

<html lang="en">

<Head>


<title></title>

</head> <body> <p></p>

<h1> to <h6>

</figure></figure>

<header></header>

<nav></nav>

<section></section>

<article></article>

<aside></aside>

<footer></footer>

</body>

</html>


Mansour

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8">

<title>The <title> tag is required and it defines the title of the document.

</title>

</head> <body>

<p>The <p> tag defines a paragraph.</P>

<h1> to <h6>

<h1>The <h1> to <h6> tags are used to define HTML headings.</h1>

<figure>Use a <figure> element to mark up a photo in a document.

</figure>

<header>The <header> tag specifies a header for a document or section.

</header>

<nav>

</nav>

<section>

</section>

<article>

</article>

<aside>The <aside> tag defines some content aside from the content it is

placed in. </aside>

<footer>The <footer> tag defines a footer for a document or section.

</footer>

</body>

</html>


Mansour

<!DOCTYPE html>

<html lang="en">

<Head>


<title></title>


<h1> to <h6>

</figure></figure>

<header></header>

<nav></nav>

<section></section>

<article></article>

<aside></aside>

<footer></footer>

</body>

</html>

And much more tags wejust stick to the basic


Mansour

<!DOCTYPE html>

<html lang="en">

<Head>


<title></title>


<h1> to <h6>

</figure></figure>

<header></header>

<nav></nav>

<section></section>

<article></article>

<aside></aside>

<footer></footer>

</body>

</html>

Initial Page Elementshtml{ background: #FBE9B4;}

HTML Body Background

Mansour

Web Page

background-color : #fbe9b4;

html{background: #FBE9B4;

}

Adding Style through external style sheet

Initial Page Elementsbody {

width:80%;margin: 0 auto;background: white;

}

<body> </body>

Mansour

Web Page body

background-color : #FFFFFF;


body {width:80%;margin: 0 auto;background: white;

}

header {height: 50px;margin-bottom: 1em;

}

Initial Page Elements

Header

margin-bottom: 1em

Mansour

Web Page

<header></header>

header {height: 50%;margin-bottom: 1em;background: #E5EBBC;overflow:hidden;

}


Navigation Container

Header

Navigation

nav {height: 25pxmargin-bottom: 1em;

}

margin-bottom: 1em

Mansour

Web Page

<header></header>

<nav></nav>

nav {height: 25pxmargin-bottom: 1em;background: #AAAA9B;

}


Content Regions

Header

Navigation

aside {float:left;width:30%;

}

article {float:right;width: 60%;

}

100%

30% 60%

10%Sidebar

Mansour

Web Page

<header></header>

<nav></nav>

<aside></aside>

aside {float:left;width:30%;background: #9BC0D5;

}

Main Content

Content Regions

Header

Navigation

aside {float:left;width:30%;

}

article {float:right;width: 60%;

}

100%

30% 60%

10%

Mansour

Web Page

<header></header>

<nav></nav>

Main ContentSidebar

<aside></aside>


}

<section></section>

section {float:right;width: 60%;background: #868686;

}

Footer

Header

Navigation100%

30% 60%

footer {margin-top: 1em;

}

Mansour

Web Page

<header></header>

<nav></nav>

10%

Main ContentSidebar

<aside></aside>


}

<section></section>


}

Adding footer

Footer

Header

Navigation

footer {clear:both;margin-top: 1em;

}

100%

30% 60%

Footermargin-top: 1em

Mansour

<header></header>

<nav></nav>

Adding footer

footer {margin-top:1em;background: #F8D35D;clear:both;

}

10%

Main ContentSidebar

<aside></aside>


}

<section></section>


}

Products | about | contact |

Copyright and term of use

LogoYour Slogan

Lorem Ipsum is simply dummy textof the printing and typesettingindustry. Lorem Ipsum has been theindustry's standard dummy text eversince the 1500s, when an unknownprinter took a galley of type andscrambled it to make a type specimenbook. It has survived not only fivecenturies, but also the leap intoelectronic typesetting, remainingessentially unchanged. It waspopularised in the 1960s with therelease of Letraset sheets containingLorem Ipsum passages, and morerecently with desktop publishingsoftware like Aldus PageMakerincluding versions of Lorem Ipsum.

Contrary to popular belief, Lorem Ipsumis not simply random text. It has roots ina piece of classical Latin literature from45 BC, making it over 2000 years old.Richard McClintock, a Latin professor atHampden-Sydney College in Virginia,looked up one of the more obscure Latinwords, consectetur, from a Lorem Ipsumpassage, and going through the cites ofthe word in classical literature,discovered the undoubtable source.Lorem Ipsum comes from sections1.10.32 and 1.10.33 of "de FinibusBonorum et Malorum" (The Extremes ofGood and Evil) by Cicero, written in 45BC. This book is a treatise on the theoryof ethics, very popular during theRenaissance. The first line of LoremIpsum, "Lorem ipsum dolor sit amet..",comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsumused since the 1500s is reproducedbelow for those interested. Sections1.10.32 and 1.10.33 from "de FinibusBonorum et Malorum" by Cicero arealso reproduced in their exact original

Contrary to popular belief, Lorem Ipsum isnot simply random text. It has roots in a pieceof classical Latin literature from 45 BC,making it over 2000 years old. RichardMcClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one ofthe more obscure Latin words, consectetur,from a Lorem Ipsum passage, and goingthrough the cites of the word in classicalliterature, discovered the undoubtable source.Lorem Ipsum comes from sections 1.10.32and 1.10.33 of "de Finibus Bonorum etMalorum" (The Extremes of Good and Evil)by Cicero, written in 45 BC. This book is atreatise on the theory of ethics, very popularduring the Renaissance. The first line ofLorem Ipsum, "Lorem ipsum dolor sitamet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum usedsince the 1500s is reproduced below for thoseinterested. Sections 1.10.32 and 1.10.33 from"de Finibus Bonorum et Malorum" by Ciceroare also reproduced in their exact originalform, accompanied by English versions fromthe 1914 translation by H. Rackham.

Lorem Ipsum

Templaate

Mansour

Products | about | contact |

Copyright and term of use

LogoYour Slogan

Lorem Ipsum is simply dummy text of theprinting and typesetting industry. LoremIpsum has been the industry's standarddummy text ever since the 1500s, when anunknown printer took a galley of type andscrambled it to make a type specimen book.It has survived not only five centuries, butalso the leap into electronic typesetting,remaining essentially unchanged. It waspopularised in the 1960s with the release ofLetraset sheets containing Lorem Ipsumpassages, and more recently with desktoppublishing software like Aldus PageMakerincluding versions of Lorem Ipsum.

Contrary to popular belief, Lorem Ipsum is notsimply random text. It has roots in a piece ofclassical Latin literature from 45 BC, making itover 2000 years old. Richard McClintock, aLatin professor at Hampden-Sydney College inVirginia, looked up one of the more obscureLatin words, consectetur, from a Lorem Ipsumpassage, and going through the cites of the wordin classical literature, discovered theundoubtable source. Lorem Ipsum comes fromsections 1.10.32 and 1.10.33 of "de FinibusBonorum et Malorum" (The Extremes of Goodand Evil) by Cicero, written in 45 BC. Thisbook is a treatise on the theory of ethics, verypopular during the Renaissance. The first line ofLorem Ipsum, "Lorem ipsum dolor sit amet..",comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used sincethe 1500s is reproduced below for thoseinterested. Sections 1.10.32 and 1.10.33 from"de Finibus Bonorum et Malorum" by Ciceroare also reproduced in their exact original form,accompanied by English versions from the 1914translation by H. Rackham.

Contrary to popular belief, Lorem Ipsum is notsimply random text. It has roots in a piece ofclassical Latin literature from 45 BC, making it over2000 years old. Richard McClintock, a Latinprofessor at Hampden-Sydney College in Virginia,looked up one of the more obscure Latin words,consectetur, from a Lorem Ipsum passage, andgoing through the cites of the word in classicalliterature, discovered the undoubtable source.Lorem Ipsum comes from sections 1.10.32 and1.10.33 of "de Finibus Bonorum et Malorum" (TheExtremes of Good and Evil) by Cicero, written in 45BC. This book is a treatise on the theory of ethics,very popular during the Renaissance. The first lineof Lorem Ipsum, "Lorem ipsum dolor sit amet..",comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the1500s is reproduced below for those interested.Sections 1.10.32 and 1.10.33 from "de FinibusBonorum et Malorum" by Cicero are alsoreproduced in their exact original form,accompanied by English versions from the 1914translation by H. Rackham.

Lorem Ipsum

Contrary to popular belief, Lorem Ipsum is not simply random text.It has roots in a piece of classical Latin literature from 45 BC,making it over 2000 years old. Richard McClintock, a Latinprofessor at Hampden-Sydney College in Virginia, looked up oneof the more obscure Latin words, consectetur, from a Lorem Ipsumpassage, and going through the cites of the word in classicalliterature, discovered the undoubtable source. Lorem Ipsum comesfrom sections 1.10.32 and 1.10.33 of "de Finibus Bonorum etMalorum" (The Extremes of Good and Evil) by Cicero, written in45 BC. This book is a treatise on the theory of ethics, very popularduring the Renaissance. The first line of Lorem Ipsum, "Loremipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s isreproduced below for those interested. Sections 1.10.32 and1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are alsoreproduced in their exact original form, accompanied by Englishversions from the 1914 translation by H. Rackham.

Mansour

Basic HTML5 lay out concept -

Documents

Transcript of Basic HTML5 lay out concept -