Scribd
Upload
552 views14 pages

HTML Solved Practical 9TH Class 2023-2024

The document provides examples of HTML code for various basic elements like headings, paragraphs, lists, images, tables, frames and formatting tags. It also includes examples of adding attributes like borders, colors and hyperlinks.

Uploaded by

thenightmare123.99
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
552 views14 pages

HTML Solved Practical 9TH Class 2023-2024

The document provides examples of HTML code for various basic elements like headings, paragraphs, lists, images, tables, frames and formatting tags. It also includes examples of adding attributes like borders, colors and hyperlinks.

Uploaded by

thenightmare123.99
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

1/6.3.

1 write HTML code to: *


a. specify a page title
b. create a paragraph
c. insert line breaks
d. insert spaces
e. add headings/ sub-headings;
<!DOCTYPE html>
<html>
<head>
<title>My HTML Page</title>
</head>
<body>
<h1>Main Heading</h1>
<h2>Sub-heading</h2>
<p>This is a paragraph.</p>
<p>This is the first line.<br>This is the second line.</p>
<p>This&nbsp;&nbsp;&nbsp;has&nbsp;&nbsp;&nbsp;spaces.</p>
</body>
</html>
2/6.3.2 apply appropriate text formatting tags, i.e. bold, underline, italic, strikethrough, superscript,
subscript, center, font size, font color and font face;
<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title>
</head>
<body>
<h1>Text Formatting Example</h1>
<h2>Applying Various Text Formatting</h2>

<p>This is a <b>bold</b> text.</p>


<p>This is an <u>underlined</u> text.</p>
<p>This is an <i>italic</i> text.</p>
<p>This is a <strike>strikethrough</strike> text.</p>

<p>This is a <sup>superscript</sup> and this is a <sub>subscript</sub>.</p>

<p align="center">This text is centered.</p>

<p><font size="4">This text has a font size of 4.</font></p>


<p><font color="blue">This text is blue.</font></p>
<p><font face="Arial, sans-serif">This text is in Arial font.</font></p>
</body>
</html>
3/6.4.1 write HTML code to create: * a. ordered list b. unordered list c. definition list;
<!DOCTYPE html>
<html>
<head>
<title>List Examples</title>
</head>
<body>
<h1>List Examples</h1>

<h2>Ordered List:</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

<h2>Unordered List:</h2>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>

<h2>Definition List:</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JS</dt>
<dd>JavaScript</dd>
</dl>
</body>
</html>
4/6.5.1 write HTML code to: * a. insert an image b. apply border to an image;
<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body>
<h1>Image Example</h1>

<h2>Image with Border:</h2>


<img src="image.jpg" alt="Description of the image" style="border: 2px solid black;">
</body>
</html>
5/6.5.2 write HTML code to select: * a. width of an image b. height of an image c. an alternate text for an
image;
<!DOCTYPE html>
<html>
<head>
<title>Image Attributes Example</title>
</head>
<body>
<h1>Image Attributes Example</h1>

<h2>Image with Width and Height:</h2>


<img src="image.jpg" alt="This is an alternate text for the image" width="300" height="200">
</body>
</html>
6/6.5.3 write HTML code to: *
a. Apply background color to a web page
b. Apply foreground color to a web page
c. Assign a background image to the web page;
A)
<!DOCTYPE html>
<html>
<head>
<title>Background Color Example</title>
</head>
<body bgcolor="lightblue">
<h1>Background Color Example</h1>
<p>This is a web page with background color.</p>
</body>
</html>
B)
<!DOCTYPE html>
<html>
<head>
<title>Foreground Color Example</title>
</head>
<body text="red">
<h1>Foreground Color Example</h1>
<p>This is a web page with foreground color.</p>
</body>
</html>
C)
<!DOCTYPE html>
<html>
<head>
<title>Background Image Example</title>
</head>
<body style="background-image: url('background.jpg'); background-size: cover;">
<h1>Background Image Example</h1>
<p>This is a web page with a background image.</p>
</body>
</html>
7/6.6.1 write HTML code to create a hyperlink to a web page;
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<h1>Hyperlink Example</h1>
<a href="https://www.example.com">Visit Example</a>
</body>
</html>
8/6.6.2 create an ‘anchor’ in the context of hyperlinks;
<!DOCTYPE html>
<html>
<head>
<title>Anchor Example</title>
</head>
<body>
<h1>Anchor Example</h1>
<p><a name="section1"></a>Section 1</p>
<p>This is the content of section 1.</p>
<p><a href="#section1">Go to Section 1</a></p>
</body>
</html>
9/6.6.3 create an anchor to hyperlink within a web page;
<!DOCTYPE html>
<html>
<head>
<title>Anchor Hyperlink Example</title>
</head>
<body>
<h1>Anchor Hyperlink Example</h1>
<p><a href="#section2">Go to Section 2</a></p>

</body>
</html>
10/6.6.4 create a graphical hyperlink;
<!DOCTYPE html>
<html>
<head>
<title>Graphical Hyperlink Example</title>
</head>
<body>
<h1>Graphical Hyperlink Example</h1>
<a href="https://www.example.com"><img src="image.jpg" alt="Example Image"></a>
</body>
</html>
11/6.7.1 write HTML code to create a table in the webpage with the following table attributes: a. table
border b. border colour c. background colour d. table width e. table height f. table row g. standard cell h.
header cell ;
<!DOCTYPE html>
<html>
<head>
<title>Table Attributes Example</title>
</head>
<body>
<h1>Table Attributes Example</h1>

<table border="2" bordercolor="black" bgcolor="lightgray" width="400" height="200">


<caption>Sample Table</caption>
<tr>
<th>Header Cell 1</th>
<th>Header Cell 2</th>
<th>Header Cell 3</th>
</tr>
<tr>
<td>Standard Cell 1</td>
<td>Standard Cell 2</td>
<td>Standard Cell 3</td>
</tr>
<tr>
<td>Standard Cell 4</td>
<td>Standard Cell 5</td>
<td>Standard Cell 6</td>
</tr>
</table>

</body>
</html>
12/ 6.8.3 create a frameset with multiple frames.
<!DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="50%, 50%">
<frame src="frame1.html" name="topFrame">
<frameset cols="50%, 50%">
<frame src="frame2.html" name="leftFrame">
<frame src="frame3.html" name="rightFrame">
</frameset>
</frameset>
</html>

You might also like