Web Programming in NVQ 5 ICT

NVTI - Vantharumoolai

WEB PROGRAMMING
Web Technology

History of the Internet

The Internet was formed in 1968, when the Department
of Defense created the Advanced Research Projects
Agency (ARPA). This allowed government and
researchers to interact, and to work from any location
on the network.

In the 1980s, the Department of Defense assigned the

ARPA project to the National Science Foundation (NSF). The NSF
increased the number of supercomputers to five and added access to
more networks, expanding the range of sites for businesses,
universities, and government and military installations. The NSF
network (NSFnet), plus thousands of others make up what has
become the largest network of networks: the Internet.

Internet Applications or Services

The Internet is a worldwide collection of computer networks,
cooperating with each other to exchange data using a common
software standard. Through telephone wires and satellite links,
Internet users can share information in a variety of forms.

E-mail : E-mail (electronic mail) is the exchange of computer-

stored messages by telecommunication. E-mail was one of the
first uses of the Internet and is still the most popular use. A
large percentage of the total traffic over the Internet is e-mail.
Email can also be exchanged between online service provider

1
Web Programming in NVQ 5 ICT
NVTI - Vantharumoolai

users and in networks other than the Internet, both public and
private.

A popular protocol for sending e-mail is Simple Mail Transfer

Protocol (SMTP) and a popular protocol for receiving it is POP3.

FTP : File Transfer Protocol (FTP), a standard Internet protocol,

is the simplest way to exchange files between computers on
the Internet. FTP is commonly used to transfer Web page files
from their creator to the computer that acts as their server for
everyone on the Internet. It's also commonly used to download
programs and other files to your computer from other servers.

WWW : 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
content.

IRC : Internet Relay Chat (IRC) is a system for chatting that

involves a set of rules and conventions and client/server
software.

Video Conferencing : A videoconference is a live connection

between people in separate locations for the purpose of
communication, usually involving audio and often text as well
as video. At its simplest, videoconferencing provides
transmission of static images and text between two locations.
At its most sophisticated, it provides transmission of full-
motion video images and high-quality audio between multiple
locations.

2
Web Programming in NVQ 5 ICT
NVTI - Vantharumoolai

E-Commerce : E-commerce (electronic commerce or EC) is the

buying and selling of goods and services on the Internet,
especially the World Wide Web. In practice, this term and a
newer term, e-business, are often used interchangeably.

Telnet : Telnet is the way you can access someone else's

computer, assuming they have given you permission. (Such a
computer is frequently called a host computer.)

NNTP : NNTP (Network News Transfer Protocol) is the

predominant protocol used by computer clients and servers for
managing the notes posted on Usenet newsgroups.

History of the World Wide Web (WWW)

Researcher Tim Berners-Lee led the development of the original
World Wide Web in the late 1980s and early 1990s. He helped build
prototypes of the above Web technologies and coined the term
"WWW." Web sites and Web browsing exploded in popularity during
the mid-1990s.

The World Wide Web (or abbreviated as WWW or W3, and

commonly known as the Web) is a system of interlinked hypertext
documents accessed via the Internet. With a web browser, one can
view web pages that may contain text, images, videos, and other
multimedia and navigate between them via hyperlinks.

The World Web is based on these technologies:

 HTTP - Hypertext Transfer Protocol

 Web servers and Web browsers
 HTML - Hypertext Markup Language

3
Web Programming in NVQ 5 ICT
NVTI - Vantharumoolai

HTTP - Hypertext Transfer Protocol

HyperText Transfer Protocol, the underlying protocol used by the

World Wide Web. HTTP defines how messages are formatted and
transmitted, and what actions Web servers and browsers should take
in response to various commands. For example, when you enter a
URL in your browser, this actually sends an HTTP command to the
Web server directing it to fetch and transmit the requested Web
page.

Website: A website, also written as web site, or simply site, is a set

of related web pages containing content (media), including
text, video, music, audio, images, etc. A website is hosted on
at least one web server, accessible via a network such as the
Internet or a private local area network through an Internet
address known as a Uniform Resource Locator. All publicly
accessible websites collectively constitute the World Wide
Web.

Webpage: A web page is a document or information resource that is

suitable for the World Wide Web and can be accessed
through a web browser and displayed on a monitor or mobile
device. This information is usually in HTML or XHTML format,
and may provide navigation to other web pages via hypertext
links. Web pages frequently subsume other resources such as
style sheets, scripts and images into their final presentation.

Web Browser : A browser is an application program that provides a

way to look at and interact with all the information on the
World Wide Web. The word "browser" seems to have
originated prior to the Web as a generic term for user

4
Web Programming in NVQ 5 ICT
NVTI - Vantharumoolai

interfaces that let you browse (navigate through and read)

text files online.

Web Server : Web pages may be retrieved from a local computer or

from a remote web server. The web server may restrict
access only to a private network, e.g. a corporate intranet,
or it may publish pages on the World Wide Web. Web pages
are requested and served from web servers using Hypertext
Transfer Protocol (HTTP).

Static Web Pages: Static Web pages display the exact same
information whenever anyone visits it. Static Web pages do
not have to be simple plain text. They can feature detailed
multimedia design and even videos. However, every visitor
to that page will be greeted by the exact same text,
multimedia design or video every time he visits the page
until you alter that page's source code.

Dynamic web pages: Dynamic web pages are web sites that are
generated at the time of access by a user or change as a
result of interaction with the user. Dynamic web pages are a
fundamental part of Web 2.0 which facilitates information
sharing across multiple websites.

A dynamic web page is a web page that displays different

content each time it's viewed. For example, the page may
change with the time of day, the user that accesses the
webpage, or the type of user interaction. There are two
types of dynamic web pages.

Client-side scripting: Using client-side scripting to change interface

behaviors within a specific web page, in response to mouse
or keyboard actions or at specified timing events. The
5
Web Programming in NVQ 5 ICT
NVTI - Vantharumoolai

Client-side content is generated on the user's local

computer system.

A program running on the web server (server-side scripting)

is used to change the web content on various web pages, or
to adjust the sequence of or reload of the web pages. Server
responses may be determined by such conditions as data in
a posted HTML form, parameters in the URL, the type of
browser being used, the passage of time, or a database or
server state.

Server-Side Scripting: Web pages that change when a web page is

loaded or visited use server-side scripting. Server-side
content is content that's generated when a web page is
loaded. For example, login pages, forums, submission
forms, and shopping carts, all use server-side scripting since
those web pages change according to what is submitted to
it.

Scripting languages such as PHP, ASP, ASP.NET, JSP,

ColdFusion and Perl allow a web page to respond to
submission events.

6
Web Programming in NVQ 5 ICT
NVTI - Vantharumoolai

Basics of HTML (Hyper Text Markup Languages)

Markup Languages
A way to add computer understandable information to text files.
Certain parts of the text files are interpreted. This markup may contain
instructions for the browser as to how the file should look when display in
a window. The interpretation of those instructions these defined by the
particular markup language. HTML, XML, VB script, Java script, ASP, JSP,
PHP, Perl, ASP.Net are examples of markup languages.

HTML – Overview
HTML stands for Hypertext Markup Language, and it is the most widely
used language to write Web Pages.

 Hypertext refers to the way in which Web pages (HTML documents)

are linked together. Thus the links available on a webpage are
called Hypertext.

 As its name suggests, HTML is a Markup Language which means you

use HTML to simply "mark up" a text document with tags that tell a
Web browser how to structure it to display.
And
 An HTML file is a text file containing small markup tags.
 The markup tag tells the browser how to display the page.
 An HTML file must have an html or htm file extension.
 An HTML can be created using a simple text editor.
 HTML is not case sensitivity.

7
Web Programming in NVQ 5 ICT
NVTI - Vantharumoolai

Basic HTML Document

<!DOCTYPE html>
<html>
<head>
<title>
My 1st program
</title>
</head>
<body>
Welcome to ICT
</body>
</html>

Above example of HTML document uses following tags:

<!DOCTYPE...> This tag defines the document type and HTML version.

<html> This tag encloses the complete HTML document and mainly comprises
of document header which is represented by <head>...</head> and document
body which is represented by <body>...</body> tags.

<head> This tag represents the document's header which can keep other HTML
tags like <title>, <link> etc.

<title> The <title> tag is used inside the <head> tag to mention the document
title.

<body> This tag represents the document's body which keeps other HTML tags
like <h1>, <div>, <p> etc.

Basic HTML tags

Headings

Headings are defined with the H1 to H6 tag. H1 defined the largest heading. H6
defined the smallest heading.

Ex :- <H1> Welcome </H1>

8
Web Programming in NVQ 5 ICT
NVTI - Vantharumoolai

Paragraph

HTML automatically adds an extra blank line before and after a heading.

Ex :- <P> </P>
<P> </P>

Line breaks

The <BR> tag is used when you want end a line, but don’t want to start a new
paragraph. The <BR> tag forces a line break where ever you place it. The <BR>
is an empty tag. It has no closing tag.

Other Simple Tags

<HR> - Horizontal Ruler <B> - Bold <I> - Italic

<U> - Underline <PRE> Pre Defined <SUB> Subscript
<SUP> Superscript <CENTER> <tt>
<del> <ins> <big>
<small> <em> <mark>
<strong> <blockquote> <!-- --> Comments

HTML Attributes

An attribute is used to define the characteristics of an HTML element and is

placed inside the element's opening tag. All attributes are made up of two
parts: a name and a value:

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>

9
Web Programming in NVQ 5 ICT
NVTI - Vantharumoolai

Core Attributes
The four core attributes that can be used on the majority of HTML elements
(although not all) are:

 Id
The id attribute of an HTML tag can be used to uniquely identify any
element within an HTML page.

Ex:
<p id="html">This para explains what is HTML</p>
<p id="css">This para explains what is Cascading Style Sheet</p>

 Title
The title attribute gives a suggested title for the element. The syntax for
the title attribute is similar as explained for id attribute:

Ex:
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>

Now try to bring your cursor over "Titled Heading Tag Example" and you
will see that whatever title you used in your code is coming out as a
tooltip of the cursor.

 Class
The class attribute is used to associate an element with a style sheet,
and specifies the class of element.

<h3 class="className1” >Class Attribute Example</h3>

 style
The style attribute allows you to specify Cascading Style Sheet (CSS)
rules within the element.

<body>
<p style="font-family:arial; color:#FF0000;">Some text...</p>
</body>

<Font> tag

10
Web Programming in NVQ 5 ICT
NVTI - Vantharumoolai

With HTML cod you can specify both the size and the type of the browser.

Ex :- <font face = “Arial” size = “15”>

</font>

<font color =”Red”> Welcome </font>

Backgrounds

The body tag has two attributes where you can specify backgrounds. The
background can be a color or an image.

BG color

The BG color attribute sets the background to a color. The values of this
attribute can be a hexadecimal number, an RGB value or a color name.

Background

The background attribute sets the background to a image. The value of this
attribute is the URL of the image you want to use. If the image smaller than the
browser window, the image will repeat itself until it
fills the entire browser window.

Ex :- <body background = “abc.jpg”> </body>

The <img> tag

This tag is used to placing image on a web page. Gif

or jpg types are used mostly.

Ex :-

<img src = “vta.jpg” width = “400” height = “750”>

<img src = “vta.jpg” width = “400” height = “750” alt = “vta logo is here”>

<img src = “vta.jpg” width = “400” height = “750” alt = “vta logo is here” border
=”4” align = “left”>

11
Web Programming in NVQ 5 ICT
NVTI - Vantharumoolai

The <a> tag (Anchor)

HTML uses the <a> tag (Anchor) to create a link

to another document. An anchor can point to
any resource on the web. An HTML page, An
image, A sound file, A movie, etc….

<a href = “abc.html”> Go to next page </a>

<a href = “abc.html” target = “_ blank”> Go to next page </a>

<a href = “http://www.google.com target = “_ blank”> Google </a>

The href attribute contains the web address to which you will be taken after
click in the link.

Hypertext instead of Text (image)

<a href = “abc.html” target = “_blank”> <img src = “vta.jpg” width = “200”
height = ”200”>

</a>

12
Web Programming in NVQ 5 ICT
NVTI - Vantharumoolai

<Table> tag
Tables are used a lot in web pages. They give you a lot of control over the layout of a web
page. You can use simple or more complex tables.

Ex :-

<table border = “1” align = “center” width =

“600”>
<tr>
<td>Name</td> Name Address Telephone
<td>Address</td> Raja Batticaloa 065-2240222
<td>Telephone</td>
</tr>
<tr>
<td>Raja</td>
<td>Batticaloa</td>
<td>065-2240222</td>
</tr>
</table>

 <TR> tag stands for table row for creating row in the table.
 <TD> tag stands for table data cells.
 <TH> tag stands for table heading

Colspan
<table border = “1”>
<tr>
<th>Name</th>
<th colspan = “2”>Telephone No</th>
Name Telephone No
</tr>
Nimal 071 065
<tr>
Ravi 077 065
<td>Nimal</td>
<td>071</td>
<td>065</td>
</tr>
<tr>
<td>Ravi</td>

13
Web Programming in NVQ 5 ICT
NVTI - Vantharumoolai

<td>077</td>
<td>065</td>
</tr>
</table>
Rowspan
<table border = “1”>
<tr>
<td>Name</td>
<td>Nimal</td>
Name Nimal Ravi
<td>Ravi</td>
Telephone 065 065
</tr>
No 071 077
<tr>
<td rowspan=”2”>Telephone
No</td>
<td>0652240150</td>
<td>0652241069</td>
</tr>
<tr>
<td>0716082420</td>
<td>0776082420</td>
</tr>
</table>

HTML List

Order list
An order list is a list of items are marked with numbers. And order list starts with the <ol>
tag. Each list item start with the <li> tag.
Ex :- <ol type = “a”>
<li>Kamal</li>
<li>Ravi</li>
</ol>

Unordered list
An unordered list is of the list item marked with bullets. An unordered list start with the
<ul> tag and each items starts with the <li> tag.
Ex :- <ul type = “disk”>
<li>Raja</li>
<li>Nimal</li>
</ul>

14
Web Programming in NVQ 5 ICT
NVTI - Vantharumoolai

Definition list
A definition list is not a list of items. This is a list of terms and explanation of the terms. The
definition list start with a <dl> tag. Each definition list term starts with the <dt> tag. Each
definition list definition starts with the <dd> tag.
Ex :- <dl>
<dt>Monday</dt>
<dd> </dd>

<dt>Tuesday</dt>
<dd> </dd>
</dl>

HTML forms
A form is an area that can contain form elements. Form
elements are allowed to enter information. (Text field, text
area, drop down menus, radio button, check boxes,
etc………..).
A form is defined with the form tag.

Ex :- <form>
First name :-
<input type = “text” name = “a1” size = “20” max length = “40”> <br>
Last name :-
<input type = “text” name = “a2” size = “20” max length = “40”> <br>
<input type = “submit” name = “b1” value = “OK”> <br>
</form>

The <input> tag

This tag allows as entering different kind of data. There is no end tag for the input tag.
Possible attributes are,
1) Type = “text” this tag allow as to enter text data.
Ex :- First name :-
<input type = “text” name = “fname” size = “20” max length = “40”>

2) Type = “password” the same as entering text but will be shown as * marking
impossible to see what being entered.

15
Web Programming in NVQ 5 ICT
NVTI - Vantharumoolai

3) Type = “checkbox” this attribute can be compared with a “switch” that you can turn
on or off.
Ex :- Good : <input type = “checkbox” name = “Good”>
Bad : <input type = “checkbox” name = “Bad”>

4) Type = “radio”
Ex :- Male : <input type = “radio” name = “abc”>
Female : <input type = “radio” name = “abc”>

5) Type = “submit” and type = “reset” this two attributes create two buttons one
allowing the visited the submit (send). The information in the form and one allowing
the visited to clear information in the form.

Ex :- <input type =”submit” name = “send” value = “Click here to send”>

<input type =”reset” name = “clear” value = “Click here to clear”>

6) Type = “file” Allows you to look for a file

Ex :- <form>attachment
<input type = “file” name = “abc”>

7) Type = “image” allows to use an image instead of gray button.

Ex :- <input type = ”image src = ”abc.gif” name = “xyz”>

8) The <select> tag using these tags we can create a selection list allowing one or more
choices.
Ex :- <select name = “abc”>
<option>IBM
<option>DELL
<option>Intel
</select>

<select name = “abc” size = “5”>

<option>IBM
<option>DELL
<option>Intel
</select>

9) The <textarea> tag this allows as to create a text box which can consist of more than
one line.

16
Web Programming in NVQ 5 ICT
NVTI - Vantharumoolai

Ex :- <textarea name = “abc” rows = “10” col = “30”>

</textarea>

Frames
Frames are used to divide your web screen in different parts. That can be have
independently. For example one part of the screen can displayed and change data
regardless of what the other screen displaying. You can also make different frames depend
on each other.

Frame structure
 Frames are not part of the body of an HTML page. Thus they don’t require a body tag.
Frames are arranged in columns and rows. And that’s how you define their layouts.

 Since frames are independent, each

requires its own file. And to occupy a
frame, you tell the browser what file
should in what frame.

 To define a framed page you give

columns or row attributes to its
<frameset> tag, then you define in each
frame within a frameset.

Ex :- <html>
<frameset cols = “50%, 50%”>
<frame src =”abc.html”>
<frame src =”pqr.html”>
</frameset>
</html>

<frameset rows = “20%, 80%”>

<frame src =”abc.html” name = “top”>
<frameset cols = “20%, 80%”>
<frame src =”pqr.html” name = “left”>

17
 Web Programming in NVQ 5 ICT
NVTI - Vantharumoolai

<frame src =”xyz.html” name = “right”>

</frameset>
</frameset>
The <div> tag

The <div> tag is a block element used to divide or section off content on a web
page. It is useful for grouping block-level elements together so they can be
formatted simultaneously using CSS.

<div>
<h3>This content is in its own element</h3>
<p>You can put any element into a div, which is excellent.</p>
</div>

The <meta> tag

HTML <meta> tag is used to represent the metadata about the HTML document. It
specifies page description, keywords, copyright, language, author of the documents,
etc.

The metadata does not display on the webpage, but it is used by search engines,
browsers and other web services which scan the site or webpage to know about the
webpage.

Following are some specific syntaxes of meta tag which shows the different
uses of meta Tag.

1. <meta charset="utf-8">

It defines the character encoding. The value of charset is "utf-8" which

means it will support to display any language.

2. <meta name="keywords" content="HTML, CSS, JavaScript, Tutorials">

It specifies the list of keyword which is used by search engines.

3. <meta name="description" content="Free Online tutorials">

18
Web Programming in NVQ 5 ICT
NVTI - Vantharumoolai

It defines the website description which is useful to provide relevant

search performed by search engines.

4. <meta name="author" content="this author">

It specifies the author of the page. It is useful to extract author information

by Content management system automatically.

5. <meta name="refresh" content="50">

It specifies to provide instruction to the browser to automatically refresh

the content after every 50sec (or any given time).

6. <meta http-
equiv="refresh" content="5; url=https://www.vtabatti.com/html-tags-list">

In the above example we have set a URL with content so it will

automatically redirect to the given page after the provided time.

7. <meta name="viewport" content="width=device-width, initial-scale=1.0">

It specifies the viewport to control the page dimension and scaling so

that our website looks good on all devices. If this tag is present, it
indicates that this page is mobile device supported.

The <embed> tag

HTML <embed> tag is used to embed an external document in an HTML file which
can be a third party application, multimedia, plugin(interactive content), etc. This
element is new in HTML5.

<embed name="lostmojo" src="vtamojo.mp4" loop="false" hidden="true"

autostart="true">
</embed>

<embed name="lostmojo" src="/sub_folder/vtamojo.wav" loop="false" width="300"

height="90" hidden="false" autostart="false">
</embed>

19