Reference : USER 009 Issue Date : September2005 Classification : Web Originator : Derek Sheward, Claire Napier REVISED DOCUMENT

A guide to HTML – the HyperText Markup Language

• • • • • • • • • • • • • • • • • • • • • • • • •

Description: This document provides an introduction to the HyperText Markup Language (HTML) to produce simple scripted pages for the web. The user will need a background knowledge of Internet Explorer® or similar web browsing software and a basic understanding of how to create plain text files from a text editor or word processing package.

If you have any queries: Students should contact the nearest Information Services, Student Help Desk. Student Help Desks are located within the:

IT Learning Centre - Brindley IT and Library Help Desk - Thompson Library IT Learning Centre - Octagon

Staff should contact Information Services on x3800.

More guides and information can be found on the Information Services web pages at: http://www.staffs.ac.uk/uniservices/infoservices/documents/ If you do not find what you want please ask at the Student Help Desk.

D.R.Sheward/C.L.Napier/Jan-08 1 What is HTML? HTML (HyperText Mark-up Language), is the standard language used to create web pages.

It offers basic text formatting - from italicising, emboldening etc., through to creating lists, in-line graphics, and the ability to link to other HTML pages, movie files, pictures, sound files, software archives and more.

You can create HTML using a word processing package, but you need to save the file as text only. If it is saved as an ordinary Word® document, the Web Browser won’t display it.

Getting your pages on the web To get your pages on the web, you need to put your files on a web server, which is essentially a large computer that is connected to the Internet. When you want to view a page on the Internet, your computer connects to this server and the appropriate pages are then downloaded to your web browser.

To view pages that you have created on your own computer, you don't need to put them on a web server, you can view them by opening them from your web browser.

Getting started If you are using Windows®, create your HTML files using WordPad®. Click Start; Programs; Accessories; WordPad®

If you are using an Apple Macintosh, create your HTML files using SimpleText®.

Your choice of font and size in the word processor has no effect on its appearance on the web, nor will the use of tabs or extra blank lines. All “white space” in an HTML file is treated as a single character (unless the preformatted text option is used).

HTML itself is not case sensitive but there are certain rules that you can follow: - any text written in capitals between tags will be displayed as such in the browser. - references to file names are case sensitive.

Laying out your HTML - Include plenty of white space around your HTML – it makes it easier to read. - Type your tags in capital letters so that they stand out from the rest of your text. - Use indents so you can see where tags begin and end.

D.R.Sheward/C.L.Napier/Jan-08 2

Introduction

This is my first web page.

Saving your HTML file Your must save your HTML file from a word processor in the 'Text Only' format, and attach .htm or .html as the file extension. E.g. if you wanted to call your file 'welcome' type in welcome.htm or welcome.html 1. From the File menu of your word processor, choose Save As… 2. From the list of available file types, usually at the bottom of the Save As box, choose Text Only.

Note: With SimpleText® on Apple Macintosh computers, Text Only is the only format you can save files in, so you won't see an option to choose Text Only.

3. Name your file using lowercase text without spaces, and put the .htm or .html on the end of the file name. File names and addresses are case sensitive and it’s best sticking to lower case, otherwise anyone typing the address into a web browser has to remember to the upper and lowercase text, and it's easy to get wrong.

Tips when choosing file names When choosing your file names, don't put spaces in file names. If you wish to make a distinction between words, separate them with an underscore (_) or minus sign (-) character. Do not use any other special characters in file names, and especially do not use slashes (/).

Web servers have reserved file names for documents that it will show first – e.g. welcome or index. Find out the reserved name for the server that you are using and use that name on the page you want viewers to see first.

Previewing your work 1. Open Internet Explorer®. 2. From the File menu, choose Page… 3. Click Browse… and locate the file you want to open. 4. Click Open then click the OK button. The Browser will display the file as it would be seen on the World Wide Web. If isn’t displayed quite as you had hoped, or not displayed at all, open the file in your word processor and check your HTML to make sure that there aren’t any spelling mistakes or missing tags. 5. Save any changes or additions, making sure the file is 'text only' and go back into Internet Explorer, click the Refresh button, to reload the new version of your file. Edit your page in this way until you are happy with the result.

The basics of HTML

D.R.Sheward/C.L.Napier/Jan-08 3 The information, e.g. text or linking information, appearing on your web page is contained between tags - a left and right angular bracket,

Hello world

How that information is actually displayed on the web page depends which HTML tags were used to enclose the information. Some tags come in pairs, the first to start off the formatting,

the second to terminate it

. Paired tags, usually surround pieces of text or in-line images, and have an effect on that enclosed text or image. Termination tags have a slash / after the first bracket Standalone tags are used when a single, one-off effect is required, for example

---

to insert a horizontal rule, or
to insert a line break.

The HTML tag This is the first and last tag you will use in your HTML document. It tells a web browser that the document it is about to use is written in HTML. Your HTML document is placed between these tags.

your document goes here…

Header tag The header tags, not to be confused with the heading tags, are where the browser looks for information about your document. Your document title goes between the head tags.

Title tag The Title tags are inserted between the head tags. Place your document's title between these tags where it will appear in the title bar of the browser window. It is important to use something short, memorable and indicative of your page’s content. It doesn’t have to be the same as the HTML file name.

Body tag Between these tags is where you start constructing the actual page. This is where all the details about your page are contained, such as text, pictures and even details about colours.

D.R.Sheward/C.L.Napier/Jan-08 4 web page goes here

Adding text to a web page… Heading tags There are six types of heading, numbered Hl (largest) through to H6 (smallest). The format of the heading tag is: Your heading, where x is the number of the heading, 1 through to 6

D.R.Sheward/C.L.Napier/Jan-08 5

Heading1

Heading2

Heading3

Heading4

Heading5

Heading6

Example of a heading tag used inside an HTML document…

Introduction

Paragraph tag

The paragraph tag is used to signal the start and end of a paragraph. They can be preceded by a heading or even contain one.

Introduction

This is the text and the main content (Body) of the HTML page. This is one paragraph.

Line breaks The web browser will automatically word-wrap text to enable it to fit the screen on which it is being displayed (unless the text is preformatted). Spaces or line breaks in an HTML file (in your Word processing package) are not automatically translated into spaces or line breaks by the Web Browser. A line break will only occur when a paragraph ends and a new one begun or a forced line break tag is reached.

Forced line break tag
The
tag will force an immediate line break with NO ADDITIONAL blank spaces between lines. To insert several blank lines use multiple tags e.g.


. The
tag is one of a few HTML tags that doesn't require a corresponding closure tag e.g.
. The example below breaks the text 'This is one paragraph' onto a new line. D.R.Sheward/C.L.Napier/Jan-08 6

This is the text and the main content (Body) of the HTML page.
This is one paragraph.

Note it’s a good idea to put the text on a new line so you can easily see, when reading the HTML, where the line break is

Horizontal rule tag

---

The

---

tag inserts a 3D horizontal rule across the width of the screen.

Like the
the

---

tag does not have a corresponding termination tag.

Three blind mice

Three blind mice,
Three blind mice.

See how they run,
See how they run

---

This produces…

Formatting tags There are a number of tags available that alter the appearance of text. Tags… Variables emphasis Citation strong

Address

italic bold underline Strikethrough

D.R.Sheward/C.L.Napier/Jan-08 7 Results…

Note: be aware that using the tag suggests that the text is a hypertext link, so where possible, avoid using it.

These tags can also be combined…

Bold italic

Note: the opening and closing tags should be nested correctly, the first tag used should be the last one to be terminated e.g. text not text.

The following styles use a non-proportional font, such as Courier or VT100. Tags… Result…

h e l l o

Sample Coded

Blockquote

Blockquote will put all enclosed text into a paragraph, and will indent the whole paragraph by one step. This is useful for verse etc. There is no need to use the paragraph tags if

is being used.

Introduction

My first nursery rhyme

Three blind mice, Three blind mice, See how they run, See how they run...

Now for the second part.

Produces…

Font size

D.R.Sheward/C.L.Napier/Jan-08 8 You can change the size of text by using the font size tags text and entering a number from 1 (smallest) to 6 (largest).

Note: this is the total opposite to the numbering system used for headings.

Fontsize1 Fontsize2 Fontsize3 Fontsize4 Fontsize5 Fontsize6

Aligning headings Whereas pressing the Tab or Space keys moves text across the page in a word processing package, it won't be recognised in HTML. You have to use the ALIGN attribute along with the tag of the object your want to align. Headings, paragraph text and images can all be aligned using the ALIGN attribute.

For example:

your heading

aligns the heading to the left of the page

your heading

centralises the heading

your heading

aligns the heading to the right of the page

Creating Hyperlinks The whole principle of HTML is to provide the user with links to go “somewhere else” at the click of a button. The link can be text or an image and the “somewhere else” is not necessarily more text on another page, but may be an image, sound, movie, or information database, somewhere else on the World Wide Web.

A hyperlink consists of two components; - the object that the user clicks on, - the resulting destination once the link has been selected.

Anchor tags The anchor tags are used to create a link, and can be formed around text or an image. You need to specify what or where you are linking to, and what has to be done when the Web Browser goes to it.

D.R.Sheward/Jan-08 9 link text

The 'destination' can be; - a file name of a different web page on the same site, - a web address (URL) to link to another web page, - a named item (text or image) within the same HTML document. This named item is referred to as a Named Anchor or Target.

The text 'link text' in-between the tags, is where you add the text that forms the clickable link.

Staffordshire University

The above example would make the text ‘Staffordshire University’ a link to a web address, http://www.staffs.ac.uk. This is the address for the University's home page. The link tags can be placed around paragraph text as you obviously don't want the whole paragraph to be a hyperlink - one or two words are usually sufficient.

Click here to visit Staffordshire University's home page.

would produce…

D.R.Sheward/Jan-08 8 Specifying a path through folders (directories) Home

In the above example, clicking 'Home' would link to a file called 'index.htm' stored at the same level (same folder) as the page containing the link.

If the page you are linking to is located in a different folder to the one you are linking from, the link will need to contain the names of the folder and the page.

Going down a level To link to a page contained in a folder that is in the same folder as the page you linking from, e.g. to link from a file called 'details.htm' to one called 'index.htm' stored in a folder called 'front',

the link would be…

Home

Going up a level Using the example of 'index.htm' being inside the 'front' folder, but this time the page containing the link is itself stored in a folder, e.g. called 'details'.

The hyperlink would need to tell the web browser to come out of the current folder 'details' and then go into the 'front' folder and choose the 'index.htm' file. The link would be…

Home

The addition of ../ tells the web browser to look outside of the current folder or jump a level. Each ../ tells the browser to go up a level, so to jump up two levels the link would be…

Home

The Named Anchor tag Before you can link to a specific place in a web page you need to define a destination by enclosing the object (text or image) with the Named Anchor tag.

text linked to

The text 'anchor name' is replaced with your own anchor name that will be used in the hyperlink that links to whatever text you select from your document to replace 'text linked to'. Named Anchors are often applied to headings when there is a 'table of contents' at the top of a page.

D.R.Sheward/Jan-08 9

Introduction to HTML

The above anchor is named 'introduction' and it is applied to the text 'Introduction to HTML'.

Points to note about Named Anchors: - use something identifiable for the anchor name – there are no size restrictions and spaces are permitted. - the name of the anchor is case sensitive. If the link doesn’t work – check the spelling of the anchor name, making sure that you haven’t used capitals. - the web browser doesn’t visually indicate the location of Named Anchors.

Creating a link to a Named Anchor on the same page Firstly define your Named Anchor as described above, and then create a hyperlink. Using the following example as the Named Anchor,

Introduction to HTML

the hyperlink you would need to create to link to it would be…

link text

Note: that when linking to Named Anchors, the # symbol always precedes the name of the anchor; it tells the web browser to look for a named anchor within an HTML document.

Creating a link to a Named Anchor on another page To link to a Named Anchor within another page, the hyperlink would need to locate the other page and then the appropriate Named Anchor.

link text

If the University home page contained a Named Anchor called intro, to link to it the hyperlink would be…

link text or To link to a Named Anchor contained on a page called 'index.htm' stored in the same place, as the one you are linking from, the link would be…

link text

The 'top' Anchor The destination 'top' has been set aside in HTML to return to the top of the current page when the link

back to the top

D.R.Sheward/Jan-08 10 is selected.

'Top' is a reserved Named Anchor and is interpreted by web browsers as meaning 'go to the top of the current page', and therefore you don't need to insert your own Named Anchor.

Creating a link to an email address You can make it easy for a reader to send electronic mail to a specific person from a web page by including the mailto attribute within a link.

text

Note: there are no forward slashes in mailto: links.

For example,

Email G.Smithy

produces…

Note: to be able to send emails from a web link your web browser settings need to be changed to give it a Mail Identity. In Internet Explorer® this is done through Internet Options.

Using images on web pages There are two main image formats that are used on the web, GIF or JPG (sometimes called JPEG). Most graphics applications, e.g. Microsoft PhotoEditor® in Windows® will allow you to save files in one of these formats. Graphical conversion utilities are also available. The two formats have different characteristics and different uses:

GIF (graphics interchange format) - Uses a maximum of 256 colours - Lossless compression – you don’t sacrifice image quality in return for a smaller file size - Best used for black and white line art and thumbnails. - Can have transparent backgrounds – without a background. - Can be used for animations (GIF animations)

JPEG (joint photographic experts group) - On Windows PCs the format is referred to as JPG, on a Macintosh it's JPEG. - Can use up to 16.7 million colours - Good for high quality colourful images, such as photographs - Lossy compression – sacrifices image quality in return for smaller file size. (Providing that you set the compression setting to high or best image quality the loss in image quality will be largely unnoticeable.)

D.R.Sheward/Jan-08 11

Using images on your web doesn't actually put the image onto the page; the tags act as a placeholder that refers to an image file. Whatever image file is referred to will appear on the page, if the file is missing then the image won’t be displayed on the page and a missing page icon will be displayed.

If the viewer has turned off image loading or an image is unavailable, the web browser will usually display an image p1aceholder where the graphic would be.

If you see an image placeholder when you are previewing your page, check that images are turned on in the browser and that you typed the HTML and filename of the image correctly.

Image tag To insert an image in your web page, use the image tag as shown below…

It's considered good practice to keep any images used on your web pages in a directory separate from your HTML files, so that all files of the same type are kept in the same place. This directory is commonly called 'images'.

The tag for inserting a triangle image from the images directory onto the index.htm page would be…

Small images such as triangles or dots are commonly used alongside text to highlight a list item.

Introduction

This would produce…

Aligning images Like text, images can be aligned left, right or centrally on a web page.

Images can also be aligned to the top, middle and bottom of any line of text. By default, the image bottom is aligned with the text. D.R.Sheward/Jan-08 12

Alternative image description – ALT text Alternative image description (ALT text) offers the viewer a textural description of an image if the browser won’t display the image or if a web browser has image loading turned off. The ALT text is inserted inside the IMG tag. For example,

Note: It is very important to include ALT text as it is used by screen reader software for visually impaired people.

Using images as clickable links Combine the Hypertext reference tag with an image tag

For example, to turn the image file unilogo.gif into a clickable link leading to the University's home page, the HTML would be…

Images that are defined as links will display a border the same colour as text links.

D.R.Sheward/Jan-08 13

To remove the border, insert the BORDER attribute and set the value to zero.

Linked images are commonly used when creating Thumbnails.

Thumbnails - what’s a thumbnail? A Thumbnail is an image, small in both appearance and file size, linked to a larger better quality version on a separate page. Usually, the thumbnail is a 2-3k GIF preview linked to a high quality JPEG image. This way a viewer can see a low quality version of an image and decide whether or not to download the larger high quality version.

Image tips - Despite being embedded on the HTML page, images still remain as external files. - File management and site maintenance is made easier by keeping image files in a directory separate from your HTML files. This directory is commonly called images. - An HTML text file, even one running to a number of pages, occupies very little disk space, and doesn’t take the web browser long to download and display it. Even a tiny image, say 3cm. square, will be five to ten times the size of the HTML file, and consequently will take five to ten times longer to download. Because of this performance problem, viewers may turn off image loading on their web browser, or stop downloading your page if it's taking too long. Therefore keep the image content as low as possible within your pages. - If you include large images, use the thumbnail technique.

Text lists There are three main types of list in HTML: - Bulleted list, of which there are three types: unnumbered (unordered), directory and menu. - Numbered list - Glossary list

Bulleted lists

A bulleted list begins and ends with the

unnumbered list tags. Each item in the list is inserted between the

list item tags.

D.R.Sheward/Jan-08 14

An UN-numbered List.
• item one
• item two

produces this indented bulleted list…

Numbered lists

Numbered lists or Ordered lists are defined by the

and

tags. As with bulleted lists, list items are placed between the

tags. List items are automatically numbered starting from one.

A numbered list
1. item one
2. item two

produces this indented numbered list…

To change the starting number of list items, e.g. to number from 4, replace the

tag with

Starting numbering from 4
4. item one
5. item two
has the following effect on list numbering…

Glossary lists

A Glossary List (or Description List) encloses (descriptive) titles between the
tags and (descriptive) descriptions between the
tags.

Web browsers do not usually indent a Glossary list as they do with other types of list, but will indent the (descriptive) description. Any necessary text wrapping will correspond to that indentation.

Windows XP

D.R.Sheward/Jan-08 15

Many Information Services labs now use Windows XP.

You require a username and password to use these machines.

Note:

From time to time, it may be necessary to change software specification.

This list will be updated as appropriate.

Produces…

Lists within lists You can insert lists within lists, called Nested lists.

An un-numbered nested list.
• item one
• item two
• item three
• item four
• item five
• item six
Each list item's indent will be increased by one indent more than the previous one. Depending on the amount of indent, unnumbered lists will, instead of the normal black dot, display the bullet marks as dashes, filled squares or others.

The above HTML produces the following…

You can also insert horizontal rules, paragraph and line breaks inside lists.

D.R.Sheward/Jan-08 16

Commenting your HTML You can add little comments to your HTML code as you can in other programming languages. These comments will only be seen when your HTML code is being viewed; web browsers ignore them.

Special characters Special characters always start with an ampersand (&) and end with a semi-colon (;)

Character meaning HTML < less than < > greater than > & ampersand & ' quote " non-breaking space   © copyright © ® registered ®

Using colour When creating your web pages you have a choice from 216 web safe colours, that are intended to be reproduced the same through different browsers and different computer platforms, e.g. Windows® and Macintosh. Using colours outside these 216, e.g. ‘non-safe’ colours will give unintended results.

Through HTML, not all colours can be applied by typing in the name of the colour; a letter/number combination known as Hex is used preceded by the # symbol normally refers to colours in HTML, e.g. white is #FFFFFF, dark blue is #000066. A listing of web safe colours and their associated Hex codes can be found on the web.

You can set the colour of: - body text, - links – standard, active (when it’s clicked) and visited links - page background colour

If you don’t specify any colours, there are standard colours a web browser will use.

Applying colour Colours are specified inside the tag using the following attributes: - BGCOLOR for changing the background colour of a page - TEXT for changing the colour of normal text - LINK for changing the colour of a link before it is followed - ALINK for changing the colour of a link when it's selected - VLINK for changing the colour of link once its been used

D.R.Sheward/Jan-08 17 would make the page background white.

Specifying a number of colour attributes at once would look like:

Points to note when assigning colours Some web browsers will change the colour links depending on the length of time since it was last followed. Some users may change the colours for links through their browser from the standard colours to something else (green and yellow maybe!). You should therefore avoid any references to the colours of your links, as they may not be correct. e.g. don’t say “Click on the blue text here”, for instance.

Background images – BACKGROUND attribute Rather than using a solid colour as a background to a web page, you can use an image. This image can be a fairly large image that fills the browser window or a small image of a pattern that is repeated or tiled until it fills the browser window.

GIF images are usually used for basic patterns, as they don't take up a lot of space. Avoid complex images or photographs as they use a lot space and may affect the legibility of text.

Like defining colours, the BACKGROUND attribute goes inside the tag.

Tips for designing pages - Avoid red and blue combinations, e.g. red text on a blue background - Don’t refer to links by their colour, e.g. click the blue text - Use thumbnails where possible - Only use images if they serve a purpose. - Don’t use images for the sake of putting images on your site. - Put an email link on your page, so users are able to contact you. - Date your pages so users know how recent they are and when they were last updated.

Where to go for more help or information Advice is available at your nearest Student Help Desk. Many documents are available on the web at: http://www.staffs.ac.uk/uniservices/infoservices/documents/ There are many HTML tutorials on the web and also listings of HTML colours. Look at the HTML used on other peoples web pages by choosing Source from the View menu in Internet Explorer®. This is a good way of learning HTML.

D.R.Sheward/Jan-08 18