Viruses Explained What are Trojans? What are Worms? What are Rootkits? Free AntiVirus Latest Virus Threats Top 10 Anti Virus Malware Tutorials
Spyware Explained Malware Tutorials Free Anti Spyware Manual Tips
FREE Anti Virus FREE Anti Spyware FREE Online Scanners Definition Updates Manual Updates BootUp Anti Virus Portable Protection Rootkit Removal Top Security Tips
HTML Tutorial WORD Tutorial EXCEL Tutorial Computer Beginners Windows Registry Top Security Tips Malware Tutorials
Web Templates Word Templates Word Processing

Home Page
Free Anti Virus
Free Anti Spyware
Free Online Scanners
Free USB Anti Virus
Bootable Anti Virus
Rootkit Removal
Latest Virus Threats
Viruses Explained
Spyware Explained
Windows Registry
Top 10 Antivirus
Manual Updates
Definition Updates
Malware Tutorials

Computer Basics
HTML Tutorials
Free Web Templates
Word Tutorials
Excel Tutorials

CV Creation
Free CV Templates
Free CV Examples

   IP: 54.81.120.254

Beginners HTML   Beginners Plus HTML   CSS Style Sheets   <table> tag   <div> tag  
HTML Links   Free Web Templates  

Beginners Plus HTML: Part One

See also: Part Two

These lessons are assuming that you have completed and practiced;
Beginners HTML. These lessons are about making a Webpage look professional and ready for publishing on the internet. They are not difficult if you take each lesson one step at a time and also practice and experiment.

Remember you can use Save As to keep your original material and experiment with another file. Most of the online HTML tutorials move too fast and if you stay with these steps and practice you will be designing WebPages in no-time.

In the Beginners HTML. lessons there was no frame work done or format to get a particular look to the webpage. To make multiple webpages look and feel consistent we will use Style Sheets in these lessons.

What do we need?
Lets break it down by doing the obvious. First lets create a basic HTML frame work. We will break up the page into divisions using the <div> tag. Also we will give each <div> tag an appropriate id name which we will be able to use later on.

1. We need a container division to encase all other divisions tags.

<div id= "container">

</div>


2. We need header division for page title, images etc.

<div id= "header">

</div>


2. We need a side division to create links etc.

<div id= "sidemenu">

</div>


3. We need a main content division for main bulk of your content.

<div id= "mainContent">

</div>


4. We need a footer division for contact at the base of your page.

<div id= "footer">

</div>


Except for the standard <html> <header> and <body> tags, this is your basic framework. You will see the whole HTML page code further on in this lesson.
What do we need?
Now lets create a basic CSS Style Sheet to implement formats for the HTML divisions we have created.

This is created between style tags and the body block is a default. This file can be saved as mystyles.css but remember we have done nothing inside these blocks of code to make any impression inside the HTML file(page) yet.

<style type="text/css">

body {
}

#container {
}

#header{
}

#sidemenu{
}

#mainContent {
}

#footer {
}

</style>


Dont panic about knowing nothing about the above code; just know for now that you can Copy and Paste this code in pink into notepad and save it as mystyles.css

Study the two files below and look how the mystyles.css file is ready to take control of the divisions in the website.html file. Save these two files and run the html file and see what happens.

Its important to understand the concept of allowing the website.html file to see the mystyles.css file and how we do this is by using the link tag between the head tags and of course it links too mystyles.css


website.html
<html>

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

   <body>

    <div id= "container">

       <div id= "header">

       </div>

       <div id= "sidemenu">

       </div>

       <div id= "mainContent">

       </div>

       <div id= "footer">

       </div>

    </div>

   </body>
</html>
mystyles.css
<style type="text/css">

body {

}

#container {

}

#header{

}

#sidemenu{

}

#mainContent {

}

#footer {

}

</style>


Beginners Plus HTML: Part One


As you should know by now, running the website.html nothing will appear on the page because we have only a framework. Now lets start to put some visual effects to the framework.

Now just fill in your container block like below; the code is self explaining, except for margin this allows for the container to be centered on the page. Save your new edition of mystyles.css and open your html file. See what happens.
#container {
   width: 80%;
   height: 200px;
   margin: 0 auto;
   border: 1px solid #000000;
}

width: auto; allows the header width to be automatic with the contanier. Padding allows text etc off edges.
#header {
   width: auto;
   padding: 15px 15px;
   font: 20px Verdana;
   border-bottom: 1px solid #6D71B4;
}

float: left; keeps the division on left side of container.
#sidemenu {
   width: 15%;
   float: left;
   padding: 15px 15px;
   border-right: 1px solid #E2EAEB;
}

The borders are created here to show you how the margins for the mainContent work; experiment by changing the margins and refreshing the html page. You must save your style sheet each time you make a change etc.
#mainContent {
   font: 10px Verdana;
   padding: 15px 15px;
   margin: 0 2% 0 20%;
   border-left: 1px solid #6D71B4;
   border-right: 1px solid #6D71B4;
}

#footer{
   padding: 15px 15px;
   border-top: 1px solid #000000;
}

When you open the website.html file after these changes to mystyles.css the page will still look like an empty box. To continue this lesson go to: Part Two