Scribd
Upload
16 views

htmlcode

Cyber ethics

Uploaded by

ttopup23
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views

htmlcode

Cyber ethics

Uploaded by

ttopup23
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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:dubai@gmail.com">dubai@gmail.com</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 abc@xyz.com

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:abc@xyz.com"


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