Program File On-
Web Designing using
HTML
Anurag Singh
PGDCA (Sem-1)
249467
S. No Program Discription
1 To write a program using Text Formatting Tags in HTML
2 To write a program using Heading Tags in HTML
3 To write a program using Paragraph Tag in HTML
4 To write a program using Unpaired Tags in HTML
5 To write a program using Font Tag in HTML
6 To write a program using Body Tag and its attributes in HTML
7 To write a program using Marquee Tag and its attributes in
HTML
8 To write a program using List Tag in HTML
9 To write a program using Ordered List Tag in HTML
10 To write a program using Unordered List Tag in HTML
11 To write a program using Nested List Tag in HTML
12 To write a program using Table Tag and its attributes in HTML
13 To write a program using Colspan attribute in Table with BG
Color in HTML
14 To write a program using Rowspan attribute in Table in HTML
15 To write a program using Cell Spacing attribute in Table in
HTML
16 To write a program using Cell Padding attribute in Table in
HTML
17 To write a program using External Linking Tag in HTML
18 To write a program using Internal Linking Tag in HTML
19 To write a program using IMG Source Tag in HTML
1. To write a program using Text Formatting Tags
<html>
<head>
<title>Text Formatting Tags</title>
</head>
<body>
<h1>Text Formatting Tags in HTML</h1>
<p><b>This text is bold.</b></p>
<p><i>This text is italic.</i></p>
<p><u>This text is underlined.</u></p>
<p><strong>This text is important (strong).</strong></p>
<p><small>This is small text.</small></p>
<p><del>This text is deleted.</del></p>
<p><strike>This text is striked.</strike></p>
<p>235<sub>This is subscript text.</sub></p>
<p>235<sup>This is superscript text.</sup></p>
</body>
</html>
Output :-
2. To write a program using Heading Tags in HTML
<html>
<head>
<title>Heading Tags from H1 to H6</title>
</head>
<body>
<h1>This is Heading 1 with Biggest appearance </h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6 with Smallest appearance </h6>
</body>
</html>
Output :-
3. To write a program using Paragraph Tag in HTML
<html>
<head>
<title>Paragraph Tag </title>
</head>
<body>
<h1>Paragraph Tag in HTML</h1>
<p>I Am Anurag and here I am using Paragraph tag. The paragraph tag is used to define blocks of text,
and it automatically adds some space before and after the paragraph.</p>
<p>This is the second line of Paragraph.</p>
<p>This is the third line of paragraph. Paragraph tags make it easy to separate text into readable
sections.</p>
</body>
</html>
Output :-
4. To write a program using Unpaired Tags in HTML
<html>
<head>
<title>Unpaired Tags </title>
</head>
<body>
<h1>Unpaired Tags in HTML</h1>
<p>This is an example of a line break tag and it is an sigular tag which means it only contains an
opening tag.<br>This text appears on a new line.</p>
<p>This is an example of a horizontal line:</p>
<hr>
</body>
</html>
Output :-
5. To write a program using Font Tag in HTML
<html>
<head>
<title>Font Tag </title>
</head>
<body>
<h1>Using the Font Tag in HTML</h1>
<p><font color="red">This text will appear red in color.</font></p>
<p><font size="5">This text appear larger (size 5).</font></p>
<p><font face="Arial">This text is displayed in the Arial font.</font></p>
<p><font color="blue" size="4" face="Times New Roman">This text is blue, size 4, and in Times New
Roman font.</font></p>
</body>
</html>
Output :-
6. To write a program using Body Tag and its attributes in HTML
<html>
<head>
<title>Body Tag and its attributes </title>
</head>
<body bgcolor="#f0f8ff" text="#000080" link="#ff4500" vlink="#8b008b" alink="#ff6347">
<h1>Using the Body Tag and Its Attributes</h1>
<p>This program demonstrates various attributes of the body tag.</p>
<p> The <b>bgcolor</b> attribute sets the background color of the page (light blue here).</p>
<p> The <b>text</b> attribute sets the color of the text.</p>
<p> The <b>link</b> attribute sets the color of unvisited links.</p>
<p> The <b>vlink</b> attribute sets the color of visited links.</p>
<p> The <b>alink</b> attribute sets the color of active links when clicked.</p>
<p>Here is an example of a <a href="https://www.Anurag.com">link</a> to test the link colors.</p>
</body>
</html>
Output :-
7. To write a program using Marquee Tag and its attributes in HTML
<html>
<head>
<title>Marquee Tag </title>
</head>
<body>
<h1>Using the Marquee Tag and Its Attributes</h1>
<marquee>Welcome to the HTML Tutorial.com</marquee>
<marquee direction="right" bgcolor="#f0e68c" style="color:blue;">This text moves from left to
right.</marquee>
<marquee direction="up" scrollamount="2" height="100">This text scrolls upward.</marquee>
<marquee direction="down" scrollamount="10" height="100" bgcolor="#dcdcdc">This text scrolls
downward quickly.</marquee>
<marquee behavior="alternate" width="50%">This text will move in alternate direction.</marquee>
<marquee loop="3">This text will scroll 3 times and then stop.</marquee>
</body>
</html>
Output :-
8. To write a program using List Tag in HTML
<html>
<head>
<title>List Tags </title>
</head>
<body>
<h1>Using List Tags in HTML</h1>
<h2>Unordered List</h2>
<ul>
<li>Anurag</li>
<li>Gurleen</li>
<li>Honey</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>First </li>
<li>Second </li>
<li>Third </li>
</ol>
<h2>Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
</body>
</html>
Output :-
9. To write a program using Ordered List Tag in HTML
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<h1>Ordered List</h1>
<h2>PGDCA Students Detail</h2>
<ol>
<li>Anurag</li>
<li>Gurleen</li>
<li>Sukhjinder</li>
</ol>
<h2>Detail Starting from no. 4</h2>
<ol start="4">
<li>Raman</li>
<li>Jot</li>
</ol>
</body>
</html>
Output :-
10. To write a program using Unordered List Tag in HTML
<html>
<head>
<title>Unordered List </title>
</head>
<body>
<h1>PGDCA Students Name</h1>
<ul type="Square">
<li>Anurag</li>
<li>Gurleen</li>
<li>Sukh</li>
</ul>
</body>
</html>
Output :-
11. To write a program using Nested List Tag in HTML
<html>
<head>
<title>Nested List</title>
</head>
<body>
<h1>Nested List</h1>
<ul>
<li>Anurag</li>
<li>Gurleen</li>
</ul>
<ul>
<li>PGDCA</li>
</ul>
<ol>
<li>249467</li>
<li>249466</li>
</ol>
</body>
</html>
Output :-
12. To write a program using Table Tag and its attributes in HTML
<html>
<head>
<title>To Create a Table </title>
</head>
<body>
<h1>HTML Table</h1>
<table border="1" cellpadding="15" cellspacing="0">
<caption>PGDCA Students 24-25</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td bgcolor="blue">Anurag</td>
<td>24</td>
<td>FGS</td>
</tr>
<tr>
<td bgcolor="green">Gurleen</td>
<td>22</td>
<td>Ludhiana</td>
</tr>
<tr>
<td bgColor="red">Sukh</td>
<td>26</td>
<td>Fazilka</td>
</tr>
</table>
</body>
</html>
Output :-
13. To write a program using Colspan attribute in Table with BG Color
in HTML
<html>
<head>
<title>Table with Colspan attribute</title>
</head>
<body>
<h1>Creating table using Colspan</h1>
<table border="1" bgcolor="#f0f8ff">
<tr>
<th colspan="2">Student Information</th>
</tr>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>Anurag</td>
<td>20</td>
</tr>
<tr>
<td>Guri</td>
<td colspan="2">25</td>
</tr>
</table>
</body>
</html>
Output :-
14. To write a program using Rowspan attribute in Table in HTML
<html>
<head>
<title>Rowspan </title>
</head>
<body>
<h1>Table with Rowspan</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Anurag</td>
<td>22</td>
<td>Sirhind</td>
</tr>
<tr>
<td rowspan="2">Gur</td>
<td>25</td>
<td>Lopon</td>
</tr>
<tr>
<td>26</td>
<td>Sirhind</td>
</tr>
</table>
</body>
</html>
Output :-
15. To write a program using Cell Spacing attribute in Table in HTML
<html>
<head>
<title>Table with Cellspacing Example</title>
</head>
<body>
<h1>Table with Cellspacing</h1>
<table border="1" cellspacing="10">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Anu</td>
<td>24</td>
<td>Sirhind</td>
</tr>
<tr>
<td>Sukh</td>
<td>26</td>
<td>Fazilka</td>
</tr>
</table>
</body>
</html>
Output :-
16. To write a program using Cell Padding attribute in Table in HTML
<html>
<head>
<title>Table with Cellpadding Example</title>
</head>
<body>
<h1>Table with Cellpadding</h1>
<table border="1" cellpadding="15">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Anu</td>
<td>24</td>
<td>Sirhind</td>
</tr>
<tr>
<td>Sukh</td>
<td>26</td>
<td>Fazilka</td>
</tr>
</table>
</body>
</html>
Output :-
17. To write a program using External Linking Tag in HTML
<html>
<head>
<title>External Linking</title>
</head>
<body>
<h1>External Link</h1>
<p>Click the link below to visit an external website:</p>
<a href="https://www.youtube.com">Click Here </a>
</body>
</html>
Output :-
18. To write a program using Internal Linking Tag in HTML
<html>
<head>
<title>Internal Linking Example</title>
</head>
<body>
<h1>Internal Linking</h1>
<p><a href="#section1">Go to Section 1</a></p>
<p><a href="#section2">Go to Section 2</a></p>
<h2 id="section1">Section 1</h2>
<p>This is the first section of the document.</p>
<h2 id="section2">Section 2</h2>
<p>This is the second section of the document.</p>
</body>
</html>
Output :-
19. To write a program using IMG Source Tag in HTML
<html>
<head>
<title>Image Source Tag</title>
</head>
<body>
<h1>Image Displayed</h1>
<img src="https://www.mansory.com/sites/default/files/styles/1170_x_full_box_image/public/2023-
09/image00001.jpg?itok=A-FTMhY7"alt="any error" width="600" height="300">
</body>
</html>
Output :-
