CSA 6004P: INTERNET TECHNOLOGY LABORATORY
PRACTICAL FILE
--------------------------------------------------
1. Basic HTML Elements
Objective:
Design a document using fundamental structural elements including <HTML>, <body>,
<head>, <title>, <br>, and <hr>.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Elements Lab</title>
</head>
<body>
<h1>Welcome to the Internet Technology Lab</h1>
<p>
This document demonstrates the use of basic HTML tags.
</p>
<hr>
<p>
This text is on the first line.<br>
This text is on the second line after a break.
</p>
</body>
</html>
Output:
2. Text Formatting Tags
Objective:
Design a document demonstrating text formatting tags: center, sup, em, ins, sub, font, and
heading tags h1 through h6.
Code:
<html>
<head>
<title>Formatting Tags</title>
</head>
<body>
<center>
<h1>This Heading is Centered</h1>
</center>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<hr>
<p>This is <em>emphasized (italic)</em> text.</p>
<p>This is <ins>inserted (underlined)</ins> text.</p>
<p>Mathematical Formula: (a + b)<sup>2</sup> = a<sup>2</sup> + 2ab +
b<sup>2</sup></p>
<p>Chemical Formula: H<sub>2</sub>SO<sub>4</sub></p>
<p>
<font face="Verdana" size="4" color="red">
This text uses a specific font face, size, and color.
</font>
</p>
</body>
</html>
Output:
3. Computer Output Tags
Objective:
Demonstrate computer output tags: code, kbd, samp, tt, var, pre, listing, and xmp.
Code:
<html>
<head>
<title>Computer Output Tags</title>
</head>
<body>
<h2>Computer Output Demonstration</h2>
<p>Source Code: <code>printf("Hello World");</code></p>
<p>Keyboard Input: Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<p>Sample Output: <samp>File not found.</samp></p>
<p>Teletype Text: <tt>This looks like a typewriter.</tt></p>
<p>Variable: Let <var>x</var> = <var>y</var> + 10.</p>
<p>Preformatted Text:</p>
<pre>
Line 1 (preserved spacing)
Line 2
</pre>
<p>Listing Tag (Deprecated):</p>
<listing>
while(i < 10) {
print(i);
}
</listing>
<p>XMP Tag (Example):</p>
<xmp>
The <xmp> tag renders HTML tags as text. <b>This isn't bold.</b>
</xmp>
</body>
</html>
Output:
4. Semantic Tags and Entities
Objective:
To demonstrate the use of quotation, abbreviation, and directional tags, along with the
correct implementation of character entities for reserved symbols.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Semantic Tags & Entities</title>
</head>
<body>
<h2>1. Semantic Tags Demonstration</h2>
<p>The <abbr title="HyperText Markup Language">HTML</abbr> is easy
to learn.</p>
<p>The <acronym title="National Aeronautics and Space
Administration">NASA</acronym> explores space.</p>
<blockquote cite="[Link]
For 60 years, WWF has worked to help people and nature thrive.
As the world's leading conservation organization, WWF works in nearly
100 countries.
</blockquote>
<address>
Written by John Doe<br>
Visit us at: [Link]<br>
Box 564, Disneyland<br>
USA
</address>
<p>Normal Text: This is left-to-right.</p>
<p>BDO Text (RTL): <bdo dir="rtl">This text will be
mirrored.</bdo></p>
<hr>
<h2>2. Character Entities Demonstration</h2>
<p><b>Non-breaking space:</b> There are five spaces between here
and here.</p>
<p><b>Less than symbol:</b> 5 < 10</p>
<p><b>Greater than symbol:</b> 10 > 5</p>
<p><b>Ampersand symbol:</b> Tom & Jerry</p>
<p><b>Quotation marks:</b> The teacher said, "Complete your lab
file."</p>
</body>
</html>
Output:
5. Hyperlinks
Objective:
Demonstrate how to create a basic hypertext link in an HTML document using the href
attribute.
Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Link Demonstration</title>
</head>
<body>
<h2>Creating a Basic Link</h2>
<p>Click the link below to visit a website:</p>
<a href="[Link] Wikipedia</a>
</body>
</html>
Output:
The browser renders the text 'Visit Wikipedia' as a clickable blue, underlined string.
Clicking it navigates the browser to the Wikipedia URL.
6. Image as a Link
Objective:
Demonstrate how to wrap an image element within an anchor tag to create a clickable
image link.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Image Link Demo</title>
</head>
<body>
<h2>Using an Image as a Link</h2>
<p>Click the logo below to go to the homepage:</p>
<a href="[Link]
<img
src="[Link]
or_272x92dp.png"
alt="Google Logo"
style="width:200px; border:0;">
</a>
</body>
</html>
Output:
The Google logo image is displayed. Clicking the image redirects the user to the Google
homepage.
7. Link in New Window
Objective:
Demonstrate the use of the target='_blank' attribute to open a link in a new tab.
Code:
<!DOCTYPE html>
<html>
<head>
<title>New Window Link Demo</title>
</head>
<body>
<h2>Opening a Link in a New Window</h2>
<p>The link below will open in a new tab/window:</p>
<a href="[Link] target="_blank">Open Google in New
Tab</a>
</body>
</html>
Output:
When clicked, the current page remains open, and a new browser tab/window opens
displaying the target website.
8. Internal Links (Bookmarks)
Objective:
Demonstrate page navigation using element IDs and the # symbol.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Internal Link Demo</title>
</head>
<body>
<h2 id="top">Internal Document Navigation</h2>
<p>Click below to jump to the footer of this page:</p>
<a href="#footer">Jump to Footer</a>
<div style="height: 600px; background-color: #f0f0f0; margin: 20px
0; padding: 10px;">
<p>(Scroll down or click the link above to skip this
section...)</p>
</div>
<h3 id="footer">Footer Section</h3>
<p>You have successfully jumped to the bottom of the document!</p>
<a href="#top">Back to Top</a>
</body>
</html>
Output:
Clicking 'Jump to Footer' scrolls the browser automatically down to the footer section of the
same page.
9. Framesets (Vertical & Horizontal)
Objective:
Demonstrate <frameset> and <frame> tags to divide the window into three sections.
To make this work, we need a "Master" file (the Frameset) and three individual content
files:
[Link]: Content for the first frame.
<html>
<body bgcolor="#FFD1DC">
<h1>Page 1</h1>
<p>This is the first content document.</p>
</body>
</html>
[Link]: Content for the second frame.
<html>
<body bgcolor="#D1FFD1">
<h1>Page 2</h1>
<p>This is the second content document.</p>
</body>
</html>
[Link]: Content for the third frame.
<html>
<body bgcolor="#D1D1FF">
<h1>Page 3</h1>
<p>This is the third content document.</p>
</body>
</html>
A. Vertical Frameset (Columns)
Code:
<!DOCTYPE html>
<html>
<head>
<title>Vertical Frameset Lab</title>
</head>
<frameset cols="33%, 33%, 34%">
<frame src="[Link]" name="left">
<frame src="[Link]" name="center">
<frame src="[Link]" name="right">
<noframes>
<body>Your browser does not support framesets.</body>
</noframes>
</frameset>
</html>
Output:
B. Horizontal Frameset (Rows)
Code:
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Frameset Lab</title>
</head>
<frameset rows="20%, 60%, 20%">
<frame src="[Link]" name="top">
<frame src="[Link]" name="middle">
<frame src="[Link]" name="bottom">
<noframes>
<body>Your browser does not support framesets.</body>
</noframes>
</frameset>
</html>
Output:
10. Non-Resizable Frames
Objective:
Demonstrate the noresize attribute to lock frame dimensions.
[Link]
<html>
<body bgcolor="#f4f4f4">
<h3>Sidebar</h3>
<p>This frame is locked at 200 pixels.</p>
</body>
</html>
[Link]
<html>
<body>
<h1>Main Content Area</h1>
<p>Try to hover over the border on the left. You will notice you cannot click and drag it to
resize the window.</p>
</body>
</html>
Code:
<!DOCTYPE html>
<html>
<head>
<title>Fixed Frame (No Resize) Demonstration</title>
</head>
<frameset cols="200, *">
<frame src="[Link]" name="sidemenu" noresize="noresize">
<frame src="[Link]" name="content">
<noframes>
<body>
<h2>Frames Not Supported</h2>
<p>Your browser does not support the frameset element.
Please update your browser.</p>
</body>
</noframes>
</frameset>
</html>
Output:
The border between frames becomes fixed. Users cannot drag the divider to resize the
frames.
11. Navigation Frame
Objective:
Demonstrate using one frame as a menu to target and update content in a second frame.
[Link]
<html>
<body>
<h1>Introduction</h1>
<p>Welcome to the Introduction page. This content loaded into the
target frame.</p>
</body>
</html>
[Link]
<html>
<body>
<h1>Lab Details</h1>
<p>This page contains all the technical details for CSA 6004P.</p>
</body>
</html>
[Link]
<html>
<body style="text-align:center; padding-top:50px;">
<h1>Welcome!</h1>
<p>Please select a link from the menu on the left to begin.</p>
</body>
</html>
[Link]
<html>
<body bgcolor="#eeeeee">
<h3>Navigation</h3>
<ul>
<li><a href="[Link]"
target="main_display">Introduction</a></li>
<li><a href="[Link]" target="main_display">Lab
Details</a></li>
<li><a href="[Link]" target="main_display">Home</a></li>
</ul>
</body>
</html>
Code:
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Navigation Frame System</title>
</head>
<frameset cols="20%, 80%">
<frame src="[Link]" name="nav_frame">
<frame src="[Link]" name="main_display">
<noframes>
<body>Your browser doesn't support frames.</body>
</noframes>
</frameset>
</html>
Output:
Clicking a link in the left menu frame updates the content displayed in the larger right
frame.
12. Table Backgrounds and Colors
Objective:
Demonstrate bgcolor and background attributes at table and cell levels.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Table Background Lab</title>
</head>
<body>
<h2>1. Table with Colored Background</h2>
<table border="1" bgcolor="lightblue" width="400" height="100">
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<hr>
<h2>2. Table with Image Background</h2>
<table border="1"
background="[Link]
width="400" height="100">
<tr>
<td>Content Over Image</td>
<td>Content Over Image</td>
</tr>
</table>
<hr>
<h2>3. Colored Background Cell & Image in One Cell</h2>
<table border="1" width="400" height="100">
<tr>
<td bgcolor="yellow">This cell is Yellow</td>
<td
background="[Link]
Image in this cell only
</td>
</tr>
</table>
</body>
</html>
Output:
Tables are displayed with colored backgrounds, specific cells with different colors, and one
cell featuring a background image.