Unit 2: HTML (Shorts : 25)

• Introduction to web page designing using HTML: create and save an HTML
document, access a web page using a web browser.
• HTML tags: html, head, title, body, (attributes: text, background, bgcolor, link,
vlink, alink), br (break), hr(horizontal rule), inserting comments, h1..h6 (heading),

p (paragraph), b (bold), i (italics), u (underline), ul (unordered list), ol (ordered
list), and li (list item). Description lists: dl, dt and dd. Attributes of ol (start, type),
ul (type).
• Font tags (attributes: face, size, color).
• Insert images: img (attributes: src, width, height, alt), sup (super script), sub
(subscript).
• HTML Forms: Textbox, radio buttons, checkbox, password, list, combobox.
• Embed audio and video in a HTML page.
• Create a table using the tags: table, tr, th, td, rowspan, colspan
• Links: significance of linking, anchor element (attributes: href, mailto), targets.
• Cascading style sheets: colour, background-colour, border-style, margin, height,
width, outline, font (family, style, size), align, float.

*RUonTop**********************

CBSE CLASS X – COMPUTER APPLICATIONS (165)

UNIT 2: HTML

Session 2026–27

1. INTRODUCTION TO HTML

What is HTML?

HTML stands for HyperText Markup Language.

HTML is a markup language used to create and structure web pages.

HTML tells a web browser how different parts of a web page should be organised.

Examples of things created using HTML

Headings
Paragraphs
Lists
Images
Tables
Forms
Links
Audio
Video

Important Point

HTML is not a programming language. It is a markup language.

2. WHAT IS A WEB PAGE?

A web page is a document that can be displayed in a web browser.

A web page is generally created using HTML.

Examples of browsers:

Google Chrome
Microsoft Edge
Mozilla Firefox
Safari

3. CREATING AN HTML DOCUMENT

An HTML file can be created using a simple text editor such as Notepad.

Steps

Open Notepad.
Type HTML code.
Click File → Save As.
Give the file a name such as:

index.html

Select All Files in Save as type.
Save the file.
Double-click the file.
It will open in a web browser.

Important

The extension of an HTML file is generally:

.html

4. BASIC HTML STRUCTURE

<!DOCTYPE html>

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Welcome</h1>

<p>This is my first web page.</p>

</body>

</html>

Explanation

Element	Purpose
`<!DOCTYPE html>`	Declares an HTML document
`<html>`	Root element
`<head>`	Contains document information
`<title>`	Sets the page title
`<body>`	Contains visible page content
`<h1>`	Main heading
`<p>`	Paragraph

5. HTML TAG

An HTML tag is a markup instruction written inside angle brackets.

Example:

<p>

Many HTML elements have an opening and closing tag:

<p>Hello</p>

Here:

<p> = opening tag
</p> = closing tag
Hello = content

6. HTML ELEMENT

An HTML element generally consists of an opening tag, content and a closing tag.

Example:

<h1>My School</h1>

Structure:

Opening Tag + Content + Closing Tag

7. `<HTML>` TAG

The <html> element is the root element of an HTML document.

Example:

<html>

...

</html>

All major HTML content is placed inside it.

8. `<HEAD>` TAG

The <head> element contains information about the document that is not normally displayed as the main page content.

Example:

<head>

<title>My Website</title>

</head>

9. `<TITLE>` TAG

The <title> element specifies the title of the web page.

It normally appears on the browser tab.

Example:

<title>My School</title>

10. `<BODY>` TAG

The <body> element contains the main content displayed in the browser.

Example:

<body>

<h1>Welcome</h1>

<p>This is my school website.</p>

</body>

11. BODY ATTRIBUTES

The syllabus includes the following body attributes:

text
background
bgcolor
link
vlink
alink

These are commonly taught as basic/legacy HTML attributes.

11.1 `text`

Used to specify the colour of normal text.

Example:

<body text="blue">

11.2 `background`

Used to specify an image as the page background.

Example:

<body background="school.jpg">

11.3 `bgcolor`

Used to specify the background colour.

Example:

<body bgcolor="lightblue">

11.4 `link`

Specifies the colour of unvisited links.

Example:

<body link="blue">

11.5 `vlink`

Specifies the colour of visited links.

Example:

<body vlink="purple">

11.6 `alink`

Specifies the colour of an active link while it is being activated.

Example:

<body alink="red">

Important Note

These <body> presentation attributes are legacy HTML techniques. Modern web development normally uses CSS for these purposes, but they remain useful for understanding the CBSE syllabus.

12. `<BR>` TAG

<br> is used to insert a line break.

Example:

Hello<br>
World

Output:

Hello
World

Important

<br> does not require a separate closing tag.

13. `<HR>` TAG

<hr> creates a horizontal rule/line.

Example:

<h1>My School</h1>

<hr>

<p>Welcome to our school.</p>

It is useful for separating sections.

14. HTML COMMENTS

Comments are notes written inside HTML code that are not displayed on the web page.

Syntax

<!-- This is a comment -->

Example

<h1>My School</h1>

<!-- School introduction -->

<p>Welcome to our school.</p>

Uses

Explain code
Add notes
Improve readability
Temporarily document sections

15. HEADINGS `<H1>` TO `<H6>`

HTML provides six heading levels:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Size

Normally:

H1 → Largest
H2
H3
H4
H5
H6 → Smallest

Example

<h1>Computer Applications</h1>
<h2>HTML</h2>
<h3>Introduction</h3>

16. PARAGRAPH `<P>`

The <p> element defines a paragraph.

Example:

<p>
HTML is used to create web pages.
</p>

Another example:

<p>
Computer Applications is an interesting subject.
</p>

17. BOLD `<B>`

The <b> element displays text in bold.

Example:

<b>Important Notice</b>

Output:

Important Notice

18. ITALIC `<I>`

The <i> element displays text in italic style.

Example:

<i>Welcome to my website.</i>

19. UNDERLINE `<U>`

The <u> element underlines text.

Example:

<u>Computer Applications</u>

20. COMBINING TEXT TAGS

Tags can be nested.

Example:

<b><i>Important Information</i></b>

Another example:

<u><b>Welcome</b></u>

21. UNORDERED LIST `<UL>`

An unordered list displays items using bullets.

Syntax

<ul>

<li>Computer</li>
<li>Science</li>
<li>Mathematics</li>

</ul>

Output

Computer
Science
Mathematics

22. ORDERED LIST `<OL>`

An ordered list displays items in a sequence.

Example:

<ol>

<li>Open browser</li>
<li>Enter web address</li>
<li>Press Enter</li>

</ol>

Output:

Open browser
Enter web address
Press Enter

23. LIST ITEM `<LI>`

<li> defines an individual item in an ordered or unordered list.

Example:

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

24. ORDERED LIST ATTRIBUTES

The syllabus includes:

start
type

`start`

Specifies the starting number.

Example:

<ol start="5">

<li>Apple</li>
<li>Banana</li>
<li>Mango</li>

</ol>

Output:

Apple
Banana
Mango

25. ORDERED LIST `TYPE`

The type attribute specifies the numbering style.

Examples include:

<ol type="1">

Normal numbers:

1, 2, 3

<ol type="A">

Capital letters:

A, B, C

<ol type="a">

Small letters:

a, b, c

<ol type="I">

Roman numerals:

I, II, III

<ol type="i">

Small Roman numerals:

i, ii, iii

26. UNORDERED LIST `TYPE`

The type attribute can specify the bullet style in traditional HTML.

Example:

<ul type="square">

Possible traditional values include:

disc
circle
square

Example:

<ul type="square">

<li>HTML</li>
<li>CSS</li>
<li>Internet</li>

</ul>

27. DESCRIPTION LIST

A description list is used for terms and their descriptions.

It uses:

<dl> = Description List
<dt> = Description Term
<dd> = Description/Definition

Example

<dl>

<dt>HTML</dt>
<dd>Language used to structure web pages.</dd>

<dt>CSS</dt>
<dd>Language used to style web pages.</dd>

</dl>

Structure

<dl>
   |
   +-- <dt> Term
   |
   +-- <dd> Description
</dl>

28. FONT TAG

The traditional <font> tag is included in the syllabus.

It can specify:

face
size
color

Syntax

<font face="Arial" size="5" color="blue">
Hello Students
</font>

29. FONT `FACE`

The face attribute specifies the font family.

Example:

<font face="Arial">
Computer Applications
</font>

30. FONT `SIZE`

The size attribute specifies the font size in the traditional HTML font element.

Example:

<font size="5">
Hello
</font>

31. FONT `COLOR`

The color attribute specifies text colour.

Example:

<font color="red">
Important
</font>

32. INSERTING IMAGES

The <img> element is used to display an image.

Syntax

<img src="school.jpg">

Important attributes

src
width
height
alt

33. `SRC` ATTRIBUTE

src specifies the location/path of the image.

Example:

<img src="flower.jpg">

If the image is inside an images folder:

<img src="images/flower.jpg">

34. `WIDTH` AND `HEIGHT`

These attributes specify image dimensions.

Example:

<img src="school.jpg"
     width="400"
     height="250">

35. `ALT` ATTRIBUTE

alt provides alternative text for an image.

Example:

<img src="school.jpg"
     alt="School Building">

The alternative text can be useful if the image cannot be displayed and also supports accessibility.

36. COMPLETE IMAGE EXAMPLE

<h2>Our School</h2>

<img src="school.jpg"
     width="500"
     height="300"
     alt="School Building">

37. SUPERSCRIPT `<SUP>`

The <sup> element displays text above the normal line.

Example:

x<sup>2</sup>

Output:

x²

Another example:

10<sup>2</sup>

38. SUBSCRIPT `<SUB>`

The <sub> element displays text below the normal line.

Example:

H<sub>2</sub>O

Output:

H₂O

Another example:

CO<sub>2</sub>

Output:

CO₂

39. HTML FORMS

What is an HTML Form?

An HTML form is used to collect information from users.

Examples:

Registration form
Admission form
Login form
Feedback form
Contact form

Basic structure

<form>

...

</form>

40. TEXTBOX

A textbox allows the user to enter a single line of text.

Example

Name:
<input type="text">

With label-like text

<label>Name:</label>
<input type="text" name="name">

41. PASSWORD FIELD

A password field hides the characters entered by the user.

Example

Password:
<input type="password">

The entered characters are normally displayed as dots or other masking symbols by the browser.

42. RADIO BUTTON

Radio buttons are generally used when the user should select one option from a group.

Example:

Gender:

<input type="radio"
       name="gender"
       value="male"> Male

<input type="radio"
       name="gender"
       value="female"> Female

Important

Radio buttons in the same group should normally have the same name.

43. CHECKBOX

A checkbox allows the user to select one or more options.

Example:

Subjects:

<input type="checkbox"> Computer

<input type="checkbox"> Mathematics

<input type="checkbox"> Science

Difference

Radio button → Usually one choice

Checkbox → One or more choices

44. LIST / COMBOBOX

A selection list can be created using <select> and <option>.

Example:

<label>Class:</label>

<select>
    <option>IX</option>
    <option>X</option>
    <option>XI</option>
    <option>XII</option>
</select>

The user can select an option from the list.

45. COMPLETE FORM EXAMPLE

<h1>Student Registration</h1>

<form>

Name:
<input type="text">
<br><br>

Password:
<input type="password">
<br><br>

Gender:

<input type="radio"
       name="gender"> Male

<input type="radio"
       name="gender"> Female

<br><br>

Subjects:

<input type="checkbox"> Computer

<input type="checkbox"> Science

<input type="checkbox"> Mathematics

<br><br>

Class:

<select>
    <option>IX</option>
    <option>X</option>
</select>

<br><br>

<input type="submit" value="Submit">

<input type="reset" value="Reset">

</form>

46. AUDIO IN HTML

Audio can be embedded in a web page using the <audio> element.

Example:

<audio controls>

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

Your browser does not support audio.

</audio>

`controls`

The controls attribute displays audio controls such as play/pause and volume controls.

47. VIDEO IN HTML

Video can be embedded using the <video> element.

Example:

<video width="500"
       height="300"
       controls>

<source src="school.mp4"
        type="video/mp4">

Your browser does not support video.

</video>

Common attributes

width
height
controls
autoplay
loop
muted

48. AUDIO VS VIDEO

Audio	Video
Used for sound	Used for moving visual content
`<audio>`	`<video>`
Example: music	Example: educational video
`controls` can provide playback controls	`controls` can provide playback controls

49. HTML TABLE

An HTML table displays data in rows and columns.

Important tags:

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

50. `<TABLE>` TAG

<table> defines a table.

Example:

<table border="1">

...

</table>

51. `<TR>` TAG

<tr> means Table Row.

It creates a row in a table.

Example:

<tr>
...
</tr>

52. `<TH>` TAG

<th> means Table Header.

It defines a header cell.

Example:

<th>Name</th>

Header text is normally displayed bold and centred by default.

53. `<TD>` TAG

<td> means Table Data.

It defines an ordinary data cell.

Example:

<td>Rahul</td>

54. BASIC TABLE EXAMPLE

<table border="1">

<tr>
    <th>Roll No</th>
    <th>Name</th>
    <th>Marks</th>
</tr>

<tr>
    <td>101</td>
    <td>Rahul</td>
    <td>85</td>
</tr>

<tr>
    <td>102</td>
    <td>Priya</td>
    <td>92</td>
</tr>

</table>

Output

Roll No	Name	Marks
101	Rahul	85
102	Priya	92

55. ROWSPAN

rowspan allows a cell to occupy multiple rows.

Example:

<table border="1">

<tr>
    <th>Name</th>
    <th>Subject</th>
</tr>

<tr>
    <td rowspan="2">Rahul</td>
    <td>Computer</td>
</tr>

<tr>
    <td>Science</td>
</tr>

</table>

Here, the Rahul cell covers two rows.

56. COLSPAN

colspan allows a cell to occupy multiple columns.

Example:

<table border="1">

<tr>
    <th colspan="2">Student Details</th>
</tr>

<tr>
    <td>Name</td>
    <td>Rahul</td>
</tr>

</table>

The heading cell covers two columns.

57. ROWSPAN VS COLSPAN

rowspan	colspan
Combines/covers rows vertically	Combines/covers columns horizontally
Works across multiple rows	Works across multiple columns
Example: `rowspan="2"`	Example: `colspan="2"`

Memory Trick

ROWspan → ROW

COLspan → COLUMN

58. HTML LINKS

A link connects one web resource to another.

Links are important because they allow users to navigate between:

Web pages
Websites
Sections
Files
Email addresses

59. ANCHOR `<A>` ELEMENT

The <a> element creates a hyperlink.

Syntax

<a href="about.html">
About Us
</a>

When the user clicks About Us, the browser opens the linked page.

60. `HREF` ATTRIBUTE

href specifies the destination of a hyperlink.

Example:

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

61. LINK TO ANOTHER PAGE

Suppose we have:

index.html
about.html
contact.html

We can create links:

<a href="about.html">About</a>

<a href="contact.html">Contact</a>

62. MAILTO LINK

The mailto: scheme can be used to create a link that opens the user's default email application for composing a message.

Example:

<a href="mailto:school@example.com">
Email School
</a>

When clicked, the browser/application may open an email composer.

63. TARGET

The target attribute specifies where a linked document should open.

Example:

<a href="about.html" target="_blank">
Open About Page
</a>

_blank generally opens the link in a new browser tab/window.

Common target values

Target	Meaning
`_self`	Current browsing context
`_blank`	New browsing context, commonly a new tab
`_parent`	Parent browsing context
`_top`	Top-level browsing context

64. INTERNAL AND EXTERNAL LINKS

Internal Link

Links to another page/resource within the same website.

Example:

<a href="about.html">About</a>

External Link

Links to another website.

Example:

<a href="https://www.cbse.gov.in">
CBSE Website
</a>

65. CASCADING STYLE SHEETS

What is CSS?

CSS stands for Cascading Style Sheets.

CSS is used to control the presentation and appearance of HTML documents.

CSS can control:

Colour
Background
Borders
Margins
Width
Height
Fonts
Alignment
Positioning/float

66. BASIC CSS SYNTAX

selector {
    property: value;
}

Example:

p {
    color: blue;
    font-size: 18px;
}

Here:

p = selector
color = property
blue = value

67. INLINE CSS

Inline CSS is written inside the style attribute.

Example:

<p style="color: blue;">
Hello Students
</p>

68. INTERNAL CSS

Internal CSS is written inside the <style> element, usually in the <head>.

Example:

<head>

<style>

p {
    color: blue;
}

</style>

</head>

69. CSS COLOUR

The color property changes the colour of text.

Example:

h1 {
    color: blue;
}

70. BACKGROUND-COLOUR

The background-color property changes the background colour.

Example:

body {
    background-color: lightyellow;
}

71. BORDER-STYLE

The border-style property specifies the style of an element's border.

Examples:

p {
    border-style: solid;
}

Common values include:

solid
dotted
dashed
double

Example:

div {
    border-style: dashed;
}

72. MARGIN

The margin property specifies the space outside an element's border.

Example:

p {
    margin: 20px;
}

Easy Understanding

Outside element
      ↓
   MARGIN
      ↓
  [ BORDER ]
  [ CONTENT ]

73. HEIGHT

The height property controls the height of an element.

Example:

div {
    height: 200px;
}

74. WIDTH

The width property controls the width of an element.

Example:

div {
    width: 400px;
}

75. OUTLINE

An outline is a line drawn around an element, outside its border.

Example:

p {
    outline: 2px solid blue;
}

Border vs Outline

Border forms part of the element's box.

Outline is drawn outside the border and does not take up the same layout space as a border.

76. FONT FAMILY

The font-family property specifies the typeface.

Example:

p {
    font-family: Arial;
}

Multiple fallback fonts can be specified:

p {
    font-family: Arial, sans-serif;
}

77. FONT STYLE

The font-style property controls the style of text.

Example:

p {
    font-style: italic;
}

Common values:

normal
italic
oblique

78. FONT SIZE

The font-size property controls the size of text.

Example:

p {
    font-size: 20px;
}

79. TEXT ALIGN

The text-align property controls horizontal alignment of text.

Examples:

h1 {
    text-align: center;
}

Other common values:

text-align: left;
text-align: right;
text-align: justify;

80. FLOAT

The float property can position an element toward the left or right and allow surrounding content to flow around it.

Example:

img {
    float: right;
}

Another example:

img {
    float: left;
}

Values

left
right
none

81. COMPLETE HTML + CSS EXAMPLE

<!DOCTYPE html>

<html>

<head>

<title>My School</title>

<style>

body {
    background-color: lightblue;
    margin: 30px;
}

h1 {
    color: darkblue;
    text-align: center;
}

p {
    font-family: Arial;
    font-size: 18px;
    border-style: solid;
    width: 500px;
    margin: 20px;
}

img {
    width: 300px;
    height: 200px;
    float: right;
}

</style>

</head>

<body>

<h1>MY SCHOOL</h1>

<img src="school.jpg"
     alt="School Building">

<p>
Our school provides quality education
and encourages students to participate
in academic and cultural activities.
</p>

</body>

</html>

82. IMPORTANT HTML TAGS – QUICK TABLE

Tag	Purpose
`<html>`	Root element
`<head>`	Document information
`<title>`	Browser/page title
`<body>`	Visible page content
`<br>`	Line break
`<hr>`	Horizontal rule
`<h1>`–`<h6>`	Headings
`<p>`	Paragraph
`<b>`	Bold text
`<i>`	Italic text
`<u>`	Underlined text
`<ul>`	Unordered list
`<ol>`	Ordered list
`<li>`	List item
`<dl>`	Description list
`<dt>`	Description term
`<dd>`	Description
`<font>`	Traditional font formatting
`<img>`	Image
`<sup>`	Superscript
`<sub>`	Subscript
`<form>`	Form
`<input>`	Input control
`<select>`	Selection list
`<option>`	List option
`<textarea>`	Multi-line input
`<audio>`	Audio
`<video>`	Video
`<table>`	Table
`<tr>`	Table row
`<th>`	Header cell
`<td>`	Data cell
`<a>`	Hyperlink

83. IMPORTANT ATTRIBUTES – QUICK TABLE

Attribute	Used With	Purpose
`text`	body	Text colour
`background`	body	Background image
`bgcolor`	body	Background colour
`link`	body	Unvisited link colour
`vlink`	body	Visited link colour
`alink`	body	Active link colour
`start`	ol	Starting number
`type`	ol/ul	Number/bullet style
`face`	font	Font family
`size`	font	Font size
`color`	font	Text colour
`src`	img	Image location
`width`	img/video	Width
`height`	img/video	Height
`alt`	img	Alternative text
`href`	a	Link destination
`target`	a	Link opening location
`rowspan`	table cells	Span multiple rows
`colspan`	table cells	Span multiple columns

84. IMPORTANT CSS PROPERTIES

CSS Property	Purpose
`color`	Text colour
`background-color`	Background colour
`border-style`	Border style
`margin`	Outside spacing
`height`	Element height
`width`	Element width
`outline`	Outline around element
`font-family`	Font family
`font-style`	Font style
`font-size`	Font size
`text-align`	Text alignment
`float`	Float element left/right

85. HTML VS CSS

HTML	CSS
Structures web pages	Styles web pages
Uses elements/tags	Uses selectors and properties
Creates headings, paragraphs, tables etc.	Controls colours, fonts, spacing etc.
Defines content structure	Defines presentation

Easy Rule

HTML = Structure

CSS = Style

86. RADIO BUTTON VS CHECKBOX

Radio Button	Checkbox
Generally one option from a group	One or more options
Circular control	Square control commonly displayed
Same `name` groups radio buttons	Checkboxes can be independent
Example: Gender	Example: Subjects

87. ORDERED VS UNORDERED LIST

Ordered List	Unordered List
`<ol>`	`<ul>`
Displays sequence	Displays bullets
Useful when order matters	Useful when order does not matter
Example: Steps	Example: Features

88. TH VS TD

`<th>`	`<td>`
Table header cell	Table data cell
Used for headings	Used for ordinary data
Normally bold/centred by default	Normal cell formatting by default

89. ROWSPAN VS COLSPAN

rowspan → ↓
          ↓
       Multiple Rows

colspan → → →
          Multiple Columns

90. PRACTICAL PROGRAM 1 – STUDENT INFORMATION

<!DOCTYPE html>

<html>

<head>

<title>Student Information</title>

</head>

<body>

<h1>STUDENT INFORMATION</h1>

<hr>

<p><b>Name:</b> Rahul Kumar</p>

<p><b>Class:</b> X</p>

<p><b>School:</b> ABC Public School</p>

<h2>Subjects</h2>

<ul>

<li>English</li>
<li>Mathematics</li>
<li>Science</li>
<li>Computer Applications</li>

</ul>

</body>

</html>

91. PRACTICAL PROGRAM 2 – MARKS TABLE

<!DOCTYPE html>

<html>

<head>

<title>Marks Table</title>

</head>

<body>

<h1>STUDENT MARKS</h1>

<table border="1">

<tr>

<th>Subject</th>
<th>Marks</th>

</tr>

<tr>

<td>English</td>
<td>85</td>

</tr>

<tr>

<td>Mathematics</td>
<td>90</td>

</tr>

<tr>

<td>Computer</td>
<td>95</td>

</tr>

</table>

</body>

</html>

92. PRACTICAL PROGRAM 3 – FORM

<!DOCTYPE html>

<html>

<head>

<title>Registration Form</title>

</head>

<body>

<h1>REGISTRATION FORM</h1>

<form>

Name:
<input type="text">

<br><br>

Password:
<input type="password">

<br><br>

Gender:

<input type="radio"
       name="g"> Male

<input type="radio"
       name="g"> Female

<br><br>

Hobbies:

<input type="checkbox"> Reading

<input type="checkbox"> Sports

<input type="checkbox"> Music

<br><br>

Class:

<select>

<option>IX</option>
<option>X</option>

</select>

<br><br>

<input type="submit"
       value="Submit">

<input type="reset"
       value="Reset">

</form>

</body>

</html>

93. PRACTICAL PROGRAM 4 – IMAGE AND LINK

<!DOCTYPE html>

<html>

<head>

<title>My Website</title>

</head>

<body>

<h1>MY WEBSITE</h1>

<img src="flower.jpg"
     width="300"
     height="200"
     alt="Beautiful Flower">

<br><br>

<a href="https://www.cbse.gov.in"
   target="_blank">
Visit CBSE Website
</a>

</body>

</html>

94. PRACTICAL PROGRAM 5 – AUDIO AND VIDEO

<!DOCTYPE html>

<html>

<head>

<title>Media Page</title>

</head>

<body>

<h1>MEDIA PAGE</h1>

<h2>Audio</h2>

<audio controls>

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

</audio>

<h2>Video</h2>

<video width="400"
       controls>

<source src="video.mp4"
        type="video/mp4">

</video>

</body>

</html>

95. PRACTICAL PROGRAM 6 – DESCRIPTION LIST

<!DOCTYPE html>

<html>

<body>

<h1>COMPUTER TERMS</h1>

<dl>

<dt>HTML</dt>

<dd>
Used to structure web pages.
</dd>

<dt>CSS</dt>

<dd>
Used to style web pages.
</dd>

<dt>Browser</dt>

<dd>
Software used to access web pages.
</dd>

</dl>

</body>

</html>

96. PRACTICAL PROGRAM 7 – ROWSPAN AND COLSPAN

<table border="1">

<tr>

<th colspan="3">
Student Result
</th>

</tr>

<tr>

<th>Name</th>
<th>Subject</th>
<th>Marks</th>

</tr>

<tr>

<td rowspan="2">Rahul</td>
<td>Computer</td>
<td>95</td>

</tr>

<tr>

<td>Science</td>
<td>90</td>

</tr>

</table>

97. PRACTICAL PROGRAM 8 – CSS

<!DOCTYPE html>

<html>

<head>

<style>

body {
    background-color: lightyellow;
    margin: 30px;
}

h1 {
    color: blue;
    text-align: center;
    font-family: Arial;
}

p {
    color: green;
    font-size: 18px;
    border-style: solid;
    width: 500px;
    height: 80px;
    margin: 20px;
    outline: 2px dotted red;
}

</style>

</head>

<body>

<h1>COMPUTER APPLICATIONS</h1>

<p>
HTML creates the structure of a web page.
CSS is used to style the page.
</p>

</body>

</html>

98. COMMON MISTAKES

Mistake 1

Writing:

<title>

without closing it.

Correct:

<title>My Page</title>

Mistake 2

Incorrect image path.

Correct:

<img src="flower.jpg">

Make sure the image is actually available at that path.

Mistake 3

Forgetting quotes around attribute values.

Correct:

<a href="about.html">

Mistake 4

Using different names for radio buttons that should belong to the same group.

Correct:

<input type="radio" name="gender">
<input type="radio" name="gender">

Mistake 5

Confusing rowspan and colspan.

Remember:

rowspan  → rows
colspan  → columns

99. IMPORTANT EXAM QUESTIONS

Very Short Questions

What is HTML?
What is the purpose of <title>?
What is the use of <br>?
What is the use of <hr>?
What is an HTML comment?
What is the use of <h1>?
What is the difference between <ol> and <ul>?
What is <li>?
What is <dl>?
What is <dt>?
What is <dd>?
What is the use of src?
What is the use of alt?
What is the use of <sup>?
What is the use of <sub>?
What is an HTML form?
What is a radio button?
What is a checkbox?
What is the purpose of <table>?
What is rowspan?
What is colspan?
What is a hyperlink?
What is href?
What is mailto:?
What is CSS?

100. SHORT ANSWER QUESTIONS

Q1. What is HTML?

HTML stands for HyperText Markup Language. It is used to structure web pages.

Q2. What is CSS?

CSS stands for Cascading Style Sheets. It is used to control the appearance of HTML pages.

Q3. What is the purpose of `<br>`?

It inserts a line break.

Q4. What is the purpose of `<hr>`?

It creates a horizontal rule that can separate sections of a web page.

Q5. What is the use of `alt` in an image?

It provides alternative text describing the image.

Q6. What is the difference between `<ol>` and `<ul>`?

<ol> creates an ordered list, while <ul> creates an unordered list.

Q7. What is `rowspan`?

rowspan allows a table cell to span multiple rows.

Q8. What is `colspan`?

colspan allows a table cell to span multiple columns.

Q9. What is a hyperlink?

Answer: b

15. Which CSS property controls the font size?

a. font
b. text-size
c. font-size
d. size

Answer: c

102. FILL IN THE BLANKS

HTML stands for HyperText Markup Language.
The <p> tag is used for a paragraph.
The <br> tag inserts a line break.
The <hr> tag creates a horizontal rule.
<ol> creates an ordered list.
<ul> creates an unordered list.
<li> defines a list item.
<img> is used to insert an image.
The src attribute specifies the image source/location.
The alt attribute provides alternative text.
<sup> creates superscript.
<sub> creates subscript.
<tr> creates a table row.
<th> creates a table header cell.
<td> creates a table data cell.
rowspan spans multiple rows.
colspan spans multiple columns.
<a> creates a hyperlink.
href specifies the link destination.
CSS stands for Cascading Style Sheets.

103. MATCH THE FOLLOWING

A	B
`<p>`	Paragraph
`<img>`	Image
`<a>`	Hyperlink
`<table>`	Table
`<tr>`	Table row
`<th>`	Header cell
`<td>`	Data cell
`<ul>`	Unordered list
`<ol>`	Ordered list
`<form>`	Form

104. QUICK REVISION

HTML
 |
 +-- Structure
 |    |
 |    +-- Headings
 |    +-- Paragraphs
 |    +-- Lists
 |    +-- Tables
 |    +-- Forms
 |    +-- Images
 |    +-- Links
 |
 +-- Multimedia
 |    |
 |    +-- Audio
 |    +-- Video
 |
 +-- CSS
      |
      +-- Colour
      +-- Background
      +-- Border
      +-- Margin
      +-- Width
      +-- Height
      +-- Font
      +-- Alignment
      +-- Float

105. GOLDEN RULES FOR EXAM

Remember these:

<h1> → Largest heading

<p> → Paragraph

<br> → Line break

<hr> → Horizontal line

<b> → Bold

<i> → Italic

<u> → Underline

<ul> → Bullets

<ol> → Numbering

<li> → List item

<dl> → Description list

<dt> → Term

<dd> → Description

<img> → Image

src → Image source

alt → Alternative text

<sup> → Above line

<sub> → Below line

<form> → Form

radio → Usually one choice

checkbox → Multiple choices

<table> → Table

<tr> → Row

<th> → Header

<td> → Data

rowspan → Rows

colspan → Columns

<a> → Link

href → Link destination

mailto: → Email link

target="_blank" → New browsing context

HTML → Structure

CSS → Presentation/Style

color → Text colour

background-color → Background colour

border-style → Border style

margin → Outside space

width → Width

height → Height

font-family → Font type

font-style → Font style

font-size → Font size

text-align → Text alignment

float → Float left/right

106. ONE-PAGE EXAM REVISION SHEET

Topic	Remember
HTML	Web page structure
`<html>`	Root
`<head>`	Document information
`<title>`	Browser tab title
`<body>`	Visible content
`<h1>`–`<h6>`	Headings
`<p>`	Paragraph
`<br>`	Break
`<hr>`	Horizontal line
`<b>`	Bold
`<i>`	Italic
`<u>`	Underline
`<ul>`	Bullets
`<ol>`	Numbered list
`<li>`	List item
`<dl>`	Description list
`<img>`	Image
`<sup>`	Superscript
`<sub>`	Subscript
`<form>`	Form
Radio	One choice
Checkbox	Multiple choices
`<audio>`	Audio
`<video>`	Video
`<table>`	Table
`<tr>`	Row
`<th>`	Header
`<td>`	Data
`rowspan`	Multiple rows
`colspan`	Multiple columns
`<a>`	Hyperlink
`href`	Destination
`mailto:`	Email link
CSS	Styling
`color`	Text colour
`background-color`	Background
`margin`	Outside space
`width`	Width
`height`	Height
`font-family`	Font
`font-style`	Style
`font-size`	Size
`text-align`	Alignment
`float`	Left/right floating

U2_HTML&CSS

Unit 2: HTML (Shorts : 25)

• Introduction to web page designing using HTML: create and save an HTMLdocument, access a web page using a web browser.• HTML tags: html, head, title, body, (attributes: text, background, bgcolor, link,vlink, alink), br (break), hr(horizontal rule), inserting comments, h1..h6 (heading),

***************RUonTop************************************

CBSE CLASS X – COMPUTER APPLICATIONS (165)

UNIT 2: HTML

Session 2026–27

1. INTRODUCTION TO HTML

What is HTML?

Examples of things created using HTML

Important Point

2. WHAT IS A WEB PAGE?

3. CREATING AN HTML DOCUMENT

Steps

Important

4. BASIC HTML STRUCTURE

Explanation

5. HTML TAG

6. HTML ELEMENT

7. <HTML> TAG

8. <HEAD> TAG

9. <TITLE> TAG

10. <BODY> TAG

11. BODY ATTRIBUTES

11.1 text

11.2 background

11.3 bgcolor

11.4 link

11.5 vlink

11.6 alink

Important Note

12. <BR> TAG

Important

13. <HR> TAG

14. HTML COMMENTS

Syntax

Example

Uses

15. HEADINGS <H1> TO <H6>

Size

Example

16. PARAGRAPH <P>

17. BOLD <B>

18. ITALIC <I>

19. UNDERLINE <U>

20. COMBINING TEXT TAGS

21. UNORDERED LIST <UL>

Syntax

Output

22. ORDERED LIST <OL>

23. LIST ITEM <LI>

24. ORDERED LIST ATTRIBUTES

start

25. ORDERED LIST TYPE

26. UNORDERED LIST TYPE

27. DESCRIPTION LIST

Example

Structure

28. FONT TAG

Syntax

29. FONT FACE

30. FONT SIZE

31. FONT COLOR

32. INSERTING IMAGES

Syntax

Important attributes

33. SRC ATTRIBUTE

34. WIDTH AND HEIGHT

35. ALT ATTRIBUTE

36. COMPLETE IMAGE EXAMPLE

37. SUPERSCRIPT <SUP>

38. SUBSCRIPT <SUB>

39. HTML FORMS

What is an HTML Form?

Basic structure

40. TEXTBOX

Example

With label-like text

41. PASSWORD FIELD

Example

• Introduction to web page designing using HTML: create and save an HTML
document, access a web page using a web browser.
• HTML tags: html, head, title, body, (attributes: text, background, bgcolor, link,
vlink, alink), br (break), hr(horizontal rule), inserting comments, h1..h6 (heading),

*RUonTop**********************

7. `<HTML>` TAG

8. `<HEAD>` TAG

9. `<TITLE>` TAG

10. `<BODY>` TAG

11.1 `text`

11.2 `background`

11.3 `bgcolor`

11.4 `link`

11.5 `vlink`

11.6 `alink`

12. `<BR>` TAG

13. `<HR>` TAG

15. HEADINGS `<H1>` TO `<H6>`

16. PARAGRAPH `<P>`

17. BOLD `<B>`

18. ITALIC `<I>`

19. UNDERLINE `<U>`

21. UNORDERED LIST `<UL>`

22. ORDERED LIST `<OL>`

23. LIST ITEM `<LI>`

`start`

25. ORDERED LIST `TYPE`

26. UNORDERED LIST `TYPE`

29. FONT `FACE`

30. FONT `SIZE`

31. FONT `COLOR`

33. `SRC` ATTRIBUTE

34. `WIDTH` AND `HEIGHT`

35. `ALT` ATTRIBUTE

37. SUPERSCRIPT `<SUP>`

38. SUBSCRIPT `<SUB>`

`controls`

50. `<TABLE>` TAG

51. `<TR>` TAG

52. `<TH>` TAG

53. `<TD>` TAG

59. ANCHOR `<A>` ELEMENT

60. `HREF` ATTRIBUTE