HTML TAGSHTML codes are not case sensitive. Most HTML tags need an end-tag to end it. An example of an HTML tag is <HEAD>, and the end tag for this is </HEAD>.
Learning HTML Basics
©
Brian Brown, 1997-2000. All rights reserved.
| 1 | Introduction | 2 | HTML Tags | 3 | Bold |
| 4 | Formatting | 5 | Large Text | 6 | Italics |
| 7 | Page Title | 8 | Horizontal Rule | 9 | Images |
| 10 | Hyper-Links | 11 | Text Color, Face and Size | 12 | Background Images |
| 13 | Background Sounds | 14 | Images as Hyper-Links | 15 | Video Files |
| 16 | Reserved Characters | 17 | Embedding Objects |
INTRODUCTION
HTML pages are used for specifying web page content. They contain
information and instructions to web browsers that inform them of
what to display, and how it should be displayed. It is a simple
format, easily learnt, and can support a number of media devices,
such as sound, graphic images, and video.
HTML documents are ASCII files, and are created using a simple text editor (or an editor like Front Page). With a text editor, you cannot see what the code looks like in the browser, unless you save the page and then load it into the browser for viewing. WYSIWYG (What you see is what you get) editors like Front Page allow you to view the page as it is constructed in the editor window.
One advantage of using a simple text editor is that you have more control over the HTML code, the disadvantage is you must know the code and have a picture in your mind as to what it looks like. Another disadvantage, is since HTML is becoming more complex, it is harder to write, and sophisticated editors like Front Page support the advanced features making it easier for you to implement them.
HTML is a series of tags enclosed in < and > brackets. For instance, <HEAD> is an HTML tag that defines a head section of an HTML document. Certain characters are reserved, such & < > which are interpreted as HTML codes.
Each HTML page adheres to a basic structure. This looks like
| <html> <head> <title>Title of Document</title> </head> <body> Textual Information to be displayed </body> </html> |
When viewed in the browser, this page looks like,
| Textual Information to be displayed |
HTML TAGS
HTML codes are not case sensitive. Most HTML tags need an end-tag
to end it. An example of an HTML tag is <HEAD>, and the end
tag for this is </HEAD>.
BOLD TYPE
The BOLD print tag starts with <B> and ends with
</B> so that all text in-between the tags is printed in
bold.
Example of using the bold tag
SPACES, TABS AND
FORMATTING
Newlines, spaces and tabs are ignored (single spaces accepted).
Example of spaces in the input text
This line contains heaps of spaces.
To format text literally, the <PRE> and </PRE> tags are used. This is how the above line that contains all the spaces was inserted into this document.
LARGE SIZE TEXT
There are 6 header sizes, from H1, the smallest, to H6, the
largest. The HTML tags <H1> to <H6> are
used to define the size of text. The normal size is about
<H2>.
Examples of using the <H.> tag to implement larger style text
ITALIC TEXT
The ITALIC print tag starts with <I> and ends with
</I> so that all text in-between the tags is printed in
italics.
Example of using the italics tag
A PAGE TITLE
A page title, specified on an HTML page, appears in the title
window of the browser.
A HORIZONTAL
DIVIDER
This is used for breaking pages up, by separating sections using
a horizontal line.
In addition, a number of effects can be applied to a horizontal rule, such as color, size and width tags.
ADDING IMAGES
Graphic images are added to an HTML page using the <IMG>
tag.
This is an
icon LINKING TO OTHER
PAGES
This is called a hyper-link. It shows up in the document as
underlined text, and allows the user to load another page.
FONT SIZES, FACES
AND COLOR
You can specify the font face, size and color using the
<FONT> tag. Some systems may not have the desired font
installed on their system.
BACKGROUND IMAGES
An image (.gif or .jpg) can be used as a background. It should be
reasonably pale so as not to distract from the displayed
information.
You can also specify a background color rather than an image. The sixteen basic colors are AQUA, BLACK, BLUE, FUCHSIA, GRAY, GREEN, LIME, MAROON, NAVY, OLIVE, PURPLE, RED, SILVER, TEAL, WHITE, and YELLOW.
BACKGROUND SOUNDS
A background sound is loaded and plays when the HTML page is
loaded by the browser. The HTML tag <BGSOUND> specifies the
filename to play (which is generally a .wav file for window
systems), whilst the LOOP statement specifies the number of times
to play the sound.
IMAGES AS
HYPERLINKS
It is common to use little pictures or Icons as links to other
pages, for example, the little red up triangle's used in this
document are used as hyperlinks to the top of this page.
EMBEDDED VIDEO
Some browsers such as Internet Explorer support video embedded on
the HTML page. The <IMG> tag is extended to include DYNSRC
which specifies the location of the video file, LOOP which
specifies how many times to play, and START, which specifies how
the movie will play (MOUSEOVER or FILEOPEN).
You should be aware that browsers that do not support embedded video need the SRC statement so a graphic image is displayed if the movie file is not found or is not supported.
Using the Reserved
Characters & < > as text
As was stated earlier, the characters & < > are
reserved to implement HTML tags. To use these as text requires
the use of a special code sequence,
| HTML Tag | Resultant Output |
| & | & |
| < | < |
| > | > |
| © | © |
| " | " |
| | Inserts a space |
| ® | ® |
Embedding a video or sound object
One of the problems of using the background sound tag is that is it only
supported by Internet Explorer. To use video and sound that will
play in both Netscape Navigator and Internet Explorer, use the
EMBED tag. It's format is shown below.
<embed src="../../sounds/intro2.wav" border="0" width="145" height="60" autostart="TRUE"> </embed>
The src is the path to the object, the height and width is the screen space allocated to displaying the object.
© Brian Brown, 1997-2000. All rights reserved.