Introduction to
HTML
1
Definitions
W W W – World Wide Web.
HTML – HyperText Markup Language –
The Language of Web Pages on the World
Wide Web.
HTML is a text formatting language.
URL – Uniform Resource Locator.
Browser – A software program which is
used to show web pages.
2
“Normal text” surrounded by
bracketed tags that tell browsers
how to display web pages
Pages end with “.htm” or “.html”
HTML Editor – A word processor
that has been specialized to make
the writing of HTML documents
more effortless.
3
Tags
Codes enclosed in brackets
Usually paired
<TITLE>My Web Page</TITLE>
Not case sensitive
<TITLE> = <title> = <TITLE>
4
Choosing Text Editor
There are many different programs that you
can use to create web documents.
HTML Editors enable users to create
documents quickly and easily by pushing a
few buttons. Instead of entering all of the
HTML codes by hand.
These programs will generate the HTML
Source Code for you.
5
Choosing Text Editor
HTML Editors are excellent tools for
experienced web developers; however; it
is important that you learn and understand
the HTML language so that you can edit
code and fix “bugs” in your pages.
For this Course, we will focus on using the
standard Microsoft Windows text editors,
NotePad. We may use also textpad.
6
Starting NotePad
NotePad is the standard text editor that
comes with the microsoft windows
operating system. To start NotePad in
windows 9x or XP follow the steps
bellow:
Click on the “Start” button located on
your Windows task bar.
Click on “Programs” and then click on the
directory menu labeled “Accessories”.
Locate the shortcut “NotePad” and click
the shortcut once. 7
HTML Page Creation & Editing
In this chapter you will learn to create HTML
pages with a standard text editor.
Objectives
Upon completing this section, you should be
able to
1. Choose a Text Editor.
2. Create a Basic Starting Document.
3. Understand and set Document Properties.
4. View Your Results in a Browser. 8
Creating a Basic Starting
Document
<HTML>
<HEAD>
<TITLE>KFUEIT</TITLE>
</HEAD>
<BODY>
This is what is displayed.
</BODY>
</HTML>
9
Setting Document Properties
Document properties are controlled
by attributes of the BODY element.
For example, there are color settings
for the background color of the page,
the document’s text and different
states of links.
10
Color Codes
• Colors are set using “RGB” color codes,
which are, represented as hexadecimal
values. Each 2-digit section of the code
represents the amount, in sequence, of
red, green or blue that forms the color. For
example, a RGB value with 00 as the first
two digits has no red in the color.
11
Main Colours
12
16 Basic Colors
13
Color Codes
1. WHITE 1. #FFFFFF
2. BLACK 2. #000000
3. RED 3. #FF0000
4. GREEN 4. #00FF00
5. BLUE 5. #0000FF
6. MAGENTA 6. #FF00FF
7. CYAN 7. #00FFFF
8. YELLOW 8. #FFFF00
9. AQUAMARINE 9. #70DB93
10. BAKER’S CHOCOLATE 10. #5C3317
11. VIOLET 11. #9F5F9F
12. BRASS 12. #B5A642
13. COPPER 13. #B87333
14. PINK 14. #FF6EC7
14
15. ORANGE 15. #FF7F00
Background Color
It is very common to see web pages with
their background color set to white or some
other colors.
To set your document’s background color,
you need to edit the <BODY> element by
adding the BGCOLOR attribute. The
following example will display a document
with a white background color:
<BODY BGCOLOR=“#FFFFFF”></BODY>
15
TEXT Color
The TEXT attribute is used to control
the color of all the normal text in the
document. The default color for text is
black. The TEXT attribute would be
added as follows:
<BODY BGCOLOR=“#FFFFFF”
TEXT=“#FF0000”></BODY>
In this example the document’s page
color is white and the text would be red. 16
LINK, VLINK, and ALINK
These attributes control the colors of the different link
states:
1. LINK – initial appearance – default = Blue.
2. VLINK – visited link – default = Purple.
3. ALINK –active link being clicked–default= Yellow.
The Format for setting these attributes is:
<BODY BGCOLOR=“#FFFFFF” TEXT=“#FF0000”
LINK=“#0000FF”
VLINK=“#FF00FF”
ALINK=“FFFF00”> </BODY> 17
Using Image Background
The BODY element also gives you ability of
setting an image as the document’s background.
An example of a background image’s HTML
code is as follows:
<BODY BACKGROUND=“hi.gif”
BGCOLOR=“#FFFFFF”></BODY>
18
Headings, Paragraphs, Breaks & Horizontal
Rules
In this chapter you will add headings to your page, insert
paragraphs, add some breaks, and add horizontal
rules.
Objectives
Upon completing this section, you should be able to
1. List and describe the different Heading elements.
2. Use Paragraphs to add text to a document.
3. Insert breaks where necessary.
4. Add a Horizontal Rule.
19
Headings, <Hx> </Hx>
Inside the BODY element, heading elements
H1 through H6 are generally used for major
divisions of the document. Headings are
permitted to appear in any order, but you will
obtain the best results when your documents
are displayed in a browser if you follow these
guidelines:
1. H1: should be used as the highest level of heading, H2
as the next highest, and so forth.
2. You should not skip heading levels: e.g., an H3 should
not appear after an H1, unless there is an H2 between
them.
20
Headings, <Hx> </Hx>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
Heading 1
<H2> Heading 2 </H2> Heading 2
<H3> Heading 3 </H3>
<H4> Heading 4 </H4> Heading 3
<H5> Heading 5 </H5> Heading 4
<H6> Heading 6 </H6> Heading 5
</BODY> Heading 6
</HTML>
21
Paragraphs, <P> </P>
Paragraphs allow you to add text to a
document in such a way that it will
automatically adjust the end of line to suite
the window size of the browser in which it
is being displayed. Each line of text will
stretch the entire length of the window.
22
Paragraphs, <P> </P>
<HTML><HEAD>
<TITLE> Example Page</TITLE> Heading 1
</HEAD> Paragraph 1,….
<BODY></H1> Heading 1 </H1>
<P> Paragraph 1, ….</P>
<H2> Heading 2 </H2>
Heading 2
Paragraph 2,….
<P> Paragraph 2, ….</P>
<H3> Heading 3 </H3>
<P> Paragraph 3, ….</P>
Heading 3
Paragraph 3,….
<H4> Heading 4 </H4>
<P> Paragraph 4, ….</P> Heading 4
<H5> Heading 5 </H5> Paragraph 4,….
<P> Paragraph 5, ….</P>
<H6> Heading 6</H6>
Heading 5
<P> Paragraph 6, ….</P> Paragraph 5,….
</BODY></HTML> Heading 6
Paragraph 6,….
23
Break, <BR>
Line breaks allow you to decide where the text
will break on a line or continue to the end of the
window.
A <BR> is an empty Element, meaning that it
may contain attributes but it does not contain
content.
The <BR> element does not have a closing tag.
24
Break, <BR>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY> Heading 1
<H1> Heading 1 </H1> Paragraph 1,….
<P>Paragraph 1, <BR>
Line 2 <BR> Line 3 <BR>…. Line 2
</P> Line 3
</BODY> ….
</HTML>
25
Horizontal Rule, <HR>
The <HR> element causes the
browser to display a horizontal
line (rule) in your document.
<HR> does not use a closing tag,
</HR>.
26
Horizontal Rule, <HR>
Attribute Description Default Value
Height of the rule in
SIZE 2 pixels
pixels
Width of the rule in
WIDTH pixels or percentage 100%
of screen width
Draw the rule with a Not set
NOSHADE flat look instead of a
3D look (3D look)
Aligns the line (Left,
ALIGN Center
Center, Right)
Sets a color for the
COLOR Not set
rule (IE 3.0 or later)
27
Horizontal Rule, <HR>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY> Heading 1
<H1> Heading 1 </H1> Paragraph 1,….
<P>Paragraph 1, <BR>
Line 2 <BR> Line 2
<HR>Line 3 <BR> ______________________
</P> _____
</BODY>
Line 3
</HTML>
28
Character Formatting
In this chapter you will learn how to enhance your page
with Bold, Italics, and other character formatting
options.
Objectives
Upon completing this section, you should be able to
1. Change the color and size of your text.
2. Use Common Character Formatting Elements.
3. Align your text.
4. Add special characters.
5. Use other character formatting elements.
29
Bold, Italic and other Character Formatting
Elements
<FONT SIZE=“+2”> Two sizes bigger</FONT>
The size attribute can be set as an absolute value from 1 to 7
or as a relative value using the “+” or “-” sign. Normal text size
is 3 (from -2 to +4).
<B> Bold </B>
<I> Italic </I>
<U> Underline </U>
Color = “#RRGGBB” The COLOR attribute of the FONT
element. E.g., <FONT COLOR=“#RRGGBB”>this text has
color</FONT>
<PRE> Preformatted </PRE> Text enclosed by PRE tags is
displayed in a mono-spaced font. Spaces and line breaks are
supported without additional elements or special characters. 30
Bold, Italic and other Character Formatting
Elements
<EM> Emphasis </EM> Browsers usually
display this as italics.
<STRONG> STRONG </STRONG> Browsers
display this as bold.
<TT> TELETYPE </TT> Text is displayed in a
mono-spaced font. A typewriter text, e.g. fixed-
width font.
<CITE> Citation </CITE> represents a
document citation (italics). For titles of books,
films, etc. Typically displayed in italics. (A
Beginner's Guide to HTML)
31
Bold, Italic and other Character Formatting
Elements
<P> <FONT SIZE=“+1”> One One Size Larger - Normal – One
Size Larger </FONT> - Normal Size Smaller
– Bold - italics - Underlined -
<FONT SIZE=“-1”> One Size Colored
Smaller </FONT> <BR> Emphasized - Strong - Tele
<B> Bold</B> - <I> italics</I> - Type
<U> Underlined </U> -
<FONT COLOR=“#FF0000”>
Colored </FONT> <BR>
<EM> Emphasized</EM> -
<STRONG> Strong
</STRONG> - <TT> Tele Type
</TT> <BR>
32
Alignment
Some elements have attributes for
alignment (ALIGN) e.g. Headings,
Paragraphs and Horizontal Rules.
The Three alignment values are : LEFT,
RIGHT, CENTER.
<CENTER></CENTER> Will center
elements.
33
Alignment
<DIV ALIGN=“value”></DIV> Represents
a division in the document and can contain
most other element type. The alignment
attribute of the DIV element is well
supported.
<TABLE></TABLE> Inside a TABLE,
alignment can be set for each individual
cell.
34
Special Characters & Symbols
These Characters are recognized in HTML as
they begin with an ampersand and end with with
a semi-colon e.g. &value; The value will either
be an entity name or a standard ASCII character
number. They are called escape sequences.
The next table represents some of the more
commonly used special characters. For a
comprehensive listing, visit the W3C’s section on
special characters at:
http://www.w3.org/MarkUp/HTMLPlus/htmlplus_13.html
35
Special Characters & Symbols
Special Entity Special Entity
Character Name Character Name
Ampersand & & Greater-than > >
sign
Asterisk ∗ Less-than sign < <
∗∗
Cent sign ¢ ¢ Non-breaking
space
Copyright © © Quotation mark " "
Fraction one ¼ Registration ® ®
qtr ¼ mark
Fraction one ½ Trademark ™ 36
half ½ sign ™
Special Characters & Symbols
• Additional escape sequences support accented
characters, such as:
• ö
– a lowercase o with an umlaut: ö
• ñ
– a lowercase n with a tilde: ñ
• È
– an uppercase E with a grave accent: È
NOTE: Unlike the rest of HTML, the escape
sequences are case sensitive. You cannot, for
instance, use < instead of <.
37
Additional Character Formatting Elements
<STRIKE> strike-through text</STRIKE>
DEL is used for STRIKE at the latest
browsers
<BIG> places text in a big font</BIG>
<SMALL> places text in a small
font</SMALL>
<SUB> places text in subscript position </SUB>
<SUP> places text in superscript style
position </SUP>
38
Example
<P><STRIKE> strike-through text </STRIKE></BR>
<BIG>places text in a big font </BIG><BR>
<SMALL> places text in a small font</SMALL><BR>
<SUB> places text in subscript position </SUB>
Normal
<SUP> places text in superscript style position
</SUP><BR> </P>
39
Lists
In this chapter you will learn how to create a variety of lists.
Objectives
Upon completing this section, you should be able to
1. Create an unordered list.
2. Create an ordered list.
3. Create a defined list.
4. Nest Lists.
40
List Elements
HTML supplies several list elements. Most list elements
are composed of one or more <LI> (List Item) elements.
UL : Unordered List. Items in this list start with a list mark
such as a bullet. Browsers will usually change the list
mark in nested lists.
<UL>
<LI> List item …</LI>
<LI> List item …</LI>
</UL>
• List item …
• List item …
41
List Elements
You have the choice of three bullet types: disc(default),
circle, square.
These are controlled in Netscape Navigator by the
“TYPE” attribute for the <UL> element.
<UL TYPE=“square”>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</UL>
List item …
List item …
List item … 42
List Elements
OL: Ordered List. Items in this list are numbered
automatically by the browser.
<OL>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
1. List item …
2. List item …
3. List item
You have the choice of setting the TYPE Attribute to
one of five numbering styles.
43
List Elements
TYPE Numbering Styles
1 Numbers 1,2,3, ……
a Lower alpha a, b, c, ……
A Upper alpha A, B, C, ……
i Lower roman i, ii, iii, ……
I Upper roman I, II, III, ……
44
List Elements
You can specify a starting number for an
ordered list.
<OL TYPE =“i”>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
<P> text ….</P>
<OL TYPE=“i” START=“3”>
<LI> List item …</LI>
</OL>
45
List Elements
i. List item …
ii. List item …
Text ….
iii. List item …
46
List Elements
DL: Definition List. This kind of list is different from the
others. Each item in a DL consists of one or more
Definition Terms (DT elements), followed by one or
more Definition Description (DD elements).
<DL>
<DT> HTML </DT>
<DD> Hyper Text Markup Language </DD>
<DT> DOG </DT>
<DD> A human’s best friend!</DD>
</DL>
HTML
Hyper Text Markup Language
DOG
A human’s best friend!
47
Nesting Lists
You can nest lists by inserting a UL, OL, etc., inside a list
item (LI).
EXample
<UL TYPE = “square”>
<LI> List item …</LI>
<LI> List item …
<OL TYPE=“i” START=“3”>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
</LI>
<LI> List item …</LI> 48
What will be the output?
<H1 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H1>
<OL TYPE=“a” START=“2”>
<LI>Be able to swim </LI>
<LI>Wear a life jacket at all times </LI>
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe </LI>
<LI>Use the canoe for support and </LI>
<LI>Swim to shore
</UL> </LI>
<LI>Don't overexert yourself </LI>
<LI>Use a bow light at night </LI>
</OL>
49
The output….
50
<H1 ALIGN="CENTER">SAFETY TIPS FOR
CANOEISTS</H1>
<OL TYPE="a" START="2">
<LI>Be able to swim </LI>
<LI>Wear a life jacket at all times </LI>
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe </LI>
<LI>Use the canoe for support What
<OL type="I" start="4">
<LI> Be careful </LI>
will
<LI> Do not look around</LI> be the
</LI> </OL> output?
<LI>Swim to shore
</UL> </LI>
<LI>Don't overexert yourself </LI>
<LI>Use a bow light at night </LI>
</OL> 51
The output….
52
Images
In this chapter you will learn about images
and how to place images in your pages.
Objectives
Upon completing this section, you should be
able to
1. Add images to your pages.
53
Images
<IMG>This element defines a graphic image on
the page.
Image File (SRC:source): This value will be a
URL (location of the image) E.g.
http://www.domain.com/dir/file.ext or /dir/file.txt.
Alternate Text (ALT): This is a text field that
describes an image or acts as a label. It is
displayed when they position the cursor over a
graphic image.
Alignment (ALIGN): This allows you to align the
image on your page.
54
Images
Width (WIDTH): is the width of the image in pixels.
Height (HEIGHT): is the height of the image in
pixels.
Border (BORDER): is for a border around the
image, specified in pixels.
HSPACE: is for Horizontal Space on both sides of
the image specified in pixels. A setting of 5 will put 5
pixels of invisible space on both sides of the image.
VSPACE: is for Vertical Space on top and bottom of
the image specified in pixels. A setting of 5 will put 5
pixels of invisible space above and bellow the
image.
55
Some Examples on images
1) <IMG SRC=“jordan.gif“ border=4>
2) <IMG SRC=" jordan.gif" width="60"
height="60">
3) <IMG SRC=“jordan.gif" ALT="This is a
text that goes with the image">
4) <IMG SRC=" jordan.gif “ Hspace="30"
Vspace="10" border=20>
5) < IMG SRC =" jordan.gif“ align="left">
blast blast blast blast blast
56
Anchors, URLs and Image Maps
In this chapter you will learn about Uniform Resource
Locator, and how to add them as Anchor or Links
inside your web pages.
Objectives
Upon completing this section, you should be able to
1. Insert links into documents.
2. Define Link Types.
3. Define URL.
4. List some commonly used URLs.
5. Plan an Image Map.
57
HOW TO MAKE A LINK
1) The tags used to produce links are the <A>
and </A>. The <A> tells where the link should start and
the </A> indicates where the link ends. Everything between
these two will work as a link.
2) The example below shows how to make the word
Here work as a link to yahoo.
Click <A HREF="http://www.yahoo.com">here</A> to
go to yahoo.
58
More on LINKs
<body LINK="#C0C0C0" VLINK="#808080"
ALINK="#FF0000">
• LINK - standard link - to a page the visitor hasn't
been to yet. (standard color is blue - #0000FF).
VLINK - visited link - to a page the visitor has been to
before. (standard color is purple - #800080).
ALINK - active link - the color of the link when the
mouse is on it. (standard color is red - #FF0000).
If the programmer what to change the color
• Click <a href="http://www.yahoo.com"><font
color="FF00CC">here</font></a> to go to yahoo.
59
Internal Links
Internal Links : Links can also be created inside large
documents to simplify navigation. Today’s world wants to be
able to get the information quickly. Internal links can help you
meet these goals.
1. Select some text at a place in the document that you would
like to create a link to, then add an anchor to link to like this:
<A NAME=“bookmark_name”></A>
The Name attribute of an anchor element specifies a location
in the document that we link to shortly. All NAME attributes in
a document must be unique.
2. Next select the text that you would like to create as a link to
the location created above.
<A HREF=“#bookmark_name”>Go To Book Mark</A>
60
E-Mail (Electronic Mail)
E.g. mailto:[email protected]
The type of service is identified as the mail client
program. This type of link will launch the users
mail client.
The recipient of the message is
[email protected]
<A HREF=“mailto:[email protected]”>Send me
More Information </A>
61
Image Maps
Image maps are images, usually in gif format that have
been divided into regions; clicking in a region of the
image cause the web surfer to be connected to a new
URL. Image maps are graphical form of creating links
between pages.
There are two type of image maps:
Client side and server side
Both types of image maps involve a listing of co-ordinates
that define the mapping regions and which URLs those
coordinates are associated with. This is known as the map
file.
62
Area Shapes Used
63
Client-Side Image Maps
Client-side image maps (USEMAP) use a map file that is
part of the HTML document (in an element called MAP),
and is linked to the image by the Web browser.
<IMG SRC="note.GIF" Width=200 Height=200
border="5" USEMAP="#map1">
<MAP NAME="map1">
<AREA SHAPE="RECT" COORDS="0,0,90,90"
HREF="hi.html" ALT="see me…">
<AREA SHAPE="RECT" COORDS="100,100,160,160"
HREF="divPara.html" ALT="see him…" >
<AREA SHAPE="CIRCLE" COORDS="150,50,20"
HREF="house.html" ALT="see it…" >
</MAP>
We can use Poly as well as Rect…… 64
Shapes, Coords
• Types of Shapes
• Rect used for squares and ordered shapes.
• Circle used for circles.
• Poly used for unordered shapes.
• Number of coordenations for each shape:
• Rect 4 numbers for two corners
• Circle 3 numbers for the center & R
• Poly depends on the number of corners of the
shape( 2 numbers for each corner)
65
Tables
In this chapter you will learn that tables have many uses in
HTML.
Objectives:
Upon completing this section, you should be able to:
1. Insert a table.
2. Explain a table’s attributes.
3. Edit a table.
4. Add a table header.
66
Tables
The <TABLE></TABLE> element has four sub-
elements:
1. Table Row<TR></TR>.
2. Table Header <TH></TH>.
3. Table Data <TD></TD>.
4. Caption <CAPTION></CAPTION>.
The table row elements usually contain table
header elements or table data elements.
67
Tables
<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
<td> Row1, Col2 </td>
</tr>
<tr>
<td> Row2, Col1 </td>
<td> Row2, Col2 </td>
</tr>
</table>
68
Tables
Column 1 Header Column 2 Header
Row1, Col1 Row1, Col2
Row2, Col1 Row2, Col2
69
Tables Attributes
BGColor: Some browsers support background
colors in a table.
Width: you can specify the table width as an
absolute number of pixels or a percentage of the
document width. You can set the width for the
table cells as well.
Border: You can choose a numerical value for
the border width, which specifies the border in
pixels.
CellSpacing: Cell Spacing represents the space
between cells and is specified in pixels. 70
Table Attributes
CellPadding: Cell Padding is the space
between the cell border and the cell
contents and is specified in pixels.
Align: tables can have left, right, or
center alignment.
Background: Background Image, will be
titled in IE3.0 and above.
BorderColor, BorderColorDark.
71
Table Caption
A table caption allows you to specify a line of
text that will appear centered above or bellow
the table.
<TABLE BORDER=1 CELLPADDING=2>
<CAPTION ALIGN=“BOTTOM”> Label For My Table
</CAPTION>
The Caption element has one attribute ALIGN
that can be either TOP (Above the table) or
BOTTOM (below the table).
72
