The schedule changes mean this will be my last Sunday post for the forseeable future (mind you, I said that about Saturday posts yesterday, and was wrong) ... part four of this series will be on Tuesday the 4th, the fifth & final part will be on Saturday the 8th


Introduction to Part Three

If you've read the previous installments, you'll know that I've written this series of tutorials with someone with little to no knowledge of HTML in mind - like me before I started my own pages.
The plan is that by following along at home, you should have the key concepts that will allow you to produce your own pages that are not too embarrassing to look at.

In part one we covered:
Basic page creation & layout;
Text fonts, colours & sizes;
Text alignment;
Backgrounds;
Heading styles;
Rulers;
The new paragraph tag;
Text formatting.

And in part two:
Capitalisation in filenames & links;
(More on)Text Formatting;
Lists; and
Tables.



Images

Time to start putting some pictures into our site.

Download the attached .JPG files into your project folder, then make a copy of your index.htm file, and rename it as images.htm. Open it & the underlying text file, then remove <P>W00T! and everything from <P><B>My Favourite Fast Cars:</B> to </TABLE>. including those tags.

Amend the heading from <H2>My Web Page</H2> to <H2>My Gallery</H2>.

Finally, add some blank lines between the <HR> and </CENTER> tags to form the basis for this new page. Code recycling - gotta love it !

At its most basic, the tag to insert an image takes the form <IMG SRC="filename.xtn"> where filename.xtn is the name of the image you want to insert (including the file extension) and the path to it, if it is not in the same directory as the page it is being called from.

As with a lot of other tags, this one can have attributes applied to it, for instance ALT="text" allows you to add text that will appear when your mouse pointer is over the picture; HEIGHT=n allows you to control the vertical space the picture takes up (if you want to use it at dimensions other than it's actual size), and WIDTH=n allows you to do the same for its horizontal size. Note that it is not necessary to use both HEIGHT and WIDTH unless you want to distort the picture - the image will be resized automatically.

For example:
<IMG SRC="360_modena.jpg" ALT="Ferrari 360 Modena F1" WIDTH=600>

We also want to put in some bookmarks (I'll explain why a bit later), these take the form
<A NAME="name_text"> </A>

Putting all this together, the code you need to insert in the blank space you created earlier looks like this:

<A NAME="360_modena"> </A>
<P><IMG SRC="360_modena.jpg" ALT="Ferrari 360 Modena F1" WIDTH=600>
<A NAME="diablo_sv"> </A>
<P><IMG SRC="diablo_sv.jpg" ALT="Lamborghini Diablo SV" WIDTH=600>
<A NAME="gt1"> </A>
<P><IMG SRC="gt1.jpg" ALT="Porsche 911 GT1" WIDTH=600>
<A NAME="maclaren_f1"> </A>
<P><IMG SRC="maclaren_f1.jpg" ALT="McLaren F1" WIDTH=600>
<A NAME="r500"> </A>
<P><IMG SRC="r500.jpg" ALT="Caterham R500" WIDTH=600>
<A NAME="vantage"> </A>
<P><IMG SRC="vantage.jpg" ALT="Aston Martin Vantage 600" WIDTH=600>
<A NAME="xj220"> </A>
<P><IMG SRC="xj220.jpg" ALT="Jaguar XJ220" WIDTH=600>




Hyperlinks

Hyperlinks are what make the internet interconnected - without them we'll have a pretty sorry website.

Hyperlink tags take the form: <A HREF="target">link text</A> where "target" is the page you want to link to - either a URL or a page filename & path if the target is on the same server/pc; and link text is what you'll click on.

As we've still got our gallery page open, we'll add a hyperlink to that to allow us to get back to our first page. Add
<P><A HREF="index.htm"><B>Back<B></A>
just below the last IMG tag.

Save & refresh the page, then click on the link. If all is well, you'll be back at your "main" page.

Open the underlying text file for the page, then add a hyperlink to your gallery.
If you've been paying attention, you should be able to work out that the tag for this will be something like <A HREF="images.htm"><B>My Gallery<B></A>.

I put mine below the existing table, centred.
If you do this, you can now have literally seconds of fun jumping between the two pages.

So far, we've only linked between our pages - time to reach out, as it were.


While your "main" page is still open, add another hyperlink to a new page, links.htm, i.e.
<P><A HREF="links.htm"><B>My Links Page</B></A>
right under the existing link.

If you save & refresh, and then click on the link you'll get a 404/page not found error as there's no page of that name yet.

Make a copy of your gallery page, and rename it links.htm. Open it & the underlying text file, and change the heading from <H2>My Gallery</H2> to <H2>My Links Page</H2>

Next, delete the tags from <A NAME="360_modena"> </A> to <P><IMG SRC="xj220.jpg" ALT="Jaguar XJ220" WIDTH=600>, including those tags.


Links to other websites use the same <A HREF> tag as described earlier, but obviously you need the URL of the target site, e.g. a link to Pimprig.com would be
<A HREF="http://www.pcapex.com" TARGET=NEW>Pimprig.com</A>.

The http:// bit of the URL can theoretically be omitted, but I always put it in... Note also the TARGET=NEW attribute: this forces the target site to open in a new browser window - unless you're using PopUp Stopper.

Using what you've already learned, have a crack at a table full of links to other websites. This should get you started:
<P>
<TABLE>
<TR>
<TD WIDTH=200><A HREF="http://www.pcapex.com"><B><FONT SIZE=2>Pimprig.com</FONT></B></A></TD>
<TD WIDTH=200><FONT SIZE=2>Smack Ya Rig Up !</FONT></TD>
</TR>
<TR>
<TD><A HREF="http://www.cwru.edu/help/introHTML/toc.html"><B><FONT SIZE=2>HTML Reference</FONT></B></A></TD>
<TD><FONT SIZE=2>Useful bits of HTML code</FONT></TD>
</TR>
<TR>
<TD><A HREF="http://www.willcam.com/cmat/html/crossref.html"><B><FONT SIZE=2>Willcam's HTML Xref</FONT></B></A></TD>
<TD><FONT SIZE=2>More HTML tags</FONT></TD>
</TR>
</TABLE>


Something else you can do is use images as hyperlinks. To try this out, reopen you "main" (index.htm) page, and add a row to your table. I.e., amend the first row from
<TR>
<TD WIDTH=210><FONT SIZE=2><B>Car</B></FONT></TD>
<TD WIDTH=60 ALIGN=CENTER><FONT SIZE=2><B>BHP</B></FONT></TD>
<TD WIDTH=60 ALIGN=CENTER><FONT SIZE=2><B>0-60</B></FONT></TD>
<TD WIDTH=80 ALIGN=CENTER><FONT SIZE=2><B>Qtr Mile</B></FONT></TD>
</TR>

to

<TR>
<TD></TD>
<TD WIDTH=210><FONT SIZE=2><B>Car</B></FONT></TD>
<TD WIDTH=60 ALIGN=CENTER><FONT SIZE=2><B>BHP</B></FONT></TD>
<TD WIDTH=60 ALIGN=CENTER><FONT SIZE=2><B>0-60</B></FONT></TD>
<TD WIDTH=80 ALIGN=CENTER><FONT SIZE=2><B>Qtr Mile</B></FONT></TD>
</TR>

and so on with the other rows.

We could just add a suitable link to each row with tags similar to this:
<A HREF="images.htm"><IMG SRC="maclaren_f1.jpg" WIDTH=70></A>

but it's time to use those "bookmarks" we put in the gallery page earlier.
These allow you to jump straight to the relevant section of the document. Note the use of the hash/number symbol.

For example, to jump to the picture of the MacLaren (which had the bookmark "maclaren_f1") the tag will be:
<A HREF="images.htm#maclaren_f1"><IMG SRC="maclaren_f1.jpg" WIDTH=70></A>


The final element of hyperlinks I'll be covering here is the way you can use them to create an email to a specific email address, with a specific subject.

The tag takes the form:
<A HREF="mailto:(email address)?subject=(subject)">link text</A>
e.g.
<A HREF="mailto:joe.bloggs@madeupdomain.com?subject=Site Feedback">Click here to email me</A>




Reserved Characters

The final part of today's lesson concerns "reserved characters". These are character that you may want to display in your webpage, but would be interpreted as part of tag if you entered them directly in your text file (... or PRs forum). Examples of these are:

< should be entered as & l t ; but without the spaces;
> as & g t ;
& as & a m p ;
" as & q u o t;
space as & n b s p ;



Summary

If you've been playing along at home, your "site" now has some content, pictures & links. As before, I've attached the HTML text files as they should look so far.

In part four I'll be covering frames and forms.



Supporting Files (right click & select 'Save As'):

bg.gif
index.htm
images.htm
links.htm
360_modena.jpg
diablo_sv.jpg
gt1.jpg
maclaren_f1.jpg
r500.jpg
vantage.jpg
xj220.jpg

nice job there Jonny!

"With Jonny English's n00b html programming guide(tm), I was able to make a webpage! Thanks Jonny!" - Satisfied Customer