UNIT I

Introduction to Internet

What is the Internet?

 The Internet is a global network of networks connecting millions of users worldwide via many
computer networks using a simple standard common addressing system and basic communications
protocol called TCP/IP (Transmission Control Protocol/Internet Protocol).
 This allows messages sent over the Internet to be broken into small pieces, called packets, which travel
over many different routes between source and destination computers.
 You can think of the Internet as a physical collection of routers and circuits as a set of shared resources.

Internet-Based Services
Some of the basic services available to Internet users are

 Email − A fast, easy, and inexpensive way to communicate with other Internet users around the world.
 Telnet − Allows a user to log into a remote computer as though it were a local system.
 FTP − Allows a user to transfer virtually every kind of file that can be stored on a computer from one
Internet-connected computer to another.
 UseNet news − A distributed bulletin board that offers a combination news and discussion service on
thousands of topics.
 World Wide Web (WWW) − A hypertext interface to Internet information resources

What is 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.

Web site:

A set of interconnected web pages, usually including a homepage, generally located on the same server, and
prepared and maintained as a collection of information by a person, group, or organization.
Web Page:

A web page is a document that's created in html that shows up on the internet when you type in or go to the web
page's address.

Types of Web Pages:

Static web page: is delivered exactly as stored, as web content in the web server's file system. Contents
cannot be changed.

Dynamic web page: is generated by a web application that is driven by server-side software or client-side
scripting. Dynamic web pages help the browser (the client) to enhance the web page through user input to the
server. Contents can be changed as evolution over time.

Web Browsers & their types

 A web browser (commonly referred to as a browser) is a software application for retrieving, presenting
and traversing information resources on the World Wide Web.
 The major web browsers are Google Chrome, Firefox, Internet Explorer, Opera, and Safari.

Web –Server

Web server refers to either the hardware (the computer) or the software (the computer application) that helps to
deliver web content that can be accessed through the Internet.
The most common use of web servers is to host websites, but there are other uses such as gaming, data storage
or running enterprise application.

INTRODUCTION TO HTML :

HTML stands for Hypertext Markup Language. It is a Language used to create Web Pages or Hypertext
document. A Markup Language is a set of instructions often called TAGS which can be added to text files.

HTML is only a formatting language are not a programming language. The idea behind hypertext is that instead
of reading text in a right linear structure we can easily jump from one point to another point.HTML is all about
specifying the structure and format of our webpage i.e, it is mainly used for describing the structure document.

HTML is platform independent i.e, for example if we can access internet, we can access WORLD WIDE WEB
(WWW) irrespective of client OS and OS of the webserver are accessing. So, we can view one download
HTML files on www through browser. Elements of a web document are labelled through the usage of HTML
tags. It is the tags that describe the document. Anything that is not a tag will be displayed in the document itself.
HTML does not describe any page layout i.e, for example, word for windows have different styles for headings,
font size etc.

But HTML doesn’t have all these. Based on the Platforms, appearance of any element will change. The
formatted text will appear differently on different machines / Platforms. By separating the Structure of the
document and appearance, a Program that reads and Understands HTML can make formatting decision based on
capabilities of individual Platform. Web Browsers are best examples of HTML formatters.

Advantages of HTML:- • A HTML document is small and hence easy to send over the net. It is small because it
doesn’t include format information. • HTML documents are cross platform compatible and device independent.
We need a HTML readable browser to view them.

Basic HTML tags:-

(1) <!doctype> :
: This tag formally starts an HTML document and it also indicates theversion of HTML used.

<!doctype HTML PUBLIC “//w3c//DTDHTML Q.o//EN”>

(2) <HTML>:

Every HTML document starts with a <html> tag and it is always the firsttag in a html

page and indicates that the document is a HTML document.The end tag <html> is

</html>.

Example:

<html>……..</html>

(3) <head>:
It contains the head of an html document, which holds about the document such as title.

Each property defined html page should have a head which we create with <head> tag.

It has header information and it isdisplayed at the top of the browser. Each tag for

<head> is </head>.

<head>…….</head>

(4) <title>:
It contains the title of the html document which includes the content thatwill actually

appear in the web browser. The entire content of the web page is placed in the pages
 <body> tag. The end tag <body> is </body>

<title>…….</title>

(5) <body>:

It contains the body of the HTML Document , which includes the content that will

actually appear in the web browser. The entire content of the webpage will be placed in

the pages <body> tag. The end tag of the

<body> tag will be </body>.

<body>………</body>

STRUCTURE OF THE HTML PROGRAM:-

The HTML Program is generally divided into two sections i.e head and body. We use and
tags to indicate these two sections. section holds the header information of a webpage document indicated by a
title that is provided by using .we want to display which the webpage. Anything that is not a tag will be
displayed within the webpage.
Example:

<html>

<head>

<title>First Webpage</title>

</head>

<body>

This is my first page

</body>

</html>

Attribute:

An Attribute is a Keyword we use in an opening tag to give more information tothe web

browser. HTML tags tell the web browsers how to format and organizeour webpages. But we

can customize tags using attributes. The Format of an attribute is:

<tagname Attribute=value>

Attributes of the <body> tag: Description of tags

(1)Background: The URL or a graphic file to be used in the
filling the browser’s Background.

(2)Bgcolor: The color of the browser’s background

(3)Bgproperties: It Indicates if the background should scroll

when text does. If we set it to“ FIXED” ,the
background will not scroll when the text does.
(4)Bottommargin: Specifies the the bottom margin ,the empty
space at the bottom of the documenting
pixels.

(5)Id: It is a unique alphanumeric identifier for the

tag which we can use to refer toit.
6)Language: Scripting language used for the tag.

(7)Leftmargin: Specifies the left margin, the empty space at

the left of the document.

(8)Marginheight: Gives the height of the margin at the top and

bottom of the page in pixels.

(9)MarginWidth: Gives the width of the left and right margins

of the page in pixels.

10) Rightmargin: It specifies the right margin, the empty space

to the right margin of the document in pixels.

(11) Style: Inline style indicating how to render the

element.

12) Text: Color of the in the document.

13) Link: It specifies the color of hyperlinks that have

not yet been visited.

(14) Alink: It specifies the color of hyperlinks as they are

being clicked.

(15) Vlink: It specifies the color of hyperlinks as they

have been visited.

(16)<!-- --> Comment tag: Annotates a web page with a comment. In the
HTML that we can by lookingat the HTML
but it will not be displayed in the web
browser.
<! ------ This is a comment--------- >
Formatting with HTML tags:
To set the actual style of text as displayed in a web page we can text style tags.There are a

number of ways to apply styles to text.

(1) <b>:
It creates a bold text i.e, sets the text style to bold.

Attributes:

a. Id:

It is a unique alphanumeric identifier for the tag which we can use to refer toit.

b. Style:

The Inline style indicating how to render the element.

Example:
<html>

<head>

<title>Using Bold Tag </title>

</head>

<body bgcolor=”pink”>

Here is some text displayed as <b> Bold Text </b>

</body>
</html>

(2)<I>:

It displays text in Italics.(3)

<U>:

It displays text in Underlined text.(4)

<P>:

It displays the Paragraph text.

Example:

<html>

<head>

<title> Using Styles </title>

</head>

<body bgcolor=”pink”>

<p> This is a paragraph <br>

Here is some text that is <i> Displayed in Italics </i>

<br>Here is some <u> Underlined text </u>

</body>

</html>

3)Headings:

<h1>,<h2>,<h3>,<h4>,<h5> & <h6>

The heading element tags are <h1>,<h2>,<h3>,<h4>,<h5><h6>. These elements create

the headings in our web pages by displaying bold text in avariety of sizes <h1> being

larger <h6> being smaller.

Example:

<html>

<head>

<title> Heading tags </title>

</head>
<body bgcolor=”pink”>

<center>

<h1> Using Heading Tags</h1><br>

<h1> RGMCET </h1><br>

<h2> RGMCET </h2><br>

<h3> RGMCET </h3><br>

<h4> RGMCET </h4><br>

<h5> RGMCET </h5><br>

<h6> RGMCET </h6><br>

</center>

</body>

</html>

(4)<font>:

This tag will give us an option to select text size, color and face.

Attributes:

a. color: Color of the text.

b. Size: Size of the text in points

c. Face: The font face can be a list of names separated by commas.

d. Id: Unique alphanumeric identifier for a tag, which we can use to refer to it.

Example:

<html>

<head>

<title> Using Font Styles </title>

</head>

<body bgcolor=”pink”>

<center>

<font size=”1” color=”red”> The Font Size is 1 </font> <br>

<font size=”10” color=”yellow”> The Font Size is 10 </font> <br>

<font size=”20” color=”orange”> The Font Size is 20</font> <br>

<font size=”30” color=”aqua”> The Font Size is 30 </font> <br>

</center>

</body>

</html>

Lists:
Lists lets us display information in a compact, right format. There are three kindsof lists:

1. Unordered List

2. Ordered List

3. Definition List

Unordered List:
An Unordered list is a list of items that are marked with burden. The Unordered list is

created by using <ul>tag are the list items in the list are createdby </ul> tag and the list items in

the list are created by <li> tag.

<ul>

<li>List Item 1 </li>

<li>List Item 2 </li>

</ul>

Example:

<html>

<head>

<title> Creating Unorder List </title>

</head>

<body bgcolor=”pink”>

<h1 align=”center”> Creating Unorder List</h1>

<h1 align=”center”>List of Colleges in Kurnool</h1>

<ul>

<li>GPREC</li>

<li>RGMCET</li>

<li>GPCET</li>

</ul>

</body>

</html>

Ordered List:

While the unordered lists display simple bullet before each list item. Ordered lists use a number system /
lettering scheme to indicate that the items are ordered in some ways, ordered lists are created by <ol> tag
and the list items are created using <li> tag.

Example:
<html>

<head>

<title> Creating Order List </title>

</head>

<body bgcolor=”pink”>

<h1 align=”center”> Creating Order List</h1>

<h1 align=”center”>List of branches in RGMCET</h1>

<ol>

<li>CSE</li>

<li>IT</li>

<li>ECE</li>

<li>EEE</li>

<li>CIVIL</li>

<li>ME</li>

</ol>

</body>

</html>

Definition List:-
These lists include both definition terms as well as their definition. To create the definition lists we use <dl>
tag. For creating definition terms we use <dt> tag and for data definitions we use <dd> tag.

Example:

<html>

<head>

<title>Creating Definition List</title>

</head>

<body bgcolo=”pink”>

<h1 align=”center”>Definition List</h1>

<dl>

<dt>CSE<dd>Computer Science & Engineering

<dt>ECE<dd>Electronics & Communication Engineering

<dt>IT<dd>Information Technology

<dt>EEE<dd>Electrical & Electronics Engineering

<dt>CE<dd>Civil Engineering

</dl>

</body>
</html>

Creating Hyperlinks:
What makes the web so effective is the ability to define links from one page to another. In web terms, a
“hyperlinks” is a reference on the web. Hyperlinks can point to any resources on the web. An anchor is a
term used to define a hyperlink destination inside a document. Format of anchor tag is:

<a href=”address”> Line Text </a>

The <a> anchor tag has the following attributes.

1. href: It holds the target URL of the hyperlink.

2. Id: A unique alphanumeric identifier for the tag, which we can use to refer to it.

3. name: It specifies an anchor name, the name we want to use when referring to enclose items.

4. Target: This attribute defines where the linked document will be opened.

Example:
<html>

<head>

<title>Creating Hyper Links</title>

</head>

<body bgcolor="pink">

<center><h1>This is page 1</h1>

<a href=”page2.html”>Click here</a>to goto page2

</center>

</body>

</html>

Setting hyperlink colors:

The default color of hyperlinks in a page is blue. Hyperlink that we have already visited are displayed in
violet and when we click a hyperlink,it turns red when the mouse button is down.We can set these colos in
<body> tag attributes link,vlink(visited link),alink(active link).

Example
<html>

<head>

<title>Setting Hyperlink colors</title>

</head>

<body bgcolor="pink" link=”green” vlink=”blue” alink=”red”>

<center><h1>Setting Hyperlink colors</h1>

<a href=”login.html”>Click here</a>to goto login page

</body>
 </html>

Creating HML tables:

A HTML table arranges data/information in terms of rows and columns.Tables are defined in HTML using
<table> tag.A table is divided into rows and each row each divided into data cells(columns).The rows of
table are created using <tr> tag and data cells are created by <td> tag.

<tr> - Table row

<td> - Table data

Format
<table>

<tr>

<td>row1,col1</td>

<td>row1,col2</td>

</tr>

<tr>

<td>row2,col1</td>

<td>row2,col2</td>

</tr>

</table>

• • Heading in a table are

defined with <th> tag

Format
<table>

<tr>

<th>heading 1</th>

<th>heading 2</th>

</tr>

<tr>

<td>data1</td>

<td>data2</td>

</tr>

</table>

Attributes of <table> tag:

• align : specifies the horizontal alignment of the table in the browser window,set to ”left,center,right”.

• background : specifies the URL of a background image to be used as background for the table.
• bgcolor : sets the background color of the table cells.

• border : sets the border width.

• bordercolor : sets the external border color of the entire table.

• cellpadding : sets the spacing between cell walls and content.

• cellspacing : sets the spacing between table cells.

• height : sets the height of the whole table.

• width : sets the width of the table.

Attributes of <tr> tag:

• align : specifies the horizontal alignment content in the table cells set to “left,center,right”.

• bgcolor : sets the background color of the table cells.

• bordercolor : sets the external border color of the entire table.

• Valign : sets the vertical alignment of data,set to top,middle,bottom.

Alignment of <td> tag

• align : specifies the horizontal alignment content in the table cells set to “left,center,right”.

• bgcolor : sets the background color of the table cells.

• bordercolor : sets the external border color of the entire table.

• colspan : indicates the how many cell columns of the table this cell should span.

• rowspan : indicates the how many cell rows of the table this cell should span.

Example

<html>

<head>

<title>Creating Tables</title>

</head>

<body bgcolor="pink">

<center><h1>Creating tables</h1>

<table border=”1” cellpadding=”3” cellspacing=”3”>

<tr>

<th colspa=”2”>Websites</th>

</tr>

<tr>

<td>Mail sites</td>

<td>Job sites</td>

</tr>

<tr>
<td>Gmail.com</td>

<td>Frushersworld.com</td>

</tr>

<tr>

</tr>

<td>Yahoo.com</td>

<td>Nauted.com</td>

</center>

</table> </body></html>

Advanced Table elements :

• <caption> : the element is an ptional element and it used to provide a string which describes,the contern of
the table ,it must follow the table element.

• <thead> : The rows in a table can bc groudated one are more time we can create a table by using this
<thead>.

• <tbody> : creates a table body when grouping rows.

• <tfoot> : Creates a table foot when groupin rows

Example:

<html>

<head>

<title>Advance Table Elements</title>

</head>

<body bgcolor="pink">

<h1 align="center">Contents of Web Technologies</h1>

<center>

<table border="2">

<caption>Subject Description</caption>

<thead>

<tr> <td colspan="2">Advance Java Programming</td>

</thead>

<tbody>

<tr> <td>Units</td>

<td>Contents</td>

</tr>

<tr> <td>I</td>

<td>HTML & CSS</td>

</tr>

<tr> <td>II</td>

<td>JavaScript</td>

</tr>

<tr> <td>III</td>

<td>XML</td>

</tr>

</tbody>

<tfoot align="center">

<tr>

<td colspan="2">The table foot</td>

</tr>

</tfoot>

</table>

</center>

</body>

</html>

Images in HMTL:

In HTML we have the capability of displaying images in a webpage.This images must be in a format that
the web browser can handle , such as Graphics Interchange Format(GIF) , Joint Photograph Expert
Group(JPEG) , and for some browser Portable Network Graphics(PNG) formats.

Displaying images in webpage is done by using <img> tag

Format

<img src=”URL of image source”>

Attributes of <img> tag:

• alt : this attribute is used to specify text to be displayed in place of image for browser that cannot handle
graphics.

• src : specifies the URL of the image to display.

• border : sets the border for the image.

• height : indicates the height of the image.

• width : indicates the width of the image.

• hspace : sets the horizontal space around the image.

• vspace : sets the vertical space around the image.

Example
<html>

<head>

<title>Images</title>

</head>

<body bgcolor="pink">

<center>

<h1>Images Example</h1>

<h3>Here is an image</h3>

<img src="one.jpg" alt="here is an image" width="300" height="150">

</center>

</body>

</html>

Adding borders and spaces around image:

<html>

<head>

<title>Borders & Spaces</title>

</head>

<body bgcolor="pink">

<center>

<h1>Adding border & spacing image</h1>

<h3>Here is an image</h3>

<img src="one.jpg" alt="here is an image" width="100" height="100" hspace="50" vspace="50"

border="8">

<img src="two.png" alt="here is an image" width="100" height="100" hspace="50" vspace="50"

border="8">

<img src="three.png" alt="here is an image" width="100" height="100" hspace="50" vspace="50"

border="8">

</center>

</body></html>

Working with Frames:

HMTL frames allow user to present documents in multiple views which may be independent windows or
sub windows. To divide a webpage into multiple parts and load different pages in a single web page we use
the concept of frames. To do this we use “<frameset>” tag which indicates the browser that the webpage
window has a frame. We can divide it into rows and columns by using attributes such as ‘rows’ & ‘cols’. In
order to provide definition or each frame we use “<frame>” tag.

Format is :
<frameset rows=”30%,70%”>

<frame src=”source page URL” name=”frame name”>

<frame src=”source page URL” name=”frame name”>

</frameset>

• <frameset> element actually takes place of <body> tag.

Attributes of <frameset> tag:

• border : used in the outermost <frameset> tag to set the border thickness for frames.

• bordercolor : set the color of the borders for all frames in the frameset.

• frameborder : set whether or not border for all frames in the frameset. Can be set to ‘yes’ or ‘no’ or ‘1’ or
‘0’.

• framespacing : set the pixel spacing between frames. set to the positive integers.

• cols : set the number of columns in the frameset. Separate the values assigned to this attribute with
comma(,) each value represents width of a column. Can be set to pixel values,percentages.

• Rows : set the number of rows in the frameset. Separate the values assigned to this attribute with
comma(,) each value represents width of a column. Can be set to pixel values,percentages.

Attributes of <frame> tag:

• bordercolor : set the color used for the frmae border. This setting overrides the color specified in the
surrounding <frameset> element.

• frameborder : sets whether or not border surround the frame. Can be set to ‘yes’ or ‘no’ or ‘1’ or ‘0’.

• name : sets the name of the frame we can use named frames as target for <a> tag.

• scrolling : determines scrolling possible values are : auto,yes or no.

• src : specifies the URL of the frame document. If we don’t specify a URL the frame will appear blank.

Creating vertical frames:

In order to display vertical frame we have use of ‘cols’ attribute.

Example

<html>

<head>

<title>Vertical Frames</title>

</head>

<frameset cols="30%,70%">

<frame src=frame1.html>

<frame src=frame2.html>

</frameset>

</html>

Frame1.html
<html>
<head>

<title>page1</title>

</head>

<body>

<h1>Web Technologies</h1>

</body>

</html>

Frame2.html

<html>

<head>

<title>page2</title>

</head>

<body>

<h1>Web Technologies</h1>

</body>

</html>

Output

Creating horizontal frames:

In order to display horizontal frame we have use of ‘cols’ attribute.

Example

<html>

<head>

<title>Horizontal Frames</title>
</head>

<frameset cols="50%,50%">

<frame src=page1.html>

<frame src=page2.html>

</frameset>

</html>

page1.html

<html>

<head>

<title>page1</title>

</head>

<body>

<h1 align=”center”>This is page1</h1>

</body>

</html>

page2.html
<html>

<head>

<title>page2</title>

</head>

<body>

<h1 align=”center”>This is page2</h1>

</body>

</html>

Output

Creating horizontal & vertical frames :

<html>

<head>

<title>Horizontal Frames</title>
</head>

<frameset cols="30%,70%">

<frameset cols="25%,50%,25%">

<frame src=page1.html>

<frame src=page2.html>

<frame src=page3.html>

</frameset>

<frameset cols="25%,50%,25%">

<frame src=frame1.html>

<frame src=frame2.html>

<frame src=frame3.html>

</frameset>

</frameset> </html>

<noframes> tag:

When the browser does not support frameset use <noframes> element to indicate to users that the browser
does not support frames. The <noframes> element is ignored that handle frames.

Example
<html>

<head>

<title>Vertical Frames</title>

</head>

<frameset cols="30%,70%">

<noframes>Your browser does not support frames...</noframes>

<frame src=on.html>

<frame src=two.html>

</frameset>

</html>