Scribd
Upload
205 views11 pages

Class 10 HTML & CSS Practical Guide

The document is a practical manual for Class 10 Computer Science (CBSE 2025–26) focusing on HTML and CSS. It includes ten exercises that guide students through creating basic webpages, using heading tags, lists, images, links, tables, and applying inline, internal, and external CSS. Each exercise contains the aim, code, and expected output for the students to follow and learn web development skills.

Uploaded by

arjungasmachine
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
205 views11 pages

Class 10 HTML & CSS Practical Guide

The document is a practical manual for Class 10 Computer Science (CBSE 2025–26) focusing on HTML and CSS. It includes ten exercises that guide students through creating basic webpages, using heading tags, lists, images, links, tables, and applying inline, internal, and external CSS. Each exercise contains the aim, code, and expected output for the students to follow and learn web development skills.

Uploaded by

arjungasmachine
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

Class 10 Computer Science (CBSE 2025–26)

Practical Manual: HTML and CSS

Prepared by: Student of Class X


1. Create a basic HTML webpage
Aim: Create a simple webpage showing your name, class, and school name.
Code:
<!DOCTYPE html>
<html>
<head><title>My First Webpage</title></head>
<body>
<h1>My Name is Kirti Sihamar</h1>
<p>Class 10, ABC Public School</p>
</body>
</html>

Output: Displays your name, class, and school name.


2. Use of Heading Tags
Aim: Create a webpage using all six heading tags (h1 to h6).
Code:
<!DOCTYPE html>
<html>
<head><title>Headings Example</title></head>
<body>
<h1>Main Heading</h1>
<h2>Sub Heading 1</h2>
<h3>Sub Heading 2</h3>
<h4>Sub Heading 3</h4>
<h5>Sub Heading 4</h5>
<h6>Sub Heading 5</h6>
</body>
</html>

Output: Displays text in decreasing font sizes using heading tags.


3. Create an Ordered and Unordered List
Aim: Design a webpage showing your favorite subjects in ordered and unordered lists.
Code:
<!DOCTYPE html>
<html>
<head><title>Lists Example</title></head>
<body>
<h2>My Favorite Subjects</h2>
<ol>
<li>Mathematics</li>
<li>Science</li>
<li>Computer</li>
</ol>
<ul>
<li>English</li>
<li>Social Studies</li>
</ul>
</body>
</html>

Output: Shows ordered and unordered lists of subjects.


4. Insert an Image and a Link
Aim: Display an image and a hyperlink to a website.
Code:
<!DOCTYPE html>
<html>
<head><title>Image and Link</title></head>
<body>
<h2>My Favorite Website</h2>
<img src='[Link]' width='200'>
<p>Visit <a href='[Link] target='_blank'>CBSE Official Website</a></p>
</body>
</html>

Output: Shows an image and a working hyperlink.


5. Create a Table
Aim: Design a webpage to show student marks using a table.
Code:
<!DOCTYPE html>
<html>
<head><title>Student Marks</title></head>
<body>
<h2>Student Marks Table</h2>
<table border='1'>
<tr><th>Subject</th><th>Marks</th></tr>
<tr><td>Math</td><td>90</td></tr>
<tr><td>Science</td><td>88</td></tr>
<tr><td>English</td><td>85</td></tr>
</table>
</body>
</html>

Output: Displays a table with student marks.


6. Inline CSS Example
Aim: Use inline CSS to change text color and background color.
Code:
<!DOCTYPE html>
<html>
<head><title>Inline CSS</title></head>
<body style='background-color:lightyellow;'>
<h2 style='color:blue;'>Welcome to My Page</h2>
<p style='color:green;'>This paragraph is styled using inline CSS.</p>
</body>
</html>

Output: Applies inline CSS to style elements.


7. Internal CSS Example
Aim: Apply internal CSS to change the font and background color.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
body {background-color: lavender;}
h2 {color: navy; font-family: Arial;}
p {color: maroon;}
</style>
</head>
<body>
<h2>Internal CSS Example</h2>
<p>This page uses internal CSS.</p>
</body>
</html>

Output: Applies internal CSS styles to webpage elements.


8. External CSS Example
Aim: Link an external CSS file to style a webpage.
Code:
<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<link rel='stylesheet' type='text/css' href='[Link]'>
</head>
<body>
<h2>External CSS Example</h2>
<p>This paragraph is styled using external CSS.</p>
</body>
</html>

Output: Connects webpage with external CSS file.


9. CSS Border and Padding
Aim: Use CSS to create a bordered box with padding.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Box Model Example</title>
<style>
div {
border: 2px solid blue;
padding: 20px;
width: 200px;
}
</style>
</head>
<body>
<h2>CSS Box Model</h2>
<div>This box has border and padding.</div>
</body>
</html>

Output: Shows a blue-bordered box with padding.


10. Create a Simple Web Layout
Aim: Design a webpage using header, nav, section, and footer.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Simple Layout</title>
<style>
header, footer {background-color: lightblue; text-align: center; padding: 10px;}
nav {background-color: lightgray; padding: 10px;}
section {margin: 10px;}
</style>
</head>
<body>
<header><h1>My Website</h1></header>
<nav>Home | About | Contact</nav>
<section>
<h2>Welcome</h2>
<p>This is a simple webpage layout using HTML and CSS.</p>
</section>
<footer>© 2025 My Website</footer>
</body>
</html>

Output: Displays a complete simple webpage layout.

Common questions

Powered by AI

HTML structures the content of a webpage, offering semantic elements for clarity and organization, while CSS enhances the style and presentation aspects like colors, fonts, and layouts. Together, they allow for separation of content from design, creating a cohesive visual and functional experience. This synergy facilitates responsive design, accessibility, and user-friendly navigation across different devices and platforms .

Semantic HTML elements, like <header> and <footer>, improve web design by providing clear structure and meaning to parts of a webpage. This semantic approach helps search engines and accessibility tools better understand content context, facilitating SEO and accessibility. By using these elements, developers create more maintainable and easier-to-read code .

The CSS box model is fundamental in webpage layout design as it defines the space around elements. It consists of margins, borders, padding, and the content area. By manipulating these properties, designers can control the element's appearance and spacing, enhancing readability and aesthetic appeal. The box model is crucial in achieving layouts that fit various devices and screen sizes without compromising design elements .

Designing a webpage using layout elements like <header>, <nav>, <section>, and <footer> organizes the content into meaningful parts, enhancing usability and intuitive navigation. This structure allows users to understand and interact with content more efficiently, improving the experience by ensuring consistency and predictability in design. It also aids accessibility by conforms to predictable patterns recognized by assistive technologies .

When using inline CSS, considerations include maintainability and performance. Inline styles increase HTML file size and reduce reusability as styles are only applied to one specific element, complicating updates. This approach also overrides external and internal styles, which may cause conflicts. Inline CSS should be used sparingly for single-use or specific cases where flexibility isn't required .

The <nav> element defines a block of navigation links, crucial for accessibility and user experience. It helps users and assistive technologies quickly locate navigation areas of a page, enhancing the ease of use and accessibility. Clearly defined navigation enables efficient site exploration, improving the overall user journey on a website .

HTML heading tags (h1 to h6) improve a webpage's accessibility by providing structure and hierarchy that assistive technologies use to navigate the content. For SEO, search engines use these tags to understand the structure and importance of different sections, influencing search rankings. Proper use of heading tags enhances both user experience and search engine visibility .

Ordered lists in HTML are enclosed within the <ol> tag and typically present list items with a sequence number or letter, indicating a specific order. Unordered lists are enclosed within the <ul> tag and often display list items with a bullet point, indicating no particular order .

Inline CSS can increase page size due to repeated style declarations in HTML, potentially slowing load times. Internal CSS, within a single document, can reduce ease of maintenance compared to external stylesheets because global changes require updating multiple pages. Both methods can hinder efficiency, but internal CSS might be preferable over inline for small, one-page applications due to scoped impact .

External CSS separates style from content, improving manageability and reusability. It allows for global style changes across multiple pages by editing a single file, which is more efficient than inline (applied directly in the HTML element) or internal CSS (contained within the <style> tag in the head of a single HTML document). This separation also enhances page loading speed and facilitates the organization of styles .

You might also like