1.
Introduction to HTML
HTML (HyperText Markup Language) is used to create web pages and structure content
on the internet.
Basic structure of a webpage:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
Hello World!
</body>
</html>
2. HTML Document Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Content of webpage
</body>
</html>
Parts
<!DOCTYPE html> → HTML5 declaration
<html> → root element
<head> → metadata
<title> → page title
<body> → visible content
3. Adding Text in New Line <br>
<html>
<body>
Hello<br>
Welcome to HTML<br>
Learning is easy
</body>
</html>
4. Headings <h1> to <h6>
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
5. Paragraph <p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
6. Horizontal Line <hr>
<p>Paragraph 1</p>
<hr>
<p>Paragraph 2</p>
7. Subscript and Superscript
H<sub>2</sub>O
10<sup>2</sup>
Output:
H₂O
10²
8. Text Alignment
<p align="left">Left text</p>
<p align="center">Center text</p>
<p align="right">Right text</p>
9. Text Formatting
<b>Bold Text</b><br>
<i>Italic Text</i><br>
<u>Underlined Text</u>
10. Font Tag with Attributes
<font size="5" color="red" face="Arial">
This is font example
</font>
Attributes
size
color
face
11. Grouping Text
Div Tag (block level)
<div style="background-color:yellow">
<h2>Welcome</h2>
<p>This is inside div</p>
</div>
Span Tag (inline)
<p>This is <span style="color:red">red text</span></p>
12. Scrolling Text <marquee>
<marquee>Welcome to my website</marquee>
Attributes example:
<marquee direction="right" scrollamount="10">
Scrolling Text
</marquee>
Attributes
direction
behavior
scrollamount
bgcolor
13. Special Characters / Character Entities
< less than
> greater than
& ampersand
space
Example
<p>5 < 10</p>
14. HTML Comments
<!-- This is a comment -->
<p>Hello</p>
15. Ordered List
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
16. Unordered List
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
</ul>
17. Definition List
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Style sheet language</dd>
</dl>
18. Links (Anchor Tag)
<a href="[Link] Google</a>
With target attribute
<a href="[Link]" target="_blank">Open New Page</a>
Target values
_blank
_self
_parent
_top
19. Working with Tables
Basic Table
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
Table Caption
<table border="1">
<caption>Student Table</caption>
<tr>
<td>Name</td>
<td>Marks</td>
</tr>
</table>
Table Heading
<tr>
<th>Name</th>
<th>Age</th>
</tr>
Rowspan & Colspan
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Marks</th>
</tr>
<tr>
<td>John</td>
<td>80</td>
<td>90</td>
</tr>
</table>
20. Images <img>
<img src="[Link]" width="200" height="150" alt="My Image">
Attributes
src
width
height
alt
border
align
21. Image Map
<img src="[Link]" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" href="[Link]">
<area shape="circle" coords="337,300,44" href="[Link]">
</map>
22. Forms
Basic Form
<form action="[Link]" method="post">
Name: <input type="text"><br>
Password: <input type="password"><br>
<input type="submit">
</form>
23. Input Tag Types
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="submit">
<input type="reset">
24. Textarea
<textarea rows="4" cols="30">
Write message
</textarea>
25. Selection Control
<select>
<option>India</option>
<option>USA</option>
<option>UK</option>
</select>
26. Fieldset and Legend
<form>
<fieldset>
<legend>Personal Info</legend>
Name: <input type="text"><br>
Age: <input type="text">
</fieldset>
</form>
27. HTML5 Doctype
<!DOCTYPE html>
Defines HTML5 document.
28. New HTML5 Semantic Elements
Section
<section>
<h2>News</h2>
<p>Latest updates</p>
</section>
Article
<article>
<h2>Blog Post</h2>
<p>Article content</p>
</article>
Aside
<aside>
<p>Sidebar content</p>
</aside>
Header
<header>
<h1>Website Title</h1>
</header>
Footer
<footer>
<p>Copyright 2026</p>
</footer>
Figure & Figcaption
<figure>
<img src="[Link]">
<figcaption>Beautiful Image</figcaption>
</figure>
Details
<details>
<summary>Click to open</summary>
<p>More information</p>
</details>
29. Media Elements
Audio
<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
Plug-ins (embed)
<embed src="[Link]" width="500" height="400">
30. Canvas Element
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c=[Link]("myCanvas");
var ctx=[Link]("2d");
[Link]="red";
[Link](20,20,150,50);
</script>
31. SVG Graphics
✅ This covers almost all HTML syllabus topics with syntax and examples.
1. CSS Color Property
Used to change the text color.
Syntax
selector{
color: value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: red;
}
p{
color: blue;
}
</style>
</head>
<body>
<h1>This is heading</h1>
<p>This is paragraph</p>
</body>
</html>
2. CSS Background Properties
Syntax
selector{
background-color: value;
}
Example
<style>
body{
background-color: lightyellow;
}
</style>
Other background properties:
Property Example
background-color background-color: yellow;
background-image background-image: url("[Link]");
background-repeat background-repeat: no-repeat;
background-position background-position: center;
3. CSS Text Alignment
Syntax
selector{
text-align: value;
}
Example
<style>
p{
text-align: center;
}
</style>
<p>This text is centered</p>
Values:
left
right
center
justify
4. CSS Text Decoration
Used to decorate text.
Syntax
selector{
text-decoration: value;
}
Example
<style>
h2{
text-decoration: underline;
}
</style>
<h2>Underlined Heading</h2>
Values:
none
underline
overline
line-through
5. CSS Text Transformation
Used to change text case.
Syntax
selector{
text-transform: value;
}
Example
<style>
p{
text-transform: uppercase;
}
</style>
<p>this will become uppercase</p>
Values:
uppercase
lowercase
capitalize
6. CSS Font Properties
Syntax
selector{
font-family: value;
font-size: value;
font-style: value;
font-weight: value;
}
Example
<style>
p{
font-family: Arial;
font-size: 20px;
font-style: italic;
font-weight: bold;
}
</style>
<p>This is styled text</p>
7. CSS Border Property
Syntax
selector{
border: width style color;
}
Example
<style>
div{
border: 2px solid black;
}
</style>
<div>This is a box</div>
Border styles:
solid
dotted
dashed
double
8. CSS Padding Property
Used for space inside the border.
Syntax
selector{
padding: value;
}
Example
<style>
div{
border: 1px solid black;
padding: 20px;
}
</style>
<div>Padding example</div>
Individual padding:
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
9. CSS Margin Property
Used for space outside the border.
Syntax
selector{
margin: value;
}
Example
<style>
div{
margin: 30px;
}
</style>
Individual margins:
margin-top
margin-right
margin-bottom
margin-left
10. CSS List Properties
Syntax
selector{
list-style-type: value;
}
Example
<style>
ul{
list-style-type: square;
}
</style>
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
</ul>
List properties:
Property Example
list-style-type square
Property Example
list-style-position inside
list-style-image url([Link])
11. CSS Position Property
Used to control element position.
Syntax
selector{
position: value;
}
Values:
static
relative
absolute
fixed
Example
<style>
.box{
position: relative;
left: 50px;
}
</style>
<div class="box">Move Right</div>
12. CSS Z-index Property
Used to control stack order.
Syntax
selector{
z-index: value;
}
Example
div{
position: absolute;
z-index: 1;
}
13. CSS Table Properties
Example:
<style>
table{
border-collapse: collapse;
width: 50%;
}
th,td{
border: 1px solid black;
padding: 10px;
text-align: center;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Rahul</td>
<td>20</td>
</tr>
</table>
Table properties:
border-collapse
width
height
text-align
padding
14. CSS Display Property
Syntax
selector{
display: value;
}
Values:
block
inline
inline-block
none
Example
span{
display: block;
}
15. CSS Width and Height
Syntax
selector{
width: value;
height: value;
}
Example
div{
width: 200px;
height: 100px;
background-color: lightblue;
}