An H1 heading

Insertion of in-line images

As well as text, images may be inserted into the document. An image may be held in several formats, though the main ones used are GIF and JPEG. Due to limited bandwidth, JPEG with its high compression of picture data and its ability to represent 24 bit colour images is the best to use. Even though the JPEG compression is lossy the degradation of picture quality is not very noticeable to the human eye.

However, if the picture is very small or a graphical image then the GIF format may be the best.

Inserted image	HTML markup required
jpeg	<IMG SRC="image.jpg" ALT="image" ALIGN=TOP>jpeg
A gif image with a transparent background.	A gif image <IMG SRC="sdot.gif" ALIGN=TOP> with a transparent background
Text can be made to flow around an image on the left hand side by using the attribute ALIGN=RIGHT.	<IMG SRC="image.jpg" ALT="mas" ALIGN=RIGHT> Text can be made to flow around an image on the left hand side by using the attribute
The image size can also be specified using HEIGHT and WIDTH. This will speed up the construction of the page on the web browser.	<IMG SRC="image.jpg" ALT="image" ALIGN=LEFT HEIGHT=105 WIDTH=140> The image size can also be specified using HEIGHT and WIDTH. This will speed up the construction of the page on the web browser. ALIGN=RIGHT.
This can also be used to distort the picture.	<IMG SRC="image.jpg" ALT="mas" HEIGHT=20 WIDTH=250> <BR> This can also be used to distort the picture.

Note:

There are many graphic editing programs which allow you to specify that one of the colours of a gif image is transparent when displayed by a browser. For example, LView Pro and Paint Shop Pro, allow the creation of a transparent colour in a gif image. However, in order to do this, the version used for the saved gif image must be 89a.

An image may be used as the displayed item for a hypertext link. For example: <A HREF="..."> <IMG SRC="..."> </A>.

The attributes of the <IMG> tag include:

ALT="mas"

If the image can not be displayed, then the text associated with the ALT attribute will be displayed instead of the image. This occurs, if for example the display of images has been turned off in the browser, or for some reason the browser can not display the image.

ALIGN=TOP

Causes any following text to be displayed aligned with the top of the picture.

ALIGN=BOTTOM.

Causes any following text to be displayed aligned with the bottom of the picture.

ALIGN=MIDDLE.

Causes any following text to be displayed aligned with the middle of the picture.

ALIGN=LEFT

Cause the image to be left aligned on the page. Text is flowed around the image on the right hand side.

ALIGN=RIGHT

Cause the image to be right aligned on the page. Text is flowed around the image on the left hand side.

HEIGHT=n

Set the height of the image to be n pixels.

WIDTH=n

Set the width of the image to be n pixels.

Insertion of a background image

The document may be given a background image. The selected image is tiled across the document and then the text of the document is written over the image(s). It is thus important to choose a background image that will not be too distracting for the reader. The background image is achieved by adding a background attribute to the BODY markup tag. For example:

Creating a list of items

There are several types of list, an un-ordered list can be created by the following markup:

 <UL>
 <LI>Item one of list
 <LI>Item two of list
 </UL>
 

An ordered list is similar to an un-ordered list, except that each entry is consecutively numbered.

 <OL>
 <LI>Item one of list
 <LI>Item two of list
 </OL>
 

A definition list allows a list with a backward hanging indent to be created.

  <DL>
   <DT>
   Definition tag.
   <DD>
   Text of the definition list.
   Which may stretch over several
   lines.
   <DT>
   Another definition tag.
   <DD>
   Text of the definition list.
  </DL>
 

Note:

It is a common practice for the definition tag with an image or even have it prefixed with an image.

Hyper text links

A hyper text link allows a browser of the document to navigate either: to a new point in the document or to navigate to a different document. A named point in a document is specified with an anchor tag which has the attribute NAME. For example:

Note:

There does not need to be any text to visibly name the anchor point.

To effect a transfer to a named anchor point, the HREF form of the anchor tag is used. For example:

The # before the name of the hypertext link tells the browser that the link is to a named point in a document. As no document name is specified before the # the hypertext link is to a point in the current document. It is usual for the browser to visibly highlight the hypertext link.

Hypertext links may also link to other documents, in which case the HREF component names the document. If the file is held on another machine then a URL (Uniform Resource Locator) is used to describe the location of the document. For example:

To go to a named point in a file the format of the anchor is:

URL (Uniform Resource Locator)

The URL is used to specify the location of a file held on a remote machine. This is composed of several distinct components. For example, the URL http://host/file.html is composed of the following components.

http

The protocol that is to be used to access the file. In this case the HyperText Transfer Protocol. There are other protocols, but they are used infrequently.

host

The name of the machine, this can be either a symbol name such as puck.it.brighton.ac.uk or a numeric IP (Internet Protocol) address such as 193.200.1.1.

file.html

The path name of the file to which the hypertext link is to be made. This is relative to the base directory in which web pages are held. The location of this directory htdocs is defined by the person who has set up the web server.

Unix based web servers allow a convenient shortcut to accessing files placed in the directory public_html in the user's home directory. For example, the file home.html placed in the directory public_html in mas's home directory on the server machine puck.it.brighton.ac.uk, can be accessed with the URL http://cmis.mis.brighton.ac.uk/~mas/home.html

In creating the URL the characters space, =, +, <, >, %, ", /, and ? should not be used. If you do need to include these characters then represent them by the % symbol followed by the hexadecimal value of the character. The space character however, can also be represented by the character +. For example, http://cmis.mis.brighton.ac.uk/%25.html represents the URL http://cmis.mis.brighton.ac.uk/%.html.

Other access protocols can be specified by an URL. For example, to access files via the FTP (File Transfer Protocol) an URL of the form:

is used. This specifies that a link to the file/directory mas/ada95 on the machine ftp.brighton.ac.uk should be made. If mas/ada95 is a directory the viewer is presented with a list of files in the directory, otherwise the file will be displayed/transferred to you.

The full specification for an URL is:

Note:

In describing the format of an URL items enclosed in [ ]'s are optional.

Tables

Single cell

A table is created using the <TABLE> markup tag. The simplest table consists of a single data cell. The markup <TD> defines the start of a table data cell.

The status of the tag </TD> is somewhat unclear. Netscape 1.1 requires the end of table data cell tag </TD> to terminate the cell in certain circumstances. Other browsers sense the end of the cell by the </TABLE> or other formatting tag. The tag </TD> is not defined in the HTML specification. As unrecognized tags are ignored by a browser putting the tag in does no harm.

 <TABLE BORDER CELLPADDING=2>
 <TD>
  Text in a table
 </TD>
 </TABLE>
 

The following extra attributes can be added to a TABLE tag:

UNITS=

Either en, relative or pixels. This defines the units that will be used in defining other attributes. The default is pixels.

BORDER

Specifies that a border is to be placed around the table cells. The width of the border is optionally specified with BORDER=n.

CELLPADDING

Specifies the gap to be placed around the table contents.

CELLSPACING

-

BGCOLOR

Specifies the background colour of the cells.

WIDTH

Specifies the width of the table. For example:
WIDTH="80%" 80% of window width.
WIDTH=200. 200 pixels wide.

The following extra components can be added to a TD tag:

ALIGN=

Alignments are LEFT, RIGHT CENTER.

BGCOLOR=

Set the back ground colour for the cell. All cells to the right of this cell will also have this colour

 <TABLE BORDER CELLPADDING=2 BGCOLOR=aqua>
 <TD>
  Text in a table
 </TD>
 </TABLE>
 

Row(s) of cells

A row of cells can be created by repeating the <TD> tag.

 <TABLE BORDER CELLPADDING=2>
  <TD> Data cell 1 </TD>
  <TD> Data cell 2 </TD>
 </TABLE>
 

To form a table of many rows, the markup tags <TR> </TR> are inserted around each row in the table.

 <TABLE BORDER CELLPADDING=2>
  <TR>
   <TD> Data cell 1 </TD>
   <TD> Data cell 2 </TD>
  </TR>
  <TR>
   <TD> Data cell 3 </TD>
   <TD> Data cell 4 </TD>
  </TR>
 </TABLE>
 

Heading to a column

The tag <TH> may be used instead of <TD> if the cell is a header to a column of cells. For example:

 <TABLE BORDER CELLPADDING=2>
  <TR>
   <TH ALIGN=LEFT> Mnemonic</TH>
   <TH ALIGN=LEFT> Expansion </TH>
  </TR>
  <TR>
   <TD> HTML</TD>
   <TD> Hyper Text<BR>Markup Language</TD>
  </TR>
 </TABLE>
 

Spanning rows and columns

The attributes ROWSPAN and COLSPAN of the HTML tags <TD> and <TH> are used to form data cells which span more than one row or column. For example:

 <TABLE BORDER CELLPADDING=2>
  <TR>
   <TH ALIGN=LEFT>Language</TH>
   <TH ALIGN=LEFT COLSPAN=2>Encapsulation <BR> </TH>
  </TR>
  <TR>
   <TD> Ada 95</TD>
   <TD ROWSPAN=2>Using</TD>
   <TD> Packages</TD>
  </TR>
  <TR>
   <TD> C++</TD>
   <TD> Class</TD>
  </TR>
 </TABLE> 

Colouring table cells

The cells in a table may be coloured by using the BGCOLOR attribute. However once a cell is coloured all cells in the same row to the right will also be coloured.

This can be used to give an area of text a background colour

 <TABLE CELLPADDING=2>
  <TR>
   <TH ALIGN=LEFT BGCOLOR="#FFFFD0">Language</TH>
   <TH ALIGN=LEFT BGCOLOR="#FFFFD0">Encapsulation</TH>
  </TR>
  <TR>
   <TD BGCOLOR="#FFD0FF"> Ada 95</TD>
   <TD BGCOLOR="#FFD0FF"> Package</TD>
  </TR>
  <TR>
   <TD BGCOLOR="#D0FFFF"> C++</TD>
   <TD BGCOLOR="#D0FFFF"> Class</TD>
  </TR>
 </TABLE>
 

Using HTML special characters

The markup language uses the character < to start a markup tag. The consequence of this is that < can not be used to represent the less than character directly in a web page. The HTML markup languages defines an escape sequences of characters to represent such special characters.

The following are some of the character sequences used to represent characters that have a special meaning in the HTML language.

Thus to include <BODY> as part of the text of a document the sequence &lt;BODY&gt; can be written.

Characters not in the normal ASCII character set are also represented by an escape sequence. This is so that they may be typed on computer systems which do not directly support the input of such characters. For example:

To prevent the web browser breaking a line at a space character a non breaking space character is used rather than the normal space character.. A non breaking space character is represented by the escape sequence &nbsp;. This can also be used to introduce more than one space character between words. For example:

In addition a character from the LATIN-1 character set is represented by &#nn;. Where nn represents the character code in decimal. For example:

Printable Latin-1 characters

Literal copy and centering of text

Text can be copied literally by using the <PRE> tag. However, any HTML tags in the text will be processed. For example:

    *
   ***
  *****
 

 <PRE>
    *
   *<B>*</B>*
  *****
 </PRE>
 

Note:

The copied text is formatted using a non proportional font to preserve the layout.

Any text to be centered is enclosed between the tags <CENTER> and </CENTER>.

 A line of normally formatted text.
 <CENTER>
 Some lines of text
 <BR>
 that are centered
 </CENTER>
 

Inserting an e-mail address

An e-mail address may be inserted into the document using a special form of the anchor markup tag. A user selecting this will be presented with a form on which to prepare their message for eventual sending in this case to the e-mail address:

 <A HREF="Mike Smith University of Brighton">Mail me</A>
 

Of course your browser has to support this facility.

Automatic redirect

A page may contain a tag that will cause an automatic redirection to another URL after a specific time interval. For example, the tag

<META HTTP-EQUIV="Refresh" CONTENT="3;url=http://domain/directory/file.html">

Note:

This tag must be included immediately after the tag <HTML>