Introduction to

HTML

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 1
 STUDENT COURSE DELIVERABLES
 Digital copy of a working website
PART ONE – 20%
• 30 different html pages focusing on one theme
• Deploying all the HTML techniques discussed in
class

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 2
 Definitions - I
 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 – Universal Resource Locator.
 Browser – A software program which is used to show
web pages.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 3
 Definitions - II
 Browser - i
 Examples of Browsers
 Mosaic,
 Netscape Communicator,
 Internet Explorer,
 Opera,
 Mozilla Navigator,
 Safari, Mozilla Firefox, Google Chrome,
Microsoft Edge etc
13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 4
 Definitions - III
 Browser - ii
 Different browsers are capable of reading
certain proprietary HTML elements – con’t
For example:
 <marguee> … </marguee> targs (scrolling text)
originally worked only for IE
 <blink> … </blink> targs (blinking text) works only
with Mozilla or Netscape
 These differences has led to difficulties of creating a web
page which would display uniformly across a number of
different browsers

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 5
 Definitions - IV
 Browser - iii
o W3C – World Wide Web Consortium has been
working steadily underground to standardize HTML
o In the late 1990s several HTML standards were
published by W3C to web authors
HTML 2.0 was born in September 1995
 HTML 3.2 was born in January 1997
 HTML 4.01 in December 1999
HTML 5.00 in October 2014

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 6
 Definitions - III
 “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.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 7
 Tags - I

 Codes enclosed in brackets

 Usually paired
<TITLE>My Web Page</TITLE>
 Not case sensitive
<TITLE> = <title> = <Title>

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 8
 Choosing Text Editor - I
 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.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 9
 Choosing Text Editor - II
 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

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 10
 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.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 11
 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.
13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 12
Creating a Basic Starting Document
– HTML Shell - I
<HTML>
<HEAD>
<TITLE>University of Iringa Website</TITLE>
</HEAD>
<BODY>
This is what is displayed.
</BODY>
</HTML>

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 13
 HTML SHELL - II
 <HTML> ... </HTML>
• Standard HTML pages begin and end with the open and
closed <HTML> tag.
• The forward slash closes any tag, for example <HTML>
opens the page and </HTML>(with the inclusion of the /)
closes the page
 <HEAD> ... </HEAD>
• The HEAD of your document point to above window part
• The <HEAD> tag contains header information, such as the
title of the page, which shows up in the title bar of your
browser

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 14
 HTML SHELL - III
 <TITLE> ... </TITLE>
• The TITLE of your document appears in the very top line of
the user’s browser.
• The title of the page goes inside the <TITLE> tag
• If the user chooses to “Bookmark” your page or save as a
“Favorite”; it is the TITLE that is added to the list.
• The text in your TITLE should be as descriptive as possible
because this is what many search engines, on the internet,
use for indexing your site.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 15
 HTML SHELL - IV
 <BODY> ... </BODY>
• The body tag contains the page content, like text
and images.
• 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

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 16
 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.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 17
 Main Colours

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 18
 RGB Colour Model

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 19
 16 Basic Colors

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 20
 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
15. ORANGE 15. #FF7F00

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 21
 Color Codes
• Hexadecimal
– The system is complex and difficult to understand at first

BUT
• They are highly recommended in Web development
• They are reliable, widely compatible among web
browsers than RGB

– It is a six digit representation of color

• The first two represents Red value
• The second two represents Green value
• And the third two represents Blue

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 22
 Color Codes
• Example of Hexadecimal Value
– bgcolor=“#RRGGBB”

– Hexadecimal Color Values

– Real Hexadecimal
• bgcolor=“#FFFFFF”
• “F” is the max amount we can send each color
• Thus “#FFFFFF” = White.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 23
 Color Codes
• Hexadecimal Formula
– Example One
• bgcolor=“#CC7005”
– CC(RR - Red)
(12*161)+(12*160)=204
– 70(GG - Green)
(7*161)+(0*160) = 112
– 05(BB - Blue)
(0*161)+(5*160) = 5
#1C239B

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 24
 HTML Behind the Scenes
• Introduction
Tags
• Tags begin with a;
left-angle bracket <
and end with a right-angle bracket >.
• The first word between the angle brackets is the tag.
Attributes
• Any further words within the brackets are the
Attributes,
e.g, <TD ALIGN=”left”>, ALIGN=”left” is the Attribute

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 25
 HTML Behind the Scenes
• Introduction
Elements
• An element is made up of three parts:
a start tag
content,
an end tag.
• Most tags possess “closing tags” such as </BODY>
which mark the place where the effect of the “opening”
tag should stop.
Syntax
• Syntax means ORDER.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 26
 Sample Web Page
<HTML>

<HEAD>
<TITLE> Web Page by Fredrick Ngumbuke </TITLE>
</HEAD>

<BODY>
<P>
University Logo symbolizes our University activities
</P>
</BODY>

</HTML>
13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 27
 Creating a HTML File
• Before Saving the file, first Create the following folder
structure
website

documents
.htm
.htm
images
.gif
.jpg
13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 28
 Folder Structure Exercise
website

docs_1

pg1.htm

pg2.htm

docums

pg3.html
docs_2

pg4.htm
pg5.html

imgs

logo.jpg
logo2.png

index.html

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 29
 Creating a HTML File
• Save your file in the documents folder, name your file as
“index.htm” (without the quotation marks)

• Click Save.

– Note: keep all your file names lowercase (no capital letters)
with no spaces, for consistency and to avoid problems later.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 30
 The Body Element
• The BODY element of a web page is an important
element in regards to the page’s appearance.
• Here are the attributes of the BODY tag to control all
the levels:
– TEXT="#RRGGBB" to change the color of all the text on
the page (full page text color.)
– This element contains information about the page’s
background color, the background image, as well as the
text and link colors.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 31
 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>

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 32
 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

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 33
 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>

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 34
 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=“logo.gif” bgcolor=“#FFFFFF”></BODY>

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 35
 Previewing Your Work
• Once you have created your basic starting document
and set your document properties it is a good idea to
save your file.
• To save a file, in NotePad, follow these steps:
1. Locate and click on the menu called “File”.
2. Select the option under File Menu labeled “Save As”.
3. In the “File Name” text box, type in the entire name of
your file (including the extension name .html or .htm).

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 36
 Edit, Save and View Cycle
• To preview Your Work, open a web browser and do the
following:
1. Click on the menu labeled “File”.
2. Locate the menu option, “Open”.
3. In the “Open” dialog box, click on the “Browse” button
and locate your web document.
4. Click “OK” once you have selected your file

• The web browser will load the same document but with the
new revisions. This process is the Edit, Save and View Cycle

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 37
 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.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 38
 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.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 39
 Headings, <Hx> </Hx>
HTML CODE Browser’s Output
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD> Heading 1
<BODY>
<H1> Heading 1 </H1> Heading 2
<H2> Heading 2 </H2> Heading 3
<H3> Heading 3 </H3>
Heading 4
<H4> Heading 4 </H4>
<H5> Heading 5 </H5> Heading 5
Heading 6
<H6> Heading 6 </H6>
</BODY>
</HTML>

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 40
 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.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 41
 Paragraphs, <P> </P>
HTML CODE Browser’s Output

<HTML><HEAD>
<TITLE> Example Page</TITLE>
Heading 1
</HEAD> Paragraph 1,….

Heading 2
<BODY></H1> Heading 1 </H1>
<P> Paragraph 1, ….</P>
<H2> Heading 2 </H2> Paragraph 2,….
<P> Paragraph 2, ….</P>
<H3> Heading 3 </H3> Heading 3
<P> Paragraph 3, ….</P> Paragraph 3,….
<H4> Heading 4 </H4>
<P> Paragraph 4, ….</P> Heading 4
<H5> Heading 5 </H5> Paragraph 4,….
<P> Paragraph 5, ….</P> Heading 5
<H6> Heading 6</H6> Paragraph 5,….
<P> Paragraph 6, ….</P>
</BODY></HTML>
Heading 6
Paragraph 6,….

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 42
 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.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 43
 Break, <BR>
HTML CODE Browser’s Output
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
Heading 1
</HEAD> Paragraph 1,….
<BODY> Line 2
<H1> Heading 1 </H1>
<P>Paragraph 1, <BR>
Line 3
Line 2 <BR> Line 3 <BR>…. ….
</P>
</BODY>
</HTML>

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 44
 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>.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 45
 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 of 100%
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, Right) Center

Sets a color for the rule

COLOR (IE 3.0 or later) Not set

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 46
 Horizontal Rule, <HR>
HTML CODE Browser’s Output
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
Heading 1
</HEAD> Paragraph 1,….
<BODY> Line 2
<H1> Heading 1 </H1>
<P>Paragraph 1, <BR>
_________________________
Line 2 <BR> __
<HR>Line 3 <BR> Line 3
</P>
</BODY>
</HTML>

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 47
 Folder Structure Exercise
website

index.htm

docs_1 docs_2 audio imgs css

pg5.html aud1.wav img_1.tif edit.css

pg1.htm
aud2.mp3 img_2.png style.css
pg6.htm
aud3.wma img_3.gif format.css
pg2.htm
aud4.mid

sfld_01 img_01
docums
pg_01.htm logo_01.jpg
pg3.html
pg_02.htm logo_02.png

pg4.htm pg_03.htm logo_03.gif

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 48
 Folder Structure Exercise

1. What will be the HTML element to be used to call

pg1.htm file while working on index.htm file? (5pts)
2. What will be the HTML element to be used to call
pg6.htm file while working on pg_03.htm file? (5pts)
3. What will be the HTML element to be used to call
pg5.htm file while working on pg3.html file? (5pts)
4. What will be the HTML element to be used to call
logo_03.gif file while working on pg4.htm file? (5pts)
5. What will be the HTML element to be used to call
pg_03.htm file while working on index.htm file? (5pts)

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 49
 Folder Structure Exercise
6. What will be the HTML element to be used to call
pg_01.htm file while working on pg1.htm file? (5pts)
7. What will be the HTML element to be used to call
img_2.png file while working on pg_02.htm file? (5pts)
8. What will be the HTML element to be used to call
pg5.htm file while working on pg3.html file? (5pts)
9. What will be the HTML element to be used to call
pg_03.htm file while working on pg3.html file? (5pts)
10. What will be the HTML element to be used to call
logo_01.jpg file while working on index.htm file? (5pts)

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 50
 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.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 51
 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.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 52
 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)

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 53
 Bold, Italic and other Character Formatting
Elements
HTML CODE Browser’s Output
<P> <FONT SIZE=“+1”> One Size
Larger </FONT> - Normal One Size Larger - Normal – One Size
<FONT SIZE=“-1”> One Size Smaller Smaller
</FONT> <BR> Bold - italics - Underlined -
<B> Bold</B> - <I> italics</I> - <U> Colored
Underlined </U> - Emphasized - Strong - Tele Type
<FONT COLOR=“#FF0000”> Colored
</FONT> <BR>
<EM> Emphasized</EM> -
<STRONG> Strong </STRONG> -
<TT> Tele Type </TT> <BR>

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 54
 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.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 55
 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.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 56
 Special Characters & Symbols

• These Characters are recognized in HTML as they begin

with an ampersand and end 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

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 57
 Special Characters & Symbols
Special Character Entity Name Special Character Entity Name

Ampersand &amp; & Greater-than sign &gt; >

Asterisk &lowast; Less-than sign &lt; <

∗∗
Cent sign &cent; ¢ Non-breaking &nbsp;
space
Copyright &copy; © Quotation mark &quot; "

Fraction one qtr &frac14; ¼ Registration mark &reg; ®

Fraction one half &frac12; ½ Trademark sign &trade; ™

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 58
 Special Characters & Symbols
• Additional escape sequences support accented
characters, such as:
– &ouml;
• a lowercase o with an umlaut: ö
– &ntilde;
• a lowercase n with a tilde: ñ
– &Egrave;
• an uppercase E with a grave accent: È
• NOTE: Unlike the rest of HTML, the escape
sequences are case sensitive. You cannot, for
instance, use &LT; instead of &lt;

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 59
 Additional Character Formatting Elements

• <STRIKE> </STRIKE>
– strike-through text
• DEL
– is used for STRIKE at the latest browsers
• <BIG> </BIG>
– places text in a big font
• <SMALL> </SMALL>
– places text in a small font
• <SUB> </SUB>
– places text in subscript position
• <SUP> </SUP>
– places text in superscript style position

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 60
 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.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 61
 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 …
13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 62
 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 …

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 63
 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.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 64
 List Elements
TYPE Numbering Styles
1 Arabic 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, ……

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 65
 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>

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 66
 Start Here

Start Here

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 67
 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!

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 68
 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>
</UL>
13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 69
 What will be the output?

<H1 ALIGN="CENTER">UoI Building Structures</H1>

<OL TYPE=“a” START=“2”>
<LI>Library</LI>
<LI>LLO </LI>
<LI>Administration Block
<UL>
<LI>Block “A” </LI>
<LI>Block “B” </LI>
<LI>Block “C”
</UL>
</LI>
<LI>Multipurpose </LI>
<LI>Tumaini House </LI>
</OL>

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 70
 The output….

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 71
 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
– Add images to your pages.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 72
 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.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 73
 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.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 74
 Some Examples on images
• Border (BORDER)
– <IMG src=“jordan.gif“ border=4>
• Width (WIDTH)
– <IMG src=" jordan.gif" width="60" height="60">
• alt (ALT)
– <IMG src=“jordan.gif“ alt=“image description">
• HSPACE and VSPACE
– <IMG src=" jordan.gif “ Hspace="30" Vspace="10" border=20>
• Align (ALIGN)
– < IMG src =" jordan.gif“ align="left">

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 75
 Tables, TR and TD
In this chapter you will learn about Tables.
Objectives
Upon completing this section, you should be able to
1. Creating table
2. Associated Table tags like TR and TD
 Border, Cellpadding, Cellspacing, Border Color, Caption
 Rules, Summary, Colgroup, Align, Width and Valign
3. Colspan and Rowspan.
4. Nested Tables

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 76
 Tables, TR and TD
• The common table tag

<TABLE BORDER="1">
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
</TABLE>

 The <TABLE> Tag

 The TABLE tag begins the process of building a table

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 77
 Tables, TR and TD
• The common table tags
 Border attribute
 Creates visible table borders if border value is
defined

 The <TR> tag

 It stands for Table Row

 The <TD> tag

 The TD tag is the workhorse of the table. It
denotes Table Data

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 78
 Tables, TR and TD
• The common table tags
 Cellpadding attribute
 Denotes a distance between the first letter of the
line from the table border

 Cellspacing attribute
 Denotes a distance between cells

 Align attribute

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 79
 Tables, TR and TD
• The common table tags
 Frame attribute
 This is used along with the BORDER attribute. The
FRAME command allows you to state which portions of
the border will render. Below are the values available
» above: displays top edge only
» below: displays bottom edge only
» border: displays all four sides (default)
» box: displays all four sides (like border)
» hsides: displays top and bottom edges
» lhs: displays left edge only
» rhs: displays right edge only
» void: displays no border
» vsides: displays left and right edges

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 80
 Tables, TR and TD
• The common table tags
 Frame attribute cont’

<TABLE BORDER=“1” FRAME=“hsides”>

<TR>
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
<TR> Cell Data Cell Data
<TD>Cell Data</TD>
<TD>Cell Data</TD>
</TR>
</TABLE> Cell Data Cell Data

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 81
 Tables, TR and TD
• The common table tags
 Rules attribute
 This, like FRAME, also works with the BORDER
attribute, except RULES deals with the inside
border edges
» all: displays all borders
» cols: displays borders between cells
» groups: displays borders between all cell groups
» none: hides all interior borders
» rows: displays borders between rows only

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 82
 Tables, TR and TD
• The common table tags
 Align attribute
 Aligns cell contents to left, center, justified or right

<TABLE BORDER=“1”>
<TR>
<TD ALIGN=“center”>Cell Data</TD>
<TD ALIGN=“right”>Cell Data</TD>
</TR>
<TR> Cell Data Cell Data
<TD ALIGN=“center”>Cell Data</TD>
<TD ALIGN=“right”>Cell Data</TD>
</TR>
Cell Data Cell Data
</TABLE>

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 83
 Tables, TR and TD
• The common table tags
 Span
 This attribute spans across adjacent columns or rows
 COLSPAN Example
<TABLE BORDER=1 WIDTH=450>
<TR>
<TD ALIGN="center" COLSPAN="2">
This cell spans two columns of the next row
</TD>
</TR>

<TR>
<TD ALIGN="right" VALIGN="top">Cell Data</TD
<TD ALIGN="center“ALIGN="bottom">CellData</TD>
</TR>
</TABLE>

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 84
 Tables, TR and TD
• The common table tags
 Span cont’
 This attribute spans across adjacent columns or rows
 ROWSPAN Example
<TABLE BORDER=1 WIDTH=450>
<TR>
<TD ALIGN="center" ROWSPAN=“3"> This cell spans two rows</TD>
<TD ALIGN="right" VALIGN="top">Cell Data</TD
<TD ALIGN="center“ VALIGN="bottom">CellData</TD>
</TR>

<TR>
<TD ALIGN="right" VALIGN="top">Cell Data</TD
<TD ALIGN="center“ALIGN="bottom">CellData</TD>
</TR>

<TR>
<TD ALIGN="right" VALIGN="top">Cell Data</TD
<TD ALIGN="center“ALIGN="bottom">CellData</TD>
</TR>

</TABLE>

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 85
 Title Page

Link One

Link Two

Link Three

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT)
 Tables, TR and TD
<TABLE BORDER=1 WIDTH=450>
<TR>
<TD ALIGN="center" VALIGN="top">
<!--TABLE INSIDE TABLE STARTS HERE -->
<TABLE BORDER=1 WIDTH=300 BORDERCOLOR="red">
<TR>
<TD ALIGN="center">Table inside table cell one </TD>
<TD ALIGN="center">Table inside table cell Two</TD>
</TR>
<TR>
<TD ALIGN="center">Table inside table cell Three</TD>
<TD ALIGN="center">Table inside table cell Four</TD>
</TR>
</TABLE>
<!--TABLE INSIDE TABLE ENDS HERE -->
</TD>

<TD ALIGN="right" VALIGN="top">Cell Data</TD>

</TR>

<TR>
<TD ALIGN="center" VALIGN="bottom">Cell Data</TD>
<TD ALIGN="right" VALIGN="bottom">Cell Data</TD>
</TR>
</TABLE>

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 87
 LISTING EXERCISE – 5pts

Observe the following browser output and write its HTML code
– 5 pts

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT)
 TABLE EXERCISE – 5pts
Observe the following browser output and write its HTML code
– 5 pts

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT)
 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.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 90
 HOW TO MAKE A LINK
• Creating A Hypertext Local Link
 See the example
<A HREF=“./docs/page1.htm">Click Here for Page One</A>
• What is happening?
 A stands for Anchor, it begins the link to another page
 HREF stands for Hypertext REFerence. This is where the link is going
to go
 ./docs/page1.htm is the FULL ADDRESS of the link
 Where it reads "Click Here For Page One" is where you write the text
you want to appear on the page.
 /A ends the entire link command

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 91
 HOW TO MAKE A LINK
• Creating A Hypertext Local Link
 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.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 92
 More on LINKs
• <body LINK="#C0C0C0" VLINK="#808080" LINK="#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.

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 93
 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>

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 94
 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>

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 95
 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
– 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

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 96
 Area Shapes Used

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 97
 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=“pg1.htm" ALT="see me…">
<AREA SHAPE="RECT" COORDS="100,100,160,160” HREF=“pg2.htm" ALT="see
him…" >
<AREA SHAPE="CIRCLE" COORDS="150,50,20“ HREF=“index.htm" ALT="see it…"
>
</MAP>
We can use Poly as well as Rect……

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 98
 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)

13 March 2023 Web Page Design & Admin to CIT By Mr. Ngumbuke. (M.Eng - IT) 99