Vasavi College of Engineering

VASAVI COLLEGE OF ENGINEERING

(AUTONOMOUS)
(AFFLIATED TO OSMANIA UNIVERSITY)
Hyderabad - 500031
DEPARTMENT OF : INFORMATION TECHNOLOGY
NAME OF LAB0RATORY : Web Technologies Lab
Name :Hema Kamani Roll No:1602-18-737-071 Page No:
AIM: Create HTML Document using basic Tags like <h1> to <h6>
TAGS USED:

<!DOCTYPE html> - It is an "information" to the browser about what document type to expect.

<html> tag represents the root of an HTML document.
<head> element is a container for metadata (data about data) and is placed between the
<html> tag and the <body> tag.
<body> element contains all the contents of an HTML document, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
<h1> to <h6> defines Html headings
<h1> defines the most important heading.
<h6> defines the least important heading.
Program:
<html>
<head>
<title>header </title></head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
(AUTONOMOUS)
Hyderabad - 500031
Output:
Result:To create HTML Document using basic Tags like <h1> to <h6> was completed successfully.
(AUTONOMOUS)
Hyderabad - 500031
AIM: Create HTML document using paragraph tag and line break tag.
TAGS USED:
<p> - Tag used for writing paragraphs
<br>- Tag used to insert a line break
Program:
<html>
<head>
<title>Paragraph and line break </title></head>
<body>
<p>Here is a first paragraph of text</p>
<p>Here is a second paragraph of text</p>
<p>Here is a third paragraph of text</p>
<p>Vasavi College of Engineering,Department of IT WEB Technologies Lab</p>
<p>Vasavi College of Engineering,<br>Department of IT<br> WEB Technologies Lab</p>
<br>
<h3 style="text-align: center">B.E. 3/4 IT Section-B</h3>
</body>
</html>
Output:
Result: Html document to be created using tags paragraph and line break is created successfully.
(AUTONOMOUS)
Hyderabad - 500031
Aim: Create Menu using ordered list and other options

TAGS USED:
<ol> - Tag to create a ordered list
<li> - Tag to create a list item
Program:
<html>
<head>
<title>Subjects </title></head>
<body>
<ol type="I" >
<li style="font-size: 20px; font-weight: bold" >Semester Subjects </li>
<ol>
<li> Programming solving in C</li>
<li>Physics-I</li>
<li>Chemistry-I</li>
</ol>
<li style="font-size: 20px; font-weight: bold">Semester Subjects </li>

<ol>
<li> Object Oriented Programming</li>
<li>Physics-II</li>
<li>Chemistry-II</li>
</ol>
<li style="font-size: 20px; font-weight: bold">Semester Subjects </li>
<ol>
<li> Data Structures</li>
<li>Probability and statistics</li>
<li>Java Programming</li>
</ol>
<li style="font-size: 20px; font-weight: bold" >Semester Subjects</li>

<ol>
<li> Computer Networks</li>
<li>Operating Systems</li>
<li>Theory of Automata</li>
</ol>
<li style="font-size: 20px; font-weight: bold" >Semester Subjects</li>

<ol>
<li> WMC</li>
<li>NS</li>
<li>ISM</li>
</ol>
(AUTONOMOUS)
Hyderabad - 500031
</ol>
</body>
</html>
Output:
RESULT:
Html document to create menu using ordered list is completed successfully.
(AUTONOMOUS)
Hyderabad - 500031
Q-4:
AIM:Create HTML document using ordered lists and other options.
TAGS USED:
<ul> - Tag to create a unordered list
<li> - Tag used to create a list item.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>HTML UNORDERED LISTS</title>
</head>
<body>
<h3>List of scripting languages</h3>

<ul>
<li>HTML</li>
<li<JAVA SCRIPT</li>
<li>PYTHON</li>
<li>PHP></li>
</ul>
<h3>List of scripting subjectss</h3>
<ul>
(AUTONOMOUS)
Hyderabad - 500031
<li>Web Technologies</li>
<li<Software ENgineering</li>
<li>Compiler Constrcution</li>
<li>DBMS</li>
</ul>
<h3>List of It Labs</h3>
<ul>
<li>IT LAB-I</li>
<li>IT LAB-II</li>
<li>IT LAB-III</li>
<li>IT LAB-IV</li>
</ul>
<br>
</body>
</html>
(AUTONOMOUS)
Hyderabad - 500031
OUTPUT:
Result:
Html document to use ordered list and other options is completed successfully
(AUTONOMOUS)
Hyderabad - 500031
9 Pre-Lab Questions:
1. Do all HTML tags come in pair?

Ans: No, there are single HTML tags that do not need a closing tag. Examples: <img>, <meta>, <br>,
<link>,
<source>.
2. How do you insert a comment in html?
Ans: The  is an HTML comment tag. To comment out in HTML, we insert information between
 tags (browsers won't show these notes).
3. What if there is no text between the tags or if a text was omitted by mistake? Will it affect the
display of html
file?
Ans: No it will not affect the display. If there is no text between the tags, then there is nothing to
format.
Therefore no formatting will appear. Only the text will be empty in the html file.
4. Mention what are the main language or platform used for web-design?
Ans: The following are the main languages or platforms used for web designing:
• HTML which stands for Hypertext Markup Language that helps design the base template.
• CSS which stands for Cascading Style Sheets is used for styling the pages.
• JS which is JavaScript is used to code the functionality.
• PHP or Personal Home Page which is used for server-side scripting
5.Differentiate between HTML and XHTML? Ans:
Parameter HTML XHTML

Hypertext Markup Language
DEFINITION (HTML) Extensible Hypertext Markup
is the standard markup language for Language (XHTML) is a part of th
creating web pages and web family XML markup languages th
applications. mirrors the versions of HTML.
CASE SENSITIVITY HTML is not case sensitive. The XHTML is case sensitive. The
attributes and tags can either be attributes and tags should be in
lowercase or uppercase. lowercase
DEBUGGING HTML is easier to debug. XHTML is harder to debug.
(AUTONOMOUS)
Hyderabad - 500031
FORMATTING HTML is not well formatted like XHTML is well formatted and
XHTML.
6.How do you create multi-coloured text in a webpage? Ans: Using css we can create multi
coloured text.
What is a marquee?
Ans: Marquee is one of the important tags introduced in HTML to support such scrollable texts and
images within a web page.
7.Are <br /> tags the only way to separate sections of text?
Ans: NO, we can also use <p> tag or <blockquote> tag to separate text.
8.If I do not put <!DOCTYPE html>, will HTML 5 work?

Ans: Yes it will work.
9.How do you make a picture into a background image of a web page? Ans: <body
background="image.jpg">
What are some of the common lists that can be used when designing a page? Ans: ordered list and
unordered list
10.How do you change the number type in the middle of a list?
Ans: by using the type tag and assigning it the number type.
11.Identify some of the common lists that can be used when designing a page?
Ans: ordered list and unordered list
12.Which tag is used for creating ordered list in html document?
Ans: <ol></ol> is used for ordered list.
13.List the different attributes supported by the <ol> tag. Ans:
type: can be ‘a’ ‘A’ ‘i’ ‘I’ ,
start: mention the starting number , reversed: reverse the numbers of list .
AUTONOMOUS)
(Affiliated to Osmania University)
Hyderabad-500031
DEPARTMENT OF: _Information Technology__
NAME OF THE LABORATORY: _ Web Technologies Lab___
Name: Hema Kamani Roll No.: 1602-18-737-071 week : 2
1.Aim: Creation of a web page using table tags and their attributes
Tags used:
<table> defines a HTML table
<th> defines a header cell in a HTML table
<td> defines a standard data cell in a HTML table
<tr> defines a row in a HTML table
Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
HTML Tables
</title>
</head>
<body>
<h1 style="text-align: center;">Student Marks</h1>
<table style="margin-top: -25px; border: 3px solid yellow;background-color: pink; border-spacing: 10px; width:
95%">
<th style = "border: 1px solid yellow;height: 70px;">
Subject Name</th>
<th style = "border: 1px solid yellow;height: 70px;">Student Name</th>
<th style = "border: 1px solid yellow;height: 70px;">Roll No</th>
<th style = "border: 1px solid yellow;height: 70px;">Marks</th>
<tr>
<td rowspan="2",style="border:1px solid yellow; height:70px;padding:20px">WT</td>
<td style="border: 1px solid yellow; height: 70px; padding: 20px;">
Ramesh</td>

7001</td>
50</td>
</tr>
<tr>
<td style="border: 1px solid yellow; height: 70px; padding: 20px;">John</td>
<td style="border: 1px solid yellow; height: 70px; padding: 20px;">7002</td>
<td style="border: 1px solid yellow; height: 70px; padding: 20px;">75</td>
</tr>
<tr>
<td style="border: 1px solid yellow; height: 70px; padding: 20px;"> Sum</td>

<td colspan="3", style="border: 1px solid yellow; height: 70px; padding: 20px;"> Total Marks</td>
1
AUTONOMOUS)
Hyderabad-500031
</tr>
</table></body></html>
OUTPUT:
Result: program to create a web page using table tags and their attributes is successfully executed
2
AUTONOMOUS)
Hyderabad-500031
2) Aim: creation of webpage using frames

Tags used:
<frame> used in HTML to define one particular window within a frameset.

<frameset> used to define a frameset.
Program:
(Main frame.html)
<!DOCTYPE html>
<html>
<head>
<title>Frames</title>
</head>
<frameset rows="20%,80%">
<frame src="top.html">
<frameset cols="15%, 75%, 20%">
<frame src="left.html">
<frame src="center.html">
<frame src="right.html">
</frameset>
</frameset>
<body>
</body>
</html>
Top.html
<!DOCTYPE html>
<html>
<head>
<title>
Frame 1
</title>
</head>
<body style="background-color: darkgreen">
<h2>Top Frame</h2>
</body>
</html>
Left.html:
3
AUTONOMOUS)
Hyderabad-500031
<!DOCTYPE html>
<html>
<head>
<title>
Frame 1
</title>
</head>
<body style="background-color: firebrick">
<h2>Left Frame</h2>
</body>
</html>
Center.html:
<!DOCTYPE html>
<html>
<head>
<title>
Frame 1
</title>
</head>
<body style="background-color: yellow">
<h2>Center Frame</h2>
</body>
</html>
Right.html:
<!DOCTYPE html>
<html>
<head>
<title>
Frame 1
</title>
</head>
4
AUTONOMOUS)
Hyderabad-500031
<body style="background-color: blue">

<h2>Right Frame</h2>
</body>
</html>
OUTPUT:
Result: program to create webpages using frames executed successfully.
5
AUTONOMOUS)
Hyderabad-500031
3) Aim: Creation of a web page using iframes

Tags used:
<iframe> specifies an inline frame

<a> defines an hyperlink, which is used to link from one page to another
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Excercise iframes</title>
</head>
<body>
<iframe src="lab1_2.html" height="200" width="400" title="Iframe Experiment"></iframe>
<br>
<iframe name="Iframe hyperlink" height="200" width="800"></iframe>
<a style="display: block" href="https://www.wikipedia.org" target="Iframe hyperlink">link</a>
<iframe width="860" height="315" src="https://www.youtube.com/embed/1Rs2ND1ryYc" title="Iframe
Youtube Player" frameborder="0"
allowfullscreen></iframe>
</body>
</html>
6
AUTONOMOUS)
Hyderabad-500031
OUTPUT:
Result: program to create a webpage using iframes is executed successfully.
7
AUTONOMOUS)
Hyderabad-500031
PRE-LAB QUESTIONS
1)How do you create frames?
To use frames on a page we use <frameset> tag instead of <body> tag.
The <frameset> tag defines how to divide the window into frames.
The<frameset rows:””> tag defines horizontal frames and <frameset cols:””> defines vertical
frames.
2)What is iframe? Why is it recommended to avoid iframes?

The <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
We avoid use of iframe because of following reason:
1. iframes bring Security Risks.
2. Iframes cause Usability Issues.
3)How do you create email links?

HTML tag provides you the option to specify an email address to send an email.
While using tag as an email tag, you will use mailto: email address along with href attribute.
4)Can a table be nested within another in html?

A table can be created within another table by simply using the table tags like <table> <tr>
<td> etc.The nested table in HTML means creating a table on a webpage inside
another table on Since nesting tables can lead to higher complexity levels, begin
and end the nesting tables within the same cell. You can create nested tables to any
number of levels, by creating an inner table inside the same cell.the same web page.
5) Which tag is used to create a row in a table?

<tr>: The Table Row element. The HTML <tr> element defines a row of cells in a table. The
row's cells can then be established using a mix of <td> (data cell) and <th> (header cell)
elements.
6) Which tag is used to create columns in rows?

Inside the <table> element, you can use the <tr> elements to create rows, and to create
columns inside a row you can use the <td> elements.
7) Which tag is used to create the heading for a column in a table?

To create table header in HTML, use the <th>…</th> tag. A table header tag is surrounded
by the table row <tr>…</tr>.
8
AUTONOMOUS)
Hyderabad-500031
8) What is the purpose of spanning?

The <span> tag is an inline container used to mark up a part of a text, or a part of a
document.
9) What is the purpose of caption?

The HTML <caption> tag defines the title of a table in the HTML document. Browsers
traditionally render the text found in the <caption> tag above the table.
10. Which attribute of <frameset> tag is used to divide the page into horizontal frames?
The <frameset> tag defines how to divide the window into frames. The rows attribute of
<frameset> tag defines horizontal frames and cols attribute defines vertical frames.
9
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
NAME OF THE LABORATORY : WEB TECHNOLOGIES________
Name Hema Kamani Roll No. 1602-18-737-071 Page No. _1 .
LAB-3
AIM : : To create a portfolio using external style sheets only

Description of Tags:
Program:
Portfolio Main.html

<html>
<head>
<title>737-071/Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<h2>Hema <br><br></h2>
<h5>VI semester Information technology student<br></h5>
<ul class="toplinks">
<li><a href="">HOME</a></li>
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
<li><a href="resume.html" target="_blank">RESUME</a></li>

<li><a href="">PROJECTS</a></li>
<li><a href="">CONTACT</a></li>
</ul>
<img src="HemaKamani.jpg" alt="My photo">
<h1>Hello,</h1>
<h3>About me:</h3>
<div class="circles">
<div class="c1"><br><br><br>MY SKILLS</div>
<div class="c2"><br><br><br>MY WORK</div>
<div class="c3"><br><br><br>
<a id="CT" href="resume.html" target="_blank">MY RESUME</a>
</div>
</div><br><br><br><br><br><br><br>
<p>I'am Hema Kamani currently persuing BE degree from vasavi college of
engineering.<br>I use HTML, CSS and JavaScript to convert webpage design into beautiful
efficient websites</p>
<iframe src="details.html" title="Iframe Example"></iframe>
</body>
</html>
Details.html

<html>
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
<head>
<title>Details</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<style>
body {
overflow: hidden;
}
.fa{
padding: 2px;
font-size: 20px;
width: 40px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-twitter {
background-color: #E64040;
color: white;
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
border-radius: 50%;
width: 27px;
height: 27px;
margin-bottom: 10px;
text-align: center;
padding-top: 4px;
}
.bar {
width: 100%;
height: 250px;
position: absolute;
bottom: -140px;
display: flex;
}
.p1,
.p2,
.p3,
.p4 {
margin-top: 15px;
margin-left: 15px;
margin-right: 150px;
}
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
.material-icons {
background-color: #78D6CE;
color: #E64040;
border-radius: 50%;
margin-bottom: 15px;
width: 30px;
height: 30px;
text-align: center;
padding-top: 2px;
}
</style>
</head>
<body>
<div class="bar">
<i class="material-icons material-icons-outlined" id="btn">phone</i>
<div class="p1">
<p style="margin-top:-15px;">Call</p>
<p>7</p>
</div>
<i class="material-icons material-icons-outlined" id="btn">email</i>
<div class="p2">
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
<p style="margin-top:-15px;">Contact<br></p>
<p>[email protected]</p>
</div>
<i class="material-icons material-icons-outlined" id="btn">add</i>
<div class="p3">
<p style="margin-top:-15px;">Follow me</p>
<i class="material-icons" style="margin-top:-5px;background-
color:#E64040;color:white;">facebook</i>
<a href="@Hema Kamani" class="fa fa-twitter"></a>
</div>
<i class="material-icons material-icons-outlined" id="btn">copyright</i>
<div class="p4">
<p style="margin-top:-15px;">2020 by Hema Kamani</p>
</div>
</div>
</body>
</html>
Portfolio.css
body {
background-color: #f2e6ff;
margin: 0px;
border-style: solid;
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
border-color: purple;
}
img {
margin-top: 30px;
border-radius: 550px;
margin-right: 50px;
height: 300px;
width: 300px;
float: left;
}
h2 {
margin: 0px;
font-family: "Times New Roman", Times, serif;
width: 230px;
color: #555555;
}
h5 {
margin: 0px;
width: 200px;
color: #555555;
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
h1 {
height: 10px;
color: #555555;
}
h3 {
color: #555555;
}
a:link {
color: black;
}
a:visited {
color: black;
}
.toplinks {
margin-left: 300px;
margin-top: -37px;
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
font-size: 15px;
}
.toplinks a {
margin-left: 10px;
color: #888888;
font-weight: bold;
}
a:hover {
color: cyan;
}
ul {
list-style-type: none;
}
li {
display: inline;
}
.circles {
background-color: #ffffff;
margin-right: 500px;
}
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
.c1 {
color: white;
font-size: 15px;
text-align: center;
align-items: center;
float: right;
width: 130px;
height: 130px;
margin: 0px 0px 0px 30px;
background-color: #d9d926;
}
.c2 {
color: white;
font-size: 15px;
text-align: center;
float: right;
width: 130px;
height: 130px;
background-color: #33d6ff;
}
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
.c3 {
color: white;
font-size: 15px;
text-align: center;
float: right;
width: 130px;
height: 130px;
}
#CT {
color: white;
}
p{
color: #777777;
}
iframe {
width: 100%;
height: 130px;
margin-top: 100px;
margin-bottom: 0px;
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
OUTPUT:
RESULT: To Create a portfolio using external style sheets only is successfully

completed.
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
2.
AIM: To create a resume using internal style sheets.
Description of tags:
Program:

<!DOCTYPE html>
<html lang="en">
<head>
<title>737-071/Resume</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-

awesome.min.css">
<style>
*{
box-sizing: border-box;
a{
color: inherit;
body {
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
font-family: Arial, Helvetica, sans-serif;
margin:0px;
.header {
padding: 30px;
.start{
color: white;
font-size: 15px;
text-align: center;
float: left;
width: 60px;
height: 300px;
margin: -110px 0px 0px 30px;
background-color: #1AB81A;
img{
height:170px;
width: 170px;
float:left;
margin:-150px 20px 0px 512px;
}
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
.column {
float: right;
padding: 12px;
height: 600px;
.column.left {
width: 40%;
.column.right {
width: 60%;
@media (max-width: 600px) {
.column.right,.column.left {
width: 100%;
li{
list-style-type: none;
.sub{
color:#888888;
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
font-size:15px;
padding:4px;
.sub1{
font-size: 20px;
color:#1AB81A;
.main{
font-size: 25px;
color:#2E582E;
padding-top: 10px;
meter{
margin-left: 50px;
.fa.fa-circle{
color: #2E582E;
font-size: 5px;
padding-left: -5px;
padding-right:3px;
.info{
margin-top: -4px;
margin-left:5px;
color:#888888;
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
h2{
margin-top:-150px;
margin-left:800px;
color:#777777;
meter{
height: 20px;
width:200px;
</style>
</head>
<body>
<div class="header">
<div class="start">
<ul style="margin-top: 120px;margin-right: 35px;margin-left:-10px;font-size: 15px;float:left;">
<li><i class="fa fa-map-marker" aria-hidden="true"></i></li><br>
<li><i class="fa fa-mobile" aria-hidden="true"></i></li><br>
<li><i class="fa fa-envelope-o" aria-hidden="true"></i></li><br>
<li><i class="fa fa-linkedin" aria-hidden="true"></i></li><br>
</ul>
</div>
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
<div class="info">
<p>Hyderabad,Telangana</p>
<p>+91 7013480365</p>
<p>[email protected]</p>
<p><a href="https://www.linkedin.com/in/hemakamani-8bb430187/"
target="blank">Linkedin/HemaKamani</a></p>
</div>
<img src="Hemakamani.jpg" alt="My photo">
<h2>Hema Kamani / Full stack Web Developer</h2>
<p style="margin-top:-5px;margin-left:800px; color:#888888; font-family: arial" >I aspire for an

entry-level position as an engineer, allowing me to utilize my education and project experience
efficiently for the organizational goals, as a team member in dynamic work environment.</p>
</div>
<div class="row">
<div class="column right" style="">
<ul>
<li class="main"><i class="fa fa-graduation-cap" aria-hidden="true" style="font-size:

25px;"></i> Education Details
<ul>
<li class="sub1">Bachelor of Engineering</li>
<li class="sub">
Vasavi College Of Engineering
</li>
<li class="sub">
08/2018 - Present
</li>
<li class="sub1";>Intermediate</li>
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
<li class="sub">
Narayana Junior College
</li>
<li class="sub">
06/2016 - 03/2018
</li>
<li class="sub1">SSC</li>
<li class="sub">TetraHedron Model School</li>
<li class="sub">06/2012 - 03/2016</li>
</ul>
</li>
<li class="main"><i class="fa fa-briefcase" style="font-size: 25px;"></i> Working Experience
<ul>
<li class="sub1">T Hope</li>
<li class="sub">Member of non - profit social service organistion</li>
<li class="sub">2021</li>
<li class="sub1">Fransis Enterpraises</li>
<li class="sub">Make a type specimen</li>
<li class="sub">2016-2017</li>
<li class="sub1">Smateye Technologies</li>
<li class="sub">It has servived not only five</li>
<li class="sub1">Freelancer Designer</li>
<li class="sub">Ever since the 1500s, when an unknown </li>
</ul>
</li>
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
<li class="main"><i class="fa fa-user" aria-hidden="true" style="margin-right:5px;font-size:

25px;"></i>Personal Details
<ul>
<li class="sub"><pre style="margin-top:0px;font-family:Arial;">Date of Birth : 18-02-

2001
Nationality : Indian
Religion : Hindu
Blood Group : O+
</pre></li>
</ul>
</li>
</ul>
</div>
<div class="column left" style="">
<ul>
<li class="main" ><i class="fa fa-window-restore" aria-hidden="true" style="font-size:

25px;"></i>Professional Skills</li>
<ul>
<li class="sub"><pre style="margin: 0px;">C Programming <meter value="80"

max="100"></meter></pre></li>
<li class="sub"><pre style="margin: 0px;">Python <meter value="70"

<li class="sub"><pre style="margin: 0px;">Database SQL <meter value="85"

<li class="sub"><pre style="margin: 0px;">Web Development <meter value="70"

</ul>
<li class="main" ><i class="fa fa-pencil" aria-hidden="true" style="font-size:

25px;"></i>Personal Skills</li>
<ul>
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
<li class="sub"><pre style="margin: 0px;">Creativity <meter value="85"

<li class="sub"><pre style="margin: 0px;">Communication <meter value="70"

<li class="sub"><pre style="margin: 0px;">Team Work <meter value="85"

<li class="sub"><pre style="margin: 0px;">Quick Learner <meter value="80"

</ul>
<li class="main" ><i class="fa fa-window-restore" aria-hidden="true" style="font-size:

25px;"></i>Activities / Interests</li>
<ul>
<li class="sub"><i class="fa fa-circle" aria-hidden="true"></i>Designing</li>
<li class="sub"><i class="fa fa-circle" aria-hidden="true"></i>Swimming</li>
<li class="sub"><i class="fa fa-circle" aria-hidden="true"></i>Travelling</li>
<li class="sub"><i class="fa fa-circle" aria-hidden="true"></i>Cricket</li>
<li class="sub"><i class="fa fa-circle" aria-hidden="true"></i>Photography</li>
<li class="sub"><i class="fa fa-circle" aria-hidden="true"></i>Walking</li>
<li class="sub"><i class="fa fa-circle" aria-hidden="true"></i>Reading</li>
<li class="sub"><i class="fa fa-circle" aria-hidden="true"></i>Football</li>
</ul>
<li class="main" ><i class="fa fa-trophy" aria-hidden="true" style="font-size:

25px;"></i>Awards</li>
<ul style="float: left;">
<li class="sub1">Best Graphic Designer</li>
<li class="sub">University of California</li>
<li class="sub">2014 - 2015</li>
<li class="sub1">Best Graphic Designer</li>
<li class="sub">University of California</li>

VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
<li class="sub">2013 - 2015</li>
</ul>
<ul style="float: left;">
<li class="sub1">Creative Designer</li>
<li class="sub"> CSI Institute of Technology</li>
<li class="sub">2012 - 2013</li>
<li class="sub1">Creative Programmer</li>
<li class="sub">Cambridhe University</li>
<li class="sub">2010 - 2011</li>
</ul>
</ul>
</div>
</div>
</body>
</html>
Output:
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
Result: To Create Resume using internal style sheets is successfully completed.
PRELAB QUESTIONS:
1.How can you add style In html document?
CSS can be added to HTML documents in 3 ways:

• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file
2.List the different html block elements.
<h1>-<h6>
<header>
<hr>
<li>
<div>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<ul>
3. List the different html inline elements.

VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
4.How many grouping tags are there in html?
There are a number of additional tags that allow us to group related HTML content together.
Some examples include <header> , <section> , <article> and <footer> . All of these HTML
elements (including <div> ) have no effect on the HTML content itself, but instead group and
contain other elements.
5.What is the use of html layouts?
HTML layouts provide a way to arrange web pages in well-mannered, well-structured, and in
responsive form or we can say that HTML layout specifies a way in which the web pages can be
arranged. Web-page layout works with arrangement of visual elements of an HTML document.
6.How can you create email links in HTML?
HTML <a> tag provides you option to specify an email address to send an email. While using
<a> tag as an email tag, you will use mailto: email address along with href attribute. Following
is the syntax of using mailto instead of using http. This code will generate the following link
which you can use to send email.
7. What happens if you open the external CSS file in a browser?
When you try to open the external CSS file in a browser, the browser cannot open the file,
because the file has a different extension. The only way to use an external CSS file is to reference
it using tag within another HTML document.
8.Differentiate between id selector and class selector.

VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name
preceded by a hash character (“#”). The difference between an ID and a class is that an ID can
be used to identify one element, whereas a class can be used to identify more than one.
9.write the purpose of float, overflow properties in CSS.
The float CSS property places an element on the left or right side of its container, allowing text
and inline elements to wrap around it.
The Overflow Method relies on setting the overflow CSS property on a parent element. If this
property is set to auto or hidden on the parent element, the parent will expand to contain the
floats, effectively clearing it for succeeding elements.
10.What is the importance of <DIV> tag and<SPAN> tag.

A div is a block-level element and a span is an inline element. The div should be used to wrap
sections of a document, while use spans to wrap small portions of text, images, etc. The <div>
element is used while creating CSS based layouts in html, whereas <span> element is used to
stylize texts.
Department of Information Technology
Course: BE Semester: VI Section: A
Roll No: 1602-18-737-071 Name: Hema Kamani Date of Submission29.04.2021
Name of the Course: Web Technologies Lab
TAGS USED:
1) <script> - The <script> tag is used to embed a client-side script (JavaScript).
The <script> element
1. either contains scripting statements
2) <button> - The <button> tag defines a clickable button. Inside a <button>
element you can put text
2. (and tags like <i> , <b> , <strong> , <br> , <img> , etc.)
3) <input> - The <input> tag specifies an input field where the user can enter
data. The <input> element
3. is the most important form element.
4) <label> - The <label> tag defines a text label for the <input> tag. The label is
a normal text, by clicking
4. which, the user can select the form element.
5) <option> - The <option> tag in HTML is used to choose an option from a
Drop-Down menu. This tag
5. can be used with or without any attributes and needed value can be sent to
the server.
6) <select> - The <select> element is used to create a drop-down list. The
<select> element is most often
6. used in a form, to collect user input.
7) <textarea> - The <textarea> tag defines a multi-line text input control. The
<textarea> element is often
7. used in a form, to collect user inputs like comments or reviews.
8) <form> - <form> tag is used for creating a form for user input. A form can
contain text fields,checkboxes, radio-buttons and more. Forms are used to
pass user-data to a specified URL.
1.Aim:
Write a JavaScript program to find and print the first 5 happy numbers.
Program:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<script>
function happy_number(num) {
var m, n;
var c = [];
while (num != 1 && c[num] !== true) {
c[num] = true;
m = 0;
while (num > 0) {
n = num % 10;
m += n * n;
num = (num - n) / 10;
}
num = m;
}
return (num == 1);
}
var cnt = 5;
var i = 1;
var str = 'First 5 happy numbers are : ';
while (cnt > 0) {
cnt--;
while (!happy_number(i))
i++;
str = str + (i + ", ");
i++;
}
console.log('First 5 happy numbers are : ' + str);
document.write(str)
</script>
</head>
<body>
</body>
</html>
Output:
Result:
Write a JavaScript program to find and print the first 5 happy numbers is executed
successfully.
2.Aim:
Write a script that reads a series of pairs of numbers as item number and quantity and
output the entire cost of them.
Program:


<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>1) Tomatos: $21.75</p>
<p>2) Onions: $12.00</p>
<p>3) Potato: $7.50</p>
<p>4) Brinjal: $9.25</p>
<p>5) Ladyfinger: $30.00</p>
<p>0) Stop the Program</p>
<br>
<button onclick="cost()">Find Cost</button>

<p id="total"></p>
<script>
function cost() {
var cost = 0;
while (true) {
var x = prompt("Enter Product number:");
x = parseInt(x)
if (x == 0) {
break;
}
var y;
switch (x) {
case 1:
y = prompt("Enter Quantity:")
cost = cost + y * 21.75;
break;
case 2:
cost = cost + y * 12.0;
break;
case 3:
cost = cost + y * 7.5;
break;
case 4:
cost = cost + y * 9.25;
break;
case 5:
cost = cost + y * 30.0;
break;
default:
alert("Wrong option selected, Choose correct one")
break;
}
}
z = document.getElementById("total")
z.innerHTML = "Total cost is :" + cost;
}
</script>
</body>
</html>
Output:
Result:Program executed successfully.

3.Aim:
Write a js program generates random dimensions of picture.
Program:



<!DOCTYPE html>
<html>
<title>Question-3</title>
<body>
<center>
<h2>I am Groot</h2>
</center>
<center><img id="myImg" src="C:\Users\benit\Downloads\groot.jpg"></center>
<script>
document.getElementById("myImg").width = Math.floor(Math.random() *
500) + 100;
document.getElementById("myImg").height = Math.floor(Math.random() *
500) + 100;
</script>
</body>
</html>
Output:
Result:
To write a js program generates random dimensions of picture is executed successfully.
4.Aim:
Write a program to display picture array in loop.
Program:


<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<center>
<div>
<p><b>Image Slide Show</b></p>
<img id="img" height="600" width="1000" src="D:\webtechlab\images\
img1.jpeg"><br><br>
<button onclick="next()">Next</button>
</div>
</center>
<script>
var file_name = ["D:/webtechlab/images/img1.jpeg",

"D:/webtechlab/images/img2.jpg",
"D:/webtechlab/images/img4.jpg","D:/webtechlab/images/img5.jpg"]
var i = 0
var image = document.getElementById('img')
function next() {
i=i+1
if (i >= file_name.length) {
i=0
}
image.src = file_name[i]
}
</script>
</body>
</html>
Output:

Result:
To write a program to display picture array in loop is executed successfully.
5.Aim:
Write a program explains about event handling.
Program:


<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<form>
<p>Choose one colour :</p>
<pre>
<input type="radio" name="bgcRbtns" class="radioColor" value="Light_Blue">Light
Blue
<input type="radio" name="bgcRbtns" checked class="radioColor"
value="Light_Yellow">Light Yellow
<input type="radio" name="bgcRbtns" class="radioColor" value="Light_Green">Light

Green
</pre>
You have chosen <span id="colorText"></span>
<br>
Count of radio buttons is : <span id="radioCount"></span>
</form>
<script>
let colorText = document.getElementById('colorText')
let radioButtons = document.getElementsByClassName('radioColor')
console.log(radioButtons)
window.onload = function () {
for (let i = 0; i < radioButtons.length; i++) {
if (radioButtons[0].checked == true) {
document.body.style.backgroundColor = "lightblue"
colorText.innerText = 'Light Blue'
}
document.body.style.backgroundColor = "lightyellow"
colorText.innerText = 'Light Yellow'
}
document.body.style.backgroundColor = "lightgreen"
colorText.innerText = 'Light Green'
}
}
}
for (let i = 0; i < radioButtons.length; i++) {
radioButtons[i].addEventListener('change', function (e) {
console.log(e)
if (e.target.value == "Light_Blue") {
document.body.style.backgroundColor = "lightblue"
colorText.innerText = 'Light Blue'
}
if (e.target.value == "Light_Yellow") {
document.body.style.backgroundColor = "lightyellow"
colorText.innerText = 'Light Yellow'
}
if (e.target.value == "Light_Green") {
document.body.style.backgroundColor = "lightgreen"
colorText.innerText = 'Light Green'
}
})
}
document.getElementById('radioCount').innerText = radioButtons.length
</script>
</body>
</html>
Output:
Result:
To write a program explains about event handling is executed successfully.
6.Aim:
Create a form with given validations.
Program:


<!DOCTYPE html>
<html lang="en">
<head>
<script>
function func() {
var username = document.f1.username.value;
var password = document.f1.password.value;
var email = document.f1.email.value;
var phone = document.f1.phone.value;
var exp1 = /[a-z\s]+$/;

if (username.match(exp1)) {
}
else {
alert("enter only characters and whitespaces");
return false;
}
}
</script>
</head>
<body>
<div style="text-align: center;">
<img src="https://www.vce.ac.in/img/vlogo.gif" alt="" style="width: 200px; height:
200px;">
<form action="" name="f1">
<h1 style="margin-top: 0;">STUDENT REGISTRSTION FORM</h1>
<br>
<label for="username">Username</label>
<input type="text" id="username" required name="username" pattern="[a-z\s]+"
oninvalid="setCustomValidity('Should contain only letters and spaces')"
oninput="setCustomValidity('')">
<br>
<br>
<label for="password">Password</label>
<input type="password" id="password" required name="password"
pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"
oninvalid="setCustomValidity('Should contain 1 lowercase, 1 number, 1 uppercase
& 8characters minimum')"
<br>
<br>
<label for=" email">Email</label>
<input type="email" id="email" required name="email" pattern="[a-zA-Z0-9_\-\.]+
[@][a-z]+[\.][a-z]{2,}"
oninvalid="setCustomValidity('Should contain eg: [email protected]')"
<br>
<br>
<label for="phone">Phone:</label>
<input type="text" id="phone" required name="phone" pattern="[0-9]{10}"
oninvalid="setCustomValidity('Should contain 10 digits only')"
<br>
<br>
Select languages known:
<input type="checkbox" id="english" name="english" value="english">
<label for="english">English</label>
<input type="checkbox" id="hindi" name="hindi" value="hindi">
<label for="hindi">Hindi</label>
<input type="checkbox" id="telugu" name="telugu" value="telugu">
<label for="telugu">Telugu</label>
<br>
<br>
<input type="radio" name="gender" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="demale">
<label for="female">Female</label>
<br>
<br>
<label for="state">Select State</label>
<select name="" id="state">
<option value="telangana">Telangana</option>
<option value="andrapradesh">Andra Pradesh</option>
</select>
<br>
<br>
Give your comment:

<br>
<textarea name="" id="" cols="40" rows="5"></textarea>
<br>
<br>
Select resume to upload
<input id="loadFileXml" type="button"
onclick="document.getElementById('file').click();" value="Browse.." />
<input type="file" style="display:none;" id="file" name="file" />
<br>
<br>
<button>Submit Query</button>
<button type="reset">Reset</button>
</form>
</div>
</body>
</html>
Output:
Result:
Create a form with given validations is executed successfully.
Viva Questions
1.What is JavaScript?
Ans:
JavaScript is the Programming Language for the Web. JavaScript can update and change
both HTML and CSS. JavaScript can calculate, manipulate and validate data.
2. Name some of the JavaScript features?
Ans:
1. Validating User’s Input
2. Simple Client-side Calculations
3. Handling Dates and Time
4. Template Literal
5. Default Parameters
3. What are the advantages and disadvantages of using JavaScript?
Ans:
Advantages of JavaScript:
Speed.
Server Load.
Interoperability.
Disadvantages of JavaScript:
Client-Side Security.
Browser Support.
4. Is JavaScript a case-sensitive language?
Ans:
Yes, JS is case-sensitive.
5. How can you create an Object in JavaScript? How can you read properties of an Object
in JavaScript?
Ans:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
You can access the properties of an object in JavaScript in 3 ways:
1. Dot property accessor: object.property

2. Square brackets property access: object['property']
3. Object destructuring: const { property } = object
6. How can you create an Array in JavaScript? How to read elements of an array in JavaScript?
Ans:
Create:
var cars = ["Saab", "Volvo", "BMW"];
How to read:
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
7. What is a named & anonymous functions in JavaScript? Give an example for each.
Ans:
An anonymous function is a function without a name. An anonymous function is often not

accessible after its initial creation.
The following shows an anonymous function that displays a message:
let show = function () {

console.log('Anonymous function');
};
show();
8. Illustrate with examples the different ways in which event handling can be done using
JavaScript.
Ans:
a. JavaScript dblclick event

b. JavaScript onload
c.JavaScript addEventListener()
d.JavaScript onresize event
e.JavaScript onclick event
9 What is HTML DOM? Give an example for creating and inserting new a node using the
document object.
Ans:
The HTML DOM is a standard object model and programming interface for HTML. It defines:
 The HTML elements as objects

 The properties of all HTML elements
 The methods to access all HTML elements
 The events for all HTML elements
Create:
createElement()
Insert:
node.insertbefore()
10. Give an example for removing a node and replacing a node, using the document
object.
Ans:
Remove:
Node.remove()
Replace:
parentNode.replaceChild(newnode,oldnode):
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
LAB-5
Description of Tags:
1) <script> - The <script> tag is used to embed a client-side script (JavaScript).
The <script> element
1. either contains scripting statements
2) <button> - The <button> tag defines a clickable button. Inside a <button>
element you can put text
2. (and tags like <i> , <b> , <strong> , <br> , <img> , etc.)
3) <input> - The <input> tag specifies an input field where the user can enter
data. The <input> element
3. is the most important form element.
4) <label> - The <label> tag defines a text label for the <input> tag. The label is
a normal text, by clicking
4. which, the user can select the form element.
5) <option> - The <option> tag in HTML is used to choose an option from a
Drop-Down menu. This tag
5. can be used with or without any attributes and needed value can be sent to
the server.
6) <select> - The <select> element is used to create a drop-down list. The
<select> element is most often
6. used in a form, to collect user input.
7) <textarea> - The <textarea> tag defines a multi-line text input control. The
<textarea> element is often
7. used in a form, to collect user inputs like comments or reviews.
8) <form> - <form> tag is used for creating a form for user input. A form can
contain text fields,checkboxes, radio-buttons and more. Forms are used to
pass user-data to a specified URL.
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
Exp1:
Program:

<head>
<title>737-071/5.1_radioButton-bg</title>
<script type="text/javascript">
window.addEventListener('click', function(){
if(document.getElementById("1").checked==true){
document.getElementById("colorText").innerHTML="Light_Blue";
document.body.style.backgroundColor = "lightblue";
}
document.getElementById("colorText").innerHTML="Light_Yellow";
document.body.style.backgroundColor = "lightyellow";
}
document.getElementById("colorText").innerHTML="Light_Green";
document.body.style.backgroundColor = "lightgreen";
}
});
</script>
<style>
input:checked {
height: 50px;
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
width: 50px;
}
</style>
</head>
<body >
<form>
<p>Choose one colour :</p>
<blockquote cite="http://">
<input type="radio" name="bgcRbtns" class="radioColor" value="Light_Blue"
id="1">Light Blue<br>
<input type="radio" name="bgcRbtns" class="radioColor" value="Light_Yellow"
id="2">Light Yellow<br>
<input type="radio" name="bgcRbtns" class="radioColor" value="Light_Green"
id="3">Light Green
</blockquote>
You have chosen :<span id="colorText"> </span>

<br>
Count of radio buttons is : <span id="radioCount">3</span>
</form>
</body>
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
OUTPUT:
RESULT: To Create HTML Document that shows different background color on

pressing the colour named radio buttons is successfully completed.
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
Exp 2:
Program:

<html>
<head>
<title>737-071/Vasavi form</title>
<script>
function func() {
var username = document.f1.username.value;
var password = document.f1.password.value;
var email = document.f1.email.value;
var phone = document.f1.phone.value;
var exp1 = /[a-z\s]+$/;
if (username.match(exp1)==false) {
alert("enter only characters and whitespaces");
return false;
}
}
</script>
</head>
<body >
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031

<img src="https://www.vce.ac.in/img/vlogo.gif" alt="vce_logo"
style="width: 150px; height: 150px;">
<form action="" name="f1">
<h2 style="margin-top: 0;">STUDENT REGISTRATION FORM</h2>
<br>
<label for="username">Username:</label>
<input type="text" id="username" required name="username"
pattern="[a-z\s]+"
oninvalid="setCustomValidity('Should contain only letters and
spaces')" oninput="setCustomValidity('')">
<br>
<br>
<label for="password">Password:</label>
<input type="password" id="password" required name="password"
pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"
oninvalid="setCustomValidity('Should contain 1 lowercase, 1 number,
1 uppercase & 8characters minimum')"
<br>
<br>
<label for=" email">Email:</label>
<input type="email" id="email" required name="email" pattern="[\w\
d_\-\.]+[@][a-z]+[\.][a-z]{2,}"
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
oninvalid="setCustomValidity('Should contain eg: [email protected]')"

<br>
<br>
<label for="phone">Phone:</label>
<input type="text" id="phone" required name="phone" pattern="[\d]
{10}"
oninvalid="setCustomValidity('Should contain 10 digits only')"
<br>
<br>
Select Languages known:
<input type="checkbox" id="english" name="english" value="english">
<label for="english">English</label>
<input type="checkbox" id="hindi" name="hindi" value="hindi">
<label for="hindi">Hindi</label>
<input type="checkbox" id="telugu" name="telugu" value="telugu">
<label for="telugu">Telugu</label>
<br>
<br>
Select Gender:
<input type="radio" name="gender" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="demale">
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
<label for="female">Female</label>
<br>
<br>
<label for="state">Select State:</label>
<select name="" id="state">
<option value="telangana">Telangana</option>
<option value="andrapradesh">Andra Pradesh</option>
</select>
<br>
<br>
Give your comment:
<br>
<textarea name="" id="" cols="40" rows="5"></textarea>
<br>
<br>
Select resume to upload
<input id="loadFileXml" type="button"
onclick="document.getElementById('file').click();" value="Browse.." />
<input type="file" style="display:none;" id="file" name="file" />
<br>
<br>
<button>Submit Form</button>
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
</form>
</div>
</body>
Output:
Result: Creating a form using HTML, JavaScript, Css is executed successfully.

VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
3.
Program:
<!DOCTYPE html>
<html lang="en">

<head>
<title>737-071/5.2_international conference.html</title>
<script>
arr=new Array();
arr.push('<div id="1" style="display:inline">Hotel 1 Select Atleast five accomodations
:<br><input type="checkbox" id="BreakFast" name="" value="1"><label
for="BreakFast">Break Fast</label><input type="checkbox" id="Lunch" name=""
value="2"><label for="Lunch">Lunch</label><input type="checkbox" id="Dinner" name=""
value="3"><label for="Dinner">Dinner</label><input type="checkbox" id="TempArt"
name="" value="4"><label for="TempArt">Temporary Art Gallery</label><input
type="checkbox" id="Spa" name="" value="5"><label for="Spa">Spa</label><input
type="checkbox" id="Massage" name="" value="6"><label
for="Massage">Massage</label><input type="checkbox" id="Sauna" name=""
value="7"><label for="Sauna">Sauna</label><input type="checkbox" id="Happy Hour"
name="" value="8"><label for="Happy Hour">Happy Hour</label><input type="checkbox"
id="Sports" name="" value="9"><label for="Sports">Sports
Equipment</label><br><br></div>');
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031

function Accomdation() {
var k=document.getElementById("hotel").selectedIndex;
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
document.getElementById('P').innerHTML=arr[Number(k)-1];
}
function abc() {
var count=0;
var markedCheckbox =
document.querySelectorAll('input[type="checkbox"]:checked');
for (var checkbox of markedCheckbox) {
count++;
}
document.body.append(count + ' ');
if(count>=5)
{
return true;
}
else
{
alert("please select atleast 5 Accomdations");
return false;
}
}
</script>
</head>
<body >
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031

<form onsubmit="return abc()" name="f1">
<h2 style="margin-top: 0;">International Conference REGISTRATION FORM</h2>
<br>
<br>
<label for="desig">Select Designation:</label>
<select name="" id="desig">
<option value="student">student</option>
<option value="faculty member">faculty member</option>
<option value="professional">professional</option>
<option value="company representative">company representative</option>
</select>
<br>
<br>
Select Currency:
<input type="radio" name="currency" id="Rupees" value="male">
<label for="Rupees">Rupees</label>
<input type="radio" name="currency" id="Dollar" value="demale">
<label for="Dollar">Dollar</label>
<br>
<br>
<label for="PMethod">Select Payment Method:</label>
<select name="" id="PMethod">
<option value="1">credit card</option>
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
<option value="2">debit card</option>

<option value="3">demand draft</option>
</select>
<br>
<br>
<label for="hotel">Select Hotel:</label>
<select name="" id="hotel" onchange="Accomdation()">
<option value="0"></option>
<option value="1">Taj Banjara</option>
<option value="2">Taj Deccan</option>
<option value="3">Taj Krishna</option>
<option value="4">Taj Falaknuma</option>
</select>
<br>
<br>
<p id='P'></p>
<button>Submit Form</button>
</form>
</div>
</body>
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
Output:
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
Result : Creating a international conference form for registration is successfully

completed.
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
PRELAB QUESTIONS:
1.What is Java Script?
JavaScript is a text-based programming language used both on the client-side and server- side that
allows you to make web pages interactive. Where HTML and CSS are languages that give structure
and style to web pages, JavaScript gives web pages interactive elements that engage a user.
2.Name some of the JavaScript features?
Javascript Features
• Light Weight Scripting language.
• Dynamic Typing.
• Object-oriented programming support.
• Functional Style.
• Platform Independent.
• Prototype-based.
• Interpreted Language.
3.What are the advantages and disadvantages of using JavaScript?
Advantages of JavaScript:
• Regardless of where you host JavaScript, it always gets executed on client environment to
save lots of a bandwidth and make execution process fast.
• In JavaScript, XMLHttpRequest is an important object that was designed by Microsoft. The

object call made by XMLHttpRequest as a asynchronous HTTP request to the server to tranfser the
data to both sides without reloading the page
• The biggest advantage to JavaScript having a ability to support all modern browsers and
produce an equivalent result.
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
• Global companies support community development by creating projects that are important. An
example is Google (created Angular framework) or Facebook (created the React.js framework).
• JavaScript is employed everywhere on the web
Disadvantages of JavaScript:
• This may be difficult to develop large applications, although you’ll also use the
TypeScript overlay.
• This applies to larger front-end projects. The configuration is often a tedious task to the
amount of tools that require to figure together to make an environment for such a project. This is
often directly associated with the
library’s operation.
• The main problem or disadvantage in JavaScript is that the code is always visible to everyone
anyone can view JavaScript code.
• No matter what proportion fast JavaScript interpret, JavaScript DOM (Document Object
Model) is slow and can be a never fast rendering with HTML.
• If the error occurs in the JavaScript, it can stop to render the whole website. Browsers are
extremely tolerant of JavaScript errors.
4.Is JavaScript a case-sensitive language?
JavaScript is Case Sensitive
All JavaScript identifiers are case sensitive. JavaScript does not interpret VAR or Var as the keyword
var.
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
5.How can you create an Object in JavaScript? How can you read properties of an Object in
JavaScript?
JavaScript has a number of predefined objects. In addition, you can create your own objects. You can
create an object using an object initializer. Alternatively, you
can first create a constructor function and then instantiate an object invoking that function in
conjunction with the new operator.
You can access the properties of an object in JavaScript in 3 ways:
1. Dot property accessor: object. property.
2. Square brackets property access: object['property']
3. Object destructuring: const { property } = object
6. How can you create an Array in JavaScript? How to read elements of an array in
JavaScript?
• Using an array literal is the easiest way to create a JavaScript Array. var array_name =
[item1, item2, ...];
using new keyword
var cars = new Array("Saab", "Volvo", "BMW");
• You access an array element by referring to the index number.
• With JavaScript, the full array can be accessed by referring to the array name:
7. What is a named & anonymous functions in JavaScript? Give an example for each.?
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
• A named function is a function declaration if it appears as a statement.
For example: function officer () {
return rank() + " Reginald Thistleton"; function rank () { return "Captain"; }
officer()
• An anonymous function is a function without a name.
For example : var x = function (a, b) {return a * b};
8. Illustrate with examples the different ways in which event handling can be done using
JavaScript.
• On click event type
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
• On submit event type
<input type = "submit" value = "Submit" />
• On mouse over and on mouse out event type

VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
<div onmouseover = "over()" onmouseout = "out()">
<h2> This is inside the division </h2>
</div> etc
9. What is HTML DOM? Give an example for creating and inserting new a node using the
document object.
The HTML DOM is a standard object model and programming interface for HTML. It defines:
• The HTML elements as objects
• The properties of all HTML elements
• The methods to access all HTML elements
• The events for all HTML elements For creating:
Var x=document.createElement(‘div’); Document.body.appendChild(x);
10. Give an example for removing a node and replacing a node, using the document object.
For removing:var myobj = document.getElementById("demo"); myobj.remove();
For replace var textnode = document.createTextNode("Water"); elmnt.appendChild(textnode);

var item = document.getElementById("myList"); item.replaceChild(elmnt, item.childNodes[0]);
Course: BE Semester: VI Section: B
Roll no: 1602-18-737-071 Name: Hema Kamani Date of Submission: 21.04.2021
Name of the course:Web Technologies Lab
AIM: Use the MVC Pattern and develop an application using servlets to take the roll number of a
student as input and display the branch of the given student.
[732-Civil, 733-CSE, 734-EEE, 735-ECE, 736-Mechanical, 737-IT]
PROGRAM:
Index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Roll Finder</title>
</head>
<body>
<form action="roll" style="text-align:center;"

method="post">
<h2>Enter a roll number and click on submit to get
department information</h2>
<br>
<label>Enter Your Roll Number</label>
<br><br>
<input type="text" name="roll" >
<br>
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>
Web.xml:
<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-
instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
id="WebApp_ID" version="3.1">
<servlet>
<servlet-name>abc</servlet-name>
<servlet-class>rollFinder.rollFinder</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>abc</servlet-name>
<url-pattern>/roll</url-pattern>
</servlet-mapping>
</web-app>
rollFinder.java:
package rollFinder;
import javax.servlet.*;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.io.*;
import java.util.*;
public class RollFinder extends HttpServlet{

public void doPost(HttpServletRequest request,
HttpServletResponse response) throws IOException{
PrintWriter out = response.getWriter();
String rollNumber = request.getParameter("roll");
StudInfo sInfo = new StudInfo(rollNumber);
String dept = sInfo.getDepartment();
if(dept.equals("Wrong input"))
{
response.sendRedirect("index.html");
}
HttpSession session;
session = request.getSession(false);
String value = "";

if(session==null){
session = request.getSession();
session.setAttribute(rollNumber, dept);
}else{
if((session.getAttribute(rollNumber))!= null){
value =(String)
session.getAttribute(rollNumber);
}
else{
session.setAttribute(rollNumber, dept);
}
}
String x="";
if (value=="")
x=dept;
else
x=value;
out.println("<html>" +
"<head><title>
Department</title></head>" +
"<body>"+
"<h1>"+ "The roll number " +rollNumber
+" belongs to "+x+" department"+ "</h1>"
+"</body>"+"</html>");
}
}
StudInfo.java
package rollFinder;
import java.util.*;
public class StudInfo {
private String rollNumber = "";
private int[] rNoComps = new int[4];
private String dept = "";
public StudInfo(String rollNumber)

{
this.rollNumber = rollNumber;
splitString();
}
private void splitString()

{
StringTokenizer strTok = new
StringTokenizer(rollNumber, "-");
int i = 0;
while(strTok.hasMoreTokens()){
rNoComps[i] =
Integer.parseInt(strTok.nextToken());
i++;
}
}
public String getDepartment()
{
switch(rNoComps[2]){
case 736:
dept = "Mechanical Engineering";
break;
case 737:
dept = "Information Technology";
break;
case 733:
dept = "Computer Science and Engineering";
break;
case 732:
dept = "Civil Engineering";
break;
case 735:
dept = "Electronics and Communications";
break;
case 734:
dept = "Electrical and Electronics";
break;
default :
dept = "Wrong input";
}
return dept;
}
OUTPUT:
RESULT:
Dynamic web project for finding department of the student if roll number is given is created success
fully.
VIVA QUESTIONS
1. What are the advantages of servlets over CGI?
Servlet technology was introduced to overcome the shortcomings of CGI technology.
 Servlet provide better performance that CGI in terms of processing time, memory

utilization because servlets uses benefits of multithreading and for each request a
new thread is created, that is faster than loading creating new Object for each
request with CGI.
 Servlet is platform and system independent, the web application developed with
Servlet can be run on any standard web container such as Tomcat, JBoss,
Glassfish servers and on operating systems such as Windows, Linux, Unix,
Solaris, Mac etc.
 Servlets are robust because container takes care of life cycle of servlet and we
don?t need to worry about memory leaks, security, garbage collection etc.
 Servlets are easy to maintain and scalable.
2. What are the major tasks of a servlet?

Servlets perform the following major tasks
 Read the explicit data sent by the clients (browsers). This includes an HTML
form on a Web page or it could also come from an applet or a custom HTTP
client program.
 Read the implicit HTTP request data sent by the clients (browsers). This includes
cookies, media types and compression schemes the browser understands, and so
forth.
 Process the data and generate the results. This process may require talking to a
database, executing an RMI or CORBA call, invoking a Web service, or
computing the response directly.
 Send the explicit data (i.e., the document) to the clients (browsers). This
document can be sent in a variety of formats, including text (HTML or XML),
binary (GIF images), Excel, etc.
 Send the implicit HTTP response to the clients (browsers). This includes telling
the browsers or other clients what type of document is being returned (e.g.,
HTML), setting cookies and caching parameters, and other such tasks.
How many objects of a servlet are created?
Only one object at the time of first request by servlet or web container.
3. Illustrate the servlet life cycle and explain the purpose of each of the
following methods and when do they get invoked:init() service() doGet()
doPost() destroy()
A servlet life cycle can be defined as the entire process from its creation till the destruction.
The following are the paths followed by a servlet.
 The servlet is initialized by calling the init() method.
 The servlet calls service() method to process a client's request.
 The servlet is terminated by calling the destroy() method.
 Finally, servlet is garbage collected by the garbage collector of the JVM.
init() method:
The init method is called only once. It is called only when the servlet is created, and not
called for any user requests afterwards. So, it is used for one-time initializations, just as
with the init method of applets.
Service() method:
The service() method is the main method to perform the actual task. The servlet
container (i.e. web server) calls the service() method to handle requests coming from the
client( browsers) and to write the formatted response back to the client.
doGet() method
A GET request results from a normal request for a URL or from an HTML form that has
no METHOD specified and it should be handled by doGet() method.
doPost() method
A POST request results from an HTML form that specifically lists POST as the
METHOD and it should be handled by doPost() method.
Destroy() method
The destroy() method is called only once at the end of the life cycle of a servlet. This
method gives your servlet a chance to close database connections, halt background threads,
write cookie lists or hit counts to disk, and perform other such cleanup activities.
4. What are the differences between Get and Post method?
GET POST
In case of Get request, only limited amount of data In case of post request, large amount of data can be
can be sent because data is sent in header. sent because data is sent in body.
Get request is not secured because data is exposed Post request is secured because data is not exposed
in URL bar. in URL bar.
Get request can be bookmarked. Post request cannot be bookmarked.
Get request is idempotent . It means second request Post request is non-idempotent

will be ignored until response of first request is
delivered
Get request is more efficient and used more than Post request is less efficient and used less than get.
Post.
5. What is a servlet context? What are its uses?
An object of ServletContext is created by the web container at time of deploying the project.
This object can be used to get configuration information from web.xml file. There is only
one ServletContext object per web application
There can be a lot of usage of ServletContext object. Some of them are as follows:
o The object of ServletContext provides an interface between the container and servlet.
o The ServletContext object can be used to get configuration information from the
web.xml file.
o The ServletContext object can be used to set, get or remove attribute from the
web.xml file.
o The ServletContext object can be used to provide inter-application communication
6. What is the difference between Servlet Request and Servlet Context when
calling a Request Dispatcher?
getRequestDispatcher() of ServletRequest is useful to refer the servlets available in the same

Web application.
request.getRequestDispatcher("url") means the dispatch is relative to the current HTTP

request. That is, it locates the resource relative to the request path
getRequestDispatcher() of ServletContext is useful to refer servlets available on other Web

applications on different Web server also.
getServletContext().getRequestDispatcher("url") means the dispatch is relative to the root of

the current context.
7. What is Session Tracking? Why is it needed?
Session Tracking is a way to maintain state (data) of an user. It is also known as session
management in servlet. Http protocol is a stateless so we need to maintain state
using session tracking techniques. Each time user requests to the server, server treats the
request as the new request.
8. What is URL rewriting? Explain with an example.
Url rewriting is a process of appending or modifying any url structure while loading a
page.
The request made by client is always a new request and the server can not identify whether
the current request is send by a new client or the previous same client. Due to This
property of HTTP protocol and Web Servers are called stateless. But many times we
should know who is client in the processing request.
For example:
In any social networking site during login to till logout the server should know who is
client so that server can manage all the request according to the user need.
This problem is solved by Session in Servlet.
9. What are the functions of Servlet Container ?
The main functions of Servlet container are:

1. Lifecycle management : Managing the lifecycle events of a servlet lik class loading,
instantiation, initialization, service, and making servlet instances eligible for garbage
collection.
2. Communication support : Handling the communication between servlet and Web server.
3. Multithreading support : Automatically creating a new thread for every servlet request
and finishing it when the Servlet service() method is over.
4. Declarative security : Managing the security inside the XML deployment descriptor file.
5. JSP support : Converting JSPs to servlets and maintaining them.

VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
Lab-7
AIM:
Use the MVC Pattern and develop an application using servlets & JSP’s to take the roll
number of a student as input and display the branch of the given student.
[732-Civil, 733-CSE, 734-EEE, 735-ECE, 736-Mechanical, 737-IT]
PROGRAM:
Index.jsp:
<!DOCTYPE html>
<html lang="en">
<!—Hema Kamani 1602-18-737-071-->
<head>
<title>Get Department</title>
</head>
<!—Hema Kamani 1602-18-737-071-->
<body style="text-align: center;">

<form action="getdept" method="POST">
<h2>Enter a roll number and click on 'Submit' to get department information.</h2>
<br>
<label for="" style="font-weight: bold;">Roll No</label>
<input type="text" name="rollno">
<br>
<br>
<button type="submit">Submit</button>
</form>
</body>
<!—Hema Kamani 1602-18-737-071-->
</html>
Output.jsp:
<!DOCTYPE html>
<html lang="en">
<!—Hema Kamani 1602-18-737-071-->
<head>
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
</head>
<!—Hema Kamani 1602-18-737-071-->
<body>
<% String rollno=request.getParameter("rollno"); String dept=(String)request.getAttribute("dept");
%>
<h2>The Roll Number <%=rollno%> belongs to <%=dept%> Department</h2>
</body>
<!—Hema Kamani 1602-18-737-071-->
</html>
GetDept.java:
package vce.controller;
import vce.model.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
public class GetDept extends HttpServlet{

public void doPost(HttpServletRequest request,HttpServletResponse response) throws
IOException, ServletException{
String rollNo=request.getParameter("rollno");
StudInfo std=new StudInfo(rollNo);
String dept;
String deptno=std.getDeptno();
HttpSession session=request.getSession(false);
if(session==null){
dept=std.getDepartment();
if(dept.equals("Wrong input")){
response.sendRedirect("index.jsp");
return;
}
session=request.getSession();
session.setAttribute(deptno,dept);
}
else{
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
if(session.getAttribute(deptno)!=null){
dept=(String)session.getAttribute(deptno);
dept=dept+" ( Fetched from session )";
}
else{
dept=std.getDepartment();
if(dept.equals("Wrong input")){
response.sendRedirect("index.jsp");
return;
}
session.setAttribute(deptno,dept);
}
}
request.setAttribute("dept",dept);
RequestDispatcher rd=request.getRequestDispatcher("output.jsp");
rd.forward(request,response);
}
}
StudentInfo.java:
package vce.model;
import java.util.StringTokenizer;
public class StudInfo{
private String rollNumber = "";

private int[] rNoComps = new int[4];
private String dept = "";
private String deptno = "";
public StudInfo(String rollNumber){

this.rollNumber = rollNumber;
splitString();
}
private void splitString(){

StringTokenizer strTok = new StringTokenizer(rollNumber, "-");
int i = 0;
while(strTok.hasMoreTokens()){
rNoComps[i] = Integer.parseInt(strTok.nextToken());
i++;
}
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
this.deptno=rNoComps[2]+"";
}
public String getDepartment(){

switch(rNoComps[2]){
case 736:
dept = "Mechanical Engineering";
break;
case 737:
dept = "Information Technology";
break;
case 733:
dept = "Computer Science and Engineering";
break;
case 732:
dept = "Civil Engineering";
break;
case 735:
dept = "Electronics and Communications";
break;
case 734:
dept = "Electrical and Electronics";
break;
default :
dept = "Wrong input";
}
return dept;
}
public String getDeptno(){

return deptno;
}
}
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
OUTPUT:
Result: The required program was executed successfully

VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
VIVA QUESTIONS
1. What is JSP?
It stands for Java Server Pages. It is a server-side technology. It is used for creating web
application. It is used to create dynamic web content. It is an advanced version of
Servlet Technology.
2. what are the advantages of JSP over JavaScript?
JSP is better because it lets you use servlets instead of a separate program to
generate that dynamic part. Besides, SSI is really only intended for simple inclusions,
not for real programs that use form data, make database connection. JavaScript can
generate HTML dynamically on the client. However, it can only access client
environment. JavaScript can't access server-side resources like databases,
catalogues, pricing information etc.
3. what are the types of directive tags? give syntax and purpose?
A JSP directive affects the overall structure of the servlet class. It usually has the
following form –
<%@ directive attribute = "value" %>
<%@ page ... %>

Defines page-dependent attributes, such as scripting language, error page, and
buffering requirements.
<%@ include ... %>
Includes a file during the translation phase.
<%@ taglib ... %>
Declares a tag library, containing custom actions, used in the page
4. what is session attribute?
The session attribute indicates whether or not the JSP page uses HTTP sessions. A
value of true means that the JSP page has access to a built-in session object and a
value of false means that the JSP page cannot access the built-in session object.
VASAVI COLLEGE OF
ENGINEERING
AUTONOMOUS
Hyderabad- 500 031
5. what are JSP implicit objects?
There are 9 jsp implicit objects. These objects are created by the web container that
are available to all the jsp pages.
The available implicit objects are:
 Out
 Request
 Response
 Config
 Application
 Session
 Page context
 Page
 Exception

Vasavi College of Engineering

Uploaded by

Copyright:

Available Formats

Vasavi College of Engineering

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

Vasavi College of Engineering

Uploaded by

Copyright:

Available Formats

VASAVI COLLEGE OF ENGINEERING

<html> tag represents the root of an HTML document.

<h1> to <h6> defines Html headings

<h1> defines the most important heading.

<h6> defines the least important heading.

Aim: Create Menu using ordered list and other options

<li style="font-size: 20px; font-weight: bold">Semester Subjects </li>

<li style="font-size: 20px; font-weight: bold" >Semester Subjects</li>

<li style="font-size: 20px; font-weight: bold" >Semester Subjects</li>

<title>HTML UNORDERED LISTS</title>

<h3>List of scripting languages</h3>

1. Do all HTML tags come in pair?

2. How do you insert a comment in html?

5.Differentiate between HTML and XHTML? Ans:

Parameter HTML XHTML

8.If I do not put <!DOCTYPE html>, will HTML 5 work?

10.How do you change the number type in the middle of a list?

12.Which tag is used for creating ordered list in html document?

Ans: <ol></ol> is used for ordered list.

13.List the different attributes supported by the <ol> tag. Ans:

type: can be ‘a’ ‘A’ ‘i’ ‘I’ ,

<td style="border: 1px solid yellow; height: 70px; padding: 20px;">

2) Aim: creation of webpage using frames

<frame> used in HTML to define one particular window within a frameset.

<body style="background-color: blue">

Result: program to create webpages using frames executed successfully.

3) Aim: Creation of a web page using iframes

<iframe> specifies an inline frame

Result: program to create a webpage using iframes is executed successfully.

2)What is iframe? Why is it recommended to avoid iframes?

3)How do you create email links?

4)Can a table be nested within another in html?

5) Which tag is used to create a row in a table?

6) Which tag is used to create columns in rows?

7) Which tag is used to create the heading for a column in a table?

8) What is the purpose of spanning?

9) What is the purpose of caption?

AIM : : To create a portfolio using external style sheets only

<li><a href="resume.html" target="_blank">RESUME</a></li>

RESULT: To Create a portfolio using external style sheets only is successfully

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-

font-family: Arial, Helvetica, sans-serif;

margin: -110px 0px 0px 30px;

margin:-150px 20px 0px 512px;

@media (max-width: 600px) {

<ul style="margin-top: 120px;margin-right: 35px;margin-left:-10px;font-size: 15px;float:left;">

<li><i class="fa fa-map-marker" aria-hidden="true"></i></li><br>

<li><i class="fa fa-mobile" aria-hidden="true"></i></li><br>

<li><i class="fa fa-envelope-o" aria-hidden="true"></i></li><br>

<li><i class="fa fa-linkedin" aria-hidden="true"></i></li><br>

<img src="Hemakamani.jpg" alt="My photo">

<h2>Hema Kamani / Full stack Web Developer</h2>

<p style="margin-top:-5px;margin-left:800px; color:#888888; font-family: arial" >I aspire for an

<div class="column right" style="">

<li class="main"><i class="fa fa-graduation-cap" aria-hidden="true" style="font-size:

<li class="sub1">Bachelor of Engineering</li>

Vasavi College Of Engineering

Narayana Junior College