WEB TECHNOLOGY 511

FACULTYOF INFORMATIONTECHNOLOGY

WEBTECHNOLOGY511
YEAR 1 SEMESTER1

Page | 0
 WEB TECHNOLOGY 511

Registered with the Department of Higher Education as a Private Higher Education Institution under
the Higher Education Act, 1997.
Registration Certificate No. 2000/HE07/008

FACULTY OF INFORMATION TECHNOLOGY

LEARNER GUIDE

MODULE: WEB TECHNOLOGY511

PREPARED ON BEHALF OF
RICHFIELD Graduate Institute of Technology (PTY) LTD

AUTHOR: LUNGELO NZIMANDE

EDITOR: Mr. EMMANUEL MANY
FACULTY HEAD: ISAKA REDDY

Copyright © 2018
Richfield Graduate Institute of Technology (Pty) Ltd
Registration Number: 2000/000757/07
All rights reserved; no part of this publication may be reproduced in any form or by any means, including
photocopying machines, without the written permission of the Institution.

Page | 1
 WEB TECHNOLOGY 511

TOPIC 1:INTERNET AND WORLD WIDE WEB Lecture 1-7

Overview of the Internet ...........................................................................................................................5
1.1 THE INTERNET 5
1.2 THE WORLD WIDE WEB .......................................................................................................................5
1.3 CONNECTING TO THE INTERNET .........................................................................................................6
1.4 COMMUNICATION PROTOCOLS ..........................................................................................................7
1.5 INTERNET ADDRESSES .........................................................................................................................7
1.6 UNIFORM RESOURCE LOCATORS (URL) ...............................................................................................9
1.7 UNDERSTANDING E-MAIL ..................................................................................................................10
KEY TERMS USED IN THIS SECTION ..........................................................................................................11
SECTION 1 REVIEW QUESTIONS ..............................................................................................................12
TOPIC 2: INTRODUCTION TO HTML Lecture 8-13
2.1 INTRODUCING HTML .........................................................................................................................17
2.2 HTML AS A MARKUP LANGUAGE .......................................................................................................18
2.3 XML AND XHTML 19
2.4 CODING APPROACHES .......................................................................................................................21
2.5 BUILDING A WEB SITE DEVELOPMENT TEAM....................................................................................22
KEY TERMS USED IN THIS SECTION ..........................................................................................................23
SECTION 2 REVIEW QUESTIONS ..............................................................................................................24
TOPIC 3: HTML BASICS Lecture 14-19
INTRODUCTION 26
3.1 UNIFORM RESOURCE LOCATOR ........................................................................................................26
3.2 TAGS IN HTML 27
3.3 SOURCE CODE OF A WEB PAGE .........................................................................................................28
3.4 CREATING A SIMPLE HTML DOCUMENT............................................................................................29
3.5 ADDING BODY TEXT 30
KEY TERMS USED IN THIS SECTION ..........................................................................................................32
SECTION 3 REVIEW QUESTIONS ..............................................................................................................33
TOPIC 4: HEADINGS AND PARAGRAPHS Lecture 20-27
INTRODUCTION 35
4.1 HEADINGS 35
4.2 PARAGRAPHS 37
4.3 COMMENTS 40
4.4 CHARACTER ENTITIES.........................................................................................................................41
4.5 FORMATTING TEXT 41
4.6 ALIGNMENT 43
4.7 USING HORIZONTAL RULERS .............................................................................................................44
KEY TERMS USED IN THIS SECTION ..........................................................................................................47
SECTION 4 REVIEW QUESTIONS ..............................................................................................................49
TOPIC 5: HYPERLINKS Lecture 27-30
INTRODUCTION 51
5.1 HYPERLINKS 51
5.2 THE A TAG (ANCHOR) ........................................................................................................................52
5.3 SENDING E-MAIL FROM A PAGE ........................................................................................................54
KEY TERMS USED IN THIS SECTION ..........................................................................................................54
SECTION 5 REVIEW QUESTIONS ..............................................................................................................55
TOPIC 6: IMAGES AND BACKGROUNDS Lecture 31-35
6.1 ADDING IMAGES 58

Page | 2
 WEB TECHNOLOGY 511

6.2 ALIGN TEXT AROUND IMAGES ...........................................................................................................58

6.3 GRAPHICS AS HYPERLINKS .................................................................................................................59
6.4 IMAGE FORMATS 60
6.5 BACKGROUNDS 60
KEY TERMS USED IN THIS SECTION ..........................................................................................................62
SECTION 6 REVIEW QUESTIONS ..............................................................................................................64
TOPIC 7: TABLES Lecture 36-43
INTRODUCTION 66
7.1 TABLES 66
7.2 TABLE ATTRIBUTES 66
7.3 TABLE HEADINGS 68
7.4 SPANNING A CELL 68
7.5 ALIGMENT OF A TABLE OR CELL ........................................................................................................69
7.6 IMAGES AND LINKS WITHIN CELLS ....................................................................................................69
7.7 NESTED TABLES 70
KEY TERMS USED IN THIS SECTION ..........................................................................................................72
SECTION 7 REVIEW QUESTIONS ..............................................................................................................74
TOPIC 8: STYLE SHEETS Lecture 44-49
INTRODUCTION 76
8.1 STYLE SHEETS 76
8.2 EMBEDDED STYLE 77
8.3 DIV and SPAN TAGS 78
8.4 LINKED STYLES 79
8.5 CASCADING STYLE SHEETS .................................................................................................................81
KEY TERMS USED IN THIS SECTION ..........................................................................................................82
SECTION 8 REVIEW QUESTIONS ..............................................................................................................83
TOPIC 9: FORMS Lecture 50-56
INTRODUCTION 85
9.1 FORMS 85
9.2 TEXT BOXES 88
9.3 LIST BOXES 89
9.4 RADIO BUTTONS 90
9.5 CHECK BOXES 91
9.6 CREATING BUTTONS ..........................................................................................................................93
KEY TERMS USED IN THIS SECTION ..........................................................................................................95
SECTION 9 REVIEW QUESTIONS ..............................................................................................................96
TOPIC 10: FRAMES Lecture 57-63
INTRODUCTION 98
10.1 UNDERSTANDING FRAMES ..............................................................................................................98
10.2 NESTED FRAMES 100
10.3 LINKING FRAMES 101
10.4 SPECIAL TARGET NAMES................................................................................................................103
10.5 MODYFIYING FRAMES ...................................................................................................................104
10.6 FRAMES PAGE PROPERTIES ...........................................................................................................105
10.7 NAVIGATION BAR 108
KEY TERMS USED IN THIS SECTION ........................................................................................................109
SECTION 10 REVIEW QUESTIONS ..........................................................................................................111

Page | 3
 WEB TECHNOLOGY 511

PRESCRIBED TEXTBOOK:
INTERNET & WOZLD WIDE WEB How to Program, 5th Edition, by Paul Deiltel, Harvey Deitel, Abbey
Deitel.

INTERACTIVE ICONS USED IN THIS LEARNER GUIDE

Learning Outcomes Study Read Writing Activity

Research Glossary Key Point

Think Point

Review Questions Case Study Bright Idea Problem(s)

Multimedia Resource References Web Resource

Page | 4
 WEB TECHNOLOGY 511

ONE|INTERNET AND WORLD WIDE WEB

LEARNING OUTCOMES

1. Define the Internet and the World Wide Web

2. Start Web browser, navigate in the browser, and use the Media Bar

Overview of the Internet

The Internet, e-mail and web based applications have become a part of our everyday
lives. Many people have computers, tablets and cellphones which they can use for
entertainment, personal research, communication and sharing information with
friends. Today, a large number of electronic devices use internet. Internet has also
become a very useful tool doing business, allowing companies to use all possible
options to promote and sell the products and services. Most companies now have e-
mail addresses and Facebook pages for their customers.
1.1 THE INTERNET
The internet started as a tool for connecting individual government, university, and
research lab computer networks together. The internet was initially intended to
support military research by connecting various networks to the U.S. Department of
Defence’s ARPANET. Today, internet is used for communication, research, education,
WEB

financial transaction, real time updates, online booking, job search, blogging and
WIDEWEB

shopping. The roots of the internet are in government applications, but no single
organization controls the Internet
1.2 THE WORLD WIDE WEB
WORLDWIDE

The term WWW refers to the World Wide Web or simply the Web. The World Wide
Web consists of all the public Web sites connected to the Internet worldwide,
including the client devices (such as computers and cell phones) that access Web
ANDWORLD

content. The WWW is just one of many applications of the Internet and computer
networks.The World Web is based on these
technologies:
HTML - Hypertext Markup Language
HTTP Hypertext Transfer Protocol
INTERNETAND

IDEA Web servers and Web browsers

Researcher Tim Berners-Lee led the
A computer network is a development of the original World Wide Web in
ONE|INTERNET

collection of computers the late 1980s and early 1990s. He helped build
connected to each other for the prototypes of the above Web technologies and
purpose of sharing resources. coined the term "WWW." Web sites and Web
ONE|

Page | 5
 WEB TECHNOLOGY 511

browsing exploded in popularity during the mid-1990s.

To access Web sites, an applications called Web browser (such as Internet Explorer,
Mozilla Firefox, Google Chrome, Safari, and Opera Mini) is used. A Web site is a
collection of Web pages that are connected together by hyperlinks. A Web page is
a document that’s created in html that shows up on the internet when you type in
the web page’s address. With hyperlinks, you
can move from one page or web site to another,
this is also known as browsing or ‘’surfing” the
web. Because the information on the web
WEB RESOURCE changes constantly, there is always something
new to see.
http://compnetworking.about.com 1.3 CONNECTING TO THE INTERNET
/cs/worldwideweb/g/bldef_www.h In order to access or use web sites, the device
tm (PC, Cellphone or tablet) must be connected to
the internet. To connect to the internet, you will
need the following:
 A personal computer (or any other device) with a web browser. Microsoft’s
Internet Explorer is one of the most comprehensive web browsers available. Many
web browsers can be downloaded from the internet at no cost.
 Access to a hostcomputer—is to a computer connected to the Internet. The
host computer might be maintained by your company or by a commercial Internet
service provider (ISP).
 A connection device –This device can be a modem or network cable. It allows
your computer to send and receive packets or connect to a network.
Internet host computers
ONE| INTERNET AND WORLD WIDE WEB

You access the Internet by using an Internet service provider to connect to an

Internet host computer. A service provider supplies you with an Internet account
that includes a user name and password that you use to access the host computer.
There are three major types of Internet access:
 Corporate network: If your company network is connected to the Internet, you
can use the existing network cable to gain access. As a network user, you first log
on to your corporate network; then you can connect to the Internet. If you are
connecting from a remote location, you first need a phone line and modem to dial
in to your corporate network.
 Community network or free net: As part of the
National Public Telecommuting Network (NPTN)
organization, local communities provide Internet
access at public facilities such as a libraries or
IDEA community centers. In this situation, you might be
given a user account to log on at a walk-up
To enhance your browsing terminal.
experience, you can use  Commercial Internet service provider (ISP):
additional equipment such as a You can purchase Internet connection time, an
printer, speakers, media Internet account, and e-mail service from an ISP,
players and so on such as EarthLink or AT&T WorldNet. The cost
might include a one-time registration fee, a
monthly fee, or charges based on how long you are connected. Online service

Page | 6
 WEB TECHNOLOGY 511

providers, such America Online, not only give you access to the Internet, but also provide
proprietary Web browsing software and content.
1.4 COMMUNICATION PROTOCOLS
In an effort to standardize data transmission, the Transmission Control
Protocol/Internet Protocol was created. Today,
we refer to this protocol as TCP/IP. More
specifically, Hypertext Markup Language (HTML)
is the standard programming language used to
build documents for the Web; and Hypertext
Transfer Protocol (HTTP) is the set of rules used
Multimedia Resource
to distribute hypertext documents on the Web.
https://www.commonsensemedia.o For most Web sites, you will need to use HTTP.
rg/videos/what-is-the-internet There are two other protocols that you might run
across:
 HTTPS: This is HTTP with a Secure Sockets Layer (SSL) security added on. HTPS
is a communication protocol for secure communication over a computer network.
This protocol is used for online transactions and other activities that require accounts
and privacy (e.g. Online shopping, Facebook, etc.) to protect information that is
being transferred (username, password, credit card information, etc.).
 File Transfer Protocol (FTP): This is a protocol which is used to transfer files
between computers running TCP/IP. Some FTP sites allow you to access them
anonymously without supplying a user name and password.

1.5 INTERNET ADDRESSES

In a network, each computer is represented by a number which is known as an
Internet Protocol (IP) address. This is a numerical label assigned to each device
ONE| INTERNET AND WORLD WIDE WEB

participating in a computer network that uses Internet Protocol for communication.

An IP address is a collection of four sets of numbers (Also known as Octets) separated
by periods. Each set can have a maximum of three digits. E.g. 127.0.0.1 and
220.98.234.9
In most cases, the IP address is provided by your ISP. Every IP address is unique.
 Host names
An IP address is just numbers, which makes it hard to memorize for each device an
individual uses, therefore people prefer to use words rather than numbers. The IP
addresses are registered with the Internet Network Information Center (InterNIC)
and given host names that are easier for people to remember. Host names are
company names, such as Microsoft, or easy to remember
abbreviations. The Domain Name Service (DNS) is the
method of matching host names with their unique IP
addresses and vice versa.
 Domain names
Computer networks are divided into organizational units
THINK POINT called domains. The domain name might be the same as the
TCP/IP is one of the host name. In large networks, however, the domain name
might be different. Domains can be divided into subdomains
main protocols in
for organizational purposes. The fully qualified domain
networks. Do you
name combines the host and domain names in the following
agree? Why?
syntax: Hostname.subdomain.domain

Page | 7
 WEB TECHNOLOGY 511

 Top-level domains
The top-level domain name provides a hint as to the type of organization in which
the Internet host computer resides. Outside the United States, the top-level domain
contains a two-letter country code as well. For example, CA represents Canada, DE
represents Germany, and KR represents South Korea. You can search for “Internet
country codes” on the Web to view a complete listing. The following table lists the
top-level domains.

Domain Description
.com Commercial businesses
.edu Educational institutions
.gov Governmental institutions
.mil Military institutions
.net Networks
.org Organizations (usually non-profit)
ONE| INTERNET AND WORLD WIDE WEB

User names and Internet addresses

Research Each person who accesses the Internet has a unique
user name and address. There are a variety of forms
What are the uses of the for user names. The form usually depends on how
internet in education?
you are accessing the Internet. A common format is the user’s first and last name
separated by an underscore or period, as in Jane_Doe or Jane.Doe. Another format
might be the first initial followed by the last name, as in jdoe. If you obtain Internet
access from an ISP, you are usually allowed to define your own user name;
therefore, you user name might be a nickname or a combination of letters and
numbers.
In corporate situations, user names are determined by company naming standards
to guarantee unique names within the company domain. The combination of your
user name and the host computer name creates your complete Internet address.
Reading from right to left, the Internet address moves from general to specific. The
syntax for an Internet address is:

[email protected]

For example, Jane Doe in the marketing department of Acme Corporation might
have the following address:
Page | 8
 WEB TECHNOLOGY 511

[email protected]

When reading Internet addresses, the “@” symbol is pronounced as “at” and the periods are pronounced
as “dot.” The example address is read as “Jane Doe at marketing dot Acme dot com.” Internet addresses
have become standard business card data.

1.6 UNIFORM RESOURCE LOCATORS (URL)

To identify a particular page or document on the Internet, you need an Internet address called a Uniform
Resource Locator, or URL.A URL consists of three major components that provide the necessary
information to find a specific document. These components are separated by a forward slash (/). For
example, the URL for the page that contains downloadable files for Microsoft Internet Explorer might be
as follows:
http://www.microsoft.com/ie/downloads
 http:// is the protocol used.
 www.microsoft.com/ is the server’s host name and domain.
 ie/downloads is the directory path where the page is stored. The path might also include files
names.

Page | 9
 WEB TECHNOLOGY 511

1.7 UNDERSTANDING E-MAIL

Short for electronic mail, e-mail or email is textmessages that may
contain files, images, or other attachments sent through a network to a specified
individual or group of individuals. The first e-mail was sent by Ray Tomlinson in 1971.
By 1996, more electronic mail was being sent than postal mail. Below is an example
and breakdown of an Internet e-mail address.
When sending an email, the sender’s computer uses SMTP protocol to send an email
to the email server which passes the email to the receivers email server. The sender’s
and receiver’s email servers communicate using SMTP. An email will reside on the
receiver’s server until a request to download or get an email is sent by the receiver.
An email is then sent to the receiver’s computer using POP3 or IMAP4 protocol.
ONE| INTERNET AND WORLD WIDE WEB

Exhibit 0-1: The SMTP protocol is used to send e-mail to a recipient’s mail server and
POP3 or IMAP4 protocol is used to download e-mail to the client

Read
PRESCRIBED TEXTBOOK:
INTERNET & WOZLD WIDE WEB How to Program, 5th Edition, by Paul Deiltel,
Harvey Deitel, Abbey Deitel. Page 33, 44 and 50

http://www.gcflearnfree.org/internet101/1

Page | 10
 WEB TECHNOLOGY 511

KEY TERMS USED IN THIS SECTION

Connectivity Device: One of several types of specialized devices that allows two or
more networks or multiple parts of one network to connect and exchange data.
E-mail : messages distributed by electronic means from one computer user to one
or more recipients via a network.
Hypertext Markup Language: a standardized system for tagging text files to achieve
font, colour, graphic, and hyperlink effects on World Wide Web pages
Internet: A complex WAN that connects LANs and clients around the globe.
Internet Address: is a numerical label assigned to each device (e.g., computer,
printer) participating in a computer network that uses the Internet Protocol for
communication.
Internet Service Provider:an organization that provides services for accessing, using,
or participating in the Internet.
Network: A group of computers and other devices (such as printers) that are
connected by and can exchange data via some type of transmission media, such as
a cable, a wire, or the atmosphere.
Post Office Protocol version 3(POP3): a standard mail protocol used to receive emails
from a remote server to a local email client.
Simple Mail Transfer Protocol(SMTP) : It's a set of communication guidelines that
allow software to transmit email over the Internet.
Uniform Resource Locator (URL): the generic term for all types of names and
addresses that refer to objects on the World Wide Web.
Web browser:a software application for retrieving, presenting and traversing
information resources on the World Wide Web.
Web Server: a program that, using the client/server model and the World
Wide Web's Hypertext Transfer Protocol (HTTP), serves the files that
ONE| GLOSSARY OF TERMS

form Web pages to Web users (whose computers contain HTTP clients that forward
their requests).

Page | 11
 WEB TECHNOLOGY 511

SECTION 1 REVIEW MULTIPLE CHOICE QUESTIONS

For more MCQs go to the prescribed textbook, Internet World Wide
Web, Page number 66
1. Internet is
a. a local computer network
b. a world wide network of computers
c. an interconnected network of computers
d. a world wide interconnected network of computers which use a common
protocol to communicate with one another

2. The facilities available in the internet are

(i) electronic mail
(ii) remote login
(iii)file transfer
(iv)word processing
a. i, ii
b. i, ii, iii
c. i, ii, iv
d. ii, iii and iv

3. Internet requires
a. an international agreement to connect computers
b. a local area network
c. a commonly agreed set of rules to communicate between computers
d. a World Wide Web

4. Each computer connected to the internet must

a. be an IBM PC
b. have a unique IP address
c. be internet compatible
d. have a modem connection

5. P address is currently
a. 4 bytes long
b. available in plenty
c. 6 bytes long
d. not assigned as it is all used up

6. IP addresses are converted to

a. a binary string
b. alphanumeric string
c. a hierarchy of domain names
d. a hexadecimal string

Page | 12
 WEB TECHNOLOGY 511

7. What is a search engine?

a. a program that searches engines
b. a web site that searches anything
c. a hardware component
d. a machinery engine that search data

8. Internet addresses must always have at least

(i) a country name or organization type
(ii) internet service provider’s name
(iii) name of organization
(iv) name of individual
(v) type of organization
a. i, ii, iii
b. ii, iii, iv
c. i, iii
d. ii, iii, iv, v

9. Internet uses
a. Packet switching
ONE| REVIEW MULTIPLE CHOICE QUESTIONS

b. Circuit switching
c. Telephone switching
d. Telex switching

10. Internet data is broken up as

a. fixed length packets
b. variable length packets
c. not packetized
d. 64 bytes packets
Answer: B
11. Internet packet data structure consists of
(i)source address
(ii) destination address
(iii)serial number of packets
(iv)message bytes
(v)Control bits for error checking
(vi) Path identification bits
a. i, ii, iii
b. i, ii, iii, iv
c. i, ii, iii, iv, v
d. i, ii, iii, iv, v, vi

12. The packets of an internet message

a. take a predetermined path
b. take a path based on packet priority
c. go along different paths based on path availability
d. take the shortest path from source to destination

Page | 13
 WEB TECHNOLOGY 511

13. The time taken by internet packets

a.can be predetermined before transmission
b. may be different for different packets
c. is irrelevant for audio packets

14. By an intranet we mean

a.a LAN of an organization
b. a Wide Area Network connecting all branches of an
organization
c. a corporate computer network
d. a network connecting all computers of an organization and
using the internet protocol

15. By an extranet we mean

a.an extra fast computer network
b. the intranets of two co-operating organizations
interconnected via a secure leased line
ONE| REVIEW MULTIPLE CHOICE QUESTIONS

c. an extra network used by an organization for higher reliability

d. an extra connection to internet provided to co-operating
organizati

16. World Wide Web

a.is another name for internet
b. world wide connection for computers
c. a collection of linked information residing on computers connected
by the internet
d. a collection of world wide information

17. Among services available on the

World Wide Web are
(i)Encryption
(ii)HTTP
(iii)HTML
(iv)Firewalls
a.i and ii
b. ii and iii
c. iii and iv
d. i and iv

18. A world wide web contains web pages

a.residing in many computers
b. created using HTML
c. with links to other web pages
d. residing in many computers linked together using HTML

19. A web page is located using a

a. Universal Record Linking

Page | 14
 WEB TECHNOLOGY 511

b. Uniform Resource Locator

c. Universal Record Locator
d. Uniformly Reachable Links
20. A URL specifies the following:
(i) protocol used
(ii) domain name of server hosting web page
(iii) name of folder with required information
(iv) name of document formatted using HTML
(v) the name of ISP
a. i, ii, iii, iv
b. ii, iii, iv, v
c. i, iii, iv
d. i, ii, iii, v

1.1 What is a network?

A. A network is a collection of devices connected to each other for the purpose
of sharing resources such as printers.
B. A network is a collection of devices placed together in a room
C. Network refers to the signal on a computer.
D. A network is a device that connects computers together.
ONE| REVIEW MULTIPLE CHOICE QUESTIONS

1.2 To connect to the internet, what are the three main things you must have?
A. PC, Modem, Airtime
B. PC, connection device, Access to host computer
C. PC, Modem, Speakers
D. Access to a PC, Access to a connection device, access to a mouse

1.3 TCP/IP stands for?

A. Testing Connection Protocol/ Internet Protocol
B. Transmission Control Policy/ Internet Process
C. Transmission Control Protocol/Internet Protocol
D. None of the above

1.4 To send an email to a recipient’s mail sever, which protocol is used?

A. SMTP
B. HTTP
C. TCP/IP
D. POP3
1.5 How can you describe DNS?
A. A name of a pc part that is used to connect to a network.
B. A method of matching host names with their unique IP addresses and vice
versa.
C. A name used to connect to the internet.
D. A device that collects data from the internet.

1.6 A student wants to be able to access internet at home. A student already

has a computer, what other things a student need to have in order to use
internet?

Page | 15
 WEB TECHNOLOGY 511

A. Wi-Fi and Monitor

B. Connection device and Access to host computer
C. Web address and data bundles
D. Internet access and Wi-Fi.
1.7 Anyone can connect to the internet if three main things required to
connect to the internet are present, but what are the things that can
be used to enhance browsing experience?
A. Printer, speakers, media player.
B. Projector, modem, cables.
C. Mouse, Browser, modem.
D. Host computer, PC, internet access.

1.8 There are many protocols used today. Which protocol is used to
transfer files between computers running TCP/IP?
A. HTTPS
B. FTP
C. SSL
D. TCP/IP
ONE| REVIEW MULTIPLE CHOICE QUESTIONS

1.9 These are some of the domains used today

A. .com, .virtual, .private
B. .com, .org, .edu
C. .comm, .web, .net
D. .com, .gov, .mall

1.10 An IP address is made up of four sets of number that are separated

by periods. Those numbers are called:
A. Octets
B. Ids
C. Codes
D. sections

Page | 16
 WEB TECHNOLOGY 511

TWO|INTRODUCTION TO HTML

LEARNING OUTCOMES

1. Define HTML
2. Differentiate between XML and HTML
3. Appreciate different coding approaches

2.1 INTRODUCING HTML

When Tim Berners-Lee first proposed HTML at the European Laboratory for Particle
Physics (CERN) in 1989, he was looking for a way to manage and share large amounts
of information among colleagues. He proposed a web of documents (at first he called
it a mesh) connected by hypertext links (hyperlinks) and hosted by computers called
hypertext servers (which are now known as web servers). As the idea developed,
Berners-Lee named the mesh the World Wide Web. He created an application of the
Standard Generalized Markup Language (SGML), a standard system for specifying
document structure, and called it Hypertext Markup Language (HTML). HTML greatly
reduces the complexity of SGML to enhance transmission over the internet.
When Berners-Lee created HTML, he adopted only the necessary elements of SGML
for representing basic office documents, such as memos and reports. The first
working draft of HTML included elements such as titles, headings, paragraphs and
lists. HTML was intended for simple document structure, and not to handle the
variety of information needs in use today. The document expression capabilities of
HTML currently are pushed to the limit. HTML has been manipulated in thousands of
ways to encompass the staggering breadth of information available on the Web.
TWO| INTRODUCTION TO HTML

Hypertext and Hypermedia

The basic concept of the World Wide Web, and the most revolutionary idea
envisioned by Berners-Lee, is the use of hypertext to link information on related
topics over the Internet. Hypertext is a non-linear way of organizing information.
When using a hypertext system, you can jump from one related topic to another,
quickly find the information that interests you, and return to your starting point
(home page) or move on to another related topic of interest. As a hypertext author,
you determine which terms to create as hypertext links (hyperlinks) and where users
will end up when they click a link.
On the Web, clickable hyperlinks, which can be text or images, can connect you to
another Web page or allow you to open or download a file, such as a
sound,image, movie, or executable file. The early Internet consisted of only text and
binary files, and when these new hypertext capabilities were introduced, they
demanded a new term-hypermedia, the linking of different types of media on the
World Wide Web.

Page | 17
 WEB TECHNOLOGY 511

2.2 HTML AS A MARKUP LANGUAGE

A markup language is a structured language that lets you identify common
sections of a document, such as headings, paragraphs, and lists. An HTML
file includes text and HTML markup elements that identify these sections.
The HTML markup elements indicate how the document sections display in
a browser. For example, the <H1> element tags in the following code
indicate that the text is a first-level heading:
<H1>This is a first-level heading</H1>(Headings will be covered in Topic 4)
The browser interprets the HTML markup elements and displays the results,
hiding the actual markup tags from the user. This will be the output for the
above code:

HTML adopts many features of SGML, including the cross-platform

compatibility that allows different computers to download and read the
same file from the Web. Because HTML is cross-platform compatible, it does
not matter whether you are working on a Windows PC, Macintosh, or UNIX
computer.You can create HTML files and view them on any computer
platform.

HTML is not a What You See Is What You Get (WYSIWYG) layout tool. It was
intended only to express logical document structure, not formatting
characteristics.Although many current HTML editors let you work with a
TWO| INTRODUCTION TO HTML

graphical interface, the underlying code they create

still is basic HTML. Because HTML was not designed
as a layout language, however, many editing
programs create spaghetti code or use HTML tricks
to accomplish a certain effect. You cannot rely on
Research the HTML editor’s WYSIWYG view to test your Web
pages. Because users can view the same HTML file
What are the advantages of using through different browsers and on different
HTML5 machines, the only way to be sure of what your
audience sees is to preview your HTML files
through the browsers you anticipate your audience will use.

Despite its limitations, HTML is ideal for the Web because it is an open, non-
proprietary, cross-platform compatible language. All of the markup tags are
included with every document and usually can be viewed through your
browser. Once you are familiar with the HTML syntax, you will find that one
of the best ways to learn new coding techniques is to find a Web page you
like and view the source code.

Page | 18
 WEB TECHNOLOGY 511

Separating style from structure

Style elements, such as <FONT>, were introduced by browser developers to help

HTML authors bypass the design limitations of HTML. Designers and writers who
are accustomed to working with today’s full-featured word processing programs
want the same ability to manipulate and position objects precisely on a Web page
as they have on the printed page. This is not what HTML was designed to do,
however.HTML, like SGML, is intended to represent document structure, not
style. Style information should be separate from
the structural markup information.

This separation of style and structure has been

accomplished by the W3C (World Wide Web
Consortium), which wrote a specification for a
THINK POINT Web style language in 1996. The style
language,named Cascading Style Sheets (CSS),
What are the advantages of allows authors to create style rules for elements
separating style from structure? and express them externally in a document
known as a style sheet. CSS rules are easy to
create and very powerful. For example, assume that you want all of your
<H1> headings to appear green and centered everywhere on your Web site.
CSS will be covered in Topic 8 (Style Sheets).

This mixing of structure and style and the

subsequent varied support of different style
elements in different browsers threaten to
undermine the entire foundation of the Web and
to render it useless as HTML becomes fractured
Multimedia Resource by proprietary elements. But that changed, today
most web browsers now support CSS, allowing
http://www.youtube.com/watch?v=
web pages design today to have different designs
CKlh1lwe2rY
and layouts.
TWO| INTRODUCTION TO HTML

2.3 XML AND XHTML

With the Extensible Markup Language (XML), the W3C has a chance to start from
scratch in defining a standard markup language, instead of playing catch-up, as it
had to do with HTML. XML is also a subset of SGML. Unlike HTML, XML is a meta-
language, not a language itself, but a language that lets you describe other
languages. As a meta-language, XML allows you to create your own elements to
meet your information needs, which significantly distinguishes it from the
predefined elements of HTML. XML provides a format for describing structured
data that can be shared by multiple applications across multiple platforms.

Features of XML
Some of the features of XML that makes it a very useful language are:
 XML describes data: The power of data representation in XML comes
from separating display and style from the structure of data. XML elements
describe data and structure only and not presentation. Where HTML contains
Page | 19
 WEB TECHNOLOGY 511

elements that describe a word as bold or italic, XML declares an element to be a book title,
item price, or product measurement. Once the data are structured in XML, they can be
displayed across a variety of media,such as a computer display, television screen, or
handheld device, using an associated style sheet that contains the appropriate display
information. Currently, Cascading Style Sheets is the only complete style language for
XML, though the W3C is working on the Extensible Style Language (XSL), which is derived
from XML.
 XML allows better access to data: XML is valuable because it allows access to
more meaningful searches for information, development of flexible applications,
multiple views of data, and is based on a non-proprietary standard that supports the
open nature of the Web. People as well as machines can read XML code. Some years
from now, someone could open your XML file and understand what you meant by using
<HEADLINE> and <PARAGRAPH> as markup elements. The cross-platform, independent
nature of XML markup supports a variety of data applications migrating to the Web. XML
lets you display data on many devices without changing the essential data descriptions.
 XML lends itself to customized information: XML is ideal for distributing
complex, esoteric information among many users sharing the same types of
knowledge. With the customized elements of XML, standards organizations for
various industries and information types can enforce the use of markup constraints
with all users. For example,chemists can have their own chemical markup language,
and poets can have their own poetic markup language—ensuring that the content
can be read and understood by anyone interested in their information type. Currently,
XML still is under development. Many of the proposed features of XML, including XML
linking and the Extensible Style Language,still are incomplete and supported differently by

Read
TWO| INTRODUCTION TO HTML

PRESCRIBED TEXTBOOK:
INTERNET & WOZLD WIDE WEB How to Program, 5th Edition, by Paul Deiltel,
Harvey Deitel, Abbey Deitel. Page 70 - 73

http://www.gcflearnfree.org/internet101/1
different vendors. Internet Explorer 5.0 is currently the only browser that supports XML,
and its support is weak in some areas. Be careful with implementation of any XML project
by testing your work thoroughly.

WEB RESOURCE

http://www.xml.co.za

Page | 20
 WEB TECHNOLOGY 511

The following table shows the difference between XML and HTML:

XML HTML
User definable tags Defined set of tags designed for web
display
Content driven Format driven
End tags required for well-formed End tags not required
documents
Quotes required around attributes values Quotes not required
Slash required in empty tags Slash not required

2.4 CODING APPROACHES

There are three types of coding approaches that you can use to develop Web pages.
The following list explains these coding types:
 Lowest common denominator coding: although it may seem difficult to create
pages that always display properly,it is not impossible. One way to create portable
pages is to use a lowest common denominator approach. This approach provides the
greatest acceptance across browsers because the authors choose to code their HTML
using the next-to-last release of HTML. For example, when the browsers supporting
HTML 5 in 2012 were released, many continued coding to the HTML 4.01 and XHTML
standard, knowing that their HTML would render more consistently because the
browsers understood all of the 4.01 specifications. This safer method of coding is
widely supported among sites that are interested in the greatest accessibility.
Maintaining coding specifications of a previous release of HTML does not mean that
your site has to be visually uninteresting, although you may have to sacrifice using the
latest enhancements.
 Cutting-edge coding: another strategy to adopt when designing your Web site is
to stay at the cutting edge. Some designers insist that their users keep up with them
TWO| INTRODUCTION TO HTML

by requiring the latest browser. This design strategy can result in visually exciting and
interactive sites that keep pace with the latest technology. Often the user must not
only have the latest browser version, but plug-in enhancements that render certain
media types, such as Macromedia Flash animations. Plug-ins are helper applications
that assist a browser in rendering a special effect. Without the plug-in, your user will
not see the results of your work. Often when a new browser is released, these plug-
ins are included for the most widely adopted enhancements. The risk these cutting-
edge sites take is that many users may not be able to see the content as it was
designed. Sites that use the latest enhancements also may require significant
download times for the special effects to load on the user’s computer. Sites that adopt
the latest technologies must make sure that their user is up to the browser challenge.
Otherwise, their information may go unread.
 Browser-specific coding: how many times have you visited a site that states
“This site is best viewed with Internet Explorer 10”? This statement warns you that the
author has decided to forgo the challenge of coding for multiple browsers. The author
may have wanted to use some unique enhancement for the site, or may have found
that the site did not render properly in other browsers. This may seem the most
expedient coding method to adopt. Consider the consequences, however. A site

Page | 21
 WEB TECHNOLOGY 511

coded for only one browser may alienate a significant number of readers who
immediately leave because they do not have the correct browser.
2.5 BUILDING A WEB SITE DEVELOPMENT TEAM
Although one person can maintain small Web sites, larger sites require a group of
personnel filling a variety of roles. The line can be blurred between the roles, and of
course, many aspects of site design require more than one head to solve a problem.
The following roles are examples of the types of talent necessary to build a larger,
well-conceived site.
 Server administrators - Get to know and appreciate the technical people that
run your Web server. They take care of the sticky technical issues like firewalls,
modem ports, internal security, file administration, and back-up procedures. Consult
with them to determine your Web site’s default filename and directory structure.
They also can generate reports that will tell you how many visitors your site is
attracting, where the visitors are coming from, and what pages they like best.
 HTML coders - These are the people responsible for creating the HTML code
and troubleshooting the site. Most HTML coders now are using HTML editors to
create code, but any self-respecting HTML coder knows how to open the HTML file in
a text editor and code by hand. The coders also are responsible for testing and
evaluating the site across different operating systems and Web browsers.
 Designers - Designers are the graphic artists responsible for the look of the site.
They will use design software, such as Adobe PhotoShop, the industry standard
graphic design program. Designers contribute to the page template design, navigation
icons, color scheme, and logos. If your site uses photographic content, the designers
will be called upon to prepare the photos for online display.
 Writers and Information designers - Writers prepare content for online display,
which includes designing hypertext information and navigation paths. Additionally,
writers should be responsible for creating a site style guide and typographic
conventions. The writers are responsible for consistency, grammar, spelling, and
tone. They also work closely with the designers to develop the page templates.
TWO| INTRODUCTION TO HTML

 Software programmers - Programmers write the programs you need to build

interaction into your site. They may write a variety of applications, including Common
Gateway Interface (CGI) scripts, Java scripts, and back-end applications that interact
with a database. Commerce sites will especially need the talents of a programming
staff.
 Database administrators - The people who are responsible for maintaining the
databases play an important role in commercial Web sites. They make sure that your
data are accessible and safe.
 Marketing - The marketing department can generate content and provide
exposure for the site.

Page | 22
 WEB TECHNOLOGY 511

KEY TERMS USED IN THIS SECTION

CSS:a style sheet language used for describing the look and formatting of a
document written in a markup language.
Uniform Resource Locator (URL): refer to section 1
Web page: a hypertext document connected to the World Wide Web
Web Site: a location connected to the Internet that maintains one or more web
pages.
WYSIWYG: denoting the representation of text on-screen in a form exactly
corresponding to its appearance on a printout.
XML: a markup language that defines a set of rules for encoding documents in a
format that is both human-readable and machine-readable.
TWO| GLOSSARY OF TERMS

Page | 23
 WEB TECHNOLOGY 511

SECTION 2 REVIEW MULTIPLE CHOICE QUESTIONS

For more MCQs go to the prescribed textbook, Internet
World Wide Web, Page number 105-106

1.1What does XML stand for?

A. Extreme markup learning
B. Extensible markup learning
C. Extensible markup language
D. None of the above

1.2If web page styles are defined using CSS, which language is used to create
the actual web page and link it with a style sheet file?
A. XML
B. PHP
C. MySQL
D. HTML

1.3HTML coders can be described as?

A. People who are responsible for creating HTML code and
TWO| REVIEW MULTIPLE CHOICE QUESTIONS

troubleshooting the site.

B. People who are able to design a web site.
C. Programmers that create different applications using different
programming languages
D. None of the above

1.4What is an element?
A. an individual component of an HTML document or web page
B. Solid head absorber
C. A paragraph
D. A section with headings only
1.5What is a difference between XML and HTML
A. XML is easy, HTML is not
B. XML is content driven, while HTML is format driven
C. XML is similar to HTML
D. XML has defined set of tags designed for web display and HTML uses
user defined tags

1.6What is hypertext?
A. A non-linear way of organizing information
B. A file created to sort files
C. A language used to design web pages
D. A sequence in which files are stored and designed
1.7Who created HTML?
A. Tim Berners-Lee
B. Bill Gate
C. Steve Jobs

Page | 24
 WEB TECHNOLOGY 511

D. Sam Sung
1.8 CSS stands for?
A. Cascading Style Source
B. Cascading style Sheet
C. Cascading System Sheet
D. Cascading Style Storage
1.9HTML is cross-platform, what does that mean?
A. HTML is using a cable to display 2 platforms
B. HTML files can be created and viewed on any computer platform
C. HTML is only used when using one platform
D. HTML is a hybrid language
1.10 What does WYSIWYG stand for?
A. Wizy Wig
B. What You See Is What You Get
C. What You Say Is What You Get
D. What You Sign Is What You Get
TWO| REVIEW MULTIPLE CHOICE QUESTIONS

Page | 25
 WEB TECHNOLOGY 511

THREE|HTML BASICS

Learning Outcomes

1. Show a detailed understanding of how to browse the Web

2. Show an ability on how to create an HTML document

INTRODUCTION
You can explore the Web either by clicking hyperlinks or by using the address bar on
your browser. You use the address bar for specifying the address of a Web page,
which is called a Uniform Resource Locator, or URL.
3.1 UNIFORM RESOURCE LOCATOR
To identify a particular page or document on the Internet you need an Internet
address called a UniformResourceLocator, or URL. A URL consists of three major
components that provide the necessary information to find a specific document.
These components are separated by a forward
slash (/). For example, the URL for PC Training
and Business College Website might be as
follows:
http://www.pctbc.co.za where:
Research  http:// is a protocol used.
 www.pctbc.co.za/ is the host
How can you register a domain? name and domain of the server.
 site/…… is the directory path where the page
is stored. The path might also include file names.
 include file names.
THREE| HTML BASICS

THINK POINT
What is an advantage of using
company name as part of your
URL?

Page | 26
 WEB TECHNOLOGY 511

Exhibit 0-2: The home page of PC Training and Business College Web site
Browsing the Web

Here’s how Here’s why

Start the browser Follow your instructor’s directions.
In the Address box, edit the text to This is the URL of the pctbc Web site.
read wwwpctbc.co.za
Press enter The home page of the pctbc Web site
appears.(As shown in Exhibit 0-2)
Move the pointer around the page When you point to an underlined
word, the pointer changes to a hand
indicating that it is a hyperlink.
Click any hyperlink To open a different page.
THREE| HTML BASICS

3.2 TAGS IN HTML

You can create Web pages by using Hypertext Markup Language (HTML). HTML is
a set of codes, or tags, inserted in a file intended for display on the World Wide
Web. The codes tell the Web browser how to display a Web page's words and
images for the user. An HTML document is a plain text file that contains HTML
code. The name of the file has theextension, .html. You can use a simple text
editor, such as Notepad, to create an HTML document.
You can use HTML tags to create the structure of a Web page. Each tag consists of
the tag name surrounded by angular brackets, as shown here:

Page | 27
 WEB TECHNOLOGY 511

<tag_name> for example: <html>

Some tags, such as the TITLE tag, work in pairs with a starting tag and an ending tag.
<TITLE> is the starting tag and has </TITLE> as the corresponding ending tag. The
ending tag is identical to the starting tag except that it contains a forward slash (/)
before the name of the tag. Tags that have a starting and a corresponding ending tag
are called containers. Tags that don’t appear in pairs are called emptycontainers. For
example, <HR>, the HR tag, is an empty container that inserts a horizontal line on the
page. With the HTML versions that keep on changing, the most recent HTML version
comes with a set of tags which can be used and effective when using that HTML
version.

3.3 SOURCE CODE OF A WEB PAGE

You can create a simple HTML document by using three basic tags—HTML, HEAD, and
BODY. These tags together are called the document structure elements of an HTML
document. Here’s what they do:
 HTML: This tag indicates that the document contains HTML code. The syntax,
or structure, for using this tag is:

<HTML> is the starting tag and </HTML> is the ending tag. Without these tags the
browser will misinterpret the document as a text file. An HTML document is divided
into two sections—head and body.
 HEAD: The head section of an HTML document starts with the

<HEAD> tag and ends with the </HEAD> tag. You can specify the title of the page in
this section by using the TITLE tag (title). The syntax for using the HEAD and TITLE tags
is:
THREE| HTML BASICS

The TITLE tag marks the enclosed text as the title of the page. This title appears on the
title bar of the browser as shown in Error! Reference source not found.2.
 BODY: The body section starts with the <BODY> tag and ends with the </BODY>
tag. This section contains the text that appears in the browser window and also
contains other tags in the HTML document. The syntax for using the BODY tag is:

Page | 28
 WEB TECHNOLOGY 511

3.4 CREATING A SIMPLE HTML DOCUMENT

To create a basic HTML document, you need the three document structure elements:
 HTML
 HEAD
 BODY
Creating and saving an HTML document
To create an HTML document that has a title, headings, paragraphs, and images, you
can add several tags along with the document structure elements. An HTML
document created in Notepad ++, or other simple text editors, is saved with the file
extension .html
Creating an HTML document
Here’s how Here’s why
Choose Start, Programs, Notepad To open Notepad. You can use any text
editor on your own, but you’ll be using
Notepad in this course.
Choose Edit, WordWrap To view the complete code without
having to scroll horizontally.
Enter the following code: This is the starting HTML tag that
indicates the beginning of an HTML
<HTML> document.

Enter the following code: This tag indicates the end of an HTML
</HTML> document.
Place the insertion point as shown
To prepare to add the starting HEAD
tag.
Press Enter To move the insertion point to the next
line to add the ending HEAD tag.
Press enter To move the insertion point to the next
line to add the starting BODY tag.
Enter the following code: This is the starting BODY tag that
indicates the beginning of the body
<BODY> section.
THREE| HTML BASICS

Press enter To move the insertion point to the next

line to add the ending BODY tag.
Enter the following code: This tag indicates the beginning of the
body section.
</BODY>
Place the insertion point as shown

To prepare to add the TITLE tags.

Edit the code to read as shown

Page | 29
 WEB TECHNOLOGY 511

Choose File, Save As… To display the Save As dialog box. You’ll
save the HTML document in the current
unit folder.
In the File name box, enter To specify the name of the document
Mypage.html and add the .html extension to make it
an HTML document.
Click Save To save the document.

Choose File, Exit To close Notepad.

In the browser, open Mypage

Observe the page The text that you entered between the
TITLE tags appears on the title bar of the
browser window.

3.5 ADDING BODY TEXT

You can add content to an HTML document by using the BODY tag (body). In the
BODY tag you can include tags to add headings, paragraphs, lists, tables, and images
to a Web page. For instance, to create a heading on a page, use the H1 tag (heading
1). This tag marks text that will appear as a heading.
THREE| HTML BASICS

Page | 30
 WEB TECHNOLOGY 511

Adding body text to an HTML document

Here’s how Here’s why
Open the source code of the page Choose View, Source.
Place the insertion point as shown

To prepare to add text that will appear

on the Web page in the browser.
Press enter To move the insertion point to the next
line.
Enter the following code:

Welcome to the Outlander Spices Web site.

This text will appear on the page.
Place the insertion point as shown

To prepare to add the H1 tags (heading

1) to create a heading on the page.
Press enter To prepare to add code on the next line
in the source code.
Enter the following code: The H1 tags (heading 1) mark text to
create a heading on the page.
<H1>Outlander Spices</H1>
Choose File, Save To save the source code.
Close the source code Choose File, Exit.
Choose View, Refresh To refresh the contents of the page.
Observe the page The text “Outlander Spices” that you
enclosed within the H1 tags appears as
a heading on the page and the rest of
the text that you enclosed within the
THREE| HTML BASICS

BODY tags appears on the page.

Page | 31
 WEB TECHNOLOGY 511

KEY TERMS USED IN THIS SECTION

Body: HTML section that contains all the content to be displayed to user.
Containers: the area enclosed by the beginning and ending tags.
Source Code: any collection of computer instructions (possibly with comments)
written using some human-readable computer language, usually as text.
Uniform Resource Locator: Refer to topic 1

Read
TRHEE| GLOSSARY OF TERMS

PRESCRIBED TEXTBOOK:
INTERNET & WOZLD WIDE WEB How to Program, 5th Edition, by Paul Deiltel,
Harvey Deitel, Abbey Deitel. Page 122, 128 and 129

http://www.gcflearnfree.org/internet101/1

Page | 32
 WEB TECHNOLOGY 511

SECTION 3 REVIEW MULTIPLE CHOICE QUESTIONS

For more MCQs go to the prescribed textbook, Internet

World Wide Web, Page number 135

1.1What are the three document elements that an HTML page must have?
A. HTML, HEAD, BODY
B. HEADING, PARAGRAPH, TITLE
C.TITLE, DATE, COLORS
D.HEAD PARAGRAPH,HYPERLINK

1.2 When creating a web site, the home page is saved as?
A. Home.html
B. Index.html
C. Page1.html
D. Homepage.html

1.3The following tag is an example of an empty container.

A. <a></a>
THREE| REVIEW MULTIPLE CHOICE QUESTIONS

B. <p></p>
C. <div></div>
D. <img>

1.4In which section of an HTML document do you add text that will appear on
A. Body
B. head
C. html
D. none of the above
1.5An HTML document is saved with the following extension.
A. .html
B. .css
C. .php
D. .exe

1.6Navigating from one web page/site to another is known as?

A. Web browsing
B. Web scape
C. Searching
D. Site visiting
1.7What do you call an application used to view web pages?
A. Html viewer
B. Html reader
C. Web browser
D. notepad
1.8 Which tag can you use to add title in your web page?
A. <head>
B. <title>

Page | 33
 WEB TECHNOLOGY 511

C. <tittle>
D. <label>
1.9What makes the ending tag differ from starting tag?
A. The ending tag contains a forward slash before the name of the tag.
B. The ending tag is always written in capital letters
C. Ending tag is shorter compared to starting tag
D. They are similar
1.10What are the three main element that an HTML document must have?
A. Head element, body element, title element
B. Html element, head element, body element
C. Html element, head element, paragraph element
D. Only body element
THREE| REVIEW MULTIPLE CHOICE QUESTIONS

Page | 34
 WEB TECHNOLOGY 511

FOUR|HEADINGS AND PARAGRAPHS

Learning Outcomes

1. Create headings and paragraphs on a Web

page
2. Format the text on a Web page
3. Insert and format horizontal rulers on a Web
page

INTRODUCTION
Headings and paragraphs have long been used to improve the reading ease and
appearance of all kinds of documents, such as newspapers, books, and reports.
Headings inform the reader what the document is about. You use headings in Web
pages to describe the contents of a page or a section of a page.
You use paragraphs to group information on a page that has a large amount of text.
Using paragraphs increases the readability of the page and makes the information
easily accessible.

KEY POINT
FOUR| HEADINGS AND PARAGRAPHS

Headings and paragraphs are

used to increase readability of a
web page.

4.1 HEADINGS
You use the headingtag to mark headings in a Web page. You can create up to six levels
of headings; Heading 1 (H1) is the first level and Heading 6 (H6) is the last level. Each
heading level appears in a different size. Text marked as Heading 1 appears bigger in
size as compared to text marked as Heading 6. The syntax for marking text as Heading
1 is:
<h_level>some text</h_level>

Page | 35
 Example

The H1 tag is a container with <H1> as its starting tag and </H1> as it’s ending tag.
You can mark text as any of the heading levels, such as Heading 2 (H2) or Heading 3
(H3), in a similar manner.
Creating headings

Here’s how Here’s why

Open Notepad ++ To edit or create an HTML file
Add three main tags for a document Because each and every page must have
the main three sections.
Add your name as the heading This will be the heading of your page.
Add the heading between the
<body> tags.
A heading must be between the <body>
tags.
Save your web page. In order to preview your web page using
Open your Web page using the web the Web browser.
browser.

4.2 PARAGRAPHS
In a page that contains a large amount of text, you can separate text into different paragraphs by using
the Ptag (paragraph), which has the following syntax:
<P>Paragraph text</P>
<P> denotes the start and </P> indicates the end of a paragraph. The P tag leaves a blank line before the
next text.

Page | 36
 WEB TECHNOLOGY 511

Example

 Line breaks
To make some text appear on a new line you can use the BRtag (line break), which
has the following syntax:
<BR>
The BR tag is an empty container. You can also
use this tag to insert a blank line on a page.
The BR tag moves text to the next line, while
the P tag (paragraph) leaves one blank line
WEB RESOURCE between texts on the page as shown in Exhibit
0-3.
http://www.w3schools.com/tag
s/tag_br.asp
FOUR| HEADINGS AND PARAGRAPHS

Exhibit 0-3: Use of the BR and P tags

Page | 38
 Here’s how Here’s why
Observe the page The text on this page is continuous
without any line breaks.
Open the source code You’ll create a paragraph on this page.
Creating paragraphs and
Place the insertion point as shown
inserting line breaks
To prepare to add the code to mark
the text as a paragraph.
Enter the following code: To mark the beginning of a paragraph.
<P>
Place the insertion point as shown

To prepare to add the ending P tag.

Enter the following code: This is the ending P tag.
</P>
Update and close the source code
Refresh the page

Observe the page The text that you specified between

the P tags appears as a paragraph.
Open the source code You’ll insert a line break on this page.
Place the insertion point as shown
To prepare to add the code to move
text to the next line.
Enter the following code: This tag indicates that the text that
<BR> follows it will appear on the next line.
Update and close the source code
Refresh the page
Observe the page The text that follows the BR tag
appears on the next line (as shown in
Exhibit 0-3).

Page | 39
 WEB TECHNOLOGY 511

4.3 COMMENTS

In HTML a comment (or comments) is information a designer can add to the HTML
source code for reference. Comments are not viewed by the user or displayed on
the web browser, but only when viewing the HTML source code. HTML allows you
to add comments within the code to help the reader better understand the code.
To add a comment to the code for a page, use the following code:<!-- comments--
>
Adding comments
FOUR| HEADINGS AND PARAGRAPHS

Page | 40
 Here’s how Here’s why
Open the source code You’ll add comments in this code.
Place the insertion point as shown

Enter the following code:

<!--Contents of the page--> To add a comment in the code.
Update and close the source code
Refresh and observe the page The text enclosed within the comment
tag does not appear on the page.

4.4 CHARACTER ENTITIES

You might want to display certain characters like the copyright symbol (©), registered
trademark symbol (®), or a blank space on your Web page. You cannot type these characters
in the code because these are special characters that have a specific function in HTML.
However, you can use characterentities to insert these characters in your page. The following
table displays the character entities for some commonly used characters.

The ampersand (&) indicates the beginning and the semi-colon (;) indicates the end of a
character entity.

Using character entities

Character HTML5 Intended Description

Entity Entity Character
&amp; &AMP; & Ampersand
&copy &COPY © Copyright
&gt; &GT; > Greater than
&lt; &LT; < Less than
&trade; &TRADE; ™ Trademark symbol
&reg; &REG; ® Registration mark

&quot; &QUOT; “ Double quotes

4.5 FORMATTING TEXT

You can increase the readability of a page by changing the style, size, or color of the text.
Formatting body text

You can modify the appearance of a page by adding formatting tags to its source code. You
format a page by specifying the color for the text, underlining or italicizing the text, or making
it bold. Browsers determine a specific format and the text formatted by using these
formatting tags might appear different on different browsers. The following table lists some
of the formatting tags and their function.
Here’s how Here’s why
Open the source code You’ll add a character entity to this
page.
Place the insertion point as shown

Enter the following code:

&copy; Outlander Spices 1999-2000. To insert the copyright symbol (©) on
All rights reserved. the page. The ampersand (&) indicates
to the browser that the text that
follows is a character entity and the
semi-colon (;) indicates the end of the
character entity.
Update and close the source code
Refresh the page
Observe the page
The copyright symbol (©) appears at
the end of the page.
Page | 41
WEB TECHNOLOGY 511

Page | 42
 WEB TECHNOLOGY 511

Tag Function
<B></B> Makes the text enclosed within these tags bold.
<I></I> Italicizes the text enclosed within these tags.
<U></U> Underlines the text enclosed within these tags.
Attributes
Attributes of a tag provide additional features to a tag. You specify attributes within
the starting tag. The syntax for using an attribute is:
<Tag_name attribute_name=value>
In HTML, there are attributes which are known as global attributes. These attributes
can be used on any HTML element/tag. The following table contains a list of mostly
used global attributes and their description.

Attribute Description
class Specifies one or more class names for an element (refers to a class
in style sheet).
id Specifies a unique id for an element.
style Specifies an inline CSS style for an element.
title Specifies extra information about an element.

As a web designer/developer, you must be able to use attributes and know the list
of attributes that are applicable on each tag. The following table contains a list of the
<body> tag attributes:
FOUR| HEADINGS AND PARAGRAPHS

Attribute Description
alink Specifies the color of an active link in a document.
background Specifies a background image for a document.
link Specifies the color of unvisited links in a document.

4.6 ALIGNMENT
You align a heading to enhance the appearance of a page and make it look different
from the rest of the text on the page. CSS allows you to align any element anywhere
within a Web page.
By default, all Web page content appears on the left on the page. You can use the
ALIGN attribute with various tags to force text to appear in the center or on the right.
This attribute will align headings or paragraphs. For example, you might want to align
the heading to the center of the page. The syntax for using the ALIGN attribute to do
this is:
<H1 ALIGN=Center>PCTBC student Web Page</H1>
The ALIGN attribute used within the H1 tag centers the heading on the page. You can
use this attribute within the P tag to align a paragraph.

 Indenting text on a page

You might want to indent the text on both left and right margins of a page to make
some text stand out from the rest of the page. You do this by using the <blockquote>

Page | 43
 WEB TECHNOLOGY 511

tag. This tag also supports the global attributes in HTML. The syntax for using the
<blockquote> tag is:
<blockquote> Desired text </blockquote>

Exhibit 0-4: The page with the heading centered and text indented
4.7 USING HORIZONTAL RULERS
You can divide the text on a page into different sections by inserting a horizontal rule
to increase the readability of the page. Inserting a horizontal rule creates a dividing
line on a page as shown in
FOUR| HEADINGS AND PARAGRAPHS

Page | 44
FOUR| HEADINGS AND PARAGRAPHS

Page | 45
WEB TECHNOLOGY 511
 WEB TECHNOLOGY 511

Exhibit 0-5: A horizontal rule on The internet page

Horizontal rule
A horizontal rule is a line that extends across the page. You insert a horizontal rule on a page by using the
<hr>tag (horizontal rule). This tag also support global attribute. The following tag is used to insert
horizontal rule on a web page:
<HR>
This is an empty container.
Inserting a horizontal rule

Attributes of a
horizontal rule Here’s how Here’s why
You can format a
horizontal rule to Open the source code You’ll insert a horizontal rule on this
make it wider, page.
thicker, or appear in Place the insertion point as shown
a different color by
using several
To prepare to add the code to insert a
attributes of the HR
horizontal rule on the page.
tag. The following
Enter the following code: To insert a horizontal rule on the page.
table lists the
<HR>
attributes of the HR
tag. Update and close the source code
Refresh the page
Observe the page A horizontal rule appears on the page.

Attribute Description
WIDTH Allows you to specify the length of the horizontal rule as a
percentage of the width of the browser window. For
example, you decrease the horizontal rule to 90% of the
width of the browser window by using the following code:
<HR WIDTH=90%>
COLOR Allows you to specify the color of the horizontal rule.
You make the horizontal rule appear blue by using the
following code:
<HR COLOR=Blue>

NOSHADE Though the word NOSHADE implies no shading, this

attribute functions in an opposite way. You make the
horizontal rule appear shaded by using the following
code:
<HR NOSHADE>
ALIGN Allows you to align the horizontal rule to the left, right,
or center of a page. By default, the horizontal rule is
aligned to the center of a page. You align the horizontal
rule to the left of a page by using the following code:
<HR ALIGN=Left>
SIZE Allows you to specify the thickness of the horizontal
rule. You set the thickness of the horizontal rule to 5
pixels by using the following code:
<HR SIZE=5> Page | 46
 WEB TECHNOLOGY 511

Formatting a horizontal rule

Here’s how Here’s why

Observe the horizontal rule The horizontal rule extends across the
page.
Open the source code You’ll add the code to change the thickness
of the horizontal rule.
Place the insertion point as shown

To prepare to add the SIZE attribute to

change the thickness of the horizontal rule.
Edit the HR tag to read: To change the thickness of the horizontal
<HR SIZE=5> rule to 5 pixels.
Update and close the source code
Refresh and observe the page The horizontal rule appears thicker.
Open the source code
Place the insertion point as shown

To prepare to add the NOSHADE attribute.

Edit the HR tag to read: To make the horizontal rule appear
<HR SIZE=5 NOSHADE> shaded.
Update and close the source code
Refresh and observe the page The horizontal rule appears shaded.
Open the source code
Place the insertion point as shown

To prepare to add the WIDTH and COLOR

attributes.
Edit the HR tag to read:
<HR SIZE=5 NOSHADE WIDTH=90% To shorten the horizontal rule and make it
COLOR=Blue> appear blue.
Update and close the source code
Refresh and The horizontal rule appears shorter and
observe the page blue.

Page | 47
 WEB TECHNOLOGY 511

Attribute:a modifier of an HTML element.Attributes provide additional information about an element.

Horizontal Rule: a line that goes across a webpage.
Line Break:a point at which text is split into two lines.
Paragraph:a distinct section of a piece of writing, usually dealing with a single theme and indicated by a
new line, indentation, or numbering. In HTML, a paragraph is created using <p> tag.

Page | 48
 WEB TECHNOLOGY 511

SECTION 4 REVIEW MULTIPLE CHOICE QUESTIONS

1.1Why do we use headings and paragraphs in a web page?

A. To increase readability of a web page
B. To design a web page
C. To have attractive web pages
D. For web browser to understand web page content

1.2The <br> is used to insert ________ in a web document.

A. Big writing
B. Line break
C. horizontal
D. bold reading

1.3What are global attributes?

A. Attributes that can be used on any html element
B. Attributes that are used world wide
C. Attributes that can be recognised world wide
D. Well known attributes

1.4Which attribute would you use to increase thickness of the horizontal line
that appears on a web page?
A. width
B. height
C. thickness
D. size
1.5This is an HTML5 entity for the “&” character.
FOUR| REVIEW QUESTIONS

A. &AND;
B. &AMP;
C. &GT;
D. %EMPER;

1.6The <hr> tag is used to add ________ on a web page.

A. Horizontal rule
B. High resolution
C. Horizontal rectangle
D. None of the above
1.7Which tag can one use to indent text in a web page?
A. <indent>
B. <shift>
C. <blockquote>
D. <move>

1.8 This is an HTML5 entity for the “>” character.

Page | 49
 WEB TECHNOLOGY 511

A. &LESS;
B. &LT;
C. &LTE;
D. &>;
1.9What is the use of the line break tag?
A. To make text appear on a new line
B. To create a space between text in one line
C. To break a line and add new image
D. None of the above
1.10This is the heading level with largest font size.
A. H1
B. H6
C. H20
D. Hlarge
FOUR| REVIEW QUESTIONS

Page | 50
 WEB TECHNOLOGY 511

FIVE|HYPERLINKS

Learning Outcomes

1. Use Anchor tags to create a hyperlink on a page to move to another

Web site
2. Use Anchor tags to create a hyperlink to move
to a page within
your Web site
3. Create a mailto link to send e-mail from a Web page.

INTRODUCTION
A Web site is a collection of Web pages that can contain text, graphics, animation,
sound, and a variety of interactive elements. Information on the Web is organized on
many pages across many sites. You can access information on the Web easily if you
can move quickly and effortlessly from one location to another. Hyperlinks allow you
to navigate through the Web.

5.1 HYPERLINKS
A hyperlink generally appears underlined on a page. When you point to a hyperlink,
the pointer change to a hand and the address of the resource to which
it links appears on the status bar of the browser. This address can be
a URL of a Web site, the address of a page within your Web site, or
any other resource, such as a graphic, sound, or movie file. Clicking
the hyperlink displays the linked page in the browser. By default, a
KEY hyperlink will be underlined and blue in color when displayed on the
Web browser.
POINT
Observing hyperlinks
Hyperlinks
are used to
link two or
more html
Here’s how Here’s why
Indocuments
the browser, open Facts (From the current unit folder.) This page
/files in a gives the list <hr> attributes and has a
FIVE| HYPERLINKS

web site. hyperlink.

Observe the underlined text

The underlined text indicates that it is a

hyperlink.
Point to the underlined text
The pointer changes to a hand. This
indicates that the text is a hyperlink.
Observe the status bar The address of the linked page appears.

Page | 51
 WEB TECHNOLOGY 511

Click the hyperlink The page Whole spices.html appears in the

5.2 THE A TAG browser.
(ANCHOR)
You use the <a>tag (anchor) along with one most important attribute to create
a hyperlink. The text that you enclose within the tags appears as a hyperlink. You
use the href attribute of the <a> tag to specify the page to which the hyperlink
leads. For example, to link to the PC Training and Business College Web site from
your Web site/page, use the following code:
<a href=”http://www.pctbc.co.za”>Go To PCTBC</a>
The href attribute contains the URL of the destination Web site or Web page. The
value assigned to the HREF attribute should be enclosed within quotation marks.
The text “Go o PCTBC” is the hyperlink. Clicking the hyperlink displays the home
page of the PC Training and Business College Web site.
Adding a hyperlink to another Web site
Here’s how Here’s why
In the browser, verify that Whole spices is open
Open the source code

Place the insertion point as shown

(After the last line in our paragraph.) To

prepare to add the code to create a
hyperlink to the pctbc Web Site.
Enter the following code: To create a hyperlink to the PCTBC Web
<A site. The HREF attribute contains the
HREF=”http://www.pctbc.co.za”>Go URL for this site.
to PCTBC</A> to search for more
information on how to study.
Update and close the source code
Refresh the page
Scroll down to the end of the page To see the hyperlink that you created.
Observe the page The text “Go to PCTBC” that you
enclosed within the A tag is the
hyperlink.
Click Click here To open the home page of the PCTBC
Web site.
You can add hyperlinks to pages within your Web site to allow users to navigate
effortlessly through the site. You can also add hyperlinks to allow users to
navigate to another point within the same page.
FIVE| HYPERLINKS

 Linking to another page on your site

A hyperlink that links one page to another page in your Web site is useful in
situations when you cannot provide all the relevant information on one page.
For example, on the PC Training and Business College Web site, the home page
displays a welcome message and history about the institution but the user has
the option of clicking any of the hyperlink for more (e.g. Management Structure,
Staff portal, Programs, etc.) information about an institution. To create a
hyperlink to the different Web page, use the following code:
<a href="page_name.html">Click here</a>
Page | 52
 WEB TECHNOLOGY 511

Where page_name will be the name of the Web page you want to link to and Click
Here will be the hyperlink.
e.g. <a href=”home.html”>Go to homepage</a>
home.html is the file to which the link points. When you click the text “Click here,”
home.html appears in the browser. If you want to link to a file that is stored in a
subdirectory, the value assigned to the HREF attribute will be the path of that file with
respect to the current directory.

Adding a hyperlink to another page on your site

Here’s how Here’s why

Open the source code
Place the insertion point as shown

To prepare to add the code to create a

hyperlink to another page.
Enter the following code: To create a hyperlink to the page
<BR>To find out more, Locations.html.
<A
HREF=”about.html”> click here</A>
Update and close the source code
Refresh and observe the page The text “click here” that you enclosed
within the A tag appears in blue and is
underlined indicating that it is a hyperlink.
Click the hyperlink To open the Locations page.
Click Back To open the Facts.html page.

 Link to a point within a page

You can use the anchor tag to create a link to another point within a page. This can
be useful when a page contains a large amount of information and you want to
provide a quick way to move within the page.
To create a hyperlink to a point within a page, you use the href and name attributes.
The name attribute is used to name the point to which you want to link. You then
assign this name as the value to the href attribute. For example, the Home page
FIVE| HYPERLINKS

contains the basic information about the Web site. However, to locate the description
or any other information, you’ll have to scroll extensively. To avoid this, you can
create hyperlinks that link to these descriptions by using the name and href attributes
of the <a> tag. The point in the document to which you want to link is the target
address. To create a target address on the page, use the name attribute as shown in
the following code:
<a name = "topic">Welcome to my page</a>
To create a hyperlink to this target, use the following code:
<a href = "#topic">Back to intro</a>

Page | 53
 WEB TECHNOLOGY 511

5.3 SENDING E-MAIL FROM A PAGE

Many Web sites allow users to send an e-mail message to them with questions
or feedback about the Web site. Some offer the option to place an order for
products via e-mail. HTML can be used to create hyperlinks that activate the e-
mail application on the user’s computer to send messages.
Mailto link
When you click a mailto link, an e-mail application is activated that allows you
to send e-mail. You use the href attribute to specify a mailto address. To create
a mailto link that allows users to send e-mail to [email protected], use the
following code:
<a href="mailto:[email protected]">Contact Us</a>
When users click the hyperlink “Contact Us,” the e-mail application on their
computer is activated allowing them to enter the message and send the e-mail.
Adding a mailto link

Here’s how Here’s why

Open the source code
Place the insertion point as
shown
To prepare to add the code to create a mailto link.
Enter the following code: The HREF attribute of the A tag specifies a mailto
<A address for the link.
HREF=”mailto:[email protected]
.za”>email</A>.

Update and close the source code

Refresh and observe the page The mailto link appears on the page.
Point to the hyperlink Notice that the status bar displays the e-mail
address with the mailto attribute.
Click the mailto link To open a new message window in your default e-
mail application.
Observe the address in the This is the address that you specified in the mailto
message link.
Choose File, Close To close the message window.

Page | 54
 WEB TECHNOLOGY 511

Hyperlink:a link from a hypertext document to another location, activated by

clicking on a highlighted word or image.
Web Site:a set of related web pages typically served from a single web domain.

Read
PRESCRIBED TEXTBOOK:
INTERNET & WORLD WIDE WEB How to Program, 5th Edition, by Paul Deiltel,
Harvey Deitel, Abbey Deitel. Page 74

http://www.gcflearnfree.org/internet101/1
FIVE|GLOSSARY
FIVE| OF TERMS
REVIEW QUESTIONS

Page | 55
 SECTION 5 REVIEW QUESTIONS
WEB TECHNOLOGY 511

1.1Which attribute is used to specify a page that will be opened when a hyperlink is clicked
A. href
B. alt
C. target
D. src

1.2Which attribute can you use to display a page in a new browser tab?
A. new
B. target
C. destination
D. final

1.3What is a website?
A. Collection of networks that are online
B. Collection of web pages that are linked
C. A place in which web pages are stored
D. A collection of information and music

1.4How do you create a hyperlink that will send an email?

A. <a href=”mail.com”>link</a>
B. <a href=”mailto:[email protected]”>link</a>
C. <a href:”mail.com”>link</a>
D. <a href=”send:mail.com”>link</a>
1.5A website is a collection of linked web pages, how do you link two or more web pages?
A. Use hyperlink
B. Place them in one folder
C. Create one web document
D. None of the above

1.6The following hyperlink will take a user to a point within a page.

A. <a href=”userPoint.html”>Link</a>
B. <a href=”http://www.users.com”>Home</a>
C. <a href=”#top”>Back Up<a/>
D. None of the above
1.7When creating a hyperlink that sends an email, after mailto:, what should be added?
A. File location
B. Email address
C. Protocol to use
D. username
1.8 Images and text that must appear as hyperlink on a web page need to be placed between
_________ and ______.
A. Starting anchor tag and ending anchor tag
B. Starting body tag and head tag
C. Before html tag and after ending html tag
D. None of The above
1.9What will be the value of href if you want a link to lead to another web site
A. The web site’s URL
B. The name of the web site

Page | 56
 WEB TECHNOLOGY 511

C. The name the company owner

D. The postal address of that company
1.10Which attribute of the anchor tag can you use to create a point in web
page?
A. name
B. point
C. section
D. style
SIX| IMAGES AND BACKGROUNDS
FIVE| REVIEW QUESTIONS

Page | 57
WEB TECHNOLOGY 511
 SIX|IMAGES AND BACKGROUNDS

LEARNING OUTCOMES

1. Add images to a Web page and align text around images

2. Add background colors and images to a Web page

6.1 ADDING IMAGES

You use the <img> tag to add an image to a page. The srcattribute specifies the path and
filename of the image file.You can specify the absolute path or the relative path of an image
file. A relative path is the path of an image file based on the location of the page in which you
add the image. To add the image img1.png to a page, use the following code:
<img src="img1.png" alt=”image 1”>
The value assigned to the SRC attribute is the relative path of the image file.
The following table shows a list of the <img> tag attributes:

Attribute Value Description

alt text Specifies an alternate text for an image
scr url Specifies the url of an image
height pixels Specifies the height of an image
width pixels Specifies the width of an image
Other attributes are not supported in HTML5
Adding an image to a Web page
6.2 ALIGN TEXT AROUND IMAGES
When you add an image to a page, by default the text around the image appears at the
bottom of the image. You can align the text around an image so that it appears at the top,
bottom, or center of the image. Exhibit 0-1 displays text aligned to the center of an image.

Here’s how Here’s why

In the browser, open About us (From the current unit folder.) You’ll add the logo of
PC training logo to this page.
Open the source code of the page
Place the insertion point as
shown

Enter the following code: To add the image Logo.gif to the page. The ALIGN
<IMG SRC="Logo.gif" attribute of the P tag aligns the image to the center of
alt=”PCTBC” align=”center”> the page. The SRC attribute of the IMG tag specifies
the path of the image file on the computer. The alt
 attribute represents alternative text which will be
displayed if an image is not found.
Update and close the source code
Refresh and observe the page The logo appears on the page and is centred.

Text aligned to the

center of the image

Exhibit 0-1: The text aligned to the center of an image

To align the text around an image you use the align attribute of the <img> tag. Top, Middle,
and Bottom are the possible values for the align attribute.
To align text to the top of the image img1.png, use the following code:
<img src="img1.png" align=”Top” alt=”image 1”>

6.3 GRAPHICS AS HYPERLINKS

Graphics can also be used as hyperlinks. To make a graphic a hyperlink, use the <a> tag as you
would use it for making text a hyperlink. To make img1.png a hyperlink to images.html, use
the following code:
<a href="images.html"><img src="img1.png" alt=”image 1”></a>

Link Borders
When using an image as a hyperlink, a blue border is displayed around an image. By default,
most web browsers will display a border around graphic links indicating the link color. To
remove this border or want to make it bigger, you can use the border attribute in your <img>
tag. The following code uses border attribute:
<a href="images.html"><img src="img1.png" border=”1” alt=”image
1”></a>
 WEB TECHNOLOGY 511

To align the text around an image you use the align attribute of the <img> tag. Top,
Middle, and Bottom are the possible values for the align attribute.
To align text to the top of the image img1.png, use the following code:
<img src="img1.png" align=”Top” alt=”image 1”>

6.3 GRAPHICS AS HYPERLINKS

Graphics can also be used as hyperlinks. To make a graphic a hyperlink, use the <a>
tag as you would use it for making text a hyperlink. To make img1.png a hyperlink to
images.html, use the following code:
<a href="images.html"><img src="img1.png" alt=”image 1”></a>

Link Borders
When using an image as a hyperlink, a blue border is displayed around an image. By
default, most web browsers will display a border around graphic links indicating the
link color. To remove this border or want to make it bigger, you can use the border
attribute in your <img> tag. The following code uses border attribute:
<a href="images.html"><img src="img1.png" border=”1” alt=”image 1”></a>
SIX| IMAGES AND BACKGROUNDS

Page | 59
 WEB TECHNOLOGY 511

Using a graphic as a hyperlink

Here’s how Here’s why
Open the source code You’ll make a graphic a hyperlink.
Place the insertion point as
shown
Place the insertion point as
shown

Enter the following code: To make the graphic logo.gif a hyperlink to the
<A HREF="PCTBC.html"> PCTBC.html page.
Add the ending A tag as shown

Update and close the source code

Refresh the page
Point to the hyperlink image The pointer changes to a hand indicating that the
image Spice.gif is a hyperlink.
Click the image To move to the PCTBC page.
Navigate back to the About us Click the Back button on the Standard toolbar.
page
6.4 IMAGE FORMATS
Graphic images are available in a variety of formats and Web browsers can view most
images. The most common graphic image file formats supported by Web browsers
are Graphic Interlaced Format (GIF) and Joint Photographic Experts Group (JPEG).
Graphic Interlaced Format (GIF)
Images in the Graphic Interlaced Format, or GIF, are most commonly used on the Web
because all browsers support this image format. The advantage of using this format
is that the size of a GIF file is small, which makes downloading it quick and easy. The
SIX| IMAGES AND BACKGROUNDS

disadvantage of using this format is that it only

works well for displaying images with a small
number of colors.
Joint Photographic Experts Group (JPEG)
The Joint Photographic Experts Group, or JPEG, file
format is best suited for photographic images. The
THINK POINT advantage of using the JPEG file format is that they
have smaller file sizes and look better when
If you were given a task to create displaying images that have a lot of colors.
a web page, how can you use Disadvantages of using this format are that all
images to produce a more browsers do not support it, and pixels of the image
attractive web page? are lost when downloaded, which results in a
distorted image.

6.5 BACKGROUNDS
Proper use of background colors and images adds contrast to enhance the
appearance of text and graphics on a page. They can be used to provide a distinct look
to a Web site, which makes it easily identifiable to users.
 BACKGROUND COLORS

Page | 60
 WEB TECHNOLOGY 511

You add a background color to a page by using the bgcolor attribute of the
<body> tag. To set the background color of a page to red, use the following
code:
<body bgcolor=”red”>
The bgcolor is supported in HTML5 and the recommended way of adding
background color is to use CSS:
<body style=”background-color:red”>
Adding a background color
Here’s how Here’s why
In the browser, open Products You’ll add a background color to this page.
Open the source code
Place the insertion point as
shown
Edit the code to read:
<BODY BGCOLOR=Cornsilk>
Update and close the source code
Refresh and observe the page The page now has cornsilk as its background color.

 Color Values
In CSS, colors are defined using hexadecimal (hex) notation for the
combination of Red, Green, Blue color value (RGB). The lowest value that
can be given to one of the light sources is 0 (hex code: 00). The highest value
is 255 (hex code: FF). Hexadecimal value for a color must have a minimum
of 6 character and must always start with the pound (#) sign.
 Background images
You can give your Web site a distinct look by adding the same background
image to all pages in your site. You add a background image to a page by
using the backgroundattribute of the <body> tag. To add the image
Background.gif to the background of a page, use the following code:
<body background="Background.gif">
When both the background color and the background image are set for a
page, only the background image appears on the page. If the background
image is not found in the specified folder, the background color appears.
The background attribute is not supported in HTML5 and the recommended
method of using an image as a background is as follows:
<body style=”background-image:url(Background.gif);">

Adding a background image

Here’s how Here’s why
Open the source code You’ll add a background image to this page.
Edit the BODY tag to read: To add a background image Back.gif to this page.
<BODY BGCOLOR=Cornsilk
BACKGROUND="Back.gif">
Update and close the source code
Refresh and observe the page The background image appears on the page.

Page | 61
 WEB TECHNOLOGY 511

 Working with background images

Background images that scroll with the text on a page compete with the main
information on the page. You can watermark the background image so that it does
not scroll with the text by fixing the background image. You use the bgproperties
attribute of the <body> tag to fix a background image. To fix the background image
Back.gif, use the following code:
<body background="Back.gif" bgproperties=”fixed”>
This attribute works only with Microsoft Internet Explorer. Since web pages must
produce same output in different browsers, this property is not that useful. CSS
background-size property can be used instead:
<body style=” background-image:url(Back.gif); background-size: cover; ”>

Watermarking the background image

Here’s how Here’s why
In the browser, verify that the page is open
Scroll down to the end of the Notice that the background image also scrolls with
page the text.
Open the source code You'll edit the code to fix the background image.
Edit the BODY tag to read: To watermark the background.
<BODY BGCOLOR=Cornsilk
BACKGROUND="Back.gif"
BGPROPERTIES=FIXED>

Update and close the source code

Refresh the page
Scroll up to the beginning of Notice that now only the text scrolls and the
the page background image remains fixed.
SIX| IMAGES AND BACKGROUNDS

Page | 62
 WEB TECHNOLOGY 511

KEY TERMS USED IN THIS SECTION

Graphical Interchange Format (GIF):a lossless format for image files that supports
both animated and static images.
Joint Photographic Experts Group (JPEG): a commonly used method of glossy
compression for digital images, particularly for those images produced by digital
photography.
Image:a representation of the external form of a person or thing in art.

Read
PRESCRIBED TEXTBOOK:
INTERNET & WORLD WIDE WEB How to Program, 5th Edition, by Paul Deiltel,
Harvey Deitel, Abbey Deitel. Page 77 and 152

http://www.gcflearnfree.org/internet101/1
SIX| GLOSSARY OF TERMS

Page | 63
 WEB TECHNOLOGY 511

SECTION 6 REVIEW QUESTIONS

1.1 Which attribute is used to specify text that appears if an image is not
available?
A. alt
B. lte
C. text
D. title

1.2 To add an image to a web page, the ________ tag is used.

A. image
B. file
C. link
D. img

1.3 This attribute is used to specify the url of an image.

A. src
B. href
C. location
D. http

1.4 How can you remove the border that appears around an image if an image
is used as a hyperlink?
A. By using the border attribute of the img tag
B. By using the border attribute of the anchor tag
C. You can simply create a table before adding an image
D. You can use two images.\
SIX| REVIEW QUESTIONS

1.5 How can you use an image as background of a web page using css?
A. <body style=background-image:url(‘image.jpg’); alt=”My image”>
B. <body style=”image:image1.jpg” alt=”My image”>
C. <body background-image=”image.jpg” alt=”My image”>
D. None of the above

1.6 This is a commonly used image format because all browsers support it.
A. .pxr
B. .jpg
C. .bmp
D. .gif
1.7A web page becomes more attractive if it has colors and images. Which
body attribute can you use to add background color on your web page?
A. bgcolor
B. background
C. color

Page | 64
 WEB TECHNOLOGY 511

D. wallpaper
1.8 The hexadecimal code for black is _______________.
A. #111111
B. #FFFFFF
C. #000000
D. #F4F4F4
1.9In colors, RGB stands for?
A. Red, Green, Black
B. Red, Green, Blue
C. Red, Grey, Black
D. Red, Gray, Black
1.10 The following property watermarks a background image if used.
A. bgproperty
B. bgstable
C. bglocation
D. brwatermark
SIX| REVIEW QUESTIONS

Page | 65
 WEB TECHNOLOGY 511

SEVEN|TABLES

LEARNING OUTCOMES

1. Create a table, set the border and width of a table, add headings
to a table
2. Span cells across rows and columns, align a table and data in a cell,
insert images and hyperlinks in a table, and add comments to the
code of a page
3. Create a nested table to organize the information on a page

INTRODUCTION
Presenting data in a table format is an effective way of organizing, displaying, and
accessing complex information. For instance, a list of products and their prices is best
depicted as a table.
7.1 TABLES
A table is composed of rows (from left to right) and columns (from top to bottom)
with data contained in individual cells. A cell is an intersection of a row and a column.
In HTML, you can create a table by using the tags shown below.
Tag Description
<table></table> These are the primary tags, which surround the rest of the text
and code within a table.
<tr></tr> Defines each row in a table.
<td></td> Indicates the beginning and ending of a cell in a table.

Error! Reference source not found., using the code shown in Exhibit 0-7.
SEVEN| TABLES

Exhibit 0-7: The source code of the Student register page after creating a table

7.2 TABLE ATTRIBUTES

You use <table> attributes to format a table. You can add a border, change the width
and height of a table, align a table, and align data within a table. You use table
attributes with the <table>, <td>, and <tr> tags. The <table> attributes are also not
supported in HTML5.

Page | 66
 WEB TECHNOLOGY 511

BORDER attribute
A border around a table gives it a three-dimensional look. You set the border of a
table by using the border attribute of the <table> tag. To set the border of a table,
use the following code:
<table border>
By default, the width of the border is set to 1 pixel. You can increase the width of the
border by setting different values to the attribute. To set the width of the border to
2 pixels, use the following code:
<table border=”2”>
WIDTH and HEIGHT attributes
By default, the width of a table depends on the length of the text. However, you can
change the width by using the width attribute of the <table> tag.
You can specify the width in pixels or as a percentage value. If you specify the width
in pixels, the size of the table remains fixed. When you specify the width as a
percentage, the width of the table will vary based on the size of the browser window.
To set the width of a table to 50% of the browser window’s width, use the following
code:
<table width=”50%”>
You can set the height of a table in a similar manner by using the height attribute of
the <table> tag.

Setting table properties

Here’s how Here’s why

Observe the page The table does not have a border. You’ll add a
border to this table.
Open the source code
Edit the TABLE tag to read as
shown
Update and close the source code
Refresh and observe the page The table now has a border. The name column is
just wide enough to accommodate the text
“Njabulo”, which is the widest entry. By default,
columns will be as wide as the largest text they
contain.
Open the source code You’ll set the width of the table on this page.
Edit the TABLE tag to read as
shown
SEVEN| TABLES

Update and close the source code

Refresh and observe the page The table now extends to 50% of the browser
window’s width.

IDEA

If a border is set to zero or not

set at all, your table will be
displayed with no border.
Page | 67
 WEB TECHNOLOGY 511

7.3 TABLE HEADINGS

Table headings provide information about the data in the table. You can use the <th>
tag to add headings in a table. The <th> tag defines the cell; you do not have to use
the <td> tag.
For example:

The text enclosed within the <th> tag appears bold and centered. This helps to
identify the text as a heading of a column.

Exhibit 0-8: The use of the <th> tag to create a table heading
7.4 SPANNING A CELL
Spanning cells across rows and columns allows you to display grouped information in
a table. The COLSPAN or ROWSPAN attribute is used with the <td> tag to determine
the number of columns or rows you want to span. To span a cell across three columns,
use the following code:

You can also span a cell across two or more rows by using the ROWSPAN attribute.

Exhibit 0-9: The use of the COLSPAN attribute

SEVEN| TABLES

Page | 68
 WEB TECHNOLOGY 511

7.5 ALIGMENT OF A TABLE OR CELL

A table, or text within a table, can be positioned in
a variety of ways by using the align attribute. You
use this attribute with the <table>, <tr>, and <td>
tags. To align the table to the right, or center of a
page, use the align attribute with the <table> tag.
THINK POINT Using the align attribute with the <tr> and <td>
tags aligns text within the table. The align attribute
A class register for online is not supported in HTML5.
students is required, How can
you create a web page which will
have a class register using tables?

Exhibit 0-10: The use of ALIGN attribute to align data within the cells (surname)
7.6 IMAGES AND LINKS WITHIN CELLS
Adding images to a table breaks the monotony of text and communicates the
information clearly. You use the <img> tag to add images to a table, just as you would
anywhere else in an HTML file. You can add hyperlinks within a table when you
cannot provide all relevant information within the table. You use the <a> tag to add
a hyperlink within a cell as you would add any hyperlink on a page.
SEVEN| TABLES

Page | 69
 WEB TECHNOLOGY 511

Inserting images and links within cells

Here’s how Here’s why
Open the source code You’ll add an image of coins to the heading of the
table.
Place the insertion point as
shown
(Before the word “Products”) To prepare to add
the IMG tag.
Enter the following code: To add the image Coins.gif within the cell.
<IMG
SRC=”./Images/Coins.gif”>
Update and close the source code
Refresh the page and observe
the table
The image appears within the table.
Open the source code You’ll insert a link within a cell to make it easy to
move to the page Our products.html.
Place the insertion point as
shown (Before the word “Products”) To prepare to mark
the word “Products” as a hyperlink.
Enter the following code:
<A HREF=”Our products.html”>
Enter the closing A tag as
shown
Update and close the source code
Refresh and observe the page The word “Products” in the first row is now a
hyperlink (as shown in Exhibit 0-6).
Click the hyperlink To move to the Our products page.
Move back to the Price list page

7.7 NESTED TABLES

A table within a cell of another table is a nested table. You can use nested tables to
organize information and set the layout of a page.
SEVEN| TABLES

Page | 70
 WEB TECHNOLOGY 511

Nested tables
You use nested tables to add additional information within a table. They are used to
display information that is useful but not necessary. To create a nested table, put the
code required for a table within a pair of <td> tags in another table. For example, you
can display a calorie chart within a table for an apple pie recipe.

Exhibit 0-11: The source code of the Applepie page with a nested table
Exhibit 0-12: A cell of the table on the Applepie page containing another table
SEVEN| TABLES

Page | 71
 WEB TECHNOLOGY 511

KEY TERMS USED IN THIS SECTION

Cell:a non-empty element and should always be closed. It is one grouping within
a table. Cells are grouped horizontally (rows of cells) and vertically (columns
of cells).
Column:a set of data values of a particular simple type, one for each row of the table.
The columns provide the structure according to which the rows are composed.
Row:represents a single, implicitly structured data item in a table.
Table: a set of data elements (values) using a model of vertical columns (which are
identified by their name) and horizontal rows, the cell being the unit where a row
and column intersect.

Read
PRESCRIBED TEXTBOOK:
INTERNET & WORLD WIDE WEB How to Program, 5th Edition, by Paul Deiltel,
Harvey Deitel, Abbey Deitel. Page 86
SEVEN| GLOSSARY OF TERMS

http://www.gcflearnfree.org/internet101/1

Page | 72
WEB TECHNOLOGY 511

Page | 73
 WEB TECHNOLOGY 511

SECTION 7 REVIEW MULTIPLE CHOICE QUESTIONS

1.1 Which tags can one use to create a table?

A. <table><tr><td>
B. <table><table><cell>
C. <table><row><column>
D. None of the above

1.2 When creating a table, the border is set to zero by default. Is this statement
true or false?
A. True
B. False
C. Depends on HTML version
D. Depends on table width

1.3 If you want a cell to span multiple columns, which attribute can be used?
A. rowspan
B. colspan
C. cellspan
D. span

1.4 A cell can span multiple rows and columns. How can you make a cell span
multiple rows?
A. By using rowspan attribute
B. By using the cellheight attribute
C. By using one cell per row
D. By creating a new table
SEVEN| REVIEW QUESTIONS

1.5 What is a nested table?

A. A table that can have multiple rows a columns
B. A cell in a table with an image
C. A table that is within a cell of another table
D. None of the above

1.6 A table can have headings. In html, which tag can be used to add table
headings?
A. <heading>
B. <h1>
C. <th>
D. <thead>
1.7What is a difference between a cell and a table?
A. A cell is where a row and a column intersect and a table is made up of
rows and columns.
B. A cell is bigger than a table.

Page | 74
 WEB TECHNOLOGY 511

C. A table is smaller than a cell

D. A cell is used to create a row.
1.8 Which tag can one use to create a cell within a table?
A. <tr></tr>
B. <td></td>
C. <cell></cell>
D. <tcell></tcell>
1.9How can the content you align cell content to the center of the cell?
A. Using the align attribute
B. Using the center attribute
C. Using the shiftCenter attribute
D. Using the place attribute
1.10 What is likely to happen if the closing </table> is not added correctly or
missing?
A. Table content will be display in the upper section of a page
B. A table will have a border which is red
C. A table will be duplicated
D. A table will have a background color.
SEVEN| REVIEW QUESTIONS

Page | 75
 WEB TECHNOLOGY 511

EIGHT|STYLE SHEETS

LEARNING OUTCOMES

1. Create inline and embedded styles

2. Create and use linked style sheets
3. Use the cascading order of styles

INTRODUCTION
Style sheets allow you to separate the content of a page from its design
(separating structure from style). A style sheet is a set of rules that define the
formatting of HTML tags on a page. Using style sheets, you can control how a
Web site is rendered, including the margins, indents, and text backgrounds
without changing the HTML code for any page. The most recent CSS version is
CSS3. When using style sheets, styles define how to display HTML elements.
8.1 STYLE SHEETS
Style sheets not only provide a consistent design to pages in your Web site but
also make pages faster to load and easier to read. You can use style sheets in
three ways, depending on your design needs:
 Inline styles to the code for a Web page. This method allows you to change
the format of a single tag on a page.
 Embed a style sheet in the code for a Web page. This method allows you
embed the code for the style sheet within a Web page.
 Link a style sheet to a Web page. This method allows you to link your Web
page to an external file that contains style definitions. You can link multiple
pages to this file to maintain a consistent look for all pages.
CSS syntax
Before we continue with the ways in which we can use style sheet, we have to
know the CSS syntax. A CSS rule consist of a selector and a declaration block:
Syntax:
selector{property: value; property: value;}
for example:
body{color:red; font-size:22pt;}
EIGHT| STYLE SHEETS

This will change the text color and size of a web page to specified values (red,
22)

When using the css syntax, you start with a selector. CSS selectors allow yo to
select and manipulate HTML elements.
There are three general types of selectors in css:
 element selector
The element selector selects elements based on the element name. This means
when defining an element selector, an element/tag is used as a selector.
e.g. a{color:green;}
This will change any color of the text that is between <a> and </a>
Page | 76
 WEB TECHNOLOGY 511

A CSS style defined using an element selector will be applied automatically whenever
an elemnt/tag is used.
 id selector
The id selector uses the id attribute of an HTML tag to find the specific element. This
means to apply a CSS style defined using an id selector, an id (which must be unique)
of an element is used. To create an id
selector, you start with a hash character
followed by the id of an element.
e.g. #mylink{text-decoration:none;}
IDEA This will affect an element with an id
“mylink” only. For example:
Selectors are only used when <a id=”mylink”
using embedded or linked style href=”page.html”>Page1 </a>
sheet.  class selector
The class selector finds elements with the
specific class. To create a class selector, you have to start with a period(.) followed by
the class name. for example:
.fontChanger{font-size:20pt; color: green;}
To apply CSS rude defined using a class selector, the class attribute must be used
within an element. The class attribute can take more than one value. This means an
element can have two or more classes. For example:
<p class=”fontChanger otherClass”>paragraph text </p>
When using css, you must know different css property and their possible values.

Inline styles
Inline styles affect the individual occurrences of a tag. You can define several
properties for a tag by using the STYLE attribute. Each property is identified by the
property name, followed by a colon and the property value. To make text enclosed
within an H2 tag green, use the following code:
<h2 style="color:Green">About us</H2>
In the code, the COLOR property has the value Green.

If you use another H2 tag in the same page without specifying an inline style, the
enclosed text will appear in the default H2 format. When using inline style, the
selectors are not used, instead, the style
attribute is used.
EIGHT| STYLE SHEETS

8.2 EMBEDDED STYLE

Embedded style sheets allow you to define
styles for several tags in a page. This saves you
THINK POINT the effort of typing the same style definition
each time you use a tag and enforces
What makes id selector different consistency on the page.
from class and element selector? You can define embedded styles by using the
<style> tag between the <head> tags. Each
style definition in an embedded style sheet consists of a tag name followed by a list
of properties within curly braces. Each property is identified by the property name,

Page | 77
 WEB TECHNOLOGY 511

followed by a colon and the property value and a semi-colon after each value. Unlike inline style,
embedded style requires the use of CSS syntax. This means you have to also define selectors.
To create an embedded style that renders text enclosed within the <h2> tags as green and in the Verdana
font, use the following code:
<HEAD>
<STYLE>
H2 {
COLOR: Green;
FONT-FAMILY: Verdana;
}
</STYLE>
</HEAD>
Now, whenever you use an H2 tag in the page the enclosed text will appear green and in Verdana.
 Defining a class
When you define an embedded style for a tag, you can no longer use the default style of the tag on your
Web page. To be able to do so, you can define a class for the tag instead. A class allows you to apply
several formatting styles for different occurrences of the same tag. A class definition starts with a period
(.) followed by a name and the style definition.
To create a class that defines the color of text enclosed as blue, use the following code:
<style>
.Blue
{
COLOR:Blue;
}
</style>
You can now use this class with any tag such as, the H1 tag, the P tag, or the B tag to change the color of
the text. You can assign the class to a tag by using the class attribute. To assign the Blue class to a <b> tag,
use the following code:
<b class="Blue">
You can create a class for a particular tag by specifying the name of the tag with the class definition. For
instance, to create a class named “Red” for the <h2> tag to set the color of text marked as heading 2 to
Red, use the following code:
H2.Red
{
COLOR:Red;
}
Next, you assign the class “Red” to the <h2> tag that encloses the text that should appear red. To do this,
enter the following code in the <h2> tag:
<h2 class="Red">
8.3 DIV and SPAN TAGS
The <div> tag is a formatting tag that you use to apply styles to blocks of text on a page. It can be used to
apply styles to sections of a page, such as text enclosed within the <blockquote> tags. You can use both
the style and the class attribute with this tag. To set a background color of a paragraph to light green, use
the following code:
<div style="background: Lightgreen;">
<p>
Paragraph text
</p>

Page | 78
 WEB TECHNOLOGY 511

</div>
The <div> tag defines the style for the complete block and leaves space above and
below each block, like the <p> tag.
SPAN tag
The <span> tag is a formatting tag that allows you to set styles around text in page.
It functions like any other text formatting tag, such as the <b> tag. You can use both
style and class attributes with this tag. To set a background color to a part of text
on a line, use the following code:
<span style="background: Lightgreen">
Desired text
</span>
8.4 LINKED STYLES
Linked style sheets are one of the most powerful ways to use styles on your Web
pages. They provide the ability to create one style sheet that affects multiple pages.
You can change the entire look of your site by modifying just a few lines of code in
a single style sheet.
Linked style sheets
A linked style sheet is an external file that contains only the style definitions as
defined within the <style> tag in embedded style sheets. The external file has a .css
extension. You can link all pages of your site to this file to maintain a consistent
look of your site. For instance, set the <h2> tag to appear green in color in a style
sheet and link all pages of your site to this file. All pages in the site that use the
<h2> tag will display the enclosed text green.

Creating a linked style sheet

A linked style sheet is an external file that contains only the style definitions as
defined within the STYLE tags in the head section for embedded styles. This
external file has a .css extension. The first line after the starting STYLE tag is not
executed. It is advisable to add a comment as the first line after the starting STYLE
tag so that you don’t lose a part of the style definition.
Linking a page to a style sheet
You can link a page to style sheet by using the <link>tag within the <head> tag of a
page. To link a page to the style sheet, Linked-style.css, use the following code:
<link rel="stylesheet" href=" style.css">
The rel attribute specifies the relationship of the referenced file to the main
document. In this case, the relationship is that the referenced file is a style sheet.
EIGHT| STYLE SHEETS

The href attribute of the <link> tag is the same as the href attribute of the <a> tag
that specifies the path and name of the style sheet. You can link to more than one
style sheet by using more Link tags.

Page | 79
 WEB TECHNOLOGY 511

Exhibit 0-13: The student register page after linking it to the style sheet style.css
Creating a style sheet and linking it to a page
Here’s how Here’s why
Open Notepad Choose Start, Programs, Accessories, Notepad.
Enter the code as shown

Choose File, Save As… To open the Save As dialog box.

In the Look in list, select the To save the style sheet in that folder.
current unit folder
In the File name box, enter To specify the name of the style sheet. A style
style.css sheet should always be saved with a .css
extension.
Click Save To save the style sheet.
Choose File, Exit To close Notepad.
In the browser, open Our The page does not have any background color and
team the heading “Our expansion project” appears
EIGHT| STYLE SHEETS

black.
Open the source code
Place the insertion point as
shown
To prepare to add the LINK tag to link this page to
the style sheet.
Enter the following code: To link this page to the style sheet, Linked-style, to
format this page based on the styles specified in
<LINK REL="stylesheet" the style sheet.
HREF="style.css">
Update and close the source code
Refresh and observe the page The page now has a background color. The color
of the heading “Our expansion project” has
changed to red, and the text that is enclosed

Page | 80
 WEB TECHNOLOGY 511

within the P tags appears in a different font (as

shown in Exhibit 0-13).

8.5 CASCADING STYLE SHEETS

To maintain consistency between pages in a Web site, it is useful to include more than
one way of applying styles to a page. However, multiple style sheets can contain
conflicting style information. In these situations, the browser decides which style to
apply by using the cascading order of styles.

Cascading order of styles

You can use linked, embedded, and inline styles in a single page. If a linked styles
sheet defines a H1 tag as blue, the embedded style sheet defines it as red, and the
inline defines it as purple, the browser decides which style to apply by applying the
cascading order of these styles. The cascading order states that if a page contains
linked, embedded, and inline styles, the order of precedence of styles is:
 Inline styles
 Embedded styles
 Linked styles
Because the styles flow, or cascade in a certain order, they are also called cascading
style sheets.
EIGHT| GLOSSARY OF TERMS

THINK POINT
Using CSS, which property can
you use to create a 3 columns in
a division? Give example

Page | 81
 WEB TECHNOLOGY 511

KEY TERMS USED IN THIS SECTION

Cascading order:refers how browsers determine which style rules to follow when
there are conflicting rules.
Cascading Style Sheet:a style sheet language used for describing the look and
formatting of a document written in a markup language.
Class Selector:is a name preceded by a full stop (“.”)
Division:a container unit that encapsulates other page elements and divides
the HTML document into sections.
ID Selector:a name preceded by a hash character (“#”).
Inline Style sheet: A specific style inclusion method, in which style information is
directly attached to the HTML elements they affect.
Property:define what aspect of the selector will be changed or styled.
Selector:the part of a CSS rule set that actually selects the content you want to
style.

Read
PRESCRIBED TEXTBOOK:
INTERNET & WORLD WIDE WEB How to Program, 5th Edition, by Paul Deiltel,
Harvey Deitel, Abbey Deitel. Page 175

http://www.gcflearnfree.org/internet101/1
EIGHT| STYLE SHEETS

Page | 82
 WEB TECHNOLOGY 511

SECTION 8 REVIEW MULTIPLE CHOICE QUESTIONS

For more MCQs go to the prescribed textbook, Internet

World Wide Web, Page Number: 214

1.1What does CSS stand for?

A. Cascading style sheet
B. Capable System Storage
C. Cable Storage System
D. None of the above

1.2There are three ways in which you can use CSS.

A. Inlene syle, Single styles, page styles
B. Inline styles, Linked style sheet, Embedded style sheet
C. Dynamic style sheet, Creative style sheet, layout style sheet
D. Inlne style, Cascading style, Online styles

1.3Which pseudo class can be used to define a style for a visited hyperlink?
A. A visited
B. Link-style
C. Link-visited
D. a:visited

1.4To specify a child selector, which symbol is used?

A. Less than
B. Equal to
C. Greater than
D. Not equal to

1.5Which element is going to be affected if the following selector is used:

EIGHT| REVIEW QUESTIONS

E[attr]
A. Selects all E elements that have the given attribute attr
B. This is invalid
C. It will select all elements in a document
D. None of the above

1.6The following CSS3 pseudo element select will select the first line of an
element.
A. <first_line
B. :first_line
C. ::first-line
D. >first_line
1.7How can you link a web page with a CSS file?
A. <link rel=”stylesheet” href=”file.css” />
B. <link rel=”css” href=”file.css” />
C. <link type=”stylesheet” href=”file.css” />
D. <a href=”file.css”>

Page | 83
 WEB TECHNOLOGY 511

1.8 An element was styled using linked, embedded and inline style sheet.
Which style is most likely to be displayed?
A. All styles will be displayed
B. Inline style
C. Embedded style sheet
D. Linked style sheet
1.9Which pseudo element can one use to define that will appear if a user
places a mouse over an element?
A. :over
B. :hover
C. :mouseover
D. :top
1.10 Which formatting tag can one use to apply styles to blocks of text on a
page?
A. <div></div>
B. <span></span>
C. <p></p>
D. <style></style>
EIGHT| REVIEW MULTIPLE CHOICE QUESTIONS

Page | 84
 WEB TECHNOLOGY 511

NINE|FORMS

LEARNING OUTCOMES

1. Use forms to communicate with users

2. Add text boxes, text area fields, list boxes, radio buttons and check
boxes to a form
3. Add submit and reset buttons

INTRODUCTION
In general, if you want to collect vital information about someone or something, the
form is used. What if you want to create a Web page which will collect data from the
user? You can collect data from the users of your Web site by using forms. For
instance, you can ask users to fill out forms to specify which products they want to
order. You can also use forms to collect feedback about your site.
9.1 FORMS
You use <form>tags to create a form. This tag encloses the code for all the fields in a
form, such as text boxes, text area, check boxes, radio buttons, and other buttons.
The data of a form is stored and processed in a database on a Web server. You process
the data by assigning the value POST or GET to the METHOD attribute. POST is used
when you want to store the data of the form in the database and GET is used to
retrieve data from the database. You use the ACTIONattribute of the FORM tag to
specify the URL of a program that processes this data.
Creating forms
A form can contain many fields, such as text boxes, text area fields, radio buttons, and
check boxes (see Exhibit 0-14). You use the <input>tag within the FORM tag to create
fields and other elements in a form. This is an empty container. The TYPEattribute of
the INPUT tag allows you to specify the type of the field that you want to add to a
page.
For example, to add a text box, you would use
the following code within the FORM tag:
<INPUT TYPE="text">
IDEA

When creating a form, input

NINE| FORMS

elements must be placed

between <form> and </form>

Page | 85
 WEB TECHNOLOGY 511

Exhibit 0-14: A form on a page

The syntax for creating a form is as follows:
<form>
Input element
</form>
The following table lists some of the tags which can be used to create a form

Tag Description
<form> Defines an TML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text
area)
<label> Defines a label for an <input> element
<select> Defines a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
NINE| FORMS

Page | 86
 WEB TECHNOLOGY 511

The following table lists the values and functions that you can assign to the TYPE attribute.
Value Description
Button Defines a clickable button (mostly used with a JavaScript to
activate a script)
checkbox Defines a checkbox
Color Defines a color picker
Date Defines a date control (year, month and day (no time))
Email Defines a field for an e-mail address

Text Default. Defines a single-line text field (default width is 20

characters)
submit Defines a submit button
Reset Defines a reset button (resets all form values to default values)
Radio Defines a radio button
Password Defines a password field (characters are masked)
Value Description
Text Specifies that the field is a text box.

Password Specifies that the field is a text box in which the text is encrypted.

Checkbox Specifies that the field is a check box.

Radio Specifies that the field is a radio button.

Submit Creates a button to submit the data in a form to a database on

the Web server.

Reset Creates a button that deletes all the data entered in a form.

Button Creates a button that does not have a preset function. It can be
assigned a specific function by using a programming language,
such as JavaScript.

Hidden Indicates that the field will not appear on the page, but the
content of the field is submitted to the Web server.

Image Displays the image specified by the SRC attribute of the INPUT
tag. When you click this image, the data of the form is submitted.

To obtain information from users in the form of text or numbers, you use fields, such as text boxes and
text area. You can allow users to select from a given list of items by using fields such as list boxes, radio
buttons, and check boxes.

Page | 87
 WEB TECHNOLOGY 511

9.2 TEXT BOXES

In a form, you can use a text box to obtain information, such as user name, telephone
number, or e-mail address. To create a text box, you assign the value “text” to the
TYPE attribute of an INPUT tag.
The following table lists the attributes that you can use with the INPUT tag when the
value assigned to the TYPE attribute is “text.”
Attribute Description
SIZE Specifies the width of a text box in characters.

MAXLENGTH Specifies the maximum number of characters that can be

entered in a text box.
NAME Assigns a name to a text box.
VALUE Specifies a default value that appears in a text box.
Text area fields
To allow users to enter a large amount of information, such as addresses or feedback,
you can add a text area field to a form. To create a text area field, you use the
TEXTAREAtag. You can display text in the text area field by specifying it between the
TEXTAREA tags. For instance, to display the text “Enter your address here” within a
text area field, you would use the following code:
Address:<TEXTAREA>Enter your address here</TEXTAREA>
The ROWS and COLS attributes of this tag specify the number of rows and columns of
text that users can see. Scroll bars appear in the field if a user enters more text than
can fit in the area.

Exhibit 0-15: The Order page with a text box and a text area
NINE| FORMS

Page | 88
 WEB TECHNOLOGY 511

Adding a text area

Here’s how Here’s why
Open the source code
Place the insertion point as
shown
Enter the code
<BR>Address: The TEXTAREA tag is used to create a multiple line
<BR><TEXTAREA ROWS=3 text box. The ROWS and COLS attributes specify
COLS=30>Enter your address the number of rows and columns of text that users
he can see on a page in the text area field. Here, the
re</TEXTAREA> number of rows is 3 and the number of columns is
30.
Update and close the source code
Refresh and observe the page A text area with the label “Address:” appears on
the page. It contains the text that you entered
within the TEXTAREA tag (see Exhibit 0-15).
In the text area, enter your If the address exceeds the specified number of
address rows, the scroll bars of the text area are activated.
9.3 LIST BOXES
User information is easier to collect if you provide the user with several options. You
can do this by using a list box. For instance, you can add a list box that contains the
list of products of the company in a form used to order products.
To add a list box, you use the SELECT and OPTION tags. SELECTtags enclose the items
of the list. You specify each item of the list by using an OPTIONtag. The NAMEattribute
of the SELECT tag assigns a name to the list box.
To create a list box called “Spices” that contains Anise, Basil, and Cumin, you would
use the following code:
<SELECT NAME="Spices">
<OPTION>Cumin
<OPTION>Black Cardamom
<OPTION>Green Cardamom
</SELECT>
NINE| FORMS

Page | 89
 WEB TECHNOLOGY 511

Exhibit 0-16: The Order page with the list box dropped down
Multiple option list boxes
You might want users to be able to select more than one of the items in a list box.
Users can select multiple items from a list box if they want to buy more than one
product. You use the MULTIPLE attribute of the SELECT tag to create a multiple
option list box. Users can then use the control or shift keys, depending on the
position of items, to select multiple items from the list box.
Here’s how Here’s why
Open the source code
Edit the SELECT tag to read The MULTIPLE attribute indicates that users can
<SELECT NAME=”Spices” select more than one item from the list box.
MULTIPLE>
Update and close the source code
Refresh and observe the page The list appears and displays all the items. Users
can now order more than one item.
From the list, select Cumin
Press c and select “Cumin” and “Green cardamom” are selected.
Green cardamom

9.4 RADIO BUTTONS

You can create radio buttons to allow users to select only one of several options.
Each radio button is a part of a group. This makes it easier for users to view all the
available options. For instance, while ordering products, users can choose to pay by
using only one type of card. These options can be part of the payment group.
FORMS

To create a group of radio buttons, you give several INPUT tags of the radio type the
NINE|FORMS

same value for the NAME attribute. You can assign a value to a radio button by using
the VALUE attribute. For instance, to provide the options “AMEX“ and “VISA” as
radio buttons, you would use the following code:
<INPUT TYPE="radio" NAME="Payment" VALUE="Amex">AMEX
NINE|

<INPUT TYPE="radio" NAME="Payment" VALUE="Visa">VISA

The value “Payment” assigned to the NAME attribute of both of the INPUT tags
indicates that the radio buttons belong to the same group. Users can select only one
of these options. Only the selected value is sent to the database.
Page | 90
 WEB TECHNOLOGY 511

Exhibit0-17: The radio buttons on the Order page

9.5 CHECK BOXES
Here’s how Here’s why
Open the source code
Create two radio buttons as
shown by the code:
The value “Card” assigned to the NAME attribute
of the INPUT tags of all the radio buttons indicates
that they belong to the same group.
Update and close the source code
Refresh and observe the page Three radio buttons appear on the page (see
Error! Not a valid bookmark self-reference.).
Select VISA
Select AMEX VISA is now deselected. Users can select only one
radio button from a specific group.
You can use check boxes if you want users to select more than one option from a
given set of options. This is similar to creating radio buttons, but users can select more
than one option.
The following table lists the attributes that you can use with the INPUT tag when the
value assigned to the TYPE attribute is “checkbox.”

Attribute Description
NAME Specifies the name of the group of the check box.

VALUE Specifies the value that is sent to the database when the check
box is checked.
CHECKED Indicates that the check box is checked by default.

Exhibit 0-18: The check boxes on the Order page

Here’s how Here’s why
Open the source code You’ll add check boxes to the page so that the
users can select the Outlander Spices’ outlets that
NINE| FORMS

they have visited.

Place the insertion point as
shown
Enter the code
Enter the code The value “checkbox” assigned to the TYPE
<P>Which of our outlets have attribute indicates that the field is a check box.
you visited? Check boxes are grouped based on the value
<BR> assigned to the NAME attribute of the INPUT tags
Page | 91
 WEB TECHNOLOGY 511

<INPUT TYPE=“checkbox” of all the check boxes. Here, “Outlets” is the name
NAME=“Outlets” of the group of check boxes. The VALUE attribute
VALUE=“Outlet1”> specifies that the value “Outlet1” will be
Sh submitted to the database if this check box is
opper’s Paradise checked.

Update and close the source code

Refresh and observe the page A check box appears under the text “Which of our
outlets in Seattle have you visited?” “Shopper’s
Paradise” is the label of this check box.
Check Shopper’s Paradise
Open the source code
Create two check boxes as
shown

The value assigned to the NAME attribute of the

INPUT tags indicates that these check boxes
belong to the “Outlets” group.
Update and close the source code
Refresh and observe the page Three check boxes appear on the page (see
Exhibit 0-18).
Check Shopper’s Paradise
Check Port Plaza Two options are checked. Users can select more
than one option from a group of check boxes.
NINE| FORMS

Page | 92
 WEB TECHNOLOGY 511

9.6 CREATING BUTTONS

You use the submitbutton to allow users to submit the data that they enter in a form.
If you want users to reenter the data, you use the resetbutton to delete entries in all
the fields of a form. This is easier than deleting data from each field individually.
Submit buttons
To create a submit button on a page, you assign the value “submit” to the TYPE
attribute of an INPUT tag. By default, the submit button has the label “Submit Query.”
You can change this by using the VALUE attribute of the tag. For instance, to create a
submit button with the label “Order now,” use the following code:
<INPUT TYPE="submit" VALUE="Order now">
When a user clicks the submit button, the data of the form is sent to a database on
the server where it is processed based on the method (POST or GET) specified by the
METHOD attribute of the FORM tag. The program that processes the data is specified
by the ACTION attribute of the FORM tag.

Creating a submit button

Here’s how Here’s why
Open the source code You’ll create a button to allow users to order
products.
Place the insertion point as
shown Scroll down.
Enter the code The value “submit” assigned to the TYPE attribute
creates a submit button. When users click this
<BR><INPUT button, the data of the form is sent to a database.
TYPE=”submit”>
Update and close the source code
Refresh and observe the A button with the label “Submit Query” appears
page on the page. This is the default label of a submit
button.
Open the source code
Edit the INPUT tag to read To change the label of the submit button.

<INPUT TYPE=”submit”
VALUE=“Order now”>
Update and close the source code
Refresh and observe the The button now has the label “Order now.”
page
Open the source code You’ll specify the action to be taken when the
NINE| FORMS

submit button is clicked.

Edit the FORM tag to read The ACTION attribute specifies the URL of a
program that processes the data of a form on a
<FORM Web server. In this case, the ACTION attribute has
ACTION=”Thanks.html” the value “Thanks.html” indicating that this page
METHOD=”POST”> will appear when the users click the submit
button. This is because the form is not linked to
any database. The METHOD attribute indicates
the method of submitting the data to the

Page | 93
 WEB TECHNOLOGY 511

database. The value “POST” assigned to this

attribute indicates that the data of the form will
be stored in a database.
Update and close the source code
Refresh the page
Click Ordernow The page “Thanks.html” appears in the browser.
Click Back To return to the Order page.
Reset buttons
You can use a reset button to clear all entries in a form and allow users to reenter
data. To create a reset button, you assign the value “reset” to the TYPE attribute of
the INPUT tag. By default, the reset button has the label “Clear.” You can change this
by using the VALUE attribute.

Exhibit 0-19: The submit and reset buttons on the Order page
Here’s how Here’s why
Open the source code
Place the insertion point as
shown
Enter the code The value “reset” assigned to the TYPE attribute
creates a reset button. When users click the
<INPUT TYPE=”reset” reset button, all the field entries in the form are
VALUE=”Clear form”> deleted.
Update and close the source code
Refresh and observe the page Another button with the label “Clear form”
appears on the page (see Exhibit 0-19).
Enter values in all the fields of the from
Click Clear form The data in all the fields of the form is reset to
the original status.
NINE| FORMS

Page | 94
 WEB TECHNOLOGY 511

KEY TERMS USED IN THIS SECTION

Check box: An element used when you want to let the visitor select one or more
options from a set of alternatives.
Form: allows a user to enter data that is sent to a server for processing. Forms can
resemble paper or database forms because web users fill out the forms using
checkboxes, radio buttons, or text fields.
Radio Button:a graphical control element that allows the user to choose only one of
a predefined set of options
Text area: A text field that can span several lines.

Read
PRESCRIBED TEXTBOOK:
INTERNET & WORLD WIDE WEB How to Program, 5th Edition, by Paul Deiltel,
Harvey Deitel, Abbey Deitel. Page 90
NINE| GLOSSARY OF TERMS

http://www.gcflearnfree.org/internet101/1

Page | 95
 WEB TECHNOLOGY 511

SECTION 9 REVIEW MULTIPLE CHOICE QUESTIONS

1.1. How can you collect feedback from visitors of your web site?
A. By using fast mail
B. By using forms
C. By visiting each and every web site visitor/user
D. None of the above

1.2Form data is processed by an application/script. How do you tell a form

which application to send data to?
A. Using the action attribute of the form tag
B. Using the method attribute of the form tag
C. Using hyperlink
D. By using images and CSS

1.3Which input control in a form that allows a user to select only one option?
A. Check box
B. Text box
C. Text area
D. Radio button

1.4To create a clickable button, the _____ tag can be used.

A. <button>
B. <link>
C. <click>
D. <onclick>
NINE| REVIEW QUESTIONS

1.5To create a button that will reset a form, the following code can be used:
A. <reset></reset>
B. <input type=”reset” value=”Refresh” />
C. <input type=”refresh” value=”reset” />
D. None of the above

1.6A drop down can is created using which tags?

A. <select> and <option>
B. <dropdown> and <list>
C. <list> and <items>
D. <options> and <list>
1.7How can you create a radio button which will restrict a user from selecting
more than one option?
A. Assign same value to the name attribute for a group of radio buttons
B. By creating single radio button with multiple values
C. By using CSS
D. Using tables and CSS

Page | 96
 WEB TECHNOLOGY 511

1.8 A form can be reseted. This can be done by creating a ______ button.
A. clear
B. refresh
C. reset
D. new
1.9When the type attribute of an input tag is equal to hidden. What will be
created.
A. An element with a value that will not be used.
B. A field that will not appear on the page but the content will be
a. submitted to the web server
C. An input element with no data
D. A hidden box
1.10 To specify the width of a text box, the ________ attribute is used.
A. width
B. size
C. length
D. columns
NINE| REVIEW QUESTIONS

Page | 97
 WEB TECHNOLOGY 511

TEN|FRAMES

LEARNING OUTCOMES

1. Create frames to display more than one page in the same

browser window
2. Use hyperlinks within a frame
3. Modify frame properties and frame page properties and create a
navigation bar

INTRODUCTION
Users can lose interest in browsing a site that has navigational problems. Frames can
make it easier to navigate a site. A frame is used to display more than one page in the
same browser window, making it easier for users to access information. A frame
within a frame is a nested frame. You can use nested frames to set the layout of a
page.
10.1 UNDERSTANDING FRAMES
You can divide a page into two or more parts by using frames. You use the FRAMESET
tag with the FRAME tag to create a page with frames. The FRAMESET tag specifies the
number of frames on a page. This tag is a container and encloses the FRAME tags.
The following table explains the attributes of the FRAMESET tag.
Attribute Description
COLS Creates vertical frames on a page. The values assigned to this
attribute allow you to specify the width of each frame based
on the browser window. For instance, to create two frames,
one occupying 35% of the width of the browser window and
the other frame occupying the remaining 65%, you would use
the following code:
<FRAMESET COLS=”35%,65%”>
ROWS Creates horizontal frames on a page. The values assigned to
this attribute allow you to specify the height of each frame
based on the browser window.

In the HTML document of a frames page, the FRAMESET tag replaces the BODY tag
TEN| FRAMES

because this page contains only the structure of the frames in the page and not any
content. You define each frame in a frames page by using the FRAME tag. The SRC
attribute of the FRAME tag specifies the page that appears in a frame.
For instance, you can create frames that divide the browser window into two parts:
a list of products on the left and the description of a particular product on the right
(see Exhibit 0-20). This way the user can see the product list and the description of a
product at the same time.

Page | 98
 WEB TECHNOLOGY 511

If you want to display a message to users who view the frames page in non-frame supporting browsers,
you use the NOFRAMES tag. To display the message on the page, you use the BODY tag within the
NOFRAMES tag. For instance, to display the message “This page contains frames” in a non-frame
supporting browser, you would use the following code:
<NOFRAMES>
<BODY>
This page contains frames
</BODY>
</NOFRAMES>

Exhibit 0-20: A frames page with two frames

Exhibit 0-21: The source code to create frames on the Products page

Page | 99
 WEB TECHNOLOGY 511

Creating frames
Here’s how Here’s why
Open the source code To open a blank page. You’ll create frames on this
page.
Open the source code
Observe the code There are no BODY tags because in a frames page
document the FRAMSET tag replaces the BODY
tag.
Place the insertion point as
shown
Enter the code shown in To create frames on the page. The COLS attribute
Exhibit 0-21 of the FRAMESET tag indicates that the page will
have two frames occupying 25% and 75% of the
width of the browser window respectively. The
SRC attribute of the first FRAME tag specifies that
the page “Product list.html” will appear in the left
frame. The SRC attribute of the second FRAME tag
specifies that the page “Content.html” will appear
in the right frame.
Update and close the source code
Refresh and observe the The page is divided into two frames. The left
page frame displays the product list and the right frame
displays the Content page.

10.2 NESTED FRAMES

You use nested frames to create both horizontal and vertical frames on the same
frames page. To create a nested frame, put the code for defining frames within a pair
of FRAMESET tags. For instance, to create a horizontal frame and two vertical frames
on the same frames page, you would use the following code:
<FRAMESET ROWS="20%,80%">
<FRAME SRC="Banner.html">
<FRAMESET COLS="35%,65%">
<FRAME SRC="Product list.html">
<FRAME SRC="Content.html">
</FRAMESET>
</FRAMESET>
Research
How can you style a frame using The first set of FRAMESET tags indicates that the
CSS? frames page is divided into two horizontal
TEN| FRAMES

frames. The first frame displays the Banner page.

The second frame is divided into two vertical frames by using the second set of
FRAMESET tags. These frames display the Product list and Content pages in the left
and right frames.

Page | 100
 WEB TECHNOLOGY 511

Creating a nested frames page

Here’s how Here’s why
Open the source code
Place the insertion point as
shown
To prepare to add another FRAMESET tag.
Enter the code The ROWS attribute of the FRAMESET tag
<FRAMESET ROWS="35,65"> indicates that the page is divided into two
horizontal frames. The values assigned to the
ROWS attribute indicate that the first frame
occupies 35% of the height of the browser
window and the second frame occupies 65%. A
FRAMESET tag enclosing another FRAMESET tag
set creates a nested frames page.
Press enter
Enter the code The SRC attribute of the FRAME tag specifies that
the page “Logo.html” will appear in the new
<FRAME SRC="Logo.html"> frame.
Place the insertion point as
shown
Enter the ending FRAMESET
tag as shown
Update and close the source code
Refresh and observe the The page is now divided into three frames with
page the Logo page in the top frame, the Product list
page in the left frame, and the Content page in the
right frame.

10.3 LINKING FRAMES

You link frames by creating hyperlinks on pages within frames. By default, the target
page of a hyperlink always appears in the same frame as the hyperlink. To display the
target page in a separate frame, you can specify the name of that frame in the TARGET
attribute of the A tag (anchor). You can specify the name of a frame by using the
NAME attribute of the FRAME tag.
TEN| FRAMES

Page | 101
 WEB TECHNOLOGY 511

Exhibit 0-22: The Products page

Creating a nested frames page
Here’s how Here’s why
In the left frame, click Lovage The Lovage page appears in the same frame.
Click Back To move back to the Product list page.
Open the source code
Place the insertion point as
shown
Edit the FRAME tag to read To assign the name “main” to the right frame.
<FRAME
SRC=”Content.html”
NAME=”main”>
Update and close the source code
Right-click in the left frame
Choose ViewSource To view the source code of the Product list page.
Place the insertion point as
shown
Edit the A tag to read This ensures that when a user clicks this hyperlink
the target page appears in the right frame, which
<A HREF=”Lovage.html is named “main.”
TARGET=”main”>
Update and close the source code
Update and close the source code
In the left frame, click Lovage The Lovage page now appears in the right frame
(see Exhibit 0-22).
TEN| FRAMES

Page | 102
 WEB TECHNOLOGY 511

10.4 SPECIAL TARGET NAMES

You can use special target names to display a linked page in various ways by using the
TARGET attribute of the A tag (anchor) to refer to the pre-defined frame names. For
instance, to display the target of a hyperlink that links to an external site in another
browser window, specify _blank as the value in the TARGET attribute. By default, the
TARGET attribute is always set to _self, indicating that the target page will appear in
the same frame as that of the hyperlink.
The following table lists some of the special target names and their functions.
Target name Description
_top Displays the target page in the same browser window.

_blank Displays the target page in a new browser window.

_self Displays the target page in the same frame.
_parent Displays the target page in the current frameset. This works
only with nested frames.

Using special target names with hyperlinks

Here’s how Here’s why
Open the source code of the Right-click in the left frame and choose View
page in the left frame Source. You’ll use a special target name to display
the target page in a new browser window.
Place the insertion point as
shown
Edit the A tag to read To display the target page in a new browser
window. The underscore (_) indicates that the
<A value assigned to the TARGET attribute is a special
HREF=”http://www.msn.co target name.
m” TARGET=”_blank”>
Update and close the source code
Refresh the page
In the left frame, click The home page of the MSN Web site appears in a
more information new browser window.
TEN| FRAMES

Page | 103
 WEB TECHNOLOGY 511

10.5 MODYFIYING FRAMES

There are many properties you can change to control how a page with frames (frames
page) and frames within that page appear.
Frame properties
You can change several properties for each frame within a frames page. These
properties include the size of the frame, its margins, and whether the frame is
resizable and has scroll bars. To change a property of a frame, you specify an attribute
in the FRAME tag of that frame.
The following table explains the attributes that modify the properties of a frame.
Attribute Description
MARGINWIDTH Specifies the left and right margins of a frame. This value is
measured in pixels. By default, the margins are set by the
browser.
MARGINHEIGHT Specifies the top and bottom margins of a frame. This value is
measured in pixels. By default, the margins are set by the
browser.
SCROLLING Allows you to control the scroll bars of a frame. The values that
you can assign to this attribute are YES, NO, and AUTO. The
value “YES” indicates that the frame will always have scroll
bars. The value “NO” indicates that scroll bars will not appear
even if the content of the page in the frame does not fit the
visible area of the frame. The value “AUTO” indicates that scroll
bars will appear if required (this is the default).
NORESIZE Allows you to specify that the frame cannot be resized. By
default, users can resize a frame by dragging its border.

Modifying frame properties

Here’s how Here’s why
Observe the page The left frame has scroll bars. You’ll remove the
scroll bars because the content of the page fits the
visible area of the frame.
Open the source code
Place the insertion point as
shown
Edit the FRAME tag to read To remove the scroll bars from this frame.
<FRAME SRC=”Product
list.html” SCROLLING=NO>
Update and close the source code
Refresh and observe the The left frame now does not have scroll bars.
TEN| FRAMES

page
Point to the border between
the frames

The pointer changes to a two-headed arrow. This

means that you can now drag to resize the frames.
Page | 104
 WEB TECHNOLOGY 511

Drag the border as shown

The logo is not fully visible.

Open the source code You’ll make it so that users cannot resize the top
frame.
Place the insertion point as
shown
Edit the FRAME tag to read: To ensure that users cannot resize the frame.

<FRAME SRC=”Logo.html”
NORESIZE>

Update and close the source code

Refresh the page
Point to the border between The pointer does not change to a two-headed
the frames arrow. This indicates that the frame is no longer
resizable.

10.6 FRAMES PAGE PROPERTIES

You can set the properties of the frames page as a whole. These properties include
modifying the border color of all frames and whether there are borders showing
between the frames. To set a property of the frames page, you use an attribute in
the FRAMESET tag.
The following table explains the attributes that modify the properties of the
frames page.

Attribute Description
BORDERCOLOR Specifies the border color of all frames in the frames page.

FRAMEBORDER Indicates whether the borders between frames will appear.

The possible values are YES and NO, with YES being the default.
TEN| FRAMES

Page | 105
Page | 106
 WEB TECHNOLOGY 511

Exhibit 0-23: The Products page after removing the borders between two
frames
Modifying frames page properties
Here’s how Here’s why
Observe the page The borders of the frames appear gray, which is
the default. You’ll change the color of the
borders to blue.
Open the source code
Edit the first FRAMESET tag To change the border color of all frames enclosed
to read within this FRAMESET tag to blue.

<FRAMESET ROWS”35,65”
BORDERCOLOR=Blue>
Update and close the source code
Refresh the page The borders of all the frames appear blue.
Open the source code You’ll remove the border between the left and
right frames.
Edit the second FRAMESET
tag to read To remove the borders between the frames
enclosed within this FRAMESET tag.
<FRAMESET COLS=”25,75”
FRAMEBORDER=NO>

Update and close the source code

Refresh and observe the The border between the frames is no longer
page visible (see Exhibit 0-23). Though the border does
not appear, the page is still divided into three
frames.

Page | 107
 WEB TECHNOLOGY 511

10.7 NAVIGATION BAR

You can make it easier for users to navigate your site by using a navigation bar. A
navigation bar is a page that contains hyperlinks to several pages of a site and
appears in a frame on each page. To create a navigation bar, you create a page with
hyperlinks to several pages and display this page in a frame on each page of your
site.
Creating a navigation bar
Here’s how Here’s why
Open the source code You’ll create another frame on the page that will
contain a navigation bar.
Edit the first FRAMESET tag To change the number of horizontal frames on the
to read page to three.

<FRAMESET
ROWS=”35,50,15”
BORDERCOLOR=Blue>
Place the insertion point as
shown
To prepare to add the frame for the navigation
bar.
Enter the code To add a frame that contains the Navigate page.
This page has hyperlinks to several pages of the
<FRAME site.
SRC="Navigate.html">
Update and close the source code
Refresh and observe the A new frame appears at the bottom of the page.
page This frame contains hyperlinks to other pages in
the site. Notice that the contents of the left frame
are not fully visible.
Open the source code To add scroll bars to the left frame.
Select SCROLLING=NO as
shown
Delete the code
Update and close the source code
Refresh and observe the Scroll bars appear in the left frame.
page
In the navigation bar, click To view the About us page.
Aboutus
TEN| FRAMES

Page | 108
 WEB TECHNOLOGY 511

KEY TERMS USED IN THIS SECTION

Cols: specifies the size of, and the number of columns in a <frameset>.
Frame: html element that allows author to present documents in multiple views,
which may be independent windows or subwindows.
Navigation bar:a section of a website or online page intended to aid visitors in
travelling through the online document.

Read
PRESCRIBED TEXTBOOK:
INTERNET & WOZLD WIDE WEB How to Program, 5th Edition, by Paul Deiltel,
Harvey Deitel, Abbey Deitel. Page 99
TEN| GLOSSARY OF TERMS

http://www.gcflearnfree.org/internet101/1

Page | 109
WEB TECHNOLOGY 511

Page | 110
 WEB TECHNOLOGY 511

SECTION 10 REVIEW MULTIPLE CHOICE QUESTIONS

1.1 How can you display multiple pages on one window?

A. By using lines
B. By using frames
C. You can create hyperlinks to those pages
D. None of the above

1.2 To create a frameset with multiple rows, which attribute is used?

A. rows
B. Cols
C. cells
D. patterns

1.3 Which input control in a form that allows a user to select only one option?
A. Check box
B. Text box
C. Text area
D. Radio button

1.4 To create a clickable button, the _____ tag can be used.

A. <button>
B. <link>
C. <click>
D. <onclick>

1.5 To create a button that will reset a form, the following code can be used:
A. <reset></reset>
TEN| REVIEW QUESTIONS

B. <input type=”reset” value=”Refresh” />

C. <input type=”refresh” value=”reset” />
D. None of the above

1.6 A drop down can is created using which tags?

A. <select> and <option>
B. <dropdown> and <list>
C. <list> and <items>
D. <options> and <list>
1.7 How can you create a radio button which will restrict a user from selecting
more than one option?
A. Assign same value to the name attribute for a group of radio buttons
B. By creating single radio button with multiple values
C. By using CSS
D. Using tables and CSS
1.8 A form can be reseted. This can be done by creating a ______ button.

Page | 111
 WEB TECHNOLOGY 511

A. clear
B. refresh
C. reset
D. new
1.9 When the type attribute of an input tag is equal to hidden. What will be
created.
A. An element with a value that will not be used.
B. A field that will not appear on the page but the content will be
C. submitted to the web server
D. An input element with no data
1.10 To specify the width of a text box, the ________ attribute is used.
A. width
B. size
C. length
D. columns
TEN| REVIEW QUESTIONS

Page | 112
 WEB TECHNOLOGY 511

Glossary of terms HTML

Alt text
Text description of a graphic that appears before the graphic is loaded into
the browser. After an image has been downloaded on the browser, the alt
text may briefly appear over the graphic as you rollover the mouse over the
graphic.
Anchor <a>
The anchor tag is used to define a hypertext link.
Angle brackets
less than (<) and greater than (>) symbols used to surround an element to
create a tag.
Attribute
A property of an HTML element used to provide additional instructions to a
given HTML tag. The attribute is specified in the start of HTML tag.
Broken links
Broken links are those links that do not work because the destination has
been deleted or the path has been changed.
Browser
A program used to access and display HTML documents. Common examples:
Internet Explorer, Netscape, and Mozilla Firefox.
CGI (Common Gateway Interface)
A programming standard that defines how programs communicate with each
other and with the web server. Generally, a CGI-complaint program is called
a script.
Clickable map
Another name for an imagemap.
Closing tag
TEN| GLOSSARY OF TERMS

An HTML instruction that tells the browser to turn off a specific feature of an
opening tag.
Comments
Information added to the code for future reference. The information may
include a brief explanation for what a complex code does. Comments are
ignored by the browsers and they are visible in the source code. HTML
comments start with <!-- and end with -->.
Deprecated element
An element that will be obsolete in the future is referred to as deprecated.
The element can be used today, however, it needs to be removed sometime
in the future to avoid a situation where newer browsers would ignore that
element.
Document content
Parts (such as text and graphics) of a web document that you want the user
to see.
Document Type Definition (DTD)
A specification for a mark-up language.
Domain name

Page | 113
 WEB TECHNOLOGY 511

The alphabetic name for a computer host mapped to a computer's numeric

IP (Internet Protocol) address.
Elements
An element in HTML refers to a tag (such as <head>, <body>, and <p>) or
element of structure of a document(such as body, title, and paragraph).
Entities
Entities are those characters that do not appear on the keyboard (i.e., ™ ©, ®,
etc.) or characters that have special meaning in HTML (i.e., <, >, &, etc.).
Form
A mechanism that enables a user to supply input to the web page author.
Footer text
The text that is not specifically related to the content of the webpage and that
appears on every webpage is referred to as footer text. The most notable
example of footer text is the copyright statements at the bottom of
webpages.
Frames
HTML supports frames to divide a web page into independent and scrollable
sections. Having two frames on a web page is like loading three separate
pages in the browser. A common use for frames is to place the navigation on
the left, and content on the right.
Frames (used at the top of a web page to specify HTML version)
A frames document type definition indicates that the document uses frames
and it also supports deprecated elements. This is the most flexible document
type definition.
FTP
FTP stands for File Transfer Protocol. FTP is a robust method for transferring
files between computers using TCP/IP. TCP stands for Transmission Control
Protocol and IP stands for Internet Protocol. TCP is responsible for
transporting data and IP is responsible for making sure data goes to the
correct address.
TEN| GLOSSARY OF TERMS

GIF (Graphics Interchange Format)

A file format (commonly used for web pages) used for storing image files.
Hotspot
A defined area on an image that acts as a hyperlink.
HTML (Hypertext Markup Language)
A web scripting language used for creating web page documents.
HTML converter
A software that converts text to HTML code.
HTML editor
A software that inserts HTML code as you work to create an HTML file.
Hypermedia
Hypertext that may include multimedia like text, images, sound, and video.
Imagemap
A graphic that has clickable areas (or hotspots) defined to allow a user to
move to another URL.
Inline
Elements those that are supported directly by HTML are known as inline. Also,
another characteristic of inline element is that their output can be seen or

Page | 114
 WEB TECHNOLOGY 511

heard without the user taking any additional action (such as clicking, and
installing of a plug-in) because the output is directly placed on the webpage.
Inline elements include, for instance, animated graphics, graphics, and sound.
JPEG or JPG (Joint Photographic Experts Group)
A common cross-platform image format that is used on the web.
Line break
Line break simply refers to stop of the current line and continuation to the
next line. In HTML documents, the <br> tag is used to end a line.
Link
A hypertext link used to connect one document with another document or
file.
Mirror site
A mirror site is a copy of a publicly available website.
Nesting/nested tags
Nesting occurs when you place tags within other tags. Anytime you create an
HTML document, you will end-up using nested tags. For example, the <title>,
and <body>, tags are nested inside the root <html> tag. The <body> tag is
likely to also nest inside of itself other tags.
Navigating
The act of observing the content of web for some purpose.
Obsoleted element
An element that won't necessarily work in the future versions of browsers.
Any obsolete element that you may be using in your website should be
removed; otherwise, newer browsers would ignore that element.
Opening tag
An HTML instruction that tells the browser to turn on the feature and apply it
to the document content that follows.
Out-of-line
Out-of-line refers to those elements that require the user to take some
additional action to see or hear the output of the element. The additional
TEN| GLOSSARY OF TERMS

action could consist of clicking or installing of a plug-in. Examples of out-of-

line elements include video, 3-D models, animations, etc.
Pixel
A collection of dots that make up a monitor's display. On color monitors, a
pixel contains three dots: red, green, and blue. On monochrome monitors, a
pixel contains only one dot.
Robot
A software that automatically explores the web.
Server
A software application that serves requests initiated by client programs.
Strict (used at the top of a web page to specify HTML version)
The strict version indicates that the web document does not use frames or
any deprecated elements. If a web document is based on a strict definition, it
must have clean HTML (meaning all opened tags must be closed, attribute
values surrounded by double quotation marks, etc.).
Style sheet

Page | 115
 WEB TECHNOLOGY 511

A style sheet includes styling syntax (rules) that dictates how your web page will look. Style sheets
are very useful as they help web developers create uniform (or consistent) presentation of web
pages.
Syntax
Syntax basically refers to the rules a computer language uses to
perform a task. Without syntax, a computer language would not
be functional or useful at all. HTML syntax dictates what and how
a web page will display.
Syntax error
A syntax error basically refers to a situation in which the rules (or
a rule) of the computer language are (is) broken. In HTML,
depending on the syntax error you produce, the web page may
look completely different than what you had intended.
Tags
The HTML code that controls the appearance of an HTML
document's content.
Transitional (used at the top of a web page to specify HTML
version)
A document defined as transitional may include deprecated
elements and all the new HTML elements. However, the document
cannot contain frames.
Uploading
Think of uploading as just opposite of downloading. While
uploading simply means moving/sending files to the server,
downloading means getting/receiving files from the server.
World Wide Web Consortium (W3C)
An organization consisting of representatives from member
companies and responsible for making rules for the World Wide
Web.

Page | 116