Internet Technologies & webpage
authoring
Introduction to HTML
Pre-requisites
Before beginning this lesson, the student
must be able to…
Have a basic understanding of how to use
computers and Windows
Have a reasonable amount of experience in
using the Internet and the World Wide Web
Be able to Access web pages and navigate the web
Use search engines to locate specific information
Download graphics from web pages
Objectives
After completing this lesson, the student
will be able to…
View the source of any web page
Name and explain the uses of basic HTML tags:
<HTML></HTML><HEAD></HEAD><TITLE></TITLE>
<BODY></BODY><B></B><I></I><HR><BR><IMG...>
<P></P><UL></LI></UL>, links (awareness), header sizes
Gather text and graphic information about a topic
Create a simple web page using a word processing program or a text
editor
Display the web page using a browser
Purpose of this Lesson
The purpose is to help the student begin to
recognize the structure of HTML & Html basic
functionalities.
Do not try to memorize the information you see. You
can always refer to an HTML reference list.
What is html
HTML is a markup language used to write /create web
pages/documents, which can then be displayed using a
web browser program. Using HTML, you can create a
Web page with text, graphics, sound, and video.
HTML stands for Hyper Text Markup Language
HTML is not a programming language, but a markup
language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages
Each HTML tag describes different document content
HTML “tags” tell the browser (like Internet Explorer)
how to display the page.
For example, <B>HI THERE</B> would display the
words HI THERE in bold.
HTML Tags
HTML tags are keywords (tag names) surrounded by
angle brackets: like <html>;
<tagname>content</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is
the end tag, also known as opening and closing tags
respectively. The end tag is written like the start tag, but
with a slash before the tag name.
The affected text is between the two tags
Note: not all tags in html are paired.
Web Browsers
The purpose of a web browser (Chrome, IE, Firefox,
Safari etc) is to read HTML documents and display them.
The browser does not display the HTML tags, but uses
them to determine how to display the document:
Paired Tags
Most HTML tags are paired, meaning that they have
a tag to indicate the beginning of a command and
another tag, with a forward slash ( / ) inside it, to
indicate where that command should end.
E.g. HTML documents begin with
<HTML>
to indicate the beginning of the document and
finish with
</HTML>
to indicate the end of the document.
Nested tags
Whenever you have HTML tags within other HTML
tags, you must close the nearest tag first
Example:
<H1> <I> The Nation </I> </H1>
Avoid overlapping tags as this may cause
problems in some browsers. I.e.
<TAG1><TAG2> …. </TAG1></TAG2>
is incorrect and some browsers may ignore
both tags
The correct HTML would be
<TAG1><TAG2> …. </TAG2></TAG1>
HTML Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The DOCTYPE declaration defines the document type
The text between <html> and </html> describes the
web document
The text between <body> and </body> describes the
visible page content
The text between <h1> and </h1> describes a heading
The text between <p> and </p> describes paragraph
The <!DOCTYPE) Declaration
The <!DOCTYPE> declaration helps the browser to display
a web page correctly.
There are many different documents on the web, and To
display a document correctly, the browser must know both
type and version.
The doctype declaration is not case sensitive. All cases are
acceptable:
E.g. <!DOCTYPE html>, <!DOCTYPE HTML>, <!
doctype html>, <!Doctype Html>
Common Declarations
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
Standard Structure of HTML
HTML consists of standard ASCI (American
Standard Character Interchange) text surrounded
by html tags. Tags are instructions which tell a web
browser how to display a document. HTML tags are
enclosed within the < and > symbols, the editor
knows that anything within those symbols needs to
be interpreted as an instruction rather than being
displayed as text.
HTML files are saved with an .html or .htm
extension.
Sections of an Html Document
An html document is divided into two main
sections – the head section and the body section.
The head section contains information about the
document. This is usually placed at the top of the
html document (so it can load into the browser
first) and won’t be displayed inside your browser
window. The body section contains the content of
your document that will be displayed, such as
text and images.
HTML Structure
Each web page has a HEAD and a BODY.
All web pages have required tags like these:
<HTML> {begin the page}
<HEAD> {some set up instructions
</HEAD> are here}
<BODY> {the main part of the page
</BODY> is here}
</HTML> {end the page}
The HEAD section often contains web page instruction tags
like title tag that displays a page title.
The title is displayed at the top of the window (not on the
page).
Here is an example: <HEAD>
<TITLE>My Web Page</TITLE></HEAD>
HTML Structure
The BODY section contains all the instructions
for the actual page display.
Inside the body section of a web page you will
find tags that control text, graphics, lines,
links, tables and other special functions.
Remember that some, but not all, tags come in
pairs. Like <hr><br> etc.
HTML structure
<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY>
This is where you would include the text and
images on your Web page.
</BODY>
</HTML>
The <TITLE> Tag
The title of your Web page is very key and must
be chosen very careful;
The title of a Web page determines its ranking in
certain search engines.
The title will also appear on Favorite lists,
History lists, and Bookmark lists to identify your
page, and search engines always search
according to titles of web documents.
HTML Paragraph Tag
HTML documents are divided into paragraphs.
Paragraphs are defined with the <p> tag.
Example;
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Note: Browsers automatically adds an empty
line before and after paragraphs.
Don't Forget the End Tag
Most browsers will display HTML correctly even
if you forget the end tag:
Example
<p>This is a paragraph
this is unreliable as it can cause un expected
results or errors.
Text Formatting
Manipulating text in HTML can be tricky; Often
times, what you see is NOT what you get
For instance, special HTML tags are needed to
create paragraphs, move to the next line, and
create headings.
<B> Bold Face </B>
<I> Italics </I>
<U> Underline </U>
<P> New Paragraph </P>
<BR> Next Line
More on formatting text
Now we will go through some of the tags that may
be used to format text. Remember that some
older browsers may not support some of these
tags.
Bold <B> </B>
Physical tag that will display text as bold
<STRONG> </STRONG>
Logical tag typically displayed as bold
Italic <I> </I>
Physical tag that will display text in italics
<EM> </EM> Logical tag that will emphasize text,
typically displayed in italics
Text Formatting
NOTE: Though there is a tag for underlining (<U>
</U>) it is not a good idea to underline text. It may
be confused with a link, since they are usually
underlined.
The <FONT> </FONT> tag pair can be used to
change other aspects of text (e.g. color, size, etc). It
will be presented in a later chapter.
You will often see text displayed in large, bold type,
almost like a newspaper headline.
The “header” tags are used for this purpose.
The largest “header” tag is <H1> </H1> (larger
numbers make smaller headers). An example:
<H1>MY PAGE</H1> displays MY PAGE <H6>MY
PAGE</H6> displays MY PAGE
Center Tag
To center a header, the tag pair <CENTER>
</CENTER> is used.
An example:
<CENTER>
<H1>TRAINS</H1>
</CENTER>
displays…
TRAINS
Changing the Font
The expression <FONT FACE = “fontname”> …
</FONT> can be used to change the font of the
enclosed text
To change the size of text use the expression
<FONT SIZE=n> …. </FONT> where n is a
number between 1 and 7
To change the color, use <FONT
COLOR=“red”>…. </FONT>; The color can also
be defined using hexadecimal representation
( Example: #ffffff )
These attributes can be combined to change the
font, size, and color of the text all at once; For
example, <FONT SIZE=4 FACE=“Courier”
COLOR=“red”> …. </FONT>
Headings
HTML was originally intended to define the structure
of web documents, and Web pages are typically
organized into sections with headings. There are 6
heading levels in html with 1 being the largest so
that the most important heading should use a <H1>
tag; subheadings should use <H2> tags etc.. <h1>
defines the largest heading. <h6> defines the
smallest heading.
To create a heading use the expression <Hn>….</Hn>
where n is a number between 1 and 6
<H1>Level 1 heading</H1>
<H2>Level 2 heading</H2>
<H3>Level 3 heading</H3>
<H4>Level 4 heading</H4>
<H5>Level 5 heading</H5>
<H6>Level 6 heading</H6>
Use the HTML heading tags for headings only. Don't use
headings to make something BIG or bold.
Aligning Text
There are several ways of aligning text within
html. By default, text is ALIGNED to the left.
Any tag that creates a block of text is referred to
as a block tag. <H1>, <P> and <DIV> are all
examples of block tags. Each of these tags can
use an ALIGN attribute to align the contents of the
block of text. With this method you can align a
block of text to the center, left or right.
The ALIGN attribute can be inserted in the <P>
and <Hn> tags to right justify, center, or left
justify the text
For example, <H1 ALIGN=CENTER> Kampala
International University </H1> would create a
centered heading of the largest size for KIU.
<P ALIGN=”center”>All of this text would be
aligned to the Centre of the page</P>
Aligning Text
<DIV ALIGN=”center”>This text would appear in
the centre of the page</DIV>
Note that it is not necessary to include the ALIGN
attribute in the closing tag. When you close a tag
you also close all of its attributes.
Note <DIV ALIGN=”center”> </DIV> is exactly
the same as <CENTER> </CENTER>. CENTER
was introduced by Netscape before they added
support for the HTML 3.0 DIV element. It was
retained in HTML 3.2 on account of its
widespread use. Now even used in html5.
Page formatting
To define the background color, use the
BGCOLOR attribute in the <BODY> tag
To define the text color, use the TEXT attribute
in the <BODY> tag
To define the size of the text, type <BASEFONT
SIZE=n>
Example
<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY BGCOLOR=“black” TEXT=“white”>
<BASEFONT SIZE=7>
This is where you would include the text and
images on your Web page.
</BODY>
</HTML>
Lines
Many web pages use horizontal lines to divide the
page.
The <HR> tag is used to draw a line.
You can control the size (thickness in pixels) and
width (% of the window).
Examples:
<HR> {one pixel thick, 100% of window}
<HR SIZE=4 WIDTH=50%>
{4 pixels thick, 50% of window}
Attributes for the <HR> tag
WIDTH Can be specified in pixels or percentage of page
width <HR WIDTH=”150”> or <HR WIDTH=”80%”>
ALIGN Specifies if the line will be aligned to the left,
center (use US spelling) or right <HR ALIGN=”center”>
SIZE Specifies the height (thickness) of the line in pixels
<HR SIZE=”5”>
NOSHADE Normally a horizontal rule will appear as an
engraved line. Specifying this option will make it appear
as a solid color. <HR NOSHADE>
IMAGE Tag
The <IMG> tag is used to display graphics or
images in web pages.
The main requirement for the IMG tag is the file
name (“source”) of the image.
NOTE: Web page images DO NOT become part of a
web page file. They are separate files and must be
located in the same folder as the web page file
unless otherwise noted.
Image tag
Type <IMG SRC = “image.ext”>, where
image.ext indicates the image name and its
extension (jpeg, png, gif etc)
The WIDTH=n and HEIGHT=n attributes can be
used to adjust the size of an image
The attribute BORDER=n can be used to add a
border n pixels thick around the image
The ALT attribute can also be used as text to
display in case the image doesn’t load for
some reason.
Alternate Text
Some browsers don’t support images. In this
case, the ALT attribute can be used to create
text that appears instead of the image.
Example:
<IMG SRC=“risen.jpg” ALT = “Picture of
Jesus”>
IMAGE Tag
An example of an IMG tag that displays a graphic
called ME.JPG ; <IMG SRC=“ME.JPG”>
In the example above, the name (“source” or SRC)
of the picture file is ME.JPG (stored in the same
folder as the web page file).
NOTE: The image file’s name must be exactly as
stored (upper/lower case, etc.)
.JPG and .GIF indicate types of images appropriate
for web pages. Web graphics will be discussed in
more detail in a later lesson.
Lists
Many web pages contain lists, much like you
see in this PowerPoint presentation.
Lists can be “unordered” (using bullets like this
list) or “ordered” (with numbers or letters).
<UL> </UL> indicates an unordered (bulleted)
list.
<OL> </OL> indicates an ordered list.
<LI> </LI> is used for each list item.
Ordered lists
Ordered lists are a list
of numbered items. This is how it
To create an ordered would look on the
list, type as below; Web:
<OL> 1. Dogs
<LI>Dogs</LI> 2. Cats
<LI>Cats</LI> 3. Lizards
<LI>Lizards</LI>
</OL>
List Examples
These tags… Produce this list…
<UL> • Dogs
<LI>Dogs</LI> • Cats
<LI>Cats</LI> • Lizards
<LI>Lizards</LI>
</UL>
More on Ordered Lists….
The TYPE=x attribute allows you to change the
the kind of symbol that appears in the list.
A is for capital letters
a is for lowercase letters
I is for capital roman numerals
i is for lowercase roman numerals
Un ordered lists
An unordered list is a
list of bulleted items
Here’s how it would
To create an unordered look on the Web:
list, type:
<UL>
<LI> First item in list
</LI>
<LI> Second item in
list</LI>
<LI> Third item in
list</LI>
</UL>
More on Unordered Lists...
The TYPE=shape attribute allows you to
change the type of bullet that appears
circle corresponds to an empty round bullet
square corresponds to a square bullet
disc corresponds to a solid round bullet; this
is the default value
Definition lists
These are lists of terms and their corresponding
descriptions. Definition lists are typically formatted
with the term on the left with its description on the
right or on the next line. The definition text is
typically indented with respect to the term.
The opening list Tag is <DL>, it is followed by an
optional list Header (<LH>Caption</LH>) and then
by the definition term tag <DT>, and then the
definition Description tag <DD>.
Example: <DL>
<LH>List header</LH>
<DT>Term 1<DD>This is the description
of the first term.</DD></DT>
<DT>Term 2<DD>This is the description
of the SECOND term.</DD></DT>
</DL>
HTML Comments
Comments can be inserted in the HTML code to
make it more readable and understandable.
Comments are ignored by the browser and not
displayed.
Comment statements are notes in the HTML code
that explain the important features of the code
The comments do not appear on the Web page itself
but are a useful reference to the author of the page
and other programmers
To create a comment statement use the tags below;
<!-- This is a comment -->
HTML Line Breaks
Use the <br /> or <br> tag if you want a line
break (a new line) without starting a new
paragraph:
Example
<p>This is<br />a para<br />graph with line
breaks</p>
The <br /> tag is an empty tag. It has no end tag
like </br>.
You can read more about empty HTML tags in the
next chapters of this tutorial.
<br> or <br />
In XHTML, XML, and future versions of HTML, tags
with no end tags (closing tags) are not allowed.
Even if <br> works in all browsers, writing <br />
instead is more future proof.
