You can put pictures in.- Or even other lists!
- Link to structure of an HTML document.
- Link to nice text.
- Link to links.
How to make a simple HTML page easily.
Structure of an HTML document as far as I can understand.
Making different sections of text different colours, sizes, etc.
Making links to other web pages, or to different places in the same page.
Line breaks, paragraph breaks and horizontal lines.
How to make lists of information with HTML.
How to make tables with HTML.
How to put nice pictures in.
If at any time you want to look at the HTML of a web page, if you're using Netscape, click on the menu "View" then on "Document Source". I'm not sure how to do this on Internet Explorer.
Making a web page is easy, as long as you don't want to do anything clever. In this short section I'll tell you how to do normal writing, links, pictures, and perhaps a few other things to help get you started. I'll repeat most of this in the other sections, but this bit puts all of the most important things together.
<HTML>
When you've finished the text, then put:
You can try making an HTML page like this, and you will see that it works. But it looks a bit boring.
<H1>Giles' Page</H1>
This would look like this:
It would probably be black writing on a grey background. It is possible to change this (see the next section
<CENTER><H1>Giles' Page</H1></CENTER>
The bit between the <CENTER> and the </CENTER> will be centred. If you forget to put the </CENTER> in, then the whole of the rest of the page will be centred. This might not seem too much of a problem, but supposing you left out </H1>! I've sometimes made mistakes like this myself, usually by putting <H1> instead of </H1>.
You can also make text look bold, italic or underlined. This is how you do bold, italic and underlined text:
<B>Bold text</B>
The reason why the Internet is so wonderful is that any page can have links to any other page. These links usually appear as blue underlined writing. When you click on this writing, you should arrive at another page.
<A HREF="Put the URL code in here. It usually starts http://www...">Put the text which you want to be blue and clickable here.</A>
It is as important as ever to put the </A> at the end, or if you click anywhere on your page it will take you somewhere else!
What about pictures? We surely want some of them. They're easy, but you have to have drawn them or scanned them in already. Pictures on the Net are usually either .gif or .jpg I'm not sure if anything else works.
<IMG SRC="filename.xxx">
This only works if the picture is in the same directory as the page. This means that if you have an index page like http://www.gwydir.demon.co.uk/giles/ and it wants the picture http://www.gwydir.demon.co.uk/giles/boring.gif, it's easy, but not if the picture is somewhere else.
The structure of HTML documents (my ones, anyway) goes like this:
<HTML>
There are many things you can do to text easily using HTML. Here are some:
Size
These are used for titles. The most important title would be H1 (or H2 if you find H1 too big.) Then if you want a sub-heading, you might make it H2 or H3. The way you make a heading for your page is like this:
You can also do subscripts and superscripts, which means this:
I've put this under size because I think it makes the letters (or numbers in this case) slightly smaller. The HTML for these two are:
Styles
You can make writing bold italic, underlined, and any combination using HTML. I've made a list of these, with the styles in the same row being ones that I can't tell the difference between.
A Simple Page
Web pages usually look something like this:
<HEAD><TITLE>Put the title of the page in here. It will appear at the top of your browser's window.</TITLE></HEAD>
<BODY>
This is where most of your page will be. Any text you put here will end up on your page. However, if you want a new line, just pressing ENTER won't work. You have to write <BR>, which will put a new line in. If you want two of these (like at the start of a new paragraph, you can use <P> which will make two new lines, like this:
</BODY>
</HTML>
There are several ways to make it look better. Firstly, putting a title in. This appears in large writing, at the top of your page, and must not be confused with <TITLE> which goes outside the page altogether. The way your do a title is you write <H1> then the text you want in large writing, then </H!>. So if your title was "Giles's Page" then you would write:Giles' Page
for how this is done.)
Now, you probably want it in the middle of the screen, not on the left. This is quite simple.
<I>Italic text</I>
<U>Underlined text</U>
To make a link, you have to type this in:
This is how you put a picture in:
If the picture is somewhere else, you have to type in the whole address.
Structure
<HEAD><TITLE>[Text describing the document, to go at the top of your browser window. Also used for bookmarks.]</TITLE></HEAD>
<BODY [BACKGROUND="filename.xxx"] [BGCOLOR="#RRGGBB"] [TEXT="#RRGGBB"] [LINK="#RRGGBB"] [VLINK="#RRGGBB"] [ALINK="#RRGGBB"]>
(The main part of your page. This will be by far the largest part, also the most interesting. All the pictures and nice fonts and colours etc. go in here as well as all the text that you want to appear on your page.
BACKGROUND is a patterned background to your document. You have to have another file, like a gif, which you can make the background. Remember to make the background and text a completely diffrent colour, so you can read the text.
You do not have to have a patterned background. You can have a solid colour. This colour appears as a background if you have not mentioned BACKGROUND or if your browser cannot find the file. You define the background colour by using BGCOLOR. The value of RRGGBB is the amount of red in hexadecimal, then the amount of green, then the amount of blue. The maximum is FF - 255. You must put zeros at the front.
TEXT defines the default text colour, in the same way as the background colour. You can change little bits half way through the document, but make TEXT the colour you use the most.
LINK and VLINK are the colours of the links from your page. LINKs change to VLINKs if the person has already visited the other end of the link. ALINK is the colour the text turns when you are clicking on a link. This is not really important, as you can usually only see this colour for a fraction of a second.
All of these are optional. If you choose not to define them, then the user will see his or her default colours. These might be something horrible, so it is best to define them.)
</BODY>
</HTML>
Nice Text
H1
H2
H3
H4
H5
H6
Normal text
<H1>Put title in here. Change the H1 to H2 or H3 or H4...</H1>
The </H1> means "Stop being H1 any more". The / symbol is used an awful lot in HTML to tell your browser to stop doing something to writing.
Subscript: H2SO4
Superscript: H2=X2+Y2
Subscript: H<SUB>2</SUB>SO<SUB>4</SUB>
Superscript: H<SUP>2</SUP>=X<SUP>2</SUP>+Y<SUP>2</SUP>
| <I> Italic | <EM> Emphasized |
| <B> Bold | <STRONG> Strongly emphasized |
| <U> Underlined | |
| <TT> Teletype | <CODE><SAMP><KBD>I don't know what these three are for. |
Colours
You can make sections of writing different colours, like this. This works in much the same way as all the other text effects I've mentioned, and the colour is defined in the same way as I described in structure. Here is how you do colours:
<FONT COLOR="#RRGGBB">Put the coloured text in here.</FONT>
Here is a table showing 27 of the possible colours. You can choose between 16,777,216 possible colours, but I don't have time to show you all of them.
| #000000 | #000080 | #0000FF |
| #008000 | #008080 | #0080FF |
| #00FF00 | #00FF80 | #00FFFF |
| #800000 | #800080 | #8000FF |
| #808000 | #808080 | #8080FF |
| #80FF00 | #80FF80 | #80FFFF |
| #FF0000 | #FF0080 | #FF00FF |
| #FF8000 | #FF8080 | #FF80FF |
| #FFFF00 | #FFFF80 | #FFFFFF |
You can use several text effects at once. For example:
I hope your web browser can cope with this.
<A (HREF="Web address")>Text or pictures that you can click on to go somewhere else</A>
OR <A NAME="X"> I'll explain about this later.
The first example will make the section of text or pictures between the <A...> and the </A> a different colour, underlined and clickable on. There are three main things this can do:
1. Go to another web page. This can either start "http://www..." which will lead to a completely different page, or it can just be the name of a file. This means you can make a link from an index to a page below, without having to tyoe the whole address in.
2. E-mails. You can make an e-mail link to yourself or indeed anyone else using this:
<A HREF="mailto:something@something">Text in here</A>
3. Links to half way through a page. This can either be the same page or a completely different page. There are two parts to this. The first is the link.
<A HREF="#Somewhere">Link text.</A>
Or, if the link is to a place in another page:
<A HREF="http://www.something.co.uk/Something/Somethingelse.html#Somewhere">Link text.</A>
Then, somewhere else, there is the place where the link ends up.
<A NAME="Somewhere">
Line break: <BR>
Paragraph break: <P>
Horizontal line: <HR [ALIGN=(LEFT | CENTER | RIGHT)] [SIZE=npixels] [WIDTH=(npixels | "n%")] [NOSHADE]>
The line break is like pressing ENTER once, and the paragraph break is like pressing it twice. The horizontal line draws a line like this:
This is how it was written in HTML:
<HR ALIGN=CENTER SIZE=5 WIDTH="10%">
The ALIGN=CENTER bit means that it appears in the middle of the page. You can also choose to have ALIGN=LEFT or ALIGN=RIGHT. SIZE=5 means that it is two pixels wide. WIDTH="19%" means that it covers ten percent of the entire width. This is quite short. Usually it is something like 80% or even 100%. The horizontal lines that I've put between the sections of this page are the same as my example but with WIDTH="75%".
This is what a horizontal line looks like if you put NOSHADE in somewhere:
This looks more boring but you may choose to use it.
Unfortunately, you cannot change things about these lines such as their colour. You will have to be happy with grey.
Here is a list:
Anyway, you get the idea. This is a normal list. The way lists work is rather more complicated than things like nice-looking text. This is what the HTML looks like for a list:
<DL>
<DT>A title. The /DT at the end is not necessary.</DT>
<DD>Some item on the list. Again, the /DD is not necessary.</DD>
<DD>Another item on the list.</DD>
<DD>You can do as many of these as you want.</DD>
<DT>The next title.</DT>
<DD>Another item, this time belonging to the second list.</DD>
<DT>Another title (which of course you don't have to have. The list could have ended ages ago.)</DT>
<DD>Anyway, I think you have the idea.</DD>
</DL>
You can make lists as long or short as you like. You can put links, pictures, text styles, even other lists into a list.
You can put pictures in.
Right, so there's a list, but what about if we want bullet points, like:
<UL TYPE={DISC | CIRCLE | SQUARE}>
<LI>An item.</LI>
<LI>Another item.</LI>
<LI>etc.</LI>
</UL>
UL stands for Unordered List. We will learn what an Ordered List is later in this section. We can see what disc, circle and square mean:
As far as I know, there are not any other shapes available.
What about if you want a list numbered 1,2,3 or A,B,C or whatever? This calls for an Ordered List, which means that the items are in some sort of order.
Here is an example:
These lists can be letters, numbers, or even Roman numerals. To choose which one you want, put 1 or a or A or i or I after TYPE= in the following HTML code:
<OL TYPE={1 | a | A | i | I}>
<LI>Blah</LI>
<LI>Blah</LI>
<LI>Blah</LI>
</OL>
It should be fairly obvious what the different types mean, for example 1 is numbers, A is capital letters, a is lower case letters, I is capital Roman numerals, etc.
The table statement is like this:
<TABLE [BORDER[=npixels]] [CELLSPACING=npixels] [CELLPADDING=npixels]>
[<CAPTION>The title of the table, which appears outside the table altogether.</CAPTION>]
<TR>(<TD [COLSPAN=ncolumns] [ROWSPAN=ncolumns] [ALIGN=(LEFT | CENTER | RIGHT)] [VALIGN=(TOP | MIDDLE | BOTTOM)]> | <TH with the same junk>)
Here's the text to go into the first box. It can contain pictures, links, horizontal lines, even other tables.</TD>
<TD>Another box on the same row. Like with the lists, the /TD on the end is not necessary but it is polite.</TD></TR>
<TR><TD>Yet another box, but this time on another row. It's a bit complicated if on the previous row ROWSPAN was set to more than one. I'll explain about that later.</TD></TR>
</TABLE>
If all your boxes are the same size, constructing a table only requires patience. If they vary in width and height, it requires an awful lot of patience.
Here is a simple table with all the boxes 1 column wide and 1 row high, with the HTML written below it.
| Country | Language | Currency |
|---|---|---|
| U.S.A. | English | American dollars |
| England | English | £ Sterling |
| Germany | German | German Marks |
<TABLE BORDER>
<CAPTION>Relatively simple table.</CAPTION>
<TR><TH>Country</TH><TH>Language</TH><TH>Currency</TH></TR>
<TR><TD>U.S.A.</TD><TD>English</TD><TD>American dollars</TD></TR>
<TR><TD>England</TD><TD>English</TD><TD>£ Sterling</TD></TR>
<TR><TD>Germany</TD><TD>German</TD><TD>German Marks</TD></TR>
</TABLE>
Now, supposing I pretend not to know what the language of Germany is, or for any other reason I want an area of the table without anything in it. If I remove the <TD>German</TD> completely, then German Marks would appear in the wrong box. So what I would do is leave the <TD> and the </TD> but remove "German". This would make the table look like this:
| Country | Language | Currency |
|---|---|---|
| U.S.A. | English | American dollars |
| England | English | £ Sterling |
| Germany | German Marks |
Notice that the blank area does not even have a shaded edge around it. This happens if you have a blank box, or if you have rows containing a different number of columns, like this:
| First row: one column defined. | |
| Second row: | two columns defined. |
Now, what if you want a box with a border around it but nothing inside? I tried it with a SPACEBAR character inside and it still didn't work, but it did with
inside. So an empty box would be:
<TD><BR></TD>
Which looks like this:
One box does not means one column, or even one row. You can have a table that looks like this:
On a more serious note, you might want to have a table with some boxes covering two or more rows or columns.
I'll try to explain in a step-by-step way how to construct the complicated table above.
First, we start the table.
<TABLE BORDER=3 CELLSPACING=5 CELLPADDING=5 >
<CAPTION>Silly sized boxes.</CAPTION>
I'll explain what BORDER and all the rest means later, as it is difficult to explain two things at once.
Right, so we look at the first box on the first row. It is one row high and three columns wide.
<TR><TD COLSPAN=3 ROWSPAN=1><BR></TD>
The next one, if we count carefully, is only one column wide but four rows high.
<TD COLSPAN=1 ROWSPAN=4><BR></TD>
And the last one on the row is one column wide and one row high.
<TD COLSPAN=1 ROWSPAN=1><BR></TD>
Or just <TR><TD><BR></TD>
would do.
We'll make a table just with these and see how it looks.
You may be wondering why they're all the same height. This is because your browser makes the boxes as small as it can. When we put the other boxes in, it should become clearer.
We now look along the second row until we come to a box we haven't yet defined. In this case it is on the very left, but in some tables it is not. This box is 1 coumns by 2 rows.
<TR><TD COLSPAN=1 ROWSPAN=2><BR></TD>
The next one is:
<TD COLSPAN=2 ROWSPAN=1><BR></TD>
We don't define the next box, because it has already been defined on the previous line. We jump to the end.
<TD COLSPAN=1 ROWSPAN=3><BR></TD>
We'll construct our table again and see what happens...
It still doesn't look like our target table but we're getting somewhere. You'll just have to trust me that it ends up right. On the third row the first box is not the first but the second. It's just a 1 by 1 and the one after it is a 1 by 2. After that there are no more boxes that haven't already been defined.
<TR><TD COLSPAN=1 ROWSPAN=1><BR></TD>
<TD COLSPAN=1 ROWSPAN=2><BR></TD>
There is now only one box left: the bottom-left box on the fourth row. You will have to scroll up quite a bit to see my original table now. The last box is two columns wide and one one row high. <TD COLSPAN=2 ROWSPAN=1><BR></TD>
So there's our original table again!
If you want to make a complicated table of your own, it is probably a good idea to draw it out on squared paper first, then work out the HTML using my method.
Take a look at these three tables.
| A | |
|---|---|
| 1 | 2 |
| B | |
|---|---|
| 1 | 2 |
| C | |
|---|---|
| 1 | 2 |
Now, you may be wondering what BORDER=npixels, CELLSPACING and CELLPADDING mean. With BORDER, it is not necessary to put a number. If you do not, Netscape reads it as "You want a table, and you want a shaded border around it." If, however, you have BORDER=npixels, then a 3D-looking area around your table will appear (see Table A.) It is an exaggerated example, with BORDER=100, and you would usually want about 5 or none at all. BORDER is measured in pixels.
CELLSPACING is also measured in pixels. Look at table B. You will see that the area between cells is very large. In a normal table, this area is almost zero, resulting in thin lines between cells. I would recommend having this space quite small, but you can decide what to make it yourself.
CELLPADDING is a gap between whatever's inside a cell and the edge of the cell. In fact, CELLPADDING might be more than what you set for some cells, if cells have different amounts of stuff inside them. You can guarantee, however, that the space inside each cell will be what you set or more.
How about some nice pictures to brighten up your page? Easy! Here is the HTML for a picture:
<IMG SRC="filename.xxx" [ALT="Some description of the picture."] [WIDTH=npixels HEIGHT=npixels] [ALIGN=LEFT | CENTER | RIGHT] [BORDER=npixels] [HSPACE=npixels VSPACE=npixels]>
There's quie a lot there to explain. Firstly, SRC="filename.xxx". SRC can be just a filename or a whole address. This is where the picture lives.
This is fine, but pictures are often slow to download, especially large ones. What you don't want is your browser not to do anything while the picture's loading. What can it do? Well, it can start laying out the text but it can't do this if it doesn't know how big the picture is. So if you define WIDTH and HEIGHT it does. If you make WIDTH and HEIGHT something other than the real width and height of the picture, it will resize the picture to fit in the area.
You can also define ALT. If you say ALT="Hello" then the picture area will say "Hello" while you're waiting.
If you say ALIGN=LEFT or RIGHT, then the picture will appear either on the far left or the far right. Any text will then flow round the edge. You can have a picture on both the left and the right, as I have here.
If you define BORDER, then a border will appear around the edge of the picture, in the normal text colour (I think). You can also say BORDER=0 if the picture is part of a link. For example:
<A...><IMG SRC="filename.xxx" BORDER=0></A>
will draw a picture that you can click on to go somewhere, but it does not have its usual border around it.
HSPACE and VSPACE just allow a bit of space around the picture.