Unit-2 HTML Notes for Class 10 Computer Applications

Published on August 1, 2025 by @mritxperts
Unit 2: HTML – Class 10 Notes

1. Introduction to Web Page Designing Using HTML

HTML stands for HyperText Markup Language. It is used to design web pages and web applications.

  • HTML files are saved with the extension .html or .htm
  • HTML files can be opened using any modern web browser like Chrome, Firefox, Edge, etc.

Steps to create and view a web page:

  1. Open Notepad or any text editor
  2. Type HTML code
  3. Save the file as filename.html
  4. Open it in a web browser by double-clicking the file

Example:

<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    Welcome to HTML learning.
  </body>
</html>

2. HTML Tags

HTML uses tags to mark up elements in a document. Tags usually come in pairs like <tag> and </tag>

Basic Structure Tags:

  • <html> : Root element
  • <head> : Contains metadata
  • <title> : Title shown in browser tab
  • <body> : Contains visible content

Example:

<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    Hello World
  </body>
</html>

Body Tag Attributes:

  • bgcolor : Sets background color
  • text : Sets text color
  • link : Color of unvisited links
  • vlink : Color of visited links
  • alink : Color of active links

Example:

<body bgcolor="yellow" text="black" link="blue" vlink="green" alink="red">

Formatting Tags:

  • <br> : Line break (no closing tag)
  • <hr> : Horizontal rule (line)
  • <!-- comment --> : Adds comment
  • <h1> to <h6> : Heading tags (h1 is largest)
  • <p> : Paragraph
  • <b> : Bold text
  • <i> : Italic text
  • <u> : Underlined text

Example:

<h1>This is Heading 1</h1>
<p>This is a paragraph.</p>
<b>Bold Text</b> <i>Italic Text</i> <u>Underlined Text</u>

3. Lists in HTML

Unordered List:

Uses bullet points

Example:

<ul type="circle">
  <li>Math</li>
  <li>Science</li>
</ul>

Ordered List:

Uses numbers or letters

Example:

<ol type="A" start="3">
  <li>First</li>
  <li>Second</li>
</ol>

Attributes of Ordered List:

  • type = “1”, “A”, “a”, “I”, “i”
  • start = starting number

Attributes of Unordered List:

  • type = “disc”, “circle”, “square”

Description List:

Used to define terms and descriptions

Example:

<dl>
  <dt>HTML</dt>
  <dd>Markup language for creating web pages</dd>
</dl>

4. Font Tags

The <font> tag is used to change font properties. It uses the following attributes:

  • face : Font name
  • size : Font size (1 to 7)
  • color : Font color

Example:

<font face="Arial" size="5" color="blue">This is styled text</font>

5. Inserting Images

Images can be added using the <img> tag. It does not need a closing tag.

Attributes:

  • src : Path of image
  • width and height : Size of image
  • alt : Alternate text when image is not displayed

Example:

<img src="logo.jpg" width="200" height="100" alt="Company Logo">

6. Superscript and Subscript

Used to show text above or below the normal line

Example:

X<sup>2</sup>    shows X squared
H<sub>2</sub>O   shows chemical formula for water

7. HTML Forms

Forms are used to collect data from users

Common Form Elements:

  • Textbox: <input type="text">
  • Password: <input type="password">
  • Radio button: <input type="radio">
  • Checkbox: <input type="checkbox">
  • List/Dropdown: <select><option></option></select>
  • ComboBox: Same as dropdown
  • Submit Button: <input type="submit">

Example:

<form>
  Name: <input type="text"><br>
  Gender:
  <input type="radio" name="gender"> Male
  <input type="radio" name="gender"> Female <br>
  Hobbies:
  <input type="checkbox"> Reading
  <input type="checkbox"> Music <br>
  City:
  <select>
    <option>Delhi</option>
    <option>Mumbai</option>
  </select> <br>
  <input type="submit" value="Submit">
</form>

8. Embed Audio and Video

Audio Example:

<audio controls>
  <source src="audiofile.mp3" type="audio/mpeg">
</audio>

Video Example:

<video width="300" height="200" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

9. Tables in HTML

Tables are created using rows and columns

Tags Used:

  • <table> : Defines table
  • <tr> : Table row
  • <th> : Table header cell
  • <td> : Table data cell
  • rowspan and colspan : Merge rows or columns

Example:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td rowspan="2">Rahul</td>
    <td>85</td>
  </tr>
  <tr>
    <td>90</td>
  </tr>
</table>

10. Links in HTML

Links are created using the <a> tag

Attributes:

  • href : Target URL or email
  • target="_blank" : Opens link in new tab
  • mailto: : Opens default mail app

Examples:

<a href="https://www.cbse.gov.in" target="_blank">Visit CBSE</a>
<a href="mailto:info@example.com">Email Us</a>

11. Cascading Style Sheets (CSS)

CSS is used to style HTML elements. Inline CSS is written using the style attribute.

Example:

<p style="color: red; font-size: 18px; background-color: yellow;">Styled Text</p>

Common CSS Properties:

  • color : Text color
  • background-color : Background color
  • border-style : solid, dotted, dashed
  • margin : Space around element
  • height, width : Size of element
  • outline : Border outside main border
  • font-family : Type of font
  • font-style : normal, italic
  • font-size : Size of text
  • text-align : Align text (left, center, right)
  • float : Place element to left or right

Important Questions and Answers

1. Short Answer Type Questions (1 to 2 Marks)

Q1. What is HTML?
Ans: HTML (HyperText Markup Language) is the standard markup language used to create and design web pages.

Q2. Name any two container and two empty tags in HTML.
Ans:

  • Container tags: <html>, <body>
  • Empty tags: <br>, <hr>

Q3. What is the purpose of the <title> tag?
Ans: The <title> tag sets the title of the web page, which is displayed in the browser’s title bar or tab.

Q4. Write the syntax of the <img> tag.
Ans:
<img src="image.jpg" width="200" height="150" alt="Image">

Q5. Which attribute of <ol> is used to change the numbering type?
Ans: The type attribute. Example: <ol type="A">

Q6. What is the use of <form> tag in HTML?
Ans: The <form> tag is used to create input forms to collect data from the user.

Q7. How is superscript text written in HTML?
Ans: Using the <sup> tag. Example: X2 shows X squared.

Q8. Write the HTML tag to display a horizontal line.
Ans: <hr>

2. Long Answer Type Questions (3 to 5 Marks)

Q9. Write HTML code to display a list of your favorite fruits using an unordered list.
Ans:

<ul type="circle">
  <li>Apple</li>
  <li>Mango</li>
  <li>Banana</li>
</ul>

Q10. Explain the difference between <ol> and <ul> with example.
Ans:

  • <ol> is an ordered list. Items are numbered or lettered.
  • <ul> is an unordered list. Items have bullet points.

Example:

<ol>
  <li>Math</li>
  <li>Science</li>
</ol>

<ul>
  <li>Pen</li>
  <li>Pencil</li>
</ul>

Q11. Write HTML code to create a table with two rows and three columns.
Ans:

<table border="1">
  <tr>
    <td>One</td><td>Two</td><td>Three</td>
  </tr>
  <tr>
    <td>Four</td><td>Five</td><td>Six</td>
  </tr>
</table>

Q12. Write HTML code to embed an audio file and a video file.
Ans:

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
</audio>

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
</video>

Q13. Write HTML code to design a simple form to collect name, gender, and hobbies.
Ans:

<form>
  Name: <input type="text"><br>
  Gender:
  <input type="radio" name="gender">Male
  <input type="radio" name="gender">Female<br>
  Hobbies:
  <input type="checkbox">Reading
  <input type="checkbox">Sports<br>
  <input type="submit" value="Submit">
</form>

Q14. Write HTML code to create a hyperlink to open Google in a new tab.
Ans:

<a href="https://www.google.com" target="_blank">Visit Google</a>

Q15. What is CSS? List any three CSS properties with example.
Ans:
CSS (Cascading Style Sheets) is used to style HTML elements.
Common properties:

  • color
  • font-size
  • background-color

Example:

<p style="color:red; font-size:18px; background-color:yellow;">
  Styled Text
</p>