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 Two

See also: Part One

Continuing on from Part One we changed the mystyles.css file to create a format for the html page.

If you look at the two files below you will notice that the html file has some content entered etc. This will allow the website.html page to take shape.

There is one new piece of code: <br class="clearfloat"> This allows divisions and tables to act normally after there has been divisions that float to the left or right e.g. sidemenu. Update the website.html like below and open it.

website.html

<html>

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

   <body>

    <div id= "container">

       <div id= "header">
         Website Title
       </div>

       <div id= "sidemenu">          Link1<br>Link2<br>
         Link3<br>Link4<br>
       </div>

       <div id= "mainContent">
         Main content area of page. <br>
         Main content area of page. <br>
         Main content area of page. <br>
         Main content area of page. <br>
       </div>

       <br class="clearfloat">

       <div id= "footer">
         Footer Information
       </div>

    </div>

   </body>
</html>

mystyles.css

Above is now a good html frame work to start building a website. We have all the essential areas we need to start putting in our own content.

Also you will not need height in the container block in mystyles.css as the content will stretch the container to suit.

We have to create links now and also we need some more code at the top of our page for the internet to understand. See also HTML Links

Using the file you already have website.html, use it to create three more files called index.html, contacts.html and services.html by using Save As.

<a href="website.html">Our Website</a> <br>
<a href="history.html">Our History</a> <br>
<a href="contacts.html">Contacts</a> <br>
<a href="services.html">Services</a> <br>

Now you can use this code between the sidemenu division in each of your html files. Your free to change the file names and whatever you want to change in the html files. EXPERIMENT.

This design would possible work on the internet but we would need internet standard code so as to work consistent across most browsers.

See below in blue the final part of the code needed and you are ready to go. Dont panic when you see it for it all is standard and you just copy it between the header tags.

The DOCTYPE is not a HTML tag or XHTML code. Its a declaration and appears at the very top of your files.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"">

HTML tag is supported in all major browsers; it can also carry other attributes for different coding.
<html>

Between header tags is mainly information about your page rather than content.
<head>

   Between the quotes " " you put page description for external use.
   <meta name="description" content=""">

   Between the quotes " " you put page keywords for external use e.g. google search engine.
   <meta name="keywords" content="" /">

   This is how the page can import from a particular style sheet.
   <link type="text/css" rel="stylesheet" href="styleformats.css"">

   Used for different languages and encoding.
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /">

   Seen in the title bar of your browser.
   <title"> Explain Your Website</title">

</head">