Computer Class 10 SLO Notes | Comprehensive HTML Guide

Introduction to HTML for Class 10

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page semantically and originally included cues for the appearance of the document.

For Class 10 students, understanding HTML is fundamental to grasping how websites are built and forms a core part of web development SLOs.

Basic HTML Document Structure

Every HTML document starts with a doctype declaration and consists of two main parts: the head and the body.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title Here</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

<!DOCTYPE html>: Defines this document to be an HTML5 document.
<html>: The root element of an HTML page.
<head>: Contains meta-information about the HTML page (e.g., title, character set).
<title>: Specifies a title for the HTML page (shown in the browser's title bar or tab).
<body>: Contains the visible page content.

Common HTML Tags for Content

Here are some essential tags you'll use to structure your web page content:

Headings

HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading, while <h6> defines the least important.

<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>

Paragraphs

HTML paragraphs are defined with the <p> tag.

<p>This is a paragraph of text on our web page.</p>

Links

HTML links are defined with the <a> tag. The href attribute specifies the destination address.

<a href="https://www.example.com">Visit Example Website</a>

Images

HTML images are defined with the <img> tag. It has attributes like src (source file) and alt (alternative text).

<img src="image.jpg" alt="Description of Image" width="200" height="150">

Lists

HTML supports ordered (numbered) and unordered (bulleted) lists.

Unordered List (<ul> with <li> for list items):

<ul>
    <li>Item One</li>
    <li>Item Two</li>
</ul>

Ordered List (<ol> with <li> for list items):

<ol>
    <li>First Item</li>
    <li>Second Item</li>
</ol>

Text Formatting

Basic text formatting can be done using tags like:

<b>: Bold text
<i>: Italic text
<u>: Underlined text

<p><b>This text is bold.</b></p>
<p><i>This text is italic.</i></p>
<p><u>This text is underlined.</u></p>

Simple HTML Page Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Class 10 HTML Page</title>
</head>
<body>
    <h1>Welcome to My Web Page!</h1>
    <p>This is a simple HTML page created for Class 10 Computer studies.</p>
    <p>Here are some things I've learned:</p>
    <ul>
        <li>How to use headings</li>
        <li>How to create paragraphs</li>
        <li>How to add links: <a href="https://www.w3schools.com/html/" target="_blank">Learn more HTML</a></li>
    </ul>
    <img src="https://via.placeholder.com/150" alt="Placeholder Image">
    <p><b>Keep practicing HTML to master web development basics!</b></p>
</body>
</html>

By understanding these basic HTML concepts, Class 10 students can fulfill the learning outcomes related to web page creation and content structuring.

Computer for class 10 Slo base notes

Study Materials

Computer chapter 1