Share
, , , ,

HTML5 Tutorial-1: Setting up HTML5 body, CSS3 selector, Styling

Mohammad Luin No Comments

Welcome to My HTML5 Tutorial-1! 

Index: Creating a Basic Template | Setting up The Body | Styling The Website Layout

Before jumping into the deep I would like to suggest you to go through my post on Basics of HTML for the better understanding of this tutorial. We will use the below sample HTML5 website codes for this "HTML5 Tutorial-1". Before going to the description I would like to suggest you to open two new tabs in your notepad or two files naming html5.html and main.css, and keep them in the same directory. Do not copy-paste the whole file/codes at the beginning that I have mentioned below. I have described each part of html5.html and main.css below, understand them first and then write those codes in your notepad part by part for execution.

html5.html

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>Luin's Website</title>
 <link rel="stylesheet" href="main.css">
</head>
<body>
 <div id="big_wrapper">
 <header id="top_header">
 <h1>Luin's HTML5 Tutorial</h1>
 </header> <nav id="top_menu">
 <ul>
 <li>Home</li>
 <li>About</li>
 <li>Contact</li>
 </ul>
 </nav>
 <section id="main_section">
 <article>
 <header>
 <h2>The First Article<h2>
 </header>
 This is the very first article of my website. This article is just a demo of articles I am going to post in future.
 <footer>
 Written by-Mohammad Luin | Date-15/12/15
 </footer>
 <header>
 <h2>The Second Article<h2>
 </header>
 This is the very second article of my website. This article is just a demo of articles I am going to post in future.
<footer> Written by-Mohammad Luin | Date-15/12/15
</footer>
</article>
 </section>
 <aside id="recent_post">
 <h2>Recent Posts</h2>
 The First Article <br/> The Second Article
 </aside>
 <footer id="the_footer"> Copyright Luin 2015 </footer>
 </div>
</body>
</html>

main.css

*{
 margin: 0px; padding: 0px;
}
h1{
 font: bold 20px Tahoma;
}
h2{
 font: bold 14px Tahoma;
}
header, section, nav, footer, aside, article, hgroup{
 display: block;
}
body{
 text-align: center;
}
#big_wrapper{
 border: 1px solid black; width: 1000px; margin: 20px auto; text-align: left;
}
#top_header{
 background: yellow; border: 1px; padding: 20px;
}
#top_menu{
 background: blue; color: white;
}
#top_menu li{
 display: inline-block; list-style: none; padding: 5px; font: bold 14px Tahoma;
}


Creating a Basic Template



html5.html
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.                 <meta charset="utf-8"/>
  5.                 <title>Luin's Website</title>
  6.                 <link rel="stylesheet" href="main.css">
  7. </head>
  8. <body>
  9.                 <div>
  10.                                 <header ></header>
  11.                                 <nav></nav>
  12.                                 <section></section>
  13.                                 <aside></aside>
  14.                                 <footer></footer>
  15.                 </div>
  16. </body>
  17. </html>


Description:
1. HTML5 must start with this tag to let browsers know that this is a HTML5 website.
2. You have to define the language of your website using lang attribute.
3. Every website possess <head> portion. This head portion contains title of the website, css styles, scripts. The elements that remain inside the head remain hidden ie, the users cannot see only the developer can see.
8. <body> is the website's visual portion. It contains texts, images, paragraphs and all the visual elements that a user can see.
4. Meta character set for the website.
5. Title of the website.
6. Here link is the reference to outside file. The rel attribute here means relative which defines how it is related with the website. The file main.css is our seperate css file where we will write css codes for the website.
10. to 14. are different parts of body.
10. This is header of your website where the logo and the title, sub title will stay.
11. This is your website's navigation tag. You need it create navigation bar.
12. Contents of a website goes to the section.
13. <aside> tag is the sidebar of your blog. It holds the contents that you want to keep in the left-side or right-side of your blog.

Setting up The Body


html5.html
  1. <body>
  2.     <div>               
  3.                 <header>
  4.                                 <h1>Welcome to My Website!</h1>
  5.                 </header>
  6.                 <nav>
  7.                                 <ul>
  8.                                                 <li>Home</li>
  9.                                                 <li>About</li>
  10.                                                 <li>Contact</li>
  11.                                 </ul>
  12.                 </nav>
  13.                 <section>
  14.                                 <article>
  15.                                                 <header>
  16.                                                                 <h5>About HTML5</h5>
  17.                                                 </header>
  18.                                                 HTML means Hyper Text Markup Language. We use this language to develop website.
  19.                                                 <footer>
  20.                                                                 Writer: Mohammad Luin | Date:14-12-15
  21.                                                 </footer>
  22.                                 </article>
  23.                 </section>
  24.                 <aside>
  25.                                 <h4>Updates</h4>
  26.                                 Luin has bought a new car.
  27.                 </aside>
  28.                 <footer>Copyright Luin 2015</footer>
  29.                 </div>
  30.  </body>
Description:
4. Our title, subtitle goes to header. Here <h1> is the header tag.
7. Unordered list.
8. to 10. are lists of navigation tab.
13. All the important stuffs like articles goes in between the <section> tag.
14. This is the article tag where your will articles will go.
16. This is the header of your article.
18. This is your article.
19. This is the footer of your article. This section will contain who wrote the article and when.
25. You aside contains will go in between the <aside> tag.
28. This is the footer of your website.

main.css

 *{
margin: 0px;
padding: 0px;
}
h1{
font: bold 20px Tahoma;   /* Styling the header text */
}
h2{
font: bold 14px Tahoma;   /* Styling the header text */
}
header, section, nav, footer, aside, article, hgroup{
display: block;      /* Display type for all sections of body */
}
body{
text-align: center;   /* Placement of websites body */
}
#big_wrapper{
border: 1px solid black;
width: 1000px;  /* Total width of the website */
margin: 20px auto;
text-align: left;
}
#top_header{
background: yellow;
border: 1px;
padding: 20px;
}
#top_menu{
background: blue;
color: white;
}
#top_menu li{
display: inline-block;
list-style: none;
padding: 5px;
font: bold 14px Tahoma;
}

Result:
Layout without styling


Styling The Website Layout

Now, we will work with both the tab html5.html and main.css to give our website a nice look. To give different look to different parts of website you have to set unique id for each part of your website's body. For example-

html5.html
  1. <body>
  2.                 <div id="big_wrapper">
  3.                                 <header id="top_header">
  4.                                                 <h1>Luin's HTML5 Tutorial</h1>
  5.                                 </header>
  6.                                 <nav id="top_menu">
  7.                                                 <ul>
  8.                                                                 <li>Home</li>
  9.                                                                 <li>About</li>
  10.                                                                 <li>Contact</li>
  11.                                                 </ul>
  12.                                 </nav>
  13.                                 <section id="main_section">
  14.                                                 <article>
  15.                                                                 <header>
  16.                                                                                 <h2>The First Article<h2>
  17.                                                                 </header>
  18.                                                                 This is the very first article of my website. This article is just a demo of articles I am going to post in future.
  19.                                                                 <footer>
  20.                                                                                 Written by-Mohammad Luin | Date-15/12/15
  21.                                                                 </footer>
  22.                                                 </article>
  23.                                                 <article>             
  24.                                                                 <header>
  25.                                                                                 <h2>The Second Article<h2>
  26.                                                                 </header>
  27.                                                                 This is the very second article of my website. This article is just a demo of articles I am going to post in future.
  28.                                                                 <footer>
  29.                                                                                 Written by-Mohammad Luin | Date-15/12/15
  30.                                                                 </footer>
  31.                                                 </article>
  32.                                 </section>
  33.                                 <aside id="recent_post">
  34.                                                 <h2>Recent Posts</h2>
  35.                                                 The First Article <br/>
  36.                                                 The Second Article
  37.                                 </aside>
  38.                                 <footer id="the_footer">
  39.                                                 Copyright Luin 2015
  40.                                 </footer>
  41.                 </div>
  42. </body>


 The "id" that we have set for each section is needed for css styling. Now, go to your main.css tab and write the below codes.
main.css
 *{
margin: 0px;
padding: 0px;
}
h1{
font: bold 20px Tahoma;  /* Styling the header text */
}
h2{
font: bold 14px Tahoma;  /* Styling the header text */
}
header, section, nav, footer, aside, article, hgroup{
display: block;  /* Display type for all sections of body */
}
body{
text-align: center;  /* Placement of websites body */
}
#big_wrapper{
border: 1px solid black;
width: 1000px; /* Total width of the website */
margin: 20px auto; /* Here 'auto' means 20px in both left and right side  */
text-align: left; /* All text contents will be placed at left side   */
}
#top_header{
background: yellow;
border: 1px;
padding: 20px;
}
#top_menu{
background: blue;
color: white;
}
#top_menu li{
display: inline-block;
list-style: none;
padding: 5px;
font: bold 14px Tahoma; /* Using the font type Tahoma */
}
#main_section{
float: left;
width: 660px;
margin: 30px; /* Total 720px utilized out of 1000px, 280px left to use */
}
#recent_post{
float: left;
width: 220px;
margin: 20px 0px;
padding: 30px;
background: #66CCCC;
}
#the_footer{
clear: both; /*This command let the footer place itself free ie, neither in left or nor in right */
text-align: center; /* Place the footer in the center of website */
padding: 20px;
border-top: 2px solid black;
        background: green;
}
article{
background: #B6B3B2; /* Background color of each article */
border: 1px solid red;  /* Article border size and color */
padding: 20px;
margin-bottom: 15px;
}

Result:
Styling The Website Layout


Mohammad Luin

0 comments:

Post a Comment

Copyright © 2014-2016 MLuin | Designed by VeeThemes.com | Powered by Blogger