WT Lab Sairam

Exercise-1
Design HTML Fundamentals Constructs

i)Headings:
<!DOCTYPE html>
<html lang="en">
<head>
<title>basic</title>
</head>
<body bgcolor="white">
<center>
<h1>vasavi clg</h1>
<h2>vasavi clg</h2>
<h3>vasavi clg</h3>
<h4>vasavi clg</h4>
<h5>vasavi clg</h5>
<h6>vasavi clg</h6>
</center>
</body>
</html>
Output:
1
ii)Links
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://sves.org.in/ecap/"><h1>CLICK here for
ECAP</h1></a>
</body>
</html>
Output:
iii)Paragraphs
<!DOCTYPE html>
<html lang="en">
<head>
2
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Paragraph</title>
</head>
<body>
<p><h2>HTML stands for Hyper Text Markup Language. HTML is
the standard markup language for creating Web pages. HTML
describes the structure of a Web page. HTML consists of a series of
elements. HTML elements tell the browser how to display the
content.</h2>
</p>
</body>
</html>
Output:
iv)Images
<!DOCTYPE html>
<html lang="en">
<head>
<title>image</title>
</head>
<body>
3
<img
src="C:\Users\Administrator\Desktop\class\googlelogo_color_272x92
dp.png"
alt="image" width="600px" heigth="600px">
</body>
</html>
Output:
v)Table:
<!DOCTYPE html>
<html lang="en">
<head>
<title>table</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Rollno</th>
<th>Name </th>
</tr>
</thead>
<tbody>
<tr>
<td>05G2</td>
4
<td>sai</td>
</tr>
<tr>
<td>05G3</td>
<td>ram</td>
</tr>
<tr>
<td>05G4</td>
<td>Meghana</td>
</tr>
<tr>
<td>05G5</td>
<td>Azm</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
5
Exercise-2
Design HTML fundamental constructs

a)Frame:
<!DOCTYPE html>
<html>
<head>
<title>Frame</title>
</head>
<frameset cols="33%,34%,33%">
<frame name="left" src="C:\Users\janga\Downloads\wt all\g6(wt) -
Copy\form1.html" frame border="10">
<frame name="center" src="C:\Users\janga\Downloads\wt all\g6(wt) -
Copy\5.html" frame border="10">
<frame name="right" src="C:\Users\janga\Downloads\wt all\g6(wt) -
Copy\2.html" frame border="10">
</frameset>
</html>
Output:
6
ii)form:
<!DOCTYPE html>
<html lang="en">
<head>
<title>employee form</title>
</head>
<body>
<form>
<legend>employee medical form</legend>
<br>
Name:*
<br>
<input type="text" placeholder="First" width="50%" height="50%">
<input type="text" placeholder="Last" width="50%" height="50%">
<br>
<br>
Phone number*
Email address
<br>
<input type="number" placeholder="### ### ####" width="50%"
height="50%">
<input type="email" width="50%" height="50%">
<br>
<br>
Birth date:
<br>
<input type="date" width="50%" height="50%">

<br>
<br>
Adress:*
<br>
<input type="text" placeholder="Street address" >
<input type="text" placeholder="Street address line2" >
<br>
<br>
<input type="text" placeholder="City">
<input type="text" placeholder="Region">
<br>
<p>Have you had the hepatitis B vaccination?</p>
<input type="radio" name="a">yes
7
<input type="radio" name="a" >No
</form>
</body>
</html>
Outpu:
8
Exercise-3
Design Cascading Style sheets

i)inline:
<!DOCTYPE html>
<html>
<title>Inline css</title>
</head>
<body>
<h1 style=color:blue;background-color=white>css</h1>
<p style=color:green;background-color=white>it is used to style the
hyml document css is used in 3 ways internal ,external,inline</p>
<h1 style=color:blue;background-color=gray>css</h1>
<p style=color:green;background-color=black>it is used to style the
hyml document </p>
</body>
</html>
Output:
9
ii)internal:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Internal CSS:</title>
<style>
h1 {
color:royalblue;
background-color: white;
}
p{
color: green;
background-color:white;
}
</style>
</head>
<body>
<h1>Cascading Style Sheets:</h1>
<p>CSS stands for Cascading Style Sheets. It is used to style the
sheet/document. There are three ways to apply CSS: internal, external,
and inline.</p>
</body>
</html>
Output:
10
iii)External: (#external.css):
<!DOCTYPE html>
<html>
<head>
<title>External css</title>
<link rel="stylesheet" href="external.css">
</head>
<body>
<div class=main>
<h1>Cascarding style sheet</h1>
<p>It is used to style the html document. it has 3 ways.
they are internal,external,inline</p>
</div>
</html
Output:
11

WT Lab Sairam

Uploaded by

Copyright:

Available Formats

WT Lab Sairam

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

WT Lab Sairam

Uploaded by

Copyright:

Available Formats

Exercise-1

Design HTML Fundamentals Constructs

Design HTML fundamental constructs

<input type="date" width="50%" height="50%">

Design Cascading Style sheets

You might also like