HTML

Home

Introduction to HTML

HTML = HyperText Mark-up Language. It works on PCs and Macs. It is not a computer language.

To create a web page you need:

A computer
A browser (e.g. Netscape Navigator, Microsoft Internet Explorer) (text only browsers include Lynx, Cello)
A word processor (Window's "Notepad" or "WordPad" or the MAC "Simple Text" all create text files, for example).

HTML assistants such as "HTML Assistant", "HTMLPad", HoTMeTal and Hot Dog are useful but not essential.

To publish a web page you need:

An ISP to publish your web pages
an FTP program. (File Transfer Protocol) to load the pages.

There are programs that will help you, but they are not necessary.

Once you've written an HTML text document using a word processor offline, save it (with word processors such as Word or WordPerfect you need to save as text every time, or the margins and fonts etc. will interfere) with a suffix of either ".htm" (Windows 3.x) or ".html" (Mac and Windows 95/98).

You open it with a browser, which converts your text to a web page. It treats ".htm" and ".html" files the same.

Look at the HTML code behind other peoples' web pages to learn HTML and to get ideas. When the page is open, select <view> <document source>. In AOL, place your pointer on the page (not on an image), and click the right mouse button. On MACs, click and hold, and select viewing the source from the pop-up menu.

Flags or Tags

HTML reads text top to bottom, left to right. Flags are commands used to make sections of text larger, smaller, bold or underlined. You generally put one (e.g. a bold flag) at the beginning of such a section, and one at the end.

Each flag begins with '<' (a less-than sign) and ends with '>' (a greater-than sign).

For example, the italic flag is 'I', and to make 'Sue' italic, you write:

Sue

The italic flag  makes the following text (in this case, 'Sue') italic, and the end italic flag  ends the italic text. The text following 'Sue' will not be in italics.

Similarly,  is the bold flag, and  is the end bold flag.

<TT> is the Typewriter, and </TT> the typewriter end flag.

The flags do not show on your web page unless you have made a mistake, in which case you have a good idea whereabouts the error is.

Each flag can be in upper or lower case. Upper case is easier to spot.

Flags are optional - unflagged text will look ordinary.

You can combine flags, for instance Bold and Italic gives you Bold and Italic. However, they should be in LIFO order - last in, first out.

A flag does only one thing. To place two effects on one item, use two different sets of flags.

End flags are always the same as the start flags except they have the slash '/'. Not all flags have a corresponding end flag. Flags which do not have a corresponding end flag include:

<HR> (Horizontal rule) draws a line across the page.

  (Break) resumes the text on the next line (carriage return).

 (Paragraph) resumes the text on the next line but one.

Writing an HTML page

Start with <HTML>, which denotes that this is an HTML document.

Follow with <TITLE> </TITLE>, and include a title. This title appears in the title bar at the top.

End every page with </HTML>, which denotes the end of HTML.

MANIPULATING TEXT

Heading commands

Most browsers recognise six heading styles, with <H1> </H1> being the largest, and <H6> the smallest. They enbolden the text. They include a built in  effect. Browsers of version 3.0 and above are supposed to recognise <H7> and <H8>, but my IE 4.0 does not seem to do so.

Font commands

 

One of the three attributes a font can have is size. There are twelve different font size commands. The largest is +6, then +5, +4, +3, +2, +1, -1, -2, -3, -4, -5, and -6 (the smallest). For example:

Size 3

The second attribute that a font can have is COLOR.

The second attribute that a font can have is FACE.

Attributes are always enclosed in quotes.

Centring Text

To centre text, use <CENTER> and </CENTER>.

Right justifying

Set the text up as a paragraph, and set the attribute of the paragraph to right as follows:

Right Justified

Because there is an attribute,  is necessary.

LINKING PAGES

A Hypertext link is used to create links to other web pages. The format is:

<A HREF="http://www.site.com">Click here for </A>

where:

<A> is the anchor flag
HREF is the Hypertext REFerence - where the link is to go
http://www.site.com is the full address of the link, preceded by '=' and surrounded by quotes

because it is an attribute of the anchor flag.

Click here for is the text that will appear on your page. It should denote the link. It will

appear in a special colour denoting links.

</A> is the end flag

You can also create a link to a different part of the same page by using the NAME attribute. For instance, if you put at the top of the body of your page, you can jump to it from any part of the page by inserting <A HREF="#top"></A>. When users click on the link, they will be taken to the top of the page. Name tags can be useful on long pages for jumping to different sections.

Links people can click to email you

This is done with the mailto: command, which is the same format as the hypertext link above:

<A HREF="Mailto:me@www.site.com">Click here to email me</A>

Note there is no space between mailto: and your email address.

IMAGES

Pictures are called images, graphics, or icons.

Putting an image on the page

The format is: <IMG SRC="picture.gif"> where:

IMG stands for "image", so the browser knows to expect one.
SRC stands for "source" - an attribute specifying where the image is.
picture.gif stands for the name of your image file, and where it is, if it is not where the html is.

The image will appear where you place the IMG command.

It is advisable to store all your images in the same place, with the page they will appear on. Otherwise you will have to specify their directories and sub-directories to the SRC attribute as well as the name.

Image formats

.gif Graphics Interchange Format. Invented by CompuServe. Consists of coloured dots.

Compressed on creation.

.jpg or .jpeg Joint Photographic Equipment Group - who invented it.

Compressed on storage, decompressed for use.

.bmp Bitmap. Only Internet Explorer can display it, and it takes up a lot of space.

Not recommended.

There are lots of free images on the web, but check it's ok before taking one to use.

Activating an image

To allow people to click on an image instead of text to follow a link, replace the wording by an image:

<A HREF="http:// http://www.site.com "><IMG SRC="picture.gif"></A>

A border will appear around an activated image if the moused is placed over it, but not clicked. If you want to change this, use the BORDER attribute. To remove the border, use <IMG BORDER = "0" SRC="picture.gif">, to enlarge it use a larger number such as <IMG BORDER = "50" SRC="picture.gif">.

Manipulating images

To place an image in the centre, use <CENTER> and </CENTER>

To place an image on the right, use an ALIGN attribute:

<IMG ALIGN="right" SRC="picture.gif">

To align an image with text, use an ALIGN attribute as follows:

<IMG ALIGN="top" SRC="picture.gif"> text

<IMG ALIGN="middle" SRC="picture.gif"> text

<IMG ALIGN="bottom" SRC="picture.gif"> text

To have only one line of text to come out of the middle of the image, and the image aligned to the right, set the text coming out of the middle using the ALIGN="middle" attribute in the IMG flag. Then set the image and it's text to the right by surrounding the two items with the  and  commands. This only seems to work if the width of the text + image is less than the width of the page. SOLUTION?

Changing the size of an image.

Images on a computer are made up of tiny coloured dots called pixels (picture elements), and this is the measurement used in commands. The more pixels, the clearer the image, but the more disc space it takes up. A typical compromise on the web is 72 and 100 pixels per inch. If you have a graphics program, it will tell you how many pixels high and wide your image is. Netscape Navigator will also tell you if you open the image file.

To make a picture smaller or larger, specify the height and width that you want, keeping the ratio of height to width approximately the same as the original if you do not want the image to be distorted. The code is: <IMG HEIGHT="hh" WIDTH="ww" SRC="picture.gif">

Changing the size of a horizontal line

When used with the <HR> flag, WIDTH denotes percentage. For example:

LISTS

There are 3 kinds of lists provided in HTML:

unordered (bulleted)
ordered (numbered)
definition (used for glossaries)

Unordered lists

Each unordered list, like the list of types of lists above, begins with <UL> and ends with </UL>. Each list item is preceded by <LI>, for example:


<UL>

<LI> <A HREF="#unordered">unordered</A> (bulleted)

<LI> <A HREF="#ordered">ordered</A>	  (numbered)

<LI> <A HREF="#definition">definition</A> (used for glossaries)

</UL>

Ordered Lists

These are the same as unordered list except that <UL> is replaced by <OL>


<OL>

<LI> step 1

<LI> step 2

<LI> step 3

</OL>

step 1
step 2
step 3

Definition Lists

These are mainly used for glossaries, and begins with <DL> and ends with </DL>. The item to be defined is preceded by <DT> (for "definition title"), and the definition by <DD> (for "definition description")

 
<DL>

<DT>CSS

<DD>Cascading Style Sheets 

<DT>HTML

<DD>HyperText Markup Language

</DL>

CSS: Cascading Style Sheets
HTML: HyperText Markup Language