More fun with tags
Alright, we have our first tags up and our page is looking nice, but there is a whole lot more to do, such as puting pictures in our page or links to other sites, so lets get started!
First, we will use the <img> tag to add an image, which follows the following format: <img src=images/smiley.png alt="A smiley" />, and makes this happen: 
The src portion of the tag lets the browser know where to download the image from and the alt portion show what to display on a browser that might not be able to load images, such as lynx for text only systems, or an aureal browser for the visually impared.
Another important tag is the <a> tag. As hard as it is to belive, sometimes people will want to leave your page. When they do so, we use the anchor tag to provide them a destination like so: <a href=www.google.com>Google</a>. This code would insert a hyper-link to Googles homepage for your user to navigate to.
As we mentioned earlier, it is posible to have your text formating in a seperate file to enable you to have the same style accross all of your pages that include this one file. To use this method, we use the format <link href="style.css" rel="stylesheet" type="text/css" /> to include the stylesheet "style.css" in our webpage. The formats for stylesheets use the following format:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #336699;
background-image: url(images/background.gif);}
.header {
font-family: Arial, Helvetica, sans-serif;
font-size: xx-large;
background-color: #006666;
color: #DCDCDC;}
This is pulled directly from the stylesheet for this page, and show how both tags (as in the body entry) and seperate class definitions (as in the .header definition) can be used to override the default settings or other settings for limited scope, useually within another type of tag, known as the <div> tag. The only purpose that the div tag serves is organizing a page into logical elements, that can then have styles applied using the following format <div id="header">. This would then apply the style "Header" to everything within the <div></div> tags.
Further reading
Some more in depth information on stylesheets can be found below.
- CSS Quick reference - A good quick lookup guide to get you going.
- Free CSS Templates - A collection of free CSS templates to use in your site, good to get up and going quickly or as a base to design your own from.