Practical_file_of_web_develment

Que 1: Display a simple “Hello world” message on the
webpage.
Ans:
<!DOCTYPE html>
<html>
<title>Practical</title>
<head>
</head>
<body>
Hello World
</body>
</html>
Output:
Hello World
Que 2: Demonstrate the use of different heading tags.
Ans:
<!DOCTYPE html>
<html>
<title> Practical</title>
<head>
</head>
<body>
<h1> This is my first web page.</h1>
</body>
</html>
Output:
This is my first web page.


Que 3: Create a simple paragraph.
Ans:
<!DOCTYPE html>
<html>
<title> Practical</title>
<head>
</head>
<body>
<p> Hey, I am a paragraph</p>
</body>
</html>
Output:
Hey, I am a paragraph
Que 4: Display an ordered list and unordered list.
Ans:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> Fruits Name</h1>
<h2> Ordered list</h2>
<ol>
<li> Mango </li>
<li> Orange </li>
<li> Apple </li>
</ol>
<h2> Unordered list</h2>
<ul>
<li> Mango </li>

<li> Orange </li>
<li> Apple </li>
</ul>
</body>
</html>
Output:
Fruits Name
Ordered list
1. Mango
2. Orange
3. Apple
Unordered list
• Mango
• Orange
• Apple
Que 5: Create a hyperlink to another webpage.
Ans:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hyperlink</h1>
<a href="https://web.whatsapp.com/"> Whatsapp </a>
</body>
</html>
Output:
Hyperlink
Whatsapp
Que 6: Display an image on the webpage.
Ans:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> Jai Shree Ram </h1>
<img src="https://media.webdunia.com/_media/hi/img/article/2020-
12/07/full/1607311219-0037.jpg" width="700" height ="500">
</body>
</html>
Output:
Jai Shree Ram

Que 7: Create a simple html form.
Ans:
<!DOCTYPE html>
<html>
<body>
<h2>Text input fields</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value=""><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of text input fields is 20

characters.</p>
</body>
</html>
Output:
Text input fields

First name:
Last name:
Note that the form itself is not visible.
Also note that the default width of text input fields is 20 characters.
Que 8: Display a basic HTML table.
Ans:
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
</style>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Class</th>
<th>Marks</th>
</tr>
<tr>
<td>Ram</td>
<td>12th</td>
<td>89%</td>
</tr>
<tr>
<td>Mohan</td>
<td>12th</td>
<td>90%</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the

table.</p>
</body>
</html>
Output:
A basic HTML table

Name Class Marks
Ram 12th 89%
Mohan 12th 90%
To understand the example better, we have added borders to the table.

Que 9: Use the <div> element and some css.
Ans:
<!DOCTYPE html>
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
</style>
</head>
<body>
<h1>The div element</h1>
<div class="myDiv">
<h2>This is a heading in a div element</h2>

<p>This is some text in a div element.</p>
</div>
<p>This is some text outside the div element.</p>
</body>
</html>
Output:
<!DOCTYPE html>
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
text-align: center;
width:300px;
</style>
</head>
<body>
<h1>The div element</h1>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
<p>This is some text outside the div element.</p>
</body>
</html>
Output:
The div element

This is a heading in a div element
This is some text in a div element.
This is some text outside the div element.

Que 10:Add comments to your HTML code.
Ans:
<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>

</body>
</html>
Output:
This is a paragraph.
Que 11: Embed an audio file in your website.
Ans:
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Que 12: Use different types of ordered lists.
Ans:
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h2>Ordered List with Letters</h2>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h2>Ordered List with Lowercase Letters</h2>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h2>Ordered List with Roman Numbers</h2>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h2>Ordered List with Lowercase Roman Numbers</h2>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Output:
Ordered List with Numbers

1. Coffee
2. Tea
3. Milk
Ordered List with Letters

A. Coffee
B. Tea
C. Milk
Ordered List with Lowercase Letters
a. Coffee
b. Tea
c. Milk
Ordered List with Roman Numbers

I. Coffee
II. Tea
III. Milk
Ordered List with Lowercase Roman Numbers
i. Coffee
ii. Tea
iii. Milk
Que 13: Link an external CSS file.
Ans:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Code:
body {
}
h1 {
color: navy;
margin-left: 20px;
}
Output:
This is a heading
This is a paragraph.
Que 14: Embed another webpage using an iframe.
Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Opening Links in an iFrame</title>
<style>
iframe {
width: 100%;
height: 500px;
</style>
</head>
<body>
<iframe src="/examples/html/hello.html"
name="myFrame"></iframe>
<p><a href="https://www.tutorialrepublic.com"
target="myFrame">Open TutorialRepublic.com</a></p>
</body>
</html>
Output:
Hello World
This HTML document is embedded inside the current document using an iframe.
https://www.tutorialrepublic.com/
Que 15: Program that uses essential HTML tags to create a
simple webpage.
Ans:
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>
Output:
My First Heading
My first paragraph

Practical_file_of_web_develment

Uploaded by

Copyright:

Available Formats

Practical_file_of_web_develment

Uploaded by

Document Information

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

Practical_file_of_web_develment

Uploaded by

Copyright:

Available Formats

Que 1: Display a simple “Hello world” message on the

This is my first web page.

This is my first web page.

This is my first web page.

This is my first web page.

<p> Hey, I am a paragraph</p>

<h1> Fruits Name</h1>

<h2> Ordered list</h2>

<li> Mango </li>

<li> Orange </li>

<li> Apple </li>

<h2> Unordered list</h2>

<li> Mango </li>

<li> Apple </li>

<a href="https://web.whatsapp.com/"> Whatsapp </a>

<h1> Jai Shree Ram </h1>

Jai Shree Ram

<h2>Text input fields</h2>

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value=""><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" value="">

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of text input fields is 20

Text input fields

Note that the form itself is not visible.

border:1px solid black;

<h2>A basic HTML table</h2>

<p>To understand the example better, we have added borders to the

A basic HTML table

To understand the example better, we have added borders to the table.

border: 5px outset red;

<h1>The div element</h1>

<h2>This is a heading in a div element</h2>

<p>This is some text outside the div element.</p>

border: 5px outset red;

<h1>The div element</h1>

<h2>This is a heading in a div element</h2>

<p>This is some text in a div element.</p>

<p>This is some text outside the div element.</p>

The div element

This is some text outside the div element.

<source src="horse.ogg" type="audio/ogg">

<source src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio element.

<h2>Ordered List with Numbers</h2>

<h2>Ordered List with Letters</h2>

<h2>Ordered List with Lowercase Letters</h2>

<h2>Ordered List with Roman Numbers</h2>

<h2>Ordered List with Lowercase Roman Numbers</h2>

Ordered List with Numbers

Ordered List with Letters

Ordered List with Lowercase Letters

Ordered List with Roman Numbers

<link rel="stylesheet" href="mystyle.css">

<title>Opening Links in an iFrame</title>

<title>My Page Title</title>

<h1>My First Heading</h1>