Webtec (Unit - 1) Notes

SREE ABIRAAMI ARTS AND SCIENCE COLLEGE FOR WOMEN
(Affiliated to Thiruvalluvar University, Vellore)

Keelalathur, Gudiyattam – 635803
Department of Computer Applications
COURSE NOTES
Subject Name: Web Technology Subject Code: CCP62
Unit - I
Web Technologies
Web technology is defined as the process of communication between two

computers means by which two computers communicate between them using a
markup language and different multimedia packages is called web technology
Internet BasicsInternet
The Internet is a global system of interconnected computer networks that use the
standard Internet Protocol Suite (TCP/IP) to serve billions of users worldwide. It is
a network of networks that consists of millions of private, public academic,
business, and government networks.
World Wide Web

World Wide Web, which is also known as a Web, is a collection of websites or web pages stored in
web servers and connected to local computers through the internet. Thesewebsites contain text pages,
digital images, audios, videos, etc. Users can access the content of these sites from any part of the
world over the internet using their devices such as computers, laptops, cell phones, etc.
The building blocks of the Web are web pages which are formatted in HTML and connected by links
called "hypertext" or hyperlinks and accessed by HTTP.
HTTP
HTTP stands for Hypertext Transfer Protocol. This is the protocol being used to
transfer hypertext documents that makes the World Wide Web possible.
A standard web address such as Yahoo.com is called a URL and here the prefix
http indicates its protocol
Prepared By E.Swetha

COURSE NOTES
URL
URL stands for Uniform Resource Locator, and is used to specify addresses on
the World Wide Web. A URL is the fundamental network identification for any
resource connected to the web (e.g., hypertext pages,images, and sound files).
A URL will have the following format −
protocol://hostname/other_information
The protocol specifies how information is transferred from a link. The

protocol used for web resources is HyperText Transfer Protocol (HTTP). The
protocol is followed by a colon, two slashes, and then the domain name. The
domain name is the computer on which the resource is located.
Links to particular files or subdirectories may be further specified after the domain
name. The directory names are separated by single forward slashes.
Working Principle of World Wide Web
The Web works as per the internet's basic client-server format as shown in the following image. The
servers store and transfer web pages or information to user's computers on the network when
requested by the users. The computer of a user who requests documents from a server is known as a
client. Browser, which is installed on the user' computer, allowsusers to view the retrieved documents

COURSE NOTES
There are three main technologies involved in transferring information (web pages) from servers to
clients (computers of users). These technologies include Hypertext Markup Language (HTML),
Hypertext Transfer Protocol (HTTP) and Web browsers.
Hypertext Markup Language (HTML):
HTML is a standard markup language which is used for creating web pages. It describes the structure
of web pages through HTML elements or tags. In simple words, HTML is used to display text,
images, and other resources through a Web browser.
Web Browser:
A web browser, which is commonly known as a browser, is a program that displays text, data,
pictures, videos, animation, and more. It provides a software interface that allows you to click
hyperlinked resources on the World Wide Web.
In the beginning, browsers were used only for browsing due to their limited potential. Today, they are
more advanced; along with browsing you can use them for e-mailing, transferring multimedia files,
using social media sites, and participating in online discussion groups and more. Some of the
commonly used browsers include Google Chrome, Mozilla Firefox, Internet Explorer, Safari, and
more.
Hypertext Transfer Protocol (HTTP):
Hyper Text Transfer Protocol (HTTP) is an application layer protocol which enables WWW to work
smoothly and effectively. It is based on a client-server model. The client is a web browser which
communicates with the web server which hosts the website. This protocol defines how messages are
formatted and transmitted and what actions the Web Server and browser should take in response to
different commands. When you enter a URL in the browser, an HTTP command is sent to the Web
server, and it transmits the requested Web Page.

COURSE NOTES
When we open a website using a browser, a connection to the web server is opened, and the browser
communicates with the server through HTTP and sends a request. HTTP is carried over TCP/IP to
communicate with the server. The server processes the browser's request and sends a response, and
then the connection is closed. Thus, the browser retrieves content from the server for the user.
Introduction to HTML
HTML stands for Hyper Text Markup Language. It is used to design web
pages using markup language. HTML is the combination of Hypertext and
Markup language. Hypertext defines the link between the web pages. Markup
language is used to define the text document within tag which defines the
structure of web pages.
HTML page structure:
It contain the essential building-block elements (i.e. doctype declaration,
html, head, title, and body elements) upon which all webpages are created

COURSE NOTES

COURSE NOTES
Every HTML document begins with a HTML document tag. Although

this is not mandatory but it is a good convention to start the document
with this below mentioned tag:
<!DOCTYPE html>
<html> : Every HTML code must be enclosed between basic HTML tags.
It begins with <html> and ends with </html> tag.
<head> : The head tag comes next which contains all the header
information of the web page or document like the title of the page and
other miscellaneous information. These informations are enclosed within
head tag which opens with <head> and ends with </head>.
<title> : This is a header information and hence mentioned within
the header tags. The tag begins with <title> and ends with </title>
<body> : The body tag contains the actual body of the page which will be
visible to all the users. This opens with <body> and ends with </body>.
Every content enclosed within this tag will be shown on the web page be
it writings or images or audios or videos or even links.
An HTML document can be created using any text editor . Save the text file
using .html or .htm. Once saved as an HTML document, the file can be
opened as a webpage in the browser.
Features of HTML:
It is easy to learn and easy to use.

It is platform independent.
Images, video and audio can be added to a web page.
Hypertext can be added to text.
It is a markup language.

COURSE NOTES
Advantages:
HTML is used to build websites.

It is supported by all browsers.
It can be integrated with other languages like CSS, JavaScript etc.
Disadvantages:
HTML can only create static webpages. For dynamic webpages, other
languages have to be used.
A large amount of code has to be written to What is a list?
A list is a record of short pieces of information, such as people’s
names, usually written or printed with a single thing on each line andordered
in a way that makes a particular thing easy to find.
For example:
A shopping list
To-dolist

COURSE NOTES
Lists in HTML
HTML offers three ways for specifying lists of information. All listsmust
contain one or more list
elements.
The types of lists that can be used in HTML are :
ul : An unordered list. This will list items using plain bullets.
ol : An ordered list. This will use different schemes of numbers tolist
your items.
dl : A definition list. This arranges your items in the same way asthey
are arranged in a dictionary.
The Unordered HTML List
An unordered list starts with the “ul” tag. Each list item starts withthe “li”
tag.The list items are marked with bullets i.e small blackcircles by default.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>

COURSE NOTES
</body>
</html>
Output :

COURSE NOTES
The HTML Unordered List has various List Item

Markers:- Circle : Sets the list item marker to a circle.
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Circle Bullets</h2>
<ul style="list-style-type:circle">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>

COURSE NOTES
Output :
Square : Sets the list item marker to a square.

<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Square Bullets</h2>

COURSE NOTES
<ul style="list-style-type:square">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>
Output :
The HTML Ordered List
An ordered list starts with the “ol” tag. Each list item starts with the“li”
tag. The list items are marked with numbers by default.
Example:
<!DOCTYPE html>

COURSE NOTES
<html>
<body>
<h2>Grocery List</h2>
<ol>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>

COURSE NOTES
</body>
</html>
Output :
The HTML Ordered List has various List Item Markers:

The type attribute of the <ol> tag, defines the type of the list itemmarker.
Type=”1″ : The list items will be numbered with numbers i.e default.
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>

COURSE NOTES
</ol>
</body>
</html>
Output :

COURSE NOTES
Type=”A” : The list items will be numbered with uppercase letters.
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Letters</h2>
<ol type="A">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>
</body>
</html>
Output :
Type=”I” : The list items will be numbered with uppercase romannumbers.

COURSE NOTES
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Roman Numbers</h2>
<ol type="I">
<li>Bread</li>
<li>Eggs</li>

COURSE NOTES
<li>Milk</li>
<li>Coffee</li>
</ol>
</body>
</html>
Output :
The HTML Description List
A description list is a list of terms, with a description of each term. The <dl>
tag defines the description list, the <dt> tag defines theterm name, and
the <dd> tag describes each term.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- 500 gms</dd>

COURSE NOTES
<dt>Milk</dt>
<dd>- 1 ltr Tetra Pack</dd>
</dl>
</body>
</html>
Output :

COURSE NOTES
Nested List in HTML:
A nested list is a list which has a list inside a list.
<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>

COURSE NOTES
Output :

COURSE NOTES
HTML Table
A table is an arrangement of data in rows and columns, or possibly in a more
complex structure. Tables are widely used in communication, research, and
data analysis.
Tables are useful for various tasks such as presenting text information and
numerical data.
Tables can be used to compare two or more items in tabular form layout.
Tables are used to create databases.
Defining Tables in HTML
An HTML table is defined with the “table” tag. 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 centered. A table data/cell is defined with the
“td” tag.
Example:
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>

COURSE NOTES
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>

COURSE NOTES
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
Output:
Cellpadding and Cellspacing Attributes

There are two attributes called cellpadding and cellspacing which you will use to adjust
the white space in your table cells. The cellspacing attribute defines space between
table cells, while cellpadding represents the distance between cell borders and the
content within a cell.
Example

COURSE NOTES
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>

COURSE NOTES
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
This</table>
will produce the following result –
</body>
</html>
Colspan and Rowspan Attributes

You will use colspan attribute if you want to merge two or more columns into a
single column. Similar way you will use rowspan if you want to merge two or
more rows.
Example

COURSE NOTES
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>

COURSE NOTES
<td>Row 1 Cell 2</td>

</tr>
<tr>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
This will produce the following result −
</tr>
</table>
</body>
</html>
Table Height and Width

You can set a table width and height using width and height attributes. You can
specify table width or height in terms of pixels or in terms of percentage of available
screen area.
Example

COURSE NOTES
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>

COURSE NOTES
</tr>
<tr>
</tr>
This</table>
will produce the following result −
</body>
</html>
HTML frame
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 HTMLto
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 framesuse row attribute of frame
tag in HTML document and to define the vertical frames use col attribute of
frame tag in HTML document.
Example:

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

COURSE NOTES
<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 doesnot
support frames.</body>
</noframes>
</frameset>
</html>
Output: The above example basically used to create three horizontal frames:
top, middle and bottom using row attribute of frameset tag andthe noframe tag
is used for those browser who doesn’t support noframe.
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 columnsand its size
inside the frameset tag.
The size or width of the column is set in the frameset in thefollowing ways:
 Use absolute value in pixel
Example:
<frameset cols = "300, 400, 300">
 Use percentage value

Example:

COURSE NOTES
<frameset cols = "30%, 40%, 30%">
 Use wild card values:

Example:
<frameset cols = "30%, *, 30%">
In the above example * will take the remaining percentagefor

creating vertical frame.
rows: The rows attribute is used to create horizontal frames in web

COURSE NOTES
browser. This attribute is used to define no of rows and its sizeinside 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 percentagefor

creating horizontal frame.
border: This attribute of frameset tag defines the width of border ofeach
frames in pixels. Zero value is used for no border.
Example:
<frameset border="4" frameset>
 name: This attribute is used to give names to the frame. It

differentiate one frame from another. It is also used to indicatewhich
frame a document should loaded into.
Example:
 <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" />
 src: This attribute in frame tag is basically used to define the source
file that should be loaded into the frame.The value of src can be any

COURSE NOTES
url.
Example:
<frame name = "left" src = "/html/left.htm" />
In the above example name of frame is left and source file willbe
loaded from “/html/left.htm” in frame.
 marginwidth: This attribute in frame tag is used to specify

COURSE NOTES
width of the spaces in pixels between the border and contents

of left and right frame.
Example:
<frame marginwidth="20">

marginheight: This attribute in frame tag is used to specify
height of the spaces in pixels between the border and contents
of top and bottom frame.
Example:
<frame marginheight="20">
Advantages:
It allows the user to view multiple documents within
asingle Web page.
It load pages from different servers in a single frameset.
Disadvantages:
The use of too many frames can put a high workload

onthe server.
Many old web browser doesn’t support frames.
Adding graphics to HTML files

There are two ways to include images (graphics) in an HTML document: inline
and external. You'll usually use inline images, which appear directly in the
HTML page. External images are downloaded when a user clicks a link to the
image.

COURSE NOTES
To include an image in your HTML document, use the <IMG> tag.
<IMG SRC="some.gif">

Webtec (Unit - 1) Notes

Uploaded by

Copyright:

Available Formats

Webtec (Unit - 1) Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Webtec (Unit - 1) Notes

Uploaded by

Copyright:

Available Formats

SREE ABIRAAMI ARTS AND SCIENCE COLLEGE FOR WOMEN

(Affiliated to Thiruvalluvar University, Vellore)

Web technology is defined as the process of communication between two

World Wide Web

(Affiliated to Thiruvalluvar University, Vellore)

The protocol specifies how information is transferred from a link. The

Working Principle of World Wide Web

(Affiliated to Thiruvalluvar University, Vellore)

Hypertext Markup Language (HTML):

Hypertext Transfer Protocol (HTTP):

(Affiliated to Thiruvalluvar University, Vellore)

(Affiliated to Thiruvalluvar University, Vellore)

(Affiliated to Thiruvalluvar University, Vellore)

Every HTML document begins with a HTML document tag. Although

It is easy to learn and easy to use.

(Affiliated to Thiruvalluvar University, Vellore)

HTML is used to build websites.

(Affiliated to Thiruvalluvar University, Vellore)

The Unordered HTML List

(Affiliated to Thiruvalluvar University, Vellore)

(Affiliated to Thiruvalluvar University, Vellore)

The HTML Unordered List has various List Item

<h2>Unordered List with Circle Bullets</h2>

(Affiliated to Thiruvalluvar University, Vellore)

Square : Sets the list item marker to a square.

<h2>Unordered List with Square Bullets</h2>

(Affiliated to Thiruvalluvar University, Vellore)

The HTML Ordered List

(Affiliated to Thiruvalluvar University, Vellore)

(Affiliated to Thiruvalluvar University, Vellore)

The HTML Ordered List has various List Item Markers:

<h2>Ordered List with Numbers</h2>

(Affiliated to Thiruvalluvar University, Vellore)

(Affiliated to Thiruvalluvar University, Vellore)

Type=”A” : The list items will be numbered with uppercase letters.

<h2>Ordered List with Letters</h2>

Type=”I” : The list items will be numbered with uppercase romannumbers.

(Affiliated to Thiruvalluvar University, Vellore)

<h2>Ordered List with Roman Numbers</h2>

(Affiliated to Thiruvalluvar University, Vellore)

The HTML Description List

<h2>A Description List</h2>

<dd>- 500 gms</dd>

(Affiliated to Thiruvalluvar University, Vellore)

<dd>- 1 ltr Tetra Pack</dd>

(Affiliated to Thiruvalluvar University, Vellore)

Nested List in HTML:

A nested list is a list which has a list inside a list.

<h2>A Nested List</h2>

(Affiliated to Thiruvalluvar University, Vellore)

(Affiliated to Thiruvalluvar University, Vellore)

(Affiliated to Thiruvalluvar University, Vellore)

(Affiliated to Thiruvalluvar University, Vellore)

Cellpadding and Cellspacing Attributes

(Affiliated to Thiruvalluvar University, Vellore)

(Affiliated to Thiruvalluvar University, Vellore)

Colspan and Rowspan Attributes

(Affiliated to Thiruvalluvar University, Vellore)

(Affiliated to Thiruvalluvar University, Vellore)