Welcome to Lesson 1! Modifying existing web pages does not have to be difficult.
There is
no need to learn the entire HTML programming language as this tutorial is designed to
provide a general understanding of the codes. In this lesson the following basic definitions
and relevant tags are discussed:
What is HTML?
What are Tags?
Explanation of Document Structure
Explanation of Document Structure Tags
What is HTML?
HTML (Hyper Text Markup Language) is the language used to write Web pages which
consists of codes (tags) embedded in the text of a document.
What are Tags?
Tags are codes in an HTML document which the browser reads and then interprets for
subsequent display to a reader. Tags are not visible when an HTML document is viewed in a
browser, but their effects are. Tags begin with the opening symbol "<" and end with the
closing symbol ">"; and usually come in pairs, one that begins an action and one that ends
it.
Below is an example of an HTML tag and its respective browser display:
HTML Code Browser Display
I want to
<B> emphasize </B> this!
I want to emphasize this!
* Do not worry about memorizing all the tags described in these lessons. Any tags that are
required are listed in the accompanying HTML Reference Guide which can be printed for
reference purposes.
Explanation of Document Structure
Each HTML document has a minimum number of tags. Here is the very least HTML code that
can be called a "page":
<HTML>
<HEAD>
<TITLE>This is my page Title!</TITLE>
</HEAD>
<BODY>
This is my message to the world!
</BODY>
</HTML>
NOTE: HTML is not case sensitive. <title> is equivalent to <TITLE> or <TiTlE>.
Explanation of Document Structure Tags
<HTML>...</HTML> Encloses the entire HTML document.These
tags let the browser know to start reading
and displaying the information presented
within.
<HEAD>...</HEAD> The <HEAD> element contains all information
about the document in general. It contains
HTML elements that describe the document's
usage and relationship with other documents.
<TITLE>...</TITLE> The <TITLE> is contained in the <HEAD> of
the document. It is displayed at the top of the
browser window and on the bookmark list, so
it is important to choose something
descriptive, unique, and relatively short.
<BODY>...</BODY> The <BODY> element contains all the
information which is part of the document.
There are a number of different attributes for
the <BODY> tag (attributes are the elements
included within brackets that change the
behavior or appearance of a tag). They are:
"BACKGROUND=" Specifies the image tile
that is to appear in the document's
background.
EXAMPLE:
<BODY BACKGROUND= "picturename.gif">
</BODY>
"BGCOLOR=" Sets the background color of
the page. In order to do this a six digit
hexadecimal number denoting a red-green-
blue color value is included. Thus "000000" is
black and "FFFFFF" is white and every other
colour in between is described using these 6
characters in different combination. In
addition to the hexadecimal system, there are
sixteen color names that (other than black)
that can be included in the tags. They are:
Aqua, Red, Green, Blue, Violet, Fuchsia, Gray,
Lime, Maroon, Navy, Olive, Purple, Silver,
Teal, White, and Yellow.
EXAMPLE:
<BODY BGCOLOR="#FFFFFF">
This page has a white background.
</BODY>
OR
EXAMPLE:
<BODY BGCOLOR="WHITE">
This page has a white background.
</BODY>
"LINK=" Sets the hexadecimal color code for
links that have not yet been visited.
EXAMPLE:
<BODY LINK="#0C6249">
This page has blue links
</BODY>
VLINK= Sets the hexadecimal color code for
links the user has already visited.
EXAMPLE:
<BODY VLINK="#800080">
This page has purple links after being visited
</BODY>
"ALINK=" Sets color of links that are active
(ie., the color they turn when the link is
clicked on).
EXAMPLE:
<BODY ALINK="#FFB50C">
This page has yellow active links
</BODY>
"TEXT=" Sets the hexadecimal color code for
the default text color.
EXAMPLE:
<BODY TEXT="#00006A">
This page has blue text
</BODY>
The <BODY> tags for this document are as
follows:
<BODY BACKGROUND="spiral_ruled.gif"
BGCOLOR="#FFFFFF" TEXT="#00006A"
LINK="#005A5A" VLINK="800080"
ALINK="#FFB50C">
This lesson introduces a number of basic tags that allow an HTML page to be formatted -
much in the same way that word processors format documents. The following topics are
covered:
Character Formatting
Paragraphs
Paragraph Alignment
Forced Line Breaks
Spaces
Horizontal Rules
Character Formatting:
The Bold <B></B> element specifies that the enclosed text should be displayed in boldface.
The Underlined <U></U> element specifies that the enclosed text should be displayed
underlined.
The Italic <I></I> element specifies that the enclosed text should be italicized.
Below are these HTML tags beside samples of their respective browser displays:
HTML Code Browser Display
This text is <B>bold!</B> This text is bold!
This text is <I>italicized.</I> This text is italicized.
This text is <U>underlined</U>. This text is underlined.
Paragraphs
In HTML you indicate paragraphs with the <P> and </P> elements. Without these elements
the document becomes one long paragraph. Likewise, browsers ignore any indentations or
blank lines in the HTML code.
Thus the examples below, although coded differently, are all displayed the same way:
HTML Code Browser Display
<P> This is a very short This is a very short paragraph to
paragraph to illustrate my illustrate my point.
point.</P> <P>And this is the
second paragraph. </P> And this is the second paragraph.
<P> Although this Although this is written differently
is written differently with lots of carriage returns it still
with lots of carriage returns only displays the paragraphs
it still only displays when you put in the Paragraph
the paragraphs when Tag.
you put in the Paragraph
Tag.</P> <P> Like so.</P> Like so.
NOTE: The </P> closing tag may be omitted. This is because browsers understand that
when they encounter a <P> tag, it means that the previous paragraph has ended.
To preserve readability when composing HTML files, separate paragraphs with blank lines.
As mentioned above, browsers will ignore blank spaces inserted into source code.
Paragraph Alignment
Paragraph alignment can be manipulated by including either the RIGHT, LEFT, or CENTER
(note the Americanized spelling) attributes within the <P> tag as shown below:
HTML Code Browser Display
<P ALIGN=left> This paragraph
is left aligned. </P>
This paragraph is left aligned.
<P ALIGN=CENTER> This is a
centered paragraph. </P>
This is a centered paragraph.
<P ALIGN=RIGHT> This
paragraph is right aligned. </P>
This paragraph is right aligned.
Forced Line Breaks
The line break tag <BR> can be used to control how browsers render text. When an HTML
document is viewed the text normally does a word-wrap at the end of a line. If a text break
is desired before the end of a line, use the <BR> tag to force a line break without any extra
space between lines. This element has no closing tag.
HTML Code Browser Display
CN Tower<BR> CN Tower
301 Front Street West<BR> 301 Front Street West
Penthouse<BR> Penthouse
Toronto, Ontario M5V 2T6<BR> Toronto, Ontario M5V 2T6
Canada<BR> Canada
Using the <P> tag instead of the <BR> tag for short lines of text, such as the above
example, would have resulted in unwanted additional white space.
Horizontal Rules
The horizontal rule <HR> tag produces a horizontal line the width of the browser window.
Horizontal rules are useful for separating major sections of a document. The length of a rule
can be varied by using the "WIDTH=" and "SIZE=" attributes.
HTML Code Browser Display
Horizontal Rules rule!<HR Horizontal Rules rule!
SIZE=3 WIDTH=80%>
There are two other attributes that can be used with the <HR> tag. They are:
ALIGN= RIGHT, LEFT, or CENTER
NOSHADE Causes the rule to appear solid black.
In this lesson we discuss two more attributes
commonly used in the formatting of HTML
documents: lists and fonts.
Lists
Fonts
Lists
HTML provides the means for producing two
types of lists: unordered (ie., unnumbered)
and ordered (ie., numbered) lists.
Unordered Lists:
An unordered list typically is a bulleted list of
items. This is probably the most common type
of list on the Web. The <UL> tag opens an
unordered list while </UL> closes it. Between
these tags are placed list items with an <LI>
tag as follows:
Browser
HTML Code Display
<UL> red
<LI> red
yellow
<LI> yellow blue
<LI> blue
</UL>
Ordered Lists:
An ordered list is formatted exactly the same
as an unordered list, except that <OL> tags
are used instead of <UL>. In an ordered list,
sequential numbers are generated
automatically, as shown below:
Browser
HTML Code Display
<OL>
1. purple
<LI> purple
2. orange
<LI> orange 3. green
<LI> green
</OL>
Note: You can "nest" lists too (ie., subdivide
lists), but use this feature sparingly as too
many nested items can get difficult to follow.
Fonts
The <FONT> tag sets a font's size, typeface
and color.
Font Sizes:
In HTML, font sizes range from 1-7, with 1
being the smallest. Font sizes 2 and 3 are the
most commonly used. If a font size is not
specified the default setting is 3.
Font Size 1
Font Size 2
Font Size 3
Font Size 4
Font Size 5
Font Size 6
Font
Size 7
Font Typefaces:
When HTML was first introduced there was
only one font available. And while current
versions of HTML and newer browsers allow
greater flexibility in specifying preferred fonts
for an HTML document to be displayed in,
ultimately the choice is limited by which fonts
end-users have installed on their systems
(even then users may decide to set their
browsers to override preferred font settings).
A few commonly supported fonts are:
Arial
Lucida Sans
Times New Roman
Verdana
Helvetica
Impact
Comic Sans MS
Font Colours:
Using the <FONT> tag, text can be instructed
to display in any colour under the sun. One
must be careful though to choose a colour that
is readable on whatever background colour
has been selected. Text colors are chosen
either according to a hexadecimal numbering
system denoting a red-green-blue color value,
or by specifying one of sixteen pre-defined
colour names that (other than black) can be
included in the <FONT> tag. These sixteen
colours are:
Aqua - Aqua
Red - Red
Green - Green
Blue - Blue
Violet - Violet
Fuchsia - Fuchsia
Gray - Gray
Lime - Lime
Maroon - Maroon
Navy - Navy
Olive - Olive
Purple - Purple
Silver - Silver
Teal - Teal
White - White
Yellow - Yellow
The font attributes described above are
included in the <FONT> tag as follows:
Browser
HTML Code Display
<FONT
This is a
SIZE=2>This is a
size two
size two
font
font</FONT>
<FONT
FACE="Comic Sans This font is
MS">This font is Comic Sans
Comic Sans MS
MS</FONT>
<FONT
COLOR="Fuchsia"> This text
This text is Fuchsia
is Fuchsia
</FONT>
This lesson introduces how images and other
graphical elements are incorporated into an
HTML document, along with some basic image
attributes.
Images - An Introduction
o Image Source
o Image Size
Image Attributes
o Image Alignment
o Image Alignment with Text
o Alternate Text
Images - An Introduction
The <IMG> tag is used to incorporate
graphics (typically icons or pictures) into an
HTML document. Any image can be added to a
web page, provided it is in GIF or JPEG file
format. Also bear in mind that the larger an
image's file size is, the longer it will take to
download in a viewer's browser. "Image
Source" and "Image Size" are the minimum
attributes required for displaying an image.
Image Source:
The image source tag <SRC=> tells the
browser where the image is physically stored
so that it can retrieve and display it. It is
important to remember that file names are
case sensitive and must be typed correctly.
Another important point to remember is that if
an image is not stored in the same directory
as the HTML documents, then the directory
name must be included with the file name.
Programmers commonly store images in a
separate directory - often aptly titled
"images". Thus an image source might appear
written in HTML code as
SRC="images/picture.gif". If an image is
incorrectly named, missing or is listed in the
wrong directory, a "broken graphic" icon will
be displayed.
Image Size:
Although not absolutely required, it is good
practise to include HEIGHT and WIDTH
information within the <IMG> tag. This
speeds up the downloading process by
allowing faster-loading text to load around
areas where images will eventually appear.
HEIGHT and WIDTH values are measured in
pixels. Do not try to make the image smaller
or larger by adjusting these attributes as you
risk distorting the image by doing so.
Browser
HTML Code Display
<IMG
SRC="woman.gif"
WIDTH=32
HEIGHT=32>
Image Attributes
Image Alignment:
Use the LEFT, RIGHT or CENTER attributes
within the <IMG> tag to align images relative
to the browser window. See below for
examples of how these attributes are used:
Browser
HTML Code Display
<IMG
SRC="woman.gif"
WIDTH=32 HEIGHT=32
ALIGN=LEFT>
<CENTER><IMG
SRC="woman.gif"
WIDTH=32
HEIGHT=32></CENTE
R>
<IMG
SRC="woman.gif"
WIDTH=32 HEIGHT=32
ALIGN=RIGHT>
Image Alignment with Text:
By default the bottom of an image is aligned
with any text that follows, as shown below:
HTML Code Browser Display
<IMG
SRC="hand.gif
" WIDTH=108
HEIGHT=79>T
his hand is This hand is very
very big! big!
Vertical placement of text beside images can
be altered from the bottom default setting by
using the attributes ALIGN=TOP or
ALIGN=CENTER, as shown below:
Browser
HTML Code Display
<IMG
SRC="hand.gif"
WIDTH=108
HEIGHT=79
ALIGN=TOP>This This hand is
hand is big! big!
<IMG
SRC="hand.gif"
WIDTH=108
HEIGHT=79
ALIGN=CENTER> This hand is
This hand is big! big!
Yet another option is to force text to appear
under an image rather than beside it. For this
effect, use the <BR CLEAR=ALL> tag to place
a line break after an image, which will cause
the text that follows to begin on the next line.
Browser
HTML Code Display
<IMG
SRC="hand.gif"
WIDTH=108
HEIGHT=79
ALIGN=TOP><B
R This hand is
CLEAR=ALL>Thi big!
s hand is big!
