INTRODUCTION TO HTML
Learning Objectives
By the end of this chapter the learner shall be able to;
i. Explain the basic concepts of HTML
ii. Explain the structure of a HTML document
iii. Create a HTML document and display the results in a web browser
4.1 Basic HTML Concepts
What is HTML?
HTML, which stands for HyperText Markup Language, is a markup language used to create web
pages it is not a programming language like Java. The basic function of the HTML is to describe the
standard (—) how a browser should display text and multimedia elements such as graphics, animation,
etc. It works on a limited number of tags and is not difficult to learn and use. Let us learn how it works.
The web developer uses "HTML tags" to format different parts of the document. For example,
you use HTML tags to specify headings, paragraphs, lists, tables, images and much more.
HTML is a subset of Standard Generalized Markup Language (SGML) and is specified by the
World Wide Web Consortium (W3C).
How HTML works
The HTML is platform independent that is computer and computer operating system on
which it is running. It means that HTML uses a small number of tags to create Web page.
Any Web server regardless of their location and operating system can publish these web
pages. These web pages can also be viewed or displayed by any Web browser regardless
of the platform on which it is running.
As we have discussed, HTML works on tags. These HTML tags control the page
structure and the style sheet controls the details about page layout and their presentation.
1
In other words, HTML style sheet provides consistency and creativity to create
professional quality web pages.
The basic structure of using tag is <tag_name> some text </tag_name>. For example, the
tag for making text bold is <b> this is bold </b>. And when displayed in a browser it
will be displayed, as this is bold.
Web page is made up of two sections: head and body. Each of these sections is enclosed
within a pair of <html> tags. The head section describes the page content while the body
section defines the web page look and feel. Most of HTML tags are used in the body
section, whereas the number of tags is limited in the head section. The standard web page
structure in HTML is
<html>
<head>
<title>Title of the page is given here</title>
</head>
<body>
web page contents go here
</body>
</html>
What do you need to create HTML?
You don't need any special equipment or software to create HTML. In fact, you probably already
have everything you need. Here is what you need:
Computer
Text or HTML editor. Most computers already have a text editor and you can easily
create HTML files using a text editor. Most computers already have a text editor.
Examples of text editors include Notepad (for Windows), Pico (for Linux), or
Simpletext/Text Edit/Text Wrangler (Mac).
2
Web Browser. For example, Internet Explorer or Firefox.
NB No, you do not need to be online to create web pages. You can create web pages on your
local machine. You only need to go online when you want to publish your web page to the web -
this bit comes later.
4.2 Creating a Webpage
1. Create an HTML file
An HTML file is simply a text file saved with an .html or .htm extension (i.e. as opposed
to a .txt extension).
a. Open up your computer's normal plain text editor (this will probably be Notepad
if you're using Windows or TextEdit if you're using a Mac). You could use a
specialized HTML editor such as DreamWeaver or FrontPage if you prefer.
2. Type some HTML code
a. Save the file as html_tutorial_example.html
3. View the result in your browser
Either...
a. Navigate to your file then double click on it
i. ...OR...
b. Open up your computer's web browser (for example, Internet Explorer, Firefox,
Netscape etc).
c. Select File > Open, then click "Browse". A dialogue box will appear prompting
you to navigate to the file. Navigate to the file, then select "Open".
4. Repeat the last 2 steps until you're satisfied with the result
It's unrealistic to expect that you will always get it right the first time around. Don't worry
- that's OK! Just try again and again - until you get it right.
3
HTML Documents = Web Pages
HTML documents describe web pages
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents
and display them as web pages. The browser does not display the HTML tags, but uses the tags
to interpret the content of the page:
4.3 HTML Tags
Tag - Used to specify ("mark-up") regions of HTML documents for the web browser to interpret.
Tags look like this: <tag>
Element - A complete tag, having an opening <tag> and a closing </tag>.
Attribute - Used to modify the value of the HTML element. Elements will often have multiple
attributes.
An element consists of three basic parts: an opening tag, the element's content, and finally, a
closing tag.
1. <p> - opening paragraph tag
2. Element Content - paragraph words
3. </p> - closing tag
Every (web)page requires four critical elements: the html, head, title, and body elements.
The<html>Element..</html>
<html> begins and ends each and every web page. Its sole purpose is to encapsulate all the
HTML code and describe the HTML document to the web browser. Remember to close your
HTML documents with the corresponding </html> tag at the bottom of the document.
4
The <head> Element
The head functions "behind the scenes." Tags placed within the head element are not directly
displayed by web browsers.
HTML Code:
<html>
<head>
</head>
</html>
The <title> Element
Place the <title> tag within the <head> element to title your page. The words you write between
the opening and closing <title></title> tags will be displayed at the top of a viewer's browser.
Here's the html code:
HTML Code:
<html>
<head>
<title>My WebPage!</title>
</head>
</html>
The <body> Element
The <body> element is where all content is placed. (Paragraphs, pictures, tables, etc). As the
menu on the left suggests, we will be looking at each of these elements in greater detail as the
module progresses. For now, it is only important to understand that the body element will
encapsulate all of your webpage's viewable content.
5
HTML Code:
<html>
<head>
<title>My WebPage!</title>
</head>
<body>
Hello World! All my content goes here!
</body>
</html>
Chapter review questions
1. What is the standard web page structure in HTML?
2. What do you need in order to create a HTML document?
Suggested Further Reading
www.w3schools.com
6
HTML EXERCISE 1
Create a HTML document in your text editor with the contents shown below and save it as
exer1.htm and then open it in a web browser.
<html>
<head>
<title>Exercise 1</title>
</head>
<body>
This is my first web page! Have a look!
</body>
</html>
HTML EXERCISE 2
Create a web that will display as shown below when opened in a Web browser.
7
CHAPTER FIVE
FORMATTING TAGS
Learning Objectives
By the end of this chapter the learner shall be able to;
i. Use heading tags in a HTML document
ii. Use Bold, Italics and Underline tags in a HTML document
iii. Use Paragraph tags in a HTML document
iv. Using colors in a HTML document
5.1 Using Heading tags
There is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML
ranging from h1 for the most important, to h6 for the least important.
Typing this code:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Results in this:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
8
5.2 Using Bold, Italics and Underline tags
Bold
You specify bold text with the <b> tag.
Typing this code:
<b>This text is bold.</b>
Results in this:
This text is bold.
Italics
You specify italic text with the <i> tag.
Typing this code:
<i>This text is italicised.</i>
Results in this:
This text is italicised.
Underlining
You specify underlined text with the <u> tag.
Typing this code:
<u>This text is underlined.</u>
Results in this:
This text is underlined.
5.3 HTML Paragraphs
Paragraphs are defined with the <p> tag.
9
Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Note: Browsers automatically add an empty line before and after a paragraph.
Line Breaks
Use the <br /> tag if you want a line break (a new line) without starting a new paragraph:
Typing this code:
<p>Here is a...<br />line break.</p>
Results in this:
Here is a
line break.
Horizontal Rule
Typing this code:
Here's a horizontal rule... <hr /> ...that was a horizontal rule :)
Results in this:
Here's a horizontal rule...
...that was a horizontal rule :)
10
5.4 Typefaces and colors
Specifying Typefaces
When styling text with fixed or relative type style tags, browsers display the text in the default
typeface. The default is set in the user preferences and control text color by including the
FACE= and color = arguments within the <font tag.
Note that the font you choose must be installed on the user‘s system, not just yours. If they are
not installed the browser will still display the text in the default typeface. The font face is
specified as follows
<font Face =‖Arial‖>
Using colors
The text colors are specified in the <FONT tag with the COLOR=argument
Example
</Font color=‖blue‖>
Both the typeface and the font color can be specified in the font tag at the same time as shown
below
<FONT FACE=‖TAHOMA‖ COLOR =‖BLUE‖>
example
<html>
<head>
<title> Tables </title>
</head>
<body>
<FONT FACE=‖TAHOMA‖ COLOR =‖BLUE‖>
<h1> this is my first web page with color
<br>
<font size=3> How do you see it?
11
</body>
</html>
BODY colors
The colors of the background and text of the text page can be set by the BGCOLOR and TEXT
options in the BODY tag.
<BODY BGCOLOR = ―YELLOW‖ TEXT =‖BLUE‖>
This sets the background to yellow and the text to blue.
Values are normally enclosed in ―quotes‖
Color Names
The most common methods for specifying colors are by using the color name or the hexadecimal
value. Although color names are easier to remember, the hexadecimal values and RGB values
provides you with more color options.
Hexadecimal values are a combination of letters and numbers. The numbers go from 0 - 9 and
the letters go from A to F. When using hexadecimal color values in your HTML/CSS, you
preceed the value with a hash (#). Although hexadecimal values may look a little weird at first,
you'll soon get used to them.
There are 16 color names (as specified in the HTML 4.0 specification). The chart below shows
these color names and their corresponding hexadecimal value.
Color Color Name Hexadecimal Value Color Color Name Hexadecimal Value
Black #000000 Green #008000
Silver #c0c0c0 Lime #00ff00
Gray #808080 Olive #808000
White #ffffff Yellow #ffff00
Maroon #800000 Navy #000080
12
Red #ff0000 Blue #0000ff
Purple #800080 Teal #008080
Fushia #ff00ff Aqua #00ffff
You can make up your own colors by simply entering any six digit hexadecimal value
(preceeded by a hash). In the following example, we're using the same code as above. The only
difference is that, instead of using "blue" as the value, we're using its hexadecimal equivalent
(which is #0000ff):
<h3 style="color:#0000ff">HTML Colors</h3>
<html>
<head>
<title> My Gnome Page </title>
</head>
<body bgColor = ―#80FFFF‖ TEXT = ―#008000‖>
<H1>Welcome to my Gnome page</h1>
<font color=‖#FF0000‖>
<H2>Gnomic sayings</h2>
<font color= ―#808000‖>
<p>Every gnome should have one. </p>
<p> There‘s no gno place like Gnome. (Old Alaskan proverb)</p>
<p>Gnome is where the heart is </p>
<font color=‖#0000FF‖>
<H2>Gnome computing</h2>
</body>
</html>
13
Chapter review Exercise
HTML Exercise 3
Create a web page that will display on the browser as shown below
Suggested Further Reading
www.w3schools.com
14
INTERMEDIATE
DESIGNER TAGS
Learning Objectives
By the end of this chapter the learner shall be able to;
i. Use hyperlinks tags in a HTML document
ii. Using HTML to create tables
iii. Using HTML to create Lists
6.1 HTML Hyperlinks (Links)
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new
document or a new section within the current document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
Links are specified in HTML using the <a> tag.
The <a> tag can be used in two ways:
1. To create a link to another document, by using the href attribute
2. To create a bookmark inside a document, by using the name attribute
HTML Link Syntax
The HTML code for a link is simple. It looks like this:
<a href="url">Link text</a>
The href attribute specifies the destination of a link.
Example
<a href="http://www.mku.ac.ke/">Visit Mount Kenya</a>
15
which will display like this: Visit mount Kenya
Clicking on this hyperlink will send the user to ‗MKU' homepage.
Tip: The "Link text" doesn't have to be text. You can link from an image or any other HTML element.
HTML The <img> Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The
value of the src attribute is the URL of the image you want to display.
Syntax for defining an image:
<img src="url" alt="some_text"/>
The URL points to the location where the image is stored.
The browser displays the image where the <img> tag occurs in the document. If you put an
image tag between two paragraphs, the browser shows the first paragraph, then the image, and
then the second paragraph.
HTML The Alt Attribute
The required alt attribute specifies an alternate text for an image, if the image cannot be
displayed.
The value of the alt attribute is an author-defined text:
<img src="boat.gif" alt="Big Boat" />
The alt attribute provides alternative information for an image if a user for some reason cannot
view it (because of slow connection, an error in the src attribute, or if the user uses a screen
reader).
16
Determining your image size
The size of your image can be assigned by using the width and the height values as shown below
<img src=‖myimage.gif‖ WIDTH=200 HEIGHT=100
6.2 HTML Tables
Tables are defined with the <table> tag.
A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the
<td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain
text, links, images, lists, forms, other tables, etc.
Table Example
<html>
<head>
<title> Tables </title>
</head>
<body>
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>
17
How the HTML code above looks in a browser:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
HTML Tables and the Border Attribute
If you do not specify a border attribute, the table will be displayed without borders. Sometimes
this can be useful, but most of the time, we want the borders to show.
To display a table with borders, specify the border attribute:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML Table Headers
Header information in a table are defined with the <th> tag.
The text in a th element will be bold and centered.
<html>
<head>
<title> Tables </title>
</head>
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
18
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</table>
</body>
</html>
How the HTML code above looks in a browser:
Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
Adding Captions
Captions can be added to the table by using the <caption> tag as shown in the example below;
<html>
<head>
<title> Tables </title>
<body>
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
19
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
How the HTML code above looks in a browser:
Monthly savings
Month Savings
January $100
February $50
20
6.3 Lists
The most common HTML lists are ordered and unordered lists:
HTML Lists
An ordered list: An unordered list:
1. The first list item List item
2. The second list item List item
3. The third list item List item
HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
How the HTML code above looks in a browser:
Coffee
Milk
Example with the type tag
<html>
<body>
<h4>An Unordered List:</h4>
<ul type="square">
<li>Coffee</li>
<li>Tea</li>
21
<li>Milk</li>
</ul>
</body>
</html>
How the HTML code above looks in a browser:
HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
How the HTML code above looks in a browser:
1. Coffee
2. Milk
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
With a type tag
<h4>Letters list:</h4>
22
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
HTML Definition Lists
A definition list is a list of items, with a description of each item.
The <dl> tag defines a definition list.
The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes
the item in the list):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
How the HTML code above looks in a browser:
Coffee
- black hot drink
Milk
- white cold drink
23
Chapter review Exercise
HTML Exercise 4
Create a web page that will display on the browser as shown below
Suggested Further Reading
www.w3schools.com
24
Solutions to exercises
HTML Exercise 2
<html>
<head>
<title>home</title>
</head>
<body>
Creating web pages is fun!!!
</body>
</html>
HTML Exercise 3
<html>
<head>
<title> Home Page </title>
</head>
<body bgColor = “#008000” TEXT = “#800000”>
<H1>MOUNT KENYA UNIVERSTITY</h1> <hr />
<font color=”#000000”>
<H2>Your University of Choice</h2>
<b>Our Vision</b>
<p> To be a centre of excellence in training, research and innovation in Science &
Technology in Africa
<p> <b> Our Mission</b>
<p> To attain world class standards in training and innovation for sustainable
individual prosperity and social development.
<p> <b> Our Philosophy</b>
<p> To harness knowledge in applied Sciences and technology for the service of
humanity <hr />
</body>
</html>
HTML Exercise 4
<html>
<head>
<title> Tables </title>
</head>
<body>
<body bgColor = “#00ff00” TEXT = “#000000”>
<H1>MOUNT KENYA UNIVERSTITY</h1> <hr />
<font color=”#000000”>
<H3>REASONABLE FEES FOR OUR PROGRAMMES</h3>
25
<table border="1">
<tr>
<th>Course</th>
<th>Duration</th>
<th>Amount(Kshs)</th>
</tr>
<tr>
<td>Bachelor of Business Information Technology</td>
<td>4 Years</td>
<td>140,000</td>
</tr>
<tr>
<td>Bachelor of Business Management </td>
<td>4 Years</td>
<td>120,000</td>
</tr>
<tr>
<td>Bachelor of Commerce</td>
<td>4 Years</td>
<td>110,000</td>
</tr>
</table>
</body>
</html>
26
Question 1
a) Write the HTLM code that would be used to give the output below
Question 2
a) Write the html code that would be used to obtain the list of courses offered at MKU.
(8 Marks)
Question 3
a) A user types ―http://www.example.net/index.html‖ in the browser. Explain the steps
taken to display the page in the browser.
(10 Marks)
27
[10 Marks]
Question 4
a) Write HTML code to create the following list (10mks)
MT KENYA UNIVERSITY
Courses offered
i. BBIT
ii.DBIT
iii. DIT
Stages
Stage I
Stage II
Stage III
Stage IV
Stage V
iv. CIT
v. CBIT
vi. CICT
28
