Course Code L T P C

1004223280 WEB TECHNOLOGIES 1 0 2 2

Course Objectives:
1. Learn the fundamentals of computer programming and how software
applications work.
2. Develop the ability to design and create static websites with attractive front-end
designs.
3. Gain hands-on experience through projects to prepare for a career in web
application.

Course Outcomes:

CO1: Understand the basic structure of HTML, its tags, attributes, and the client
server model to create simple web pages.
CO2: Apply HTML tags, formatting elements, and multimedia integration
techniques to design interactive and visually appealing web pages.
CO3: Create user-interactive web pages with forms, frames, and navigation features
using alignment and styling attributes.
CO4: Implement Cascading Style Sheets (CSS) and scripting languages to enhance
the functionality and aesthetics of web pages.

Unit-I
Introduction to HTML
Introduction to the client-server model, Types of computer applications. (Console,
Window, Web-based, Mobile, and Cloud applications). History of HTML, HTML
tags and attributes, Difference between HTML Tag and HTML Element,
Understanding HTML attributes and their types, Basic HTML syntax and rules.
Standard HTML document structure.

Activity 1: Write HTML code to design a page containing some text in a paragraph
by giving suitable heading style.

1
Unit- II
HTML Tags:
Basic Text Markup, Text formatting tags, Heading types, font tag, Images, image map,
Hypertext Links, navigating web pages. What is Lists and various types of lists, design
the Tables using table tag.

Activity 2: Design a page having suitable background colour and text colour with
title “My First Web Page” using all the attributes of the Font tag.
Activity 3: Create a page to show different character formatting (B, I, U, SUB, SUP)
tags.
viz: logb mp = plogb m
Activity 4: Write HTML code to create a Web Page that contains an Image at its
center.

UNIT- III
User Interactive Web Page
Form tag, user interactive components, Text box, label, text area, check box, radio
button, drop down box, submit and reset. Frames: Importance of frames, divide the
web browser window into different sections.

Activity 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.
Activity 6: Write HTML code to design a page containing some text in a paragraph
by giving suitable heading style.
Activity 7: Create web Pages using Anchor tag with its attributes for external links.
Activity 8: Create a web page, showing an ordered list of all second semester courses.

Unit- IV
Cascading Style Sheets:
Creating Style Sheet, CSS Properties, Types of CSS, CSS Styling (Background, Text
Format, Controlling Fonts) Working with block elements and objects, Working with
Lists and Tables, CSS Id.
Activity 9: Create a web page using Embedded CSS and multimedia.
2
Activity 10: Write an HTML page that contains a selection box with a list of 5
countries, when the user selects a country, its capital should be printed next to the
list; Add CSS to customize the properties of the font of the capital (color, bold and
font size).

Unit- V
Introduction to Client side and server-side scripting language Java Script. Introduction
about WAP, WML in HTML.
Activity 11: Wap in html to create a webpage to show different hobbies.
Activity 12: Wap in html to create a webpage to show various confectionary items
using ordered list and unordered list.

Textbooks:
1. Programming the World Wide Web, Robet W Sebesta, 7ed, Pearson.
2. Web Technologies, Uttam K Roy, Oxford
3. The Web Warrior Guide to Web Programming, Bai, Ekedahl,
Farrelll, Gosselin, Zak, Karparhi, Maclntyre, Morrissey, Cengage

Reference Books:
1. Web Technologies, HTML, JavaScript, PHP, Java, JSP, XML and AJAX, Black
book, Dream Tech.

3
Basic Instructions for to creating HTML document

To begin coding HTML user needs only two things:

1. A simple text editor (notepad).
2. A web browser.

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 to 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:
 The <head>……</head> elements contain information about the document such
as title of the document etc.

 The <body>…. </body> elements contain the real content of the document that
you see on your screen.
General structure of a Web Page
<html>
<head>
</head>
<body>
</body>
</html>

4
Activity 1: 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
2. Type the html code
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
Program:
<html>
<head>
<title> Activity 01</title>
</head>
<body>
<center>
<h1>Basic Web design Lab</h1>
</center>
<h2 align="left"> Definition </h2>
<h3 align="left">Website</h3>
<p>
A set of interconnected web pages usually including a home page and many
other web pages
</p>
</body>
</html>
***************output***************

Result: Thus, code to design a page containing some text in a paragraph by giving
suitable heading style was executed and verified successfully.
5
Activity 2: 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.

Program:

<html >
<head>
<title> Activity 02 My first web page</title>
</head>
<body bgcolor="blue">
<font size="16" color="white" face="Arial"> Welcome to Vignan’s IIT, Duvvada,
Visakhapatnam...</font>
</body>
</html>
***************output***************

Result: Thus, Design a page having suitable background color and text color was
executed and verified successfully.

6
Activity 3: Create a page to show different character formatting (B, I, U, SUB, SUP)
tags.
viz: logb mp = plogb m
Procedure:

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

2. Type the html code
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
Program:
<html>
<head>
<title>Activity 03</title>
</head>
<body>
<p> <b> <i> log</i></b> _bm^p =p<b> <i> log </i>
</b>_b m</p>
</body>
</html>

**************output**************

Result: Thus, different character formatting (B, I, U, SUB, SUP) tags was executed and
verified successfully.

7
Activity 4: Write HTML code to create a Web Page that contains an Image at its
center.

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 browsers

Program:
<html>
<head>
<title>Activity 04</title>
</head>
<body>
<center>
<img src= "C:\Users\10329-PC\Pictures\v.png"" height="200" width="200"
align="middle"/>
</center>
</body>
</html>

**************output**************

Result: Thus, code to create a Web Page that contains an Image at its center was
executed and verified successfully.

8
Activity 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
Program:
<html>
<head>
<title>Activity 05</title>
</head>
<body>
<p align="center"> Name: Vignan's Institute of Information Technolohy<br> Age: 21
</p>
<p align="right">
Address: Duvvada post Visakhapatnam<br> Phone:
123535615
</p>
<p align="left"> Reg No:
21L31A0403<br>
Class:3rd Sem II
</p>
</body>
</html>
Output

Result: Thus, Create a HTML document giving details was executed and verified
successfully.
9
Activity 6: 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
2. Type the html code
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
Program:
<html>
<head>
<title> Activity 06</title>
</head>
<body>
<center>
<h1>Basic Web design objective</h1>
</center>
<h2 align="left"> Definition </h2>
<h3 align="left">Website</h3>
<p>
The Basic Web Design Lab is designed to equip students with the foundational skills
required for creating and designing websites. This lab emphasizes the practical
application of HTML, CSS, and basic JavaScript for building responsive and visually
appealing web pages. </p>
</body>
</html>
**************output**************

Result: Thus, design a page containing some text in a paragraph by giving suitable
heading style was executed and verified successfully.
10
Activity 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.
Program:
<html>
<head><title>Activity 7</title>
</head>
<body>
<p>Welcome to Vignan’s IIT, Visakhapatnam</p>
<a href="http://www.gmail.com">click here to link gmail website</a>
</body>
</html>
Outcome

Result: Thus, Create web pages using anchor tag with its attributes for external links
was executed and verified successfully.

11
Activity 8: Create a web page, showing an ordered list of all second semester courses
subjects.
Procedure:
1. Go to start->all programs->accessories->notepad
2. Type the html code
3. Use <ol>---</ol> tag to display ordered list of all subjects
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

Program:
<html>
<head>
<title>Activity08</title>
</head>
<body>
<ol>
<li>EDC </li>
<li>NA</li>
<li>DLCO</li> <li>Basic Web design</li>
<li>EDC lab</li>
<li>ACO</li>
<li>ADC</li>
<li>Digital Electronics</li>
</ol>
</body>
</html>
Outcome:

Result: Thus, Create a web page, showing an ordered list of all second semester
courses subjects was executed and verified successfully.
12
Activity 9: Create a web page using Embedded CSS and multimedia.
Procedure:
1. Go to start- >all programs-> accessories->notepad
2. Type the html code
3. Use<style> tag for css to apply styles for body, h1, p tags
4. Include audio file by using <audio> tag
5. Go to file –>save –>save the file with html extension
6. Run the html file using Firefox browser

Program:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
color: orange;
text-align: center;
font-family: "Times New Roman", serif;
}
h1 {
margin: 20px 0;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a video.</p>
<!-- Embedding YouTube video -->
<iframe width="560" height="315"
src="https://www.youtube.com/embed/sq8ISpdiaLc"
13
 title="YouTube video player"
frameborder="0"
allow="autoplay; encrypted-media; picture-in-picture"
allowfullscreen>
</iframe>
</body>
</html>

(or)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First CSS Example</title>
<style>
body {
background-color: blue;
color: white;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: orange;
text-align: center;
margin-top: 20px;
}
p{
font-family: "Times New Roman", serif;
font-size: 20px;
text-align: center;
margin-bottom: 20px;
}
14
 iframe {
display: block;
margin: 0 auto;
border: none;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a video:</p>
<!-- Embedding YouTube video using iframe -->
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/sq8ISpdiaLc"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture"
allowfullscreen>
</iframe>
</body>
</html>

Outcome:

Result: Thus, Create a web page using Embedded CSS and multimedia was executed
and verified successfully.

15
Activity 10: Write an HTML page that contains a selection box with a list of 5
countries, when the user selects a country, its capital should be printed next to the
list; Add CSS to customize the properties of the font of the capital (color, bold and
font size).
Program:
<html>
<head>
<title>Get the country capital</title>
<link href="28.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="form-box">
<font color="white" size="4"><b>Select the country name to find its capital and
continent</b></font><br/><br/>
<br>
<select <input type="text" class="resizedTextbox" id="myedit"/>>
<option>Select Country</option>
<option>Germany</option>
<option>United States of America</option>
<option>India</option>
<option>United Kingdom</option>
<option>France</option>
</select>
</div>
<div id="result">&nbsp;</div>
</body>
</html>
Output

Result: Thus, HTML page that contains a selection box was executed and verified
successfully.

16
 Optional (or)
Program:
<!DOCTYPE html>
<html>
<head>
<title>Get the Country Capital</title>
<link href="28.css" type="text/css" rel="stylesheet"/>
<style>
/* Inline CSS to style the result text */
#result {
font-size: 18px;
color: white;
margin-top: 20px;
}
.form-box {
margin-top: 20px;
}
</style>
<script>
// JavaScript function to display capital and continent
function getCapitalAndContinent() {
const countryData = {
"Germany": { capital: "Berlin", continent: "Europe" },
"United States of America": { capital: "Washington, D.C.", continent: "North
America" },
"India": { capital: "New Delhi", continent: "Asia" },
"United Kingdom": { capital: "London", continent: "Europe" },
"France": { capital: "Paris", continent: "Europe" }
};

const selectedCountry = document.getElementById("countrySelect").value;

const resultDiv = document.getElementById("result");

17
 if (selectedCountry === "Select Country") {
resultDiv.innerHTML = "Please select a valid country.";
} else {
const countryInfo = countryData[selectedCountry];
resultDiv.innerHTML = `<b>Capital:</b>
${countryInfo.capital}<br><b>Continent:</b> ${countryInfo.continent}`;
}
}
</script>
</head>
<body style="background-color: #2C3E50; color: white;">
<div class="form-box">
<font color="white" size="4"><b>Select the country name to find its capital and
continent</b></font><br/><br/>

<select id="countrySelect" onchange="getCapitalAndContinent()">

<option>Select Country</option>
<option>Germany</option>
<option>United States of America</option>
<option>India</option>
<option>United Kingdom</option>
<option>France</option>
</select>
</div>

<div id="result">&nbsp;</div>
</body>
</html>

Outcome

18
Activity 11: Wap in html to create a webpage to show different hobbies.

Program:
<html>
<head>
<title>My self</title>
</head>
<body>
<h1>Hobbies and Personal details</h1>
<p>My name is .
<br>I study in class .
<br>I am years old .
<br>My College name is .
</br>My father name is.
<br>He is in Army.
<br>My mother name is.
<br>She is householder.
<br>My favourite subject is.
<br>My hobbies are .
<br>I want to became an/a .
</p>
</body>
</html>

Output

Result: Thus, Wap in html to create a webpage to show different hobbies was executed
and verified successfully.

19
Activity 12: Wap in html to create a webpage to show various confectionary items
using ordered list and unordered list.
Program:
<HTML>
<HEAD>
<TITLE> Confectioty products </TITLE>
</HEAD>
<BODY>
<H1> confectionary products</h1>
<UL>
<LI> choclate
<LI> Biscuits
<LI> jelly
<LI> little hearts
</UL>
<H1>products</h1>
<UL TYPE = "SQUARE">
<LI> snickers

<LI> dark fantasy

<LI TYPE = "DISC"> twix
<LI TYPE = "CIRCLE"> almond
</UL>
<ol>
<LI> choclate
<LI> Biscuits
<LI> jelly
<LI> little hearts
</ol>
<H1>products</h1>
<oL TYPE = "SQUARE">
<LI> snickers
<LI> dark fantasy
20
<LI TYPE = "DISC"> twix
<LI TYPE = "CIRCLE"> almond
</ol>
</BODY>
</HTML>

Output

Result:
Thus, the html program for webpage to show various confectionary items
using the ordered list and unordered list was executed and verified successfully.

21