117

WEB DEVELOPMENT
Unit
6
 118

SLOs Ÿ Recall the understanding of basic terms related to

web development
Ÿ Dene different terms
Ÿ Identify and compare different types of websites
Ÿ Compare various types of websites

6.1 BASIC TERMINOLOGY OF WEB DEVELOPMENT

6.1
Development of web sites and online applications is called web
development. This is done by coding in different languages and by using
several web development tools and frameworks. A complete web
application may consist of a User Interface, Back-End Server Codes and a
Database.

6.1.1 Denition of Terms

(i) World Wide Web (WWW)

The word world wide web (www) is commonly known as the web. The
Web is a collection of computers connected through a network to provide
publicly accessible information.

(ii) Web Page

A webpage is a document commonly written in HTML that is

accessible through internet by using internet browser.

(iii) Website

A website is a collection of web pages containing text, images, and

all types of multimedia related to a specic set of information. A website
can be accessed through a Uniform Resource Locator (URL).

Teachers are encouraged to give additional information.

Teacher
Note For example, how web hosting is availed. How web
servers work. Videos can be used to explain such
concepts.
 119

(iv) Web Browser

A web browser is a software application for accessing websites on

the world wide web. Most common web browsers include Microsoft
Internet Explorer, Google Chrome, Mozilla Firefox, and Safari.

v) Uniform Resource Locator (URL)

It is the address of a resource on the internet (e.g.

[Link] It includes the following two components.
· The protocol used to access the resource ([Link]
· The location of the server. ([Link])

(vi) Search Engine

A Search Engine is a web-based tool that enables a user to locate

information on the web. Most popular search engines are Google, Yahoo,
and Bing.

(vii) Home Page

A home page (also known as landing page) is a web page that serves
as the starting point of the website.

(vii) Web Hosting

Web Hosting is a service that allows a web developer to make a

website publicly accessible through the internet.

(viii) Web Server

A web server is the computer that is responsible for serving a

website and all of its content including text and media to a user.

6.1.2 Types Of Website

Portal: A web portal is a website that provides a single access point of

information for all of its users. It collects information from different
sources like emails, forums, search engines and presents it to the user in a
uniform way. Yahoo and MSN are common examples of web portal.
 120

News: A news website is the modern-day alternative for newspapers. Such

websites contain everyday information related to current affairs, sports,
politics, weather, health, technology, entertainment, etc.

Informational: Informational websites provide detailed information of

any eld. There are many dedicated informational websites for science,
arts, sports, online trainings, research, etc.

Educational: Educational websites are purely designed to deliver

educational material for both, teachers and students such as [Link],
khan [Link], etc.

Personal: A person can share about his or her biography or achievements

in a custom developed website.

Business: A business website is the best way for any organization to

market their products and services. It also tells about the teams, policies
and procedures of that business. For instance, [Link] is the
website of Pakistan Stock Exchange.

Blogs: A blog is a special type of website that is composed of articles and

posts. These articles are organized into categories and sorted by the time
when they were published. Wordpress is a popular blog site.

Forums: A forum is an online place where different users can discuss

about any topic. These topics can be categorized so that users can easily
locate topics of their interest.

Entertainment: An entertainment website serves content like videos or

games purely for the purpose of entertainment. Youtube is widely used for
entertainment.

Social: Social website is a platform where different people get together and
socialize with each other. They can also share their ideas, opinions and
media. Facebook and Twitter are instances of social networking websites.
Teacher
Note Teachers should demonstrate several websites to
familiarize students with different types of websites.
 121

SLOs Ÿ Develop the understanding about HTML

Ÿ Apply the various steps involved in creating a web page
Ÿ Develop understanding about HTML tags
Ÿ Recognize the basic structure of an HTML document

6.2 INTRODUCTION TO HTML

6.2
HTML stands for Hypertext Markup Language. HTML is used to
create web pages that are displayed by web browsers mainly on internet.
6.2.1 Hypertext Markup Language (HTML)
It is standard markup language for text documents. It allows the
user to create structured content by adding headings, paragraphs, links,
blockquotes and other media. It takes advantage of simple code
structures called tags and attributes to achieve formatting, graphic and
navigation effects on web pages.
6.2.2 Steps Involved In Creating Web Page In HTML
Creating a simple web page using HTML is very easy. It requires a
text editor, a le with .html extension and a web browser to view that page.
Step 1: Text Editor
Start by simply creating a new blank le in a text editor of your
choice. A simple text editor like notepad can be used to start coding HTML
for a web page.
Step 2: Write HTML code in Text Editor
Example:
<html>
<head>
<title>My Website</title>
</head>
<body>
Welcome to my first web page.
</body>
</html>
 122

Step 3: Save HTML Page

Go to File menu and click on Save. Make sure to provide .htm or

.html extension for the le being saved. This will save the document as a
web page instead of a plain text le.

Step 4: View HTML Page in Browser

Open the saved HTML le in your default web browser. The web
browser will automatically translate HTML codes to correctly display the
web page.

6.2.3 HTML Tags

HTML elements are the building blocks of HTML pages. These

elements are dened by placing HTML tags in our document. These tags
are placed inside angular brackets (<>). Some tags also allow further
customization by adding attributes to them. An HTML tag has the
following structure:

Simple Tag: <tag-name>content</tag-name>

Tag with Attribute: <tag-name attribute-name= “attribute

value”>content</tag-name>

The above syntaxes show the structure of opening a tag, dening

attribute values, placing content inside the element represented by that
tag and its closing structure. Most of HTML tags always require a closing
tag while some HTML tags such as <br> are empty tags which means that
they don't require a closing tag.
 123

Ÿ Use Title and Footer tags for inserting title and footer
in a web page
SLOs Ÿ Compose a paragraph in a webpage
Ÿ Use line break for starting the text from new line
Ÿ Use different text formatting tags like bold, italic,
underline, etc.
Ÿ Apply Pre-tag for preserving both spaces and line
breaks
Ÿ Change text color, face
Ÿ Align the portion of text in center of web page
Ÿ Write subscript and superscript text in a web page

6.3
6.3 DESIGNING AND FORMATTING
Some HTML tags introduce content directly into the web page while
others enhance the design and format of that content. Some most
commonly used HTML tags which change the looks of the web page are
explained here.

Tag Description
It species the HTML version used so the web
<!DOCTYPE browsers can show the web page according to HTML
html> standards. All HTML documents must start with this
tag.
All HTML documents start with <html> tag and end
<html>
with </html> tag.
It is used to dene additional information about the
<head> web page. It contains a set of tags such as <title>,
<meta> , <style>,<script>, etc.
The main content of the web page is contained
<body>
between <body> and </body> .
6.3.1 Titles and Footers
Tag Description
It denes the title of a web page. Titles are very
<title> important as they appear on top of the browser
window and displayed on search engine result pages.
It denes the footer for a web page. e.g. “Copyright
<footer>
2020. All rights reserved.”
 124

6.3.2 Paragraphs and Line Breaks

Tag Description
It denes a paragraph of text in a webpage. It always
<p> starts from a new line and adds space before and
after its text.
It denes a line break and starts the following
<br> content from a new line. Unlike <p> tag, it does not
add space before or after the break.
It draws a horizontal line where it is dened. It is
<hr>
used to differentiate between sections of the page.

6.3.3 Headings
Tag Description
It is used to dene six levels of HTML headings (h1,
<h1> - <h6> h2, h3, h4, h5 and h6) with <h1> being heaviest
heading and <h6> being the lightest heading.

6.3.4 Text Formatting

Tag Description
<b>, <i>, These tags are used to bold, italicize and underline
<u> text respectively.
It is used to dene a preformatted text. The web
<pre> browser displays such text with spaces and line
breaks as dened in HTML codes.
It is used to dene the font, size and color of its text.
This tag can be composed with three attributes: size,
<font>
color and face. This tag is supported till version 4.1
of HTML.
It is used to align its text to the horizontal center of
<center> the web page. This tag is supported till version 4.1 of
HTML.
It denes subscript text which is under the baseline
<sub>
of other text and has a smaller size. e.g. H2O
It denes superscript text which is slightly above the
<sup> normal line of other text and has a smaller size. e.g.
E=mc2
 125

Example:
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Evolution of Computer</h1>
<p>The computers which we see today are modern shape of com
puters which has been evolved in centuries. The evolution of comput
ers is generally divided in three eras.</p>
Output:
<h2>Mechanical Era (Dark Age)</h2>
<p>
Men has been trying to invent machines that can solve
athematical problems. In mechanical era, human became successful to
make simple machine that can help performing simple arithmetic ope
ration, in other words computing. These machines were manually oper
ated since the electricity was not invented.
<br>
<b>Some of the important machine of this era are: </b>
<br>
<i>Abacus, Napier's bones (1612 AD), Slide Rule (1622 A
D), etc.</i>
</p>
TG </body>
</html> with their attributes

Output:

Teacher Teachers should demonstrate practical application of

Note common tags with their attributes
 126

SLOs Ÿ Differentiate among unordered list, ordered list,

denition list and nested list
Ÿ Create unordered, ordered, denition and nested
lists

6.4 CREATING LISTS

6.4
Lists are very useful in displaying point by point information such
as to-do list, list of ingredients for a recipe, list of categories, etc. HTML
provides three different types of list elements namely Unordered Lists,
Ordered Lists and Description Lists. The web browsers automatically add
indents, spaces and markers to HTML lists.

6.4.1 Unordered List

An unordered list is a list of related items in which the order of items

is irrelevant. It is dened by <ul> tag and each of its list item is dened by
<li> tag. The web browser will display these list items as bullet points.

Example: Output:

<h5>Commonly used components of

Microsoft Of fice </h5>
<ul>
<li>Word</li>
<li>Excel</li>
<li>PowerPoint</li>
<li>Access</li>
</ul>

6.4.2 Ordered List

An ordered list also displays a list of related items. It is used where

the order of the list is important e.g. names of students in order of their
exam ranks. It is dened by <ol> tag and each of its list item is dened by
<li>. The web browser will display these list items with numbers starting
from 1 instead of bullet points.
 127

Ordered lists can also be dened with two of its attributes: start and
reversed. Start attribute denes the starting number of rst list item.
Reversed attribute is used to display the list in descending order.

The list items for ordered list can also be dened with a value
attribute which is used to place that item at a specic position or number
in the list.

Example: Output:

<h5>Steps to create HTML file </

h5>
<ol>
<li>Text Editor</li>
<li>New File</li>
<li>HTML codes</li>
<li>Save as .html</li>
</ul>

6.4.3 Description List

Description lists are used to display different terms and their

descriptions just like in a dictionary or glossary. It is dened by <dl> tag
and each of its list items is composed of two elements: term and
description.

Term is dened by <dt> tag and its description is dened by <dd>

tag. In description lists, a term can have one or more descriptions and a
description can have one or more terms.

Example:

<dl>
<dt>Operating System</dt>
<dd>An Operating System is software which performs all the basic
tasks like boots the computer, file management, memory management,
process management, and controlling peripheral devices such as hard
Teacher
disk, printer, etc.</dd>
Note
</dl>
 128

Output:

6.4.4 Nested Lists

A very powerful feature of HTML lists is their ability to nest one into
another. Any of the list type can contain any other list type as its list item.
It is dened by placing the new list tag inside the <li> tag of previous list.
Web browsers automatically indent nested lists and assign appropriate
marker to those nested list items as well.

Example: Output:

<h5>Guided Media</h5>
<ul>
<li>Twisted Pair Cable
<ul>
<li>Unshielded Twisted Pair</li>
<li>Shielded Twisted Pair</li>
</ul>
</li>
<li>Coaxial Cable</li>
<li>Fiber Optical Cable</li>
</ul>

Teacher Teachers are supposed to demonstrate use of various

Note
attributes of list elements.
 129

SLOs Ÿ Add an Image to a web page

Ÿ Apply Border to an Image in a web page
Ÿ Specify width and height of an Image
Ÿ Specify an alternate text for the image
Ÿ Apply background color to a web page
Ÿ Use and image as a background of web page

6.5
6.5 IMAGE AND BACKGROUND

Images and backgrounds give a visual appeal to the websites.

Sometimes images can present a better understanding than long and
uninteresting texts.

6.5.1 Images

Images can be inserted in an HTML document by using <img> tag.

This does not create a copy of image. Instead, it only creates a reference to
original image placed somewhere in the computer's storage.

The <img> tag is an empty tag which means that it does not require a
closing </img> tag. It contains ve attributes out of which two are required
and three are optional.

6.5.2 Attributes of Image Tag

Attribute Value Description

src URL Denes the source or reference of the image le.
Syntax: <img src=“[Link]”>
alt text Denes alternate text for the image.
Syntax:<img src=“[Link]” alt=“Introduction”>
width pixels Denes the display width of the image.
Syntax: <img src=“[Link]” width=“300”>
height pixels Denes the display height of the image.
Syntax: <img src=“[Link]” height=“120”>
border pixels Denes the width of the border to be displayed
around the image. (This attribute is supported till
version 4.1 of HTML).
Syntax: <img src=“[Link]” border=“ 2”>
 130

Example:
<img src="[Link]" alt="Bridge" width="600">

Output:

6.5.3 Backgrounds
The web browsers display an HTML document with white
background by default. However, this can easily be changed to a different
color or even an image with the help of bgcolor and background attributes
of the <body> tag.
bgcolor: This attribute is used to change the color of the entire
web page. Its color value can be dened as RGB code, hexadecimal
code or by color name.
For instance, to set the background color of the web page to green
we can use any one of these values: rgb(0,255,0) : #00FF00 :
green
e.g. <body bgcolor=“green”>
background: This attribute is used to display an image as the
background of the web page. Its value will be the reference or URL
of the background image.
e.g. <body background=“[Link]”>
Both of these attributes are supported till version 4.1 of HTML.
 131

SLOs Ÿ Dene a hyperlink

Ÿ Create a hyperlink to an external web page or
within the same web page
Ÿ Develop the understanding about anchor tag
Ÿ Use different attributes of anchor tag

6.6 HYPERLINKS
6.6

Hyperlinks allow a user to navigate from one web page to another. It

also enables users to navigate to different sections within the same web
page. Hyperlinks convert text or other media into clickable objects.

6.6.1 Denition

A hyperlink in HTML is dened by <a> tag and its href attribute.

The value of href is the reference of another web page or a different section
within the same page.
Ÿ Links to external document: To send a user to any other web page, use
the URL of that page as the value for href attribute.
e.g.<a href=“[Link] Google</a>
Ÿ Links within the same document: Setting the link within the same page
requires two steps:
1. Use id attribute of any HTML tag to give a name to the section of the
page, where a user should reach after clicking on the link.
2. Create a hyperlink and set the above name as href attribute of this
link, starting with hash (#) symbol.
e.g. <p id=“navigate”>Send user here on click</p>
<a href=“#navigate”>Go to the linked paragraph</a>

Attribute Value Description

Species the URL or section id of the
href URL
page the link goes to.
Species the name of an anchor. This
name Section Name attribute works till version 4.1 of HTML.
_blank :
_parent : _self : Species where to open the linked
target
_top : document.
framename
 132

Ÿ Dene term table

Ÿ Differentiate between rows and columns
Ÿ Differentiate between table heading and table
data tags
SLOs Ÿ Create a table in a web page
Ÿ Change horizontal and vertical alignment of cell
contents
Ÿ Set the width of contents to specic number of pixels or
percentage
Ÿ Draw a border around the table
Ÿ Control the distance between data in a cell using cell
padding attribute
Ÿ Control space between adjacent cells using cells pacing
attribute
Ÿ Create data cells that span given number of rows or
column using colspan and rowspan attributes

6.7
6.7 TABLES
Tables allow displaying the content (like text, image, links) in the
form of rows and columns. The coordinating place of a row with a column
is called a cell. These cells contain some content of the webpage. In HTML,
a table is dened by <table> tag.
6.7.1 Rows and Columns
A row is the collection of all horizontal cells of a table. A table can
contain any number of rows. All the rows in a table have an equal number
of cells. It is dened by <tr> tag which is placed inside the <table> tag.
A column is the collection of all vertical cells of a table. A table can contain
any number of columns as well. It is dened by <td> tag which is placed
inside the <tr> row tag.
6.7.2 Table Heading

HTML table allows dening a header for the columns of our table. A
header cell is dened by <th> tag and is placed inside a <tr> row tag. It is
used to differentiate from the content placed inside normal <td> data
cells. To make the entire header row stand out from rest of the table
contents, dened <th> tags for all columns of the rst <tr> row tag of any
<table> tag.
 133

6.7.3 Table Data

The content is placed inside a cell in a table by using <td> table data
tag. A cell can contain any type of data such as text, image, media, link,
etc.

6.7.4 Table Attributes:

Attribute Value Description

left :
Species the alignment of a table
align center :
according to surrounding text.
right
width pixels : % Species the width of a table.
Enables or disables the border around the
border 1 or 0
table.
Species the space between the edge of
cellpadding pixels
cell and the content inside.
cellspacing pixels Species the space between cells.
All the above attributes are supported till version 4.1 of HTML.

6.7.5 Cell Attributes:

Attribute Value Description

left :
Species the alignment of the content
align center :
inside the cell.
right
top :
middle :
valign Vertically aligns the content in a cell.
bottom :
baseline
Species the number of columns a cell
colspan number
should merge into.
Sets the number of rows a cell should
rowspan number
merge into.
All the above attributes are supported till version 4.1 of HTML.
 134

Example:
<h5>Minimum Requirements for Windows</h5>
<table width="100%" border="1" cellspacing="5" cellpadding="5">
<tr>
<th>Component</th>
<th>Requirement</th>
</tr>
<tr>
<td>Processor:</td>
<td>1GHz (Minimum 1 Gegahertz)</td>
</tr>
<tr>
<td>Memory:</td>
<td>1GB for 32-bit or 2GB for 64-bit</td>
</tr>
<tr>
<td>Storage:</td>
<td>32GB Free Space</td>
</tr>
<tr>
<td>Graphics Card:</td>
<td>DirectX 9 or later with WDDM 1.0 driver</td>
</tr>
<tr>
<td>Display:</td>
<td>800x600 resolution</td>
</tr>
</table>

Output:
 135

Ÿ Dene a frame
SLOs Ÿ Differentiate between a frame and a frameset
Ÿ Use rows and cols attributes of <frameset> tag to
divide the browser screen into rows and columns
Ÿ Use different attributes like src, marginheight,
marginwidth, name, noresize and scrolling of
<frame> tag

6.8 FRAMES
6.8
HTML frames are powerful elements which allow displaying the
contents of another HTML document within a web page. A web page can be
divided into multiple sections and each section can display all contents
from a different web page by using frames.

It is dened by <frame> tag. The src attribute is used to provide the

reference URL of another web page to be displayed in this frame.
Attribute Value Description
Denes the URL of the page which
src URL
should be displayed in the frame.
Denes top and bottom spaces of a
marginheight pixels
frame.
marginwidth pixels Denes left and right spaces of a frame.
Denes if the user can change the
noresize noresize
frame size or not.
yes : no : Denes if the scroll bar should be
scrolling
auto displayed within the frame or not.
HTML frames and framesets are supported till version 4.1 of HTML.
6.8.1 Framesets

Framesets dene how a web page is divided into rows and columns
to display multiple frames on that web page. It is dened by <frameset>
tag and contains one or more <frame> tags.
Attribute Value Description
Denes the number and the size of frame
cols pixels : %
columns.
Denes the number and the size of frame
rows pixels : %
rows.
 136

SLO Ÿ List out different website development tools.

6.9 WEB DESIGNING TOOLS

6.9

Following is the list of some of the tools that help in designing and
developing a website:

· Microsoft FrontPage
· Coral Draw
· Adobe Dreamweaver
· Wordpress
· Microsoft Visual Studio
· Wix
· Figma
· CoffeeCup HTML Editor
· Adobe XD
 137

SUMMARY

w WWW stands for world-wide web and is a way of accessing different

websites through internet.
w There are multiple aspects involved in using accessing information
through internet like Web Server, Web Hosting, Website and Web
Browser.
w URL stands for Uniform Resource Locator and is the format in which
external resources like web pages, images, other media and supporting
les are referenced.
w There are different types of specialized websites such as Portal, News,
Informational, Educational, Personal, Business, Blogs, Forums,
Entertainment and Social.
w HTML is the language in which web pages are coded.
w Any text editor can be used to create HTML les however there are
specialized editors also available.
w An HTML le must be of .htm or .html extension.
w A web browser is used to view HTML pages.
w The codes used in HTML are called tags and are denoted by angular
brackets (<>).
w There are various HTML tags. Some dene the appearance of the
content. Some carry actual content such as text, images, videos, etc.
Some provide additional information about the web pages.
w There are three kinds of HTML lists namely unordered list, ordered list
and description list.
w Unordered lists display the list of items in which the sequential order of
its items does not matter.
w Ordered lists display the items in numerically ordered sequence.
w Description Lists are less commonly used and are used to dene terms
and their descriptions such as in a dictionary.
w HTML lists can be nested into one another.
w HTML pages can make use of images to decorate and provide greater
meaning to their content.
 138

w Hyperlinks give the ability to any HTML object of being clickable.

Hyperlinks provide means of navigation from one page to another or
from one section in a page to another within the same page.
w HTML tables can be used to display data, information or content in a
tabular format. Tables organize the content into rows and columns.
w HTML Frames can be used to display the entire contents of another web
page within a web page.
w Framesets dene the layout to display different frames and their
contents.
w There are different tools available which facilitate the designing and
development of web pages and websites.

EXERCISE

A. Choose the right answer:

1. The service that is responsible for making websites publicly accessible

through the internet is called
a) Web Server b) Web Hosting
c) Web Site d) Web Browser

2. The type of special website where different users can ask questions and
give answers or discuss on various topics is called:
a) Social site b) Blogs site
c) Forums site d) Informational site

3. Entertainment site specializes in delivering:

a) News, weather and current affairs
b) Information about products and services of a business
c) Personal information of a particular person
d) Content like videos, images and games for entertainment
 139

4. A web browser will translate the codes in a web page if the extension of
the document is:
a) .html b) .txt
c) .doc d) .pdf

5. The tag used to automatically add line space before and after the
containing text is:
a) <br> b) <hr>
c) <p> d) <pre>

6. The type of list which shows its items in a numerically ordered

sequence is:
a) Nested List b) Unordered List
c) Ordered List d) Description List

7. To create a clickable text which navigates to another page or section,

we use:
a) <input> tag b) <li> tag
c) <b> tag d) <a> tag

8. To differentiate the heading cells from rest of the data in a table, we use:
a) <th> tag b) <tr> tag
c) <td> tag d) <dt> tag

9. The tag used to dene the title caption of the web browser is:
a) <thead> b) <head>
c) <title> d) <h1>

10. The attribute used to dene the URL for reference of image in <img>
tag is:
a) target b) name
c) src d) href
 140

B. Respond to the following:

1. Differentiate between web hosting and web server.

2. What are the steps involved in creating a complete website?
3. Differentiate between <head>, <title> and <h1> to <h6> tags.
4. Identify and explain some HTML tags used for formatting of the content.
5. Differentiate between ordered and unordered lists.
6. How are images displayed in an HTML page?
7. How can a user be redirected to another web page?
8. What kind of HTML elements are used to display data in rows and
columns? Discuss some of its formatting features.
9. Is it possible to display the entire contents of another web page in our
HTML page? How?
10. List some popular text editors and other tools which help in designing
and development of websites.

C. Match the columns.

[Link]. A [Link]. B C

Add navigation support

(i) E-Commerce (a)
to web pages
Organize information as
(ii) <head> (b)
list points

(iii) (c) Organize information in

<ul><ol><dl>
rows and columns
Contains additional
(iv) <tables> (d) information and styling
features of the web page
(v) <img> (e) Business website
Add images and
(vi) Hyperlinks (f) infographics to the
web page
 141

ACTIVITIES

Create three pages with following features:

Page 1 ([Link]):

Ÿ Name of the le should be [Link]

Ÿ Title of the page should be “Unit 6 – Activity – Home”
Ÿ Place a heading of “Input and Output Devices”
Ÿ Create an Unordered List with two items:
w Input Devices
w Output Devices
Ÿ Both of these items should be hyperlinks. Clicking on “Input Devices”
should navigate to another html page named “[Link]” and
clicking on “Output Devices” should navigate to page named
“[Link]”

Page 2 ([Link])

Ÿ Title of the page should be “Unit 6 – Activity – Input Devices”

Ÿ The page should display a table with two columns:
w Left column should contain names of different Input Devices
w Right column should contain images for those input devices. The
width of images should be set to 200 pixels.

Page 3 ([Link])

Ÿ Title of the page should be “Unit 6 – Activity – Output Devices”

Ÿ The page should display a table with two columns:
w Left column should contain names of different Output Devices
w Right column should contain images for those output devices.
The width of images should be set to 200 pixels.