Micro Mart Forum / Micro Mart Diploma / Micro Mart Forums / Micro Mart Diploma 2 / Latest Posts

RE: Micro Mart Diploma 2

PhilK — Mon, 13 Feb 2006 14:40:50 GMT

Basic HTML Part 8/8: Assignment

Over the last seven weeks, we've looked at the basics of web programming. You now know enough to put together a basic site for yourself.

Well, now is the time to put all this knowledge together. No prizes for guessing what the assignment is. We want you to create a mini website - nothing flash, just a basic home site. More details in a moment.

Requirements - What You'll Need

If you have some web space - maybe some free space that came with your Internet access account - then you can easily use that.

You will need to transfer your site by FTP. This can get a bit tricky but in general, it is just like copying files from one directory (on your machine) to another (on the computer that hosts your web space). There are many freeware and shareware FTP applications (e.g. Cute FTP, Coffee Cup, WSFTP Lite). You will need details of your FTP account from your ISP - then you just enter them into the connection details of the FTP application. Once connected, you simply transfer the files up to your website. You need to transfer them under the 'web root'. This is a folder usually below the level that you log in to and often is called something along the lines of www...something...You will probably find a default.html, home.html or index.html file already in there. If in doubt ask your ISP where the web root is.

You can also use Internet Explorer to upload your files to your web space. In the address bar, type the URL for the FTP site you want to connect to. Note that www is usually replaced by 'ftp' or 'uploads' or something else appropriate - your provider will give you this information. To upload to or rename or delete files in an FTP folder you can use the same actions you use with Windows Explorer or My Computer. On some FTP sites, you are logged on anonymously, automatically, so you can view or download files. To upload, rename, or delete files, you will need to log on using a username and password given to you by your provider.

For real simplicity though, you don't even need to upload to your web space. The simplest way to test simple content and links is to place all your files and images in the same folder on your PC. In your hyperlinks and image source references, just state the file name and not a full URL. When you launch the home page, all the linked pages and images will be taken straight from your PC. Of course, no one else will be able to see your site if it's not actually published on the Internet but it's an easy way to complete the assignment and get some practice. When you've created your site, either send in the URL of your online site or zip the collection of files and e-mail or send them to me.

The Assignment

The assignment is to make a simple personal website. It should consist of:

* A home page - with a left navigation bar and some introductory text showing various text enhancements such as bold and italics

* A photo gallery page - showing a table of thumbnail photos in two or three columns showing a caption under each image. Each thumbnail image should link to a larger image in a new window via a hyperlink. Remember to make good use of optimisation on both the thumbnail and the large image - try for the best quality and the smallest file size. i.e. don't use the same image for both the thumbnail and the main image and rely on HTML to resize the thumbnail

* A 'contact me' page containing a form that the user can fill in to send a message to your e-mail address

* A 'links' page with a series of hyperlinks to your favourite websites

* The whole site should make good use of style sheets but use them in any way you like
* Each page should contain the same left-hand navigation bar

You can add extra images and additional pages if you like.

Tips

Here are a few tips and reminders to help you out with the assignment.

Tables are still the best way to layout a page. Consider using an outer table with two columns to contain the left-hand navigation bar and the main content area. Add the navigation bar then save a copy of this as your 'blank template'.

While you are doing this, think about the following...

Why would it not be a good idea to create table with two columns (left-hand navigation and main content area), each of which has a number of rows to hold the various buttons of the navigation bar? If you're not sure, try creating a table like this with four rows for the four navigation options. Add the links or buttons into the appropriate cells. Now try adding some content. Which cell do you put it into? Does the content you put into cells in the right-hand column affect the size of the cells in the navigation bar?

You could use a rowspan on the right-hand column to merge all the cells into one row. Or you could just stick to one row and two columns for this 'outer table' and insert inner tables as required. Which is best? Experiment and decide for yourself.

The next point to consider is alignment. You may find that your navigation buttons float towards the middle of their space in the vertical direction. Can you remember how to make them align to the top?

On the gallery page, don't forget that hyperlinks don't have to just link to other web pages - they can link straight to files. Don't forget though that by default, links open in the current browser window. We want a new window with just the image in it.

RE: Micro Mart Diploma 2

PhilK — Mon, 13 Feb 2006 14:37:49 GMT

BASIC HTML PART 7/8: Forms

So far we've looked at how to publish information online and how the viewer can navigate between those published pages. That's fine as far as it goes, but there comes a time when you need more input from your visitors. HTML forms can be used for any number of purposes - order entry forms, information requests etc.

Most forms need some sort of processing on the website's server. These are known as CGI (common gateway interface) programs and will save information to a database, retrieve requested information etc. This is beyond the scope of this diploma but to start things off, we'll make a form to ask for your viewer's name and e-mail address. Then when they press a button that name will be e-mailed back to your mailbox. This may not be extremely useful but it's a start and it is interactive!

First though, you need to know what goes on behind the scenes. All forms are enclosed within the container <FORM> </FORM>. The <FORM> element takes two attributes - ACTION and METHOD. ACTION is the URL of a program that lives on the server (the computer that hosts your website). This program takes the contents of the form, interprets it and does something with it. METHOD is the way in which the contents of the form are sent to this program. There are two values to the METHOD attribute: GET and POST. Each sends the contents of the form across to the ACTION program in a different way. The differences are subtle and important but, again, out of scope for now. Let's look at what the content of the form actually is.

Every object on a form has a name and a value. A simple text input box can be placed on the form like this:

The <INPUT> element inserts one of a number of form objects onto the web page, into which the user can then enter information. The attribute TYPE specifies the type of object - in this case a simple textbox. I have given this input box the name "yourname" by using the NAME attribute of the <INPUT> element. Your visitor will type the value of this input box in. It's possible to force a value into the box using the VALUE attribute like this:

This example would prompt the name 'Mickey Mouse' into the input box. The user can simply accept this (if by chance that happens to be their name!) or they can amend it. VALUE is optional.

At some point, the user will have entered their name into this box, filled in any other fields on the form and pressed the 'Submit' button. This sends the contents of the form to the ACTION program using the METHOD specified. Whichever METHOD is specified, the end result is similar - the object name and value pairs are sent across to the server for the ACTION program to use.

Let's complete the example:

<FORM ACTION =" www.myserver.com/cgibin/myprogram.exe" METHOD="GET">
Name: <INPUT TYPE="TEXT" NAME= "yourname"><br>
Email: <INPUT TYPE="TEXT" NAME ="youremail"><br>
<INPUT TYPE="SUBMIT" NAME ="submitbutton" VALUE="Go">
</FORM >

The third input field has a type of 'SUBMIT'. When the submit button is pressed, the browser sends the details of the form to the server, including the details of the submit button itself. You may be wondering why the server would want the details of the 'submit' button when its only purpose is to terminate user input and send the form. Well, it could be useful to have more than one submit button on a form so that the server can do something different, depending on which one was pressed (e.g. to add or delete a record). The value of the 'submit' button appears on the button itself also.

But as we won't be writing CGI programs for now, let's change the example to e-mail the contents of the form.

<FORM ACTION= "mailto:me@mydomain" METHOD= "POST">
Name: <INPUT TYPE="TEXT" NAME= "yourname"><br>
Email: <INPUT TYPE="TEXT" NAME= "youremail"><br>
<INPUT TYPE="SUBMIT" NAME= "submitbutton" VALUE="Go">
</FORM >

Notice that the ACTION program is now 'mailto:'. This is a short URL to a server e-mail application that will send the contents of the form to your mailbox. Replace the 'me@mydomain' with your e-mail address and it's ready to use. A word of warning as usual - not all browsers support 'mailto' and it's generally not used because it's easy for spammers to get your e-mail address and the contents are sent unencrypted, but it's good to illustrate forms in action.

You can control the size of the text input box using the HTML's SIZE attribute. The value of SIZE is the length of the input box in characters. It's possible to limit the number of characters that you can type into this field by using the MAXLENGTH attribute. If the number of characters specified by MAXLENGTH is greater than the number specified by SIZE then the input will scroll within the text input box to allow you to enter all of the characters.

Password Boxes

A variation on the text input box is the password box. This is similar to the text input box except that the characters that the user types aren't echoed to the screen. Instead, circles or asterisks are displayed. To create a password box, simply replace the TYPE="TEXT" in a text input box with TYPE="PASSWORD".

The simple text input box is fine if you want your visitor to only type a small number of characters, such as a name, but if you want them to type more (for example a message) you'll need a multiple line input box. You define a multiple line input box with the <TEXTAREA></TEXTAREA> container, which is similar to the simple text input box. You may be wondering though, why <TEXTAREA> has a corresponding closing element - </TEXTAREA>. This is because it's impossible to provide default data for a multiple line input box using the VALUE attribute as you do for the simple text input box because the multiple line input box has multiple lines.

The way to provide default data for a multiple line input box is to enclose the data between the opening and closing elements. Only plain text should be placed between these elements as HTML mark-up will not be interpreted. This text is taken as is, and used as a default value for the object. This means that spaces and new lines are preserved, just like they are in the <PRE></PRE> container.

Specify Attributes

You specify the size of a multiple line input box using the ROWS and COLS attributes. These take values of a number of characters, so to produce a box 40 characters wide by ten characters high you would write:

<TEXTAREA NAME= "COMMENTS" ROWS="10" COLS= "40">
Please type any comments in this box. Thank you.
</TEXTAREA>

Often you'll want to ask the user a question with a limited number of responses. By using pull-down menus, you can save visitors keying in time and also ensure a standardised set of replies.

Pull-down menus are very convenient. They look just like simple text input boxes with the addition of a small button on the right-hand side.

Pull-down Menus 'pull down' a menu from which the user can select the most suitable response. Once selected, the value of the selection is shown in the text field and the menu vanishes. For the purpose of sending data to the server's CGI program, a pull down menu object is just like a text input box, in that whatever's in the text field at the time, the submit button is pressed and is sent as the value. Defining a pull-down menu object is similar to defining a list. The object is contained within a <SELECT></SELECT> container and each menu option is defined by an <OPTION> element, like this:

<SELECT NAME="SIZE">
<OPTION>X Small
<OPTION>Small
<OPTION>Medium
<OPTION>Large
<OPTION>X Large
</SELECT>

By default it's the menu item's text that's inserted into the text box and then passed on to the CGI program. Occasionally, you may want alternative text to be passed. For example, you may want your users to select the name of a product from a list, but you want the product code to be passed as a value to the CGI program. To do this, include the data to be passed, as the value of the VALUE attribute. So the data following the <OPTION> element will be shown on the menu but the corresponding VALUE data will be passed to the CGI program. For example:

<SELECT NAME="PAINT-COLOUR">
<OPTION VALUE="EMULBW5L">Brilliant White
<OPTION VALUE="EMULMA5L">Magnolia
<OPTION VALUE="EMULHG5L">Hint of Green
<OPTION VALUE="EMULHB5L">Hint of Blue
<OPTION VALUE="EMULPY5L">Pale Yellow
</SELECT>

In the above example, if the user selects `Hint of Blue' from the pull-down menu, 'EMULHB5L' would be passed to the CGI program.

Default Values

It's also possible to pre-select a default value from the list so that the user can just press the submit button if the default is applicable. This is achieved simply by adding the attribute SELECTED to the default <OPTION> element. There is no value associated with SELECTED, it just marks the particular menu item.

<SELECT NAME="MODEL'>
<OPTION>Luxury
<OPTION SELECTED>Standard
<OPTION>Budget
</SELECT>

Defining size

Pull-down menus have another optional attribute of SIZE. This determines how many options from the menu are displayed on-screen. The default value of SIZE is 1, which means only one item is displayed until the pull-down button is pressed. A value greater than 1 removes the pull-down button and shows the specified number of items on screen, with scroll bars if necessary. This is useful when it is more important to show the available options on-screen than to save space with a pull-down menu.

Radio Buttons And Checkboxes

If you have a limited number of items to choose from, it might be better to use checkboxes or radio buttons instead of a menu. Checkboxes allow your user to select one or more options by clicking a box. Once clicked, this box contains a mark and the value associated with the box is sent to the CGI program when submitted. Clicking the same box again removes the mark. Radio buttons are similar to checkboxes, but are used when all the options are mutually exclusive. Selecting a particular radio button deselects the previous button selected.

Here is a food order example that uses both types. The first item to select is the type of food - pizza or burger (mutually exclusive unless you're very greedy!), but you can choose any number of extras.

<H3>Food</H3>
Pizza <INPUT TYPE="RADIO" NAME="food" VALUE="PIZZA" >
Burger <INPUT TYPE="RADIO" NAME="food" VALUE= "BURGER">
<H3>Extras</H3>
Ketchup <INPUT TYPE= "CHECKBOX" NAME="extra" VALUE= "KETCHUP">
Mustard <INPUT TYPE ="CHECKBOX" NAME="extra" VALUE= "MUSTARD">
Cheese <INPUT TYPE="CHECKBOX" NAME="extra" VALUE ="CHEESE">
Onion <INPUT TYPE= "CHECKBOX" NAME= "extra" VALUE ="ONION">

With radio buttons. the field name (in this case 'EXTRA') is sent to the CGI program with the value of the selected value. With checkboxes, all fields that have their box checked have their name/value pair sent to the server. Both checkboxes and radio buttons support the SELECTED attribute to default an option/options.

Next week, it's assignment time so get swatting!

RE: Micro Mart Diploma 2

PhilK — Mon, 13 Feb 2006 14:35:10 GMT

Basic HTML Diploma Part 6/8 Style Sheets

A style sheet is a plain text file that describes how HTML elements should be rendered by a browser. Style sheets take over the formatting of a web page while the HTML file gets on with its job of conveying content and structure. Before we look at style sheets themselves, let's look at how you would tell the browser to use them.

Style is a description of how an object should be rendered on the output media (usually a screen). The basic structure of a style line is: element {style description}
For example, to tell the browser to show the contents of all <P> elements as black text on a green background, you would write:

P {color: black; background: green;}

Notice the curly brackets used around the element's description, followed by a list of styles, attributes, and value pairs joined by a colon and separated from other attributes in the list by a semi colon. That's all there is to it.

There are three ways of including style sheets within a web page, each with its own advantages and disadvantages.

With external style sheets, the style sheet data is held in a separate file and linked to the web page. This means multiple web pages can be linked to the same style sheet and by doing this you can create a look and feel to the whole website. You could for instance, define a coloured background with a logo in the top left and a contrasting margin. You would define all this in the style sheet and every HTML document that linked to it would then use these features.

To link to an external style sheet, place the following command within the <HEAD> of the web page:

The HREF takes the URL of the style sheet as its value. `.css' stands for cascading style sheet.

It's possible to embed style sheet data within the HTML document itself. The disadvantage is that it can only be referenced by the document in which it's embedded.

To specify an embedded style sheet, use the <STYLE> </STYLE> container within the <HEAD><HEAD> section of the web page document. For example:

<HTML>
<HEAD>
<STYLE TYPE= "text/css">
H1 {font-size: 36pt; color: red;}
</STYLE >
<BODY>
...The above style sheet will apply to everything here
</BODY>
</HTML>

It's also possible to apply a certain style to a section of a web page or even a single instance of an individual tag. To apply style to an individual tag, use the STYLE attribute of the required tag. For example, to make the contents of a specific <H1> tag show as huge white on red text, you should specify:

If you want to apply style info to a section of your document, add the style as the value of the STYLE attribute of the <DIV> tag and then contain the section to which it should apply within it. For example, if you wanted a section of your document to show as yellow on a blue background, you'd write:

<DIV STYLE="color: yellow; background: blue;">
<P>Everything here is shown as <B>YELLOW</B>
on a <I>BLUE</I> background </DIV>

<DIV> lets you apply styles to whole sections of your document. If you want to apply style data to flowing text only, then <SPAN> should be used in place of <DIV> if used to define a block, whereas <SPAN> is used to contain in-line text and is rendered more efficiently by browsers.

ID

Up until now, we've been applying styles to either every occurrence of an element or a single occurrence. But what if you wanted to apply a style to multiple elements or instances of an element? Well you could apply in-line style to each instance of the element you want it to apply to, but that's a bit tedious. Instead, you can assign a CLASS to each affected element then apply the style to that CLASS. For example, you may want a part of your document highlighted with a yellow background. You could assign a CLASS called `highlight' to each element which will be highlighted, then define the style and apply it to the CLASS called 'highlight' instead of to an element name, like this:

<HTML>
<HEAD>
<STYLE>
.highlight {background: yellow;}
</STYLE>
</HEAD>
<BODY>
<P CLASS= "highlight">This is important.</P>
This isn't important. <SPAN CLASS= "highlight">This is important. </SPAN>
This isn't.<B CLASS="highlight">This is.</B>
</BODY>
</HTML>

Notice that the CLASS name is defined within the <STYLE> container and is preceded by a full stop. Another way of identifying elements for the purpose of style is the ID parameter. ID works in a similar way to CLASS except that ID can only be used to identify an individual instance of an element and its name 'should' therefore be unique. A style is associated with an ID by preceding the ID name with a hash '#' symbol. For example:

<HTML>
<HEAD>
<STYLE>
#highlight {background: yellow;}
#inverse {background: black; color: white;}
</STYLE>
</HEAD>
<BODY>This word is <SPAN ID="highlight"> highlighted < /SPAN > and this one is
<SPAN ID="inverse"> inverse </SPAN >
</BODY>
</HTML>

Classes can be further refined by allowing a style to apply to a particular element that's part of that class. For example, you could make all <SPAN> tags with the class 'highlight' show with a red background and all <H3> tags with the class 'highlight' show with a blue background - like this:

BODY {color: white;}
SPAN.highlight {background: red;}
H3.highlight {background: blue;}

It's also possible to structure style definitions so that a style only applies in the required context. For example, if you wanted to make italic text appear red, but only where it's within an <H3></H3> container, you would write:

H3 I {color: red;}

Notice that there's no comma between the element names.

Try it with this example.

<I>Italic outside H3</I> <H3 class="highlight">H3 Heading with <I>Italic inside</I></H3>

To make both <H3> and <I> appear red, you would write:

H3, I {color: red;}

Notice the comma between the element names. Finally, to make <H3> and <I> red but <I> to additionally show the italics on a yellow background, you would write:

H3 I {color: red;}
I {background: yellow;}

Now you know the theory, I'm now going to introduce some useful styles and their syntax. Many accept measurements and these can be in a variety of units, the default being pixels. You can use pixels (px), inches (in), centimetres (cm), millimetres (mm), points (pt), picas (pc) and ems (em). For example: 20mm or 24pt.

Text Styles

There are a number of text styles that are worth taking note of and I've covered them here to give you an idea of what they all do.

font-family
This property is used to set the font of an element. It can be set to an actual font name or a generic font. If an actual font name is used then a generic font should also be included after it in the list. This acts as a fall back as all browsers should understand generic fonts if the specified font isn't available. Available generic fonts include serif, san-serif and monospace. The following example sets the font used for the contents of paragraphs to verdana if available, or otherwise to any other san-serif font.

P {font-family: verdana, san-serif;}

font-style
This property specifies whether an element is displayed as normal, italic or oblique (bold). It isn't advisable to try and make physical elements look different, such as setting <I> to appear normal rather than italic. You can of course alter logical elements or elements that don't have an intrinsic style.

EM {font-style: normal;}
H1 {font-style: italic;}

font-weight
This is used to set the thickness of the font. Valid values range from 100 to 900 in steps of 100 and relative values of bold, bolder and lighter can also be used. For example:

H2 {font-weight: 600;}
.darker {fontweight: bolder;}

font-size
Not surprisingly, this property sets the point size of a font. This property takes a wide variety of values, supporting actual and relative sizes. Actual values can be set in points, centimetres or inches and so on. For example, 24, 1.2cm and 0.5in are all valid. Positive percentage values are also allowed, such as 200% and the following words can be used to provide fixed sizes: xx-small, x-small, small, medium, large, x-large, xx-large and the following for relative fixed sizes: smaller, larger.

EM {font-size: 32pt;}
STRONG {font-size: 150%;}
HI {font-size: xx-large;}

font-variant
This little-used property can be used to display all text as small capitals. A value of 'small-caps' turns this property on, while 'normal' turns it off.

P {font-variant: small-caps;}

text-transform
This property is used to change text cases. The values 'uppercase', 'lowercase' and `none' are self-explanatory. The value 'capitalize' is not very useful as it changes the first letter of each word to uppercase.

.caps {text-transform: uppercase;}

text-decoration
This property can be used to add an effect to text. The following values speak for themselves: underline, overline, line-through, blink and none.

.flash {text-decoration: blink;}
.wrong {text-decoration: line-through}

An interesting use of this property is to use it with some special classes of the <A> element. The following style gives all unselected links an underline and overline, puts a line through it as you click it, and then sets it to a normal underline once visited:

A:link {text-decoration: underline, overline;}
A:active {text-decoration: line through;}
A:visited {text-decoration: underline;}

Font
There is a neat way to specify multiple font properties on one style line. The 'font' property accepts the values of any of the properties that start with 'font', so to make a <H1> element italic and 20pt arial font you would write:

H1 {font: italic 20pt Arial;}

vertical-align
This property aligns text and images in relation to the current baseline. A value of 'baseline' is the default and valid values are 'sub', `super', 'top', 'texttop', 'text-bottom' and `middle'. You can also specify percentages. In the following example, I've created a class called '.power'. This can be used to show numbers to the power of another number. The 'power' is shown as a small superscript number.

.power {font-size: x-small; vertical-align: super;}

text-align
This property determines how text within a block container is aligned horizontally. Values are 'left', 'right', 'center' and 'justify'.

DIV {text-align: justify;}

text-indent
This property specifies how far the first line of a block element should be indented. A value of zero means no indent.

P {text-indent: 2cm;}

letter-spacing
This property makes it possible to control the amount of space the browser places between letters using this property. A value of `normal' leaves the browser to decide.

P {letter-spacing: 0.5mm}

line-height
The line-height' property specifies the height of text lines. This will take values as percentages, numbers of lines, or sizes such as 24pt. So a line height of 1.5 lines would be written as:

P {line-height: 1.5;}

Color
This sets text colour. The following examples set all text to black except <H1> headings which show as red (#FF0000).

BODY {color: black;}
H1 {color: #FF0000;}

background-color
The background colour of a block or in-line element can be set using this property. A value of 'none' sets the background to the default colour. This property performs the same functions as the BGCOLOR parameter of the <BODY> element.

BODY {background-color: blue;}

background-image
These background images can be set in a similar way, by specifying the URL of the image to use as the background. Notice in the following example how the URL is enclosed in brackets.

BODY {background-image: url(bg.gif);}

background-repeat
The background image can be made to 'tile' (i.e. repeat) in cases where it is smaller than the browser window. Using a value of 'repeat' for this property tiles the image horizontally and vertically. A value of 'repeat-x' tiles horizontally but not vertically and 'repeat-y', vice-versa. To cause the image not to tile, use the value 'no-repeat'.

BODY {background-image: url(bgl.gif); background-repeat: repeat;}
TABLE {background-image: url(bg2.gif); background-repeat: repeat-x;}

background-position
The position of a background image within the browser window can be specified using this property. It takes two values, horizontal and vertical positions. Both can be specified by an absolute position (as an offset from the top-left corner), a percentage along each axis or one of the following keywords: 'left', 'right', 'top', 'bottom', and 'center'. The keywords and values must be supplied in pairs and 'center' can be used as a horizontal or vertical value.

BODY {background-image: url(bg.gif); background-position: center 20%;}

RE: Micro Mart Diploma 2

PhilK — Mon, 13 Feb 2006 14:27:47 GMT

Diploma: Basic HTML Part 5/8: Hyperlinks

A good website is one that keeps visitors as long as possible, thereby selling more of your goods, getting your message across etc. Equally, a bad website keeps its visitors by holding them prisoner, whereas a good site will always contain links allowing them to click and continue with their surfing.

Links may route the user to sites of companies with whom you have a trading relationship or maybe your friend's sites, or sites of people with similar interests. The important thing is that the visitor benefits from following these links and if they prove worthwhile the visitor may come back and visit you again.

Search sites or 'portals', take this idea to extremes, providing ad hoc and customisable sets of links. They cash in by selling advertising space for businesses to benefit from the through-flow 'web traffic' - i.e. you and me. In fact the whole set of results returned from a search is in the form of links.

Links are not just to other sites (although there will often be at least one external link on a site). The majority will be to other pages within your own site. You'll probably have a home page for example, with various links to pages of specific content. You will probably also want a 'home' button on each of these pages to link back to your home page.

What Is A Link?

So what exactly is a link? A link is a specific section of your document, usually a few words or an image. When the user positions the cursor over this area and clicks the mouse button, they are taken to a new web page. For example, clicking the mouse with the cursor over the words 'Click here for a site map' may load a web page showing your customers a map and exactly where they are in relation to the rest of your site.

When an area of text is made into a link, it is coloured (usually blue) and underlined. If the user has visited the link before, it will be a different colour (usually magenta). When the 'arrow' cursor moves over a link, it changes to a 'pointing hand' indicating that the area can be clicked.

You've probably already guessed that because a link is a 'clickable area' of your web page that it's created via a container tag. The <A></A> is the tag you'll need, together with its attribute HREF. The A stands for anchor and the value of the HREF attribute is the URL of the page which will be shown when the area between the <A></A> is clicked. For example:

Please <A HREF="map.html">Click here</A> for a site map.

The words 'click here' are contained within the <A></A> container and so become a 'hyperlink'. Clicking on these words in the browser will cause the web page 'map.html' to be displayed. I have talked about URLs previously when we used them to locate an image using the SRC attribute of the <IMG> element. The HREF attribute of the <A> element uses URLs in just the same way, except where SRC was expecting the URL of an image (i.e. a file ending in '.gif' or '.jpg'), HREF is more flexible. Here, HREF will usually be followed by the URL of an HTML document, in other words a web page. It may, however point to an image directly, in which case the image will be displayed on a blank browser screen. This is generally not a good idea though, since users must then press the 'back' button to return to the previous page. It's usually better to include the image within an HTML document, which includes a link back to the calling page and possibly to a further document. HREF can also link to other Internet resources. It could for example, link to an Adobe Acrobat (PDF) file or allow you to send an e-mail.

URLS

http://www.mydomain.com - This URL references a domain. The 'http' bit means HyperText Transport Protocol. This is simply the method by which web pages are accessed. Every server (servers are computers on which web pages are stored) on the Internet has a unique IP address. IP stands for Internet protocol and an IP address looks something like:

192.168.1.1.

The IP address is used to locate a server on the Internet. As you'll appreciate, IP addresses are difficult to remember so they can be referenced by a 'friendlier' domain name. Domain names are looked up automatically on a domain name server and translated into an IP address to enable the required server to be located.

In the fictitious example above, the browser would attempt to locate a server called www.mydomain.com. Because we haven't specified a particular file on that server, the browser will look for the default file (web page). The default file depends on the server being accessed, but will usually be called index.html or index.htm. We can request a specific file, located on a specific server by specifying the file after the domain name such as: http://www. mydomain.co.uk/myfile.html if we want to specify a link on this page, to a file that's located in the current directory (i.e.: the same directory as the current web page), we can use a 'relative URL. A relative URL does away with the leading details and specifies the file relative to the current directory. Therefore, if our current directory was the root (top level) directory on the server www.mydomain.com, then the above example could be achieved simply by myfile.html. If the file was in a directory below the domain we could use: mydirectory/myfile.htm

You can also use the DOS and Unix notation of '..' to signify the directory above the current one, so the following means show the web page called 'myfile.htm', located in the directory immediately above the current one:
../myfile.html

Named Markers

So far, we've referenced whole web pages to be displayed by clicking on a link. It is also possible to jump to a specific part of the current web page by using an anchor. Let's suppose you have a large web page that starts with a table of contents. Each line of the contents referred to a heading within the same page. You could make each line of the contents into a link which, when clicked, would cause the browser to jump to the relevant part of the document.

To do this we need to identify a place marker within the document - in other words, the place where the link will jump to. Each marker is named individually, so you can have as many as you like within a page.

To set a marker, you use the <A> element but with the NAME attribute in place of HREF. Such markers don't contain text, they simply mark a place within the document, but you must still use the </A> closing tag. To create a link to the marker, use an <A></A> container with an HREF value of the marker name preceded by a hash. For example:

<HTML>
<HEAD>
<TITLE>Anchor example</TITLE>
</HEAD>
< BODY>
Click <A HREF="#endofapage">here </A> to jump to line 4 of this huge document <BR>This is line 1
<BR>This is line 2
<BR>This is line 3
<BR> <A NAME= "endofpage</A>This is line 4
</BODY>
</HTML>

In this example, clicking on the word 'here' (as enclosed by the first <A></A> container), will activate the hyperlink to the marker called 'endofpage' at the start of line four. You can use any name you like for a marker. If the target line is already being displayed on the screen, then nothing will happen, otherwise the browser will move straight to the specified point.

Markers can be used in conjunction with a full URL to first load a new web page and then jump to the specified position. The following example achieves this:

Click <A HREF="newpage.htm#middle">here </A> to jump to the middle of another page.

This would first load the HTML document called 'newpage.htm' (notice that this is a relative URL) and will then jump to a marker called 'middle'.

The TITLE attribute is a useful attribute of the anchor element. If the user pauses with the cursor over the link area, the value of the TITLE attribute appears as a tool tip to inform the user about where the link will take them.

For example:

<A HREF="orderform.htm" TITLE= "Allows you to place your order online">Order form</A>

Remember that any part of your web page can be enclosed within an <A></A> container. If you contained a transparent GIF image, you could give your web page an impressive multimedia look. For example:

<A HREF="carsforsale.htm"><IMG SRC="car.grf"></A>

Hopefully all this sounds quite simple, but the <A> tag encompasses the whole principle of the web. You now have enough knowledge to create a surfable website. There is one other advanced hyperlink feature, which I won't go into here but you might like to look up - image maps. These let you define areas of images as hotspots. So when the user clicks on the UK, for example on a world map, a hyperlink will take then to a UK-specific page.

RE: Micro Mart Diploma 2

PhilK — Mon, 13 Feb 2006 14:23:06 GMT

Micro Mart Diplomas Basic HTML Part 4/8: Tables

There are many instances in which information is best displayed in tabular form. Timetables, price lists, sports results and so on are all easiest to read in rows and columns. The problem is that HTML reduces multiple white space (spaces, tabs etc) to a single space. There is a container tab that allows you to preserve white space so that you can lay out text in precise columns. This is the <PRE> element (pre-formatted text). However, the trade-off of being able to line text up is that any text enclosed within the <PRE></PRE> container is displayed in a fixed font, so that each character occupies a similar amount of space and spaces and tabs are thus preserved - it doesn't look pretty. Fortunately there is a set of elements specifically designed for table layout, whose use goes beyond simple information presentation.

These elements are <TABLE>, <TH>, <TR> and <TD>. The <TABLE> </TABLE> container encloses the table. Within this you first need to define your table's rows - the <TR> element indicates a new row.

Following the <TR> element will be <TD> or <TH> elements. <TD> stands for 'table data' and each <TD> element marks the start of a new data cell within the current row. The text that follows the <TD> will be shown in that data cell.

Table Elements

<TH> is a variation of <TD>. Like <TD>, <TH> defines a data cell but is intended to be used as a column heading. <TH> cells are usually displayed differently than <TD> cells by the browser (<TH> data is usually bold and centered). You can alter this easily by using style sheets and you are free to use any text enhancement elements you like within <TH> or <TD> elements. In fact, the data in table cells is not limited to text - you can also include images, video clips, links and even other tables. Let's keep things simple for now though and stick with text.

Look at the following table example, which uses two columns. The first contains the description of an electrical item and the second contains its price. The text following the two <TH> elements gives each column a heading whilst the actual cell data follows the <TD> elements. The <TR> elements tell the browser to start each new row.

<TABLE >
<TR>
<TH >Item</TH ><TH>Price</TH>
</TR >
<TR>
<TD>Refrigerator</TD><TD>£239.99</TD>
</TR>
<TR>
<TD>Television</TD><TD>£159.99</TD>
</TR>
<TR>
<TD> Microwave</TD> <TD > £99.99 </TD>
</TR>
</TABLE>

Notice also how the <TH> elements have been used in the same way as the <TD> elements. I haven't implicitly told the browser the number of rows and columns to display. It works out the number of rows via the number of <TR> elements within the <TABLE> </TABLE> container and the number of columns as the maximum number of <TH> and <TD> elements within any one row of the table.

If any row contains fewer cells than the row with the maximum number, then that row will be made up to the maximum number of cells by having blank cells added to the right. You can specify how many rows and columns to display if you like by using the COLS and ROWS attributes of the <TABLE> element for example: <TABLE COLS="2" ROWS="3"> which makes your document source more readable. So far so good. Now I'll complicate things a bit by introducing cells that span more than one column or row.

Cell Spanning

Sometimes you may want a particular column or row to span multiple columns or rows, especially in headings. This can be achieved with the COLSPAN and ROWSPAN attributes of the <TD> and <TH> elements. Look at the following code:

<TABLE ROWS="2" COLS="2" BORDER="5">
<CAPTION>Simple table</CAPTION>
<TR>
<TD>Row 1, Column 1</TD><TD>Row 1, Column 2</TD>
</TR>
<TR>
<TD>Row 2, Column 1</TD> <TD>Row 2, Column 2</TD>
</TR>
</TABLE>

<BR>

<TABLE ROWS="2" COLS="2" BORDER="5">
<CAPTION> ROWSPAN example </CAPTION>
<TR>
<TD ROWSPAN="2">Rows 1 and 2, Column 1</TD>
<TD>Row 1, Column 2</TD>
</TR>
<TR>
<TD>Row 2, Column 2</TD>
</TR>
</TABLE>

<BR>

<TABLE ROWS="2" COLS="2" BORDER="5">
<CAPTION >COLSPAN example </CAPTION>
<TR>
<TD COLSPAN="2">Row 1, Columns 1 and 2</TD>
</TR>
<TR>
<TD>Row 2, Column 1</TD> <TD>Row 2, Column 2</TD>
</TR>
</TABLE>

Each of the three tables contains two rows of two columns but look in particular at the second table. Notice that the first cell (first <TD> ) within the first row (first <TR> ) contains the attribute and value ROWSPAN="2" and that the second row therefore only contains one cell definition (<TD> ). This is because the first cell of the first row automatically extends to the first cell of the second row. Likewise, in the last table, the first row contains only one cell definition because the first cell spans both columns.

The above example also demonstrates the optional <CAPTION></CAPTION> container. This lives within the <TABLE></TABLE> container and defines - you've guessed it - a caption. The browser will display this caption, centralised, either above or below the table.

It's also possible to make your table more colourful and even use an image as its background. To colour the background of the entire table, use the BGCOLOR attribute of the <TABLE> element. For example, the following will colour the background of your entire table red: <TABLE BGCOLOR="RED">

To use an image as the background to a table, use the BACKGROUND attribute: <TABLE BACKGROUND= "myimage.gif">

The specified image will be tiled, if necessary, within the bounds of the table. The BGCOLOR and BACKGROUND attributes can also be used with the <TR>, <TD> and <TH> elements affecting the whole row or individual cells as appropriate. The setting of <TD> or <TH> takes priority over <TR>, which in turn takes priority over <TABLE>. It is therefore possible to colour precise areas of a table with the smallest amount of coding possible.

Here, I've added the Micromart logo as a background to the whole table except the bottom right cell, which is overridden with a green background.

<TABLE ROWS="2" COLS="2" BORDER="5" BACKGROUND="mmlogo.jpg">
<CAPTION>Simple table</CAPTION>
<TR>
<TD>Row 1, Column 1</TD>
<TD>Row 1, Column 2</TD>
</TR>
<TR>
<TD>Row 2, Column 1</TD>
<TD BGCOLOR="GREEN">Row 2, Column 2</TD>
</TR>
</TABLE>

Foreground text colour is achieved using the COLOR attribute of the <FONT> element.

Borders And Grids

As you have seen in the previous example, tables can have borders. To change its thickness, or remove it, use the BORDER attribute of the <TABLE> element. The value of BORDER is the thickness of the border in pixels with zero giving no visible border. While there's no real upper limit to the border value, anything above about 20 looks a bit odd. The BORDERCOLOR attribute allows you to change the border colour, eg:

This (unsurprisingly) gives a nice red border. Again all this can be done with style sheets.

Within the cells of a table, it's possible to control the amount of space between the cell border and the contents of the cell. This is controlled by the CELLPADDING attribute of the <TABLE> element. The value of CELLPADDING is the number of pixels that the browser will leave all around the inside of the cell border. This space is transparent so any coloured background or background image will show through it. The default value of CELLPADDING is 1. The complementary CELLSPACING controls spacing between cells.

This example shows the effects of various cellspacing and cellpadding values within a two-cell table.

If you don't want all four sides of a table's border to be displayed, you can specify precisely which are shown using the FRAME attribute of the <TABLE> element. Its values are:

ABOVE - top border only
BELOW - bottom border only
HSIDES - top and bottom only
LHS - left border only
RHS - right border only
VSIDES - left and right
BOX - full border - all sides
VOID - no border
BORDER - all sides

For instance, to just display the top and bottom borders of your table and not the sides, you would write:

The internal lines between cells can be controlled by the RULES attribute of the <TABLE> element. Its values are:

NONE - No internal lines
ROWS - Horizontal lines only
COLS - Vertical lines only
ALL - Horizontal and vertical internal lines. To display a border to the top and bottom of your table and lines only between rows, you would write:

So far we have simply used tables to display tabular data. However, tables are by far the most common method used for entire page layout. The most important thing you need to be able to control is the width of the table and its cells. The WIDTH attribute of the <TABLE>, <TH> and <TD> elements does this. The value of the WIDTH attribute can be expressed either in pixels (the smallest dots that make up images and text on the computer screen) or as a percentage. When used as an attribute of the <TABLE> element, WIDTH controls the width of the entire table. If you specify a width greater than the viewer's computer screen, the browser will add scroll bars automatically.

For example:

<TABLE WIDTH="500">

specifies that the table will be 500 pixels wide regardless of how the browser is sized on the viewer's computer. Scroll bars will be added if necessary.

<TABLE WIDTH="50%">

specifies that the table is half (50%) of the current width of the browser on the viewer's computer screen. As the viewer resizes the browser screen, so the table resizes to be the specified percentage of the current size of the browser.

The attribute HEIGHT can also be applied to the <TABLE>, <TH> and <TD> elements and similarly uses a percentage or pixel value. If the height specified is less than that required then it's ignored. Height will only enlarge a table or cell, not reduce it.

It's always a good idea to put something into a table cell even if it is just a space (i.e.:   ) character. This prevents some browsers from rendering the table incorrectly, especially if an entire row or column contains nothing.

Aligning

You should be familiar with the standard ALIGN values of "LEFT", "RIGHT" and "CENTER". The table can be aligned relative to the browser window by using the ALIGN attribute of the <TABLE> attribute.

ALIGN can also be used with <TR>, <TD> and <TH>. When used with these elements the alignment applies to the contents of the cell (all cells in the row in the case of <TR> ), relative to the walls of the cell. It's also possible to align the contents of a cell vertically relative to the cell walls. The VALIGN attribute of the <TR>, <TD> and <TH> elements achieves this. It accepts the values "BOTTOM", "MIDDLE" and "TOP". Again, when used with <TR>, VALIGN applies to all cells in that row.

Now to precisely lay out your web page, all you need to do is to create a big table with zero border and as many cells as you like, aligned as appropriate and filled with text, images, whatever you like - even more tables!

Although there are many ways to accurately layout a page these days, the good old table is still used on some very big sites. Just do a view source on your favourite sites and look for the <TR>s and <TD>s. Of course they will not have been coded by hand but the technique is still valid.

Next time, we'll be looking at hyperlinks. See you then.

RE: Micro Mart Diploma 2

PhilK — Mon, 13 Feb 2006 14:17:11 GMT

Basic HTML: Part 3/8 Graphics

It's part three of our Basic HTML diploma and I thought it was about time we had a look at graphics.

Each pixel of a bitmapped image contains information about the colour it should show. True colour uses 24 bits per pixel to make 16,777,216 colours possible and this is usually used to display photographic quality images. Not only would this take up loads of memory, however, it would take ages to download. Fortunately, the main image formats used on the Internet have built in compression algorithms that greatly reduce their size. The commonest formats are GIF and JPG. Each has its pros and cons and each is suited to a particular type of image.

Images are compressed to make them smaller so faster to download. Overdoing it though will seriously compromise image qualify. Here the 'a' in the Micro Mart logo has been compressed to a reasonable amount on the left image and by too much on the right. Notice colour variations creeping in - these are called JPG artefacts

GIF

GIF images have the filename extension '.gif'. They only handle 8-bit images and so are limited to 256 colours. Therefore they are best suited to diagrams and text in the form of an image. There are two variations of GIFs: GIF87 and GIF89a. GIF89a has the added advantage of being able to nominate one of its 256 colours as transparent This colour will not be displayed by the browser but will allow the background colour to show through. A good graphics package will allow you to select the colour to become transparent simply by pointing to it.

Transparency can produce some stunning results if used correctly. An image can be used in conjunction with a hyperlink and if made transparent can give your web page a multimedia look. A word of warning though; make sure you choose the colour to be made transparent with care. As an extreme example, imagine you had a picture of a zebra on a black background and you chose black to become transparent. The web page background would also show through its black stripes - probably quite amusing but unlikely to be the desired effect. Also, a common technique for 'smoothing' the edges of an image is to anti-alias it. This means that rather than use a stepped edge to an image, a gradual change of colour gives the illusion of smoothness. The problem here is that when it is used with transparency, because only one colour can be made transparent and not shades of it, a 'halo' effect results around the image where the slight colour variations are not made transparent. The alternative is to use a fixed background colour instead of transparency.

This is the Micro Mart logo as used on the website. It's a 173x63 pixel image. Look how smooth the edges look

Magnified we can see why the edges look smooth - they use lots of anti-aliasing. Anti-aliasing is a setting on most tools in your graphics application. In general turn it on when creating images and images of text

This is a close-up of what the logo would look like without anti-aliasing. This would give a very rough look to the actual logo

I can't apologise enough to Micro Mart's brand and design people for this - but it's just to illustrate a point that anti-aliased edges can't be used on different coloured backgrounds as they introduce a halo

GIF89a also supports animations. These are simply multiple images stored in the one image file. A suitable browser will display each of the images in succession, giving the effect of movement. Delays and loops can also be built into the image using suitable software. Used sparingly, animations can be very effective - for instance a spinning star to highlight something new or a moving arrow to show where to press. But do keep animated images small. Older browsers that do not support animations will usually show the first image in an animation sequence.

JPG

JPG images have the filename extension of ".jpg" or ".jpeg". They store images in 24-bit true colour and so are best suited to photographs. Their compression algorithm is extremely efficient and can be further enhanced by specifying a percentage loss. This specifies the amount of detail that can be omitted. JPGs do not support transparency or animation.

So in summary, the two main points to glean from all this are: choose the format which best suits the type of image - GIF for line drawings, diagrams and text and JPG for photographs; consider the download time - this may not be apparent if you are displaying images locally on your PC or if you have broadband. Remember though that many people still use a dial-up connection, so don't make images too large or use too many. Don't feel that you have to use loads of images either. Some of the most effective websites use a very clean, almost sparse format with two or three very small graphics.

Putting Images Into Your Web Page

Okay, you want to know how to put images into your web page, don't you? Easy:

<IMG SRC="myimage.gif">

The <IMG> element has a mandatory parameter SRC. This is the filename of your image. The example above assumes that the image it specifies exists in the working directory on the server (i.e. in the same place as your web pages). The source could be a relative such as:

<IMG SRC="pics/myimage.gif">

This points to a subdirectory of the current directory, which contains the image. The source could be a link to someone else's website:

<IMG SRC="www.othercompany.com/images/logo.gif">

Try to avoid this though, because of the extra time involved in looking up the other website and then downloading from another location, not to mention the legal/moral aspect of using their copyrighted image and bandwidth. Try to keep all your images on your own server. If the image pointed to by the SRC parameter does not exist, the browser will display a symbol in its place indicating that the image could not be found.

Size Matters

Until a full image has been fully loaded, the browser has no idea how big it is. It therefore cannot determine the page layout until all the images have been downloaded. You can tell the browser how big an image is in advance by using the HEIGHT and WIDTH parameters to the IMG element. For example:

<IMG SRC="myimage.gif" HEIGHT="300" WIDTH="150">

The browser will then reserve space on the page and download the image into that space. The browser can then download the text and display it while the images are still downloading. Your graphics program will tell you the size of the image - if you specify the size incorrectly, the image will still load into the space but its dimensions will be distorted so your image may appear squashed or stretched. HEIGHT and WIDTH can be used to intentionally resize an image but this is not a good idea. It is better to resize the image in your graphics program, particularly if you want to reduce the image size, because the full image is still loaded in even if you tell the browser it should be half size. By resizing in your graphics program you would reduce file size and therefore download time.

Specifying an image's height and width in the <IMG> tag is a good idea as it 'reserves' space in the browser so the browser can continue to layout the rest of the page

Backgrounds

The default browser backgrounds are chosen for their neutral colours and hence their readability. You can, however, change the colour of the browser background or even use an image as the background.

Internet Explorer supports a non-standard feature that makes the background static so that when the browser window is scrolled, the background stays still. To use this, set the value of the BGPROPERTIES parameter of the <BODY> tag to "FIXED":

<BODY BACKGROUND= "bgimage.gif" BGPROPERTIES= "FIXED">

Be aware, though, that a poor combination of background and foreground can make your site look amateurish or simply unreadable. Changing the background colour couldn't be simpler. You simply specify the colour as the value to the BGCOLOR parameter of the <BODY> element. The colour may be specified as a number or a name as with <FONT>:

<BODY BGCOLOR="CORNFLOWERBLUE">

Specifying a background image is just as easy with the BACKGROUND parameter. Simply specify the URL of your image as the value to this parameter and the image will be tiled (repeated horizontally and vertically to fill the browser window) as the background:

It's even more important to choose a background image with care than a background colour. Contrast is the most important feature with pale backgrounds and dark text working best. Blurring the background image slightly, using your graphics program makes the foreground text stand out in a 3D-like effect.

The <IMG> element supports simple alignment of images, which also determines how text will flow around them. The alignment parameters work as you would expect but it's important to note the following. TOP MIDDLE and BOTTOM describe where the text is to be aligned in relation to the image whereas LEFT and RIGHT describe where the image is aligned in relation to the browser window. Text then flows from the top of the image on the other side. So an image aligned RIGHT would be placed against the right-hand edge of the browser window and text would flow from the top of the image, on the image's left-hand side. The opposite is true of LEFT aligned images.

The automatic text flowing which browsers provide is very powerful but there will be times when you want to break the text flow around an image and restart text after the image. <BR> will cause text following it to start on a new line but within the flow around the image.

Here, there is a <BR> after the word 'caption' alongside the first image. Notice how it starts a new line but one that is still alongside the image. A parameter of <BR> called CLEAR breaks the text flow, restarting it after the image. There is a <BR CLEAR="ALL"> after the word 'caption' alongside the second image. Here is the code for this example.

<HTML>
<HEAD>
<TITLE>Image alignment example </TITLE>
</HEAD>
<BODY>
<IMG SRC="test.gif" ALIGN ="LEFT">
I want the next sentence to appear under the image as a caption.
<BR > But it doesn't <HR>
<BR CLEAR= "ALL"> <1MG SRC="cAtest.gif" ALIGN ="LEFT">
I want the next sentence to appear under the image as a caption.
<BR CLEAR= "ALL"> It works!
</BODY>
</HTML>

The flow around an image isn't just restricted to text. Other images will also flow around an image as will just about anything else you can place on your page. This is the reason why I have inserted a <BR CLEAR= "ALL"> before the second image otherwise it would have been placed in the flow to the right of the first image.

Borders And Spacing

You may have noticed that the foreground images have a border around them. To add a border to an image, use the BORDER parameter of the <IMG> element - its value is the thickness of the border in pixels:

<IMG SRC="myimage.gif" BORDER="2">

To leave a space around an image, use the VSPACE and HSPACE parameters of the <IMG> element - again their values are in pixels. VSPACE inserts an area of clear space to the top and bottom of the image. By 'clear space' I mean that the area is reserved and text or images will not show in it. On the other hand, background colour or a background image will show in it. HSPACE leaves an area to the sides of the image. Both VSPACE and HSPACE can be used together to leave a protective border around an image to ensure it doesn't merge into other images or text.

We take images for granted on the web, but there are instances when images are not available. Text browsers are the obvious instance; audio browsers for blind people are another. Obviously any text contained within an image will not be available to them. Fortunately you add the ALT parameter to the <IMG> tag. ALT accepts that text is used in place of the image where appropriate:

So far any visitors to your website have been trapped there. This isn't a good idea if you want them to consider ever coming back. Next week we'll see how to add links to your page to get your viewers surfing.

RE: Micro Mart Diploma 2

PhilK — Mon, 13 Feb 2006 14:10:54 GMT

Diploma Module 2 - Basic HTML: Part 1/2 - Text Formatting And Physical Elements

There's lots to get through this week so I'll jump straight in with some more text formatting tags. Examine this block of code...

<HTML>
<HEAD>
<TITLE>MORE TEXT FORMATTING TAGS</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">More text formatting tags</H1>
<DIV ALIGN="CENTER">
<BR>&LT;U&GT; is <U>Underline</U>
<BR>&LT;SUB&GT; is <SUB>Subscript</SUB>
<BR>&LT;SUP&GT; is <SUP>Superscript</SUP>
<BR>&LT;STRIKE&GT; is <STRIKE>Strikethrough</STRIKE>
<BR>&LT;BIG&GT; is <BIG>Big</BIG>
<BR>&LT;BIG&GT;&LT;BIG&GT; is<BIG><BIG>Bigger</BIG></BIG>
<BR>&LT;SMALL&GT; is <SMALL>Small</SMALL>
<BR>&LT;SMALL&GT;&LT;SMALL&GT; is <SMALL> <SMALL>Smaller</SMALL> </SMALL>
</DIV>
</BODY>
</HTML>

The first of these, underline <U></U>, is not used very often. The reason being that hypertext links on the web are signified by underlined text. Therefore, if text is underlined and doesn't form a link, it may confuse people viewing the page. However, links are usually coloured blue, so as long as underlines are kept the same colour as the surrounding text and used sparingly, it should be okay to use them on occasion if absolutely necessary.

Subscript <SUB></SUB> and Superscript <SUP></SUP> do exactly as their names suggest, as does Strikethrough, <STRIKE></STRIKE>.

Sizing Up

Last week, I showed how you can use the heading tags <H1> to <H6> to change the size of your text. The real purpose for the heading tags though, is to form part of the document's structure. It's incidental that in most graphical browsers they are shown at different sizes. In text-only browsers, for instance, headings may be indented to varying levels or made bright or bold.

A better way to alter the size of your text is with the <BIG></BIG> and <SMALL></SMALL> tags. These alter the text size on a scale from one (smallest) to seven (largest) - yes, that's the opposite of the heading tags numbering system - isn't life fun? The default setting is size three. Each nesting of a <BIG> tag goes up a size and each nesting of a <SMALL> tag goes down a size. The following shows how nesting the <BIG> tag gives different sizes.

Your text will still not change size in a text-only browser but at least it will not be indented. Now look back at the first code example before. See the characters after the <BR> and before the word 'is' on most of the lines? For example:

<BR>&LT;STRIKE&GT; is <STRIKE>Strikethrough</STRIKE>

What's all that about then? Well look at the browser output of, say the 'Strikethrough' line - it starts with the <STRIKE> tag. If you want to display the word '<STRIKE>' for example in the browser, you can't just put it into the code - otherwise browsers will interpret it as a tag. You need to use special codes: &LT; stands for 'less than' and &GT; stands for 'greater than', so &LT;STRlKE&GT; displays as <STRIKE>. There are many other codes for foreign characters, but the most common are for those characters that would otherwise be treated differently by the browser, like multiple spaces. Here are a few useful codes - you can use the number or the named version of these, but don't forget the semicolon on the end:

  or   = Space
" or " = Quote
& or & = Ampersand (& )

Physical And Logical Elements

So far we've looked at just physical elements. These elements physically do a particular job. For instance, their job may be to make text bold or to underline it. There is another set of elements though: logical elements. These elements describe the type of text contained within them. The way in which that text is then displayed is incidental and under the control of the browser. That said there tends to be standard ways in which modern browsers display logical elements.

With stylesheets (we'll talk about these in a few weeks), logical elements are becoming more important. Let's say, for instance, you want a sentence to stand out. You could use the bold element <B></B> or you could use <STRONG><STRONG>. <B></B> simply makes the text bold whereas <STRONG></STRONG> happens to display as bold but more importantly informs the browser that this portion of text needs to be picked out from the rest. Using stylesheets for instance, these elements could be displayed in a different colour. In other words, logical elements describe what text is, rather than how it should look. Here is a list of logical elements:

<ABBR> </ABBR> Abbreviation
<CITE> </CITE> Citation
<CODE> </CODE> Program source code
<DFN > </DFN> Definition
<EM > </EM > Emphasis
<KBD> </KBD> Keyboard input (key-presses)
<SAMP></SAMP> Sample information
<STRONG> </STRONG> Text to stand out
<VAR> </VAR> Program variable

Divisions And Blocks

Last week we looked at the <CENTER> </CENTER> element, which centralises the text contained within it. You'll notice that in the above example I've centralised the headings and text without using <CENTRE> </CENTRE>. I did this by centralising the heading using the ALIGN attribute of the <H1> tag with a value of CENTER. This causes the text contained within the <H1></H1> container to be centre-justified within the browser window. Other values for the ALIGN attribute are LEFT (the default) and RIGHT.

Similarly, I've centralised the main body of text by adding the ALIGN='CENTER' attribute and value to the <DIV> tag. <DIV></DIV> is a way of sectioning your document. <DIV></DIV> containers can be nested to give your document a structure. Divisions are very powerful when used with stylesheets and I'm only mentioning them here in passing. It certainly would do no harm to use <DIV ALIGN= "CENTER"> </DIV> instead of <CENTRE> </CENTRE> in all your code.

<DIV>s work like a container - a box to insert content into. This container can have various properties. In the above example, try changing the <DIV> line to read <DIV ALIGN="CENTER" STYLE="background:lightblue;"> and you'll see the extent of the box. Again, more on style sheets in a few weeks.

Until now, you've probably been patiently using the default Times New Roman font for proportional fonts and Courier for monospaced fonts. To exercise considerable control over your text, use the <FONT> </FONT> element (or using style sheets).

Remember the different text sizes? Well <FONT> uses these too. You can specify a font size directly by using the SIZE attribute. For example, to specify a big size six font you would write

You can also emulate the <BIG> and <SMALL> tags by giving the SIZE attribute a relative value. This takes the form of a signed value such as +2 or -3 relative to the current font size. If the increase or decrease goes 'off the scale', seven or one is chosen. So, to achieve the same effect as two nested <BIG> tags, you would say

<FONT> isn't just limited to sizing text though, it can colour it as well. To change the colour of the text contained within the <FONT> </FONT> tags we use the attribute 'COLOR' (note the American spelling!). The colour attribute accepts a value as a six digit hexadecimal number. representing the RGB value of the required colour. In English, RBG stands for Red, Green, Blue in a subtractive way, like mixing light, rather than additive like mixing paint. So each colour, for instance, produces white while none of any of them produces black, full red gives no green and full blue gives a bright magenta, and so on. Specifying what proportion of these colours is a little tricky though, since the values are two digit hexadecimal numbers therefore giving `a range of values for each 'primary' colour (red, green and blue) of '00' (none) to 'FF' - full. For example, white is '#FFFFFF' black is '#000000' and magenta is '#FF00FF'.

Some graphics packages will show you the values of colours so you can pick one and read off the value. Fortunately, most modern browsers support a large range of named colours so you could specify COLOR='MAGENTA' instead of '#FF00FF'. This is a much more friendly approach, but the names do get a bit silly - whitesmoke, rosybrown, lightsalmon, papayawhip and lemonchiffon; programming never used to be like this.

COLOUR CODING

There are hundreds of websites dedicated to such colours. For a great colour palette and posters/books to buy try www.visibone.com.

Finally, the FACE attribute of the <FONT> tag causes the contained text to be displayed in the font specified by name. This is only possible if the viewer has the named font installed on their computer. The FACE attribute therefore allows a list of fonts to be specified, which the browser will try one by one until it finds each on the viewer's computer. So a line of code to display huge 'papaya whip' coloured letters in Comic Sans MS font (or Arial if that's not available) would be:

<FONT SIZE="7" COLOR= "PAPAYAWHIP" FACE="COMIC SANS MS, ARIAL">Nice colour!? I don't think so!</FONT>

Micro Mart Diploma 2

PhilK — Mon, 13 Feb 2006 14:07:54 GMT

Micro Mart Diploma

Basic HTML - Part 1/8: Mark-up

It's the first part in our second diploma and this time, we're going to be looking at basic HTML programming.

So, why bother to learn HTML when there are so many good packages around that let you design your pages directly onto the screen without any code? Because by understanding what goes on behind the scene, you'll be better placed to move on to more advanced web programming such as PHP or .NET languages. You'll also be able to tweak your pages when the design program doesn't get it quite right.

Firstly, although the 'L' in HTML stands for language, it is not a programming language. It is a collection of mark-up codes that describe the structure of a document. The tags tell the computer that at a certain point in the flow of the text it needs to do something, such as start displaying text in bold or insert an image etc.

Get Coding

We're assuming you don't have a website design package or an HTML editor. All you need to get started is any old text editor - we'll use Windows Notepad. Watch out for notepad adding a '.txt' extension to your filenames though. HTML documents must have a '.html' or '.htm' extension, otherwise your HTML tags won't be interpreted.

To view your saved document, simply choose 'Open file' from your browser's menu. This is the way in which you view documents on your own computer. We'll see the different way in which you view documents on the Internet later.

All HTML documents should have the following basic structure:

<HTML>
<HEAD>
<TITLE>
My web page
</TITLE>
</HEAD>
<BODY>
Welcome to my web page
</BODY>
</HTML>

The code above simply displays 'Welcome to my web page' on the browser screen. You will notice a lot of words enclosed within angled brackets (e.g. '<HTML>') - these are known as tags. Tags are elements of HTML and usually come in pairs. A pair of like-tags is known as a container and bounds the area of the document to which it applies. A tag with a '/' before the word is a closing tag and one without is an opening tag. Notice the opening tag <HTML> at the start of the document and the closing tag </HTML> at the end of the document - the whole document is 'contained' within them.

Within the <HTML></HTML> container are two other containers: <HEAD></HEAD> and <BODY></BODY>. Within the <HEAD></HEAD> container is yet another container <TITLE></TITLE> etc.

Tags Explained

The <HTML></HTML> tags contain the whole web page. The <HEAD></HEAD> section contains information about the document. An important piece of information is the <TITLE></TITLE> section. The text enclosed in this container is displayed in the browser's title bar while the page is being viewed and it's also important to search engines. The <BODY></BODY> section contains the content of your document. The majority of HTML elements are found within the <BODY></BODY> section.

Notice how each new nested section is indented by a space. This is just for readability as browsers ignore multiple spaces, tabs and carriage returns.

However, 'nesting' tags is vitally important. Look at how the <TITLE></TITLE> section is completely contained within the <HEAD></HEAD> section and that the <HEAD></HEAD> section is, in turn, completely contained within the <HTML></HTML> section.

Now look at this wrongly nested version of our sample document:

<HTML>
<HEAD>
<TITLE>
My web page
</HEAD>
</TITLE>
<BODY>
Welcome to my web page
</BODY>
</HTML>

The problem is that the <TITLE></TITLE> container also contains the closing tag </HEAD> in addition to the title text. The </TITLE> closing tag should appear before the </HEAD> closing tag. In other words, the containers overlap rather than being nested.

Put simply, the rule is this:

You cannot close a container if there is another open container within it.

Now I'll introduce a couple of new tags just to further illustrate container nesting. Let's say we want the simple message 'Welcome to my Web page' to appear in italic. We would simply contain the text within italic tags <I> and </I>, like this:

<I>Welcome to my Web page</I>

Now, say we want to emphasise the word 'my' by making it bold. We would use the bold tags <B> and </B> to contain just the word 'my' like this:

<I>Welcome to <B>my</B> Web page</I>

Try it. Notice that the whole sentence is still in italic, including the word 'my'. The <B> and </B> tags are completely nested or contained within the <I> and </I> tags so the whole sentence is shown in italic.

So how would you make the bold 'my' non-italic, while keeping the rest of the sentence italic?

Like this?

<I>Welcome to <B></I>my<I></B> <I>Web page</I>

or like this?

<I>Welcome to</I> <B>my</B> <I>Web page</I>

The second is correct.

The first example is incorrect because the first </I> tag is attempting to close the <I> container, which in turn contains an open <B> tag.

The heading tags <H1> to <H6> can be used to create headings with text in one of six sizes - 1 being the biggest and 6 the smallest. Normal text is equivalent to <H4>. Heading tags can be used to show text of roughly a certain size, anywhere within your document. However, the prime purpose of HTML is to describe the structure of your document and not its look. That may seem a little strange as almost all tags impart a certain look on the area of the document that is bound by them. That default look though, is subject to change by both the users' browsers and the user themselves. I'll explain more later but for now, it is safe to assume that a <H1> tag gives large text but you really should only use it where you are actually describing a major heading within your document.

Using Paragraphs

An important tag is the paragraph tag - <P>. The browser will usually show a paragraph separated from the preceding text by a blank line. The <P> tag is unusual in that it does not strictly need a closing </P> tag but it is always good practice to add one - it will help you to nest correctly.

A common mistake is to try to use multiple <P> tags together to open up blank lines. This does not work because the <P> tag describes the structure of the document and the fact that it separates its content from the preceding text in most browsers is incidental. The <BR> tag, which does not have a corresponding closing tag, can be used to force a line break and to open up a blank line.

<P>Here is paragraph 1.
<P>Here is paragraph 2 and I'm going to break to another line here...<BR>There I'm on another line now!

<CENTER></CENTER>, (note the American spelling), is a container that causes anything within it to be centre justified within the browser window.

<CENTER>
<H1>Welcome to my website</H1>
<H2>Last updated: 10th June 2005</H2>
</CENTER>

Don't forget everything to be displayed goes between the <BODY></BODY> tags, I'm simplifying it here to save space.

Horizontal Rule

Now to separate the headings from the text. The <HR> tag stands for horizontal rule and simply draws a horizontal line across the browser screen at the point at which it appears in the document. Like <BR> it's a single tag and does not have a corresponding closing tag. By default, it draws a neat line, one pixel in width (a pixel being the smallest point that can be referenced on the screen), extending the whole width of the browser screen. We can change this by applying 'attributes' the <HR> tag.

Attributes

All tags accept attributes. Their purpose varies but they either describe the tag (the HTML element) or they modify its behaviour. Some tags have mandatory attributes whereas others are optional and a default is applied if they are not specified. Attributes are specified within the angled-brackets of the tag after the tag name. They are always specified on an opening tag and not on the closing tag. The syntax is as follows:

For example, the <HR> tag accepts an attribute called WIDTH. This specifies how far across the browser window the line will be drawn. You would specify the WIDTH attribute with the <HR> tag as follows:

This tells the browser that it should draw a horizontal line extending across 60% of the width of the browser window. If the user resizes the browser window, the browser will adjust the length of the line accordingly. The value of the WIDTH attribute of the <HR> tag can either be a percentage (which varies with the size of the browser window), a fixed number of pixels (e.g. 10px) or a measurement (e.g. 50cm).

In the latter cases, the line will be a fixed width. If the number of pixels specified is larger than the browser window, the browser will add a scroll bar automatically.

<CENTER>
<H1>Welcome to my website</H1>
<H2>Last updated: 10th June 2005</H2>
<HR WIDTH="80%">
</CENTER>

In this example, I've added a <HR> with a width of 80% and because I nested it within the <CENTER></CENTER> container, it was also centralised.

Another attribute of the <HR> tag is SIZE. This specifies the thickness of the line in pixels (the default is one pixel). To make a nice chunky line, extending half way across the browser window, you would write:

Look Around

A great way to learn HTML is to look at other people's code. To do this, while you are viewing a web page, select the 'View' menu then select 'Source' (in Internet Explorer - other browsers may differ). Copy and paste this into your editor and try to see what's going on. Play about with any new tags you find. In the next chapter, I'll introduce more text formatting tags and explain the difference between physical and logical tags.