HTML for advanced beginners

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.

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

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

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

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

mystyles.css

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