Module 1 : Fundamentals of World Wide Web and HTML

Internet: Internet is a world-wide global system of interconnected computer networks, the

information superhighway. Advantages - Communication, Information retrieval through search
engines, open AIs etc., Entertainment,E-commerce etc. Disadvantages - Threat to personal
information, Spamming, Virus, Cyber Crime, etc.

****
Internet Protocol Address: IP address is a numerical label assigned to each device connected to the
computer network. The IP address space is managed globally by the Internet Assigned Numbers
Authority (IANA), and by five regional Internet registries (RIR).

Domain Names: An internet domain is a human-readable address used to identify a specific location
or resource on the internet. Internet domains are structured hierarchically, separated by dots. The
structure includes:

i) Top-Level Domain (TLD): This is the rightmost part of a domain name, such as .com, .org, .net, .edu,
and so on. TLDs can be generic (gTLDs) or country-code specific (ccTLDs).
ii) Subdomain: Subdomains are optional and can precede the SLD. For example, in
"blog.example.com," "blog" is a subdomain of "example.com."

There are only a limited number of TLDs. For example:

o gov - Government agencies o com - commercial business
o edu - Educational institutions o net - Network organizations
o org - Organizations (nonprofit) o ca - Canada
o mil - Military o th – Thailand

Domain Name Server (DNS): DNS or simply name servers are used to convert domain name to an IP
address. Name servers, maintain a database of the domain names and corresponding ip addresses. All
document requests are routed to the nearest name server to generate the corresponding IP address.

World Wide Web: The World Wide Web came into being in 1991 by Tim Berners-Lee. It includes all
the resources and users on the Internet that are using the Hypertext Transfer Protocol (HTTP). It is
the way of exchanging information between computers on the Internet.
Differentiate World Wide Web and Internet: Web uses internet to pass over the information. The
most widely used part of the Internet is the World Wide Web.

# Internet WWW
1 The networking infrastructure. The way of accessing information through the
internet.
5152 A Web Programming – Module 1 Page 1 of 11
2 Includes various hardware elements It consists of information resources in different
such as computers, switches, routers, forms such as documents, videos, images etc.
cables etc.
3 It uses Internet protocol, IP It uses http protocol for information accessing
4 It is the information superhighway It is the information
5 Introduced by the US Department of Tim Berners Lee introduced the concept of www
Defence in 1969, named ARPANet. in 1989.
Web Browser: It is a fundamental tool for navigating the internet and interacting with web resources.
The most common protocol used in web browsers is the Hypertext Transfer Protocol (HTTP) . Some of
the most familiar web browsers are the following.

Browser Vendor
Internet Explorer Microsoft
Google Chrome Google
Netscape Navigator Netscape
Opera Opera Software
Safari Apple
Web Servers: Web servers are software/hardware that provide documents and resources to the
requesting browsers. Servers are slave programs as they act only when requests are made to them by
client browsers. Web Server Examples: Microsoft’s Internet Information Server (IIS), Apache Web
Server, nginx, Google’s Web Server (GWS), Node.js, Tomcat etc.

The functions of web servers are as follows:

1. Web servers monitor a communications port on its host machine.
2. Accept HTTP commands through that port.
3. Perform the operations specified by the commands.

Search Engines: Search engines are platforms that allow web users to search for information on the
internet. When a user enters a query into a search engine, it returns a list of relevant results based on
its index and algorithms. Some of the most well-known search engines are Google, Yahoo, bing, AOL,
Baidu etc.

URL (Uniform Resource Locator): Every document on the Web has a unique address, known
as Uniform Resource Locator (URL). Example : https://www.keralapsc.gov.in/index.htm
There are three key parts in a URL: i) the scheme, ii) the host address, and iii) the file path.

i) The scheme identifies the type of protocol. Example: http://, https://, ftp://, smtp:// etc.
ii) The Host Address : Specifies where a website can be found, either the IP address or more
commonly the domain name of a site such as www.keralapsc.gov.in.
iii) The File Path : Specifies the relative path of the document from the root directory.

Example: https://www.keralapsc.gov.in/html/index.htm Here scheme is https, Host address is

www.keralapsc.gov.in and the file path is /html/index.htm.

URLs can be classified into two types:

● Absolute - An absolute URL is the complete address of a resource. For example https://
www.keralapsc.gov.in /html/html_text_links.htm

5152 A Web Programming – Module 1 Page 2 of 11

 ● Relative - A relative URL indicates where the resource is in relation to the current page. Given
URL is added with the <base> element to form a complete URL. For example
/html/html_text_links.htm

1.1.6 HyperText Transfer Protocol (HTTP): HTTP is the underlying protocol used by the World Wide
Web and it defines how messages are formatted and transmitted, and what actions Web
servers and browsers should take in response to various commands. HTTP consists of two phases: the
request phase and the response phase.

HTTP Methods:

HTTP Methods GET vs POST:

GET - Requests data from a specified resource
POST - Submits data to be processed to a specified resource

Property GET Method Post Method

BACK button/Reload Harmless Data will be re-submitted

Bookmarked Can be bookmarked Cannot be bookmarked

Cached Can be cached Not cached

History Parameters remain in browser Parameters are not saved in browser

history history

Restrictions on data Yes, the length of a URL is limited No restrictions

length to 2048 characters.

Restrictions on data Only ASCII characters allowed No restrictions. Binary data is also
type allowed

Security Less secure as data sent is part of A little safer than GET.
the URL.

Visibility Data is visible to everyone in the Data is not displayed in the URL
URL

Parameter Passing The query string (name/value The query string (name/value pairs) is
pairs) is sent in the URL of a GET sent in the HTTP message body of a POST
request. request:

5152 A Web Programming – Module 1 Page 3 of 11

 Ex:test/demo_form.php?name1=v Ex: POST /test/demo_form.php HTTP/1.1
alue1&name2=value2 Host: w3schools.com
name1=value1&name2=value2

1.1.8 Format of a HTML Page: Designing an HTML Page consists of definition of the following basic
components of the page

Document declaration tag

<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>

HTML elements: An HTML element represents some kind of structure or semantics in a web page.
Tags are used to create different types of elements in html. An html element consists of a start tag,
content, and an end tag. The following is a paragraph element: Ex: <p> This is the content of the
paragraph element. </p>

HTML tags: Tags are used to mark the start and end of an HTML element. A start tag consists of an
opening angle bracket (<) followed by the element name, zero or more space separated
attribute/value pairs, and a closing angle bracket (/>).

HTML attributes: An attribute defines a property of an element, consists of an attribute/value pair,

and appears within the element's start tag.
Example : <img src="foobar.gif" alt="A foo can be balanced on a bar by placing its fubar on the bar's foobar.">
Element: Image Tags: <img> Attributes: src, alt.
HTML Basic Tags
a. Heading Tags: In HTML, six different size headings are defined as <h1>,<h2>,<h3>,<h4>,<h5> and <h6>..
Each HTML heading has a default size. However the size for any heading can be specified with the style
attribute: <h1 style="font-size:60px;">Heading 1</h1>.

Examples

<h1>Heading 1</h1>

<h2>Heading 2</h2>
Heading 1
<h3>Heading 3</h3>
Heading 2
Heading 3
<h4>Heading 4</h4>
Heading 4
<h5>Heading 5</h5>
Heading 5
<h6>Heading 6</h6> Heading 6

5152 A Web Programming – Module 1 Page 4 of 11

b. Paragraph Tag: The <p> tag defines a paragraph. A paragraph is marked up as follows:
<p>This is some text in a paragraph.</p>
Attributes supported for paragraph tag
Attribute Value Description
align left Not supported in HTML5.
right Specifies the alignment of the text within a paragraph
center
justify

c. Formatting tags: Formatting tags were designed to display special types of texts in web pages

Sl Tag Meaning Example Output

1 <b> Bold text <b>This text is bold</b> This text is bold

2 <strong> Important <strong>This text is This text is strong

text strong</strong>
3 <i> <i>This text is italic</i> This text is italic
Italic text
4 <em> Emphasi <em>This text is This text is emphasized
zed text emphasized</em>
5 <mark> <h2>HTML <mark>Marked</m
Marked ark> Formatting</h2>
HTML Marked Form
text
atting
6 <small> <h2>HTML <small>Small</sma
Small ll> Formatting</h2>
HTML Small Formatti
text
ng
7 <del> Deleted <p>My favorite color My favorite color
text is <del>blue</del> red.</p> is blue red.
8 <ins> - <p>My My favorite is red.
Inserted
favorite <ins>color</ins> is
text
red.</p>
9 <sub> - <p>This This is subscripted text.
Subscript
is _subscripted tex
text
t.</p>
10 <sup> - Superscri This This is superscripted text.
pt text is ^{superscripted}

1.1.11 HTML Lists: Lists are used in a web page to group together related pieces of information. HTML
supports three ways for specifying lists of information.

a) Unordered Lists (<ul>..</ul>)

b) Ordered Lists (<ol>..</ol>)
c) Definition Lists(<dl>..</dl>)
a) Unordered Lists: An unordered list is a collection of related items that have no special order or
sequence. This list is created by using HTML <ul> tag. The list elements are specified with the <li>....</li>
tag. Each item in the list is marked with a bullet character.

5152 A Web Programming – Module 1 Page 5 of 11

The format of unordered list is as follows
<ul>
<li>.........</li>
<li>.........</li>
</ul>
The bullet can be specified with the type attribute in <ul> tag. The possible bullet types are
<ul type = "square"> - Square type of Bullet
<ul type = "disc"> - Disc type Bullet
<ul type = "circle"> - Circle type Bullet
Example: <ul type = "square">
▪ Beetroot
<li>Beetroot</li>
<li>Ginger</li> ▪ Ginger
<li>Potato</li>
<li>Radish</li> ▪ Potato
</ul> ▪ Radish

Output
b) Ordered Lists: If it is required to put the items in a numbered list instead of bulleted, then an HTML
ordered list will be used. This list is created by using <ol> tag. The format of ordered list is as follows
<ol>
<li>.........</li>
<li>.........</li>
</ol> By default, the numbering starts at one and is incremented by one for each
successive ordered list element tagged with <li>.
The type attribute can be used in ordered list <ol> tag to specify the type of numbering to be used.
By default, it will be a number. Following are the possible options −
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
The start attribute can be used in ordered list <ol> tag to specify the starting point of numbering
neede. Following are some options −
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.
Example
<ol type = "i" start = "4">
<li>Beetroot</li> Output
<li>Ginger</li> Beetroot
<li>Potato</li> Ginger
<li>Radish</li>
</ol> Potato
Radis

5152 A Web Programming – Module 1 Page 6 of 11

c) Definition Lists: Definition lists are used to list like in a dictionary or encyclopedia. The definition
list is the ideal way to present a glossary, list of terms, or other name/value list. Definition List makes
use of the following three tags.
<dl> − Defines the start of the list
<dt> − A term
<dd> − Term definition
</dl> − Defines the end of the list
Example: Output
<dl>
<dt><b>HTML</b></dt> HTML
<dd>This stands for Hyper Text Markup This stands for Hyper Text Markup
Language</dd>
<dt><b>HTTP</b></dt>
Language
<dd>This stands for Hyper Text Transfer HTTP
Protocol</dd> This stands for Hyper Text Transfer
</dl> Protocol

1.1.12 Hyperlink and Anchor Tag: These are used for navigation to other pages or to specific parts of
a given page. Hyperlinks can be created using text or images available on a webpage.
Linking Documents: A link is specified using HTML tag <a>, called anchor tag. Anything between the
opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to
reach the linked document. Following is the simple syntax to use <a> tag.
<a href = "Document URL" ... attributes-list>Link Text</a>
The target Attribute can be used to specify the location where the linked document is to be opened.
Following are the possible options −

Sr.No Option & Description

1
_blank 🡪Opens the linked document in a new window or tab.

2
_self 🡪 Opens the linked document in the same frame.

3
_parent 🡪 Opens the linked document in the parent frame.

Examples
<p>Click any of the following links</p>
<a href = "/html/index.htm" target = "_blank">Opens in New</a>
<a href = "/html/index.htm" target = "_self">Opens in Self</a>
<a href = "/html/index.htm" target = "_parent">Opens in Parent</a>
<a href = "/html/index.htm" target = "_top">Opens in Body</a>

1.1.13 Table Tags: The HTML <table> tag is used to define a table. Each table row is defined with
the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and
centred. A table data/cell is defined with the <td> tag. The <td> elements are the data containers of
the table. They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
HTML Tables - Specific Attributes
The HTML <table> tag also supports the following additional attributes.

5152 A Web Programming – Module 1 Page 7 of 11

 Attribute Value Description

align right/left/center/ Visual alignment.

justify/char

bgcolor rgb(x,x,x) Specifies the background color of the table.

#hexcode
colorname

border pixels Specifies the border width. A value of "0" means no border.

cellpadding pixels or % pecifies the space between the cell borders and their
contents.

cellspacing pixels or % Specifies the space between cells.

width pixels or % Specifies the width of the table.

colspan #cells colspan stands for "column span", to merge two or more
adjacent table cells into a single cell that spans across
multiple columns.

rowspan #cells rowspan stands for "row span", to merge two or more
adjacent table cells into a single cell that spans across
multiple rows.

Example <td>94</td> </tr>

<table style="width:100%" border=1> </table>
<tr> Output
<th>Firstname</th> Firstname Lastname Age
<th>Lastname</th> Jill Smith 50
<th>Age</th> </tr> Eve Jackson 94
<tr> John Doe 80
<td>Jill</td>
<td>Smith</td>
<td>50</td> </tr>
<tr> <td>Eve</td>
<td>Jackson</td>

1.1.14 Frames and I-Frames

Frames: HTML frames are used to divide the browser window into multiple sections where each
section can load a separate HTML document. A collection of frames in the browser window is known
as a frameset. The window is divided into frames in a similar way the tables are organized: into rows
and columns.
To use frames on a page, use <frameset> tag instead of <body> tag. The <frameset> tag defines, how
to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames
and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which
HTML document shall open into the frame. The <frame> tag is deprecated in HTML5.
Example 1:

5152 A Web Programming – Module 1 Page 8 of 11

 <frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
Example 2:
<frameset cols = "25%,50%,25%">
<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
The <frameset> Tag Attributes

Attribute Description

cols : Specifies how many columns are contained in the frameset and the size of each column.
The width of each column can be specified in many ways.
i) Absolute values in pixels. To create three vertical frames, use cols = "100, 500, 100".
1 ii) A percentage of the browser window. To create three vertical frames, use cols = "10%,
80%, 10%".
iii) Using a wildcard symbol. To create three vertical frames, use cols = "10%, *, 10%". In this
case wildcard takes remainder of the window.

rows : It is used to specify the rows in the frameset. For example, to create two horizontal
2
frames, use rows = "10%, 90%".

border : This attribute specifies the width of the border of each frame in pixels. For example,
3
border = "5". A value of zero means no border.

The <frame> Tag Attributes

Following are the important attributes of <frame> tag –
Attribute Description

src Specifies the file name that should be loaded in the frame. Its value can be any URL. For example,
src = "/html/top_frame.htm" will load an HTML file available in html directory.

name Used to give a name to the frame. It is used to indicate which frame a document should be
loaded into.

Frame This attribute specifies whether or not the borders of that frame are shown; and this can take
border values either 1 (yes) or 0 (no).

noresize The noresize attribute prevents a user from being able to resize the frame.
For example noresize = "noresize".
scrolling This attribute controls the appearance of the scrollbars that appear on the frame. This takes
values either "yes", "no" or "auto". scrolling = "no" means, no scroll bars.

5152 A Web Programming – Module 1 Page 9 of 11

⮚ i-frames: An inline frame can be defined with <iframe> html tag . The <iframe> tag defines a
rectangular region within the document in which the browser can display a separate document,
including scrollbars and borders. An inline frame is used to embed another document within the
current HTML document. The src attribute is used to specify the URL of the document that occupies
the inline frame.
<iframe src = "/html/menu.htm" width = "555" height = "200">
</iframe>

Embedding multimedia in web pages: Embedding multimedia content in web pages is a common
practice to enhance the user experience and provide various types of media, such as images, audio,
video, and interactive elements. MIME (Multipurpose Internet Mail Extension) formats are used to
support multimedia in web contents. Here are some ways to embed multimedia in web pages:
a) Image: <img src="image.jpg" alt="Description of the image">
b) Audio: <audio src="audio.mp3" controls></audio>
c) Video: <video src="video.mp4" controls></video>
d) Youtube videos:
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0" allowfullscreen></iframe>

*****
Form Tag: HTML Forms are needed to collect input data from the site visitor and to post it to a
back-end server side application such as ASP or PHP script. The back-end application will perform
required processing at the server side according to the written script. There are various form
elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form and it has following syntax −
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>
Form Attributes
Attribute Description
Action Backend script ready to process your passed data.
method Method to be used to upload data. The most frequently used are GET and POST
methods.
target Specify the target window or frame where the result of the script will be displayed.
It takes values like _blank, _self, _parent etc.
enctype Used to specify how the browser encodes the data before it sends it to the server.

1.1.17 Control Tags in HTML Forms

There are different types of form controls that you can use to collect data using HTML form −

1) Text Input Controls 5) File Select boxes

2) Checkboxes Controls 6) Hidden Controls
3) Radio Box Controls 7) Clickable Buttons
4) Select Box Controls 8) Submit and Reset Button
1) Text Input Controls
a) Single-line text input controls − One line of user input, such as search boxes or names.
<input type=”text” name=”name1” id=”id_name” /> .
5152 A Web Programming – Module 1 Page 10 of 11
 b) Password input controls − A single-line text input but it masks the characters entered.
<input type = "password" name = "password" id=”id_name” />.
c) Multi-line text input controls −Multi-line input controls are created using
HTML <textarea> tag.

Ex. <textarea rows = "5" cols = "50" name = "description">

Enter description here...
</textarea>
2) Checkbox Control: Checkboxes are used when more than one option is required to be selected.
They are also created using HTML <input> tag but type attribute is set to checkbox..
<input type = "checkbox" name = "maths" value = "on" checked> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics

3) Radio Button Control: Radio buttons are used when out of many options, just one option is
required to be selected. They are also created using HTML <input> tag but type attribute is set
to radio.

Example : <input type = "radio" name = "subject" value = "maths"> Maths

<input type = "radio" name = "subject" value = "physics"> Physics
4) Select Box Control: A select box, also called drop down box which provides option to list down
various options in the form of drop down list, from where a user can select one or more options.
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
5) File Upload Box: It is used to select a file from the client to upload. Also known as a file select box.
Syntax: <input type = "file" name = "fileupload" accept = "image/*" />
6) Button Controls: There are various ways in HTML to create clickable buttons. You can also create a
clickable button using <input>tag by setting its type attribute to button. The type attribute can take
the following values −
Type Description
Submit This creates a button that automatically submits a form.
reset This creates a button that automatically resets form controls to their initial values.
button This creates a button that is used to trigger a client-side script when the user clicks that
button.
image This creates a clickable button but we can use an image as background of the button.

<input type = "submit" name = "submit" value = "Submit" />

<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
7) Hidden Form Controls: This control hides inside the code and does not appear on the actual page.
For example, the following hidden form is being used to keep the current page number.
<input type = "hidden" name = "pagename" value = "10" />

*****

5152 A Web Programming – Module 1 Page 11 of 11