Unit-2 HTML Notes for Class 10 Computer Applications

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>