Logo

Home | Audio | DIY | Guitar | iPods | Music | Brain/Problem Solving | Links| Site Map

This work is licensed under a Creative Commons License.

Web Design Tutorial I
HTML Helper

This lesson is your first lesson for Web Design, and it consists of three components. 1) this curren page will describe the basics of HTML, 2) you will use HTML Helper to help you understand the language in greater detail, and 3) the assignment is for you to create Your First Web Page. There is one little component that you need to be aware of: you must create your page in HTML and hardcode it. You can use a text editor or NVU. NVU is under applicaions on the eMac HD. You may also use the Web Development Tools in Firefox.

Excuse the mess while this page is being built, but you have enough to get going. Start by reading this entire page, then open your editor, and start creating your page (you may view the source of the page you need to construct and use is as you wish.)

Tutorial 1 - Introduction to HTML
The huge increase of the WWW has been in part due to the accessability of the main programming language HTML, which is extremely easy to use. There are several rules to its structure:

Tags are embedded. They must be put where you want an effect or action to occur. For instance:

<H3> <SAMP>Strawberries</SAMP><I> and </I>Cream </H3>

would look like this:

Strawberries and Cream

Syntax within the document you create is also very important. Syntax means ORDER. The main structure within a HTML document is:

<HEAD>~</HEAD>
<BODY>~</BODY>

The tilde (~) represents the coding in between the tags.

Click here for a tutorial on the <HEAD> of a document or Click here for a tutorial on the <BODY>.

All documents must have the <HTML> and </HTML> tags at the top and bottom of the document so that the browser is aware that the document it is loading is in HTML. All other tags go between them, meaning that the structure and syntax of a HTML document looks like this:

<HTML>

<HEAD> (tags associated with the HEAD here) </HEAD>
<BODY> (tags associated with the BODY here) </BODY>

</HTML>

Tutorial 2 - The <HEAD> of a document
The HEAD element contains information about a document, such as its title, keywords that may be useful to search engines, and other data that is not content that you want visitors to see. They are therefore not displayed.


Tutorial 3 - The <BODY> element
The BODY of a document contains the content. The content is WHAT you want the browser to show to site visitors. It comes after the closing </HEAD> tag.

The <BACKGROUND> and <BGCOLOR> tags are dealt with in the next tutorial. Use the link at the bottom of the page to read about these two tags.

 

Tutorial 4 - The <BACKGROUND> and <BGCOLOR> attributes
The BODY of a document contains the content of a web page. That content can be enhanced by colouring or placing an image behind it. These are the attributes that can do that.

  1. <BODY BGCOLOR="red">

    <BODY BGCOLOR="#FF0000">

  2. <BODY BGCOLOR=rgb(255,0,0)>

The first uses simple or literal word commands (of which there are about 140 you can use to specify basic colours).

The second uses hexadecimal code to specify a colour. For instance, "#FF0000" is the same as "red". The advantage to using hexadecimal code is that there are 16,777,216 colours you can use in a browser (see why it would be difficult to describe them by name?).

The third uses RGB values (red, green and blue colour combinations), which accomplishes the same results as a hexadecimal code.

<BODY BACKGROUND="images/back.gif" LINK="#000000" ALINK="#FF0000" VLINK="#FFFFFF">

This code would make a link appear BLACK (hexadecimal code '#000000' - hexadecimal code is covered in the next tutorial). When it was clicked on it would appear red (the ALINK tag means 'Active LINK') and after visiting, the link would appear white (the VLINK tag means 'Visited LINK'). If you've visited a few pages on this site already, you'll have noticed that links have turned white to show you where you've been.


Tutorial 5 - Hyperlinks / Anchors
Hyperlinks are used to navigate around a page, site or from one site to another. They are known as 'anchors' and use a specific tag: <A attribute>~</A>.

Hyperlink

Hyper means ‘more than or outside of’. Therefore a hyperlink takes you outside of the web page shown in the browser at the time. When a hyperlink is set up, clicking on it will take you to another page or another area of the same page. There are three types:
• Relative Link - link to another page from a web page on the same site.
• Absolute Link - to link to another site.
• Intra-page Link - to link to a part of the same page

Absolute linking allows you to link to other websites. See the example above (linking to tgp) to see how to do this. Remember that the web address within the HREF="" attribute must be checked for accuracy and must be full: it must start with 'http://' before the 'www' part. If the tag looked like this, the hyperlink would not work:

<A HREF="www.thegeographyportal.net">Click here to go to 'tgp'!</A>

Intra-page linking is an excellent way of helping your visitors to navigate around ONE page. This employs the use of the second attribute: NAME="". Why not try an example page first and then come back and see how it's done: Click here for an example page!

Seen it? Well here's how it's done. At the TOP of the page, the tag would look like this:

<A NAME="top"><A HREF="#bottom">Click here to go to the bottom of the page!</A>

The <A NAME="top"> tag sets the name of the top of the page as 'top'. You could have called it anything, as long as the tag links to that name. Then the HREF="" attribute sets up the hyperlink to the bottom of the page. Notice that before each name in the HREF="" attribute a hash symbol (#) is used to show it is an intra-page link and not a mistake. For the hyperlink to work, you should set up the BOTTOM of the page like this:

<A NAME="bottom"><A HREF="#top">Click here to go to the top of the page!</A>

Intra-page navigation can therefore be used to guide people to specific areas of the page on your site (for instance, you could list the articles on a page as a set of hyperlinks at the top and visitors could choose the one they wanted to read, click the link and then the page would move up to that article. It negates the need for scrolling on longer pages!).


Tutorial 6 - The <TABLE> tag
Not only can tables be used to present information in a chart (such as numerical data), they can be used invisibly to control the structure of your web pages. See below.

<TABLE ALIGN="center" WIDTH=200 BORDER=3 CELLPADDING=1 CELLSPACING=1>

Let's look at each in more detail.

ALIGN="center" is the attribute which positions the table in the centre of the page. NOTE THE AMERICAN SPELLING OF CENTRE! Other alignments are "right" and "left"

WIDTH=200 makes the table 200 pixels wide. You could also express the width as a percentage like this - WIDTH=50% (where the percentage refers to the percentage of the width of the page. In this example 50% would be half as wide as the page).

BORDER=3 makes the border 3 pixels wide. The way to make table invisible is to set the BORDER at 0 pixels (BORDER=0). The use of invisible table will be discussed later on.

CELLPADDING=1 sets the amount of space between the edges of each cell and its contents. In this example it is 1 pixel away.

CELLSPACING=1 sets the amount of space between the cells in a table. In this case, 1 pixel again.

Then you need to plot each ROW of the table in turn. Tables are plotted in rows in HTML, not in columns. The first row in the the example above looks like this:

<TR><TD WIDTH=50%>A</TD><TD WIDTH=50%>B</TD></TR>

Each row begins with the <TR> tag and ends with the </TR> tag. (TR stands for 'Table Row'). To make each cell within the row, the <TD><TD> tags are used. You can see from the code above that there are two cells in the row called A and B. Look at the table above it and you'll see how this was created. If you repeat the steps for the remaining two rows and alter the letters, you will see a final code that looks like this (don't forget the closing <TABLE> tag - browsers do not understand if the table isn't finished):

<TABLE ALIGN="center" WIDTH=200 BORDER=3 CELLPADDING=1 CELLSPACING=1>
<TR><TD WIDTH=50%>A</TD><TD WIDTH=50%>B</TD></TR>
<TR><TD WIDTH=50%>C</TD><TD WIDTH=50%>D</TD></TR>
<TR><TD WIDTH=50%>E</TD><TD WIDTH=50%>F</TD></TR>
</TABLE>

There are several attributes you can see from the code and others that you can use to create different effects on your tables. Attributes for the <TR> tag are as follows:

ALIGN - this aligns the CONTENTS of the rows' cells (horizontally). Either "center", "right" or "left".

VALIGN - aligns the CONTENTS of the rows' cells vertically. Either "top", "middle" or "bottom".

BGCOLOR / BACKGROUND - use one of these two to colour a cell, row or whole table! Use BACKGROUND to place an image in the background of a row or cell. It will be tiled just like on the background of a page. Look at this example where the second row has been coloured "lightblue" using a BGCOLOR literal colour code:

  1. A B
    C D
    E F



    The code for this is exactly the same as for the previous table, but change the code for the <TR> tag of the second row of the table like this:

<TR BGCOLOR="lightblue"><TD WIDTH=50%>C</TD><TD WIDTH=50%>D</TD></TR>

Attributes for the <TD> tag are as follows:

ALIGN, VALIGN, BGCOLOR and BACKGROUND (as for TR tag).

ROWSPAN - the number of rows this cell will span.

COLSPAN - the number of columns this cell will span.

Let's look at the use of COLSPAN to give an example of how to alter a table. Taking our example, lets get rid of cell 'F' and make cell 'E' stretch across both 'C' and 'D'. If you just removed the coding for the 'F' cell, the table would look like this:


. . . which is wrong! You must tell the browser that cell 'E' covers two columns, by placing this attribute into the code for cell 'E' - COLSPAN=2:

<TR><TD WIDTH=50% COLSPAN=2>C</TD><TD WIDTH=50%>D</TD></TR>


Whilst the difference may not look too obvious at first, look again at the table cell alignment in the inaccurately coded example. It would make life very difficult to put anything in cell 'E' that you wanted to cover the width of two cells. If you wanted cell 'B' to cover two rows and remove cell 'D', then you would use the same principle and use the attribute ROWSPAN=2.

Remember there are many more tags and attributes to table construction that are not covered here, but the ones outlined will allow you to code a table that you can use on your web page.

Finally, how to use a table invisibly to align contents on a web page. All you have to do to see that in action is to look at this page and most of the pages on ths site. They are all aligned with invisible tables, including what you are looking at now! To view this, right click on the page and choose 'View Source'. Look at how all of the text, images, etc. are within table tags, but you can't see the table! The trick is, use 'BORDER=0' in the <TABLE> tag!

 

Learn more about tables here.


Tutorial 7 - Text tags and line breaks
When placing text on a web page, you have to remember to 'say what you need to say in as few words possible'. It is a well known fact that it is more difficult to read text on a monitor than from paper, and therefore visitors to your site are less inclined to read through huge amounts of text. Once you have done that, it is good to break up text and emphasise it in different ways. This tutorial shows you how to do this.

Emphasising text is a remarkably simple process. Let's start with a paragraph of text that you could put into your web page:

 

(Taken from the ICT Online privacy policy -
http://www.kesgrave.suffolk.sch.uk/Curric/ICT/index.html)

All material on ICT Online is copyright of the site creator and those people donating material (such as photographs, advice, links, reviews, etc.). Materials on this site are there to download and use for educational purposes. Under no circumstances are downloaded resources (such as photographs) to be used for anything other than educational purposes, and most certainly not for financial gain. It is accepted that anyone wishing to use this site for educational purposes is welcome to do so, but ICT Online should be contacted should people want to use the resources for anything other than educational purposes.

 

As it stands, this is an unremarkable piece of text which would be difficult to read. The idea now is to break this text up and emphasise important parts. Look at how this text can be transformed using some simple tags (all will be revealed later!):

 

All material on ICT Online is copyright of the site creator and those people donating material (such as photographs, advice, links, reviews, etc.).

Materials on this site are there to download and use for educational purposes. Under no circumstances are downloaded resources (such as photographs) to be used for anything other than educational purposes, and most certainly not for financial gain.

It is accepted that anyone wishing to use this site for educational purposes is welcome to do so, but ICT Online should be contacted should people want to use the resources for anything other than educational purposes.


<B>~</B> or <STRONG>~</STRONG>are the tags used to make text BOLD. (Note the ~ symbol denotes the words you will make bold).

<I>~</I> are the tags used to make text italic.

<SAMP>~</SAMP> or <TT>~</TT> are the tags used to make text monospaced.

<U>~</U> are the tags used to underline text. (NB - don't use this one too much as the words could be mistaken for hyperlinks).

<SMALL>~</SMALL> are the tags used to make text small.

<BIG>~</BIG> are the tags used to make text big.

<SUP>~</SUP> are the tags used to make text in superscript form.

<SUB>~</SUB> are the tags used to make text in subscript form.

<STRIKE>~</STRIKE> are the tags used to make strikethrough text.

<BR> (no closing tag) gives a line break.

<P>~</P> creates a paragraph.

<HR> (no closing tag) stands for 'Horizontal Rule' and it draws a line like this:

So it is actually remarkably easy to create differences in text, so that it stands out. There are, however some remarkably easy FONT control tags which you can see in the paragraph above allowed the use of colour and a different font. Here's the code you can use:

<FONT FACE="Arial" SIZE=2 COLOR="#0000FF">

The main tag is FONT and its attributes are FACE (which specifies the name of the font to use), SIZE (specifying the size of the font) and COLOR (giving the colour in hexadecimal code).

You can change any of these attributes. The FACE attribute is currently a little problematic: if the font you specify is not on the visitors computer, it cannot display it in that font. It will revert to Times New Roman or another system font. This means you could lose control of the formatting and 'look' of the site. In addition, it is wise to not use more than three fonts on a page in total or else it loses its style . However you can have a back-up, by listing more than one possible font in the FACE attribute, like this:

<FONT FACE="Verdana, Arial, Helvetica" SIZE=2 COLOR="#0000FF">

That way, if Verdana isn't on the visitor's machine, then it will look for Arial and the Helvetica, etc. Not foolproof, but it gives you a little more control.

The final way to control the look of text is by using header tags. These are the following tags, where you place the words you want heading where the ~ symbol is):

<H1> ~ </H1>
<H2> ~ </H2>
<H3> ~ </H3>
<H4> ~ </H4>
<H5> ~ </H5>
<H6> ~ </H6>

Let's try it with the heading 'Welcome to HTML Basics!':

Welcome to HTML Basics!(H1)

Welcome to HTML Basics!(H2

Welcome to HTML Basics!(H3)

Welcome to HTML Basics!(H4)

Welcome to HTML Basics!(H5)
Welcome to HTML Basics!(H6)

As you can see, the smaller the number, the larger the heading.

Tutorial 8 - Site Navigation
Navigation is essentially the process that someone carries out to get round your site. To a programmer, it means adding links that allow a visitor to move around the site and allowing easy access to information. This tutorial gives you a few pointers.

The first point to remember when thinking about site navigation is to tell your visitors what they will get on your site! What is it about? What is available? Where is it available?

Don't use too many hyperlinks! The object is not to confuse your visitors and too many links will do that! Make sure that you make your navigation easy to understand and that visitors can easily get back to a page they've been to before.

Work out the structure of your site before you code it. This can help you to mentally picture how you will facilitate navigation before you attempt it. Keep a style of navigation such as text links, rather than image links and text links muddled together.

There is nothing more off-putting than getting to a web site which boasts information on a topic you are looking for than to find that for some reason the link doesn't work. It makes people less likely to return. Always check that links are coded correctly (remember closing tags!) and that links to pages or other sites that no longer exist have been removed. When links are unobtainable they are known as "broken links" and they are extremely annoying!

Construct a SITE MAP, which shows how a site is organised and shows which pages link to each other. You could use a SEARCH ENGINE facility for the same purpose. A good example of a free search engine and site map service is FreeFind on http://www.freefind.com. This company will put a search engine service with a site map on your web site for free. See how it works on KHS Online on http://www.kesgrave.suffolk.sch.uk/. There are many other services too.

You could use a framed menu to help visitors navigate your site. It is permanently there during a visit and has links to all areas of the site. You could provide the "main menu" on every page instead if you don't want to have frames on your site, like the one on the left of this page.

More site navigation tips will be added as they are discovered!

Tutorial 9 - Rules for Successful Site Design
The design of a web site is extremely important and this tutorial gives some useful pointers and 'rules' to help you to design your site effectively. Design issues should be at the forefront of your mind throughout the coding process and little additions to certain code can make design a lot more uniform.

When designing sites you should aim for a uniform style. Style in terms of web page design is really to do with colour, font and images. The idea is that visitors still know they're on your site when they leave the first page. Also, a particular style can set your site out from others on the same topic.

Every aspect of your page / site should reflect the goals that led you to create it in the first place. The text and images should communicate this message and so should the way you fit these elements together.

Beware of 'clashing colours'! Your background colour and text colour should not be too close to each other or visitors will not be able to read the text.

General rule about fonts: only use up to a maximum of three on any page or a maximum of four for the whole site. Otherwise you get a hotch-potch of visual messages and no uniformity.

Try not to use images you've "collected" off the internet - they are rarely of the same style, size and technique and make a site look very amateur. There are many CD-Roms you can buy that have uniform images and you can even make your own. The images for the titles on each page of this site were drawn very simply in Paint Shop Pro 5. There are shareware versions of this (or earlier versions of this program) on many magazine cover discs.

Make sure a site is well organised and that there is a uniformity of implementation. Sounds complicated but it infact only refers to the way you show things on your web site. If you use a particular graphic to represent a link or a text hyperlink to get to a particular page, use that same style throughout. Visitors will then recognise it and use it!

Through all this talk of 'uniformity', the idea is not to make the site boring! No-one says the content can't be inviting or fascinating or interesting! Little adjustments to coding too can make each page individual in certain ways. Try to avoid setting up "symmetrical" pages - vary them a little: right-justify text, vary tables, etc.

Remember site maintenance is a must! Don't code a site, upload it and expect people to keep coming back. The beauty of the internet is its immediacy - visitors expect up-to-date information and add-ons to sites and stop coming back if they don't get them. This is especially important if you have a site with links to others. Just because you don't maintain your site, doesn't mean they aren't! A broken link on your site does not look good and disappoints visitors. Check them regularly and tell people you've checked them!

And through all coding and designing - have fun! The internet is giving you an opportunity to get 'published' in a way that has not been possible before!

 

 

 

Home | Audio | DIY | Guitar | iPods | Music | Links | Brain and Problem Solving | Site Map | Contact

Top

Creative Commons License