Unit - I Introduction To HTML: Web Site

BASIC WEB DESIGN LAB MANUAL
UNIT – I
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
1
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
<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
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”>
Graded Exercises
1. 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 GPT
TURUVEKERE...</font>
</body>
</html>
***************output***************
2. 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: GPT<br>
Age: 16
</p>
<p align="right">
Address: Kodigehalli post TURUVEKERE<br>
Phone: 123535615
</p>
<p align="left">
Reg No: 169cs15015<br>
Class:2nd Sem C’s
</p>
</body>
</htmL>
Dept. Of CSE
****************output*************
Dept. Of CSE
3. Write HTML code to design a page containing some text in a paragraph by giving
suitable heading style.
Procedure:
1. Go to start ->all program –> accessories-> notepad

3. Use<h1> to<h6>tag to display heading
4. Use <p> tag for the paragraph
5. Go to file- >save->save the file with html extension
6. Run the html code html using browser
<html>
<head>
</head>
<body>
<center>
<h1>Basic Web design Lab</h1>
</center>
<h2 align="left"> Definition </h2>
<h3 align="left">Website</h3>
<p>
A set of inter connected web pages usually including a home page and many other web pages
</p>
</body>
</html>
**************output**************
Dept. Of CSE
4. Create a page to show different character formatting (B, I, U, SUB, SUP) tags.
viz : log b m p = p logb m
Procedure:

3. Include <b>,<u>,<sup>,<sub>,tags
4. Go to file->save-> save the file with html extension
5. Run the html code using browsers
<html>
<head>
</head>
<body>
<p> <b> <i> log</i></b> <sub>b </sub>m<sup> p</sup> =p<b> <i> log </i>
</b><sub>b</sub> m</p>
</body>
</html>
**************output**************
Dept. Of CSE
5. Write HTML code to create a Web Page that contains an Image at its centre.
Procedure:
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>
</head>
<body>
<center>
<img src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample
Pictures\Winter.jpg" height="200" width="200" align="middle"/>
</center>
</body>
</html>
***************output***************
Dept. Of CSE
6. Create a web page with an appropriate image towards the left hand side of the page,
when user clicks on the image another web page should open.
Procedure:
1. Go to start –>all programs-> accessories->notepad
2. Include<img> tag inside<a> tag
3. Save the file as p1.html
4. Create another file
6. Save the file as p2.html
7. In <a> tag assign p2.html to href attribute
8. Go to file-> save->save the file with html extension
9. Run the html code using browsers
<html>
<head>
</head>
<body>
<a href="p2.html">
<img src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample
Pictures\Winter.jpg" align="left" width="200" height="200"/>
</a>
</body>
</html>
P2.html
<html>
<head>
</head>
<body> Hi Welcome....</body>
</html>
Dept. Of CSE
******************output******************
Dept. Of CSE
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 gpt</p>
<a href="http://www.gmail.com">click here to link gmail website</a>
</body>
</html>
****************output*******************
Dept. Of CSE
8. Create a web page for internal links; when the user clicks on different links on the web
page it should go to the appropriate locations/sections in the same page.
Procedure:
3. First give name for the each section of the page by using name attribute of the <a>tag
(i.e <a name=”home”> </a>)
4. To provide link for the sections use href=”#name of section” in<a> tag.
5. Go to file->save–>save the file with .html extension.
6. Run the html code using browsers.
Note: Include paragraph means, include some text paragraph in <p> tag
<html>
<head><title>program 8</title></head>
<body>
<a name="home"></a>
<p>include paragraph
</p>
<h1>contents</h1>
<a href="#link1">History</a><br>
<a href="#link2">Html version</a><br>
<a name="link1"></a>
</p><br>
<a name="link2"></a>
html versions
</p></br>
<a href="#home">home</a>
</body>
</html>
Dept. Of CSE
*********output************
Dept. Of CSE
9. Write a HTML code to create a web page with pink color background and display
moving message in red color.
Procedure:
1. Go to start->all programs->accessories->notepad
3. Include bgcolor=”pink” attribute in the body tag
4. Use font tag to display moving text in red color by setting color=”red” attribute
5. Include marquee tag inside font tag to display moving text
6. Go to file –>save->save the file with html extension
<html>
<head>
</head>
<body bgcolor="pink">
<font color="red"><marquee direction="left">
Welcome to GPT TURUVEKERE</marquee></font>
</body>
</html>
***********************output************
Dept. Of CSE
10. Create a web page, showing an ordered list of all second semester courses
(Subjects) Procudure:
1. Go to start->all programs->accessories->notepad
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
<html>
<head>
</head>
<body>
<ol>
<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>
</ol>
</body>
</html>
***************output****************
Dept. Of CSE
11. Create a web page, showing an unordered list of names of all the Diploma Programmes
(Branches) in your institution.
Procedure:
1. Go to start- >all programs- >accessories->notepad
3.Use <ul> .......</ul> tag to display unordered list of names of all the branches
4.Inside <ul>.....</ul> tag use <li>.....</li> tag to list each branch
5.Go to file – >save –> save the file with html extension
6.Run the html code using browser
<html>
<head>
</head>
<body>
<ul>
<li> Computer science and Engg </li>
<li> Electronics and communication </li>
<li> Civil Engg </li>
<li> Mechanical Engg</li>
</ul>
</body>
</html>
***************output********************
Dept. Of CSE
12. Create a HTML document containing a nested list showing a content page of any
book.
Procedure:
3. Include <ol>tag for naming the chapter of the contents page.
4. Within the previous <ol>tag includes another <ol> tag to mention the different section of
the particular chapter.
5. Use <li> tag for adding the list items.
6. Go to file->save–>save the file with html extension.
7. Run the html code using browsers.
<html>
<head><title>program 12</title>
</head>
<body>
<ol type=1>
<li>chapter 1</li>
<ol type=1>
<li>section one</li>
<li>section two</li>
</ol type=1>
<li>chapter 2</li>
<ol type=1>
<li>section one</li>
<li>section two</li>
</ol>
</ol>
</body>
</html>
**************output************
Dept. Of CSE
13. Create the following table in HTML with Dummy Data:
Reg. Student Date of

Year/Semester
Number Name Admission
Procedure:
1. Go to start- all programs- accessories-notepad
3. Use<table>...</table> tag to draw table
4. Create 3 rows in the table by using <tr>...</tr> tag
5. In the first row create table heading by using <th>...... </th>tag
6. In the next 2 rows add the data by using <th>.....</th>tag
7. Go to file –>save->save the with.html extension]
8. Run the html file using firefox browser
<html>
<head>
</head>
<body>
<table border= "1">
<tr>
<th> reg.number</th>
<th> student name</th>
<th> year/semester </th>
<th>date of admission</th>
</tr>
<tr>
<td> 169cs12035</td>
<td> suma</td>
<td> 2nd</td>
<td> 06/06/2012 </td>
</tr>
<tr>
<td> 169cs12036 </td>
<td> xyz</td>
<td>2nd</td>
<td> 07/07/2012 </td>
</tr>
</table>
</body>
</html>
Dept. Of CSE
****************output********************
Dept. Of CSE
14.Create a web page which divides the page in two equal frames and place the audio
and video clips in frame-1 and frame-2 respectively.
FRAME-1 FRAME-2
Procedure:
1. Go to start- >all programs-> accessories->notepad
3. Use<frameset> tag to divide the webpage into 2 equal frames by setting cols =”*,*” attribute
4. In the first frame place audio clip by using <frame> tag
5. In the second frame place video clip by using another <frame>
tag Note : audio & video & file should be in same folder
6. Go to file –>save –>save the file with html.extension
7. Run the html file using Firefox browser
<html>
<frameset cols="*,*">
<frame src="Horse-neighing.mp3">
<frame src="ARRRRR Horse.mp4-2.mp4">
</frameset>
</html>
******************output*****************
Dept. Of CSE
15.Create a web page which should generate following output:
FRAME-2
FRAME-1
FRAME-3
Procedure:
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="ARRRRR Horse.mp4-2.mp4" name="left">
<frameset rows="50%,50%">
<frame src="Horse-neighing.mp3" name="topright">
<frame src="ARRRRR Horse.mp4-2.mp4" name="topbuttom">
</frameset>
</frameset>
</html>
********************output**********************
Dept. Of CSE
16. Create a web page using Embedded CSS and

multimedia Procedure:
3. Use<style> tag for css to apply styles for body, h1, p tags
4. Include audio file by using <audio> tag
7. Go to file –>save –>save the file with html extension

8 . Run the html file using firefox browser
<html>
<body>
<style>
body {
background-color:blue;
}
h1 {
color:orange;
text-align:center;
}
p{
font-family: "Times New Roman";
font-size: 20px;
}
</style>
<h1>My First CSS Example</h1>
<p>This is a audio.</p>
<audio controls>
<source src="Horse-neighing.mp3">
</audio>
</body>
</html>
Dept. Of CSE
*****************output*******************

Unit - I Introduction To HTML: Web Site

Uploaded by

Copyright:

Available Formats

Unit - I Introduction To HTML: Web Site

Uploaded by

Document Information

Original Description:

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

Unit - I Introduction To HTML: Web Site

Uploaded by

Copyright:

Available Formats

BASIC WEB DESIGN LAB MANUAL

Types of Web Pages:

Browsers & their types

Client –Server Model

Working of different types of web pages

Advocacy: An advocacy web page is one sponsored by an organization to influence

Business and marketing: It is one sponsored by a commercial enterprise to sell or

General structure of a Web Page

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

Popular Search Engines

ILLUSTRATING HTML TAGS AND THEIR ATTRIBUTES

Simple steps to create a basic HTML document:

3. Add the opening header tag <head>

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

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

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

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

13. Create the following table in HTML with Dummy Data:

Reg. Student Date of

15.Create a web page which should generate following output:

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

16. Create a web page using Embedded CSS and

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

You might also like