Scribd
Upload
6 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
6 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

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="[Link]" alt="waterpollution" width="200px" height="100px">
<center> <img src="[Link]" alt="waterpollution" width="200px" height="100px">
</center>
<img src="[Link]" 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="[Link]" 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="[Link]" title="water pollution" target="blank"> Water Pollution</a>
<br><a href="[Link]" title="air pollution" target="blank">Air Pollution</a><br>
<a href="[Link]" title="soil pollution" target="blank">Soil Pollution </a><br>
<a href="[Link] 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="[Link] title="noise pollution" target="blank">
<img src="[Link]" alt="noisepollution" >
</a>
<p>
<a href="[Link] 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=”[Link]”> <img src=”[Link]”></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="[Link]" alt="sunflower" <img src="[Link]" 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="[Link]" <img src="[Link]"
style="width:400px;height:400px"> style="float:right; width:400px;height:400px">
<a href="[Link]">Click here to open more <a href="[Link]">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 -
[Link]
When you click on “about Sunil”, it should open the following webpage -
[Link]
When you click on “about P V Sindhu”, it should open the following webpage –
[Link]
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 = "[Link]" title="Sachin Tendulkar">
<img src="[Link]" 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 = "[Link]">


<img src="[Link]" 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 = "[Link]" title="P V Sindhu">
<img src="[Link]" 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 = "[Link] title="Opens Wikipedia">
Click here to know more about Sachin</a>
</li>
<br>
<li>
<a href = "[Link] title="Opens Wikipedia">Click here to know
more about Sunil Chhetri</a>
</li>
<br>
<li>
<a href = "[Link] title="Opens Wikipedia"> Click here to know
more about P V Sindhu</a>
</li>
<br>
<li>
<a href = "[Link]"> Go Back </a>
</li>
</ol>
<br>
</body>
</html>

Common questions

Powered by AI

HTML semantics and nesting structures in "Noise Pollution" and "Types of Pollution" impact logical flow by establishing meaningful content hierarchies and relationships. Semantic tags like paragraphs (p), headers (h1), links (a), and ordered lists (ol) each carry intended meanings, improving code readability for both developers and assistive technologies. For instance, the semantic structure in "Noise Pollution" uses headers to signify key topics, with corresponding paragraphs providing detailed context. Nesting within divs or sections further clarifies logical divisions of content, aiding comprehension. This use of semantics and structure directly facilitates a coherent narrative and intuitive navigation, enhancing the overall user experience and accessibility .

The "Air Pollution" webpage effectively discusses environmental issues through a cohesive use of textual and graphic elements. Text elements structured into paragraphs and lists succinctly outline causes and impacts, supplemented by a right-floated image which visually represents the topic without overwhelming the text. The image's strategic placement, consistent with text flow and surrounded by ample white space, maintains emphasis on content. Headers use underlined text to draw attention to the central theme, making it memorable. Combined, these elements communicate the urgency and relevance of air pollution, inviting further inquiry while visually engaging the reader in the necessity of environmental awareness .

In "About Sports Personalities," CSS profoundly influences user interaction and accessibility by implementing styling methods such as internal CSS that dictates aesthetic qualities like color schemes, font styling, and positioning. The use of vibrant background colors paired with contrasting text colors aids in attracting user attention while maintaining readability. Text-decoration and transformation properties used in headings emphasize importance and guide focus. Images auto-sized and centrally aligned using CSS ensure balance and appeal while facilitating navigation. Links on images, enhanced with titles, provide interactive elements that reveal further information on hover. These styling methods collectively enhance information accessibility and incentivize user interaction through visual engagement and intuitive design .

CSS rules in the sports personalities webpage enhance visual differentiation by applying distinct styling properties to various elements, which aids user comprehension significantly. For instance, CSS differentiates between headings, images, and text content by using varying colors, font styles, and sizes. Blue, capitalized headings contrast against the yellow background, grabbing attention and enhancing structural hierarchy. Images aligned differently (left, center, right) alongside descriptive text create a clear association with their respective sections, helping users segregate and absorb information quickly. These visual cues facilitate easy scanning and reinforce learning by distinguishing key areas and interactive components within the page, promoting organized comprehension .

In the "Types of Pollution" webpage, hyperlink attributes significantly enhance user navigation by providing easy access to external and internal sources of information. The 'a' tag includes attributes such as 'href' for URLs and 'title' which offers additional descriptions about the content of the link, enhancing the user experience by providing context before a user clicks. The 'target="_blank"' attribute is used to open resources in a new tab, maintaining the user's current location on the website while allowing them to browse multiple sources simultaneously. These features collectively improve the functionality and user-friendliness of the site, making it more informative and easier for users to navigate .

In both the "Water Pollution" and "Air Pollution" web pages, image attributes play crucial roles in affecting presentation and user interaction. In "Water Pollution," the alignment ('align="right"') and dimensions (width and height) are used to position the images in various sections of the page, impacting flow and layout by wrapping text around images or centralizing them. These attributes allow users to engage with text and visuals without clutter. In "Air Pollution," attributes like 'float' are used for the same purpose, improving aesthetics and readability by placing the image to the right of the text with a consistent size, ensuring the image does not overpower the textual information. Collectively, these attributes enhance usability and visual appeal, facilitating engaging user experiences .

The "Pollution" and "Noise Pollution" web pages employ an educational structure that effectively segments content into digestible parts using clear headings and related visual aids. For "Pollution," succinct links organized into categories provide an overview of different pollution types, as seen through hyperlinked list items leading to details on each type. This approach encourages exploration and deeper learning. "Noise Pollution" builds on this with a contextual paragraph introducing the topic, followed by a large, centrally aligned image clickable for further knowledge. By maintaining thematic consistency through color and typography, the page promotes cognitive retention of content. This structure supports varied learning preferences by combining text with interactive elements, optimizing educational efficacy .

In the "Pollution" webpage, the strategic use of header elements (h1, h2) and divs enhances readability by creating a clear visual hierarchy and separating content. Headers define sections, making scanning for information easier, with each h1 and h2 clearly indicating the main topic and subtopics, respectively. Colors and styles further differentiate these sections. Div elements encapsulate related content, acting as containers that group elements for stylization and layout control, ensuring consistent application of styles and formatting within particular segments of the document. This structuring effectively guides user focus through the flow of information, facilitating a smooth reading experience .

The HTML elements and CSS styles in the "Be a good digital citizen" webpage are carefully chosen to emphasize different categories of digital citizenship. The use of different HTML tag attributes, such as headings (h1, h2) and lists (ul, li), structure the information clearly and logically. CSS styles then enhance this structure by assigning specific fonts, colors, and text transformations to each element. The h1 tag, for example, uses colors and fonts that command attention, while the use of uppercasing and underlining emphasizes the importance of the message. CSS styles like list-style-type differentiate the categories ('Legal', 'Appropriate', etc.) visually. Altogether, these elements communicate the website's purpose of educating users about the importance of digital citizenship through a clear and engaging layout .

The webpage titled "Sports in India" employs several design strategies to engage users both visually and informatively. Internally styled CSS properties set a consistent design theme with a yellow background and Verdana font, ensuring readability and an inviting appearance. Headings are decorated with text transformations and underlining to draw attention and establish a hierarchy of information. Images are strategically aligned (e.g., sachin.jpg floats left and sunil.jpg floats right), providing a balanced visual layout. Titles and hyperlinks enrich interactivity, offering users the opportunity to explore additional content relevant to each personality. These elements create an organized, user-friendly interface that appeals visually while conveying information effectively .

You might also like