Introductory HTML, part 2

Jonny English · 26-October-03, 04:15 AM

As you'll know from part one, 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, including the <HTML>, <HEAD>, <TITLE> and <BODY> tags;
Text fonts, colours & sizes, e.g. text;
Text alignment, e.g. <ALIGN=RIGHT>text</ALIGN>, <CENTER>text</CENTER>;
Backgrounds, e.g. <BODY BGCOLOR=#0000FF>, <BODY BACKGROUND="bg.gif">;
Heading styles, e.g <H1>heading text</H1>;
Rulers, e.g. <HR SIZE=2 COLOR=#000000 WIDTH=100%>;
The new paragraph tag, ;
Text formatting, e.g. bold, italics, underlined.

Filenames

Before we go on, it's worth saying something about capitalisation (or case) in your filenames.
If you're used to Windows (& DOS), you'll know that MS operating systems don't recognise the concept of capitalisation: i.e. index.htm can be named or referred to as INDEX.HTM, index.HTM, iNdEx.htm, and so on with no ill effects. However, a lot of ISPs use UNIX on their servers.
Capitalisation is an issue in UNIX - INDEX.HTM, index.HTM and iNdEx.htm would be three different files. What this means is that if in your site you have a hyperlink to let's say Image.JPG, if the filename is actually image.jpg, the link won't work.

I try to stick to all lower case in my links & filenames, you also need to choose a system and stick to it.

More on Text Formatting

Time to put some content into our pages - how about some fast cars? (information nicked shamelessly from http://www.syclone.freeserve.co.uk/rivals_cars.htm btw)

Our Data:

My Favourite Fast Cars:

Car BHP 0-60 Qtr Mile
McLaren F1 627 3.2 11.1
Porsche 911 GT1 544 3.8 11.6
Jaguar XJ220 542 3.6 11.7
Caterham R500 230 3.4 11.9
Toyota Corrolla WRC 299 3.8 12.2
Ferrari 360 Modena F1 400 4.2 12.3
TVR Cerbera 4.5 420 4.1 12.4
Lamborghini Diablo SV 530 4.3 12.4
Aston Martin Vantage 600 600 4.3 12.6
Dodge Viper Venom 550 550 4.4 12.6

If you cut & paste this into your index.htm file between W00T! and </CENTER>
(you'll have to do some adjusting to the tabs), you see it looks ok. (Remember - to see your HTML tags you need to open your index.htm file in your browser & then right click & select 'View Source').

However, if you save & refresh (select 'Save' from the 'File' menu, then press F5 in your browser), you'll see that your tabs & line breaks have been ignored.

You can do a certain amount about this by using the  and   (line break) tags, e.g.

My Favourite Fast Cars:
Car BHP 0-60 Qtr Mile
 McLaren F1 627 3.2 11.1
 Porsche 911 GT1 544 3.8 11.6
and so on.

If you do this, you'll see that you now have separate rows, but no columns, which in this case make the information pretty useless.

One option is to use the <PRE> and </PRE> (preformatted) tags, e.g.:

<PRE>My Favourite Fast Cars:

Car BHP 0-60 Qtr Mile
McLaren F1 627 3.2 11.1
Porsche 911 GT1 544 3.8 11.6
</PRE>

Try this - you'll see that you have to do a lot of fiddling with the number of spaces to get it to line up, plus, you have no control over the font, colour, etc. Which makes it pretty poor really.

Lists

For creating lists of information, HTML has a couple of useful options.
First up is the unordered list. The tags for this are <UL> and </UL>. Each list item also needs an <LI> tag in front of it, so, continuing our example:

My Favourite Fast Cars:
<UL>
<LI>Car BHP 0-60 Qtr Mile
<LI>McLaren F1 627 3.2 11.1
<LI>Porsche 911 GT1 544 3.8 11.6
</UL>

Note the way the resulting page looks a bit scrappy due to the way the text is centred. Fix that by moving the </CENTER> tag to between W00T! and My Favourite Fast Cars:

It looks tidier, but we've still got the problem with the columns.

The second type of list is the ordered list, accomplished by using the <OL TYPE=1 START=1> and </OL> tags. As with unordered lists, each list item also needs an <LI> tag in front of it. Note the START attribute: as you have probably guessed, the number controls what number the list starts at.

Replace the <UL> and </UL> tags with <OL TYPE=1 START=1> and </OL> - you'll see that our header row for the information gets it's own number, and we've still got the problem with the columns ... the answer is ...

[B]Tables[B]

Tables are often the best way of controlling what appears where in a web page.

The basic tags are:
<TABLE> and </TABLE>, which define the beginning and end of the table;
<TR> and </TR>, which define the beginning and end of each row; and
<TD> and </TD>, which define each cell.

The <TABLE> and <TD> tags can all have various size and alignment attributes applied to them, as I'll explain in a moment.


<TABLE>
<TR>
<TD>Car</TD>
<TD>BHP</TD>
<TD>0-60</TD>
<TD>Qtr Mile</TD>
</TR>
<TR>
<TD>McLaren F1</TD>
<TD>627</TD>
<TD>3.2</TD>
<TD>11.1</TD>
</TR>
...
<TR>
<TD>Dodge Viper Venom 550</TD>
<TD>550</TD>
<TD>4.4</TD>
<TD>12.6</TD>
</TR>
<TABLE>

Have a go at doing that, including the missing rows. You should see that the information looks a lot clearer than better so far, but that the font within the table is the default size, rather than the smaller size we specified earlier in the HTML text. Don't ask me why the font is still Arial but the size is wrong, it just seems to work like that.
Other things you will notice if you're being critical, are that the columns need some spacing, and the alignment could be better.

To fix the first problem (text size), we need to add  tags nested within each <TD> pair (or cell). Taking an example row from our table, it should look like:

<TR>
<TD>Aston Martin Vantage 600</TD>
<TD>600</TD>
<TD>4.3</TD>
<TD>12.6</TD>
</TR>

While you're at it, add bold tags to the header row to make it more obvious, i.e.:

<TR>
<TD>Car</TD>
<TD>BHP</TD>
...

To fix the problem of the columns needing spacing, there are two ways to go.
The first is to add a CELLPADDING attribute to the opening <TABLE> tag, i.e.
<TABLE CELLPADDING=2>
where 2 is the number of pixels of padding around each cell.

If you different CELLPADDING values, you'll see that by the time you have a decent visual gap between the "Car" & "BHP" columns, the rows are just too far apart.

The other approach is to use a WIDTH attribute on the <TD> tags.
Taking the first row of our table, add WIDTH attributes so it looks like this:

<TR>
<TD WIDTH=210>Car</TD>
<TD WIDTH=60>BHP</TD>
<TD WIDTH=60>0-60</TD>
<TD WIDTH=60>Qtr Mile</TD>
</TR>

Note that it is not necessary to add the WIDTH attributes to the remaining rows.

Next, on to the alignment issue. I think the "BHP" "0-60" and "Qtr Mile" columns would look better if the all the cells were centered, so, to do this, add an ALIGN attribute to the <TD> tags for those columns rows. Unlike the WIDTH attribute, you will need to add ALIGN to each row where you want the alignment to be controlled.

Our first row will look like:

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

... and the remaining rows will look something like this:
<TR>
<TD>McLaren F1</TD>
<TD ALIGN=CENTER>627</TD>
<TD ALIGN=CENTER>3.2</TD>
<TD ALIGN=CENTER>11.1</TD>
</TR>

Note that alignment can be LEFT (the default), RIGHT, or CENTER, and that you can also control the vertical alignment with a VALIGN attribute, which can be TOP, MIDDLE or BOTTOM, e.g.
<TD VALIGN=MIDDLE>.

There is a lot more to learn about tables, but I think that's more than enough for the time being.

Summary

If you've been playing along at how, your "site" now has some content ... but not much.
As with part one, I've attached the HTML text file as it should look so far, just in case I've confused you.

In part three I'll be covering images & hyperlinks.

Supporting Files (right click & select 'Save As'):
bg.gif
index.htm

26-October-03, 04:15 AM		#1 (permalink)
Jonny English Etiquette & English Gentleman	Introductory HTML, part 2 As you'll know from part one, 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, including the <HTML>, <HEAD>, <TITLE> and <BODY> tags; Text fonts, colours & sizes, e.g. <FONT FACE=ARIAL COLOR=#FFFFFF SIZE=2>text</FONT>; Text alignment, e.g. <ALIGN=RIGHT>text</ALIGN>, <CENTER>text</CENTER>; Backgrounds, e.g. <BODY BGCOLOR=#0000FF>, <BODY BACKGROUND="bg.gif">; Heading styles, e.g <H1>heading text</H1>; Rulers, e.g. <HR SIZE=2 COLOR=#000000 WIDTH=100%>; The new paragraph tag, <P>; Text formatting, e.g. <B>bold</B>, <I>italics</I>, <U>underlined</U>. Filenames Before we go on, it's worth saying something about capitalisation (or case) in your filenames. If you're used to Windows (& DOS), you'll know that MS operating systems don't recognise the concept of capitalisation: i.e. index.htm can be named or referred to as INDEX.HTM, index.HTM, iNdEx.htm, and so on with no ill effects. However, a lot of ISPs use UNIX on their servers. Capitalisation is an issue in UNIX - INDEX.HTM, index.HTM and iNdEx.htm would be three different files. What this means is that if in your site you have a hyperlink to let's say Image.JPG, if the filename is actually image.jpg, the link won't work. I try to stick to all lower case in my links & filenames, you also need to choose a system and stick to it. More on Text Formatting Time to put some content into our pages - how about some fast cars? (information nicked shamelessly from http://www.syclone.freeserve.co.uk/rivals_cars.htm btw) Our Data: My Favourite Fast Cars: Car BHP 0-60 Qtr Mile McLaren F1 627 3.2 11.1 Porsche 911 GT1 544 3.8 11.6 Jaguar XJ220 542 3.6 11.7 Caterham R500 230 3.4 11.9 Toyota Corrolla WRC 299 3.8 12.2 Ferrari 360 Modena F1 400 4.2 12.3 TVR Cerbera 4.5 420 4.1 12.4 Lamborghini Diablo SV 530 4.3 12.4 Aston Martin Vantage 600 600 4.3 12.6 Dodge Viper Venom 550 550 4.4 12.6 If you cut & paste this into your index.htm file between <P>W00T! and </CENTER> (you'll have to do some adjusting to the tabs), you see it looks ok. (Remember - to see your HTML tags you need to open your index.htm file in your browser & then right click & select 'View Source'). However, if you save & refresh (select 'Save' from the 'File' menu, then press F5 in your browser), you'll see that your tabs & line breaks have been ignored. You can do a certain amount about this by using the <P> and <BR> (line break) tags, e.g. <P>My Favourite Fast Cars: <P>Car BHP 0-60 Qtr Mile <BR>McLaren F1 627 3.2 11.1 <BR>Porsche 911 GT1 544 3.8 11.6 and so on. If you do this, you'll see that you now have separate rows, but no columns, which in this case make the information pretty useless. One option is to use the <PRE> and </PRE> (preformatted) tags, e.g.: <PRE>My Favourite Fast Cars: Car BHP 0-60 Qtr Mile McLaren F1 627 3.2 11.1 Porsche 911 GT1 544 3.8 11.6 </PRE> Try this - you'll see that you have to do a lot of fiddling with the number of spaces to get it to line up, plus, you have no control over the font, colour, etc. Which makes it pretty poor really. Lists For creating lists of information, HTML has a couple of useful options. First up is the unordered list. The tags for this are <UL> and </UL>. Each list item also needs an <LI> tag in front of it, so, continuing our example: <B>My Favourite Fast Cars:</B> <UL> <LI>Car BHP 0-60 Qtr Mile <LI>McLaren F1 627 3.2 11.1 <LI>Porsche 911 GT1 544 3.8 11.6 </UL> Note the way the resulting page looks a bit scrappy due to the way the text is centred. Fix that by moving the </CENTER> tag to between <P>W00T! and <P><B>My Favourite Fast Cars:</B> It looks tidier, but we've still got the problem with the columns. The second type of list is the ordered list, accomplished by using the <OL TYPE=1 START=1> and </OL> tags. As with unordered lists, each list item also needs an <LI> tag in front of it. Note the START attribute: as you have probably guessed, the number controls what number the list starts at. Replace the <UL> and </UL> tags with <OL TYPE=1 START=1> and </OL> - you'll see that our header row for the information gets it's own number, and we've still got the problem with the columns ... the answer is ... [B]Tables[B] Tables are often the best way of controlling what appears where in a web page. The basic tags are: <TABLE> and </TABLE>, which define the beginning and end of the table; <TR> and </TR>, which define the beginning and end of each row; and <TD> and </TD>, which define each cell. The <TABLE> and <TD> tags can all have various size and alignment attributes applied to them, as I'll explain in a moment. <P> <TABLE> <TR> <TD>Car</TD> <TD>BHP</TD> <TD>0-60</TD> <TD>Qtr Mile</TD> </TR> <TR> <TD>McLaren F1</TD> <TD>627</TD> <TD>3.2</TD> <TD>11.1</TD> </TR> ... <TR> <TD>Dodge Viper Venom 550</TD> <TD>550</TD> <TD>4.4</TD> <TD>12.6</TD> </TR> <TABLE> Have a go at doing that, including the missing rows. You should see that the information looks a lot clearer than better so far, but that the font within the table is the default size, rather than the smaller size we specified earlier in the HTML text. Don't ask me why the font is still Arial but the size is wrong, it just seems to work like that. Other things you will notice if you're being critical, are that the columns need some spacing, and the alignment could be better. To fix the first problem (text size), we need to add <FONT> tags nested within each <TD> pair (or cell). Taking an example row from our table, it should look like: <TR> <TD><FONT SIZE=2>Aston Martin Vantage 600</FONT></TD> <TD><FONT SIZE=2>600</FONT></TD> <TD><FONT SIZE=2>4.3</FONT></TD> <TD><FONT SIZE=2>12.6</FONT></TD> </TR> While you're at it, add bold tags to the header row to make it more obvious, i.e.: <TR> <TD><FONT SIZE=2><B>Car</B></FONT></TD> <TD><FONT SIZE=2><B>BHP</B></FONT></TD> ... To fix the problem of the columns needing spacing, there are two ways to go. The first is to add a CELLPADDING attribute to the opening <TABLE> tag, i.e. <TABLE CELLPADDING=2> where 2 is the number of pixels of padding around each cell. If you different CELLPADDING values, you'll see that by the time you have a decent visual gap between the "Car" & "BHP" columns, the rows are just too far apart. The other approach is to use a WIDTH attribute on the <TD> tags. Taking the first row of our table, add WIDTH attributes so it looks like this: <TR> <TD WIDTH=210>Car</TD> <TD WIDTH=60>BHP</TD> <TD WIDTH=60>0-60</TD> <TD WIDTH=60>Qtr Mile</TD> </TR> Note that it is not necessary to add the WIDTH attributes to the remaining rows. Next, on to the alignment issue. I think the "BHP" "0-60" and "Qtr Mile" columns would look better if the all the cells were centered, so, to do this, add an ALIGN attribute to the <TD> tags for those columns rows. Unlike the WIDTH attribute, you will need to add ALIGN to each row where you want the alignment to be controlled. Our first row will look like: <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> ... and the remaining rows will look something like this: <TR> <TD><FONT SIZE=2>McLaren F1</FONT></TD> <TD ALIGN=CENTER><FONT SIZE=2>627</FONT></TD> <TD ALIGN=CENTER><FONT SIZE=2>3.2</FONT></TD> <TD ALIGN=CENTER><FONT SIZE=2>11.1</FONT></TD> </TR> Note that alignment can be LEFT (the default), RIGHT, or CENTER, and that you can also control the vertical alignment with a VALIGN attribute, which can be TOP, MIDDLE or BOTTOM, e.g. <TD VALIGN=MIDDLE>. There is a lot more to learn about tables, but I think that's more than enough for the time being. Summary If you've been playing along at how, your "site" now has some content ... but not much. As with part one, I've attached the HTML text file as it should look so far, just in case I've confused you. In part three I'll be covering images & hyperlinks. Supporting Files (right click & select 'Save As'): bg.gif index.htm

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
anyone know HTML?	Peters_Princess	Anything Goes	5	23-November-04 12:13 AM
Introductory HTML - last one	Jonny English	Daily Disturbance	0	08-November-03 05:57 AM
Introductory HTML, part 4	Jonny English	Daily Disturbance	0	04-November-03 04:50 AM
Introductory HTML pt 3	Jonny English	Daily Disturbance	1	02-November-03 06:52 PM
Introductory HTML, part 1	Jonny English	Daily Disturbance	5	19-October-03 10:33 PM