Scribd
Upload
16 views

htmlcode

Cyber ethics

Uploaded by

ttopup23
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views

htmlcode

Cyber ethics

Uploaded by

ttopup23
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

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>

You might also like