Scribd
Upload
19 views11 pages

Web Tech Ex 1-1

1. The document describes a procedure to design an HTML page using framesets to illustrate basic HTML tags like tables, lists, headings, and more. 2. The page is created using multiple HTML files linked together within frames to display tag descriptions, usages, and examples. 3. The final output is an HTML page with frames displaying information on various basic HTML tags like tables, lists, headings, images, and horizontal rules.

Uploaded by

dummy.athik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views11 pages

Web Tech Ex 1-1

1. The document describes a procedure to design an HTML page using framesets to illustrate basic HTML tags like tables, lists, headings, and more. 2. The page is created using multiple HTML files linked together within frames to display tag descriptions, usages, and examples. 3. The final output is an HTML page with frames displaying information on various basic HTML tags like tables, lists, headings, images, and horizontal rules.

Uploaded by

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

EX.

NO : 1 BASIC HTML TAGS


DATE :

AIM:
To design an html page to illustrate the use of basic html tags like tables, lists, heading tags,
etc., using frameset.

PROCEDURE:

Step 1 : Open VIsual Studio Code.

Step 2 : Create a file named ‘index.html’ and use frameset tag to set up the page as
described.

Step 3 : Create links to other html files using anchor tag.

Step 4 : Write various html files which depict the description and usage of essential html
tags.

Step 5 : Link these files so that the tag list, description and usages are displayed in
various frames.

Step 6 : Test the program by running it in a Web browser.

PROGRAM:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML TAGS</title>
</head>

<frameset rows="20,80">
<frame src="header.html"></frame>
<frameset cols="50,50">
OUTPUT:
<frame name="frame1"></frame>
<frame name="frame2"></frame>
</frameset>
</frameset>

</html>

header.html:

<body>
<h1>Basic HTML TAGS</h1>
<a href="tableDesc.html" target="frame1">TABLE</a>
<a href="listDesc.html" target="frame1">LIST</a>
<a href="headingTagsDesc.html" target="frame1">HEADING TAGS</a>
<a href="hrDesc.html" target="frame1">HORIZONTAL RULE</a>
<a href="imgDesc.html" target="frame1">IMAGE TAG</a>
</body>

tableDesc.html;

<body>
<h3>Table</h3>
<pre>
The &lttable&gt tag defines an HTML table.

An HTML table consists of one &lttable&gt element and one or more other elements.

This tag is used to create an Html table.


</pre>
<a href="tableCode.html" target="frame2">Example</a>
</body>

tableCode.html:

<body>
<table border="1">
<tr>
<th rowspan="2">S.NO</th>
<th colspan="2">Name</th>
<th rowspan="2">Age</th>
<th rowspan="2">Preference</th>
</tr>
<tr>
<th>Initial</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>R</td>
<td>Venkatesh</td>
<td>19</td>
<td rowspan="2">Vennila</td>
</tr>

<tr>
<td>1</td>
<td>R</td>
<td>Venkatesh</td>
<td>19</td>
</tr>
<tr>
<td>1</td>
<td>R</td>
<td>Venkatesh</td>
<td>19</td>
<td>Chocolate</td>
</tr>
</table>
</body>

listDesc.html:

<body>
<h3>List</h3>
<p>
Three types of Lists:
<ol>
<li><a href="ol.html" target="frame2">Ordered List</a></li>
<li><a href="ul.html" target="frame2">UnOrdered List</a></li>
<li><a href="dl.html" target="frame2">Decription List</a></li>
</ol>
</p>
</body>

ol.html:

<body>
<h3>Directions</h3>
<ol>
<li>North</li>
<li>South</li>
<li>East</li>
<li>West</li>
</ol>
</body>

ul.html:

<body>
<h3>Fruits</h3>
<ul>
<li>Mango</li>
<li>Orange</li>
<li>Apple</li>
<li>Banana</li>
<li>Jack Fruit</li>
</ul>
</body>

dl.html:

<body>
<h3>CSE CORE SUBJECTS</h3>
<dl>
<dt>OS</dt>
<dd>Operating System</dd>
<dt>DBMS</dt>
<dd>Data Base Management System</dd>
<dt>CN</dt>
<dd>Computer Networks</dd>
<dt>COA</dt>
<dd>Computer Organisation and Architecture</dd>
</dl>
</body>

headingTagsDesc.html:

<body>
<h3>Heading Tags</h3>
<p>HTML headings are titles or subtitles that you want to display on a webpage.</p>
<a href="headingTagsEx.html" target="frame2">Example</a>
</body>

headingTagsEx.html:

<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>

hrDesc.html:

<body>
<h3>HR Tag</h3>
<p>The &lthr&gt Tag is used to display an horizontal rule in the html page.</p>
<a href="hrEx.html" target="frame2">Example</a>
</body>

hrEx.html:

<body>
<h3>Collection of Paragraphs</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, hic? Iure debitis nostrum
ullam expedita, provident odio quidem adipisci! Voluptatum corporis nisi rem quisquam hic velit,
asperiores sunt omnis modi?</p>
<hr>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non optio veritatis assumenda magni
tempora, placeat, ratione incidunt molestiae praesentium cumque dolore repudiandae fugiat laborum.
At provident expedita ipsa veritatis nam!</p>
<hr>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores, pariatur neque hic
repudiandae est quibusdam corporis alias ea vitae nihil minima ab autem architecto incidunt magnam
non saepe tenetur unde?</p>
<hr>
</body>

imgDesc.html:

<body>
<h3>Image Tag</h3>
<p>&ltimg&gt Tag is used to display an image in a HTML page.</p>
<a href="imgEx.html" target="frame2">Example</a>
</body>

imgEx.html:

<body>
<h3>Moon behind a Tree</h3>
<img src="moon.jpg" height="200px" width="200px">
</body>

RESULT:
Thus the html page to illustrate the use of basic html tags like table and list using frameset has
been designed and executed successfully and the output was verified.

You might also like