Web Page Design with HTML

<BR>

The Line Break element specifies that a new line must be started at the given point. A new line indents the same as that of line-wrapped text.

Example of use:

Pease porridge hot<BR>
Pease porridge cold<BR>
Pease porridge in the pot<BR>
Nine days old.

With the introduction of floating images it became necessary to expand the <BR> element. Normal <BR> still just inserts a line break. A CLEAR attribute has been added to <BR>, so :

CLEAR=left will break the line, and move vertically down until there is a clear left margin (no floating images).

CLEAR=right does the same for the right margin.

CLEAR=all moves down until both margins are clear of images.

INDEX

<CENTER> … </CENTER>

All lines of text between the beginning and end <CENTER> elements are centred between the current left and right margins.

<CENTER>All this text would be centred in the page</CENTER>

INDEX

<FONT ...> … </FONT>

SIZE

The element is <FONT SIZE=value>. Valid values range from 1-7 and the default font size is 3. The value given to size can optionally have a '+' or '-' character in front of it to specify that it is relative to the document basefont (if the size specified takes the font size above 7 or below 1, then values of 7 and 1 would be used). As said, the default font size is 3, and can be changed with the <BASEFONT ...> element.

<FONT SIZE=4> changes the font size to 4 </FONT>

<FONT SIZE=+2> changes the font size to <BASEFONT SIZE ...> + 2 </FONT>,
or to 5 if no <BASEFONT SIZE ...> has been set.

Internet Explorer and Netscape support the ability to change the font colour as well as face type. They use the COLOR and FACE attributes to the <FONT> element.

COLOR = #rrggbb or colourname

The colour attribute sets the colour which text will appear in on the screen. Rrggbb is a hexadecimal colour denoting a colour value. Alternately, the colour can be set to one of the named colours supported by the browsers. For details, see the colour names section <BODY> element.

Example:

FACE = name [,name] [,name]

The FACE attribute sets the typeface that will be used to display the text on the screen. The type face displayed must already be installed on the users computer. Substitute type faces can be specified in case the chosen type face is not installed on the customers computer. If no match is found, the text will be displayed in the default type according to the browser preference settings.

Example:

<FONT FACE="Arial, Lucida Sans"> This text will be displayed in either Arial, Lucida Sans, or Times Roman, depending on which fonts you have installed on your system.</FONT>

NOTE : When using this element, care should be taken to try to use font types that will be installed on the users computer if you want the text to appear as desired. Changing the font face is supported by Internet Explorer and Netscape only.

INDEX

<H1> ... </H1> Headings

HTML defines six levels of heading. A Heading element implies all the font changes, paragraph breaks before and after, and white space necessary to render the heading.

The highest level of headings is <H1>, followed by <H2> ... <H6>.

Example of use:

<H1>This is a heading</H1>
Here is some text
<H2>Second level heading</H2>
Here is some more text.

ALIGN

Included in the HTML level 3.2 specification is the ability to align Headings.
The ALIGN=left|center|right attribute has been added to the <H1> through to <H6> elements. e.g :

<H1 ALIGN=center>Hello, this is a heading</H1>
would align a heading of style 1 in the centre of the page.

INDEX

<HR>

A Horizontal Rule element is a divider between sections of text such as a full width horizontal rule or equivalent graphic.

Example of use:

<HR>
<ADDRESS>February 8, 1995, CERN</ADDRESS>
</BODY>

The <HR> element specifies that a horizontal rule of some sort (The default being a shaded engraved line) be drawn across the page. To this element recent browsers have added support for 4 new attributes which allow the document author to describe how the horizontal rule should look

SIZE

The SIZE attributes lets the author give an indication of how thick they wish the horizontal rule to be. A pixel value should be given.

Example:

WIDTH

The default horizontal rule is always as wide as the page. With the WIDTH attribute, the author can specify an exact width in pixels, or a relative width measured in percent of document width.

Exact:

Relative:

ALIGN

Now that horizontal rules do not have to be the width of the page it possible to specify the horizontal alignment of the rule.

<HR ALIGN=left|right|center>

For those times when a solid bar is required, the NOSHADE attribute specifies that the horizontal rule should not be shaded at all.

<HR NOSHADE>

INDEX

<P> ... </P>

The Paragraph element indicates a paragraph. Typically, paragraphs are surrounded by a vertical space of one line or half a line. With some browsers, the first line in a paragraph is indented. The closing </P> tag is optional.

Example of use:

<H1>This Heading Precedes the Paragraph</H1>
<P>This is the text of the first paragraph.
<P>This is the text of the second paragraph.Although you do not need to start paragraphs on new lines, maintaining this convention facilitates document maintenance.
<P>This is the text of a third paragraph.

ALIGN

Included in the HTML level 3.2 specification is the ability to align paragraphs

Basically, ALIGN=left|center|right attributes have been added to the <P> element.

Example of use:

<P ALIGN=LEFT> ... </P>
All text within the paragraph will be aligned to the left side of the page layout. This setting is equal to the default <P> element.

<P ALIGN=CENTER> ... </P>
All text within the paragraph will be aligned to the centre of the page.

<P ALIGN=RIGHT> ... </P>
All text will be aligned to the right side of the page.

INDEX

<PRE> ... </PRE>

The Preformatted Text element presents blocks of text in fixed-width font, and so is suitable for text that has been formatted on screen.

WIDTH

The <PRE> element may be used with the optional WIDTH attribute, which is a Level 1 feature. The WIDTH attribute specifies the maximum number of characters for a line and allows the HTML user agent to select a suitable font and indentation. If the WIDTH attribute is not present, a width of 80 characters is assumed.

Within preformatted text:

The <P> element should not be used
Anchor elements and character highlighting elements may be used.
Elements that define paragraph formatting (headings, address, etc.) must not be used.

Example of use:

<PRE WIDTH="80">
This is an example line.
</PRE>

INDEX

Hypertext Links

<A...> ... </A> Anchor

The Anchor element is the essence of HTML. It is marked text that is the start and/or destination of a hypertext link. Anchor elements are defined by the <A> element. The <A> element accepts several attributes, but either the NAME or HREF attribute is required.

Attributes of the <A> element :

HREF

If the HREF attribute is present, the text between the opening and closing anchor elements becomes hypertext. If this hypertext is selected by readers, they are moved to the document specified by the value of the attribute.

Example :

See <A HREF="http://subnet.virtual-pc.com/
~le387818/">The HTMLib site</A>for updated info on the HTMLib.

In this example, selecting "The HTMLib site" takes the reader to a document located at http://www.htmlib.com/ (which is the HTMLib web site)

With the HREF attribute, the form HREF="#identifier" can refer to another anchor in the same document.

Example :

The <A HREF="document.html#glossary">
glossary</A>defines terms used in the document.

In this example, selecting "glossary" takes the reader to another anchor (i.e <A NAME="glossary">Glossary</A>) in the document document.html. The NAME attribute is described below. If the anchor is in another document and the HREF attribute provides a partial URL, the new document will be resolved from either the present document, or from any specified base address.

Several other forms of the HREF attribute are permitted by browsers. Some are as follows :

<A HREF="http://..."> Makes a link to another document located on a World Wide Web server.

<A HREF="ftp://..."> Makes a link to an ftp site. Within an HTML document, normally a connection to an anonymous ftp site would be made

<A HREF="mailto:..."> Activating such a link would bring up the browsers mailing dialog (or registered mail program) allowing the user to send mail messages to the author of the document, or whoever’s address follows the mailto attribute.

NAME

If present, the NAME attribute allows the anchor to be the target of a link. The value of the NAME attribute is an identifier for the anchor. Identifiers are arbitrary strings but must be unique within the HTML document.

Example of use:

<A NAME="coffee">Coffee</A> is an example of...
This establishes an anchor or "bookmark" on the page at the word "Coffee".

An example of this is:

<A HREF="#coffee">coffee</A>.

This links to the anchor at the word "Coffee". When clicked the browser will jump to the sentence starting with "Coffee is an example of...".

Another document can then make a reference explicitly to this anchor by putting the identifier after the address, separated by a hash sign :

TARGET

Browser windows can now have names associated with them. Links in any window can refer to another window by name. When the link is activated, the document referenced will appear in that named window. If the window is not already open, the browser will open and name a new window for you. Such an action is only supported by Netscape and Internet Explorer.

The syntax for the targeted windows is:

<A HREF="url.html" TARGET="window_name">Link text</A>

INDEX

Information Type and Character Formatting Elements

Information type elements:

NOTE : Different information type elements may be rendered in the same way. The following are what are sometimes called Logical formatting elements. They suggest to the browser that the enclosed text should be rendered in a way according to the browser, rather than fixing the display type.

<CODE> ... </CODE>: - An example of Code
<EM> ... </EM>: - Emphasis
<KBD> ... </KBD>: - User typed text
<STRONG> ... </STRONG>: - Strong typographic emphasis
: - Defining comments

Character formatting elements:

Elements that do this, are character formatting elements, also known as Physical elements, that produce strict rendering of the text.

<B> ... </B>: - Boldface type
<BIG> ... </BIG>: - Big text
<I> ... </I>: - Italics
<SMALL> ... </SMALL>: - Small text
<STRIKE> ... </STRIKE>: - Text that has been struckthrough
<SUB> ... </SUB>: - Subscript
<SUP> ... </SUP>: - Superscript
<TT> ... </TT>: - TypeType (or Teletype)
<U> ... </U>: - Underlined text

None of the Information type or Character formatting elements have attributes.

INDEX

<IMG...> In-line images

The Image element is used to incorporate in-line graphics into an HTML document. This element cannot be used for embedding other HTML text.

The Image element, which is empty (no closing element), has these attributes:

ALIGN

ALIGN=left image will float the image to the left margin (into the next available space there), and subsequent text will wrap around the right hand side of that image.

ALIGN=right will align the image aligns with the right margin, and the text wraps around the left.

ALIGN=top aligns itself with the top of the tallest item in the line.

ALIGN=texttop aligns itself with the top of the tallest text in the line (this is usually but not always the same as ALIGN=top).

ALIGN=middle aligns the baseline of the current line with the middle of the image.

ALIGN=absmiddle aligns the middle of the current line with the middle of the image.

ALIGN=baseline aligns the bottom of the image with the baseline of the current line.

ALIGN=bottom aligns the bottom of the image with the baseline of the current line.

ALIGN=absbottom aligns the bottom of the image with the bottom of the current line.

ALT

Optional text as an alternative to the graphic for rendering in non-graphical environments. Alternate text should be provided for whenever the graphic is not rendered (i.e. if the user has image loading turned off). Alternate text is mandatory for Level 0 documents. Internet Explorer also uses any ALT text set as a ToolTip to be displayed when the users mouse pauses over the image.

Example of use:

<IMG SRC="triangle.gif" ALT="Warning:"> Be sure to read these instructions.

SRC

The value of the SRC attribute is the URL of the image to be embedded. Its syntax is the same as that of the HREF attribute of the <A> element. SRC is mandatory.

<IMG SRC ="triangle.gif"> Be sure to read these instructions.

WIDTH and HEIGHT

<IMG WIDTH=value HEIGHT=value>

If the WIDTH and HEIGHT attributes are used, the viewer of their document will not have to wait for the image to be loaded and its size calculated. The browser can determine the layout of the text around the image and display the text first. Netscape is the only browser that will scale the whole image if either the WIDTH or HEIGHT attributes are specified, maintaining the aspect ratio. If both are specified then the image is displayed accordingly. WIDTH and HEIGHT values are entered in pixels.

BORDER

<IMG BORDER=value>

This lets the document author control the thickness of the border around an image displayed. This can be set to 0 so that if the image is surrounded by <A> elements, the normal link border will not be shown.

VSPACE and HSPACE

<IMG VSPACE=value HSPACE=value>

The VSPACE attribute controls the vertical space above and below the image, while HSPACE controls the horizontal space to the left and right of the image. They allow setting of a 'margin' around the image which is kept as white space - useful to prevent text wrapping right up to floating images.

LOWSRC

Using the LOWSRC attribute, it is possible to use two images in the same space.

The syntax is :

<IMG SRC="highres.gif" LOWSRC="lowres.jpg">

Browsers that do not rrecognizethe LOWSRC attribute cleanly ignore it and simply load the image called "highres.gif".

Netscape will load the image called "lowres.jpg" on its first layout pass through the document. Then, when the document and all of its images are fully loaded, will do a second pass through and load the image called "highres.gif" in place. This means that a very low-resolution version of an image loaded initially and if the user stays on the page after the initial layout phase, a higher-resolution version of the same image can "fade in" and replace it.

Both GIF (both normal and interlaced) and JPEG images can be freely interchanged using this method. Both images will be scaled according to any WIDTH/HEIGHT attribute values present in the <IMG ...> element.

If the images are of different sizes and a fixed height and width are not specified in the IMG element, the second image (the image specified by the SRC attribute) will be scaled to the dimensions of the first (LOWSRC) image.

INDEX

List Elements

HTML supports several types of lists, all of which may be nested. If used they should be present in the body of a HTML document.

<OL> ... </OL>

The Ordered List element is used to present a numbered list of items, sorted by sequence or order of importance.
An ordered list must begin with the <OL> element which is immediately followed by a <LI> (list item) element.

Example:

<OL>
<LI>Click the Web button to open the Open the URL window.
<LI>Enter the URL number in the text field of the Open URL window. The Web document you specified is displayed.
<LI>Click highlighted text to move from one link to another.
</OL>

The Ordered List element can take the COMPACT attribute, which suggests that a compact rendering be used.

The average ordered list counts 1, 2, 3, ... etc. The TYPE attribute allows different count mark types

TYPE=A: - capital letters. e.g. A, B, C ...
TYPE=a: - small letters. e.g. a, b, c ...
TYPE=I: - large roman numerals. e.g. I, II, III ...
TYPE=i: - small roman numerals. e.g. i, ii, iii ...
TYPE=1: - or the default numbers. e.g. 1, 2, 3 ...

For lists that need to start at values other than 1 the START attribute can be used.

START is always specified in the default numbers, and will be converted based on TYPE before display. Thus START=5 would display either an 'E', 'e', 'V', 'v', or '5' based on the TYPE attribute.

To give even more flexibility to lists, the TYPE attribute can be used to change the list type for the item, and all subsequent items.

NOTE : The TYPE attribute used in the <OL> Element and the <LI> Element and the START attribute in the <OL> Element are supported only by Netscape and the Internet Explorer.

INDEX

<UL> ... </UL>

The Unordered List element is used to present a list of items which is typically separated by white space and/or marked by bullets.

An unordered list must begin with the <UL> element which is immediately followed by a <LI> (list item) element:

<UL>
<LI>First list item
<LI>Second list item
<LI>Third list item
</UL>

The Unordered List element can take the COMPACT attribute, which suggests that a compact rendering be used.

The basic bulleted list has a default nesting progression of bullet types that change according to the level of the list item, from a solid disc, to a circle to a square.

INDEX

<DL> ... </DL>

A definition list is a list of terms and corresponding definitions. Definition lists are typically formatted with the term flush-left and the definition, formatted paragraph style, indented after the term.

Example of use:

<DL>
<DT>Term
<DD>This is the definition of the first term.
<DT>Term
<DD>This is the definition of the second term.
</DL>

If the <DT> term does not fit in the <DT> column (one third of the display area), it may be extended across the page with the <DD> section moved to the next line, or it may be wrapped onto successive lines of the left hand column.

The opening list element must be <DL> and must be immediately followed by the first term (<DT>).

The definition list type can take the COMPACT attribute, which suggests that a compact rendering be used, because the list items are small and/or the entire list is large.

Unless you provide the COMPACT attribute, the HTML user agent may leave white space between successive <DT>, <DD> pairs. The COMPACT attribute may also reduce the width of the left-hand (<DT>) column.

<DL COMPACT>
<DT>Term
<DD>This is the first definition in compact format.
<DT>Term
<DD>This is the second definition in compact format.
</DL>

INDEX

Tables

At present, the table HTML elements are :

<TABLE> ... </TABLE>: - The Table delimiter.
<TR ...> ... </TR>: - Used to specify number of rows in a table.
<TD ...> ... </TD>: - Specifies table data cells.
<TH ...> ... </TH>: - Table Header cell.
<CAPTION ...> ... </CAPTION>: - Specifies the table Caption.

Table widths and heights.

There is some confusion about the support for the WIDTH and HEIGHT attributes within the <TABLE>, <TH> and <TD> elements. I have tried to define the various nuances of these attributes below.

In the <TABLE> element.
Both Netscape and Internet Explorer support the use of WIDTH and HEIGHT "value%" and "pixel_value" settings for this element.

In the <TH> element.
Netscape will support use of the WIDTH "value%" and "pixel_value" for this element (it only supports the HEIGHT attribute for the main <TABLE> element). Internet Explorer supports only use of the "pixel_value" setting for the WIDTH attribute, but both percentage and absolute pixel values for the HEIGHT attribute within this element. If only one header has a WIDTH, or HEIGHT attribute set, then the setting is used for all the columns/rows of the table (for Internet Explorer) that the header is part of. If more than one WIDTH/HEIGHT setting is used for header elements within a table column, or row, then the largest of all the settings will be used. Any setting of the attributes within this element (percentage, or absolute pixel values), will be proportioned according to any percentage, or absolute widths set in the <TABLE> element.

In the <TD> element.
Netscape will support use of the WIDTH "value%" and "pixel_value" for this element (it only supports the HEIGHT attribute for the main <TABLE> element). Internet Explorer supports only use of the "pixel_value" setting for the WIDTH attribute, but both percentage and absolute pixel values for the HEIGHT attribute within this element. If only one cell has a WIDTH, or HEIGHT attribute set, then the setting is used for all the columns/rows of the table that the cell is part of. If more than one WIDTH/HEIGHT setting is used for header elements within a table column, or row, then the largest of all the settings will be used. Any setting of the attributes within this element (percentage, or absolute pixel values), will be proportioned according to any percentage, or absolute widths set in the <TABLE> element.

INDEX

<TABLE> ... </TABLE>

This is the main wrapper for all the other table elements, and other table elements will be ignored if they aren't wrapped inside of a <TABLE> ... </TABLE> element.

The <TABLE> element has the following attributes :

BORDER

This attribute appears in the <TABLE> element. If present, borders are drawn around all table cells. If absent, there are no borders, but by default space is left for borders, so the same table with and without the BORDER attribute will have the same width. By default, tables are rendered without borders. The value should be a pixel value.

CELLSPACING=<value>

This attribute allows control over the space used between cells in a table. The value should be a pixel value.

CELLPADDING=<value>

This attribute allows control over the space inserted between the cell data and cell wall in a table. The value should be a pixel value.

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>

gives the most compact table possible.

WIDTH=<value_or_percent>

This attribute is used to describe the desired width of this table, either as an absolute width in pixels, or a percentage of document width. Ordinarily complex heuristics are applied to tables and their cells to attempt to present a pleasing looking table. Setting the WIDTH attribute overrides those heuristics and instead effort is put into fitting the table into the desired width as specified.

See the note about table widths and heights for some extra information of these attributes.

HEIGHT=<value_or_percent>

This attribute describes the height of the table, either as a particular pixel value, or as a percentage of the display window. As for the WIDTH attribute above, setting this attribute will override the browsers internal display mechanism and it will render the table according to the values given.

ALIGN

Microsoft's Internet Explorer (version 2.0 and above) and Netscape support the ALIGN attribute to the <TABLE> element. Like that used for floating images, it allows a table to be aligned to the left or right of the page, allowing text to flow around the table. Also, as with floating images, it is necessary to have knowledge of the <BR CLEAR=…> element, to be able to organize the text so as to minimize any unwanted clashing.

INDEX

<TR ...> ... </TR>

This specifies a table row. The number of rows in a table is exactly specified by how many <TR> elements are contained within it, regardless of cells that may attempt to use the ROWSPAN attribute to span into non-specified rows.

The <TR> element can have the following attributes.

ALIGN

This controls whether text inside the table cell(s) is aligned to the left side of the row, the right side of the cell, or centred within the cell. Values are left, center, and right.

VALIGN

This attribute controls whether text inside the table cell(s) is aligned to the top of the row, the bottom of the cell, or vertically centred within the cell. It can also specify that all the cells in the row should be vertically aligned to the same baseline. Values are top, middle, bottom and baseline.

INDEX

<TD ...> ... </TD>

This stands for table data, and specifies a standard table data cell. Table data cells must only appear within table rows. Each row need not have the same number of cells specified as short rows will be padded with blank cells on the right. A cell can contain any of the HTML elements normally present in the body of an HTML document. The default alignment of table data is ALIGN=left and VALIGN=middle. These alignments are overridden by any alignments specified in the containing <TR> element, and those alignments in turn are overridden by any ALIGN or VALIGN attributes explicitly specified on this cell. By default lines inside of table cells can be broken up to fit within the overall cell width. Specifying the NOWRAP attribute for a <TD> prevents line breaking for that cell.

<TD ...> ... </TD> can accept the following attributes.

ALIGN

This attribute controls whether text inside the table cell(s) is aligned to the left side of the cell, the right side of the cell, or centred within the cell. Values are left, center, and right.

VALIGN

The VALIGN attribute controls whether text inside the table cell(s) is aligned to the top of the cell, the bottom of the cell, or vertically centred within the cell. It can also specify that all the cells in the row should be vertically aligned to the same baseline. Values are top, middle, bottom and baseline.

WIDTH

This attribute is used to describe the desired width of the cell, either as an absolute width in pixels, or a percentage of table width. Ordinarily complex heuristics are applied to tables and their cells to attempt to present a pleasing looking table. Setting the WIDTH attribute overrides those heuristics and instead effort is put into fitting the table into the desired width as specified.

See the note about table widths and heights for some extra information of these attributes.

HEIGHT=<value_or_percent>

This attribute describes the height of the cell, either as a particular pixel value, or as a percentage of the table width. As for the WIDTH attribute above, setting this attribute will override the browsers internal display mechanism and it will render the table according to the values given.

NOWRAP

If this attribute appears in any table cell (<TH> or <TD>) it means the lines within this cell cannot be broken to fit the width of the cell. Be cautious in use of this attribute as it can result in excessively wide cells.

COLSPAN

This attribute can appear in any table cell (<TH> or <TD>) and it specifies how many columns of the table this cell should span. The default COLSPAN for any cell is 1.

ROWSPAN

This attribute can appear in any table cell (<TH> or <TD>) and it specifies how many rows of the table this cell should span. The default ROWSPAN for any cell is 1. A span that extends into rows that were never specified with a <TR> will be truncated.

INDEX

<TH ...> ... </TH>

This stands for table header. Header cells are identical to data cells in all respects, with the exception that header cells are in a bold FONT, and have a default ALIGN=center.

<TH ...> ... </TH> can contain the same attributes as <TD…> … </TD>.

INDEX

<CAPTION ...> ... </CAPTION>

This represents the caption for a table. <CAPTION> elements should appear inside the <TABLE> but not inside table rows or cells. Like table cells, any document body HTML can appear in a caption.

The <CAPTION> element can accept the following attributes.

ALIGN

The ALIGN attribute controls whether the caption appears above or below the table, and can have the values top or bottom, defaulting to top. Microsoft's Internet Explorer allows use of left, right and center for the alignment of the <CAPTION> element. This forces the caption text to be aligned flush-left, flush-right, or centred within the boundaries of the table.

VALIGN

Microsoft's Internet Explorer allows use of the VALIGN attribute inside the <CAPTION> element. It specifies whether the caption text should be displayed at the top or bottom of the table.

SOME COMMON HTML TAGS

<HTML> ... </HTML>

<HEAD> ... </HEAD>

<TITLE> ... </TITLE>

<BODY> ... </BODY>

Block Formatting Elements

<BASEFONT …>

<BLOCKQUOTE> ... </BLOCKQUOTE>

<BR>

<CENTER> … </CENTER>

<FONT ...> … </FONT>

<H1> ... </H1> Headings

<HR>

<P> ... </P>

<PRE> ... </PRE>

Hypertext Links

<A...> ... </A> Anchor

Information Type and Character Formatting Elements

<IMG...> In-line images

List Elements

<OL> ... </OL>

<UL> ... </UL>

<DL> ... </DL>

Tables

<TABLE> ... </TABLE>

<TR ...> ... </TR>

<TD ...> ... </TD>

<TH ...> ... </TH>

<CAPTION ...> ... </CAPTION>