HTML-PracticalPrograms 221020 134704

Practical exercises based on concepts listed in theory using HTML.
1. Create HTML document with following formatting – Bold, Italics, Underline, Colors, Headings, Title, Font
and Font Width, Background, Paragraph, Line Brakes, Horizontal Line, Blinking text as well as marquee text.
<html>
<head>
<body bgcolor="green">
<title>formatting tags</title>
<font color= "red" width =20>
<h2>
<b>welcome to html</b><br>
<i>italic format</i><br>
<u>text belongs to underline</u><br>
</h2>
<hr>
<blink>vaagdevi</blink>
<p>this content belongs to formatted tags which is used to apply different text formats in html
web page</p>
<marquee>welcome to vaagdevi degree& p.g college</marquee>
</font>
</body>
</html>
2. Create HTML document with Ordered and Unordered lists, Inserting Images, Internal and External linking
<html>
<head>
<title> order, unordered and linked lists</title>
</head>
<body bgcolor="yellow">
<h1>HELLO WORLD</h1>
<ol type="A">
<li>flowers</li>
<ul type="disc">
<li>rose</li>
<li>jasmine</li>
</ul>
<li>fruits</li>
<ul type="circle">
<li>apple</li>
<li>mango</li>
</ul>
</ol>
<ol type=”1”>
<li>cool drinks</li>
<ul type="square">
<li>coke</li>
<li>maaza</li>
</ul>
<li>coffee</li>
</ol>
<center>
<h1> SUBJECT NAMES</h1>
</center>
<a name="#top">top</a>
<a href="#a">A</a>
<a href="#a">B</a>
<br><br>
<a name="a">A
<hr>
Artificial intelligence<br>
adv.dbms<br>
Advance Java<br><br><br>
<a name="Top">Top</a><br><br>
Business envi<br>
Basic language<br>
BDPS<br>
<a name="#top">top</a>
<a href="Prog1.html">click here to open program</a><br>
<img src=".jpg" alt="this is a image">
</body>
</html>
3. Create HTML document with Table:
Some Image Here
<html>
<head>
<title>Program on Table</title>
</head>
<body bgcolor="orange">
<ltr>
</ltr>
<table border="3" align="center">
<caption>
Student Table
</caption>
<tbody>
<tr>
<th>S. No </th>
<th>Student Name</th>
<th>Age</th>
<th>Photo</th>
</tr>
<tr align="center">
<td> 101</td>
<td> Ramu</td>
<td>20</td>
<td>
<img src="Roses1.jpg" alt="Image1" height="100" width="100">
</td>
</tr>
<tr align="center">
<td>102</td>
<td>Raju</td>
<td>21</td>
<td>
</td>
</tr>
<tr align="center">
<td>103</td>
<td>Ravi</td>
<td>22</td>
<td>
</td>
</tr>
<tr align="center">
<td>104</td>
<td>Raman</td>
<td>23</td>
<td>
</td>
</tr>
</tbody>
</table>
</body>
</html>
4. Create Form with Input Type, Select and Text Area in HTML.
<html>
<head>
<title>select option</title>
</head>
<body bgcolor="violet" align="center">
Applicant name:<input type=”text” name=”t1” size=30><br>
Network belongs to :<select name=”network”>
<option>..Select your Operator..</option>
<option>Airtel</option>
<option>jio</option>
<option>idea</option>
<option>vodafone</option>
</select><br>
<input type="submit" name="submit" value="submit">
</body>
</html>
5. Create an HTML containing Roll No., student‟s name and Grades in a tabular form.
<html>
<head><title>student details</title>
</head>
<body bgcolor="green" >
<table border=4 align="center">
<tr>
<th>Rollno</th>
<th>Student name</th>
<th>Grade</th>
</tr>
<tr>
<td>32143</td>
<td>Shriya</td>
<td>A</td>
</tr>
<tr>
<td>32144</td>
<td>Suma</td>
<td>A</td>
</tr>
<tr>
<td>32145</td>
<td>Lavanya</td>
<td>A</td>
</tr>
<tr>
<td>32146</td>
<td>Navya </td>
<td>B</td>
</tr>
<tr>
<td>32147</td>
<td>Gouthami</td>
<td>B</td>
</tr>
</table>
</body>
</html>
6. Create an HTML document (having two frames) which will appear as follows:
About Department
Department1 This frame would show the
Department2 contents according to the link
Department3 clicked by the user on the left
Frame.
Prog6-Frame.html
<html>
<head>
<title>frames using links</title>
</head>
<body bgcolor="yellow">
<iframe src="Prog6-DeptInfo.html" width=400 height=500></iframe>
<iframe src="Prog6-InForm.html" width=400 height=500 name="dept"></iframe>
</body>
</html>
Prog6-InFrame.html
<html>
<body>
<p>This frame would show the content according to the link clicked by the user on the left frame
</p>
</body>
</html>
Prog6-DeptInfo.html
<html>
<body>
<center><h2>About Departments</h2></center>
<a href="Prog6-CSDept.html" target="dept">Department1</a><br>
<a href="Prog6-MathsDept.html" target="dept">Department2</a><br>
<a href="Prog6-CommerceDept.html" target="dept">Department3</a><br>
</body>
</html>
Prog6-CSDept.html
<html>
<body>
<table border=2>
<tr>
<th>Faculty Name</th>
<th>Department</th>
<th>Contact</th>
</tr>
<tr>
<td>Srinivas</td>
<td>Comp.Science</td>
<td>xxxxxxxxxxx</td>
</tr>
<tr>
<td>Naresh</td>
<td>Comp.Science</td>
</tr></table>
</body>
</html>
Prog6-MathsDept.html
<html>
<body>
<table border=2>
<tr>
<th>Department</th>
<th>Contact</th>
</tr>
<tr>
<td>Mallikarjun</td>
<td>Mathematics</td>
</tr>
<tr>
<td>Rama Krishna</td>
<td>Mathematics</td>
</tr>
</table>
</body>
</html>
Prog6-CommerceDept.html
<html>
<body>
<table border=2>
<tr>
<th>Department</th>
<th>Contact</th>
</tr>
<tr>
<td>VenuGopal</td>
<td>commerce</td>
</tr>
<tr>
<td>Srinivasulu</td>
<td>commerce</td>
</tr>
</table>
</body>
</html>
7. Create an HTML document containing horizontal frames as follows:
Department Names (could be along with Logos)
Contents according to the Link clicked
Prog7-Home.html
<html>
<title>frames</title>
</head>
<frameset rows="50%,50%">
<frame src="Prog7-linked.html">
<frame src="Prog7-output.html" name="dept">
</frameset>
</html>
Prog7-linked.html
<html>
<head>
<title>linking</title>
</head>
<body>
<a href="Prog7-CS.html" target="dept">Computer Science</a><br>
<a href="Prog7-commerece.html" target="dept">Commece</a><br>
</body>
</html>
Prog7-CS.html
<html>
<body>
<h1>computer science</h1>
</body>
</html>
Prog7-commerece.html
<html>
<body>
<h1>Commerce</h1>
</body>
</html>
Prog7-output.html
<html>
<body>
<p>this frame would show the contents according to the link clicked at top frame</p>
</body>
</html>
8. Create a website of 6 – 7 pages with different effects as mentioned in above problems.
Prog8-Home.html
<html>
<title>frames</title>
</head>
<frameset rows="40%,60%">
<frame src="Prog8-linked.html">
<frame src="Prog8-output.html" name="destin">
</frameset>
</html>
Prog8-linked.html
<html>
<head>
<title>linking</title>
</head>
<body>
<br>
<a href="Prog1.html" target="destin">HTML Formatting</a><br><br>
<a href="Prog2.html" target="destin">HTML Lists</a><br><br>
<a href="Prog3.html" target="destin">HTML Table with Image</a><br><br>
<a href="Prog4.html" target="destin">HTML InputType</a><br><br>
<a href="Prog5.html" target="destin">HTML Tables</a><br><br>
<a href="Prog6-Frame.html" target="destin">HTML Frames</a><br>
</body>
</html>
Prog8-output.html
<html>
<body>
<p>this frame would show the contents according to the link clicked at top frame</p>
</body>
</html>
9. Create HTML documents (having multiple frames) in the following three formats:
Frame1
Frame2
Frame3
Frame4 Frame5
<html>
<head><title>frames</title>
</head>
<frameset rows="25%,25%,25%,25%">
<frame src="Roses1.jpg">
<frameset cols="50%,50%">
</frameset>
</frameset>
</html>
10. Create a form using HTML which has the following types of controls:
i. Text Box
ii. Option/radio buttons
iii. Check boxes
iv. Reset and Submit buttons
<html>
<head>
<title>create a form</title>
</head>
<body bgcolor="skyblue">
<form action=http://www.gmail.com method="post">
<p>
<h1>subscribe to xyz news magazine and emails
</h1>
Interested in receiving daily small updates of all latest News? Well, now you can And Best of all,
it is free! Just fill the form
<br>
<h3>Please fill the following boxes to help us send the emails and our news letter</h3>
First name<input type="text" name="t1" size=30<br>
Last name<input type="text" name="t3" size=30><br>
Business<input type="text" name="t3" size=30><br>
We must have a correct email address to send you the news letter<br>
Email<input type="text" name="t4" size=30><br>
How did you hear about XYZ magazine and e-mail<br>
<input type="radio" name="radio">here on the web
&nbsp<input type="radio" name="radio">
Television&nbsp <input type="radio" name="radio">other<br>
Would you like to be on our regular mailing list?<br>
<input type="checkbox" name="checkbox">
Yes,we love junk emails<br>
<hr>
<input type="reset" name="Reset" value="Reset">
&nbsp &nbsp
<input type="submit" value="send it in">
</p>
</form>
</body>
</html>
11. Create a student Bio-Data, using forms.

<html>
<head>
<title>Biodata</title>
</head>
<center><u>
<h1>Biodata</h1></u></center>
<form>
Name <input type=”text” name=”t1” size=”24”><br>
Father name <input type=”text” name=”t1” size=”24”><br>
Date of birth <input type=”text” name=”t1” size=”24”><br>
<h2>Qualifications:</h2>
<table border=2>
<TR>
<TH>course</TH>
<TH>college</TH>
<TH>percentage</TH></TR>
<TR>
<TD>BCA</TD>
<TD>vaagdevi</TD>
<TD>86%</TD
</TR>
<TR>
<TD>intermediate</TD>
<TD>narayana</TD>
<TD>83.3%</TD>
</TR>
<TR>
<TD>tenth class</TD>
<TD>jsmi</TD>
<TD>92%</TD
</TR></table>
<h1>technical skills</h1>
<ul type=”disc”>
<li>c++,c</li>
<li>ms office</li>
<li>html</li>
</ul>
Contact number:<input type=”text” name=”t1”size=”24”>
</form>
</body>
</html>
12. Create a web page using following style sheets
i. Inline style sheets. ii. Embedded style sheets. iii. External style sheets
Prog12-InLineCSS.html
<html>
<head>
<title>inline style sheets</title>
</head>
<body>
<p style=”font- size:20px; color:blue; font-family:arial” >first paragraph effects </p>
<p style=”font-size:30 px; color:silver;font-family:tahoma”>second paragraph effects</p>
</body>
</html>
Prog12-EmbededCSS.html
<html>
<head>
<title>embedded style sheet</title>
<style>
H1
{
color:red;
font-size:30x;
font-family:Tahoma;
}
p
{
color:Blue;
Border:solid blue;
}
p.color
{
color:purple;
Font-size:20px;
Font-family:verdana;
}
</head>
</style>
<body>
<h1>heading tag</h1>
<p>this text belongs to first paragraph</p>
<p class="color">second paragraph</p>
</body>
</html>
Extrernal.css
h1
{
color:Red;
Font-size:30px;
Font-family:Tahoma;
}
P
{
color:Blue;
Border:Thick Solid blue;
Margin:12px;
}
p.color
{
Color:purple;
Font-size:20px;
Font-family:verdana;
}
Prog12-ExternalCSS.html
<html>
<head>
<title>external style sheet</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href=" Extrernal.css ">
<h1>welcome to external style sheet</h1>
<p>first paragraph includes the effects </p>
<p class="color"> second paragraph</p>
</body>
</html>
13. Create a web page using “class” style sheets with different “border-width” property values like thick,
medium, thin, grove, inset, and outset, red & blue.
<html>
<head>
<style>
body
{
Color:red;
background-color:lightyellow;
Font-family:sans-sarif;
Align:center;
}
h1.large
{
Font-size:20px;
color:green;
Font-style:italic;
Border:thick solid blue;
}
h2
{
font-size:20px;
color:blue;
font-style:italic;
border-style:solid;
border-width:thin;
}
h3
{
font-size:20px;
color:red;
Font-style:bold;
Border:groove;
}
Orange
{
color:orange
}
</style>
</head>
<body>
<h1 class="large">
Here is an example demonstrating usage of classes in css concept</h1><br><br>
<h2>this passage will not have the effect to large class</h2><br><br>
<h3><span class=”orange”>
This passage is under the influence of universal orange class</h3>
</body>
</html>

HTML-PracticalPrograms 221020 134704

Uploaded by

Copyright:

Available Formats

HTML-PracticalPrograms 221020 134704

Uploaded by

Document Information

Original Description:

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

HTML-PracticalPrograms 221020 134704

Uploaded by

Copyright:

Available Formats

Practical exercises based on concepts listed in theory using HTML.

3. Create HTML document with Table:

Some Image Here

Department Names (could be along with Logos)

Contents according to the Link clicked

11. Create a student Bio-Data, using forms.

You might also like