How To HTML! Lesson Six


Lesson Six - Style Machine

If you have had any previous experience with html, you may have come across <font> and <center> tags. AVOID THEM if you can. They belong to the old versions of html, and lead to problems. This tutorial is teaching you habits which will lead you towards the newer html 4 and xhtml standards. The newer standards have replaced those tags with a system named CSS - cascading style sheets. In the next exercise will create a simple css document, that will style our webpages.

EXERCISE SIX A

Open up Notepad, we are going to create a fresh page - but not of html this time, but of css! NOTE. that we are using the { and } symbols in css. Copy or type all of the following css script:

h1 {font-family: arial; color: #339966; font-size: 60px}
h2 {font-family: times new roman; color: #00ccff; font-size: 26px}
p {font-family: georgia; font-size: 18px}
li {font-family: georgia; font-size: 16px}
.middle {font-family: georgia; text-align: center; font-size: 20px}

Now Save as ourstyle.css into the website folder with the other files (remember to include the .css in the file name. You have created a stylesheet. Any html documents that refer browsers to this stylesheet, will follow its rules. For example, any paragraphs will use the georgia font, size 18 px. You could if you wished, even control the style of tables, borders, backgrounds, etc, from this single stylesheet. That will be your choice as you develop your skills.

Now lets make a few alterations to our two web pages with Notepad, including the insertion of a reference to our stylesheet in each head for visiting browsers to use..

EXERCISE SIX B

Open up Page One (index.htm) with your text editor. add the new line of code (highlighted below in strong) inside the head!, and some additional code to the link as shown below:

<html>
<head>
<title>My First HTML Page</title>
<link rel="stylesheet" type="text/css" href="ourstyle.css" />
</head>
<body bgcolor="#ffffcc">
<h1>My First HTML Page</h1>
<p>Simple isn't it - a home made webpage in minutes. Paragraphs include automatic line breaks and spaces - but you can also add them using the break tag like this<br /> or like<br />this</p>
<p><em>This line will show as emphasised, I have learnt a new tag.</em></p>
<p><strong>This line will show as strong, I have learnt another new tag.</strong></p>
<h2>Unordered List of Fruit</h2>
<ul>
<li>Banana</li>
<li>Apple</li>
<li>Mango</li>
</ul>
<h2>Ordered List of Fruit</h2>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ol>
<p class="middle"><a href="two.htm">PAGE TWO</a></p>
</body>
</html>

EXERCISE SIX C

Now open up Page Two (two.htm) with Notepad, and add the same line, again, inside the head, and the addition to the link thus:

<html>
<head>
<title>My 2nd HTML Page</title>
<link rel="stylesheet" type="text/css" href="ourstyle.css" />
</head>
<body bgcolor="#ffffcc">
<h1>Page Two</h1>
<h2>Hyperlinks</h2>
<p>Welcome to Page Two.</p>
<table border="0">
<tr>
<td bgcolor="#ccffcc">
<h2>SPACE</h2>
</td>
<td>
<h2>TO RENT</h2>
</td>
<td>
<img src="biker.jpg" width="199" height="132" alt="Biker" />
</td>
</tr>
</table>
<p><a href="index.htm">HOME</a></p>
</body>
</html>

If you have correctly copied or pasted the code into your pages, and saved them, now check them out in the browser! Large green headers, smaller blue headers, three fonts. The important point is that the style with be constant across all of the pages of the website.

AND FINALLY...META TAGS

So you have built website that includes two linked pages, a stylesheet, a table, an image, etc, etc. You want people to find it? A few quick tips before you upload it to a web server - make it Search Engine Friendly. You can do this by:

  1. Decide which keywords you want people to find your site with when using search engines, and try to incorporate them into the titles (between the title tags in the html head), and on the first page - especially in the first paragraph.
  2. Seek link exchanges with other websites - especially large directories.
  3. Insert meta tags for keywords and a description.

As a final little exercise, I will show you how to create meta tags for Page One (index.htm), but remember, you have to decide upon your own keywords and description for your web pages.

Add the strong text in the head as in this example:

<html>
<head>
<meta name="keywords" content="banana, first, html, webpage, list" />
<meta name="description" content="An example of how to build a website" />
<title>My First HTML Page</title>
<link rel="stylesheet" type="text/css" href="ourstyle.css" />
</head>
<body bgcolor="#ffffcc">
<h1>My First HTML Page</h1>
<p>Simple isn't it - a home made webpage in minutes. Paragraphs include automatic line breaks and spaces - but you can also add them using the break tag like this<br /> or like<br />this</p>
<p><em>This line will show as emphasised, I have learnt a new tag.</em></p>
<p><strong>This line will show as strong, I have learnt another new tag.</strong></p>
<h2>Unordered List of Fruit</h2>
<ul>
<li>Banana</li>
<li>Apple</li>
<li>Mango</li>
</ul>
<h2>Ordered List of Fruit</h2>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ol>
<p class="middle"><a href="two.htm">PAGE TWO</a></p>
</body>
</html>


WHATS NEXT?.

HOME