Added line is this color
Deleted line is this color
<h2 class="heading">A basic page format</h2>
<p>All pages follow this basic structure. Let's start with the first
<strong>tags</strong> you're going to learn.</p>
<p><a name="TAGS" id="TAGS"></a></p>
<h3 class="subhead">Tags, eh?</h3>
<p>Yeah. They are the things between the <strong><></strong> brackets.
I'm sure you've seen them in someone's code before, and if you haven't, right
click this page and select '<strong><u>V</u>iew Source</strong>'. The code
behind this page will appear. Have a quick glance through it. Yes, it probably
makes no sense, but that doesn't matter yet. 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 stuff that goes into
making this page.</p>
<p><a name="TAGSTRUCTURE" id="TAGSTRUCTURE"></a></p>
<h3 class="subhead">Structure of Tags</h3>
<p>Tags follow a common structure too. For example, to make text
<strong>bold</strong>, you use the tag <code>b</code>. So, at the point in your
text that you want the bold to start, you just stick the triangle-brackets
around that and put <code><b></code>, and when you want it to stop, you
put <code></b></code>. That is an <strong>end tag</strong>. it is simply
the start tag with a <strong>forward slash</strong> in front of the word or
letter. Some tags won't need that end tag, but most do, so don't forget it.</p>
<p><a name="MAKEAPAGE" id="MAKEAPAGE"></a></p>
<h3 class="subhead">So let's make a page</h3>
<p>Oh yeah. Ok, first step. Open <strong>Notepad</strong>, or any other
<a title="But how? Where?" href=
"http://www.yourhtmlsource.com/starthere/whatdoineed.html"><font color=
"#0066CC">text editor</font></a>. Type this:</p>
<p class="code"><code><html><br>
</html></code></p>
<p>These are the standard start and end tags on any page. Note that when I say
'standard', that means 'you <em>must</em> put it there'. This pair are called
<strong>container tags</strong> because they will have other elements contained
inside them.</p>
<p>Now we'll add in the rest of the structure. Modify your page to this:</p>
<fieldset class="important"><legend>Very Important</legend><code><!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><br>
<br>
<strong><html></strong><br>
<br>
<head><br>
<title>My First HTML Page</title><br>
</head><br>
<br>
<body><br>
<br>
</body><br>
<br>
<strong></html></strong></code></fieldset>
<p>That complicated looking bit at the top isn't something you need to worry
about just yet. It basically tells your browser which <a title=
"Learn about the past, present and future of HTML" href=
"http://www.yourhtmlsource.com/starthere/historyofhtml.html"><font color=
"#0066CC">version of HTML</font></a> you're using in your page. You are going
to be using <em>HTML 4.01</em>, the most recent version of HTML. Later you may
move to <em>XHTML</em>, but HTML 4 is fine for your first few sites.</p>
<p>HTML pages are made up of two distinct parts — the <code><head></code>
part, and the <code><body></code> part. The <code>head</code> part
contains things that won't appear on your page. Most of the tags that go in the
<code>head</code> part are advanced stuff for search engines and the like, so
the only one you need to know is <code>title</code>.<br>
<code><strong><title></strong></code> is the text that appears at the
top of your screen — in that blue bar. You can type whatever you want in that.
No other tags will work, although <a title="Read the Character Chart" href=
"http://www.yourhtmlsource.com/text/specialcharacters.html"><font color=
"#0066CC">special characters</font></a> will. Don't forget to add the
<code>title</code>, because without it, that bar will have the <a title=
"URL? What the hell is that?" href=
"http://www.yourhtmlsource.com/starthere/glossary.html#URL"><font color=
"#0066CC">URL</font></a> 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.</p>
<p><code><strong><body></strong></code> is the <strong>main part</strong>
of your page. Everything between those two container tags will be visible on
your page. So type something there now. Whatever you want, I don't care. Be
spontaneous.<br>
Now your page looks something like this:</p>
<p class="code"><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br>
<br>
<html><br>
<head><br>
<title>my first html page</title><br>
</head><br>
<br>
<body><br>
<span title="Groan!">Hello, I hope you're having as much fun reading this as I
had writing it!</span><br>
</body><br>
</html></code></p>
<p>That's about as complicated as I'm going to make this tutorial. If you want
to <strong>format</strong> your writing, check the <a href=
"http://www.yourhtmlsource.com/myfirstsite/basicformatting.html"><font color=
"#0066CC">next page</font></a> 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...</p>
<p><a name="SAVING" id="SAVING"></a></p>
<h2 class="heading">Saving your masterpiece</h2>
<p>Saving is a tricky area, and it helps if you know what you're doing on a
computer for this part. But even if you don't, do not fret; I'll explain the
process thoroughly.</p>
<p>You need to give your document a file-extension, to tell your computer what
type of file this is. You are editing the page in a text-editor (at least, you
should be), which saves in the format <code>.txt</code> (TeXT file) . You have
written some text, and you want a file that is in the <code>.html</code>
format. So click <strong>File | Save As...</strong> Find the place on your hard
drive where you want to keep all your pages (I would recommend you create a
<strong>new folder</strong> <img title=
"Click this button in the 'save as' dialog box to create a new folder" height=
"16" alt="New Folder icon" src=
"http://www.yourhtmlsource.com/myfirstsite/media/newfolder.gif" width="17"
align="top" border="0"> and keep all of your documents together). Then in the
box labelled 'save as type' change it to <strong>'all files *.*'</strong>. This
means that you can save the data (in this case, some text) into any format. So,
now name your file <code>wikid<strong>.html</strong></code> and click
<strong>save</strong>. Finito.</p>
<p>After you have done this once, if you ever change your code, you only need
to press <em>save</em>, not <em>save as</em>, because the computer now knows
this is a html file.</p>
<p>Your page's filename can consist of any combination of letters, numbers or _
and - characters. It is a good practice to start the filename with a letter and
<strong>use lowercase letters</strong> at all times. This will make sure that
few capitalisation-caused errors will occur by people trying to type your
page's address into their browser. You should call your homepage
<em>index.html</em> — this will be important later on.</p>
<dl>
<dt><strong>Question: how come I see some pages named
'something.<em>htm'</em>?</strong></dt>
<dd>Well, before more recent operating systems like Windows 95, <a title=
"What is a file extension?" href=
"http://www.yourhtmlsource.com/starthere/glossary.html#EXTENSIONS"><font color=
"#0066CC">file extensions</font></a> 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 OSs that old that you're probably better off just using .html
and being done with it. And for God's sake, don't mix and match. Stick with one
format for your entire site.</dd>
<dt><strong>Note to users of word processors</strong></dt>
<dd>If you're using something like Word or WordPerfect 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 <em>text-only</em>, and only the things useful to your browser will get
saved.</dd>
</dl>
<p><a name="LOOKING" id="LOOKING"></a></p>
<h2 class="heading">Having a look</h2>
<p>Well, you've been toiling away on this page for hours, has it paid off?
Let's check. Create a new browser window to open it in (while still reading
this) — press <kbd class="key">Ctrl + N</kbd>. Now, in that new one that should
have opened, go to <strong>File | Open</strong>. Click Browse... and find the
file you just saved (wikid.html, unless you were cheeky and called it something
else). Click open. Your page will appear in all it's rubbish glory. You did it!
Huzzah!</p>
<p>Ok, now smile.</p>
<h2 class="heading">Formatting the Text</h2>
<p class="delicious-blogbadge-line">Well, you remember from the <a href=
"http://www.yourhtmlsource.com/myfirstsite/myfirstpage.html"><font color=
"#800080">last tutorial</font></a> how you needed a <strong>start tag</strong>
and an <strong>end tag</strong> right? Start with the start tag, end with the
end tag. Simple. You already know that <code><b></code> means bold. Let's
refresh.</p>
<p class="delicious-blogbadge-line" title="Not even my words">Hi, my name is
Ross and I'm <strong>brilliant</strong>. Yeah, that's right I'm <strong title=
"Dave Freeman, you're funny">brilliant</strong>!</p>
<p class="delicious-blogbadge-line">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:</p>
<p class="code"><code><b>brilliant</b></code></p>
<p class="delicious-blogbadge-line">That's all there is to it. Just surround
the text you want in those tags.</p>
<p class="delicious-blogbadge-line">Hoping it'll get more exciting soon, eh?
Alrighty, want to learn <em>italics</em>? That's just as easy. The code for
that is <code>i</code>. So, in the same fashion:</p>
<p class="code"><code><i>superb stuff</i></code> becomes <em>superb
stuff</em>.</p>
<p class="delicious-blogbadge-line"><u>Underlining</u> is laughably easy too —
just use <code><u></code></p>
<p class="code"><code><u><u>Just hit me with the underline,
maaan</u></u></code></p>
<p class="delicious-blogbadge-line">Harking back to the days of ration cards,
you can even make your text look like it was bashed out on a typewriter — use
<code>tt</code>.</p>
<p class="code"><code><tt>Day twelve. The Germans have surrounded our
farm</tt></code><br>
becomes... that in <tt>this sort of text</tt>.</p>
<p class="delicious-blogbadge-line">The examples above all use presentational
tags. You may want to use <a href=
"http://www.yourhtmlsource.com/accessibility/logicalstyle.html"><font color=
"#0066CC">logical tags</font></a> instead, which make your content more
<a title="Best to start them early..." href=
"http://www.yourhtmlsource.com/accessibility/"><font color=
"#0066CC">accessible</font></a>.</p>
<p class="delicious-blogbadge-line">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
<a href=
"http://www.yourhtmlsource.com/text/specialcharacters.html"><font color="#0066CC">
special character</font></a> <code>&nbsp;</code>, which stands for
'non-breaking space'. With this you can create indents for your text.</p>
<p class="code"><code><p>&nbsp;&nbsp;&nbsp;This text will be
indented</p></code></p>
<p><a name="QUESTIONS" id="QUESTIONS"></a></p>
<h2 class="heading">Tag Questions</h2>
<p class="delicious-blogbadge-line"><strong>Do the tags have to be in
CAPITALISED text?</strong><br>
Nope, they don't. You can use <code><b></code> or <code><B></code>.
I prefer to make all of mine lowercase because it looks much neater when you're
reading and editing your code, and suits the <a title=
"XHTML, something you can learn a little later on" href=
"http://www.yourhtmlsource.com/starthere/historyofhtml.html#XHTML1"><font color="#0066CC">
version of HTML</font></a> I code in, but it doesn't change how they work. It's
up to you.</p>
<p class="delicious-blogbadge-line"><strong>Can I mix them
together?</strong><br>
You really are getting adventurous aren't you? Yes, you can. Simply surround
the text you want with both sets of tags —
<code><b><i><strong><em>like
this</em></strong></i></b></code></p>
<p class="delicious-blogbadge-line">Something to note however, is the
<strong>order you put them in</strong>. If you start with <code>b</code>, you
end with <code>b</code>. In the example above, <code><i></code> was the
last tag opened, so it is the <em>first</em> 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 <em>LIFO</em> — Last In,
First Out.<br>
Putting tags inside each other like this is called
<em><strong>nesting</strong></em>.</p>
<p><a name="SKIPPINGLINES" id="SKIPPINGLINES"></a></p>
<h2 class="heading">Skipping Lines</h2>
<p class="delicious-blogbadge-line">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 <code><br></code>, which stands for 'line <strong>BR</strong>eak'.
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.</p>
<p class="delicious-blogbadge-line">Or how about skipping a line and creating
paragraphs? To do that, use <code><p></code>, which stands for
'<strong>P</strong>aragraph'. There are two ways to go about using
<code>p</code>. You can just put it at the end of a paragraph to skip a line on
to the next; or you can put a <code><p></code> at the start of the
paragraph and a <code></p></code> at the end. I prefer the latter,
because it looks neater, and allows you more flexibility. You should use it
too.</p>
<p class="code"><code><p>Welcome to my page.<br><br>
I hope you enjoy your visit.</p></code></p>
<p><a name="ATTRIBUTES" id="ATTRIBUTES"></a></p>
<h2 class="heading">Attributes</h2>
<p class="delicious-blogbadge-line">Now I'm going to get <em>slightly</em> more
advanced. To center text, the basic tag is <code><center></code>. But,
this is being <a class="more" title=
"Read about how HTML is continually changed around with a look at its history"
href="http://www.yourhtmlsource.com/starthere/historyofhtml.html"><font color=
"#0066CC">replaced</font></a>, so a better way of doing this is to
<code>align</code> a paragraph. This involves giving the tag an
<strong>attribute</strong>. 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:</p>
<div class="delicious-blogbadge-line">
<fieldset class="important"><legend>Very Important</legend><code><tag
attribute="value">Affected Text</tag></code></fieldset>
</div>
<p class="top-tags-container"> </p>
<p class="delicious-blogbadge-line">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 <code>value</code> in
<strong>quotation marks</strong>.</p>
<p class="delicious-blogbadge-line">So, to add the <code>center</code> value to
the <code>p</code> tag, the structure is:</p>
<p class="code"><code><p align="center">Centered
Text</p></code></p>
<p class="delicious-blogbadge-line">Compare that to the example above to see
what's what. <code>p</code> is the tag, <code>align</code> is the attribute,
and <code>center</code> is the attribute's value.<br>
Note that when <strong>closing</strong> the original tag (<code>p</code>),
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).<br>
Obviously, if it can be aligned to the center, it can be aligned in other
ways too. You can <code>align</code> <code>left</code> and <code>right</code>.
But there's no point in writing <code><p align="left"></code>, because
all text aligns to the left anyway. This is known as a
<strong>default</strong>.</p>
<p><a name="HEADINGS" id="HEADINGS"></a></p>
<h2 class="heading">Headings</h2>
<p class="delicious-blogbadge-line">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: <code><h1></code> to
<code><h6></code>. Graphically, these create decreasingly large text,
with <code>h1</code> being the biggest, and <code>h6</code> being the smallest
of the group.</p>
<p><a name="DOITNOW" id="DOITNOW"></a></p>
<h3 class="subhead">So let’s see them!</h3>
<p class="delicious-blogbadge-line">Oh, that's my cue. Ok: here are the
examples:</p>
<h1 class="delicious-blogbadge-line">Heading 1</h1>
<h2 class="delicious-blogbadge-line">Heading 2</h2>
<h3 class="delicious-blogbadge-line">Heading 3</h3>
<h4 class="delicious-blogbadge-line">Heading 4</h4>
<h5 class="delicious-blogbadge-line">Heading 5</h5>
<h6 class="delicious-blogbadge-line">Heading 6</h6>
<p class="delicious-blogbadge-line">You just wrap the preferred heading tag
around the text, like so:</p>
<p class="code"><code><h3>Heading 3</h3></code></p>
<p class="delicious-blogbadge-line">The text will then appear bold and big. One
thing to note is that headings are always <strong>apart</strong> from the rest
of your text, like a paragraph. This is a property of <a href=
"http://www.yourhtmlsource.com/accessibility/logicalstyle.html"><font color=
"#0066CC">block-level</font></a> 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.</p>
<p class="delicious-blogbadge-line">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 <code><h2></code> to a
<code><h4></code>).</p>
<p class="sourcetip"><strong>sourcetip:</strong> Headings take on the color and
font face of the surrounding text, so you can change a headings color, say, by
wrapping a <code>font color</code> around the <code>h</code> tag. Read this
tutorial on <a class="nav3" href=
"http://www.yourhtmlsource.com/text/font.html"><font color="#0066CC">font and
color</font></a> for more.</p>
<p class="delicious-blogbadge-line">Headings can also be
<strong>aligned</strong>. Values are <code>center</code>, <code>justify</code>,
<code>left</code> or <code>right</code>.</p>
<p><a name="LINES" id="LINES"></a></p>
<h2 class="heading">Lines</h2>
<p class="delicious-blogbadge-line">Some other very simple stuff is using lines
across the page. To make them, use <code><hr></code>, which stands for
'<strong>H</strong>orizontal <strong>R</strong>ule'.<br>
Just put that anywhere on your page (no end tag is needed) and the text will
stop and a big</p>
<hr>
<p>will appear and then your text will continue on. Nice, eh?</p>
<p>These can be manipulated through <strong>attributes</strong> too. They can
be <code>align</code>ed left and right, like <code>p</code> above. They also
have two other attributes that relate to the size of the line.</p>
<p><code><hr <strong>width</strong>="100"></code> would create</p>
<hr width="100">
<p>a little guy like that. You are specifying the width in <a class="more"
title="Need a definition?" href=
"http://www.yourhtmlsource.com/starthere/glossary.html#PIXEL"><font color=
"#0066CC">pixels</font></a> here, or you could use a percentage, like
<code><hr width="80<strong>%</strong>"></code>, which will create a line
that is 80% as wide as the available screen width.</p>
<p>To make stronger lines, <code><hr <strong>size</strong>="4"
noshade></code> would create a big, beefy</p>
<hr title="Ooomph!" noshade="noshade" size="4">
<p>Did you see that <code>noshade</code> bit there? That is a special attribute
unique to <code>hr</code>, and it doesn't need a value. It stops the
<code>hr</code> having two shades of gray in it.<br>
It also shows that many different attributes can be used on the same tag at
the same time. Experiment with them a bit.</p>
<p><a name="COMMENTS" id="COMMENTS"></a></p>
<h2 class="heading">Comments</h2>
<p>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
<strong>add notes to your code</strong> 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:</p>
<p class="code"><code><strong><!--</strong> Navigation starts here
<strong>--></strong></code></p>
<p>Anything you put between the <code><!-- --></code> 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.</p>
<p><a name="spacedout" id="spacedout"></a></p>
<h2 class="heading">Spaced Out</h2>
<p>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>
<p class="code"><code><p><u>Some underlined text.
</u></p></code></p>
<p>The space character before the closing <code></u></code> tag will make
the underline effect run on for longer than the sentence, which looks sloppy.
Later on, with <a title="Don't try these yet unless you're especially brave"
href="http://www.yourhtmlsource.com/tables/"><font color=
"#0066CC">table</font></a> 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.</p>
<p><a name="validate" id="validate"></a></p>
<h2 class="heading">First Validate</h2>
<p>You've probably introduced quite a lot of new tags into your page now.
<em>Validation</em> 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 <a title=
"A service of the mothership, w3.org. Soon enough you'll grow accustomed to its sometimes-cryptic error messages and learn to love it"
href="http://validator.w3.org/"><font color="#0066CC">» W3C
validator</font></a>. 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.</p>
<p>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.</p>
<p>If your code is valid, it has a <strong>much better chance of working in
every browser</strong>, 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, <strong>validate
often</strong>. 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.</p>
<p>And now; <a title="Onwards!" href=
"http://www.yourhtmlsource.com/myfirstsite/basiclinks.html"><font color=
"#0066CC">we link</font></a>!</p>
<h2 class="heading">First Links</h2>
<p>Ok, you have a page that you learned how to write in the <a href=
"http://www.yourhtmlsource.com/myfirstsite/myfirstpage.html"><font color=
"#800080">first lesson</font></a>. 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 <strong>same
folder</strong>. Don’t forget to call your homepage
<code><strong>index.html</strong></code>.</p>
<p class="sourcetip"><strong>sourcetip:</strong> 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.</p>
<p><a name="STRUCTURE" id="STRUCTURE"></a></p>
<h3 class="subhead">Link Structure</h3>
<p>Like all tags, links follow a structure, and have start tags and end tags.
Put this line of code on one of your pages.</p>
<fieldset class="important"><legend>Very Important</legend><code><a
href="theotherpage.html"></code><u style="color: blue">The
Link</u><code></a></code></fieldset>
<p>Explanation:</p>
<ul>
<li><strong><code>a</code>:</strong> <code>a</code> stands for
<strong>A</strong>nchor, which means Link. This is the tag that makes it all
happen.</li>
<li><strong><code>href</code>:</strong> Means <strong>H</strong>ypertext
<strong>REF</strong>erence. The <code>href</code> part is another
<strong>attribute</strong>, with the location of the other page as its value.
Just change <em>theotherpage.html</em> to the name of the second file. Don’t
forget the quotation marks!</li>
</ul>
<p>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 <a href=
"http://www.yourhtmlsource.com/starthere/glossary.html#URL"><font color=
"#0066CC">URL</font></a> 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 <a href=
"http://www.yourhtmlsource.com/text/internallinks.html"><font color=
"#0066CC">internal links</font></a>. Changing the default colours of the links
is dealt with in <a href=
"http://www.yourhtmlsource.com/myfirstsite/body.html"><font color=
"#0066CC">body attributes</font></a>.</p>
<p><a name="EMAIL" id="EMAIL"></a></p>
<h3 class="subhead">Linking to email addresses</h3>
<p>If you want to let people email you by clicking a link, you use this
code:</p>
<p class="code"><code><a
href="<strong>mailto:</strong>bruce@example.com"></code>mail
me<code></a></code></p>
<p>to create this — <a title="Don’t bother pressing send, naturally." href=
"mailto:bruce@example.com"><font color="#0066CC">mail me</font></a> — which
will open the users email program with your address in the <em>To:</em>
box.</p>
<p><a name="PICTURES" id="PICTURES"></a></p>
<h3 class="subhead">Linking to pictures</h3>
<p>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 <strong>gif</strong> or a <strong>jpg</strong>. For a rundown on the file
formats for images on the web, <a href=
"http://www.yourhtmlsource.com/images/fileformats.html"><font color=
"#0066CC">read this</font></a>. If you want to use a picture <em>as</em> a
link, read the <a href=
"http://www.yourhtmlsource.com/myfirstsite/basicimages.html"><font color=
"#0066CC">next tutorial</font></a>.</p>
<p><a name="FILES" id="FILES"></a></p>
<h3 class="subhead">Linking to files</h3>
<p>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:</p>
<p class="code"><code><a href="ambient.mp3"></code>download the song
(2.6MB mp3)<code></a></code></p>
<p><a href="http://www.yourhtmlsource.com/images/multimedia.html"><font color=
"#0066CC">Embedding</font></a> a file directly into a page is a different
process. We have a page on <a href=
"http://www.yourhtmlsource.com/starthere/fileformats.html"><font color=
"#0066CC">Internet file formats</font></a> too.</p>
<p><a name="RELABS" id="RELABS"></a></p>
<h2 class="heading">Relative and Absolute Links</h2>
<p>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.site.com. Next comes the directories (folders) that contain
the file and finally the file’s name, with the appropriate file type <a href=
"http://www.yourhtmlsource.com/starthere/fileformats.html"><font color=
"#0066CC">extension</font></a>. <strong>Each segment of an url is separated
with a forward slash.</strong></p>
<p>Yes, there are two different ways to set your links. Absolute links include
the <strong>full website address</strong>, including the http:// and www. bits.
Relative links are much <strong>shorter</strong> and more manageable. Always
remember: on the Internet, all slashes go <strong>forwards</strong>.</p>
<p>For instance, say you have a page called page1.html in the “links” directory
of your site. The absolute <code>href</code> to this page is
<em>http://www.site.com/links/page1.html</em>. So, you put that link
<strong>anywhere</strong> on any page, on any site and it will always go to
that page on the Internet.</p>
<p><strong>Relative links can only link to a page from the same site</strong>.
The address is always <strong>relative</strong> to the position of the second
file. If you were linking to that same page from a page in the same directory,
the <code>href</code> would be just <em>page1.html</em>. If you were linking
from your homepage, i.e. in the root directory, the link would read <code><a
href="links/wikidfiles.html"></code>, as you would have to go into the
directory first, and then get the file.</p>
<p class="sourcetip"><strong>sourcetip:</strong> If you name files
<code>index.html</code> 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
<code>href="folder/index.html"</code> into <code>href="folder/"</code>. The
slash tells the browser it should look for a folder, and not a file. Don’t
forget it!</p>
<p><a name="linkalgymnastics" id="linkalgymnastics"></a></p>
<h3 class="subhead">Linkal Gymnastics</h3>
<p>If you need to go down a directory, and then back up into another one,
you’ll have to understand how your site is laid out. Using <span class=
"sourcegray">HTMLSource</span> as an example, we are now in the “myfirstsite”
section. Have a look at your address bar to see. If we wanted to link
<strong>relatively</strong> to the “promotion” section, we’d have to go
backwards one directory and then into the promotion directory. So the full
relative <code>href</code> would be<br>
<code>"../promotion/index.html"</code><br>
See the two dots? They mean “up 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.</p>
<p class="sourcetip"><strong>sourcetip:</strong> 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
<code>href</code> above could just be <code>/promotion/</code>. This saves you
having to put in loads of ../../s. A link back to your homepage is always
<code>href="/"</code></p>
<p><a name="outwardlinks" id="outwardlinks"></a></p>
<h3 class="subhead">Outward Links</h3>
<p>On outward links (links to other sites), you must always remember to prefix
the address with <strong>http://</strong>. Otherwise, the link won’t work, the
browser will look for a file called <em>www.yourhtmlsource.com</em> in your
site. You will be linking to us, right? You’ll be my new best friend if you do,
cheeky.</p>
<p>To do this correctly, you’re basically just offering an absolute link, like
above. So, the correct address to link to would be
<em>http://www.yourhtmlsource.com/</em>. Notice the ending slash? That only
goes there for <strong>directories</strong> (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.</p>
<p><a name="SITESTRUCTURE" id="SITESTRUCTURE"></a></p>
<h2 class="heading">Site Structure</h2>
<p>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
<strong>images</strong> in one folder too, away from your html files (call the
folder “images” or “media” or something like that).</p>
<p>I would also advise you to work on a <strong>template</strong> 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, <strong>just the layout</strong> of your pages as
<em>TEMPLATE.html</em> 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, <a href=
"http://www.yourhtmlsource.com/myfirstsite/TEMPLATE.html"><font color=
"#0066CC">see this</font></a>. Check, we have one in each directory.</p>
<p>Say you had a site about the solar system (just <em>say</em>). Keep all the
files about mars in a folder called “mars”, with all the pictures of mars in a
directory called “images” <em>in</em> the directory called “mars”. <span title=
"Wow, this joke just wrote itself!">And keep the pictures of Uran— ...no. I am
above that.</span></p>
<p>Speaking of <a title="Don’t stop now; you’re doing too well" href=
"http://www.yourhtmlsource.com/myfirstsite/basicimages.html"><font color=
"#0066CC">pictures....</font></a></p>
<h2 class="heading">Inserting an Image</h2>
<p class="delicious-blogbadge-line">This is the basic stuff — just getting the
image on your page. The code for inline images is
<code><strong>img</strong></code>. You use the same type of attribute as the
<code>href</code> attribute from the <a title=
"It was about links, in case you’ve forgotten" href=
"http://www.yourhtmlsource.com/myfirstsite/basiclinks.html"><font color=
"#800080">last article</font></a>, so having used that before will help you get
your head around this quicker.</p>
<p class="delicious-blogbadge-line">To keep it simple, <strong>place the image
you want to use in the same directory as the HTML file it is going to be
in</strong>. Say your image is called ’go.gif’, the code to insert that image
into your document is:</p>
<div class="delicious-blogbadge-line">
<fieldset class="important"><legend>Very Important</legend><code><img
src="go.gif" alt="Go"></code></fieldset>
</div>
<p class="delicious-blogbadge-line"><img title="Go.gif" height="30" alt=
"Inserting an image into a html page" hspace="10" src=
"http://www.yourhtmlsource.com/myfirstsite/media/go.gif" width="30" align=
"left" border="0"> The image will appear on your page like this.</p>
<div>
<ol>
<li><code><strong>src</strong></code> stands for
“<strong>S</strong>ou<strong>RC</strong>e”, so what you’re saying is the image
source is <em>go.gif</em>. Make sure you’ve gotten the <a title=
"Read about image file types on the web" href=
"http://www.yourhtmlsource.com/images/fileformats.html"><font color=
"#0066CC">image file type</font></a> right. If you’re linking to a photograph,
it is more than likely a .jpg. The <code>src</code> bit is
<strong>mandatory</strong> in an <code>img</code> tag, which means you have to
put it in. Obvious really, otherwise there’d be nothing there.</li>
<li><code><strong>alt</strong></code> stands for “<strong>Alt</strong>ernate
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 <code>alt</code> attribute is also required, so you must write one
for every image you use.</li>
</ol>
</div>
<p>You can put in the url of any image on the web into the <code>src</code>,
but really you should <strong>only use relative addresses to put images onto
your pages</strong>. 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).</p>
<p>Once you have entered the <code>src</code> for your image and saved your
HTML file, you can open it in your <a class="more" href=
"http://www.yourhtmlsource.com/starthere/browserreview.html"><font color=
"#0066CC">browser</font></a> 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 <code>src</code> value you have provided. Check that you
have set the address correctly and that the image is where you say it is.</p>
<p><a name="LINKIMAGES" id="LINKIMAGES"></a></p>
<h2 class="heading">Linking Images</h2>
<p>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
<code>a</code> around the image code, so that the image is in place of the text
you’d normally have. So, to make <em>go.gif</em> a link to
<em>fullindex.html</em>, you’d write:</p>
<p class="code"><code><a href="fullindex.html"><img src="go.gif"
alt="Go to the full index."></a></code></p>
<p>This would create:<br>
<a href="http://www.yourhtmlsource.com/fullindex/"><img title=
"Click this image to go somewhere else!" alt="Using an Image as a link" src=
"http://www.yourhtmlsource.com/myfirstsite/media/go.gif"></a><br>
...which, as you can see, doesn’t look quite the same as the image above. This
is because the <strong>browser puts a border around the image to show that it
is a link</strong>, 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 <code>img</code> tag:</p>
<p class="code"><code><img src="go.gif" alt="Go to the full index."
<strong>border="0"</strong>></code></p>
<p>The default <code>border</code> 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 <code>text</code>.</p>
<p><a name="BASICATTRIBUTES" id="BASICATTRIBUTES"></a></p>
<h2 class="heading">Basic Attributes</h2>
<p>Since you already know how to <code>align</code> stuff like <a href=
"http://www.yourhtmlsource.com/myfirstsite/basicformatting.html#ATTRIBUTES"><font color="#0066CC">
paragraphs</font></a>, I may as well add aligning images to this page.
<code>img align</code>ing is done in much the same way, except now you have 3
new values you can use (only for images, mind): <span title=
"Ooh it’s a question!"><code>top, middle</code> and <code>bottom</code></span>.
They are used in a similar fashion, as attributes to the tag like so:</p>
<p class="code"><code><img src="monkey.gif" alt="A monkey"
<strong>align</strong>="left"></code></p>
<p>Here are some examples</p>
<p><img height="75" alt="Left aligned image" src=
"http://www.yourhtmlsource.com/myfirstsite/media/albertalign.gif" width="65"
align="left" border="0">Aligned <code>left</code>. Notice how the text hugs the
image, instead of starting under it.</p>
<p><img height="75" alt="Right aligned image" src=
"http://www.yourhtmlsource.com/myfirstsite/media/albertalign.gif" width="65"
align="right" border="0">Aligned <code>right</code>. The image hops over to the
side, and if the text reaches it, it just drops down beside it and
continues.</p>
<p><img height="75" alt="Image with text aligned to the top" src=
"http://www.yourhtmlsource.com/myfirstsite/media/albertalign.gif" width="65"
align="top" border="0">Aligned <code>top</code>. 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.</p>
<p><img height="75" alt="Image with text aligned to the middle" src=
"http://www.yourhtmlsource.com/myfirstsite/media/albertalign.gif" width="65"
align="middle" border="0">Aligned <code>middle</code>. Are you getting this
yet?</p>
<p><img height="75" alt="Image with text aligned to the bottom" src=
"http://www.yourhtmlsource.com/myfirstsite/media/albertalign.gif" width="65"
align="bottom" border="0">Aligned <code>bottom</code>, keeping everything all
straight.</p>
<p>For a few other very useful image attributes, read <a href=
"http://www.yourhtmlsource.com/images/furtherattributes.html"><font color=
"#0066CC">Further Attributes</font></a>. Then you can go on to explore the rest
of our <a href="http://www.yourhtmlsource.com/images/"><font color=
"#0066CC">image lessons</font></a>.</p>
<h2 class="heading">The <body> tag</h2>
<p>Now that you have the gist of using attributes in tags, this should make
perfect sense. Remember the <code><body></code> tag from the <a href=
"http://www.yourhtmlsource.com/myfirstsite/myfirstpage.html"><font color=
"#800080">first page</font></a>, 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.</p>
<p><a name="BGCOLOR" id="BGCOLOR"></a></p>
<h3 class="subhead">bgcolor</h3>
<p>This is the colour of the BG, or
<strong>B</strong>ack<strong>G</strong>round, of your page. You need to put the
colour in as a <strong>HEX code</strong>, like the rest of these colours. What
are HEX codes? Glad you asked. Because it means you have to read <a title=
"The HEX definition" href=
"http://www.yourhtmlsource.com/starthere/glossary.html#HEX"><font color=
"#0066CC">this definition</font></a>! If you want to see a list of HEX codes
for 216 different colours, look at <a href=
"http://www.yourhtmlsource.com/accessibility/nonditheringcolours.html"><font color="#0066CC">
this chart</font></a>. The code is:</p>
<p class="code"><code>bgcolor="#FFFFFF"</code></p>
<p>Note that, even though the default BG is white, you should still code in
<code>#FFFFFF</code>, because older browser's default BG is a nasty grey.</p>
<p><a name="text" id="text"></a></p>
<h3 class="subhead">text</h3>
<p>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 <a href=
"http://www.yourhtmlsource.com/text/font.html"><font color="#0066CC">text
section</font></a>). Your best bet here is to leave it black, because that's
the easiest to read. Code!</p>
<p class="code"><code>text="#000000"</code></p>
<p><a name="link" id="link"></a></p>
<h3 class="subhead">link</h3>
<p>Instead of the normal blue, you can now change the colour of all your links
to something a bit more classy.</p>
<p class="code"><code><span title=
"But don't try this colour at home! Ouch!">link="#FF00FF"</span></code></p>
<p><a name="vlink" id="vlink"></a></p>
<h3 class="subhead">vlink</h3>
<p>Links change colour once you have clicked on them, from blue to purple. The
V stands for '<strong>V</strong>isited'. You can change this too, but make sure
it <em>is</em> visibly <strong>different</strong> to the <code>link</code>
colour, otherwise people will get confused.</p>
<p class="code"><code>vlink="#660066"</code></p>
<p><a name="alink" id="alink"></a></p>
<h3 class="subhead">alink</h3>
<p>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 <strong>A</strong>ctive 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.</p>
<p class="code"><code>alink="#FF0000"</code></p>
<p><a name="background" id="background"></a></p>
<h3 class="subhead">background</h3>
<p>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 <code>src</code> (don't know
how? Read the preceding <a href=
"http://www.yourhtmlsource.com/myfirstsite/basicimages.html"><font color=
"#800080">lesson</font></a> on images). You can also link to an image from
another site, by giving the entire URL.</p>
<p class="code">
<code>background="http://www.yoursite.com/media/BACKGROUND.gif"</code></p>
<p>Whatever image you choose to use, it will be <strong>tiled</strong> across
your page, filling it up. That means it will repeat itself across your page, so
choose one that doesn't look too obvious.<br>
If you want your background to be set in place and not scroll, add the
attribute <code>bgproperties="fixed"</code> into the <code>body</code>. This
will leave the image as a <em><strong>watermark</strong></em>.</p>
<p><a name="MARGINS" id="MARGINS"></a></p>
<h3 class="subhead">margins</h3>
<p>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 <a title=
"Want to know which browser we love the most?" href=
"http://www.yourhtmlsource.com/starthere/browserreview.html"><font color=
"#0066CC">browsers</font></a> use different attributes to put in these margins,
so when you change one, change the other as well.</p>
<div>
<ul>
<li>For <em>Internet Explorer</em>: <code>topmargin="0"</code> and
<code>leftmargin="0"</code></li>
<li>For <em>Netscape</em>: <code>marginheight="0"</code> and
<code>marginwidth="0"</code></li>
</ul>
</div>
<p>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.</p>
<hr class="blue">
<p><strong>Show me the code</strong><br>
So now, a complete <code>body</code> tag would look something like this:</p>
<p class="code"><code><body bgcolor="#ffffff" background="bubbles.gif"
text="#000000" link="#3399ff" vlink="#9966ff" alink="#000000"
bgproperties="fixed" topmargin="0" marginheight="0"></code></p>
<hr class="blue">
<p><a name="stepintostyle" id="stepintostyle"></a></p>
<h2 class="heading">Step into Style</h2>
<p>During the time you've spent learning HTML so far, you may have heard
mention of <em>CSS</em>, or <em>Cascading StyleSheets</em>, 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 <a href=
"http://www.yourhtmlsource.com/stylesheets/"><font color="#0066CC">stylesheets
section</font></a>, and a dedicated <a title=
"Get learning them; they're super-important" href=
"http://www.yourhtmlsource.com/stylesheets/introduction.html"><font color=
"#0066CC">introduction to CSS</font></a> here, but think of this as an
induction to the introduction.</p>
<p>There are many tags in HTML that exist purely to create a certain
<em>look</em> 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
(<span title="Aha, I got my dig in!">and is why you'll see practices like these
mentioned in older HTML tutorials...</span>), but they are not at all suitable
for the web that exists today. These techniques create <a href=
"http://www.yourhtmlsource.com/accessibility/"><font color=
"#0066CC">accessibility</font></a> problems, add to the <a href=
"http://www.yourhtmlsource.com/optimisation/"><font color=
"#0066CC">bulk</font></a> of your HTML files, and are generally awkward to work
with. Nowadays, we have a better method of styling our pages.</p>
<p><strong>Style Sheets are the best way to define how your page
looks</strong>. Everyone should use them. You create a simple text file,
<span class="css">styles.css</span> 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 (<code><h1></code>) 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 <code>h1</code> elements should be red and then
displays red headings, without any extra code.</p>
<p>In this way you can apply all of the presentational stuff through simple
CSS, and <strong>keep your HTML relatively clean and simple</strong>. So, open
a new document and add this to it:</p>
<p class="code"><span class="css"><strong>body</strong> {margin: 0px; }<br>
<strong>h1</strong> {color: red; }</span></p>
<p>That's all that needs to be in the file. Save it as <span class=
"css">styles.css</span> (or whatever). Now add this line into the
<code>head</code> of all your pages:</p>
<p class="code"><code><link rel="stylesheet" type="text/css"
href="styles.css"></code></p>
<p>This tells your browser <strong>where to look for the CSS file</strong>.
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
<code>topmargin</code>/<code>marginheight</code>/etc. attribute tomfoolery.
It's actually probably best if you take out those attributes.<br>
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
<a href="http://www.yourhtmlsource.com/stylesheets/"><font color="#0066CC">CSS
section</font></a> for more.</p>
<p><a name="SCHEME" id="SCHEME"></a></p>
<h2 class="heading">A word on colour schemes</h2>
<p>Avoid a <strong>shocking</strong> colour scheme at all costs. It is no
coincidence that the best sites have <strong>subdued</strong>, 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 <strong>contrast</strong> high between
<code>bgcolor</code>s and <code>text</code> colours, so no text disappears
because it is too close in shade.<br>
If you think people might want to <strong>print</strong> 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 <strong>easy to read</strong> as the
normal black on white.</p>
<p>The colour-scheme you use and the subject of your site will often have a lot
in common. They will also create a different <strong>mood</strong>. 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
<strong>audience</strong>.</p>
<p><a name="PICKBACKGROUND" id="PICKBACKGROUND"></a></p>
<h3 class="subhead">Pick your background well</h3>
<p>If you do use a <code>background</code> (remember, you don't have to), pick
out the main colour in the image. Then set that colour as your
<code>bgcolor</code>. 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.<br>
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.</p>
<h2 class="heading">Check the Source</h2>
<p>Looking through the <strong>source code of other sites</strong> is an
excellent way to pick up HTML methods and tricks. In your browser click
<em><u>V</u>iew | Sour<u>c</u>e</em> 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 <strong>cut and paste code</strong>
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 <span class="sourcegray">HTMLSource</span>...<br>
<span title=
"Although at least when I emailed them about it the guys behind it proved to me that they were idiots going nowhere. What did I expect, I guess.">And
now the necessary warnings: be careful about learning from badly-written code.
There are plenty of awfully-coded sites that you may be reading, so try not to
pick up any of their bad habits. Also: stealing other people's work makes you
an idiot. 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 <span class="sourcegray">HTMLSource's</span> design
and it's hugely irritating.</span> Just no.</p>
<p>Once you've gotten your code together, the next essential step is to
<strong>validate</strong> it to make sure it'll work in all browsers without
problems. You may be surprised. There's a good (if harsh) <a href=
"http://validator.w3.org/"><font color="#0066CC">» online HTML
validator</font></a> over at the W3C's site.</p>
<p><a name="HANDCODE" id="HANDCODE"></a></p>
<h2 class="heading">Hand Code</h2>
<p>Unless you break out of the <a href=
"http://www.yourhtmlsource.com/starthere/glossary.html#WYSIWYG"><font color=
"#0066CC">WYSIWYG</font></a>-user's mentality, you will always be restricted in
what you can create. Too many beginners go straight to FrontPage or <a class=
"more" href=
"http://www.yourhtmlsource.com/starthere/softwarereview.html#DREAMWEAVER"><font color="#0066CC">
DreamWeaver</font></a> and never <em>really</em> 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.<br>
<strong>Hand coding in a text-editor</strong> (like <a href=
"http://www.yourhtmlsource.com/starthere/softwarereview.html#HOMESITE"><font color="#0066CC">
HomeSite</font></a> or even trusty <a href=
"http://www.yourhtmlsource.com/starthere/whatdoineed.html"><font color=
"#0066CC">NotePad</font></a>) means you know your code much better and so can
find problems and edit smaller things. You have much better <strong>control
over your design</strong>. You're closer to your code and are able to
incorporate things like <a href=
"http://www.yourhtmlsource.com/stylesheets/"><font color=
"#0066CC">CSS</font></a> more easily. Visual editors also output very bloated
code with lots of unnecessary <a class="more" href=
"http://www.yourhtmlsource.com/text/font.html"><font color="#0066CC">font
tags</font></a> and paragraphs etc. Your pages will download faster if you
<strong>code efficiently</strong> in a text-editor.<br>
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.</p>
<p><a name="LEARNCSS" id="LEARNCSS"></a></p>
<h2 class="heading">Learn CSS</h2>
<p>CSS, or <a href="http://www.yourhtmlsource.com/stylesheets/"><font color=
"#0066CC">Cascading Style Sheets</font></a>, 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.<br>
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 <a href=
"http://www.yourhtmlsource.com/stylesheets/introduction.html"><font color=
"#0066CC">introduction to stylesheets</font></a>.</p>
<p><a name="PRESENTATION" id="PRESENTATION"></a></p>
<h2 class="heading">Presentation</h2>
<p>You need to <strong>structure your page into blocks</strong>, by using
either <a title="A good method" href=
"http://www.yourhtmlsource.com/tables/basictables.html"><font color=
"#0066CC">tables</font></a>, <a title="The best method" href=
"http://www.yourhtmlsource.com/stylesheets/csslayout.html"><font color=
"#0066CC">layers</font></a> or <a title="A bad way to go about things" href=
"http://www.yourhtmlsource.com/frames/basicframes.html"><font color=
"#0066CC">frames</font></a>. Have some clearly defined <a href=
"http://www.yourhtmlsource.com/accessibility/navigation.html"><font color=
"#0066CC">navigation</font></a>, content and supplementary boxes — people will
know where to look for specific parts of your page. Don't <em>stack</em> 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, <strong>make use of horizontal screen space</strong> as best you
can by aligning navigation links and inset pictures to the side so that the
content flows alongside it.</p>
<p>Limit your <strong>font choices</strong> 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 <em>could</em>. This led to the pages
looking like a big mess. You should use very few fonts to avoid the same
fate.<br>
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 <a href=
"http://www.yourhtmlsource.com/text/font.html"><font color=
"#0066CC">sizes</font></a> 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 <a href="http://www.yourhtmlsource.com/text/font.html"><font color=
"#0066CC">font face tutorial</font></a>), so they see the same page you do.</p>
<p><a name="COLOURS" id="COLOURS"></a></p>
<h2 class="heading">Colours</h2>
<p>I've already gone over the <strong>importance of using light
colours</strong> in the <a href=
"http://www.yourhtmlsource.com/myfirstsite/body.html"><font color=
"#800080"><body> tutorial</font></a>, 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.<br>
Have a look at sites like <a title="!" href=
"http://www.yahoo.com/"><font color="#0066CC">» Yahoo</font></a> and <a title=
"Brilliantly designed, this" href="http://www.amazon.com/"><font color=
"#0066CC">» Amazon</font></a>, 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 <strong>white-space</strong> left as places for visual
relief. These sites have been designed following extensive surveys of web
users, so they know what they're doing.</p>
<p>When choosing your colour-scheme, pick one or <strong>two main
colours</strong>. 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 <a href=
"http://www.yourhtmlsource.com/accessibility/nonditheringcolours.html"><font color="#0066CC">
web-safe palette</font></a>.</p>
<p><a class="example" title="See how to check your page's contrast" href=
"http://www.yourhtmlsource.com/examples/colourcontrasts.html"><font color=
"#0066CC">Make sure</font></a> there is a good <strong>contrast between your
background and text</strong> colours. Keep your main text black in most places.
The areas of most interest on your page should be <strong>highlighted</strong>
with a small instance of bright colour, but make sure it never takes over.</p>
<p><a name="RESTRAINT" id="RESTRAINT"></a></p>
<h2 class="heading">Exercise Restraint</h2>
<p>You may get a little excited about the glitzy special effects achievable
with things like Java Applets, <a class="more" href=
"http://www.yourhtmlsource.com/javascript/"><font color=
"#0066CC">JavaScript</font></a> 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.<br>
<strong>Simplicity works best</strong>. A basic text-based <a href=
"http://www.yourhtmlsource.com/accessibility/navigation.html"><font color=
"#0066CC">navigation system</font></a> is preferable to one constructed with
<a class="more" href=
"http://www.yourhtmlsource.com/images/rollovers.html"><font color=
"#0066CC">image rollovers</font></a>. Going straight to a content-rich homepage
is preferable to a pointless and showy Flash intro or splash page. <a class=
"more" href="http://www.yourhtmlsource.com/images/multimedia.html"><font color=
"#0066CC">Background sounds</font></a> and the like get annoying after one
instance. <a class="more" href=
"http://www.yourhtmlsource.com/text/marquees.html"><font color=
"#0066CC">Scrolling text</font></a> 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.</p>
<p><a name="BASICPROMOTION" id="BASICPROMOTION"></a></p>
<h2 class="heading">Basic Promotion</h2>
<p>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 <em>at least 4 weeks</em> 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 re-submit your site. It's a horrifically
tedious waiting time, but until the engines are able to work faster it will
stay this way.</p>
<p>While you wait, look out for other opportunities to start drawing in
readers. Find <strong>directories</strong> 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 <strong>targeted visitors</strong>. Learn how to <a href=
"http://www.yourhtmlsource.com/promotion/writingfortheweb.html"><font color=
"#0066CC">write</font></a> promotional, keyword-rich text for descriptions. If
you're feeling really confident about your site's quality, submit to <a title=
"Hope you get an editor on a good day..." href=
"http://www.dmoz.org/"><font color="#0066CC">» Dmoz</font></a> (the Open
Directory), and — lordy — <a href="http://www.yahoo.com/"><font color=
"#0066CC">» Yahoo</font></a>. 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.</p>
<p>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.</p>
<p>Add in <a href=
"http://www.yourhtmlsource.com/promotion/metatags.html"><font color=
"#0066CC"><meta> tags</font></a> before you submit to the search engines.
Read over <a href=
"http://www.yourhtmlsource.com/promotion/promotion101.html"><font color=
"#0066CC">Promotion 101</font></a> for the fundamentals of choosing keywords.
The most important (and best for seeing results with quickly) engines are
<a title="If you haven't ever used it, try it now and see why it's my fave"
href="http://www.google.com/"><font color="#0066CC">» Google</font></a> and
<a title="Sure wish they'd sort themselves out over at Alta..." href=
"http://www.altavista.com/"><font color="#0066CC">» AltaVista</font></a>. Both
of these engines index new sites quite reliably, while you could be waiting
forever on others and still get no visitors from them.<br>
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.<br>
Also: <a title="Well, obviously" href=
"http://www.yourhtmlsource.com/misc/linktous.html"><font color="#0066CC">link
to HTMLSource!</font></a> There, that's my promotion done...</p>
<p><a name="OPTIMISATION" id="OPTIMISATION"></a></p>
<h2 class="heading">Fundamental Optimisation</h2>
<p>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 <a href=
"http://www.yourhtmlsource.com/optimisation/"><font color=
"#0066CC">optimisation</font></a> section, but for now, here are some of the
most basic ideas that you should adhere to when coding webpages:</p>
<ul>
<li>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 <a href=
"http://www.yourhtmlsource.com/images/thumbnails.html"><font color=
"#0066CC">thumbnails</font></a>. Always use the <a href=
"http://www.yourhtmlsource.com/images/furtherattributes.html"><font color=
"#0066CC">height, width and alt</font></a> attributes.</li>
<li>Don't use animated GIFs when a static one would have done the same job.
Animations are often distracting page elements.</li>
<li><a href=
"http://www.yourhtmlsource.com/optimisation/imageoptimisation.html"><font color="#0066CC">
Optimise your graphics</font></a> as much as you can. It's a less advanced
process than you probably think.</li>
<li>Leave out most <a href=
"http://www.yourhtmlsource.com/images/multimedia.html"><font color=
"#0066CC">multimedia</font></a> effects.</li>
<li>Split long pages into a few smaller ones.</li>
</ul>
<hr class="blue">
<p><a name="GOLDENRULE" id="GOLDENRULE"></a></p>
<h2 class="heading">The Golden Rule</h2>
<p>And the one notion that will sum up the attitude you're going to need to
become a good web-designer?<br>
<em>Be willing to learn and improve.</em><br>
<span title="God Bless Web Design...">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 <a href=
"http://www.yourhtmlsource.com/accessibility/redesigning.html"><font color=
"#0066CC">redesign</font></a> it every few months. Care about the quality of
your work. Continue to learn new techniques and keep on top of new <a class=
"more" title="Like HTML4 and XHTML" href=
"http://www.yourhtmlsource.com/accessibility/html4explained.html"><font color=
"#0066CC">developments</font></a> 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.</span></p>
<h2 class="heading">Basic Structure</h2>
<dl>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/myfirstsite/myfirstpage.html"><code><font color=
"#800080" size="3"><<strong>!DOCTYPE</strong>></font></code></a></dt>
<dd><font size="3">The DTD (Document Type Declaration), this tells your browser
which</font> <a href=
"http://www.yourhtmlsource.com/starthere/historyofhtml.html"><font color=
"#0066CC" size="3">version of HTML</font></a> <font size="3">you're using. Make
sure you use the right DTD, or your page may display incorrectly.</font></dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/myfirstsite/myfirstpage.html"><code><font color=
"#800080" size=
"3"><<strong>html</strong>>...</html></font></code></a></dt>
<dd><font size="3">Standard opening and closing tags for any HTML page. Enclose
everything else in these. <strong>Container tag</strong>.</font></dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/myfirstsite/basicformatting.html#COMMENTS"><code>
<font color="#0066CC" size="3"><!-- ... --></font></code></a></dt>
<dd><font size="3">A comment — whatever you put here will be skipped over by
the browser.</font></dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/myfirstsite/myfirstpage.html"><code><font color=
"#800080" size=
"3"><<strong>head</strong>>...</head></font></code></a></dt>
<dd><font size="3">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. <strong>Container
tag</strong>.</font></dd>
<dd>
<dl>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/myfirstsite/myfirstpage.html"><code><font color=
"#800080" size=
"3"><<strong>title</strong>>...</title></font></code></a></dt>
<dd><font size="3">Whatever is between these tags will appear in the blue bar
at the top of the screen.</font></dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/promotion/metatags.html"><code><font color=
"#0066CC" size="3"><<strong>meta</strong>></font></code></a></dt>
<dd><font size="3">A group of tags that give page and creator information
specifically to the search engines.</font></dd>
<dt><font size="3"><code><<strong>base</strong>></code></font></dt>
<dd><font size="3">Changes the default link target or relative link URL, useful
if the page is read on another server.</font></dd>
<dt><font size="3"><code><<strong>link</strong>></code></font></dt>
<dd><font size="3">Allows you to associate</font> <a href=
"http://www.yourhtmlsource.com/stylesheets/introduction.html"><font color=
"#0066CC" size="3">stylesheets</font></a> <font size="3">and a</font> <a href=
"http://www.yourhtmlsource.com/promotion/favicon.html"><font color="#0066CC"
size="3">favorites icon</font></a> <font size="3">to your page.</font></dd>
</dl>
</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/myfirstsite/body.html"><code><font color=
"#800080" size=
"3"><<strong>body</strong>>...</body></font></code></a></dt>
<dd><font size="3">Everything visible on your page goes between these tags.
Everything. <strong>Container tag</strong>.</font></dd>
</dl>
<p><a name="LINKS" id="LINKS"></a></p>
<p class="heading">Links</p>
<dl>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/myfirstsite/basiclinks.html"><code><font color=
"#800080"><<strong>a</strong>>...</a></font></code></a></dt>
<dd>Makes the enclosed text or image a hyperlink to another file.</dd>
</dl>
<p><a name="LISTS" id="LISTS"></a></p>
<p class="heading">Lists</p>
<dl>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/text/lists.html"><code><font color=
"#0066CC"><<strong>ol</strong>>...</ol></font></code></a></dt>
<dd>Creates an ordered list, where each item is numbered in order.
<strong>Container Tag</strong>.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/text/lists.html"><code><font color=
"#0066CC"><<strong>ul</strong>>...</ul></font></code></a></dt>
<dd>Creates an unordered list, with each item bulleted. <strong>Container
Tag</strong>.</dd>
<dd>
<dl>
<dt><code><<strong>li</strong>></code></dt>
<dd>Each list item begins with an <code>li</code>, and they are all placed in
either an <code>ol</code> or <code>ul</code>.</dd>
</dl>
</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/text/lists.html"><code><font color=
"#0066CC"><<strong>dl</strong>>...</dl></font></code></a></dt>
<dd>Creates a definition list.</dd>
<dd>
<dl>
<dt><code><<strong>dt</strong>></code></dt>
<dd>Creates a definition term.</dd>
<dt><code><<strong>dd</strong>></code></dt>
<dd>Creates a definition, which appears below its parent term and indented from
the left.</dd>
</dl>
</dd>
</dl>
<p><a name="MULTIMEDIA" id="MULTIMEDIA"></a></p>
<p class="heading">Multimedia</p>
<dl>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/images/"><code><font color=
"#0066CC"><<strong>img</strong>></font></code></a></dt>
<dd>Places an image on your page</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/images/multimedia.html"><code><font color=
"#0066CC"><<strong>embed</strong>></font></code></a></dt>
<dd>Adds a multimedia element directly into your page, allowing your browser to
play it with a plug-in.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/javascript/"><code><font color=
"#0066CC"><<strong>script</strong>>...</script></font></code></a></dt>
<dd>Adds a script, usually a JavaScript into your page.</dd>
<dd>
<dl>
<dt><code><noscript>...</noscript></code></dt>
<dd>Enclose anything you want displayed by browsers that do not support
scripts.</dd>
</dl>
</dd>
</dl>
<p><a name="TABLES" id="TABLES"></a></p>
<p class="heading">Tables</p>
<dl>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/tables/"><code><font color=
"#0066CC"><<strong>table</strong>>...</table></font></code></a></dt>
<dd>Places a table on your page. <strong>Container Tag</strong>.</dd>
<dd>
<dl>
<dt><code><<strong>caption</strong>>...</caption></code></dt>
<dd>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 <code>tr</code> or <code>td</code>.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/tables/basictables.html"><code><font color=
"#0066CC"><<strong>tr</strong>>...</tr></font></code></a></dt>
<dd>starts a new table row. Cells go inside this. Attributes are the same as
<code>td</code>'s.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/tables/basictables.html"><code><font color=
"#0066CC"><<strong>td</strong>>...</td></font></code></a></dt>
<dd>encloses a table cell. Content goes in these.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/tables/advancedtables.html"><code><font color=
"#0066CC"><<strong>th</strong>>...</th></font></code></a></dt>
<dd>same as table cells, but with all contents bold and aligned to the
centre.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/tables/tablesaccessibility.html"><code><font color="#0066CC">
<<strong>thead</strong>>...</thead></font></code></a></dt>
<dd>Defines the header part of a large table. Wrap the tags around the
rows/cells you wish to define as the header.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/tables/tablesaccessibility.html"><code><font color="#0066CC">
<<strong>tbody</strong>>...</tbody></font></code></a></dt>
<dd>Defines the main body of a complex table.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/tables/tablesaccessibility.html"><code><font color="#0066CC">
<<strong>tfoot</strong>>...</tfoot></font></code></a></dt>
<dd>Wrap this around the footer part of your table.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/tables/tablesaccessibility.html"><code><font color="#0066CC">
<<strong>colgroup</strong>></font></code></a></dt>
<dd>Allows you to set attributes for the entire column. Each column has to be
defined sequentially.</dd>
</dl>
</dd>
</dl>
<p><a name="FRAMES" id="FRAMES"></a></p>
<p class="heading">Frames</p>
<dl>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/frames/"><code><font color=
"#0066CC"><<strong>frameset</strong>>...<
/frameset></font></code></a></dt>
<dd>Starts a new frame layout. When constructing a frame page, no
<code>body</code> is used. <strong>Container Tag</strong>.</dd>
<dd>
<dl>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/frames/basicframes.html"><code><font color=
"#0066CC"><<strong>frame</strong>></font></code></a></dt>
<dd>Defines a single frame within a frameset.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/frames/basicframes.html"><code><font color=
"#0066CC"><<strong>noframes</strong>>...<
/noframes></font></code></a></dt>
<dd>If a visitor has an old browser which doesn't support frames you can leave
a message or some content between these tags.</dd>
</dl>
</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/frames/inlineframes.html"><code><font color=
"#0066CC"><<strong>iframe</strong>>...</iframe></font></code></a></dt>
<dd>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 <code>frameset</code>.</dd>
</dl>
<p><a name="FORMS" id="FORMS"></a></p>
<p class="heading">Forms</p>
<dl>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/forms/"><code><font color=
"#0066CC"><<strong>form</strong>>...</form></font></code></a></dt>
<dd>Begins a form area. Add in any form elements you want to use between these
tags. <strong>Container Tag</strong>.</dd>
<dd>
<dl>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/forms/basicforms.html"><code><font color=
"#0066CC"><<strong>input</strong>></font></code></a></dt>
<dd>Allows you to add various user input fields, like text-boxes, checkboxes,
radio buttons, submit and reset buttons, depending on how you set the
<code>type</code> attribute.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/forms/basicforms.html"><code><font color=
"#0066CC"><<strong>textarea</strong>>...</textarea></font></code></a></dt>
<dd>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.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/forms/basicforms.html"><code><font color=
"#0066CC"><<strong>select</strong>>...</select></font></code></a></dt>
<dd>Sets up an empty drop-down selection box. You can add choices with the
<code><option>...</option></code> tag.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/forms/formsaccessibility.html"><code><font color="#0066CC">
<<strong>fieldset</strong>>...</fieldset></font></code></a></dt>
<dd>Allows you to group form elements together into logical arrangements.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/forms/formsaccessibility.html"><code><font color="#0066CC">
<<strong>legend</strong>>...</legend></font></code></a></dt>
<dd>You can title your <code>fieldset</code>s with this tag.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/forms/formsaccessibility.html"><code><font color="#0066CC">
<<strong>label</strong>>...</label></font></code></a></dt>
<dd>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.</dd>
</dl>
</dd>
</dl>
<p><a name="TEXT" id="TEXT"></a></p>
<p class="heading">Text Formatting</p>
<dl>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/accessibility/logicalstyle.html"><code><font color="#0066CC">
<address>...</address></font></code></a></dt>
<dd>Encloses the signature and address of the author, displayed in
italics.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/myfirstsite/basicformatting.html"><code><font color="#800080">
<b>...</b></font></code></a></dt>
<dd>Makes the enclosed text into bold text.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/text/font.html"><code><font color=
"#0066CC"><big>...</big></font></code></a></dt>
<dd>Makes the enclosed text one size bigger.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/accessibility/logicalstyle.html"><code><font color="#0066CC">
<blockquote>...</blockquote></font></code></a></dt>
<dd>Indents the text in from both sides.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/myfirstsite/basicformatting.html"><code><font color="#800080">
<br></font></code></a></dt>
<dd>Stops the current line and goes on to the next.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/myfirstsite/basicformatting.html"><code><font color="#800080">
<center>...</center></font></code></a></dt>
<dd>Aligns the surrounded objects (anything from text or images to forms etc.)
to the center.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/accessibility/logicalstyle.html"><code><font color="#0066CC">
<cite>...</cite></font></code></a></dt>
<dd>Includes a citation, and is usually rendered as italics.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/accessibility/logicalstyle.html"><code><font color="#0066CC">
<code>...</code></font></code></a></dt>
<dd>If you are including either computer or HTML code into your documents wrap
these around it. It is rendered in small text.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/accessibility/logicalstyle.html"><code><font color="#0066CC">
<dfn>...</dfn></font></code></a></dt>
<dd>A definition. As usual with these things, rendered in italics.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/stylesheets/csslayout.html"><code><font color=
"#0066CC"><div>...</div></font></code></a></dt>
<dd>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.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/accessibility/logicalstyle.html"><code><font color="#0066CC">
<em>...</em></font></code></a></dt>
<dd>Emphasises the surrounded text, changing it to italics.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/text/font.html"><code><font color=
"#0066CC"><font>...</font></font></code></a></dt>
<dd>Sets the font properties for the selected text.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/text/headingfontsize.html"><code><font color=
"#0066CC"><hx>...</hx></font></code></a></dt>
<dd>Sets the text as a heading, with values of <code>h1</code> (the biggest) to
<code>h6</code> (the smallest).</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/myfirstsite/basicformatting.html"><code><font color="#800080">
<hr></font></code></a></dt>
<dd>Inserts a grey horizontal line across the page.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/myfirstsite/basicformatting.html"><code><font color="#800080">
<i>...</i></font></code></a></dt>
<dd>The default tag for italics.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/accessibility/logicalstyle.html"><code><font color="#0066CC">
<kbd>...</kbd></font></code></a></dt>
<dd>Implies that the text should be entered on the keyboard. It is rendered
mono-spaced and small.</dd>
<dt><code><nobr>...</nobr></code></dt>
<dd>Tells the enclosed text not to wrap at the edge of the screen, but continue
on as long as it needs.</dd>
<dd>
<dl>
<dt><code><wbr></code></dt>
<dd>If you need a line break in a block of text you have set in
<code>nobr</code>, add this.</dd>
</dl>
</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/myfirstsite/basicformatting.html"><code><font color="#800080">
<p>...</p></font></code></a></dt>
<dd>Makes the enclosed text a paragraph, with lines skipped at the top and
bottom.</dd>
<dt><a name="PRE" id="PRE"></a><a class="more" href=
"http://www.yourhtmlsource.com/accessibility/logicalstyle.html"><code><font color="#0066CC"><pre>...</pre></font></code></a></dt>
<dd>Displays text in fixed-width font and retains the formatting of the
original text (i.e. spaces and line-breaks).</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/accessibility/logicalstyle.html"><code><font color="#0066CC">
<q>...</q></font></code></a></dt>
<dd>Used to mark up short, inline quotations. Some browsers will add quotation
marks around the text.</dd>
<dt><code><s>...</s></code> (or
<code><strike>...</strike></code>)</dt>
<dd>Displays the text with a strike-through.</dd>
<dt><code><samp>...</samp></code></dt>
<dd>Indicates sample output from a form or program. Text is rendered in small
font.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/text/font.html"><code><font color=
"#0066CC"><small>...</small></font></code></a></dt>
<dd>Makes the enclosed text one size smaller.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/accessibility/logicalstyle.html"><code><font color="#0066CC">
<strong>...</strong></font></code></a></dt>
<dd>Creates emphasis for the selected text, rendered in bold.</dd>
<dt><code><sub>...</sub></code></dt>
<dd>Renders the text in subscript, which is words under the normal text. For
example: <sub>this</sub></dd>
<dt><code><sup>...</sup></code></dt>
<dd>The sister tag to <code><sub></code> above, this renders text in
superscript. <sup>Like this</sup></dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/myfirstsite/basicformatting.html"><code><font color="#800080">
<tt>...</tt></font></code></a></dt>
<dd>Renders text in fixed-width, mono-spaced font; like an old typewriter.</dd>
<dt><a class="more" href=
"http://www.yourhtmlsource.com/myfirstsite/basicformatting.html"><code><font color="#800080">
<u>...</u></font></code></a></dt>
<dd>Displays the surrounded text underlined.</dd>
</dl>
<h2 class="heading">Some Terminology</h2>
<p>To allow your webpages to be seen by anyone else connected to the Internet,
you first need to place them on a <em>server</em>. This is a computer like any
other, which is constantly connected to the Internet. When a visitor
(technically called a <em>client</em>) requests a file that is on the server,
the server <em>serves</em> this file to the visitor, and allows them to
download it.</p>
<p>So, you need to transfer your files from your computer to your <a href=
"http://www.yourhtmlsource.com/myfirstsite/webspacereview.html"><font color=
"#0066CC">webspace</font></a> on this server. First you must actually
<strong>sign up for some space</strong>. Your <abbr class="help" title=
"[ Internet Service Provider ] - The company that you call to connect to the Internet">
ISP</abbr> may provide you with some for free, or you may buy some professional
hosting, or sign up for some free space with one of the many companies that
offer it. You will typically receive between