Scribd
Upload
3 views10 pages

Gr6 HTML PracticePrograms

The document contains a set of HTML5 coding exercises for Grade 6 students, focusing on creating webpages with various styles and content related to digital citizenship and pollution. It includes specific tasks such as writing HTML code for different topics, debugging existing code, and creating two interconnected webpages about sports personalities. Each task emphasizes the use of HTML tags, CSS styling, and proper formatting to achieve the desired webpage layouts.

Uploaded by

Barbie Gal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views10 pages

Gr6 HTML PracticePrograms

The document contains a set of HTML5 coding exercises for Grade 6 students, focusing on creating webpages with various styles and content related to digital citizenship and pollution. It includes specific tasks such as writing HTML code for different topics, debugging existing code, and creating two interconnected webpages about sports personalities. Each task emphasizes the use of HTML tags, CSS styling, and proper formatting to achieve the desired webpage layouts.

Uploaded by

Barbie Gal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Gr-6 - Computer Science Worksheet-Term II - Answerkey / 2023-24

Topic: - HTML 5

Q1: Write HTML5 Code to create the following webpages:

<!Doctype Html>
<html>
<head>
<title> SA1 Internals</title>
<style>
body{background-color:palegreen}
h1{color:orangered;text-align:center;font-family:Brush Script MT;text-transform:uppercase;text-
Decoration:underline;}
h2{color: indianred;font-family:Papyrus;text-Decoration:underline;}
p{font:25px georgian;color:red}
hr{width:70%; border:3px solid green;}
#tst1{color:blue; font:bold 20px georgian;list-style-type:circle}
#tst2{color:violet;font:20px cursive;list-style-type:square}
div{color:red;background-color:yellow}
span{color:darkgreen;font-style:italic}

</style>
</head>
<body >
<h1>Be a good digital citizen</h1>
<h2 >Legal</h2>
<ul id="tst1">
<li> Copyright</li>
<li>Login and Passwords</li>
</ul>
<h2>Appropriate</h2>
<ul id="tst2">
<li> Words and Images</li>
<li> Search engines, consider reading level</li>
<li>Tell trusted adult if receiving inappropriate messages</li>
</ul>
<h2 >Responsible</h2>
<ul id="tst1" >
<li> Prevent damage and misuse</li>
</ul>
<h2 >Kind</h2>
<ul id="tst2" >
<li> Feelings</li>
<li>Peoples rights</li>
<li> Tone of messages</li>
<li>Digital Etiquette</li>

</ul>
<hr>
<div>
<p > Name:<span>write your name</span><br>Date:3<sup>rd</sup>September</p>
</div>
</body>
</html>

Q2:

<!DOCTYPE html>
<html>
<head>
<title>Pollution</title>
</head>
<body >
<h1 > Water Pollution</h1>
<img src="water.jpeg" alt="waterpollution" width="200px" height="100px">
<center> <img src="water.jpeg" alt="waterpollution" width="200px" height="100px">
</center>
<img src="water.jpeg" alt="waterpollution" width="200px" height="100px"align="right">

</body>
</html>

Q3:

<!DOCTYPE html>
<html>
<head>
<title>Pollution</title>
<style>
body{background-color:lightgrey}
h1{color:blue;text-transform:uppercase;text-decoration:underline;text-align:center}
p,ul{font-size:30px;font-family:verdana}
img{width:300px; height:300px;float:right }
</style>
</head>
<body >
<h1 > Air Pollution</h1>
<img src="airpollution.jpeg" alt="waterpollution" >
<p> Air pollution refers to the release of harmful contaminants (chemicals, toxic gases,
particulates, biological molecules, etc.) into the earth’s atmosphere. Some causes that contribute to air
pollution are:
</p>
<ul>
<li> Burning fossil fuels</li>
<li>Mining operations</li>
<li>Exhaust gases from industries and factories</li>
</ul>

</body>
</html>

Q4:

<!DOCTYPE html>
<html>
<head>
<title>Pollution</title>
<style>
body{background-color:lightyellow}
h1{color:Green;text-align:center; text-decoration:underline;text-transform:uppercase; font-
family:Arial}
hr{border: 3px solid blue;width:50%}
p{color:Red;font-family:comicsansMs;font-size:30px;list-style-type:circle}
</style>
</head>
<body >
<h1 >Types of pollution</h1>

<p>
<a href="waterpollution.html" title="water pollution" target="blank"> Water Pollution</a>
<br><a href="airpollution.html" title="air pollution" target="blank">Air Pollution</a><br>
<a href="soilpollution.jpeg" title="soil pollution" target="blank">Soil Pollution </a><br>
<a href="https://www.nationalgeographic.org/encyclopedia/noise-pollution/" title="Noise
pollution" target="blank">Noise Pollution </a>
</p>

<hr>
</body>
</html>
Q5:
<!DOCTYPE html>
<html>
<head>
<title>Pollution</title>
<style>
body{background-color:lightblue}
h1{color:blue;text-transform:uppercase;text-decoration:underline;text-align:center}
p{font-size:30px;font-family:verdana;color:purple}
img{width:300px; height:300px;display:block;margin:auto }
</style>
</head>
<body >
<h1 > Noise Pollution</h1>

<p> Noise pollution refers to the excessive amount of noise in the surrounding that disrupts the
natural balance. Usually, it is man-made, though certain natural calamities like volcanoes can contribute
to noise pollution.
</p>
<a href="https://byjus.com/biology/types-of-pollution/" title="noise pollution" target="blank">
<img src="noise.jpeg" alt="noisepollution" >
</a>
<p>
<a href="mailto:[email protected]">Contact the content creator</a>
</p>
</body>
</html>
PRACTICE PROGRAMS

Q1. Using an HTML program write the code with appropriate tags and attributes to display the output
as shown below for the following questions.

<h1> Click on the below image to open more about camel</h1>


<a href=”camel.html”> <img src=”camel.jpeg”></a>

Q2. Debug the errors in the following code and rewrite the correct code referring to the below output
screen.

<!Doctype html> <!Doctype html>


<html> <html>
<head> <head>
<title> Images</title> <title> Images</title>
</head> </head>
<body > <body >
<img src="sun.jpg" alt="sunflower" <img src="sun.jpg" alt="sunflower"
width="50px" height="5%" style="display:block; width="50px" height="5%" style="display:block;
margin-left:auto;margin-right:auto;border:5px margin-left:auto;margin-right:auto;border:5px
solid"> red solid">
<img src="flower.docx" <img src="flower.jpg"
style="width:400px;height:400px"> style="float:right; width:400px;height:400px">
<a href="s.html">Click here to open more <a href="s.html">Click here to open more
details</a> details</a>
</body> </body>
</html> </html>

Q1. Create two webpages exactly as shown and follow the below instructions:-
Create a folder with the name Yourname_ClassSection_Revision in Documents
Save this html file inside the above folder with the name Page1_ClassSec
Page 1:

Use Internal styling method of CSS to display the above webpage. You may use inline styling where
necessary.
Title of the webpage is ‘About Sports Personalities’
Color of the webpage is yellow and the entire text on the webpage is in font Verdana

Use text properties where required


Insert the image of these personalities and align it as shown above
Create link on all the images, on keeping the cursor the text -name of the personalities, should appear as
shown above and on clicking all the images, Page2 should open

The text “Indian Sports” is in mediumvioletred color


The horizontal line is in green color, 80% length, dashed line with thickness 4 pixels
Page 2:

Save this html file inside the above folder with the name Page2_ClassSec
Title of the webpage is ‘Links - Sports Personalities’ and webpage color is yellow
The text “below links” is in red color and underlined
When you click on “about Sachin”, it should open the following webpage -
https://en.wikipedia.org/wiki/Sachin_Tendulkar
When you click on “about Sunil”, it should open the following webpage -
https://en.wikipedia.org/wiki/Sunil_Chhetri
When you click on “about P V Sindhu”, it should open the following webpage –
https://en.wikipedia.org/wiki/P._V._Sindhu
When you click on “Go Back”, it should open Page1
All the links should have the title as “Opens Wikipedia” as shown above
Set bullet style as shown above .

CODE OF PAGE 1
<!DOCTYPE html>
<html>
<head>
<title>
About Sports Personalities
</title>
<style>
body {background-color:yellow;font-family:verdana;}
h1{color:blue;text-align:center;text-decoration:underline;text-transform:uppercase; }
h2{text-transform:capitalize;text-align:center;}
h3{color:purple;}
p{color:red}
span{color:mediumvioletred ;}
img{width:100px;height:100px}
hr{border:4px dashed darkgreen;width:80%;}
</style>
</head>
<body>
<h1>Sports in India </h1>

<h2>famous <span>indian sports </span> personalities</h2>

<hr>
<a href = "revision2.html" title="Sachin Tendulkar">
<img src="sachin.jpg" style="float:left;">
</a>
<h3> Sachin Tendulkar </h3>
<p> He is famous as "Master Blaster" and "The God of Cricket".
Sachin is also the highest run-scorer across all the formats in Cricket.
</p>
<br>

<a href = "revision2.html">


<img src="sunil.jpg" style="float:right;" title="Sunil Chhetri">
</a>
<h3> Sunil Chhetri </h3>
<p>He is the captain of both Bengaluru FC and the Indian National Football team.
Popularly known as Captain Fantastic, Chhetri has managed to score the 2nd highest
number of goals in international matches.
</p>

<h3> P V Sindhu </h3>

<p>P V Sindhu is one of India's most successful badminton player. Sindhu has won medals at various
tournaments including the Olympics</td>
<br>
</p>
<a href = "revision2.html" title="P V Sindhu">
<img src="sindhu.jpg" style="display:block;margin:auto;">
</a>
<hr>
</body>
</html>

CODE OF PAGE 2
<!DOCTYPE html>
<html>
<head>
<title>
Links - Sports Personalities
</title>
<style>
body {background-color:yellow;font-family:verdana;font-size:30px;}
span {color:red;text-decoration:underline;}
li{list-style-type:lower-roman;}
</style>
</head>
<body>
<p>Use the <span>below links </span>to know more about these personalities </p>
<br>
<ol>
<li><a href = "https://en.wikipedia.org/wiki/Sachin_Tendulkar" title="Opens Wikipedia">
Click here to know more about Sachin</a>
</li>
<br>
<li>
<a href = "https://en.wikipedia.org/wiki/Sunil_Chhetri" title="Opens Wikipedia">Click here to know
more about Sunil Chhetri</a>
</li>
<br>
<li>
<a href = "https://en.wikipedia.org/wiki/P._V._Sindhu" title="Opens Wikipedia"> Click here to know
more about P V Sindhu</a>
</li>
<br>
<li>
<a href = "revision1.html"> Go Back </a>
</li>
</ol>
<br>
</body>
</html>

You might also like