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:





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




MAIN

SECTION 1

ARTICLE 1


ARTICLE 2




SECTION 2

ARTICLE 1


ARTICLE 2


ARTICLE 3







FOOTER








pdf HTML Tutorial