lOMoARcPSD|23311098

Web Technology by Gudanzz

Bachelor in computer science (Utkal University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Lipun Das (lipun7444@gmail.com)
 lOMoARcPSD|23311098

1.1 Web Essentials:

Server:

The software that distributes the information and the machine where the information and software
reside is called the server.

• provides requested service to client

• e.g., Web server sends requested Web page
Client:

The software that resides on the remote machine, communicates with the server, fetches the
information, processes it, and then displays it on the remote machine is called the client.

Website:
A collection of pages on the World Wide Web that are accessible from the same URL and typically
residing on the same server.

URL:
Uniform Resource Locator, the unique address which identifies a resource on the Internet for
routing purposes.

1.2 Client-server paradigm:

The Client-Server paradigm is the most prevalent model for distributed computing protocols. It is
the basis of all distributed computing paradigms at a higher level of abstraction. It is service-oriented, and
employs a request-response protocol.

A server process, running on a server host, provides access to a service. A client process, running
on a client host, accesses the service via the server process.The interaction of the process proceeds
according to a protocol.

The primary idea of a client/server system is that you have a central repository of information—
some kind of data, often in a database—that you want to distribute on demand to some set of people or
machines.

1.3 The Internet:

• Medium for communication and interaction in inter connected network.
• Makes information constantly and instantly available to anyone with a connection.

Web Browsers:
• User agent for Web is called a browser:
o Internet Explorer
o Firefox

Web Server:
• Server for Web is called Web server:
o Apache (public domain)
o MS Internet Information Server
1.4 Hypertext Transfer Protocol (HTTP)

• The hypertext transfer protocol (HTTP) was developed by Tim Berners-Lee in 1991
• HTTP was designed to transfer pages between machines
• The client (or Web browser) makes a request for a given page and the Server is responsible for

Downloaded by Lipun Das (lipun7444@gmail.com)

 lOMoARcPSD|23311098

finding it and returning it to the client

• The browser connects and requests a page from the server
• The server reads the page from the file system, sends it to the client
and terminates the connection.

1.5 HTTP:
 Hypertext Transfer Protocol (HTTP) is the communication protocol used by the Internet to
transfer hypertext documents.
 A protocol to transfer hypertext requests and information between servers and browsers
 Hypertext is text, displayed on a computer, with references (hyperlinks) to
other text that the reader can immediately follow, usually by a mouse HTTP is behind every request for a
web document or graph, every click of a hypertext link, and every submission of a form.
 HTTP specifies how clients request data, and how servers respond to these requests.
 The client makes a request for a given page and the server is responsible for finding it and
returning it to the client.
 The browser connects and requests a page from the server.
 The server reads the page from the file system and sends it to the client and then
terminates the connection

1.6 HTTP Message:

HTTP message is the information transaction between the client and server.

Two types of HTTP Message:

1. Requests
a. Client to server
2. Responses
a. Server to client
1.12 HTTP
 Features

• Persistent TCP Connections: Remain open for multiple requests

• Partial Document Transfers: Clients can specify start and stop positions
• Conditional Fetch: Several additional conditions
• Better content negotiation
• More flexible authentication.

 Web Browsers :
• Mosaic - NCSA (Univ. of Illinois), in early 1993 First to use a GUI, led to Explosion of Web use
Initially for X-Windows, under UNIX, but was ported to other platforms by late 1993
• Browsers are clients - always initiate, servers react (although sometimes servers require
responses)
• Most requests are for existing documents, using Hypertext Transfer Protocol
• (HTTP) But some requests are for program execution, with the output
being returned as a document.
Browser: A web browser is a software application for retrieving, presenting, and

Downloaded by Lipun Das (lipun7444@gmail.com)

 lOMoARcPSD|23311098

traversing information resources on the World Wide Web.

 Web Servers:

- Provide responses to browser requests, either existing documents or dynamically Built documents.
- Browser-server connection is now maintained through more than one request- Response cycle
- All communications between browsers and servers use Hypertext Transfer Protocol
- Web servers run as background processes in the operating system.
- Monitor a communications port on the host, accepting HTTP messages when they appear
All current Web servers came from either
1. The original from CERN
2. The second one, from NCSA
- Web servers have two main directories:
1. Document root (servable documents)
2. Server root (server system software)
- Document root is accessed indirectly by clients
- Its actual location is set by the server Configuration file
- Requests are mapped to the actual location
- Virtual document trees
- Virtual hosts
- Proxy servers
- Web servers now support other Internet protocol

- Apache (open source, fast, reliable)

- IIS
- Maintained through a program with a GUI interface.

  Markup Language:
Mark-up Language is used to identify elements of a page so that a browser can render that page on
your computer screen.
Content to be displayed is ―marked up‖ or tagged to tell the browser how to display it.
A markup language is a set of characters or symbols that define a document’s logical structure or how a
document should be printed or displayed.

 Hyper Text Markup Language:

Hyper Text Mark-up Language, the language used to create documents on the World Wide Web.

· HTML is a collection of styles (indicated by mark-up tags) that define the various elements of a
World Wide Web document.

· HTML is based on an older language called Standard Generalized Markup Language, or

SGML, which defines the data in a document independently of how the data will be displayed.

· HTML document can be read and displayed by many different browsers running on different
types of computers – platform independent!

· HTML defines the structure and layout of the elements on a Web page with a variety of tags.

· Each tag may have a set of attributes that modify the appearance or layout of the visual element
contained by the tag.

· HTML is a plain-text file that can be created using a text editor like Notepad.

· HTML is a programming language that allows you to tell the browser what you want it to display
and how you want it to be displayed, in simple terms, it is a Webpage.

Downloaded by Lipun Das (lipun7444@gmail.com)

 lOMoARcPSD|23311098

· HTML there are certain markers, like commands, that tell the Browser what to do, these are
called tags. By using tags you can have tables, fonts, colors, pictures, links, and almost anything you can
think up, and experimentation with tags can lead to some pretty cool WebPages.

.In HTML structure, the elements and tags are paired up against
each other for marking the content.
Every page available on the internet includes HTML tags. These tags
help display content online with a clear and open perspective, which
can always be moderated and altered. In order to explain things more
simplistically, let us describe how elements and tags are used in the
program.
The opening and closing elements change, but the tags remain the
same. The tags are inserted before and at the end of the sentences,
enabling them to be formatted on the page. An ideal webpage
consists of three main and essential sections:
 Title
 Head
 Body
Html
 The <!DOCTYPE html> declaration defines that this document is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

Basic HTML Tags

The most important tags in HTML are tags that define headings, paragraphs, body and line breaks. The basic HTML
Tags are described here in the form of table so that you can remind them easily.
Tag Description
<html> Defines an HTML document
<head> Defines information about the document
<title> Defines the document title
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment

Description Of The Above Tags

<html>tag
This element tells a browser that this is an HTML document. This tag is defined at the top of the HTML file and at

Downloaded by Lipun Das (lipun7444@gmail.com)

 lOMoARcPSD|23311098

the end of file.

Example:
<html> <body> this is my first page </body></html>

<head> tag
The head tag defines information about the document. The browser does not display the "head information" to the
user. The following tags can be in the head section: <base>, <link>, <meta>, <script>, <style>, and <title>. The
head tag is used between <html> and <body> tags.

Example:
<html> <head><title>Basic tag</title></head>>body> this is my first page </body></html>

<title> tag
Title tag defines the title of the document which appears in the Title bar of the explorer window. Title tag is used in
between <head> and </head> tag because it is title tag is section of <head> tag.

Example:
<html> <head><title>Basic tag</title></head><body> this is my first page </body></html>

<body> tag
The body element defines the document's body. It contains all the contents of the document (like text, images,
colors, graphics etc).

Example:
<body bgcolor ="red" background="c:\img\sky.jpg" links="blue" text="black">

Attributes

Attribute Value Description

An image to use as the background. Deprecated. Use styles
background file_name
instead.
color_nam The background color of the document. Deprecated. Use styles
bgcolor
e instead.
link, alink, color_nam Specifies the color of all the links in the document. Deprecated.
vlink e Use styles instead.
color_nam Specifies the color of the text in the document. Deprecated. Use
text
e styles instead.
Examples of the Text Formatting tags

Examples Outputs
<b>This text is bold</b> This text is bold
<strong> This text is strong </strong> This text is strong
<big> This text is big </big> This text is big
<em> This text is emphasized </em> This text is emphasized
<i> This text is italic </i> This text is italic
<small> This text is small </small> This text is small;
This text contains
This text contains _subscript
subscript
This text contains
This text contains ^superscript
superscript
<u> this is underlined text </u> this is underlined text
<bdo dir="rtl">Here is some Hebrew
Here is some Hebrew text
text</bdo>

What is a Table in HTML?

A table is a representation of data arranged in rows and
columns. Really, it's more like a spreadsheet. In HTML,
with the help of tables, you can arrange data like

Downloaded by Lipun Das (lipun7444@gmail.com)

 lOMoARcPSD|23311098

images, text, links and so on into rows and columns of

cells.

The use of tables in the web has become more popular

recently because of the amazing HTML table tags that
make it easier to create and design them.

To create a table in HTML you will need to use tags. The

most important one is the <table> tag which is the main
container of the table. It shows where the table will
begin and where it ends.
Common HTML Table tags
Other tags include:

 <tr> - represents rows

 <td> - used to create data cells
 <th> - used to add table headings
 <caption> - used to insert captions
 <thead> - adds a separate header to the table
 <tbody> - shows the main body of the table
 <tfoot> - creates a separate footer for the table
How to Add a Table Heading in HTML
The <th> is used to add headings to tables. In basic
designs the table heading will always take the top row,
meaning we will have the <th> declared in our first table
row followed by the actual data in the table. By default
the text passed in the Heading is centered and Bold.
How to Use Cell Spanning in an HTML Table
Perhaps you have come across cells that stretch across
two or more columns or rows in a table. That's called
cell spanning.

If you worked in programs like MS office or Excel you

have probably used the function by highlighting the
cells and clicking the command, and voilà! You have it.

The same features can be applied in an HTML table by

using two cell attributes, colspan for horizontal spanning
and rowspan for vertical spanning. The two attributes are
assigned numbers greater that zero which shows the

Downloaded by Lipun Das (lipun7444@gmail.com)

 lOMoARcPSD|23311098

number of cells you wish to span.

An Example with use of span
<table>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td rowspan = "2">Hillary</td>
<td>Advanced Web</td>
<td>75</td>
</tr>
<tr>
<td>Operating Syatem</td>
<td>60</td>
</tr>
<tr>
<td rowspan = "2">Lary</td>
<td>Advanced Web</td>
<td>80</td>
</tr>
<tr>
<td>Operating Syatem</td>
<td>75</td>
</tr>
<tr>
<td colspan="3">Total Average: 72.5</td>
</tr>
</table>

HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one
or more list elements. There are three different types of HTML lists:

1. Ordered List or Numbered List (ol)

2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

Note: We can create a list inside another list, which will be termed as nested List.

HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by

Downloaded by Lipun Das (lipun7444@gmail.com)

 lOMoARcPSD|23311098

default. It is known as numbered list also. The ordered list starts with <ol>
tag and the list items start with <li> tag.

1. <ol>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ol>
Output:
1. Aries
2. Bingo
3. Leo
4. Oracle

HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is also
known as bulleted list also. The Unordered list starts with <ul> tag and list
items start with the <li> tag.

1. <ul>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ul>

Output:

o Aries
o Bingo
o Leo
o Oracle

HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and
XHTML. It is also known as definition list where entries are listed like a
dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary, list
of terms or other name-value list.

The HTML definition list contains following three tags:

Downloaded by Lipun Das (lipun7444@gmail.com)

 lOMoARcPSD|23311098

1. <dl> tag defines the start of the list.

2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).

1. <dl>
2. <dt>Aries</dt>
3. <dd>-One of the 12 horoscope sign.</dd>
4. <dt>Bingo</dt>
5. <dd>-One of my evening snacks</dd>
6. <dt>Leo</dt>
7. <dd>-It is also an one of the 12 horoscope sign.</dd>
8. <dt>Oracle</dt>
9. <dd>-It is a multinational technology corporation.</dd>
10.</dl>
HTML | <frame> Tag
HTML Frames are used to divide the web browser window into multiple sections where each section can
be loaded separately. A frameset tag is the collection of frames in the browser window.
Creating Frames: Instead of using body tag, use frameset tag in HTML to use frames in web browser.
But this Tag is deprecated in HTML 5. The frameset tag is used to define how to divide the browser. Each
frame is indicated by frame tag and it basically defines which HTML document shall open into the frame.
To define the horizontal frames use row attribute of frame tag in HTML document and to define the
vertical frames use col attribute of frame tag in HTML document.
Example:

<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Frames using row attribute</title>
</head>

<frameset rows = "20%, 60%, 20%">

<frame name = "top" src =
"C:/Users/dharam/Desktop/attr1.png" />
<frame name = "main" src =
"C:/Users/dharam/Desktop/gradient3.png" />
<frame name = "bottom" src =
"C:/Users/dharam/Desktop/col_last.png" />
<noframes>
<body>The browser you are working does
not support frames.</body>

Downloaded by Lipun Das (lipun7444@gmail.com)

 lOMoARcPSD|23311098

</noframes>
</frameset>
</html>

Output: The above example basically used to create three vertical frames: left, center and right using col
attribute of frameset tag.

Attributes of Frameset tag:

 cols: The cols attribute is used to create vertical frames in web browser. This attribute is basically
used to define the no of columns and its size inside the frameset tag.
The size or width of the column is set in the frameset in the following ways:
 Use absolute value in pixel
Example:
<frameset cols = "300, 400, 300">
 Use percentage value
Example:
<frameset cols = "30%, 40%, 30%">
 Use wild card values:
Example:
<frameset cols = "30%, *, 30%">
In the above example * will take the remaining percentage for creating vertical frame.
 rows: The rows attribute is used to create horizontal frames in web browser. This attribute is used
to define no of rows and its size inside the frameset tag.
The size of rows or height of each row use the following ways:
 Use absolute value in pixel
Example:
<frameset rows = "300, 400, 300">
 Use percentage value
Example:
<frameset rows = "30%, 40%, 30%">
 Use wild card values
Example:
<frameset rows = "30%, *, 30%">
In the above example * will take the remaining percentage for creating horizontal frame.
 border: This attribute of frameset tag defines the width of border of each frames in pixels. Zero
value is used for no border.
Example:
<frameset border="4" frameset>

Downloaded by Lipun Das (lipun7444@gmail.com)

 lOMoARcPSD|23311098

Hyperlinks
Introduction

So lets start with the hyperlinks or the just call them "links". Ok you just think for a minute that
what may be the meaning of the links in your point of view. Yes again you are going in the right
direction. Links means "connection between the two things" might it be any thing. Be two Persons,
Roads, or two computers. And the links provide the facility or path between two things through
which we can go from one to another.

In the same way the links can be provided between the two web pages, to go directly from one page
to the another page. Such type of links are called as the Hyperlinks. This technique of linking one
pages with other is called as the Hyperlinking.

Hyperlinking between two html pages:

We can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
Hyperlinks

So lets start with the hyperlinks or the just call them "links". Links means "connection between the
two things" might it be any thing. Be two Persons, Roads or two computers. And the links provide
the facility or path between two things through which we can go from one to another.

In the same way the links can be provided between the two web pages, to go directly from one page
to the another page. Such type of links are called as the Hyperlinks. This technique of linking one
pages with other is called as the Hyperlinking.

linking between two html pages

linking on same page

As you see in the above diagram if the user first click on the Page1.php then user automatically
jumps to the Page2.php and vice-versa. Because the links on the both pages have been provided just
the user have to click on those links. We can point to any resource on the Web: an HTML page, an
image, a sound file, a movie etc.
Tags Used in the Hyperlinks

Tag Description
<a> Defines an anchor

You see there is only one tag in the Table i.e. <a> tag, it is called as anchor tag. This tag is used to
link the documents in the Html and it is quite simple.

The <a> Anchor Tag and its Attributes:

Downloaded by Lipun Das (lipun7444@gmail.com)

 lOMoARcPSD|23311098

<a>Attributes Description
specifies the address or path (of any file) to
href
which we want to jump.
specifies where the linked document will be
target
opened.
name specifies the name of the anchor.

Types of linking

1) Open a link in the same browser window

HTML uses the <a> (anchor) tag 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.

Different attributes of the <a> tag are href, name, target.

So lets see some practical on <a> tag and its attributes.

If you want to open the new hyperlinked page in the same window then do not write the "target"
attribute in the <a> tag.

Multimedia
Introduction

In multimedia, you will learn how to provide the songs, video and picture (images) in your web
page. How it will feel to you that whenever you open your web page it starts singing, playing
movie, or display your family picture.

You can learn all of these things very easily. Just go on reading the Chapter and learn the Magic of
the multimedia elements.

Working with Images

In this section you will learn about "how the images can be used in HTML".

1. How you can create a page with image as background.

2. How you can make a picture as a hyperlink to another file (any type of file).
How to Hyperlink an Image

To hyperlink an image first we have to insert the image on the web page. So question is how to
insert the image on the web page. In html the image can be inserted using the <img> tag. <img> tag
has the attributes like width, height and src, which specifies the height and width of the image that
is to displayed on the web page and scr has the value of the path where the image is stored.

<img> tag does not have the end tag.

So now use the <img> tag.

Format of <img> tag :

<img src="path" width="number" height="number">

Example:
<img src="img\logo_in.gif" width="200" height="200"> Remember the file & path of the file you
provided in the src attribute of the any tag should be correct and must exist.

The example inserts the image "logo_in.gif" with the height of 200 pixel and width of 200 pixel. By
using this tag you can insert the image in your html file, now if you want to create this image the
hyperlink then follow the steps.
How to make the image as Hyperlink

Format:
<a href="path_of_file" > <img src="path" width="number" height="number"></a>

Example:
<a href="list.html"><img src="img\logo_in.gif" width="200" height="200"></a>

Downloaded by Lipun Das (lipun7444@gmail.com)

 lOMoARcPSD|23311098

To make an image as hyperlink just enter the <img> tag between the <a> anchor tag.
And it will get Hyperlinked. so now lets do some practical.

Just write/copy this example on any text editor new file and save the file and open in the browser
and see how it looks.

Your above web page in the web browser looks like:

Format with Example

<html>
<body>
<img border="0"
src="img/LOGO_IN.GIF"
width="109"
height="68"><br>
<a
href="http://www.waterflame.in">

<img src="img\logo_in.gif"
width="109" height="68"></a>
</body>
</html>

In this example the first image is not the hyperlink. But the second image is the hyperlink to the
"www.waterflame.in" and this hyperlinking is done by using <a> anchor tag. This you will study in
the hyperlinks chapter.

How to create the page with image as back ground

This you can learn in the first chapter also. Use the background="path_of_image_file" of the
<body> tag and see what happens.

So now lets do some practical.

Just write/copy this example on any text editor new file and save the file and open in the browser
and see how it looks.

Format with Example:

<html>
<head>
<title> multi </title>
</head>
<body background="img/LOGO_IN.GIF" width="109" height="68">
</body>
</html>

Frames and Input Elements

Introduction

HTML Forms are used to select different kinds of user input.

Forms
A form is an area that can contain form elements So simply you will have to irst understand "What
is Form". You must have seen the forms on the internet. Now days there is too much craze of the
forms on the internet. At least if you have an e-mail ID then Sure you have filled the Form of e-mail
registration during the creation of your e-mail account. You fills all the information in the form, like
your Name, Registration ID, password, address, Qualification and many more clickable buttons.

So once again take a look on the form:

Downloaded by Lipun Das (lipun7444@gmail.com)

 lOMoARcPSD|23311098

Now you saw the sample of Yahoo ID Registration form containing some of elements of the form.

Form elements are elements that allow the user to enter information like:
· text fields
· text area fields
· drop-down menus
· radio buttons
· checkboxes, etc. in a form.
Form Tags

Data Type Description

<Form> Defines a form for user input.
<input> Defines an input field.
<textarea> Defines a text-area (a multi-line text input control).
<label> Defines a label to a control.
<fieldset> Defines a field set.
<select> Defines a selectable list (a drop-down box).
<optgroup> Defines an option group.
<option> Defines an option in the drop-down box.
<button> Defines a push button.

<form> Tag
A form is defined with the <form> tag. Form is the rectangular area in which all the input elements
are defined. Its is used inside the body section of HTML file. And it is all done by using the <input>
tag. <input> tag is an open tag hence do not need the </input> tag.
example
<form>
First name: <input type="text" name="firstname">
<br>
Last name: <input type="text" name="lastname">
</form>

Downloaded by Lipun Das (lipun7444@gmail.com)

 lOMoARcPSD|23311098

Downloaded by Lipun Das (lipun7444@gmail.com)

 lOMoARcPSD|23311098

• initiates contact with server (―speaks first‖)

• typically requests service from server
• Web: client implemented in browser

Downloaded by Lipun Das (lipun7444@gmail.com)