A basic page format
All pages follow this basic structure. Let's start with the first tags you're going to learn.
Tags, eh?
Yeah. They are the things between the <> brackets. I'm sure you've seen them in someone's code before, and if you haven't, right click this page and select 'View Source'. 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.
Structure of Tags
Tags follow a common structure too. For example, to make text
bold, you use the tag b. So, at the point in your
text that you want the bold to start, you just stick the triangle-brackets
around that and put <b>, and when you want it to stop, you
put </b>. That is an end tag. it is simply
the start tag with a forward slash in front of the word or
letter. Some tags won't need that end tag, but most do, so don't forget it.
So let's make a page
Oh yeah. Ok, first step. Open Notepad, or any other text editor. Type this:
<html>
</html>
These are the standard start and end tags on any page. Note that when I say 'standard', that means 'you must put it there'. This pair are called container tags because they will have other elements contained inside them.
Now we'll add in the rest of the structure. Modify your page to this:
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 XHTML, but HTML 4 is fine for your first few 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 tags that go in the
head part are advanced stuff for search engines and the like, so
the only one you need to know is title.
<title> 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 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.
<body> is the main part
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.
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>
Hello, 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 writing, check the next page where you will find all the tags needed to make your page more presentable. For now, stick with saving your page and checking how it looks...
Saving your masterpiece
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.
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 .txt (TeXT file) . You have
written some text, and you want a file that is in the .html
format. So click File | Save As... Find the place on your hard
drive where you want to keep all your pages (I would recommend you create a
new folder 
and keep all of your documents together). Then in the
box labelled 'save as type' change it to 'all files *.*'. This
means that you can save the data (in this case, some text) into any format. So,
now name your file wikid.html and click
save. Finito.
After you have done this once, if you ever change your code, you only need to press save, not save as, because the computer now knows this is a html file.
Your page's filename can consist of any combination of letters, numbers or _ and - characters. It is a good practice to start the filename with a letter and use lowercase letters at all times. This will make sure that few capitalisation-caused errors will occur by people trying to type your page's address into their browser. You should call your homepage index.html — this will be important later on.
- Question: how come I see some pages named 'something.htm'?
- Well, before more recent operating systems like Windows 95, file extensions were limited to only three letters, hence htm. You could name all your files using .htm as the suffix, but there are so few people with 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.
- Note to users of word processors
- 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 text-only, and only the things useful to your browser will get saved.
Having a look
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 Ctrl + N. Now, in that new one that should have opened, go to File | Open. 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!
Ok, now smile.
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:
All tags can have several attributes at a
time, but only some attributes work for certain tags. It's just a matter of
learning them off. Also, don't forget to encase the value in
quotation marks.
So, to add the center value to
the p tag, the structure is:
<p align="center">Centered
Text</p>
Compare that to the example above to see
what's what. p is the tag, align is the attribute,
and center is the attribute's value.
Note that when closing the original tag (p),
all its attributes are taken with it, and all you need is the normal closing
tag (i.e. don't start putting attributes into it).
Obviously, if it can be aligned to the center, it can be aligned in other
ways too. You can align left and right.
But there's no point in writing <p align="left">, because
all text aligns to the left anyway. This is known as a
default.
Headings
In the beginning, heading tags were
invented as a graded method of information layout and division. You used big
headings for the main points in a page and go down through the numbers. There
are 6 gradings or levels of HTML headings: <h1> to
<h6>. Graphically, these create decreasingly large text,
with h1 being the biggest, and h6 being the smallest
of the group.
So let’s see them!
Oh, that's my cue. Ok: here are the examples:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
You just wrap the preferred heading tag around the text, like so:
<h3>Heading 3</h3>
The text will then appear bold and big. One thing to note is that headings are always apart from the rest of your text, like a paragraph. This is a property of block-level tags. You cannot flow headings and normal text together. If you want text to follow straight away, you should just change the font size and not use a heading.
The title of your page should be made into
a level-one heading. The rest of your page should be divided into sections with
further heading tags, getting progressively smaller for points and sub-points.
Try not to skip levels (like going from a <h2> to a
<h4>).
sourcetip: Headings take on the color and
font face of the surrounding text, so you can change a headings color, say, by
wrapping a font color around the h tag. Read this
tutorial on font and
color for more.
Headings can also be
aligned. Values are center, justify,
left or right.
Lines
Some other very simple stuff is using lines
across the page. To make them, use <hr>, which stands for
'Horizontal Rule'.
Just put that anywhere on your page (no end tag is needed) and the text will
stop and a big
will appear and then your text will continue on. Nice, eh?
These can be manipulated through attributes too. They can
be aligned left and right, like p above. They also
have two other attributes that relate to the size of the line.
<hr width="100"> would create
a little guy like that. You are specifying the width in pixels here, or you could use a percentage, like
<hr width="80%">, which will create a line
that is 80% as wide as the available screen width.
To make stronger lines, <hr size="4"
noshade> would create a big, beefy
Did you see that noshade bit there? That is a special attribute
unique to hr, and it doesn't need a value. It stops the
hr having two shades of gray in it.
It also shows that many different attributes can be used on the same tag at
the same time. Experiment with them a bit.
Comments
Once your documents start getting filled with confusing tags and sections you're going to need to know which part is which. You use HTML comments to add notes to your code so that you can read it easily the next time you come back to edit it. The code for a comment is a little different than for other tags:
<!-- Navigation starts here
-->
Anything you put between the <!-- --> lines will be
completely skipped by your browser. You can add in some hash marks (#) to make
your comments stand out. When scrolling through the HTML code of a page you
want your structure comments to jump out. Comments will be used later on in
HTML to hide things from old browsers. They're very useful — use them and help
yourself out.
Spaced Out
How you lay out your source code is a matter of taste in most regards. You can indent some tags off the left margin so they're easy to see, and skip lines after each paragraph. It doesn't matter much to your browser, which usually disregards spaces, tabs, blank lines and other 'white space' characters when it is displaying your pages. I should warn you that sometimes however, extra spacing characters will mess up something on you. It's not serious, but a line like the one below should be fixed:
<p><u>Some underlined text.
</u></p>
The space character before the closing </u> tag will make
the underline effect run on for longer than the sentence, which looks sloppy.
Later on, with table tags especially, leaving in spaces like this can
ruin a layout by adding gaps between your elements. So, code tightly, with no
spaces between text and end tags.
First Validate
You've probably introduced quite a lot of new tags into your page now. Validation is the process by which you make sure that in all of your tinkering, you haven't introduced any nasty mistakes into your lovely simple code. To check if a HTML file is valid, you can use an online validator like the » W3C validator. It's a free service that scans your file (either online or any page on your computer) and returns a list of errors, if it finds any. It's easy to use — enter the address of a webpage into the form and it will go off and do the necessary tests.
When an error is diagnosed it is usually a simple process to track it down and eliminate it with great prejudice. Don't take the validator's warnings lightly; this is an important process, and one that many careless coders disregard. Later on, they regret it. Oh yes they do.
If your code is valid, it has a much better chance of working in every browser, which means more people can read your stuff. While the chances of having many critical errors in your code are small at the moment, once you have an entire site to maintain the gremlins can often sneak into your code, threatening the accessibility of your pages. So, validate often. Whenever any more major work is done on your site, run it through the machine again just to make sure everything's hunky-dory. It'll keep me happy.
And now; we link!
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.
Explanation:
a:astands for Anchor, which means Link. This is the tag that makes it all happen.href: Means Hypertext REFerence. Thehrefpart is another attribute, with the location of the other page as its value. Just change theotherpage.html to the name of the second file. Don’t forget the quotation marks!
Whatever you put inside the link tags will become a link, coloured blue and underlined. When you rest your mouse on it your cursor will turn into a hand and the URL of the page will appear in your browser’s status bar (at the bottom of the window). If you want to make links to other parts of your page (for example a link to the top of the page), set up some internal links. Changing the default colours of the links is dealt with in body attributes.
Linking to email addresses
If you want to let people email you by clicking a link, you use this code:
<a
href="mailto:bruce@example.com">mail
me</a>
to create this — mail me — which will open the users email program with your address in the To: box.
Linking to pictures
Linking to a picture file is practically the same as to a html file. Just include the name of the file, and do not forget the correct suffix — i.e. if it is a gif or a jpg. For a rundown on the file formats for images on the web, read this. If you want to use a picture as a link, read the next tutorial.
Linking to files
You link to a file just like a picture. The only difference is that it won’t open in a browser, but instead will download onto a specified place on the reader’s hard drive. An example:
<a href="ambient.mp3">download the song
(2.6MB mp3)</a>
Embedding a file directly into a page is a different process. We have a page on Internet file formats too.
Relative and Absolute Links
Internet addresses closely follow the established hierarchy structure you’re probably familiar with on your computer’s file system. First comes the Internet domain, like www.site.com. Next comes the directories (folders) that contain the file and finally the file’s name, with the appropriate file type extension. Each segment of an url is separated with a forward slash.
Yes, there are two different ways to set your links. Absolute links include the full website address, including the http:// and www. bits. Relative links are much shorter and more manageable. Always remember: on the Internet, all slashes go forwards.
For instance, say you have a page called page1.html in the “links” directory
of your site. The absolute href to this page is
http://www.site.com/links/page1.html. So, you put that link
anywhere on any page, on any site and it will always go to
that page on the Internet.
Relative links can only link to a page from the same site.
The address is always relative to the position of the second
file. If you were linking to that same page from a page in the same directory,
the href would be just page1.html. If you were linking
from your homepage, i.e. in the root directory, the link would read <a
href="links/wikidfiles.html">, as you would have to go into the
directory first, and then get the file.
sourcetip: If you name files
index.html in your directories, you can make links to these pages
by just linking to the directory name. Your browser will always pick up index
as the main page for that folder. This means you can condense
href="folder/index.html" into href="folder/". The
slash tells the browser it should look for a folder, and not a file. Don’t
forget it!
Linkal Gymnastics
If you need to go down a directory, and then back up into another one,
you’ll have to understand how your site is laid out. Using HTMLSource 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 “promotion” section, we’d have to go
backwards one directory and then into the promotion directory. So the full
relative href would be
"../promotion/index.html"
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.
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 /promotion/. This saves you
having to put in loads of ../../s. A link back to your homepage is always
href="/"
Outward Links
On outward links (links to other sites), you must always remember to prefix the address with http://. Otherwise, the link won’t work, the browser will look for a file called www.yourhtmlsource.com in your site. You will be linking to us, right? You’ll be my new best friend if you do, cheeky.
To do this correctly, you’re basically just offering an absolute link, like above. So, the correct address to link to would be http://www.yourhtmlsource.com/. Notice the ending slash? That only goes there for directories (i.e. folders) or domain names, as in this example. Don’t put a slash after a .html link, just for directories like a .com or an address without a suffix.
Site Structure
Without a simple game plan, your site could soon be very hard to find stuff in for you, what with all the files you keep piling into it. Thus, you should group pages of similar theme into folders (directories). Keep all your images in one folder too, away from your html files (call the folder “images” or “media” or something like that).
I would also advise you to work on a template of your design. It may not be important now, as your site may not have a distinctive design, but later having this file will save you hours of time. What you do is save a file with no content, just the layout of your pages as TEMPLATE.html in each directory of your site (capitals so it stands out), with the links all correct. Then when you’re adding a page to a folder, you just open this file and add your content into it, and save under a different name, leaving template.html empty, ready for another use. To see our template for this directory, see this. Check, we have one in each directory.
Say you had a site about the solar system (just say). Keep all the files about mars in a folder called “mars”, with all the pictures of mars in a directory called “images” in the directory called “mars”. And keep the pictures of Uran— ...no. I am above that.
Speaking of pictures....
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:
The image will appear on your page like this.
srcstands 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. Thesrcbit is mandatory in animgtag, which means you have to put it in. Obvious really, otherwise there’d be nothing there.altstands 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. Thealtattribute is also required, so you must write one for every image you use.
You can put in the url of any image on the web into the src,
but really you should only use relative addresses to put images onto
your pages. Adding external images means a reader has to connect to
multiple servers when they load your page, and that adds lots of extra time to
your page’s download. Not a good thing. You can save images from other web
pages into your own directory and use them from there if you want, as long as
the images are free (you should always check with the site owner).
Once you have entered the src for your image and saved your
HTML file, you can open it in your browser and test if it worked. If your image doesn’t
appear, and you get an empty frame or a rectangle with a little red ‘x’, there
is a problem with the src value you have provided. Check that you
have set the address correctly and that the image is where you say it is.
Linking Images
If you want to link to another file, by clicking on an image to get to it,
all you do is use the same tag from the earlier lesson, and wrap the
a around the image code, so that the image is in place of the text
you’d normally have. So, to make go.gif a link to
fullindex.html, you’d write:
<a href="fullindex.html"><img src="go.gif"
alt="Go to the full index."></a>
This would create:
...which, as you can see, doesn’t look quite the same as the image above. This
is because the browser puts a border around the image to show that it
is a link, coloured the same as your link colours, which we’ll be
getting into in the next tutorial. Of course, it’s not always welcome, so to
get rid of the border, add this attribute to your img tag:
<img src="go.gif" alt="Go to the full index."
border="0">
The default border thickness is 2, so you can set it to 1 if
you want a thinner border, or to anything higher for a big bad-ass border. You
can even add borders to images that aren’t links, which will be the colour of
your text.
Basic Attributes
Since you already know how to align stuff like
paragraphs, I may as well add aligning images to this page.
img aligning is done in much the same way, except now you have 3
new values you can use (only for images, mind): top, middle and bottom.
They are used in a similar fashion, as attributes to the tag like so:
<img src="monkey.gif" alt="A monkey"
align="left">
Here are some examples
Aligned left. Notice how the text hugs the
image, instead of starting under it.
Aligned right. The image hops over to the
side, and if the text reaches it, it just drops down beside it and
continues.
Aligned top. That means the text will align
to the top of the image and then go under. Note that with these last three, you
only get one line before it drops under the image.
Aligned middle. Are you getting this
yet?
Aligned bottom, keeping everything all
straight.
For a few other very useful image attributes, read Further Attributes. Then you can go on to explore the rest of our image lessons.
The <body> tag
Now that you have the gist of using attributes in tags, this should make
perfect sense. Remember the <body> tag from the first page, which everything visible on your page goes
into? That is the tag we'll be adding to in this, as it's been left untouched
up until now. There are 7 attributes to be added here, and they all change how
your page looks.
bgcolor
This is the colour of the BG, or BackGround, of your page. You need to put the colour in as a HEX code, like the rest of these colours. What are HEX codes? Glad you asked. Because it means you have to read this definition! If you want to see a list of HEX codes for 216 different colours, look at this chart. The code is:
bgcolor="#FFFFFF"
Note that, even though the default BG is white, you should still code in
#FFFFFF, because older browser's default BG is a nasty grey.
text
This will change the colour of all the text on your whole page, unless you have changed the colour manually (find out how in the text section). Your best bet here is to leave it black, because that's the easiest to read. Code!
text="#000000"
link
Instead of the normal blue, you can now change the colour of all your links to something a bit more classy.
link="#FF00FF"
vlink
Links change colour once you have clicked on them, from blue to purple. The
V stands for 'Visited'. You can change this too, but make sure
it is visibly different to the link
colour, otherwise people will get confused.
vlink="#660066"
alink
When you click on a link, it changes colour momentarily, to show you that you've clicked it I guess. If you click the 'Back' button, it is highlighted as being Active so you don't click through on it again. The default is usually red. Make sure you highlight it right; it's a nice feature.
alink="#FF0000"
background
If you want to put an image as your background, use this attribute, and set
the value to the same as you would for an image src (don't know
how? Read the preceding lesson on images). You can also link to an image from
another site, by giving the entire URL.
background="http://www.yoursite.com/media/BACKGROUND.gif"
Whatever image you choose to use, it will be tiled across
your page, filling it up. That means it will repeat itself across your page, so
choose one that doesn't look too obvious.
If you want your background to be set in place and not scroll, add the
attribute bgproperties="fixed" into the body. This
will leave the image as a watermark.
margins
There are two sets of margins on a page, the ones at the sides and the ones at the top and bottom. The two main browsers use different attributes to put in these margins, so when you change one, change the other as well.
- For Internet Explorer:
topmargin="0"andleftmargin="0" - For Netscape:
marginheight="0"andmarginwidth="0"
Despite this, the units of measurement are the same — pixels, so to make your margins the same in both browsers just set them both to the same value.
Show me the code
So now, a complete body tag would look something like this:
<body bgcolor="#ffffff" background="bubbles.gif"
text="#000000" link="#3399ff" vlink="#9966ff" alink="#000000"
bgproperties="fixed" topmargin="0" marginheight="0">
Step into Style
During the time you've spent learning HTML so far, you may have heard mention of CSS, or Cascading StyleSheets, and wondered what they were. I'm going to explain the whole thing now, and hope that you're ready for it. I do have an entire stylesheets section, and a dedicated introduction to CSS here, but think of this as an induction to the introduction.
There are many tags in HTML that exist purely to create a certain look on your pages. There are also techniques, like using transparent images to space your page out. This was all well and good a few years ago (and is why you'll see practices like these mentioned in older HTML tutorials...), but they are not at all suitable for the web that exists today. These techniques create accessibility problems, add to the bulk of your HTML files, and are generally awkward to work with. Nowadays, we have a better method of styling our pages.
Style Sheets are the best way to define how your page
looks. Everyone should use them. You create a simple text file,
styles.css for example, with a number of rules
defining the colours and spacing of certain HTML elements. Let's say, in your
stylesheet, you command all of your headings (<h1>) to be
red. You then put a line of code into your HTML that shows your web browser
where its CSS file is. When it loads up the page, it looks for the CSS file,
reads it and sees that all h1 elements should be red and then
displays red headings, without any extra code.
In this way you can apply all of the presentational stuff through simple CSS, and keep your HTML relatively clean and simple. So, open a new document and add this to it:
body {margin: 0px; }
h1 {color: red; }
That's all that needs to be in the file. Save it as styles.css (or whatever). Now add this line into the
head of all your pages:
<link rel="stylesheet" type="text/css"
href="styles.css">
This tells your browser where to look for the CSS file.
These two lines of code will make all the headings on your site red, and will
set the page margins to zero pixels without all of that laborious
topmargin/marginheight/etc. attribute tomfoolery.
It's actually probably best if you take out those attributes.
Already you should be seeing some of the benefits of using CSS — that one
line will take care of the margins on every one of your pages that use this
stylesheet. Once you have a CSS file, you can continue adding new rules to it
to pretty up your pages. There is some amazing power in stylesheets, and you
have loads of options for designing the look of your site. Head on over to the
CSS
section for more.
A word on colour schemes
Avoid a shocking colour scheme at all costs. It is no
coincidence that the best sites have subdued, light colours,
and the worst sites have brash, painful ones. Luminous yellows, reds, pinks and
greens are just a big no-no. The more easy it is to read, the more professional
it will look. Keep the contrast high between
bgcolors and text colours, so no text disappears
because it is too close in shade.
If you think people might want to print parts of your site
out, don't use a black background and white text. No one will print it if it
takes up all their ink. It is also not as easy to read as the
normal black on white.
The colour-scheme you use and the subject of your site will often have a lot in common. They will also create a different mood. Visit sites like your own and see which colours they use, and criticise whether they work or not. A site about say, the game Quake, can get away with dark, foreboding colours because they fit in well with the atmosphere of the subject. However, if you were designing a tourism site the same colours couldn't be used because you want to generate a happy, welcoming mood. Think about your audience.
Pick your background well
If you do use a background (remember, you don't have to), pick
out the main colour in the image. Then set that colour as your
bgcolor. The reason for this is that some people don't have images
turned on, and won't see your image. Therefore, the colour has to be close to
the images colour so the text remains readable.
Try and avoid using those God-awful free background tiles you can find on
the net, or those painfully dull ones that come with Microsoft Office programs.
Your site will look horribly cheap. Clever use of a simple background tile can
work wonders on the visual impact of your site. Look at our own simplistic
bubbles to see what I mean.
Check the Source
Looking through the source code of other sites is an
excellent way to pick up HTML methods and tricks. In your browser click
View | Source on any page and the code which created it
will be opened (make it open in Notepad for the best way to read it) for your
viewing pleasure. Find the corresponding section in the code for what you liked
and see how it was created. You can then cut and paste code
snippets out of the page's code and into your own. You can teach yourself a lot
this way, although it's never as easy as just sitting down with a Coke and
having a good read of HTMLSource...
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 HTMLSource's design
and it's hugely irritating. Just no.
Once you've gotten your code together, the next essential step is to validate it to make sure it'll work in all browsers without problems. You may be surprised. There's a good (if harsh) » online HTML validator over at the W3C's site.
Hand Code
Unless you break out of the WYSIWYG-user's mentality, you will always be restricted in
what you can create. Too many beginners go straight to FrontPage or
DreamWeaver and never really learn how to code and design.
When things go wrong they don't have the skills needed to fix the mistakes
their editors have left them with, and give up.
Hand coding in a text-editor (like
HomeSite or even trusty NotePad) means you know your code much better and so can
find problems and edit smaller things. You have much better control
over your design. You're closer to your code and are able to
incorporate things like CSS more easily. Visual editors also output very bloated
code with lots of unnecessary font
tags and paragraphs etc. Your pages will download faster if you
code efficiently in a text-editor.
It's never something anyone who has used a WYSIWYG editor wants to do, as
at first it looks like a much slower, laborious way to design pages. You're
going to have to get past this barrier — you'll eventually come to love the
advantages hand-coding gives you.
Learn CSS
CSS, or Cascading Style Sheets, are the most important development
in the webmaster's world in the last few years. They allow you to change the
look of your entire site by editing one file, and allow you to format and
design your pages to look much, much better.
If you can use HTML well, CSS shouldn't be much of a step-up. Not only are
stylesheets a great extra skill for you to have, but they're going to be
essential for creating pages in the next few years. Get a handle on them as
soon as possible; have a look at the introduction to stylesheets.
Presentation
You need to structure your page into blocks, by using either tables, layers or frames. Have some clearly defined navigation, content and supplementary boxes — people will know where to look for specific parts of your page. Don't stack page elements on top of each other all the way down the page — this makes a lot of scrolling necessary, something that the Internet audience do not enjoy. To lessen this, make use of horizontal screen space as best you can by aligning navigation links and inset pictures to the side so that the content flows alongside it.
Limit your font choices to two or three for your entire
site. Reference is always made by typographers to the horrific mistakes made
early on when word-processors came into mainstream use a few years ago.
Magazines and other publications were printed with dozens of fonts used on
every page, just because the designers could. This led to the pages
looking like a big mess. You should use very few fonts to avoid the same
fate.
Stick with a sans-serif font for your main content, as text in this family
of fonts is easier to read from a computer screen than serif fonts. Keep your
main body text between sizes 2 and 3 (10 and 12 point). Also remember that you
should use the common fonts that everyone will have on their computer (found in
the font face tutorial), so they see the same page you do.
Colours
I've already gone over the importance of using light
colours in the <body> tutorial, but I'd like to re-iterate it here.
Bright, primary colours are highly uncomfortable to look at, and on the
Internet where you're looking at a lit monitor the whole time, this is very
important to avoid. Pastel shades do not strain your eyes, and generally look
more stylish anyway.
Have a look at sites like » Yahoo and » Amazon, two of the most popular sites on the Internet,
and see what they do. Large blocks of colour are drawn with soft shades.
There's plenty of white-space left as places for visual
relief. These sites have been designed following extensive surveys of web
users, so they know what they're doing.
When choosing your colour-scheme, pick one or two main colours. These will be used to fill in the main blocks of your page. Along with these, choose three or four more colours that go well with your core colours — experiment a lot with these. Apart from any once-off elements or graphics, these should be the only colours you use in your layout. They should all be from the web-safe palette.
Make sure there is a good contrast between your background and text colours. Keep your main text black in most places. The areas of most interest on your page should be highlighted with a small instance of bright colour, but make sure it never takes over.
Exercise Restraint
You may get a little excited about the glitzy special effects achievable
with things like Java Applets, JavaScript and Flash, but something you're going to have
to realise is that readers are rarely impressed with a dazzling but
difficult-to-use system.
Simplicity works best. A basic text-based navigation system is preferable to one constructed with
image rollovers. Going straight to a content-rich homepage
is preferable to a pointless and showy Flash intro or splash page. Background sounds and the like get annoying after one
instance. Scrolling text and multiple gif animations are the
hallmark of an amateur designer, and they're terrible. If there's one thing
that many usability studies show, it's that readers find many special effects
to be quite obnoxious and annoying. The simpler sites always prosper.
Basic Promotion
When your site is ready for the Internet, you can start submitting your pages to the search engines. This causes great confusion and anguish for most beginners — the poor guys can't figure out why the search engines won't add their site. Read this: it usually takes at least 4 weeks for your site to appear, if only that. You might get lucky, you might get very unlucky, but that's all it really comes down to. If you still haven't appeared in their index after 2 months, you should 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 (and best for seeing results with quickly) engines are
» Google and
» AltaVista. Both
of these engines index 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 HTMLSource! There, that's my promotion done...
Fundamental Optimisation
I'm sure you're all aware of the need for optimisation — the Internet is often very slow. A website that does not load quickly is a website that rarely gets read. People are getting more impatient, and now that there is so much choice, if your site doesn't give a reader what they're looking for quickly, you'll never be heard. You can find out all about this in the optimisation section, but for now, here are some of the most basic ideas that you should adhere to when coding webpages:
- Use only a few small images on each page. If you're going to have large images, only have one or two per page, or use thumbnails. Always use the height, width and alt attributes.
- Don't use animated GIFs when a static one would have done the same job. Animations are often distracting page elements.
- Optimise your graphics as much as you can. It's a less advanced process than you probably think.
- Leave out most multimedia effects.
- Split long pages into a few smaller ones.
The Golden Rule
And the one notion that will sum up the attitude you're going to need to
become a good web-designer?
Be willing to learn and improve.
You'll never produce a perfect site
design, much like you can never produce a perfect painting — your work can
always improve. Accept criticism of your work (however hard it may be), and
work to sort out the problems you and others see. Update your site as much as
you can, and redesign it every few months. Care about the quality of
your work. Continue to learn new techniques and keep on top of new developments in the world of web-design; look at
well-designed sites and pick out elements that you like from them; answer your
email; listen to good music; sketch down ideas; and above all have fun at
it.
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 anolorul.
<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
trortd. <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
bodyis 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
typeattribute. <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) toh6(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.
Some Terminology
To allow your webpages to be seen by anyone else connected to the Internet, you first need to place them on a server. This is a computer like any other, which is constantly connected to the Internet. When a visitor (technically called a client) requests a file that is on the server, the server serves this file to the visitor, and allows them to download it.
So, you need to transfer your files from your computer to your webspace on this server. First you must actually sign up for some space. Your ISP 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 20 and 50 megabytes (MB) of space, which is much more than you probably need at this stage. Once you have signed up you will be given a web address where others can find your site. At the moment they won't see much there, so you need to get your files to that location.
Some webspace providers have a system online which lets you upload files through your web browser. This is helpful, but for proper control of your site you will want FTP access. FTP means File Transfer Protocol — the way you transfer files from one computer to another. To perform FTP you will need an FTP client program. For the examples on this page I am using » Cute FTP, which you can download as shareware and use for 30 days. There are loads of free programs too, » FileZilla being particularly good; have a » hunt around and find one that you like. Windows users should have a look on their systems for the Web Publishing Wizard, which'll guide you through the process. All these programs function roughly the same.
Making the Connection
Once you have an address, your username and a password, you can use your FTP program to connect to your server. All of the necessary information should have been given to you by now. If not, it will be found easily on your webspace provider's site.
So open your FTP program and fill in your info, which will look something like this:
Press Connect and you will be presented with a screen like the one below. The view on the left is your computer, and on the right you can see the directory structure of your server. Now simply select the files you want to upload and drag them across or press upload, and they will begin to be transferred (it might take a little while if you're uploading large files, as the uploading process is slightly slower than downloading).
ASCII vs. Binary
Files must be uploaded in the correct mode or they might become corrupted on the server. Files are classified as either ASCII text or binary code. Most modern FTP clients will be able to detect which mode to send files in automatically, so this won’t be a problem for most of you; but if you are asked, make sure you send pages with HTML, CSS or JavaScript code in them as ASCII, and images, music, movies and programs as binary.
Indexes
Remember, the main page in each directory, including your homepage, will
need to be named index.html. This means that a
page with the url
http://www.site.com/directory/index.html
can be referenced by an address ending with the directory name and a slash,
as most servers open this index.html page whenever no other page
is specifically asked for. On some sites the special filename will be
default.html, though you should be told somewhere if they will be
departing from the established rules. The address below will be invisibly
redirected to the file above:
http://www.site.com/directory/
That's it — once the transfer is complete your pages should be accessible
online by typing in the URL into your browser's address bar. Give your site a
once-over to make sure everything works right, and then send your friends the
address.
The fun starts here.