HTML Solved Practical 9TH Class 2023-2024

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 has 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>
</tr>
<tr>
<td>Standard Cell 1</td>
</tr>
<tr>
</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>

HTML Solved Practical 9TH Class 2023-2024

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Solved Practical 9TH Class 2023-2024

Uploaded by

Copyright:

Available Formats

1/6.3.

1 write HTML code to: *

<p>This is a <b>bold</b> 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>

<h2>Image with Border:</h2>

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

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

You might also like