Lecture No. 1

Today, I am going to tell you about how you can make simple basic template having header area, content area and footer area.

I am assuming that you already installed dreamweaver as editor.
Double click on the icon:

 You will see the interface like this:

Click on html form dialog box:

You see the html document like this:

Give title Template 1 and save it:
I have made a folder on desktop named template-one and saved the file as template-1.html 

Now click on new from file link of main menu, and choose css from the list in dialog box:

You will see the css file like this

Save it in template-one folder, first make css folder and save into it

Be sure you are into css folder:

Now again get back to your template-1.html file and linked css stylesheet with it, by typing or if you not want to type than you can copy it from here:

<link href="css/style.css" rel="stylesheet" type="text/css">

For best practice I recommend that type this code, or you can copy this code:
Type this code in between body tag, and save file by pressing ctrl+s:

<!-- Header Container Start -->
<header>
This is header
</header>
<!-- Header Container End -->

<!-- Content Container Start -->
<section class="content-container">
This is content area
</section>
<!-- Content Container Start -->


<!-- Footer Container Start -->
<footer>
This is footer
</footer>
<!-- Footer Container End -->

your screen look like this:

did you note in above code, I have added a class on content section named content-container for future use in css style sheet:

Now switched back to css style sheet i-e style.css

Again, for best practice I recommend that type this code, or you can copy this code,
and save file in css folder by pressing ctrl+s:

 body{
    text-align:center;
    color:#ffffff;
    font-size:22px;
}

header{
    background:#273139;
}

.content-container{
    background:#34b78c;
}

footer{
    background:#f39c12;
}

your screen like this:

Now switched back to template-1.html. 
Finally check the page into browser what you done by clicking on google chrome browser in File > Preview in Browser:

This looks nice, you have made basic level html template.

This blog is about HTML coding. With the passage of time, there will be added new features about HTML.