HTML Tag Reference

by Ross Shannon There are quite a lot of tags in HTML, and these tags are constantly being jostled about when new versions are released. Below is a current list of all the HTML 4.01-compliant tags. If you want to learn more about any one of these tags, try clicking on it and you'll be whisked away to a tutorial in one of HTML Source's darker corners. Page Navigation: Basic Structure | Links | Lists | Multimedia | Tables | Frames | Forms | Text Formatting This page was last updated on 2010-01-08

Basic Structure
<!DOCTYPE>

The DTD (Document Type Declaration), this tells your browser which version of HTML you're using. Make sure you use the right DTD, or your page may display incorrectly.
<html>...</html>

Standard opening and closing tags for any HTML page. Enclose everything else in these. Container tag.
<!-- ... -->

A comment — whatever you put here will be skipped over by the browser.
<head>...</head>

Starts the header part of your document. Everything between these is mainly used to help your browser and search engines classify your page. Using this is optional, but recommended. Container tag.
<title>...</title>

Whatever is between these tags will appear in the blue bar at the top of the screen.
<meta>

A group of tags that give page and creator information specifically to the search engines.
<base>

Changes the default link target or relative link URL, useful if the page is read on another server.
<link>

Allows you to associate stylesheets and a favorites icon to your page.
<body>...</body>

Everything visible on your page goes between these tags. Everything. Container tag.

Links
<a>...</a>

Makes the enclosed text or image a hyperlink to another file.

Lists
<ol>...</ol>

Creates an ordered list, where each item is numbered in order. Container Tag.
<ul>...</ul>

Creates an unordered list, with each item bulleted. Container Tag.
<li>

Each list item begins with an li, and they are all placed in either an ol or ul.
<dl>...</dl>

Creates a definition list.
<dt>

Creates a definition term.
<dd>

Creates a definition, which appears below its parent term and indented from the left.

Multimedia
<img>

Places an image on your page
<embed>

Adds a multimedia element directly into your page, allowing your browser to play it with a plug-in.
<script>...</script>

Adds a script, usually a JavaScript into your page.
<noscript>...</noscript>

Enclose anything you want displayed by browsers that do not support scripts.

Tables
<table>...</table>

Places a table on your page. Container Tag.
<caption>...</caption>

contains the caption of the table, the title of sorts. It will appear across the top unless specified otherwise. This tag should not be contained in a tr or td.
<tr>...</tr>

starts a new table row. Cells go inside this. Attributes are the same as td's.
<td>...</td>

encloses a table cell. Content goes in these.
<th>...</th>

same as table cells, but with all contents bold and aligned to the centre.
<thead>...</thead>

Defines the header part of a large table. Wrap the tags around the rows/cells you wish to define as the header.
<tbody>...</tbody>

Defines the main body of a complex table.
<tfoot>...</tfoot>

Wrap this around the footer part of your table.
<colgroup>

Allows you to set attributes for the entire column. Each column has to be defined sequentially.

Frames
<frameset>...< /frameset>

Starts a new frame layout. When constructing a frame page, no body is used. Container Tag.
<frame>

Defines a single frame within a frameset.
<noframes>...< /noframes>

If a visitor has an old browser which doesn't support frames you can leave a message or some content between these tags.
<iframe>...</iframe>

Places an inline or 'floating' frame. This can be placed anywhere on a normal page, i.e. it doesn't need to be part of a frameset.

Forms
<form>...</form>

Begins a form area. Add in any form elements you want to use between these tags. Container Tag.
<input>

Allows you to add various user input fields, like text-boxes, checkboxes, radio buttons, submit and reset buttons, depending on how you set the type attribute.
<textarea>...</textarea>

Adds a multi-lined text area, suitable for input of a larger amount of information than the single-line text box. Any text added between the tags is placed in the area when the page loads.
<select>...</select>

Sets up an empty drop-down selection box. You can add choices with the <option>...</option> tag.
<fieldset>...</fieldset>

Allows you to group form elements together into logical arrangements.
<legend>...</legend> You can title your fieldsets with <label>...</label>

this tag.

You can make the explanatory text next to a form element into part of the clickable area with this tag, which makes selecting elements much easier.

Text Formatting
<address>...</address>

Encloses the signature and address of the author, displayed in italics.
<b>...</b>

Makes the enclosed text into bold text.
<big>...</big>

Makes the enclosed text one size bigger.
<blockquote>...</blockquote>

Indents the text in from both sides.
<br>

Stops the current line and goes on to the next.
<center>...</center>

Aligns the surrounded objects (anything from text or images to forms etc.) to the center.
<cite>...</cite>

Includes a citation, and is usually rendered as italics.
<code>...</code>

If you are including either computer or HTML code into your documents wrap these around it. It is rendered in small text.
<dfn>...</dfn>

A definition. As usual with these things, rendered in italics.
<div>...</div>

Surround distinct sections of your page in divs, primarily to align them, but many other attributes are supported and divs can be used to set up layers too.
<em>...</em>

Emphasises the surrounded text, changing it to italics.
<font>...</font>

Sets the font properties for the selected text.
<hx>...</hx>

Sets the text as a heading, with values of h1 (the biggest) to h6 (the smallest).
<hr>

Inserts a grey horizontal line across the page.
<i>...</i>

The default tag for italics.
<kbd>...</kbd>

Implies that the text should be entered on the keyboard. It is rendered monospaced and small.
<nobr>...</nobr>

Tells the enclosed text not to wrap at the edge of the screen, but continue on as long as it needs.
<wbr>

If you need a line break in a block of text you have set in nobr, add this.
<p>...</p>

Makes the enclosed text a paragraph, with lines skipped at the top and bottom.
<pre>...</pre>

Displays text in fixed-width font and retains the formatting of the original text (i.e. spaces and line-breaks).
<q>...</q>

Used to mark up short, inline quotations. Some browsers will add quotation marks around the text. <s>...</s> (or <strike>...</strike>) Displays the text with a strike-through.

<samp>...</samp>

Indicates sample output from a form or program. Text is rendered in small font.
<small>...</small>

Makes the enclosed text one size smaller.
<strong>...</strong>

Creates emphasis for the selected text, rendered in bold.
<sub>...</sub>

Renders the text in subscript, which is words under the normal text. For example:
this

<sup>...</sup>

The sister tag to <sub> above, this renders text in superscript. Like this
<tt>...</tt>

Renders text in fixed-width, mono-spaced font; like an old typewriter.
<u>...</u>

Displays the surrounded text underlined.

The History of HTML Version
by Ross Shannon HTML is an evolving language. It doesn’t stay the same for long before a revised set of standards and specifications are brought in to allow easier creation of prettier and more efficient sites. Let’s start at the beginning... Page Navigation: HTML 1.0 | HTML 2.0 | HTML 3.0 | HTML 3.2 | HTML 4.01 | XHTML 1.0 | HTML5 This page was last updated on 2010-01-08

HTML 1.0
HTML 1.0 was the first release of HTML to the world. Not many people were involved in website creation at the time, and the language was very limiting. There really wasn’t much you could do with it bar getting some simple text onto the web. But then, just that got the beardos afoamin’ back in the day.

HTML 2.0
HTML 2.0 included everything from the original 1.0 specifications but added a few new features to the mix. » HTML 2.0 was the standard for

website design until January 1997 and defined many core HTML features for the first time.

HTML 3.0
More and more people were getting into the HTML game around now, and while the previous standards offered some decent abilities to webmasters (as they became known), they thirsted for more abilities and tags. They wanted to enhance the look of their sites. This is where trouble started. A company called Netscape was the clear leader in the browser market at the time, with a browser called Netscape Navigator. To appease the cries of the HTML authors, they introduced new proprietary tags and attributes into their Netscape Navigator browser. These new abilities were called Netscape extension tags. This caused big problems as other browsers tried to replicate the effects of these tags so as not to be left behind but could not get their browsers to display things the same way. This meant that if you designed a page with Netscape ETs, the page would look bad in other browsers. This caused confusion and irritation for the markup pioneers. At this time, a HTML working group, led by a man named » Dave Raggett introduced a new HTML draft, HTML 3.0. It included many new and improved abilities for HTML, and promised far more powerful opportunities for webmasters to design their pages. Sadly, the browsers were awfully slow in implementing any of the new improvements, only adding in a few and leaving out the rest. Partly, this failure can be attributed to the size of the overhaul; and so the HTML 3.0 spec was abandoned. Thankfully, the people in charge noted this and so future improvements were always designed to be modular. This meant they could be added in stages, which makes it easier on the browser companies.

HTML 3.2
The browser-specific tags kept coming, and it became increasingly apparent that a standard needed to be found. To this end, the » World Wide Web Consortium (abbreviated to the W3C) was founded in 1994 to standardise the language and keep it evolving in the right direction. Their first work was code-named WILBUR, and later became known as » HTML 3.2. This was a toned-down change to the existing standards, leaving many of the big steps forward for later versions. Most of the extensions tags that had been introduced by Netscape (and to a lesser-extent, Microsoft) did not make it into these new standards. It

soon caught on and became the official standard in January ’97, and today practically all browsers support it fully.

HTML 4.01
HTML 4.0 was a large evolution of the HTML standards, and the last iteration of classic HTML. Early in development it had the code-name COUGAR. Most of the new functionality brought in this time is from the ill-fated HTML 3.0 spec, as well as a host of trimmings on old tags, a focus on internationalisation, and support for HTML’s new supporting presentational language, cascading stylesheets. HTML 4.0 was recommended by the W3C in December ’97 and became the official standard in April 1998. Browser support was undertaken surprisingly earnestly by Microsoft in their Internet Explorer browser, and the market-leading IE5 (and current successor IE6) have excellent support for almost all of the new tags and attributes. In comparison, Netscape’s terribly flawed Navigator 4.7 was inept when it came to HTML 4.0 and even basic CSS. Modern browsers however, are a vast improvement. Once HTML 4.0 had been out for a little while, the documentation was revised and corrected in a few minor ways and was entitled HTML 4.01; the final version of the specification. Head on over to the W3C site for the » official documentation; and to read more about the new tags, attributes and redundancies brought about by this new standard, read our article, HTML 4 Explained.

XHTML 1.0
Close to the beginning of the 21st century the W3C issued their » specifications of XHTML 1.0 as a recommendation. Since January 26, 2000 it stands as the joint-standard with HTML 4.01. XHTML marks a departure from the way new specs have worked — it is an entirely new branch of HTML, incorporating the rigours of » XML, so that code must be properly written if it is to work once it reaches the reader’s browser. There weren’t many new or deprecated tags and attributes in XHTML, but some things changed with a view of increased accessibility and functionality. It’s mainly just a new set of coding rules. Read all about it properly in XHTML Explained.

HTML5
After HTML 4.01 and XHTML 1.0, the guys who were in control of HTML’s direction got sidetracked working on a new proposal for XHTML 2. At the same time, clever web developers were innovating

constantly, hacking new functionality into websites and browsers. The path that XHTML 2 was taking started to look both boring and unrealistic, and it became pretty clear that a new approach was needed. It was around this time that a bunch of pragmatic web technology fans, browser programmers and specification writers started building something of their own, outside of the usual W3C procedures. They called themselves the Web Hypertext Application Technology Working Group (WHATWG), and developed a new spec. After some soulsearching, the W3C decided that HTML was still the future of the web. XHTML 2 was discontinued and HTML5 became the new specification that everyone’s effort should be poured into. HTML5 is designed for the web, both now and in the future. This is the specification that we will be working with for the next decade at least, so the process of its development is relatively slow and considered. Many parts will be familiar, but there’s also plenty of new elements, attributes and abilities to get excited about. You can check the latest version of the spec if you want all the detail. A full tutorial on HTML Source about the changes in HTML5 is forthcoming. Throughout HTML Source I will be teaching using the HTML 4.01 standard. The percentage of people using recently released browsers is high enough now for it to be safe to design sites using new HTML 4.01 elements and stylesheets. I’ll make sure that those who won’t see the optimum version of your site will still be able to use it, and wherever a relatively new piece of code is taught in a tutorial I will always make reference to that in a browser compatibility box.

My First Page
by Ross Shannon So we’re set? You have your text-editor at the ready (preferably NotePad or TextEdit), you know what all the acronyms stand for, and you want to write something? Great, let’s get going. Let’s just go through the steps involved before I actually introduce the code. Today,
• • • •

you will write out the basic format, or skeleton, of a HTML page you will save it as a HTML file you will view it in your web browser you will smile at the fact that it actually worked

Page Navigation: A Basic Page Format · Tags, eh? · Structure of HTML Elements · So let’s make a page | Saving your Masterpiece | Having a look

This page was last updated on 2010-01-08

A Basic Page Format
All pages follow this basic structure. Let’s start with the first tags you’re going to learn.

Tags, eh?
Yeah. They are the things between the <> brackets. I’m sure you’ve seen them in someone’s code before, but if you haven’t, right-click this page and select “View Source”. The code that makes this page will appear. Have a quick glance through it. Yes, it probably makes little sense yet, but that doesn’t matter at the moment. See how, later on, there’s some text? It’s the words you’re reading now. Surrounding all that is a load of stuff, all being encased by <>s. That’s all the HTML that goes into making this page.

Structure of HTML Elements
Tags follow a common structure too. Some of those tags you can see are ”start tags”, like <b>, and others are paired with them and called “end tags”. They look like </b>. Together, a start tag and an end tag form a HTML element. A start tag opens an element and an end tag closes it again. For example, to make text bold, you use the b element. So, at the point in your text that you want the bold to start, you just stick the angle-brackets around that and put <b>, and when you want it to stop, you put </b>. An end tag is simply the start tag with a forward slash in front of the element name. Some tags won’t need that end tag, but most do, so don’t forget it.

So let’s make a page
Oh yeah. Ok, first step. Open Notepad, or any other text editor. Type this:
<html> </html>

These are the standard start and end tags on any page. Note that when I say “standard”, that means “you must put it there”. HTML elements can contain text and other HTML elements inside them, and these two tags will contain the rest of the HTML that makes your page. Now we’ll add in the rest of the structure. Modify your page to this:

Very Important <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>My First HTML Page</title> </head> <body> My text goes here. </body> </html>

That complicated looking bit at the top isn’t something you need to worry about just yet. It basically tells your browser which version of HTML you’re using in your page. You are going to be using HTML 4.01, the most recent version of HTML. Later you may move to a newer version, but HTML 4.01 will be perfect for most of your sites. HTML pages are made up of two distinct parts — the head part, and the body part. The head part contains things that won’t appear on your page. Most of the elements that go in the head part are advanced stuff for search engines and the like, so the only one you need to know for now is title. The text you put into the title element is the text that appears at the very top of your browser window when you view the page. You can type whatever you want in that. No other HTML will work in here, although special characters will. Don’t forget to add the title, because without it, that bar will have the URL of your page in it, and that’s just nasty. This text will also be used if a reader bookmarks your page, and in search engine listings, so take the time to write a unique title for each page. The body section is the main part of your page. Everything between those two tags will be visible on your page. So type something there now. Whatever you want, I don’t care. Be spontaneous. Now your page looks something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>My first HTML page</title> </head> <body> <b>Hello!</b> I hope you’re having as much fun reading this as I had writing it! </body> </html>

That’s about as complicated as I’m going to make this tutorial. If you want to format your text, check the next page where you will find all the tags needed to make your page more presentable. For now, stick with saving your page and checking how it looks...

Saving your masterpiece
Now that you have your first page written, you need to save it to your computer’s hard disk, and then open it up in a different program (your web browser). This part can be a little tricky, so please follow along closely. When you double-click a file on your computer’s desktop, the computer knows what program to open the file in by checking the file’s “extension”. This is the characters that come after the name of the file. So, for example, .mp3 files will open in a program that can play music, and .txt files will open in a text editor. You need to give your document a file extension of ”.html”, which will tell it to open the file in your web browser, such as Internet Explorer, Firefox or Safari (at least one of these programs will have come with your computer — in fact, you’re reading this in one of them right now!). Right now you should be editing your HTML page in a text editor, which normally saves files with the extension “.txt”. We want to make it save in “.html” instead, so, in your text editor click File → Save As…. Find the place on your hard drive where you want to keep all your pages (I would recommend you create a new folder on your desktop and keep all of your documents together). If you use Microsoft Windows, there will be a box labelled “save as type”; change it to “all files *.*”. This means that you can save the data (in this case, some text) into any format. Now type in the name index.html for your file and click save. Finito. sourcetip: After you have done this once, the next time you change your code, you will only need to press Save, not Save As…, because the computer now knows this is a HTML file. Your page’s filename can consist of any combination of letters, numbers or _ (underscore) and - (hyphen) characters. It is a good practice to start the filename with a letter and use lowercase letters at all times. This will make sure that you won’t get any capitalisation errors when people try to type your page’s address into their web browser. You should always call your homepage index.html — this will be important later on. Question: how come I sometimes see some pages named “something.htm”? Well, a long time ago back in the 1990s, file extensions were limited to only three letters, hence “.htm”. You could name all your files using .htm as the suffix, but there are so few people

with operating systems that old that you’re better off just using .html and being done with it. Note to users of word processors If you’re trying to use something like Microsoft Word to make your pages (which is a really bad idea), you don’t want to be saving all of the editor’s values for margins and formatting etc. when you save your html file, as they can’t be read by your browser. So when saving your file, make sure to save it as textonly, and only the things useful to your browser will get saved. Again, I implore you all to use just a simple text editor while you are learning HTML. It will mean that much fewer things can go wrong, and you will learn so much quicker!

Having a look
Well, you’ve been toiling away on this page for hours, has it paid off? Let’s check. Create a new web browser window to open it in (so that you can keep this page open when you do it) — press Ctrl + N. Now, in that new one that should have opened, go to File → Open. Click Browse… and find the file you just saved (“index.html”, unless you were cheeky and called it something else). Click the Open button. Your page will appear in all it’s glory. You did it! Huzzah! Ok, now smile. ☺

Basic Formatting
by Ross Shannon Ok, so you have written a short page to prove you can write HTML. It's wonderful and all, but it lacks that certain something doesn't it? You want things to stand out more, want to skip lines and use italics. You want to format. Page Navigation: Formatting the Text | Tag Questions | Skipping Lines | Attributes | Headings · So let’s see them! | Lines | Comments | Spaced Out | First Validate This page was last updated on 2010-01-08 Note: You should have both your editor and your browser open at the same time while you're coding. Whenever you make changes to your html code, save it, switch to your browser and press refresh and the page will update itself to the newest version.

Formatting the Text
Well, you remember from the last tutorial how you needed a start tag and an end tag right? Start with the start tag, end with the end tag. Simple. You already know that <b> means bold. Let's refresh. Hi, my name is Ross and I'm brilliant. Yeah, that's right I'm brilliant! Ah...now I feel good. Plus, I cunningly disguised that as a lesson in HTML. To make the bold text, here's what I did:
<b>brilliant</b>

That's all there is to it. Just surround the text you want in those tags. Hoping it'll get more exciting soon, eh? Alrighty, want to learn italics? That's just as easy. The code for that is i. So, in the same fashion: <i>superb stuff</i> becomes superb stuff. Underlining is laughably easy too — just use <u>
<u>Just hit me with the underline, maaan</u>

Harking back to the days of ration cards, you can even make your text look like it was bashed out on a typewriter — use tt.
<tt>Day twelve. The Germans have surrounded our farm</tt> becomes... that in this sort of text.

The examples above all use presentational tags. You may want to use logical tags instead, which make your content more accessible. Your browser only displays one space between words. If you add in more spaces in the source code, they will be ignored. If you want to forcefully add in extra blank spaces, you can use the special character &nbsp;, which stands for 'non-breaking space'. With this you can create indents for your text.
<p>&nbsp;&nbsp;&nbsp;This text will be indented</p>

Tag Questions
Do the tags have to be in CAPITALISED text? Nope, they don't. You can use <b> or <B>. I prefer to make all of mine lowercase because it looks much neater when you're reading and editing your code, and suits the version of HTML I code in, but it doesn't change how they work. It's up to you. Can I mix them together? You really are getting adventurous aren't you? Yes, you can. Simply surround the text you want with both sets of tags — <b><i>like
this</i></b>

Something to note however, is the order you put them in. If you start with b, you end with b. In the example above, <i> was the last tag opened, so it is the first one closed. This is something you should remember, because the importance of your tag syntax becomes critical later on. This style of opening and closing is called LIFO — Last In, First Out. Putting tags inside each other like this is called nesting.

Skipping Lines
You've probably noticed by now that when displayed in a browser your page seems to have lost all its paragraphs and whatnot. Your browser ignores any returns and indents. So what do you do? You use <br>, which stands for 'line BReak'. This is known as an 'empty element' — a tag which doesn't need an end tag — just type that and the text will start on a new line. Or how about skipping a line and creating paragraphs? To do that, use <p>, which stands for 'Paragraph'. There are two ways to go about using p. You can just put it at the end of a paragraph to skip a line on to the next; or you can put a <p> at the start of the paragraph and a </p> at the end. I prefer the latter, because it looks neater, and allows you more flexibility. You should use it too.
<p>Welcome to my page.<br> I hope you enjoy your visit.</p>

Attributes
Now I'm going to get slightly more advanced. To center text, the basic tag is <center>. But, this is being replaced, so a better way of doing this is to align a paragraph. This involves giving the tag an attribute. The tag on its own does something, but then you can add attributes to further define what the tag does. You will see many other tags having attributes later on — they are a very important part of HTML. The structure of an attribute is: Very Important <tag attribute="value">Affected Text</tag> All tags can have several attributes at a time, but only some attributes work for certain tags. It's just a matter of learning them off. Also, don't forget to encase the value in quotation marks. So, to add the center value to the p tag, the structure is:
<p align="center">Centered Text</p>

Compare that to the example above to see what's what. p is the tag, align is the attribute, and center is the attribute's value. Note that when closing the original tag (p), all its attributes are taken with it, and all you need is the normal closing tag (i.e. don't start putting attributes into it). Obviously, if it can be aligned to the center, it can be aligned in other ways too. You can align left and right. But there's no point in writing <p align="left">, because all text aligns to the left anyway. This is known as a default.

Headings

In the beginning, heading tags were invented as a graded method of information layout and division. You used big headings for the main points in a page and go down through the numbers. There are 6 gradings or levels of HTML headings: <h1> to <h6>. Graphically, these create decreasingly large text, with h1 being the biggest, and h6 being the smallest of the group.

So let’s see them!
Oh, that's my cue. Ok: here are the examples:

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

You just wrap the preferred heading tag around the text, like so:
<h3>Heading 3</h3>

The text will then appear bold and big. One thing to note is that headings are always apart from the rest of your text, like a paragraph. This is a property of block-level tags. You cannot flow headings and normal text together. If you want text to follow straight away, you should just change the font size and not use a heading. The title of your page should be made into a level-one heading. The rest of your page should be divided into sections with further heading tags, getting progressively smaller for points and sub-points. Try not to skip levels (like going from a <h2> to a <h4>). sourcetip: Headings take on the color and font face of the surrounding text, so you can change a headings color, say, by wrapping a font color around the h tag. Read this tutorial on font and color for more. Headings can also be aligned. Values are center, justify, left or right.

Lines
Some other very simple stuff is using lines across the page. To make them, use <hr>, which stands for 'Horizontal Rule'.

Just put that anywhere on your page (no end tag is needed) and the text will stop and a big will appear and then your text will continue on. Nice, eh? These can be manipulated through attributes too. They can be aligned left and right, like p above. They also have two other attributes that relate to the size of the line. <hr width="100"> would create a little guy like that. You are specifying the width in pixels here, or you could use a percentage, like <hr width="80%">, which will create a line that is 80% as wide as the available screen width. To make stronger lines, <hr size="4" noshade> would create a big, beefy Did you see that noshade bit there? That is a special attribute unique to hr, and it doesn't need a value. It stops the hr having two shades of gray in it. It also shows that many different attributes can be used on the same tag at the same time. Experiment with them a bit.

Comments
Once your documents start getting filled with confusing tags and sections you're going to need to know which part is which. You use HTML comments to add notes to your code so that you can read it easily the next time you come back to edit it. The code for a comment is a little different than for other tags:
<!-- Navigation starts here -->

Anything you put between the <!-- --> lines will be completely skipped by your browser. You can add in some hash marks (#) to make your comments stand out. When scrolling through the HTML code of a page you want your structure comments to jump out. Comments will be used later on in HTML to hide things from old browsers. They're very useful — use them and help yourself out.

Spaced Out
How you lay out your source code is a matter of taste in most regards. You can indent some tags off the left margin so they're easy to see, and skip lines after each paragraph. It doesn't matter much to your browser, which usually disregards spaces, tabs, blank lines and other 'white space' characters when it is displaying your pages. I should warn you that sometimes however, extra spacing characters will mess up something on you. It's not serious, but a line like the one below should be fixed:
<p><u>Some underlined text. </u></p>

The space character before the closing </u> tag will make the underline effect run on for longer than the sentence, which looks

sloppy. Later on, with table tags especially, leaving in spaces like this can ruin a layout by adding gaps between your elements. So, code tightly, with no spaces between text and end tags.

First Validate
You've probably introduced quite a lot of new tags into your page now. Validation is the process by which you make sure that in all of your tinkering, you haven't introduced any nasty mistakes into your lovely simple code. To check if a HTML file is valid, you can use an online validator like the » W3C validator. It's a free service that scans your file (either online or any page on your computer) and returns a list of errors, if it finds any. It's easy to use — enter the address of a webpage into the form and it will go off and do the necessary tests. When an error is diagnosed it is usually a simple process to track it down and eliminate it with great prejudice. Don't take the validator's warnings lightly; this is an important process, and one that many careless coders disregard. Later on, they regret it. Oh yes they do. If your code is valid, it has a much better chance of working in every browser, which means more people can read your stuff. While the chances of having many critical errors in your code are small at the moment, once you have an entire site to maintain the gremlins can often sneak into your code, threatening the accessibility of your pages. So, validate often. Whenever any more major work is done on your site, run it through the machine again just to make sure everything's hunky-dory. It'll keep me happy.

Basic Links
by Ross Shannon Once you have the ability to create HTML pages, you’ll want to learn how to create links between them, so that you can start building a site. Links are the essence of HTML — they are what makes it unique. While you learn links I’ll also teach you the fundamentals of site organisation and structure. Page Navigation: First Links · Link Structure · Linking to email addresses · Linking to pictures · Linking to files | Absolute and Relative Links · Linkal Gymnastics · Outward Links | Site Structure This page was last updated on 2010-01-08

First Links
Ok, you have a page that you learned how to write in the first lesson. Now, you’re going to need another page. It doesn’t have to be anything great, just a very basic page will do. You can copy the first page and just save it as a different name if you want. Just make sure you know the names of the two files and that they are in the same folder. Don’t forget to call your homepage index.html. sourcetip: Always use lowercase letters when naming html files, images and folders. Most web servers (the computers you’ll eventually be putting your site onto) are case-sensitive, which means it matters to them whether your files use capital letters or not. When linking to pages or typing in URLs, you don’t want to have to remember the case of each letter, so if everyone uses small letters the problem goes away.

Link Structure
Like all tags, links follow a structure, and have start tags and end tags. Put this line of code on one of your pages. Very Important <a href="theotherpage.html">The Link</a> Explanation:
• • a: a stands

for Anchor, which means Link. This is the tag that makes it all

happen. href: Means Hypertext REFerence. The href part is another attribute, with the location of the other page as its value. Just change theotherpage.html to the name of the second file. Don’t forget the quotation marks!

Whatever you put inside the link tags will become a link, coloured blue and underlined. When you rest your mouse on it your cursor will turn into a hand and the URL of the page will appear in your browser’s status bar (at the bottom of the window). If you want to make links to other parts of your page (for example a link to the top of the page), set up some internal links. Changing the default colours of the links is dealt with in body attributes.

Linking to email addresses
If you want to let people email you by clicking a link, you use this code: <a href="mailto:bruce@example.com">mail me</a> to create this — mail me — which will open the users email program with your address in the To: box.

Linking to pictures

Linking to a picture file is practically the same as to a html file. Just include the name of the file, and do not forget the correct suffix — i.e. if it is a gif or a jpg. For a rundown on the file formats for images on the web, read this. If you want to use a picture as a link, read the next tutorial.

Linking to files
You link to a file just like a picture. The only difference is that it won’t open in a browser, but instead will download onto a specified place on the reader’s hard drive. An example: <a href="ambient.mp3">download the song (2.6MB mp3)</a> Embedding a file directly into a page is a different process. We have a page on Internet file formats too.

Absolute and Relative Links
Internet addresses closely follow the established hierarchy structure you’re probably familiar with on your computer’s file system. First comes the Internet domain, like www.example.com. Next comes the directories (folders) that contain the file and finally the file’s name, with the appropriate file type extension. Each segment of an url is separated with a forward slash. Always remember: on the Internet, all slashes go forwards. There are two different ways to point your links to a file. “Absolute links” include the full website address, including the http:// and www. bits. “Relative links” are much shorter and more manageable, and can only be used to point to other pages on the same website. For instance, say you have a page called page1.html in the “links” directory of your site. The absolute href to this page is http://www.example.com/links/page1.html. So, you put that link anywhere on any page, on any site and it will always go to that page on the web. Relative links can only link to a page from the same site. The address is always relative to the position of the second file. If you were linking to that same page from a page in the same directory, the href would be just page1.html. If you were linking from your homepage, i.e., in the root directory, the link would read <a href="links/page1.html">, as you would have to go down into the directory first, and then get the file. sourcetip: If you name files index.html in your directories, you can make links to these pages by just linking to the directory name. Your browser will always pick up index as the main page for that folder. This means you can condense href="folder/index.html" into href="folder/". The

slash tells the browser it should look for a folder, and not a file. Don’t forget it!

Linkal Gymnastics
If you need to go up a directory, and then back down into another one, you’ll have to understand how your site is laid out. Using HTML Source as an example, we are now in the “myfirstsite” section. Have a look at your address bar to see. If we wanted to link relatively to the “images” section, we’d have to go upwards one directory and then down into the images directory. So the full relative href would be
"../images/index.html"

See the two dots? They mean “go up a directory”, towards your root. So no matter how deep into your site you are, you can always come all the way back with a couple of ../../’s. Just count the directories until you’re at the right level. sourcetip: If you want to link to a page that is near the top of your site (not deep in directories), you can start the link with a slash. This means “start at the root directory”. So, the href above could just be /images/. This saves you having to put in loads of ../../s. A link back to your homepage is always href="/"

Outward Links
On outward links (links to other sites), you must always remember to prefix the address with http://. Otherwise, the link won’t work, the browser will look for a file called www.yourhtmlsource.com in your site. You will be linking to us, right? You’ll be my new best friend if you do, cheeky. To do this correctly, you’re basically just offering an absolute link, like above. So, the correct address to link to would be http://www.yourhtmlsource.com/. Notice the ending slash? That only goes there for directories (i.e. folders) or domain names, as in this example. Don’t put a slash after a .html link, just for directories like a .com or an address without a suffix.

Site Structure
Without a simple game plan, your site could soon be very hard to find stuff in for you, what with all the files you keep piling into it. Thus, you should group pages of similar theme into folders (directories). Keep all your images in one folder too, away from your html files (call the folder “images” or “media” or something like that). I would also advise you to work on a template of your design. It may not be important now, as your site may not have a distinctive design,

but later having this file will save you hours of time. What you do is save a file with no content, just the layout of your pages as TEMPLATE.html in each directory of your site (capitals so it stands out), with the links all correct. Then when you’re adding a page to a folder, you just open this file and add your content into it, and save under a different name, leaving template.html empty, ready for another use. To see our template for this directory, see this. Check, we have one in each directory. Say you had a site about the solar system (just say). Keep all the files about mars in a folder called “mars”, with all the pictures of mars in a directory called “images” in the directory called “mars”. And keep the pictures of Uran— ...no. I am above that. Speaking of pictures....

Basic Images
by Ross Shannon Now, you’ve got some stuff written, and a couple of linked pages. Your site is looking far more convincing now. But there’s still something missing, isn’t there? You probably can’t help but want to fill your pages with images. The beauty of it is that it’s really easy. In fact, if you’ve been paying attention so far, you should have no problem at all. Let’s get busy. Page Navigation: Inserting an Image | Linking Images | Basic Attributes This page was last updated on 2010-01-08

Inserting an Image
This is the basic stuff — just getting the image on your page. The code for inline images is img. You use the same type of attribute as the href attribute from the last article, so having used that before will help you get your head around this quicker. To keep it simple, place the image you want to use in the same directory as the HTML file it is going to be in. Say your image is called ’go.gif’, the code to insert that image into your document is: Very Important <img src="go.gif" alt="Go"> The image will appear on your page like this. 1. src stands for “SouRCe”, so what you’re saying is the image source is go.gif. Make sure you’ve gotten the image file type right. If you’re linking to a photograph, it is more than likely a .jpg. The src bit is mandatory in an img tag,

which means you have to put it in. Obvious really, otherwise there’d be nothing there. 2. alt stands for “Alternate text”. You should use this attribute to describe the image for people who browse with images turned off, or for visitors who aren’t able to see your images. The alt attribute is also required, so you must write one for every image you use. You can put in the url of any image on the web into the src, but really you should only use relative addresses to put images onto your pages. Adding external images means a reader has to connect to multiple servers when they load your page, and that adds lots of extra time to your page’s download. Not a good thing. You can save images from other web pages into your own directory and use them from there if you want, as long as the images are free (you should always check with the site owner). Once you have entered the src for your image and saved your HTML file, you can open it in your browser and test if it worked. If your image doesn’t appear, and you get an empty frame or a rectangle with a little red ‘x’, there is a problem with the src value you have provided. Check that you have set the address correctly and that the image is where you say it is.

Linking Images
If you want to link to another file, by clicking on an image to get to it, all you do is use the same tag from the earlier lesson, and wrap the a around the image code, so that the image is in place of the text you’d normally have. So, to make go.gif a link to fullindex.html, you’d write:
<a href="fullindex.html"><img src="go.gif" alt="Go to the full index."></a>

This would create: ...which, as you can see, doesn’t look quite the same as the image above. This is because the browser puts a border around the image to show that it is a link, coloured the same as your link colours, which we’ll be getting into in the next tutorial. Of course, it’s not always welcome, so to get rid of the border, add this attribute to your img tag:
<img src="go.gif" alt="Go to the full index." border="0"> The default border thickness is 2, so you can set it to

1 if you want a thinner border, or to anything higher for a big bad-ass border. You can even add borders to images that aren’t links, which will be the colour of your text.

Basic Attributes

Since you already know how to align stuff like paragraphs, I may as well add aligning images to this page. img aligning is done in much the same way, except now you have 3 new values you can use (only for images, mind): top, middle and bottom. They are used in a similar fashion, as attributes to the tag like so:
<img src="monkey.gif" alt="A monkey" align="left">

Here are some examples Aligned left. Notice how the text hugs the image, instead of starting under it.

Aligned right. The image hops over to the side, and if the text reaches it, it just drops down beside it and continues.

Aligned top. That means the text will align to the top of the image and then go under. Note that with these last three, you only get one line before it drops under the image.

Aligned middle. Are you getting this yet?

Aligned bottom, keeping everything all straight.

<body> Attributes
by Ross Shannon Now that you are a bit of a genius at HTML, you will want your site to start looking more presentable. That means good use of colour, and an attractive design. Up until now, the only colours on your page have been white in the background, black for text, and blue for links. Wouldn't you like to change them for something far more stylish? Page Navigation: The <body> tag · bgcolor · text · link · vlink · alink · background ·

margins | Step into Style | A word on colour schemes · Pick your background well This page was last updated on 2010-01-08

The <body> tag
Now that you have the gist of using attributes in tags, this should make perfect sense. Remember the <body> tag from the first page, which everything visible on your page goes into? That is the tag we'll be adding to in this, as it's been left untouched up until now. There are 7 attributes to be added here, and they all change how your page looks.

bgcolor
This is the colour of the BG, or BackGround, of your page. You need to put the colour in as a HEX code, like the rest of these colours. What are HEX codes? Glad you asked. Because it means you have to read this definition! If you want to see a list of HEX codes for 216 different colours, look at this chart. The code is:
bgcolor="#FFFFFF"

Note that, even though the default BG is white, you should still code in #FFFFFF, because older browser's default BG is a nasty grey.

text
This will change the colour of all the text on your whole page, unless you have changed the colour manually (find out how in the text section). Your best bet here is to leave it black, because that's the easiest to read. Code!
text="#000000"

link
Instead of the normal blue, you can now change the colour of all your links to something a bit more classy.
link="#FF00FF"

vlink
Links change colour once you have clicked on them, from blue to purple. The V stands for 'Visited'. You can change this too, but make sure it is visibly different to the link colour, otherwise people will get confused.
vlink="#660066"

alink
When you click on a link, it changes colour momentarily, to show you that you've clicked it I guess. If you click the 'Back' button, it is highlighted as being Active so you don't click through on it again. The default is usually red. Make sure you highlight it right; it's a nice feature.
alink="#FF0000"

background
If you want to put an image as your background, use this attribute, and set the value to the same as you would for an image src (don't know how? Read the preceding lesson on images). You can also link to an image from another site, by giving the entire URL.
background="http://www.yoursite.com/media/BACKGROUND.gif"

Whatever image you choose to use, it will be tiled across your page, filling it up. That means it will repeat itself across your page, so choose one that doesn't look too obvious. If you want your background to be set in place and not scroll, add the attribute bgproperties="fixed" into the body. This will leave the image as a watermark.

margins
There are two sets of margins on a page, the ones at the sides and the ones at the top and bottom. The two main browsers use different attributes to put in these margins, so when you change one, change the other as well.
• •

For Internet Explorer: topmargin="0" and leftmargin="0" For Netscape: marginheight="0" and marginwidth="0"

Despite this, the units of measurement are the same — pixels, so to make your margins the same in both browsers just set them both to the same value. Show me the code So now, a complete body tag would look something like this:
<body bgcolor="#ffffff" background="bubbles.gif" text="#000000" link="#3399ff" vlink="#9966ff" alink="#000000" bgproperties="fixed" topmargin="0" marginheight="0">

Step into Style
During the time you've spent learning HTML so far, you may have heard mention of CSS, or Cascading StyleSheets, and wondered what

they were. I'm going to explain the whole thing now, and hope that you're ready for it. I do have an entire stylesheets section, and a dedicated introduction to CSS here, but think of this as an induction to the introduction. There are many tags in HTML that exist purely to create a certain look on your pages. There are also techniques, like using transparent images to space your page out. This was all well and good a few years ago (and is why you'll see practices like these mentioned in older HTML tutorials...), but they are not at all suitable for the web that exists today. These techniques create accessibility problems, add to the bulk of your HTML files, and are generally awkward to work with. Nowadays, we have a better method of styling our pages. Style Sheets are the best way to define how your page looks. Everyone should use them. You create a simple text file, styles.css for example, with a number of rules defining the colours and spacing of certain HTML elements. Let's say, in your stylesheet, you command all of your headings (<h1>) to be red. You then put a line of code into your HTML that shows your web browser where its CSS file is. When it loads up the page, it looks for the CSS file, reads it and sees that all h1 elements should be red and then displays red headings, without any extra code. In this way you can apply all of the presentational stuff through simple CSS, and keep your HTML relatively clean and simple. So, open a new document and add this to it: body {margin: 0px; } h1 {color: red; } That's all that needs to be in the file. Save it as styles.css (or whatever). Now add this line into the head of all your pages:
<link rel="stylesheet" type="text/css" href="styles.css">

This tells your browser where to look for the CSS file. These two lines of code will make all the headings on your site red, and will set the page margins to zero pixels without all of that laborious topmargin/marginheight/etc. attribute tomfoolery. It's actually probably best if you take out those attributes. Already you should be seeing some of the benefits of using CSS — that one line will take care of the margins on every one of your pages that use this stylesheet. Once you have a CSS file, you can continue adding new rules to it to pretty up your pages. There is some amazing power in stylesheets, and you have loads of options for designing the look of your site. Head on over to the CSS section for more.

A word on colour schemes
Avoid a shocking colour scheme at all costs. It is no coincidence that the best sites have subdued, light colours, and the worst sites have

brash, painful ones. Luminous yellows, reds, pinks and greens are just a big no-no. The more easy it is to read, the more professional it will look. Keep the contrast high between bgcolors and text colours, so no text disappears because it is too close in shade. If you think people might want to print parts of your site out, don't use a black background and white text. No one will print it if it takes up all their ink. It is also not as easy to read as the normal black on white. The colour-scheme you use and the subject of your site will often have a lot in common. They will also create a different mood. Visit sites like your own and see which colours they use, and criticise whether they work or not. A site about say, the game Quake, can get away with dark, foreboding colours because they fit in well with the atmosphere of the subject. However, if you were designing a tourism site the same colours couldn't be used because you want to generate a happy, welcoming mood. Think about your audience.

Pick your background well
If you do use a background (remember, you don't have to), pick out the main colour in the image. Then set that colour as your bgcolor. The reason for this is that some people don't have images turned on, and won't see your image. Therefore, the colour has to be close to the images colour so the text remains readable. Try and avoid using those God-awful free background tiles you can find on the net, or those painfully dull ones that come with Microsoft Office programs. Your site will look horribly cheap. Clever use of a simple background tile can work wonders on the visual impact of your site. Look at our own simplistic bubbles to see what I mean.

Basic Web Design
by Ross Shannon Simply learning all the HTML tags is no way to become a good webdesigner. Anyone can do that, and they still output rubbish. In this advice tutorial, I’ll be giving you the most important tips in general areas to start you off on the right track towards creating great sites. There are loads of links to further tutorials throughout. Page Navigation: Check the Source | Hand Code | Learn CSS | Presentation | Colours | Exercise Restraint | Basic Promotion | Fundamental Optimisation | The Golden Rule This page was last updated on 2010-01-08

Check the Source
Looking through the source code of other sites is an excellent way to pick up HTML methods and tricks. In your browser click View | Source on any page and the code which created it will be opened (make it open in Notepad for the best way to read it) for your viewing pleasure. Find the corresponding section in the code for what you liked and see how it was created. You can then cut and paste code snippets out of the page’s code and into your own. You can teach yourself a lot this way, although it’s never as easy as just sitting down with a Coke and having a good read of HTML Source... And now the necessary warnings: be careful about learning from badlywritten code. There are plenty of awfully-coded sites that you may be reading, so try not to pick up any of their bad habits. Getting code segments and things like that is fine, but do not take designs, scripts, graphics or anything that looks like it took a lot of work. I’ve seen people rip off HTML Source’s design and it’s hugely irritating. Just no. Once you’ve gotten your code together, the next essential step is to validate it to make sure it’ll work in all browsers without problems. You may be surprised. There’s a good (if harsh) » online HTML validator over at the W3C’s site.

Hand Code
Unless you break out of the WYSIWYG-user’s mentality, you will always be restricted in what you can create. Too many beginners go straight to FrontPage or DreamWeaver and never really learn how to code and design. When things go wrong they don’t have the skills needed to fix the mistakes their editors have left them with, and give up. Hand coding in a text-editor (like HomeSite or even trusty NotePad) means you know your code much better and so can find problems and edit smaller things. You have much better control over your design. You’re closer to your code and are able to incorporate things like CSS more easily. Visual editors also output very bloated code with lots of unnecessary font tags and paragraphs etc. Your pages will download faster if you code efficiently in a text-editor. It’s never something anyone who has used a WYSIWYG editor wants to do, as at first it looks like a much slower, laborious way to design pages. You’re going to have to get past this barrier — you’ll eventually come to love the advantages hand-coding gives you.

Learn CSS

CSS, or Cascading Style Sheets, are the most important development in the webmaster’s world in the last few years. They allow you to change the look of your entire site by editing one file, and allow you to format and design your pages to look much, much better. If you can use HTML well, CSS shouldn’t be much of a step-up. Not only are stylesheets a great extra skill for you to have, but they’re going to be essential for creating pages in the next few years. Get a handle on them as soon as possible; have a look at the introduction to stylesheets.

Presentation
You need to structure your page into blocks, by using either tables, layers or frames. Have some clearly defined navigation, content and supplementary boxes — people will know where to look for specific parts of your page. Don’t stack page elements on top of each other all the way down the page — this makes a lot of scrolling necessary, something that the Internet audience do not enjoy. To lessen this, make use of horizontal screen space as best you can by aligning navigation links and inset pictures to the side so that the content flows alongside it. Limit your font choices to two or three for your entire site. Reference is always made by typographers to the horrific mistakes made early on when word-processors came into mainstream use a few years ago. Magazines and other publications were printed with dozens of fonts used on every page, just because the designers could. This led to the pages looking like a big mess. You should use very few fonts to avoid the same fate. Stick with a sans-serif font for your main content, as text in this family of fonts is easier to read from a computer screen than serif fonts. Keep your main body text between sizes 2 and 3 (10 and 12 point). Also remember that you should use the common fonts that everyone will have on their computer (found in the font face tutorial), so they see the same page you do.

Colours
I’ve already gone over the importance of using light colours in the <body> tutorial, but I’d like to re-iterate it here. Bright, primary colours are highly uncomfortable to look at, and on the Internet where you’re looking at a lit monitor the whole time, this is very important to avoid. Pastel shades do not strain your eyes, and generally look more stylish anyway. Have a look at sites like » Yahoo and » Amazon, two of the most popular sites on the Internet, and see what they do. Large blocks of

colour are drawn with soft shades. There’s plenty of white-space left as places for visual relief. These sites have been designed following extensive surveys of web users, so they know what they’re doing. When choosing your colour-scheme, pick one or two main colours. These will be used to fill in the main blocks of your page. Along with these, choose three or four more colours that go well with your core colours — experiment a lot with these. Apart from any once-off elements or graphics, these should be the only colours you use in your layout. They should all be from the web-safe palette. Make sure there is a good contrast between your background and text colours. Keep your main text black in most places. The areas of most interest on your page should be highlighted with a small instance of bright colour, but make sure it never takes over.

Exercise Restraint
You may get a little excited about the glitzy special effects achievable with things like Java Applets, JavaScript and Flash, but something you’re going to have to realise is that readers are rarely impressed with a dazzling but difficult-to-use system. Simplicity works best. A basic text-based navigation system is preferable to one constructed with image rollovers. Going straight to a content-rich homepage is preferable to a pointless and showy Flash intro or splash page. Background sounds and the like get annoying after one instance. Scrolling text and multiple gif animations are the hallmark of an amateur designer, and they’re terrible. If there’s one thing that many usability studies show, it’s that readers find many special effects to be quite obnoxious and annoying. The simpler sites always prosper.

Basic Promotion
When your site is ready for the Internet, you can start submitting your pages to the search engines. This causes great confusion and anguish for most beginners — the poor guys can’t figure out why the search engines won’t add their site. Read this: it usually takes at least 4 weeks for your site to appear, if only that. You might get lucky, you might get very unlucky, but that’s all it really comes down to. If you still haven’t appeared in their index after 2 months, you should resubmit your site. It’s a horrifically tedious waiting time, but until the engines are able to work faster it will stay this way. While you wait, look out for other opportunities to start drawing in readers. Find directories of sites similar to your own. They usually accept submissions and add the sites within a few days.They’re a great place to pick up targeted visitors. Learn how to write promotional,

keyword-rich text for descriptions. If you’re feeling really confident about your site’s quality, submit to » Dmoz (the Open Directory), and — lordy — » Yahoo. Remember for the two latter sites however, that your site’s content is the most important thing, so make sure you have lots of it. Getting into either of these is usually a fast-track into most search engines. Stay away from things like Free-for-all pages and submission websites that promise to get your site listed in hundreds of directories. It’s all a sham. Add in <meta> tags before you submit to the search engines. Read over Promotion 101 for the fundamentals of choosing keywords. The most important is » Google. Google indexes new sites quite reliably, while you could be waiting forever on others and still get no visitors from them. Now, another mistake beginners make is that their expectations are too high. Sites that are starting out should be lucky to get, on average, 30 or 40 hits a day; and even then it depends on the popularity of your subject matter. Don’t be disheartened by small viewing figures at the start, websites ’appreciate’ over time. Happy visitors will link to your site, and people will follow these links and become returning visitors. That is, if your site is good. Also: link to HTML Source! There, that’s my promotion done...

Fundamental Optimisation
I’m sure you’re all aware of the need for optimisation — the Internet is often very slow. A website that does not load quickly is a website that rarely gets read. People are getting more impatient, and now that there is so much choice, if your site doesn’t give a reader what they’re looking for quickly, you’ll never be heard. You can find out all about this in the optimisation section, but for now, here are some of the most basic ideas that you should adhere to when coding webpages:

• • • •

Use only a few small images on each page. If you’re going to have large images, only have one or two per page, or use thumbnails. Always use the height, width and alt attributes. Don’t use animated GIFs when a static one would have done the same job. Animations are often distracting page elements. Optimise your graphics as much as you can. It’s a less advanced process than you probably think. Leave out most multimedia effects. Split long pages into a few smaller ones.

The Golden Rule

And the one notion that will sum up the attitude you’re going to need to become a good web-designer? Be willing to learn and improve. You’ll never produce a perfect site design, much like you can never produce a perfect painting — your work can always improve. Accept criticism of your work (however hard it may be), and work to sort out the problems you and others see. Update your site as much as you can, and redesign it every few months. Care about the quality of your work. Continue to learn new techniques and keep on top of new developments in the world of web-design; look at well-designed sites and pick out elements that you like from them; answer your email; listen to good music; sketch down ideas; and above all have fun at it.

So what’s next?
Ok, you want more? Well continue on through HTML Source then! Have a squint through the Full Index, and here are a couple of other basic tutorials for you:
• • • • • • • • •

text > Lists text > Internal Links images > Further Attributes tables > Basic Tables stylesheets > Introduction to CSS accessibility > Website Navigation accessibility > Non-dithering Colours accessibility > 10 Bad Things accessibility > Logical Style

Keep Learning // HTML Tag Reference → Go! Go! Other My First Site Articles // My First Page · Basic Formatting · Basic Links · Basic Images · <body> Attributes · Basic Web Design · HTML Tag Reference · Uploading your Site · What’s Related // Homepage · Full Index · Section Index bookmark this on Delicious Starting Off Start Here · My First Site · Lessons Text · Images · Tables · Frames ·

Forms · Stylesheets · Scripting JavaScript · CGI Scripting · Advanced Accessibility · Promotion · Optimisation · Site Management · Reviews Web Hosting · Books · New!→ Recommendations · HTML Source Toolbox ¤ Love us? Add HTML Source to your bookmarks! Add HTML Source to your bookmarks! Printable pages Just print pages normally, our stylesheet will automatically reformat the page for you. Translations ¤ Translate automatically into: Valid code, naturally We use (and teach!) only the finest valid HTML and CSS, for your comfort and safety.

HTML Source is by me, Ross Shannon. I’m a web designer from Ireland, and am currently finishing my PhD in Computer Science. You can support HTML Source by making a small donation. Thanks to our wonderful supporters! Having fun? Getting lost? Got some comments?

Lists
by Ross Shannon Lists are a great way of laying out information in web pages, because they are simple to read and look good. Lots of people seem to think

that the bullet points are little images, but in reality they are all generated through some rather simple HTML code. There are a couple of different types of lists too — check it out below. Page Navigation: Unordered Lists · Different Bullets | Ordered Lists · Different types of numbers · Changing the start-point | Definition Lists This page was last updated on 2010-01-08

Unordered Lists
Lists follow a common skeleton every time — an outer container tag, and a new tag for each bullet. Observe:
<ul> <li>Bullet 1</li> <li>Bullet 2</li> <li>Bullet 3</li> </ul>

Which would create:
• • •

Bullet 1 Bullet 2 Bullet 3

Let’s explain:
<ul>

stands for Unordered List, which means that the bullets are not ranked or numbered in any way, they’re all the same.
<li>

means List Item, each one corresponding to a bullet. Closing </li> tags are not strictly necessary in HTML 4, but I recommend that you always use them. They’ll help your stylesheets work better and will make a future transition to XHTML much easier. Leaving them out now may leave you with a tonne of work in the future. You also don’t need to add in line breaks to go on to the next point, it will all be taken care of for you. Once a block of text is made into a bullet you can continue on formatting the text normally, and adding in paragraphs, images and the like.

Different bullets
It’s a simple matter of adding an attribute to change the nature of your bullets. For square ones, add type="square", and for empty circles, add type="circle" to the ul tag. They can also be added to lis to affect individual points. Examples:

 o

Is it a square? Oh, good. And this is a circle. Joy.

If you nest your lists (put one inside another), they will be indented underneath and the bullet type will change to show the transition, from disc (the default, full circle) to circle to square. Of course you can step in and change this order manually if you want. Note that these values must all be in lowercase.

Ordered Lists
If you want your list to be ordered instead of unordered, it’s a simple matter of just substituting the <ul> elements with <ol>s, which of course stand for Ordered Lists.
<ol> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ol>

This will create: 1. List Item 1 2. List Item 2 3. List Item 3 See? All that was changed was that one letter. Beyond that, the rest of the structure remains intact, meaning you still use lis the same you did already. Your browser will keep adding numbers if you keep adding list items. You can add or take away any of the items and the list will renumber itself into order. You can nest different types of lists into each other if you want, just remember to close them correctly. The progression of bullet-types that happens when you nest still occurs if you put it under an ol.

Different types of numbers
You can change the stylings of your ordered lists too, with the same attribute syntax as before, just using different values. You can do Roman numerals, letters, and both of the above in small characters. The full list: A. type="A" a. type="a"

I. i.

type="I" type="i"

Note that even if the list was to be labelled ’b’ or ’iv’, the attribute value is still set as the first number — i.e. ‘a’ and ‘i’.

Changing the start-point
If you need to start the count at a number other than 1, you just add another attribute, like so:
<ol start="5">

You can also step in the middle of a list and change the number of an item (and therefore all of the items that follow). Add value="9" to an item and the list will skip its numbering to 9 and then continue on to ten and onwards from there.

Definition Lists
There is this third list type, useful for information that comes in pairs. The tag for a definition list is, predictably <dl>. A one-term list would look like this:
<dl> <dt>Ross Shannon</dt> <dd><em>noun</em>; Red-haired rascal.</dd> </dl>

And that’ll create: Ross Shannon noun; Red-haired rascal.
<dt>

stands for Definition Term. It is not indented.
<dd>

stands for Definition Description. It appears indented. You don’t have to keep these tags in pairs, many dds are allowed under the same dt. Also, don’t worry — you can use these lists for any purpose without compromising their logical meaning. ‘Definition’ lists was just a misleading name they were given. Once again, the end tags aren’t strictly necessary, but take it from someone who knows: use them. And that's the lot.

Internal Links
by Ross Shannon

Instead of having to resort to the arduous task of scrolling down long pages, you can make your readers very happy by offering them page jumps as an alternative mode of transport around your site. As people have become lazier, page jumps have risen in popularity, so to avoid having your site unliked by the youth of today, implement these simple navigational aids. Page Navigation: Section Names · Linking to parts of other documents | What to use it for | Naming Sections with id This page was last updated on 2010-01-08

Section Names
Basically, page jumps are just links (they use the same <a> element as all links), but links that point to a certain part of a document. This is done by assigning names to parts of your page, and then making the link by referring to that section. Page jumps are done by using the name attribute of the a element. So, say you wanted a link to the top of your page, you would add an anchor like this near the top of your document (inside the <body> element, of course):
<a name="top"></a>

There doesn’t need to be anything between the opening and closing tags. Then, in the place you want to place the link, put
<a href="#top">link to top</a>

Notice the hash mark (#). That tells the browser that it’s a section of a page it’s looking for, and not a separate page or folder. So just make a link to the section you named earlier (you can name the link to the top anything you want, but keeping it memorable and simple always works out best) by putting a # in front of whatever name you gave it. Always remember, the # goes in the href attribute’s value, not in the name.

Linking to parts of other documents
This is excellent. You can target specific sections of other pages by adding the #name bit on to the end of the href. The part after the hash mark is known as a “fragment identifier.” For instance, to link to the first section of this tutorial from somewhere else, you would write
<a href="http://www.yourhtmlsource.com/ text/internallinks.html#section-names">

Of course, the sections you can link to are restricted by which sections actually exist on the page you’re linking to. View the HTML source code (go to View > Source) of a page you want to link to and see if they have any sections named.

What to use it for
The obvious favourite to use this for is to link back to the top of the page from the bottom. This is because once you have scrolled down a bit, all the navigation links that are usually placed at the top of the page are lost. So if you link the person back up, they once again have links to the rest of your site in front of them. Another popular implementation is to eliminate scrolling completely on long pages by splitting it up and having a row of links to the main headlines on the page, like we’ve done with our page navigation boxes near the top of each tutorial.

Naming Sections with id
A slightly more modern way of allowing links to be pointed at arbitrary parts of your page is to use the id attribute, which can be applied to any HTML element. This means you don’t need to keep setting up new empty a elements throughout your page; you can simply add a unique id value to an existing element. For example, here’s how you set up a link using the charming old ways:
<a name="original"></a> <h2>Original style, using named links.</h2>

Instead of introducing that superfluous a element, the new ways allow us to simply add an id attribute to our pre-existing heading element. Observe:
<h2 id="modern">Modern style, using id values.</h2>

You’ll note that throughout this site, I use the older style of internal links. That’s because this site has been going for a long time. Sanity requires that I don’t attempt to go back and update them all as it would take many moons, but if you’re making the decision on which style of internal links to use on a younger site, take the opportunity to use id attributes.

Further Attributes
by Ross Shannon Now that you know the basics of adding an image to a webpage, you'll want to learn these most basic of attributes for making your images accessible and presentable. Page Navigation: height and width · Where are the numbers? | The alt attribute | Image Margins This page was last updated on 2010-01-08

( Note: if you're looking for how to align images, that's over here )

height and width
Before an image has downloaded, a box will appear showing where on the page it will be. This box may be any size, and often the wrong size. Then, when the image finally begins to download, it is suddenly found to be too big for the space your browser has given it, and so everything has to be shifted around to make room, messing up whatever you were reading at the time and generally causing a disturbance. You can prevent this with the height and width image attributes. The concept is simple: you input the dimensions of your image in pixels into your HTML code. This tells the browser how much space to leave empty, ready for your image, ensuring that no post-load shifting goes on, and keeping your layout correct all the way through the download process. Example:
<img src="line.gif" height="3" width="500">

Giving the correct size has many advantages:
• • •

It stops the loading mess-ups Your page appears to be loading faster, as everything is in place If people have images turned off, they still get the same page layout

You can also change the size of the images displayed in the browser. Note that this does not change the filesize of the image. Nor will it make any permanent changes to the image. It is just twiddling the image in the browser, nothing more. All you do is put in whatever height and width you want. See those horizontal blue lines I use further up the page there? They are actually 1x1 pixel images made to their shape by this sort of manipulation. Some images resize better than others. Photographs and the like will look terrible if you start resizing them with these attributes. Simple blocky images will be fine, and in fact you can make these small in your image editor and then multiply their size in your browser, which makes the image load faster as the filesize will be smaller.

Where are the numbers?
If you don't know the dimensions of your images you can find it out in a number of places. When you have the image open in your graphics editor, it should have the dimensions somewhere on the screen, in the form 120 x 80 x 16. These numbers correspond to the width, height, and number of colours.

Otherwise, in your browser right-click on the image and select 'properties'. Beware, however, that this shows the display size, so if the image you're checking has already been resized, you're going to get that size. Some of the better HTML editors will add in the heights and widths for you, saving you the hassle. And never, EVER downsize the image with these attributes — do it in your image editor. You'll be showing a small image and downloading big ones. Nasty.

The alt attribute
You know the way when you leave your mouse pointer over an image for a while a little box pops up with text in it? That is the alt attribute at work. It was invented so that people who can't view images, or have them turned off, get an ALTernative, so that they at least know what would have been there. Use it like this:
<img src="tree.gif" alt="A lovely tree">

This text will appear in the box waiting for the image to download too, so the reader knows what's coming. This is yet another reason to use height and width, as the text you input as an alt will stretch these boxes. With the attributes in place this won't mess anything up. Also, for any blind readers that you may have, the alt text is read out to them by their computer. You can use the alt attribute to offer further information about an image, but it's proper usage is to function as a replacement for the image, so try not to leave anything too ambiguous. The alt attribute is the centre of much discussion — have a read of some » guidelines on alt texts. If you need to include characters like quotation marks in your alt tag, you have to use the &quot; entity reference, so you don't end the attribute by accident. You could also substitute single quotes in for the double quotes.

Image Margins
You can give your images some breathing space by using two more attributes — hspace and vspace — which stand for Horizontal and Vertical space. These are great — they will add some padding to the sides of your images and push any text near the image away. A typical line of code goes like this:
<img src="go.gif" hspace="10" vspace="10">

As you can see from the image's border, the text is 10 pixels away from it (and the image is 10 pixels from the right border of the table cell too).

And that's that. Make sure you use the three top attributes, and you can use the other two spacing ones whenever they're needed. They improve the usability of your site, and make it look better too. Keep Learning // Image File Formats → Go! Go! Other Images Articles // Further Attributes · Image File Formats · Thumbnails · Image Rollovers · Image Maps · Pre-Loading Images · Embedding Multimedia · Single pixel images What’s Related // Software Review · Optimising Images Homepage · Full Index · Section Index bookmark this on Delicious Starting Off Start Here · My First Site · Lessons Text · Images · Tables · Frames · Forms · Stylesheets · Scripting JavaScript · CGI Scripting · Advanced Accessibility · Promotion · Optimisation · Site Management · Reviews Web Hosting · Books · New!→ Recommendations · HTML Source Toolbox ¤ Love us? Add HTML Source to your bookmarks! Add HTML Source to your bookmarks! Printable pages Just print pages normally, our stylesheet will automatically reformat the page for you. Translations ¤ Translate automatically into: Valid code, naturally We use (and teach!) only the finest valid HTML and CSS, for your comfort and safety.

HTML Source is by me, Ross Shannon. I’m a web designer from Ireland, and am currently finishing my PhD in Computer Science. You can support HTML Source by making a small donation. Thanks to our wonderful supporters! Having fun? Getting lost? Got some comments? We

Sign up to vote on this title
UsefulNot useful