This tutorial is designed to be as beginner-friendly as possible. No matter what your skill level with computers, you can learn to create a web page. It's easier than many people suspect, and it can be fun!

• What you need
• Getting Started
• Adding text
• Formatting text
• Links
• Tables
• Colour
• Images
• Sound
• Cascading Style Sheets
• Promoting your website
• Additional resources

Formatting Text

Tags in HTML can have many "attributes", or customizable features. Take, for instance, the paragraph tag. You can specify how you want the tag aligned: LEFT, RIGHT, or CENTER.

In a similar vein, if you want to quote a largish passage from some author you can use the BLOCKQUOTE tag. This will justify the text (center it, and make all the text line up evenly on both sides so you have a solid block of text instead of getting a jagged right edge).

blahblahblahyakyakyaketcetcetcyaddayaddayaddachatterchatterchatter. blahblahblahyakyakyaketcetcetcyaddayaddayaddachatterchatterchatter. blahblahblahyakyakyaketcetcetcyaddayaddayaddachatterchatterchatter. blahblahblahyakyakyaketcetcetcyaddayaddayaddachatterchatterchatter. blahblahblahyakyakyaketcetcetcyaddayaddayaddachatterchatterchatter. blahblahblahyakyakyaketcetcetcyaddayaddayaddachatterchatterchatter. blahblahblahyakyakyaketcetcetcyaddayaddayaddachatterchatterchatter.

Lists

While you could do lists with just paragraphs and line breaks, HTML has tags that will allow you to get a much nicer-looking list with very little effort.

Unordered lists are ones that just use bullets for each item in the list.

Gives:

• first item
• second item
• third item
• etc

Ordered lists use either upper- or lowercase letters, Roman or Arabic numerals to count off the different items. When you specify the type, simply put either "1","i","I","a", or "A" to show which kind of counting you want to use. I'll choose a numbered one with Arabic numerals:

Gives:

1. first item
2. second item
3. third item
4. etc

Links

While this tutorial does not assume any prior knowledge of HTML, it does assume that you've done at least a little websurfing. In that time, you've probably come across hundreds of links (sometimes called "hyperlinks"). They can be either text or an image that you click on to take you to another page. The tag for links looks kind of strange:

"A" stands for "anchor". You'll see later on that there are other types of tags that require an anchor. The anchors act as bookends to show how much of the text you want to be affected by the tag. In this case, it’s the words “Hitchhiker’s Guide to the Galaxy”. When you put in a link in your HTML, the browser will automatically underline it and change the color (unless the setting is changed in the preferences). Later on you'll see how to specify what color the link is changed to.

Opening a link in a new window

Making a link in a new window can be convenient- it allows people to view another site without losing yours. Note: you do actually type in the word BLANK, it is not just an example.

Gives:

Here is the H2G2 site in a new window.

Targets

So far these links have taken you to other pages, either another page within your site or someone else's page. For a really long page, you can create a special kind of link called a "target" that will jump to another part of the same page. Targets come in two parts. The first part names the target, the place that the link will jump to. The target name should be short but descriptive ("top", "end", "section1", etc). The target tag goes around a word or a clump of text. For example, a target named "top" could go around the first header or even just the first word of the first paragraph. Since the anchor is just "naming" the text, marking the spot for later use, you will not see any difference in the text- the browser will not highlight it.

To link to your target, you do something a little different: instead of saying "http://", you just type # and the name of the target:

An example of this is: Click here to go back to the top of this section

If you ever get an extensive list together, say of your favorite links, it could be handy to put in alphabetical targets. Also, if your text has several subheadings, you could create a target for each heading, then a menu at the top that would allow visitors to skip directly to a subheading instead of scrolling through everything that comes before it.

Email addresses and Usenet groups

Ever seen an email address that looked like a link? And when you click on it, it tries¹ to open up a blank email message already addresses to this person? With just a slight modification of what you've just seen, you can make a link do this, too:

You can also make a link to a Usenet group open up your default newsreader in a very similar fashion:

Tables

Be warned now that tables are one of a webmaster's biggest bugaboos. You can drive yourself crazy trying to get it to look exactly as you want since there are so many possible attributes (customizable features), and results will vary from one browser to the next. Thus warned, let us plunge into the fray..

Here are the simplest tags to form a table. TR stands for "table row", and TD for "table data", or one cell.

Gives:

All of the following attributes fall within the TABLE tag:

• BORDER
  
  

  ...draws a border x pixels wide around the table

• BORDERCOLOR
  
  

  ...sets the border's color.

• CELLSPACING
  
  

  sets the number of pixels (amount of space) around and between cells

• CELLPADDING
  
  

  gives you x number of pixels of space in the cell inside the cell around your text or data

• HSPACE and VSPACE
  
  

  set the amount of space around the table in pixels

• ALIGN
  
  

  can align the table either LEFT, RIGHT, or CENTER on the page

• SUMMARY
  
  

  blah blah

While not all of the attributes can be demonstrated within the Guide, here are what borders and alignments can do.

As for the other attributes, the only other that will be presented here is found in the TD tag. NOWRAP is handy since if your table contains a long line of text, it will stay all on one line. (Otherwise, the browser would automatically make it fit the other cells, and there are times when you may not want it to.)

Unfortunately, the Guide does not support this feature at this time. You'll just have to experiment with this one. The only disadvantage of NOWRAP is that it will stretch all the other cells in that column to fit the longest cell, but sometimes that's preferable to having it wrap the words, and sometimes you'll prefer the look of the table if the cells are wrapped.

There are many other attributes available that start to go beyond beginning web design. If you'd like to learn more of them, you can consult the Web Design Group online HTML tag reference, or a printed HTML guide.

Colour

Colour can be described to a browser in two ways. You can simply use the name of the colour: "red", "blue", "black", "white", etc. This is quick and easy to remember, but not very accurate. Each browser, even each individual monitor, will be set to display a slightly different shade of the colour². To get more precision in the representation of colours, a system was set up called the hex number code.

It gets its name because there are 6 "numbers" for each colour. The "numbers" go from 0-9 and from A-F³. The first two numbers are how much red goes into the colour, the second 2 numbers are how much green go into the colour, and the last 2 numbers are how much blue goes into the colour⁴. So, a colour code of #000000 is black (no values for any of the primary colours), #FFFFFF is white (the maximum of all three mixed together), #0000FF is dark blue, etc. It would be unreasonable to expect anyone except professional designers to be able to mix n' match the colours accurately from memory. For a chart listing the most widely accepted colour palette try searching for a "RGB Color Value Chart".

You have seen how other tags, such as the table or paragraph ones, can be made more specific with attributes. Now, it's the body tag's turn. The default colour scheme for your page is set in the body tag.

• BACKGROUND
  
  

  The background can be either an image or just a solid color. "BACKGROUND" is how you tell the browser to use an image. Put the path of the filename if it is not in the same folder or directory as your page. (For example, many webmasters will create a separate directory for all the images on their site, so the tag would say BACKGROUND="/images/filename.jpg".) Even if you choose to have an image as your background, you should pick a colour, too as a backup in case there's a problem with the image and it doesn't load.

• BGCOLOR
  
  

  If you put this alone into the tag, the background will be a solid colour. If you put this combined with BACKGROUND, the background image will be the default, but if for some reason it doesn't load or your viewer has their browser set to surf without images, then this colour will come up instead.

• TEXT
  
  

  The default colour for all text on the page.

• LINK
  
  

  This determines what colour the links are before the viewer clicks on them. Most browsers are set to blue as the default.

• ALINK
  
  

  means "active link", the colour a link turns when the viewer actually click on it. (Frankly, since the viewer only sees this colour for a second when s/he is clicking on it, I don't think it's very important. You can skip it if you like.)

• VLINK
  
  

  means "visited link". It's helpful to make links your viewer has already visited a different colour, especially if you have many links on your page. It will help them keep track of where they've already been.

Sample HTML:

This will set the default colours for the page. If somewhere you would like to change the font colour for just a piece of the text, you can now do that:

Images

Along with color, images are an integral part of webpages. You can download them from databases, scan them in, take pictures with a digital camera and load them directly into your computer through it, or create art directly on the computer. Images come in many different formats. GIF is one of the most common, used for cartoons or other pictures with few colors and sharp lines. JPEG is often used for scans of photographs. There are many others (TIFF, PNG, etc) that each have their advantages and drawbacks. When you put in the filename of your image in the tag, be sure to include the extension- the dot and the three letters that come after it, and to pay attention to capital letters. This tells the browser what type of image it's about to display. If you don't include the extension and don't type it exactly the same in the HTML as it appears in the file name, the browser won't be able to find the image in your files.

The width and height of the image are in pixels. You can find out the size of an image by opening it in AN Image editor like Irfan View, Gimp, Photoeditor or Photoshop. Many download databases will also give you the dimensions with the description of it. ALT stands for "alternate text". If the image doesn't load correctly for some reason, or if your viewer prefers to surf with images off to save time, the text will show up instead. It's not absolutely necessary but it's a good backup to have.

If you want text to flow around an image, there are a few more attributes you can add.

HSPACE and VSPACE are how much space to leave around the image, horizontally and vertically. ALIGN can be TOP, CENTER, or BOTTOM. This is how the text lines up with the image. Due to the limits of GuideML, I cannot demonstrate these attributes but I can demonstrate alignment:

<IMG WIDTH="144" HEIGHT="99" BORDER="0" ALIGN="LEFT" SRC="DONTPANIC.GIF" ALT="Don't Panic! /">

<IMG WIDTH="144" HEIGHT="99" BORDER="0" ALIGN="CENTER" SRC="DONTPANIC.GIF" ALT="Don't Panic!" />

<IMG WIDTH="144" HEIGHT="99" BORDER="0" ALIGN="RIGHT" SRC="DONTPANIC.GIF" ALT="Don't Panic!" />

Sound

It is possible to add sound to a web page. Many web development sources discourage it because when it works it’s often irritating to your visitors, and when it doesn’t work it’s even more irritating because it can cause error messages or problems when loading the page. There are ways to cut down on the irritation, as you will see below.

The three ways of adding sound to a page are the BGSOUND tag, the EMBED tag, and as a link.

BGSOUND

This one only works in Microsoft Internet Explorer 2.0 and above. The tag is located within the HEAD tag, along with TITLE and any META tags you choose to put in.

• SRC :
  
  

  "Source", the filename of the sound file and the path to it if it’s not in the same directory or folder as your HTML file. This tag supports .wav, .au, and .mid files.

• LOOP :
  
  

  ...is the number of times you want the piece to be played. Setting it to -1 or INFINITE will make it play without stopping.

• VOLUME :
  
  
  

  -10000 is mute and 0 is full volume.

• BALANCE :
  
  

  This determines which speaker the sound comes out of more. It can be set to -10000 (all left), 0 (equal amounts out of each side), or 10000 (all right).

EMBED

This tag works with Netscape Navigator 2.0 and above, and IE 3.0 and above.

• SRC :
  
  

  This is where you tell it the filename and path to the file if the sound file is not in the same place as the HTML file.

• HIDDEN :
  
  

  ... can be either "true" or "false". It determines whether or not you want to display a control panel that allows the visitor to play, stop, and control the volume of the music. If you’re going to use sound on your page, this attribute is highly recommended. If hidden=”false”, you’ll need to also specify the width and height of the control panel. Width of 144 and height of 74 is standard but you can set it however you wish.

• AUTOSTART :
  
  

  ... means whether or not the sound starts automatically when the page loads.

• LOOP :
  
  

  "True" mean it will play continously, "false" will make it play once then stop, or you can enter the number of times you want the sound to play before stopping (3, 4, 5, etc).

• CONTROLS=CONSOLE
  
  

  To be honest, I'm not fully sure why that has to be in there. Perhaps there are other kinds of controls besides the console setup with the little "play", "pause", and "stop" buttons.

Links

The less known way of including sound is to turn it into a link. A small download window will appear and your visitor can choose to listen to it from the site or download it to their computer and save it. This way is arguably the least intrusive method of the three for incorporating sound into your site, since visitors can decide for themselves whether or not to listen to it even once

Promoting your website

Once you've finished your site, you want people to look at it. There are many ways of spreading the word about your site. Family and friends, of course, are an easy source to tap- just send along an email to them and include the address of the site in it.

Hit counters and guestbooks

A hit counter keeps track of the number of people who view your page. Some also keep more detailed information such as what browser your viewers are using and who referred them to your page. A guestbook allows people to leave feedback about your site and messages, sometimes also a link to their own site. You may need to monitor the postings for offensive content. Visiting the sites left by your guests will not only introduce you to many other styles of webpage, but it's good advertising to sign their guestbook in return. Do a search in any major search engine for "free guestbooks" or "free hit counters" and you'll find plenty of entries.

Usenet

Usenet is like a big electronic bulletin board, similar to the conversation forums on h2g2 where the participants post messages and replies. Usenet groups are sorted into categories. Once you find a Usenet group that covers a relevent category, you can just post a message introducing yourself and your site. Be sure to mention why you think the site is relevant to the group, since nothing annoys Usenet users more than cross-posting (plastering the same email message in many newsgroups, including ones that have nothing to do with your subject). Most browsers these days come with a newsreader. In Netscape, go the Communicator menu, then select Newsgroups. MS Outlook has a newsreader option built into it. There are also online newsreader services such as Google Groups. Some require you to register for a free account to use the service, others don’t.

Search engines

The problem with getting listed on search engines is that every one has a different method of categorizing and ranking the sites. Some simply take the first page of text and search that for keywords. Others ask you to put in your own keywords and description when you submit the site. Others have you find the best possible category to list the site under, then submit it under that. An entire industry has sprung up around "Search Engine Optimization" as businesses compete for better ratings. However, the easiest way to make your site as pleasing to search engines as possible is to include META tags in the HTML for your site

META in Greek means "outside". META tags do not show up in your page, they contain information about your page and are important only to search engines. The META tags are nested in the HEAD tag. There are many possible META tags but I'll give you the most important ones. KEYWORDS and DESCRIPTION are essential for an accurate listing in search engines. AUTHOR and OWNER are more important in copyright situations. EMAIL is optional, in case you want people to be able to contact you (for permissions or whatever).

If you go to "View" then "Page Source" in Netscape, or "View" then "Source" in Explorer, you can see the HTML for any page. This can help you by showing some of the more advanced META tags, should you ever choose to use them.

Some of the most popular search engines include Google, Yahoo, Altavista, dmoz, and Excite. There are literally hundreds of search engines out there, and some of them are specific to a topic or country so you might considering hunting those down too. Submitting a new page for addition to their listings varies slightly from one search engine to the next. If the search engine has categories (like Altavista), sort through the categories to find the one that's most appropriate for your site. Within each category should be a "Submit URL"⁵ or "Add URL" link. For all others, the "Add URL" or "Submit URL" link can be found with a little hunting.

Design Tips

This section will discuss some common design faux pas made by beginners. Please take all of the following with a grain of salt, or with a whole shaker if you like. While business web sites need to worry about their site design since bad design could cost them customers, a personal site is a creative playground and can cheerfully break or ignore these rules – it’s only ultimate purpose is to be fun for both the author and the visitor.

That said, here are some recommendations to avoid a page that blares “newbie” from the outset:

Reduce the loading time for your page

If your page takes too long to load, people will become bored and go elsewhere. Here are some ways to make your page load faster…

• Don't put too many large images on one page. If you really want to, use thumbnails (tiny samples, clicking on the thumbnail takes you to a separate page with the full image)
• Avoid too many moving images on one page. It's distracting as well as slowing down the load time.
• Avoid long pages that require a lot of scrolling. Break up the page with targets or into several smaller pages.

Do not give your viewers eyestrain

• Choose a colour scheme that is easy to read: black on white, red on white, and blue on white are best for large amounts of text. Textured backgrounds (ones that have a repeating pattern) are also very difficult to read text on.
• Choose your font and font size carefully

Consider browser compatibility

Will your page look right or best only when viewed by a particular browser? Test out your page in at least Explorer and Netscape to make sure it looks how you want it to in both.

Use gizmos sparingly

Not everyone can view QuickTime videos or have the plugins⁶ you want to use. If you are using a plugin, or require your viewer to have software such as a Flash player, tell them this and provide a link for them to download the required plugin.

Be aware of copyright issues

Don't steal peoples' stuff. If in doubt, ask permission.

Organization of your site

Make sure that it's easy for your viewers to find their way around your site by including navigation links ("home", "section1", "section2", etc) on each page. For your own sanity's sake, be sure to keep the site organized for you, too- make the filenames short, logical, and easy to remember.

Check your spelling and grammar

You'd be amazed how many people don't do this. Throw the text into a word document, and let the spell checker do the rest. A couple extra minutes can save a lot of embarrassment.

Miscellaneous nuisances:

• Large chunks of blinking or italicised text
• Underlined text mistaken for a link : don’t use underlines for emphasis; use bold or italic or a colour change instead
• Looped sound files that can't be shut off easily
• Long pages or large images that need scrolling (especially left/right scrolling) to view the entire thing
• Lack of interesting content (highly subjective, true...)

Additional Resources

Stuff