Learning the Basics of HTML

This sentence is bold because of the bold (B, /B) tags around it

The paragraph below is in italic because of the (I, /I) tags around it

Note that by using underline tags (U, /U), we can underline the second line of this "joke".

How many Bill Gates' does it take to fit a light bulb?
Only one, but it takes 200,000 of them to make it work!

You can combine these tags as you wish.

You can make text start after a blank line by wrapping it in a paragraph (P, /P) tags.
These cause that text to be a self contained entity, with a blank line before and after it.

Please note that when we write (B, /B) to illistrate bold tags, we mean that these letters should
be used surrounded by <> these brackets, to identify the information between as an HTML tag.
If you open a web page you have created in Internet Explorer, and you see these brackets on the page
you know that there is a mistake in the code just before the brackets appear!

Note that the browser ignors the white space that you create in NotePad.
It only responds to tags to create punctution, new lines etc. There is one
exception to this... when you use the PRE (pre-formatted) tag. See the INT4BIZ
website for guidance on how this works.

If we want to we can draw a horizontal line accross the oage using the HR tag.
HR atands for Horizontal Rule. Amazingly, there is no vertical rule equivalent.
So to create a vertical line, create a block image in the colour you want the line to be,
then size the image to be the height and width you need for your vertical line.

You have probably noticed how tedious it is to keep having to use the break (BR) tag to jump
to the next line. There is a better way of bounding text - a simple Table.

Below is a one row, one column table, solely aimed at bounding text in a paragraph to avoid
having to use multiple break tags. In seminar 3, we take the use of Tables a lot further
so pay attention to the construction of this, the simplest Table - see below.

This text has been bounded by a single row, single column table. Here, we have set the table to be no wider than 50% of the width of the browser window, even when we shrink the window size - the table is resized accordingly. Note also that despite the fact that you have typed all the text on one line, the table causes it to wrap repeatedly to the next line when it reaches the width of the table. You could set the table to be a fixed width of so many pixels. You could try replacing WIDTH=50% WITH width="400" (When you specify a fixed width, the figure is pixels, i.e.dot on the screen. So 400 is effectively 400 dots!)

You can justify the text in a table if you style the text block. More of that in Seminar 04 - CSS: Part 1.

Okay, so I can create a basic web page, but it is a bit boring... can't I spice it up a bit?
And what about clicking on links to bring up other pages on the screen - how do you do that?

Firstly, you should know that if you click a hyperlink and you get a page error, and you want to
go back to teh page you were on before you clicked that link, you should use the browser's "Back"
button, which usually has a left facing green arrow next to it. (There is also a right facing foward
arrow you can use if you want to load a page again that you just looked at having gone backwards).

Please click here to see our range of images.

Thats because we haven't created a page called "images.htm", and Internet Explorer
doesn't know what to do! In the next oart of the exercise, you will create a file
called "about_an_image_gallery.htm". After you have created it, click th elink
bvelow to visit the Image Gallery. This will contain other links to view new images.

Please click here to learn more about creating a simple image gallery.

The last thing to learn from this page is that it makes it difficult to read the page
if it is bitty, too long (so that you ahve to scroll down a lot), and not formatted. We
can do something about that by placing our content on the page in blocks. We do this
using Cascading Style Sheets (CSS), which we will look at in Seminars 04 and 05.