Scribd
Upload
77 views

What Is HTML?: What Is HTML? What Are Tags? Explanation of Document Structure Explanation of Document Structure Tags

This document provides an introduction to basic HTML tags and document structure. It defines common tags like <HTML>, <HEAD>, <BODY>, and <TITLE> and describes how they establish the overall structure of an HTML page. Character formatting tags, paragraphs, and alignment are also covered.

Uploaded by

anthony
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
77 views

What Is HTML?: What Is HTML? What Are Tags? Explanation of Document Structure Explanation of Document Structure Tags

This document provides an introduction to basic HTML tags and document structure. It defines common tags like <HTML>, <HEAD>, <BODY>, and <TITLE> and describes how they establish the overall structure of an HTML page. Character formatting tags, paragraphs, and alignment are also covered.

Uploaded by

anthony
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

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!

You might also like