Professional Documents
Culture Documents
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 this tag.
<label>...</label>
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 mono-
spaced 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.
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 a-
foamin’ 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 soul-
searching, 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
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.
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.
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>
</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...
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
, which stands for 'non-breaking space'. With this you can create
indents for your text.
<p> 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.
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.
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.
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
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.
<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
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
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.
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.
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 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.
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.
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:
Printable pages
Just print pages normally, our stylesheet will automatically reformat the page for you.
Translations ¤
Translate automatically into:
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
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.
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. type="I"
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’.
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.
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 )
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.
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.
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: