Practical No-3

NIHAR 2821679
PRACTICAL NO. 1
AIM: Create a new document that takes the format of a business letter. Combine <P> and
<BR> tags to properly separate the different parts of the documents. Such as the address,
greeting, content and signature.
CODE EDITOR: Visual Studio Code Version 1.77.
PC CONFIGURATION: RAM 8GB, ROM 64-bit.
THEORY: The tags used in the following code are as follows:
 <!DOCTYPE html>: The <!DOCTYPE html> declaration defines that this document
is an HTML5 document.
 <html>: This element is the root element of the HTML page.
 <head>: This element contains meta information about the HTML page.
 <meta>: This tag is used to provide additional information about a page to search
engines and other clients.
 <title>: element specifies a title for the HTML page which is shown in the browser's
title bar or in the page's tab.
 <style>: This tag is used to style the HTML elements.
 <body>: This element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
 <h1>: The <h1> element defines a large heading.
 .<pre>: This tag defines preformatted text.
 <b>: This tag is used to bold the text.
 <p>: The <p> element defines a paragraph.
 <br>: It is an empty tag which is used to insert a single line break.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Letter</title>
<style>
body{
padding-left: 0.5cm;
background-color: grey;
}
h1{
text-align: center;
}
pre{
font-size: 15px;
}
p{
font-family: Consolas;
}
INTERNET AND WEB TECHNOLOGY LAB

NIHAR 2821679
</style>
</head>
<body>
<h1>Business Letter</h1>
<pre>H.No.58 Block-D
Sector 26, Rohini
New Delhi- 110085
9 September 2023
To
Customer Service Manager
XYZ Electronic Pvt. Ltd.
New Delhi- 110085
<b>
Subject-
</b>
Filing complaint for a defect in purchase no. MS-XXX/XX/2020.
Dear Sir
</pre>
<p>I hereby write to complain regarding the defect in the music system w.r.t
bill no. MS-XXX/XX/2020 purchased on 20 August 2023 from your store.
<br>
The music system worked properly for one month but it has not been functioning
properly for the past three days. The sound breaks whilst the songs are
being played and the system hangs multiple times. Coupled with this, the songs
stop playing abruptly and require the system to be restarted. Since the
music system is still in the warranty period of six months, I wish to get it
replaced at the earliest possible.
<br>I request you to look into this matter without any delay and provide a new
working music system of the same brand. I have enclosed a copy of
the bill of purchase for your reference. Looking forward to your early
response.
</p>
<pre>Thanking you
Yours truly
Shrijal
</pre>
</body>
</html>

NIHAR 2821679
OUTPUT:

NIHAR 2821679
PRACTICAL NO. 2
AIM: a) Create a seven-item ordered list using Roman numerals. After the fifth item,
increase the next list value by 5.
 <ol>: The <ol> tag is used to defines an ordered list. This list items can be marked
with numbers or alphabets.
 Type attribute: This attribute defines the type of the list item marker. It is the
attribute of <ol> tag.
 <li>: This tag is used to define a list item.
 Start attribute: Using this attribute we can control the list counting.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>List</title>
<style>
body{
padding-left: 2cm;
background-color: gray;
}
h1{
text-align: center;
}
ol{
font-family: Consolas;
font-size: xx-large;
}
</style>

NIHAR 2821679
</head>
<body>
<h1>Ordered List</h1>
<ol type="I">
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
<li>Avocados</li>
<li>Kiwi</li>
</ol>
<ol type="I" start="11">
<li >Grapes</li>
<li>Berries</li>
</ol>
</body>
</html>
OUTPUT:
AIM: b) Beginning with an ordered list, create a list that nests both an unordered list and a
definition list.

NIHAR 2821679

 Style attribute: It is used to style HTML elements.
 <ol>: The <ol> tag is used to defines an ordered list. This list items can be marked
with numbers or alphabets.
 <li>: This tag is used to define a list item.
 <b>: This tag is used to bold the text.
 <u>: This tag is used to underline the text.
 <ul>: The <ul> tag is used to define an unordered list. The list items will be marked
with bullets by default.
 <dl>: This tag defines the description list. Description list is a list of terms, with a
description of each term.
 <dt>: This element defines the description term.
 <dd>: This element describes the term in a description list.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>List</title>
</head>
<body style="background-color: gray;">
<h1 style="text-align:center;">Beverages</h1>
<ol>
<li><b><u>Tea</u></b>
<ul>
<li>Green Tea</li>
<li>Black Tea</li>
</ul>
<dl>
<dt><b>Green Tea</b></dt>
<dd>-Made with steamed tea leaves, it has a high concentration
of EGCG.</dd>
</dl>
<dl>
<dt><b>Black Tea</b></dt>
<dd>-Made with fermented tea leaves, black tea has the highest
caffeine content.</dd>
</dl>
</li>
<li><b><u>Coffee</u></b>
<ul>
<li>Capuccino</li>
<li>Espresso</li>

NIHAR 2821679
</ul>
<dl>
<dt><b>Capuccino</b></dt>
<dd>-Cappuccino is an espresso-based coffee made with smaller
amount of steamed milk and a thick layer of foam. It has a bold taste and the
most preferred variety.</dd>
</dl>
<dl><b>Espresso</b></dl>
<dd>This beverage will lift your mood on a bad day and helps in
maintaining great health.</dd>
</li>
</ol>
</body>
</html>
OUTPUT:

NIHAR 2821679
PRACTICAL NO. 3
AIM: Create a table using HTML basic tags.
 <u>: This tag is used to underline the text.
 <table>: This element is used to create tables in HTML. A table in HTML consists of
table cells inside rows and columns.
 <tr>: It defines a row in the table.
 <th>: This is used to define header cell in the table.
 <td>: This is used to define table cell. It contains the content of the table.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table</title>
<style>
body{
background-color: lightgrey;
}
h1{
text-align: center;
}
table{
margin-left: auto;
margin-right: auto;
}
table,tr,td,th{

NIHAR 2821679
border: solid black;

border-radius: 6px;
font-size: larger;
width: 50%;
}
</style>
</head>
<body>
<h1><u>Student Info</u></h1>
<table>
<tr>
<th>Roll No.</th>
<th>Name</th>
<th>City</th>
</tr>
<tr>
<td>101</td>
<td>A</td>
<td>Panipat</td>
</tr>
<tr>
<td>102</td>
<td>B</td>
<td>Sonipat</td>
</tr>
<tr>
<td>103</td>
<td>C</td>
<td>Gharaunda</td>
</tr>
</table>
</body>
</html>

NIHAR 2821679
OUTPUT:

NIHAR 2821679
PRACTICAL NO. 4
AIM: Create a online form in HTML.
 <form>: This is used to create HTML form for user input.
 <label>: The tag defines a label for many form elements. The element is useful for
screen-reader users, because the screen-reader will read out loud the label when the
user focuses on the input element. The element also helps users who have difficulty
clicking on very small regions (such as radio buttons or checkboxes) - because when
the user clicks the text within the element, it toggles the radio button/checkbox. The
for attribute of the tag should be equal to the id attribute of the element to bind them
together.
 <input>: It specifies an input field where the user can enter data.
An element can be displayed in many ways, depending on the type attribute.
<input type= “text”> Displays a single-line text input field
<input type= “radio”> Displays a radio button (for selecting one of many choices)
<input type= “checkbox”>Displays a checkbox (for selecting zero or more of many
choices)
<input type= “submit”> Displays a submit button (for submitting the form)
<input type= “button”> Displays a clickable button
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form</title>
</head>
<body style="background-color: lightgrey;">
<h1>Registration Form</h1>
<form>
<label for="fname">First Name:</label><br>

NIHAR 2821679
<input type="text" id="fname" ><br><br>

<label for="lname">Last Name:</label><br>
<input type="text" id="lname"><br><br>
<label for="rollno.">Roll No.:</label><br>
<input type="number" id="rollno."><br><br>
<label >Department:</label><br>
<input type="radio" name="dep." id="it">
<label for="it">IT</label><br>
<input type="radio" name="dep." id="cse">
<label for="cse">CSE</label><br><br>
<label>Laguages:</label><br>
<input type="checkbox" name="fav_lang" id="java">
<label for="java">Java</label><br>
<input type="checkbox" name="fav_lang" id="c">
<label for="c">C</label><br>
<input type="checkbox" name="fav_lang" id="c++">
<label for="c++">C++</label><br>
<input type="checkbox" name="fav_lang" id="python">
<label for="python">Python</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
OUTPUT:

NIHAR 2821679
PRACTICAL NO.: 5
AIM: Create frame with anchor tag.
Theory: The <frame> HTML element defines a particular area in which another HTML
document can be displayed. A frame should be used within a <frameset>. Using the <frame>
element is not encouraged because of certain disadvantages such as performance problems
and lack of accessibility for users with screen readers. Instead of the <frame> element,
<iframe> may be preferred.
CODE:
Frame.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<frameset cols="30%,40%,30%">
<frame name="ABC" src="ABC.html">
<frame name="MNO" src="MNO.html">
<frame name="XYZ" src="XYZ.html">
</frameset>
</html>
ABC.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<a href="https://www.google.com">Google</a>
</body>
</html>
MNO.html
<!DOCTYPE html>
<html lang="en">

NIHAR 2821679
<head>
</head>
<body>
<a href="https://www.instagram.com">Instagram</a>
</body>
</html>
XYZ.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<a href="https://www.facebook.com">Facebook</a>
</body>
</html>
OUTPUT:

Practical No-3

Uploaded by

Document Information

Original Description:

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

Practical No-3

Uploaded by

Copyright:

Available Formats

NIHAR 2821679

INTERNET AND WEB TECHNOLOGY LAB

INTERNET AND WEB TECHNOLOGY LAB

INTERNET AND WEB TECHNOLOGY LAB

INTERNET AND WEB TECHNOLOGY LAB

INTERNET AND WEB TECHNOLOGY LAB

 <style>: This tag is used to style the HTML elements.

INTERNET AND WEB TECHNOLOGY LAB

INTERNET AND WEB TECHNOLOGY LAB

INTERNET AND WEB TECHNOLOGY LAB

border: solid black;

INTERNET AND WEB TECHNOLOGY LAB

INTERNET AND WEB TECHNOLOGY LAB

INTERNET AND WEB TECHNOLOGY LAB

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

INTERNET AND WEB TECHNOLOGY LAB

INTERNET AND WEB TECHNOLOGY LAB

INTERNET AND WEB TECHNOLOGY LAB

You might also like