INDEX

S.N TITLE DATE SUBMITTED SIGNATURE

O. ON AND
REMARKS

1 EXPERIMENT 1
● Introduction to HTML

2 EXPERIMENT 2
● Write HTML Code to Create Different
tags in the Web Page.

3 EXPERIMENT 3

● Write HTML Code to Create Different

Size Heading in the Web Page.

4 EXPERIMENT 4
● Design a page having suitable
background colour and text colour
with title “My First Web Page” using
all the attributes of the Font tag.

5 EXPERIMENT 5
● Create a HTML document giving
details of your [Name, Age],
[Address, Phone] and [Register
Number, Class] aligned in proper order
using alignment attributes of Paragraph
tag.
6 EXPERIMENT 6
● Write HTML code to create a Web
Page that contains an Image at its
centre.

7 EXPERIMENT 7
● Create web Pages using Anchor
tag with its attributes for
external links.

8 EXPERIMENT 8
● Write a HTML code to create a
web page with yellow colour
background and display
moving message in green
colour.

9 EXPERIMENT 9
​ Create a web page,
showing an ordered list of
all second semester
courses(Subjects).

10 EXPERIMENT 10
​ Create a web page which
should generate following
output.
 CODE OF ETHICS

DO’s
● Students must use the computer lab for academic related activities
● Students must keep their work area clean and orderly.
● Students must properly reference all material found on the Internet.
● Students must regularly clean their systems by cleaning unnecessary data.
● Always shut down the system after use.

DON’T’s
● Do not eat or drink in the laboratory.
● Do not remove anything from the computer laboratory without permission.
● Do not touch, connect or disconnect any cable without your lab technician’s
permission.
● Do not misbehave in the computer laboratory.
● Do not insert metal objects such as clips, pins and needles into the computer
 EXPERIMENT -1
INTRODUCTION TO HTML
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.
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.

Client –Server Model

The client–server model is a distributed application structure in computing that
partitions tasks or workloads between the providers of a resource or service, called
servers, and service requesters, called clients. Often clients and servers
communicate over a computer network. A server is a host that is running one or
more server programs which share their resources with clients. A client requests a
server's content or service function.

Dept. of CSE AITS, Tirupati

 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.

Working of different types of web pages

The different types of web pages are :
Advocacy: An advocacy web page is one sponsored by an organization
to influence opinion. URL ends with .org
Business and marketing: It is one sponsored by a commercial enterprise
to sell or market their services. URL ends with .com
News: It provides timely information about current events and issues.
Informational: This includes reports, research findings, schools and college
information. URL ends with .edu or .gov.
Personal: It is created by an individual for his /her own personal need.URL has tidle(~).

General structure of a Web Page

A basic HTML page contains a Head section and a Body section. The
contents of the head section are normally invisible in a web browser and mainly
consists of some Metatags. The Body consist of those HTML elements that you
want to have displayed in your browser.

Dept. of CSE AITS, Tirupati

 <html>
<head>
</head>
<body>
</body>
</html>

Scripting language: A scripting language or script language is a programming language

that supports the writing of scripts, programs written for a special runtime environment that
can interpret and automate the execution of tasks which could alternatively be executed one-
by-one by a human operator.

URL: A uniform resource locator (URL), also known as web address, is a specific character
string that constitutes a reference to a resource. In most web browsers, the URL of a web
page is displayed on top inside an address bar. An example of a typical URL would be
"http://en.example.org/wiki/Main_Page".

Popular Search Engines

​ Yahoo Search
​ Google Search
​ Bing
​ Info.com
​ Search.com
​ Infospace

WWW: The World Wide Web (WWW) 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.

ILLUSTRATING HTML TAGS AND THEIR ATTRIBUTES

HTML:Hyper Text Markup Language is the most widely used language to write web
pages.it is a markup language.
Hypertext :Refers to the way in which web pages are linked together.
Markup Language: The user simply markups a text document with tags that tell a
web browser how to structure it to display.
Creating HTML document :To begin coding HTML user needs only two things:
1. A simple text editor (notepad).
2. A web browser.

Dept. of CSE AITS, Tirupati

Simple steps to create a basic HTML document:
1. Open notepad or another text editor.
2. At the top of the page type <html>
3. Add the opening header tag <head>
4. On the next line type <title> give title for page </title>
5. Go to next line and type closing header tag </head>
6. Go to next line and type opening body tag<body>
7. Go to next line and type closing body tag</body>
8. Finally, go to next line and type</html>
9. In the file menu, choose save as.
10. In the save as type option box, choose all files.
11. Name the file filename .html
12. Click save.
HTML document structure: An HTML document starts and ends with <html> and
</html> tags.These tags tell the browser that the entire
document is composed in HTML . Inside these two tags, the
document is split into 2 sections:
1. The <head>……</head> elements contains information about the document such
as title
of the document etc.
2. The <body>…. </body> elements contains the real content of the
document that you see on your screen.
ATTRIBUTES:
An attribute is used to define the characteristics of an element and is placed inside the
element’s opening tag. All attributes are made up of 2 parts: a name and a value.
-The name is the property you want to set.
-The value is what you want the value of the property to be.
Example: <font face=”arial” color=”red”>
 EXPERIMENT -2

Write HTML Code to Create Different tags in the Web Page.

Procedure:
1. Go to start ->all program – >accessories-> notepad.
2. Type the html code.
3. Go to file->save->save the file with html extension.
4. Run the html code using browser.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<h1>HTML WEB PAGE</h1>
<p>This is a paragraph.</p>
</body>
</html>
*******output***************
 EXPERIMENT -3

Write HTML Code to Create Different Size Heading in the Web Page.
Procedure:
1. Go to start ->all program – >accessories-> notepad.

2. Type the html code.

3. Go to file->save->save the file with html extension.

4. Run the html code using browser.

<html>
<head>
<title>program 09</title>
<body>
<h1>This is heading h1</h1>
<h2>This is heading h2</h2>
<h3>This is heading h3</h3>
<h4>This is heading h4</h4>
<h5>This is heading h5</h5>
<h6>This is heading h6</h6>
</body>
</head>
</html>
*******output***************
 EXPERIMENT -4

3) Design a page having suitable background colour and text colour with title
“My First
Web Page” using all the attributes of the Font tag.

Procedure:
1. Go to start ->all program – >accessories-> notepad.

2. Type the html code.

3. Include title ”my first web page” in title tag.

4. Set the background for the webpage by using bgcolor attributes of the body tag.

5. Use font tag to display text.

6. Go to file->save->save the file with html extension.

7. Run the html code using browser.

<html >

<head>

<title>My first web page</title>

</head>

<body bgcolor="green">

<font size="16" color="white" face="Arial"> Welcome to My COLOUR SITE, HTML...</font>

</body>

</html>
*******output***************
 EXPERIMENT -5

Create a HTML document giving details of your [Name, Age],

[Address, Phone] and [Register
Number, Class] aligned in proper order using alignment attributes of Paragraph
tag.
Procedure:

1. Go to start ->all program – >accessories-> notepad

2. Type the html code

3. Align [name ,age]to center by using align =”left ” of <p> tag

4. Align [register , number , class] to right using align=”right” of <p> tag

5. Go to file-> save->save the file with html extension

6. Run the html code using browser

<html>
<head>
<title>program 02</title>
</head>
<body>
<p align="center">
Name: AITS<br>
Age: 16
</p>
<p align="right">
Address: Aghraharam post TIRUPATI<br> Phone:
123535615
</p>
<p align="left">
Reg No:
20AK1A0501<br>
Class:2nd Sem C’s
</p>
</body>
</html

*******output***************
 EXPERIMENT-6

Write HTML code to create a Web Page that contains an Image at its centre.

Procedure:

1. Go to start ->all program – >accessories-> notepad

2. Type the html code

3. Include <img> tag inside <center> tag and set align attribute of img tag to middle

4. Go to file->save->save the file with html extension

5. Run the html code using browsres

<html>
<head>
<title>program 03</title>
</head>
<body>
<center>
<img src="C:/Users/harsh70leza3/Documents/image.jpg " height="200"
width="200" align="middle"/>
</center>
</body>
</html>
*******output***************
 EXPERIMENT-7

Create web Pages using Anchor tag with its attributes for external
links.

Procedure:

1. Go to start->all programs->accessories->notepad.

2. Create file called as p1.html

3. To provide external link between p1.html and gmail website use <a> in p1.html and mention

url of gmail website in href attribute.

4. Save the file.

5. Run the p1.html file using browsers.

6. If we click on the link it should link to gmail website.

P1.html

<html>
<head><title>page 1</title>
</head>
<body>
<p>Welcome to AITS</p>
<a href="http://www.gmail.com">click here to open gmail website</a>
</body>
</html>
*******output***************

*******output***************
 EXPERIMENT-8

Write a HTML code to create a web page with yellow colour background and
display moving message in green colour.

Procedure:

1. Go to start->all programs->accessories->notepad

2. Type the html code

3. Include bgcolor=”yellow” attribute in the body tag

4. Use font tag to display moving text in green color by setting color=”green” attribute

5. Include marquee tag inside font tag to display moving text

6. Go to file –>save->save the file with html extension

7. Run the html code using browser

<html>
<head>
<title>program 09</title>
</head>
<body bgcolor=" yellow">
<font color="green"><marquee direction="right">
<h1><b>Welcome to DPG DEGREE COLLEGE </b></h1> </marquee></font>
</body>
</html>
*******output***************
 EXPERIMENT-9
Create a web page, showing an ordered list of all second semester
courses(Subjects).

Procudure:

1. Go to start->all programs->accessories->notepad

2. Type the html code

3. Use <ol> ---- </ol> tag to display ordered list of all subject

4. Inside <ol>tag use <li> -- </li> tag to list each subject

5. Go to file –>save->save the file with html extension

6. Run the html code using browser

<html>
<head>
<title>program 09</title>
</head>
<body>
<ol><b>
<li>English </li>
<li>Maths-2</li>
<li>Digital Electronics & computer
fundamentals</li> <li>Basic Web design lab</li>
<li>multimedia lab</li>
<li>digital electronics</li>
</b>
</ol>
</body>
</html>

*******output***************
 EXPERIMENT-10

Create a web page which should generate following output.

Procedure:

1. Go to start- >all programs-> accessories->notepad

2. Type the html code

3. Use<frameset> tag to divide the webpage into 2 equal frames by setting cols =”*,*”

attribute

4. In the first frame place video clip by using <frame> tag

5 .Again divide the second frame into 2 equal rows using rows=”50%,50%” in

another frameset tag

6 Place one audio and video clip in other 2 frames.

7. Go to file –>save –>save the file with html extension

8. Run the html file using Firefox browser

<html>
<frameset cols="*,*">
<frame src=" path or location of your image" name="left">
<frameset rows="50%,50%">
<frame src=" path or location of your image" name="topright">
<frame src=" path or location of your image" name="topbuttom">
</frameset>
</frameset>
</html>
*******output***************