Chapter: 3 (Continue)
1. Inline CSS
Inline CSS is written inside the HTML tag using the style attribute.
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue;">This is Inline CSS</h1>
<p style="color: red; font-size: 18px;">This paragraph uses inline style.</p>
</body>
</html>
2. Internal CSS
Internal CSS is written inside the <style> tag in the <head> section.
<html>
<head>
<title>Internal CSS Example</title>
<style>
h1 {
color: green;
text-align: center;
p{
color: purple;
font-size: 18px;
</style>
</head>
<body>
<h1>This is Internal CSS</h1>
<p>This paragraph is styled using internal CSS.</p>
</body>
</html>
3. External CSS
External CSS is written in a separate .css file and linked to HTML.
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is External CSS</h1>
<p>This paragraph uses external stylesheet.</p>
</body>
</html>
Chapter: 4
CSS Attributes and Background
1. Write an example to show case the use of css style attributes?
Chapter: 5
Inserting Images
Here is a simple HTML code demonstrating the use of the <img> tag.
<html>
<head>
<title>Image Tag Example</title>
</head>
<body>
<h2>Example of Image Tag in HTML</h2>
<img src="[Link]" alt="Beautiful Nature" width="400" height="300">
<p>This image is displayed using the HTML img tag.</p>
</body>
</html>
Chapter 6
Table
<html>
<head>
<title>HTML Table Example</title>
</head>
<body>
<h2>Student Information Table</h2>
<table border="1px">
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Ram</td>
<td>101</td>
<td>Math</td>
<td>85</td>
</tr>
<tr>
<td>Sita</td>
<td>102</td>
<td>Science</td>
<td>90</td>
</tr>
<tr>
<td>Hari</td>
<td>103</td>
<td>English</td>
<td>88</td>
</tr>
</table>
</body>
</html>
Output
Name Roll No Subject Marks
Ram 101 Math 85
Sita 102 Science 90
Hari 103 English 88
Chapter: 7
Hyperlinks
What is a Hyperlink?
A hyperlink is a link that connects one webpage to another webpage, file, or location on the internet.
When a user clicks the hyperlink, it opens the linked page or resource.
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<h2>Example of Hyperlink</h2>
<p>Click the link below to visit Google:</p>
<a href="[Link] Google</a>
</body>
</html>
Chapter: 8
List
1. Ordered List (Numbered List)
<html>
<head>
<title>Ordered List Example</title>
</head>
<body>
<h2>Ordered List of Subjects</h2>
<ol>
<li>Mathematics</li>
<li>Science</li>
<li>Computer</li>
<li>English</li>
</ol>
</body>
</html>
2. Unordered List (Bulleted List)
<!DOCTYPE html>
<html>
<head>
<title>Unordered List Example</title>
</head>
<body>
<h2>Unordered List of Fruits</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Orange</li>
</ul>
</body>
</html>
3. Definition List
<html>
<head>
<title>Definition List Example</title>
</head>
<body>
<h2>Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language used to create web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets used for styling web pages.</dd>
<dt>JavaScript</dt>
<dd>A scripting language used to make web pages interactive.</dd>
</dl>
</body>
</html>
Chapter 9: Layouts in Html
<html>
<body>
<header>
<h1>Awards in India</h1>
</header>
<nav>
Bharat Ratna <br>
Padma Bhusan<br>
</nav>
<section>
<h1>Bharat Ratna</h1>
<p>It is the highest civilian</p>
</section>
<footer>
Contact: 9868891415
</footer>
</body>
</html>
Revision Questions
1. Write a html code to showcase the use of img tag.
2. Write short notes on style attributes:
a. Color
b. text-align
c. font-family
d. font-size
e. font-weight
f. margin-top
g. margin-bottom
h. margin-right
i. margin-left
j. float
3. Write a html code to show the use of inline, internal, external and inline css.
4. Write an example to show case the use of css style attributes?
5. Write a html code to show the use of table tag.
6. Write a html code to show the use of hyperlink.
7. Write a html code to show the use of ordered, unordered and definition list.
8. Write a html code to show the use of layouts in html.
Syllabus
Chapter 1 – 9
1. Choose the correct answer (10)
2. Identify the attributes (5)
3. Match the following (5)
4. Short questions (10)
5. Programs(20)