HTML
(HYPERTEXT MARKUP LANGUAGE)
Hypertext Markup Language is the standard markup language for
documents designed to be displayed in a web browser. It defines the
content and structure of web content. It is often assisted by technologies
such as Cascading Style Sheets and scripting languages such as
JavaScript, a programming language.
1. Write the “COMPUTER APPLICATION” text using font tag whose color,
style and size is red, Algerian and 5 respectively in the web page
and title is “WELCOME”.
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>WELCOME</title>
</head>
<body>
<font color="red" face="Algerian" size="5">COMPUTER
APPLICATION</font>
</body>
</html>
2. Define the plug-in and add-on.
Plug-in:
A plug-in is a software module designed to integrate with and add specific
features to a primary application, such as a browser, media player, or
design software.
It usually interacts closely with the host application to provide advanced
or specialized capabilities.
Examples:
Adobe Photoshop Plug-ins for additional filters.
VST Plug-ins for audio editing software.
Flash Player for web browsers (historically).
Add-on:
An add-on is a broader term for any additional component or accessory
software that extends the functionality of a program.
It is commonly used in the context of web browsers and games.
Examples:
Browser Add-ons like ad blockers or themes for Chrome/Firefox.
Game Add-ons like downloadable content (DLC) or mods for
enhanced gameplay.
Key Difference:
Plug-ins often have a more technical integration with the host
software and are task-specific.
Add-ons generally cover a wider scope of extensions, ranging from
aesthetic changes to functional upgrades, and are often easier to
install and use.
3. Write the HTML code to for the following:
o a2– b2= (a+b)(a-b)
o O2 + 2H2 = 2H2O
Code(1):-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formula Display</title>
</head>
<body>
<p>
a<sup>2</sup> - b<sup>2</sup> = (a + b)(a - b)
</p>
</body>
</html>
Code(2):-
<!DOCTYPE html>
<head>
<title>Chemical Equation Display</title>
</head>
<body>
<p>
O<sub>2</sub> + 2H<sub>2</sub> = 2H<sub>2</sub>O
</p>
</body>
</html>
4. Define the embed, audio and video tag with their attributes (at least
4 major attributes
1. <embed> Tag
The <embed> tag is used to embed external content, such as a
media file or plugin, into a webpage. Commonly used for embedding
PDFs, Flash files, or videos when other methods are not used.
Major Attributes:
o src: Specifies the URL of the embedded content (e.g.,
file path to a PDF or Flash file).
o type: Specifies the MIME type of the content (e.g.,
application/pdf or audio/mpeg).
o width: Defines the width of the embedded content in
pixels.
o height: Defines the height of the embedded content in
pixels.
Example:
<embed src="file.pdf" type="application/pdf" width="600"
height="400">
2. <audio> Tag
The <audio> tag is used to embed audio files in a webpage. It
supports multiple formats, including MP3, WAV, and OGG.
Major Attributes:
o src: Specifies the URL of the audio file.
o controls: Adds playback controls like play, pause, and
volume.
o autoplay: Starts playing the audio automatically when the
page loads.
o loop: Makes the audio file play repeatedly.
Example:
<audio src="song.mp3" controls autoplay loop></audio>
3. <video> Tag
The <video> tag is used to embed video files into a webpage. It
supports formats such as MP4, WebM, and OGG.
Major Attributes:
o src: Specifies the URL of the video file.
o controls: Adds playback controls (play, pause, volume, etc.).
o autoplay: Starts playing the video automatically when the
page loads.
o poster: Specifies an image to be displayed while the video is
loading or until the user starts playing it.
Example:
<video src="movie.mp4" controls autoplay poster="poster.jpg"
width="600" height="400"></video>
5. Write the HTML code to generate the following output:
Code:-
<!DOCTYPE html>
<html>
<head>
<title>My Favorite Things</title>
</head>
<body>
<h1>My Favorite Things</h1>
<ol>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</li>
<li>Flowers
<ul style="list-style-type: square;">
<li>Lily</li>
<li>Lotus</li>
<li>Jasmin</li>
</ul>
</li>
<li>Vegetables
<ul style="list-style-type: circle;">
<li>Pea</li>
<li>Tomato</li>
<li>Onion</li>
</ul>
</li>
</ol>
</body>
</html>
6. Write the HTML code to generate the following output:
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Pursuits that keep me Alive</title>
</head>
<body>
<h1>Pursuits that keep me Alive</h1>
<h2>Favorite Passtime</h2>
<ul>
<li>Listening to Music</li>
<li>Indulging in Theatre</li>
</ul>
<h2>Favourite Music Tracks</h2>
<p>
Though I enjoy all types of music, but still Ghazals, Sufi music, and
light music consume most of my time.
</p>
<h2>Theatre Involvement</h2>
<p>
I am more of a theatre enthusiast as I love watching plays.
Sometimes, I have volunteered for some production works also.
</p>
<p><i>personal diary entry</i></p>
</body>
</html>
7. Write the html code to design the below form:
Code:-
<!DOCTYPE html>
<html>
<head>
<title>My Registration Page</title>
</head>
<body>
<h2>My Registration Page</h2>
<form>
<label>First name:</label>
<input type="text" name="firstname"><br><br>
<label>Last name:</label>
<input type="text" name="lastname"><br><br>
<label>Password:</label>
<input type="password" name="password"><br><br>
<label>Re-Type Password:</label>
<input type="password" name="repassword"><br><br>
<label>SEX:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br><br>
<h3>Additional Information</h3>
<input type="checkbox" name="mailinglist"> Put me on mail list.<br><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
</body>
</html>
8. Write the HTML code to generate the following output:
Title of the page should be "Dubai Tourism".
The heading text "Welcome to Dubai" is in Arial font and is of maroon color.
The horizontal lines below the heading are 5 pixels thick and of red color.
Image used in the page is burj.jpg.
The bulleted list contains links as specified below:
The text Morning is a link to the webpage "morning.html"
The text Evening is a link to the webpage "evening.html"
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dubai Tourism</title>
</head>
<body>
<h1 style="font-family: Arial; color: maroon; text-align: center;">WELCOME TO
DUBAI</h1>
<hr style="height: 5px; background-color: red; border: none; width: 50%; margin:
auto;">
<hr style="height: 5px; background-color: red; border: none; width: 50%; margin:
auto;">
<p><b>Enjoy the world of pure travel masti</b></p>
<p>The following is a list of major tourist attractions in Dubai:</p>
<img src="burj.jpg" alt="Burj Al Arab" align="right" width="200">
<ul>
<li><a href="morning.html">Morning</a> - Dolphinarium and Palm Dubai</li>
<li><a href="evening.html">Evening</a> - Ski Dubai and Cruise</li>
</ul>
<p>For enquiries, write at <a
href="mailto:
[email protected]">
[email protected]</a></p>
</body>
</html>
9. Note the following points while generating the web page:
o Background color of page is yellow
o Link color is black and visited link color is green
o Font style for the page is arial
o Heading of the page is maroon
o Image used is elephant.png
o Table border is 2 px
o Use links as:
o For Sri Lankan Elephant as one.html
o For Sumatran Elephant as two.html
o For Borneo Elephant as three.html
o For African Elephant as four.html
o email id for bottom message is
[email protected]Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Indian Elephant</title>
</head>
<body bgcolor="yellow" style="font-family: Arial;">
<h1 align="center" style="color: maroon;">INDIAN ELEPHANT</h1>
<p>
The Indian elephant (<i>Elephas maximus indicus</i>) is one of three recognized
subspecies of the Asian elephant and native to mainland Asia.
Since 1986, <i>Elephas maximus</i> has been listed as Endangered by IUCN as
the population has declined by at least 50% over the last three generations,
estimated to be 60 - 75 years. Asian elephants are threatened by habitat loss,
degradation, and fragmentation.
</p>
<p><b>See Also:</b></p>
<ul>
<li><a href="one.html" style="color: black; text-decoration: none;">Sri Lankan
Elephant</a></li>
<li><a href="two.html" style="color: black; text-decoration: none;">Sumatran
Elephant</a></li>
<li><a href="three.html" style="color: black; text-decoration: none;">Borneo
Elephant</a></li>
<li><a href="four.html" style="color: black; text-decoration: none;">African
Elephant</a></li>
</ul>
<img src="elephant.png" alt="Indian Elephant" align="right" width="300">
<p><b>Threats To Elephants</b></p>
<table border="2" cellpadding="5" cellspacing="0">
<tr>
<td>1</td>
<td>Illegal Hunting</td>
</tr>
<tr>
<td>2</td>
<td>Industrialization</td>
</tr>
<tr>
<td>3</td>
<td>Habitat Loss</td>
</tr>
<tr>
<td>4</td>
<td>Fragmentation</td>
</tr>
<tr>
<td>5</td>
<td>Disease</td>
</tr>
</table>
<p>For further enquiries and reservations <a href="mailto:[email protected]"
style="color: black; text-decoration: none;">Contact Us</a></p>
</body>
</html>
10. Write HTML code to generate the following table:
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Table</title>
</head>
<body>
<table border="1" cellpadding=”9”>
<tr>
<td rowspan="5">Alpha</td>
<td colspan="5" align="center">Beta</td>
</tr>
<tr>
<td rowspan="2">Gamma</td>
<td colspan="2">Tilde</td>
<td colspan="2">Lambda</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td rowspan="2">Zeta</td>
<td colspan="2">Delta</td>
<td colspan="2">Theta</td>
</tr>
<tr>
<td colspan="2">Omega</td>
<td colspan="2">Kappa</td>
</tr>
</table>
</body>
</html>
