View
3
Download
0
Category
Preview:
Citation preview
Html 5 Basic structure
<!DOCTYPE html>
Mansour
HTML <!DOCTYPE> Declaration
Html 5 Basic structure
Mansour
<!DOCTYPE html>
<html>
</html>
This is an HTML document.
Html 5 Basic structure
Mansour
<!DOCTYPE html>
<html lang="en">
</html>
To declare the language of a Web page
Html 5 Basic structure
Mansour
<!DOCTYPE html>
<html lang="en">
<head>
</head>
</html>
Opening and closing of HTML <head> Tag
Html 5 Basic structure
Mansour
<!DOCTYPE html>
<html lang="en">
<Head>
<meta charset="utf-8">
</head>
</html>
To define charset for html5 doctype
Html 5 Basic structure
Mansour
<!DOCTYPE html>
<html lang="en">
<Head>
<meta charset="utf-8">
<Title>
</title>
</head>
</html>
To define charset for Html5 doctype
Title of the document
Html 5 Basic structure
Mansour
<!DOCTYPE html>
<html lang="en">
<Head>
<meta charset="utf-8">
<Title>
</title>
</head>
<Body>
</body>
</html>
To define charset for Html5 doctype
Title of the document
The content of the HTML document......
Html 5 Basic structure
Mansour
<!DOCTYPE html>
<html lang="en">
<Head>
<meta charset="utf-8">
<title>
</title>
</head>
<body>
</body>
</html>
Html 5 Basic structure
Mansour
<!DOCTYPE html>
<html lang="en">
<Head>
<meta charset="utf-8">
<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>
Html 5 Basic structure
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>
Html 5 Basic structure
Mansour
<!DOCTYPE html>
<html lang="en">
<Head>
<meta charset="utf-8">
<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>
And much more tags wejust stick to the basic
Html 5 Basic structure
Mansour
<!DOCTYPE html>
<html lang="en">
<Head>
<meta charset="utf-8">
<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>
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;
Adding Style through external style sheet
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;
}
Adding Style through external style sheet
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;
}
Adding Style through external style sheet
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>
aside {float:left;width:30%;background: #9BC0D5;
}
<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>
aside {float:left;width:30%;background: #9BC0D5;
}
<section></section>
section {float:right;width: 60%;background: #868686;
}
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>
aside {float:left;width:30%;background: #9BC0D5;
}
<section></section>
section {float:right;width: 60%;background: #868686;
}
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
Recommended