pdf tutorials
all tutorials about web design and programming in pdf format
HTML Tutorial - pdf
This tutorial is designed to teach you some the basics of HyperText Markup Language (HTML),
with an emphasis on transforming a word-processing document into a simple Web page.
Contents
This tutorial will guide you through the following steps:- Retrieving the necessary materials from the Web
- Copying text from a word-processing document and pasting it into an HTML template
- Marking block elements and validating your work
- Marking inline elements and validating your work
- Using Netscape Composer
- Using Word's "Save as HTML" feature
- Blank (Empty) Space in HTML
- Whitespace with Preformatted Text
- Uploading your files to the Web server
- HTML5 Layouts Codes for Webistes
- HTML Download Link
pdf HTML Tutorial
HTML5 Layouts Codes for Webistes
Website layouts help organize and structure a website better and easier by dividing it into defined HTML elements.
The most commonly used layouts are:
<header>
It is used to define a HEADER section in web page.
<nav>
It is used to define a container for navigation bar with links.
<main>
It is used to define main content in web page.
<section>
It is used to define necessary sections in web page.
<article>
It is used to define an individual, self-contained articles in web page.
<aside>
It is used to define side bar, content aside from the main content in web page.
<footer>
It is used to define a FOOTER section in web page.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>IT present</title>
</head>
<style>
#wrapper {
border:5px ridge black;
width:90%;
}
header {
width:95%;
border:2px ridge maroon;
}
nav {
width:95%;
border:2px ridge maroon;
}
main {
border:3px ridge red;
display:inline-block;
width:70%;
}
section {
border:2px ridge green;
width:90%;
display:inline-block;
}
article {
border:2px ridge silver;
width:90%;
}
aside {
border:3px ridge orange;
width:16%;
float:right;
height: 730px;
display:inline-block;
margin:5px;
}
footer {
border:2px ridge blue;
width:99%;
height:50px;
}
</style>
<body>
<div id="wrapper">
<header>
<p>HEADER</p>
</header>
<nav>
<p>NAV BAR</p>
</nav>
<main>
<p>MAIN</p>
<section>
<p>SECTION 1</p>
<article>
<p>ARTICLE 1</p>
</article>
<article>
<p>ARTICLE 2</p>
</article>
</section>
<section>
<p>SECTION 2</p>
<article>
<p>ARTICLE 1</p>
</article>
<article>
<p>ARTICLE 2</p>
</article>
<article>
<p>ARTICLE 3</p>
</article>
</section>
</main>
<aside>
<h2>ASIDE</h2>
</aside>
<footer>
<p>FOOTER</p>
</footer>
</div>
</div>
</body>
</html>
result:
HEADER
pdf HTML Tutorial
