Class 10 Computer Science Chapter 2 - HTML and CSS3 Notes Pdf(Part I,II,III)

Computer Guide Team
May 09, 2026


Class 10 Computer Science Chapter 2 - HTML and CSS3 Notes Pdf(Part I,II,III)

2.1 Introduction to Web Programming

Web programming is the process of creating websites and web applications. Modern websites are built using technologies like HTML, CSS, and JavaScript.

Web development is divided into two parts:

  • Front-End Development
  • Back-End Development

Front-end development mainly uses HTML, CSS, and JavaScript to design web pages.

2.2 What is HTML?

HTML is the Hyper Text Markup Language that is currently used to create web pages. It lets you create pages tat can be read on the web and inform web browser how to display web pages

Tim Berners Lee designded the original HTML document type in 1990, along with a few colleagues at CERN.
The first version of HTML was officially published in 1993.
The Fifth Version, which was the latest, Was published as a working draft in 2008 by W3C.

Meaning of HTML

  • Hyper – Linking between web pages
  • Text – Content displayed on webpage
  • Markup – Tags used to format content
  • Language – Computer-readable language

2.3 Why Learn HTML?

  • Create websites
  • Design web pages
  • Understand web technologies
  • Learn advanced languages easily
  • Improve web development skills

2.4 Features of HTML

  • Simple and easy language
  • Platform independent
  • Supports graphics and multimedia
  • Provides formatting tags
  • Supports hyperlinks
  • Case insensitive language

2.5 HTML Editors

1. WYSIWYG Editor

WYSIWYG stands for "What You See Is What You Get". It shows how the webpage will look while designing. WYSIWYG editors let you create web pages without the knowledge of HTML. They have graphical interface and tools to develop web pages, which allows you to insert images, tables, lists, hypelinks, etc., without HTML tags.

Advantages of WYSIWYG

  • Website can be created quiclkly
  • Knowledge of HTML tags or commands is not required.

Examples:

  • Adobe Dreamweaver
  • Google Web Designer
  • Amaya

2. Text Editor

Simple text editors like Notepad and WordPad can also be used to create HTML pages. However, in this case, you need to be fimilar with HTML coding.

2.6 Building Blocks of HTML

1. Tags

Tags are HTML command that indicates the layout or display of a whole or part of a web page.which

2. Attributes

Attributes is a special word or set of words contained in a tag that specifies additional information such as color, font, and alignment.

3. Elements

A web page (or an HTML page, to be pricise) is made up of elements, each of which is defined by an HTML code comprising tags, and attributes.

2.7 HTML Tags or Elements

HTML tags is bound by angular brackets. It always begins with a '<' (less than) Sign and end with a '>'(greater than) sign.
For Example The tag for making the text bold is <b >., If you want to format a word as a bold on your web page, you will

  • Insert <b > before the word. This is the opening tag or the ON tag.
  • Insert </b > after the word. This is the closing tag or the OFF tag. The OFF tag is the same as the ON tag exept that it has a forward slash / after '<'.

Types of Tags or Elements

HTML elements Can be categorized as Container Tag or Empty Tag

1. Container Tags or Elements

Tags or Elements that include both ON and OFF are called Container Element or tag.

Example: 

<html> ... </html>

2. Empty Tags or Elements

These tags do not require closing tags.

Example: 

<br>
<hr>

2.8 HTML Attributes

HTML attributes provide additional information about HTML elements.

Example: 

<p align="center">Welcome</p>

2.9 Basic Structure of HTML Document

<html>
<head>
<title>My Page</title>
</head>

<body>
Welcome to HTML
</body>

</html>

The HEAD section contains title and metadata while the BODY section contains webpage content.

2.10 BODY Tag

The BODY tag contains all visible content of a webpage.

Attributes of BODY Tag

Attribute Function
BGCOLOR Sets background color
TEXT Sets text color
BACKGROUND Sets background image

2.11 Heading Tags

Heading help in difining the herarchy and the structure of the web page content.

HTML provides six heading tags from <h1> to <h6>.

  • <h1> is largest heading
  • <h6> is smallest heading

Importance of Headings

  • Html heading provide valuble information by hightlighting important topics and the structure of the document

    2.12 Paragraph Tag

    The <p> tag is used to define paragraphs in HTML. 

    <p>This is a paragraph.</p>

    2.13 Break Tag

    The <br> tag is used to insert line breaks.

    2.14 Horizontal Rule Tag

    The <hr> tag creates a horizontal line on a webpage.

    2.15 Comment Tag

    Comments are ignored by browsers and used to explain code. 

    <!-- This is a comment -->

    2.16 HTML Formatting Tags

    Tag Function
    <b> Bold text
    <i> Italic text
    <u> Underline text
    <strong> Important bold text
    <em> Emphasized text

    2.17 Lists in HTML

    1. Ordered List

    Ordered lists display items with numbering. 

    <ol>
<li>HTML</li>
<li>CSS</li>
</ol>

    2. Unordered List

    Unordered lists display items using bullets. 

    <ul>
<li>HTML</li>
<li>CSS</li>
</ul>

    2.18 Tables in HTML

    HTML tables are used to organize data into rows and columns.

    Main Table Tags

    • <table>
    • <tr>
    • <td>
    • <th>

    2.19 Images in HTML

    The <img> tag is used to insert images into a webpage. 

    <img src="flower.jpg">

    2.20 Links in HTML

    Links are created using the <a> tag. 

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

    2.21 Frames in HTML

    Frames are used to divide the browser window into multiple sections.

    2.22 Forms in HTML

    Forms are used to collect user information.

    Common Form Controls

    • Text Box
    • Password Box
    • Radio Button
    • Checkbox
    • Submit Button

    2.23 Introduction to CSS

    CSS stands for Cascading Style Sheets. CSS is used to design and style HTML webpages.

    Advantages of CSS

    • Improves webpage appearance
    • Separates content from design
    • Easy maintenance
    • Faster webpage loading

    Important Keywords

    Keyword Meaning
    HTML Hyper Text Markup Language
    CSS Cascading Style Sheets
    Tag Formatting instruction
    Attribute Extra information for elements
    Hyperlink Clickable webpage link

    Summary

    In this chapter, we learned about HTML, CSS, tags, attributes, webpage structure, lists, tables, images, forms, and hyperlinks. HTML is used to structure web pages while CSS is used to style them.

    Frequently Asked Questions (FAQ)

    1. What is HTML?

    HTML stands for Hyper Text Markup Language used to create webpages.

    2. What is CSS?

    CSS is used to style and design webpages.

    3. Which tag is used for images?

    The <img> tag is used to insert images.

    4. Which tag creates hyperlinks?

    The <a> tag creates hyperlinks.

    5. What is the use of forms?

    Forms are used to collect user information.

    📘 Chapter 2 PDF Notes Part-I, Part-II, Part- III

    Read the complete Chapter 2 HTML and CSS Notes directly on the website.

    End of Chapter 2 – HTML and CSS