Creating HTML

Creating HTML

HTML, Hypertext mark-up language is the format used to create documents for the World Wide Web (WWW).

While most WWW browsers (eg Netscape 3) will display any document written in plain text, HTML allows you to format the text and to include multimedia elements and hyperlinks to resources all over the Internet. Creating an HTML document involves using and placing tags in appropriate places to indicate the formatting required.

HTML Tags

* All tags are enclosed between the brackets < and >
* Most tags are paired eg <b> and </b> indicating any text typed between the tags should be bold.

*Some tags are singular eg <p> indicating a paragraph break.

* Tags are case insensitive, <H2> is equivalent to <h2>. It is good to used capital letters because it aids in reading the HTML source document.

A HTML Document

Example 1 and 2 shows a basic HTML document which demonstrates the concept of markup with tags. Important elements of this example are:

HTML documents begin and end with the tags <HTML> and </HTML>. Most tags have a beginning and a ending form to show the part of the document to which they apply.

It is customary to include heading information at the top of an HTML document and this is achieved using the <HEAD> and </HEAD> tags.

The title of the document shows in the browser's title bar and is formed by enclosing a title within the <TITLE> and </TITLE>

<H> Used to make the text that follows displayed in a large and bold format. HTML provides 6 levels of headings which can be used to provide structure within a document. These tags change the size of the text ranging from large to small. It is usual practice to use the headings in a nested fashion where each represents a different level within the document. For example:

<H1> First level heading </H1>

<H2> Second level heading </H2>

<H3> Third level heading </H3>

<H4> Fourth level heading </H4>

<H5> Fifth level heading </H5>

<H6> Six level heading </H6>

<P> Makes the text block that follows into a separate paragraph.

The <BODY> tag is used for that part of the document that is normally displayed in the body of the web page and this is indicated using the paired tag <BODY> at the beginning of the page and </BODY> at the end of the page. It can also be used to set a colour background and text print. For example <BODY BGCOLOR = "blue" TEXT = "white">.

Example 1 and 2

<TITLE> Example 1</TITLE>

<P>

HTML, Hypertext mark-up language is the format used to create documents for the World Wide Web (WWW).

<P>

While most WWW browsers (eg Netscape 3) will display any document written in plain text, HTML allows you to format the text and to include multimedia elements and hyperlinks to resources all over the Internet. Creating an HTML document involves using and placing tags in appropriate places to indicate the formatting required.

Line Breaks

Example 3

Paragraph and Line Breaks

Normal line feeds and tabs do not display in an HTML document. To lay out text in an HTML document special tags are necessary.

Paragraphs

Normal paragraphs are created with the <P> tag. This tag, placed ahead of a block of text, causes blank line to be displayed before the block, ie. a new paragraph.

Line Breaks

Line breaks are created using the <BR> tag which inserts a line break but no blank line. Remember, that the <P> and <BR> tags are separators and as such do not require a finishing command such as </P>.

Modifiers

Many HTML tags can contain modifiers that provide extra information about how the text is to be formatted and displayed. For example, the <P> tag, can contain an alignment modifier:

If no modifier is used with the <P> tag, the text in the following paragraph is aligned to the left of the page.

HTML Style

It is good practice to insert new lines and spaces into the HTML document when using <P> and <BR> to give the document some form reflecting how you would like it to finally appear. Remember that the line feeds and extra blank spaces in your document will not show when displayed by the browser.

Horizontal Rules
Example 4

Horizontal rules are used in HTML to format documents by displaying horizontal lines between sections. The <HR> tag inserts a horizontal rule in the page. The lines can be used to separate blocks of text and to enhance the appearance of the page. In its simplest form, <HR> placed in a document causes a thin line to be inserted in the page at that point.

<HR> is an empty element and does not require an ending </HR>

Most browsers support four modifiers to this tag. The size, width, alignment and shading of the rule can be varied by using appropriate modifers to the tag.

Size

This specifies the vertical width, in pixels, of the dividing line.

Width

This specifies the horizontal width, in pixels or as a percentage of the display width, of the dividing line.

<HR SIZE = 8 WIDTH = 50> or

Specifies the alignment of the dividing line on the page. The default is centered. Other options are left and right.

Noshade

The line can be drawn as a solid black bar, the default is a shaded bar.

Characters Styles
Example 5

Characters in HTML documents can be formatted using a range of character tags. These are placed around the text to be formatted. Character style tags work as containers and require a finishing element.

Character Tags

<EM>Emphasis (usually italics)</EM>

<STRONG>Stronger emphasis (usually bold)</STRONG>

<TT> Fixed width typewriter font</TT>

<B>Boldface where available </B>

<BLINK>Flashing text</BLINK>

<I>Italics (may be rendered as slanted in some cases)</I>

<U>Underline (may be rendered as slanted in some cases)</U>

<BIG>Bigger text</BIG>

<SMALL>Smaller text</SMALL>

<SUB>Subscripted text</SUB>

<SUP>Superscripted text</SUP>

<marquee>A Moving banner- PC machines</marquee>

<blink>Blinking text- Macintosh machines</blink>

Font Size

It is possible to vary the font size using special HTML tags. There are two ways to do this:

1. <FONT SIZE = n>
The value of n can range from 1 to 7.

1-2 - small size

3 - normal size

4-7 - larger sizes

2. The second is to specify a relative size

With this tag, the font size is increased or reduced by the size of n.

Backgrounds and Text

Example 6
It is possible to set the background and text colours for the complete HTML document by using modifiers of the <BODY> tag.

Background Colour

To set a new background colour, the background colour is used within the <BODY> tag.

Text Colour
The modifier used to set text colour is the TEXT command.

To set background and text colour together, both modifiers are used within the <BODY> tag.

Hexadecimal Codes

Colours on the computer screen are displayed as varying mixtures of 3 basic colours, red, green and blue. You can make your own HTML colours by specifying various blends of red, green and blue as an HTML code, "#rrggbb" in the <BODY> tag.

In this code, you must show a number for red, green and blue between as a hexadecimal number. This number system has a base of 16 and 256 numbers can be expressed as 2 digits.

123456789ABCDEF,

1112131415161718191A1B1C1D1E1F,

2122...

F1F2F3F4F5F6F7F8F9FAFB FCFDFEFF.

Try out the following colour codes for yourself:

"#FF0000" (maximum red, no green, no blue) red

"#00FF00" ( no red, max green, no blue) green

"FFFFFF" (maximum red, green and blue) white

A list of colours and their RGB codes is available at: http://www.exoticblades.com/tamara/colorchart.html

Lists

Example 7
Ordered Lists

Ordered lists display in a numbered or indented form. An ordered list uses the <OL> tag and the individual items are designated with the <LI> tag.

<OL>

<LI> item 1

<LI> item 2

</OL>

Modifiers can be used with the ordered list to specify the:

* type of the index as either of A, a, I, i, or 1.

eg A B C D or a, b, c, d, or i, ii, iii, iv or I, II, III, IV or 1,2,3, 4.

* starting value of the index.

Unordered List
Unordered lists use bullets to mark off each item in the list. An unordered list uses the <UL> tag and the individual items are designated with <LI>.

<UL>

<LI> item 1

<LI> item 2

</UL>

It is possible to specify the type of index as either of: Disc, Circle, or Square.

Definition List
<>Definition lists provide the means to display a list of titles and descriptions. A definition list uses the <DL> tag. Individual titles are designated with the tag <DT> while the definition itself is tagged <DD>.

<DL>

<DT> Title 1

<DD> Description 1

<DT> Title 2

<DD> Description 2

</DL>

Displaying Images

Example 8
Inserting an Image

The <IMG> tag is used for inserting an image into a WWW document. In this tag, you show the name of the image that is to be displayed.

The browser displays the image adjacent any text. The image is treated like a text character.

Defining the Path

When an image is stored in a folder or directory away from the html document, the path must be included in the <IMG> tag.

It is possible to display GIF images in your document that are stored somewhere else on the Internet by specifying the URL of the image.

Background Images

The Background modifier for the body tag can be used to create a tiled background with an image. The HTML code for this is of the form:

This causes the images, fabric.gif, to be placed in a background and tiled to fill the entire background.

Image Alignment

Example 9

Often it is useful to be able to align the text that accompanies an image. The align modifier is available to assist with placement.

There are a wide range of alignment options that can be used:

TOP- The text aligns with the top of the image.

MIDDLE- The text aligns with the middle of the image.

BOTTOM- The text aligns with the bottom of the image.

LEFT- The image aligns with the left margin, and the text wraps around the right.

RIGHT- The image aligns with the right margin, and the text wraps around the left.

Width and Height

These modifiers help to transfer image data more quickly.

Border

This modifier specifies the thickness in pixels of the border around an image.

Space
These modifiers set the amount of vertical space (left and right) and horizontal space (above and below) between the image and the text, in pixels.

Hyperlinks

Example 10
Creating a Link
The form of the tag needed to load another WWW document is as follows:

This tag requires an ending </A>

In order to indicate where to click to make a link, text is usually entered between the <A HREF..> and </A>. For example:

Click <A HREF = "http://www.cowan.edu.au">http://www.cowan.edu.au</A> to make a link.

Link Colours

When not specified, links in a document are coloured according to setting in the browser, usually blue for a initial link and purple for visited links.

The LINK modifier enables you to set particular link colours for a document. They are placed in the BODY tag. For example:

* LINK sets the initial link colour, the colour of the link will appear in the document before it is selected;

*VLINK sets the visited link colour, the colour of the link after it has been selected;

*ALINK sets the colour of the active link, the colour of the link when the mouse button is down.

Links within a Page

Example 11
Often it is helpful to be able to put links within the one page. Many WWW pages use this facility. They contain, for example, an index, at the top of the page and a list of the contents each of which contains a link to the relevant place.

To make this form of linking, it is necessary to specify 2 things:

*the link, where to clink, and

*the anchor, where the click will take the user.

Marking the Anchor

A particular places in an HTML document can be marked as the destination of a link by using the <A> tag with the NAME modifier.

Marking the Link

To create a link to this destination from anywhere in the document, we use the anchor tag with a special HREF modifier:

Marking Links in Other Documents
Places within other HTML documents require the document to be named first. For example to link to part1 in names.htm

Linking Images

Example 12
In the previous sections, links were made by clicking on text. It is also possible to make images, such as buttons, act as the linking device.

To achieve this is a matter of inserting the image to be used as the link within the <A HREF> tag instead of text.

For example, if the image right.gif is a button:

<A HREF = "http://www.cowan.edu."

Alignment

Buttons and text can be aligned using the align modifier placed within the <IMG> tag. For example:

Border

The border around the image can be varied by using the border modifier within the <IMG> tag. For example:

BORDER = 0 no border

BORDER = 1 thin border

BORDER = 2 thick border

The align and border commands are placed within the same <IMG> tag.

Tables, Borders, Alignment

Example 13

Tables

The table is defined using the <TABLE> tag. Each row in the table is indicated by <TR> and each column in a <TR> is specified by <TD>. Within each row it is possible to store table data <TD> or a table heading <TH>. For example:

<TABLE>

</TABLE>

Captions

Within a table, it is possible to specify a caption which is displayed below the table. For example:

<CAPTION> This is the caption</CAPTION>

The caption can be aligned using the standard alignment commands, top, middle and bottom.

<CAPTION ALIGN = "bottom">This is the caption</CAPTION>

Borders

For any table, it is possible to specify a border. For example:

The width of the border can be set by specifying the width in pixels. For example:

BORDER = 8

Example: 1

<TABLE BORDER=8> <TR><TD>and

</TABLE></TR></TD>

Example: 2

<TABLE BORDER=8 CELLPADDING=12 CELLSPACING=12> <TR><TD>and

</TABLE></TR></TD>

Alignment

Tables can be centred on the screen using the CENTER tag.

Example: 3

<CENTER><TABLE BORDER=8><TR><TD>and

</TABLE></TR></TD></CENTER>

Home Page