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:

Open Notepad or any text editor
Type HTML code
Save the file as filename.html
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">

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>

1. Introduction to Web Page Designing Using HTML

2. HTML Tags

Basic Structure Tags:

Body Tag Attributes:

Formatting Tags:

3. Lists in HTML

Unordered List:

Ordered List:

Description List:

4. Font Tags

5. Inserting Images

6. Superscript and Subscript

7. HTML Forms

8. Embed Audio and Video

9. Tables in HTML

10. Links in HTML

11. Cascading Style Sheets (CSS)

Important Questions and Answers

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

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

Share Article