EXPERIMENT-1: Lists, Links, and Images
a. Write a HTML program, to explain the working of lists.
Note: It should have an ordered list, unordered list, nested lists, and ordered list in an unordered list and definition lists.
b. Write a HTML program, to explain the working of hyperlinks using <a> tag and href, target attributes.
c. Create a HTML document that has your image and your friend’s image with a specific height and width. Also, when clicked on the images it should navigate to their respective profiles.
d. Write a HTML program, in such a way that, rather than placing large images on a page, the preferred technique is to use thumbnails by setting the height and wight parameters to something like 100×100 pixels. Each thumbnail image is also a link to a full sized version of the image. Create an image gallery using this technique.
a. Write a HTML program, to explain the working of lists.
PROCEDURE STEPS:
Step 1: Open the Visual Studio Code and create a HTML file named index.html file.
Step 2: Locate the HTML file in File Explorer.
Step 3: Open the HTML in a Web Browser.
SOURCE CODE
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 Lists Example</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
}
h2 {
color: #333;
}
</style>
</head>
<body>
<h1>Working with Lists in HTML</h1>
<!-- Ordered List -->
<h2>1. Ordered List</h2>
<ol>
<li>Introduction to HTML</li>
<li>Learning CSS</li>
<li>Mastering JavaScript</li>
</ol>
<!-- Unordered List -->
<h2>2. Unordered List</h2>
<ul>
<li>Fruits</li>
<li>Vegetables</li>
<li>Dairy Products</li>
</ul>
<!-- Nested Lists -->
<h2>3. Nested List</h2>
<ul>
<li>Programming Languages
<ul>
<li>Python</li>
<li>JavaScript</li>
<li>Java</li>
</ul>
</li>
<li>Web Technologies
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
</ul>
<!-- Ordered List inside Unordered List -->
<h2>4. Ordered List in an Unordered List</h2>
<ul>
<li>Frontend Development
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</li>
<li>Backend Development
<ol>
<li>Node.js</li>
<li>Python</li>
<li>Java</li>
</ol>
</li>
</ul>
<!-- Definition List -->
<h2>5. Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, used to structure web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, used to style web pages.</dd>
<dt>JavaScript</dt>
<dd>A programming language used to make web pages interactive.</dd>
</dl>
</body>
</html>OUTPUT
b. Write a HTML program, to explain the working of hyperlinks using <a> tag and href, target attributes.
PROCEDURE STEPS:
Step 1: Open the Visual Studio Code and create a HTML file named index_2.html file.
Step 2: Locate the HTML file in File Explorer.
Step 3: Open the HTML in a Web Browser.
SOURCE CODE
index_2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hyperlinks in HTML</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
}
h2 {
color: #333;
}
a {
color: #007BFF;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Working with Hyperlinks in HTML</h1>
<p>The <code><a></code> tag in HTML is used to create hyperlinks. The <code>href</code> attribute specifies the URL of the link, and the <code>target</code> attribute defines how the link opens.</p>
<h2>1. Basic Hyperlink</h2>
<p>
<a href="https://www.google.com">Visit Google</a>
</p>
<p>This link takes you to Google's homepage when clicked.</p>
<h2>2. Opening a Link in a New Tab</h2>
<p>
<a href="https://www.wikipedia.org" target="_blank">Visit Wikipedia</a>
</p>
<p>The <code>target="_blank"</code> attribute ensures the link opens in a new tab or window.</p>
<h2>3. Internal Link (Within the Same Page)</h2>
<p>
<a href="#section3">Go to Section 3</a>
</p>
<p>Clicking this link scrolls the page to a specific section with the ID "section3".</p>
<h2>4. Email Link</h2>
<p>
<a href="mailto:example@example.com">Send an Email</a>
</p>
<p>This link opens the user's default email client to send an email to "example@example.com".</p>
<h2>5. Phone Link</h2>
<p>
<a href="tel:+1234567890">Call +1234567890</a>
</p>
<p>On mobile devices, this link will prompt the user to make a call to the specified number.</p>
<h2 id="section3">6. Section 3 - Internal Navigation Target</h2>
<p>This is Section 3, which is the target of the internal link above.</p>
</body>
</html>OUTPUT
c. Create a HTML document that has your image and your friend’s image with a specific height and width. Also, when clicked on the images it should navigate to their respective profiles.
PROCEDURE STEPS:
Step 1: Open the Visual Studio Code and create three HTML files named index_3.html, my-profile.html, and friend-profile.html file.
Step 2: Place the images my-image.png, and friend-image.jpg in images folder, where the images folder is in the same path as that of html files.
Step 3: Locate the HTML file index-3.html in the File Explorer.
Step 4: Open the HTML file index-3.html in a Web Browser.
SOURCE CODE
index_3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Links</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
img {
border: 2px solid #333;
border-radius: 8px;
margin: 10px;
cursor: pointer;
}
img:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<h1>My Profile and My Friend's Profile</h1>
<!-- My Image -->
<a href="https://www.myprofile.com" target="_blank">
<img src="my-image.jpg" alt="My Image" width="200" height="200">
</a>
<p>Click on my image to view my profile.</p>
<!-- Friend's Image -->
<a href="https://www.friendsprofile.com" target="_blank">
<img src="friend-image.jpg" alt="Friend's Image" width="200" height="200">
</a>
<p>Click on my friend's image to view their profile.</p>
</body>
</html>
my-profile.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Profile</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
line-height: 1.6;
}
h1 {
color: #333;
}
table {
width: 50%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
th {
background-color: #f4f4f4;
}
</style>
</head>
<body>
<h1>My Profile</h1>
<table>
<tr>
<th>Name</th>
<td>Ramesh</td>
</tr>
<tr>
<th>Date of Birth</th>
<td>01 Jan 2000</td>
</tr>
<tr>
<th>Department</th>
<td>CSE</td>
</tr>
<tr>
<th>Class</th>
<td>3rd Year</td>
</tr>
<tr>
<th>Place</th>
<td>CHENNAI</td>
</tr>
<tr>
<th>Country</th>
<td>INDIA</td>
</tr>
<tr>
<th>Age</th>
<td>24</td>
</tr>
</table>
</body>
</html>friend-profile.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Friend's Profile</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
line-height: 1.6;
}
h1 {
color: #333;
}
table {
width: 50%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
th {
background-color: #f4f4f4;
}
</style>
</head>
<body>
<h1>Friend's Profile</h1>
<table>
<tr>
<th>Name</th>
<td>Arvind</td>
</tr>
<tr>
<th>Date of Birth</th>
<td>15 March 2001</td>
</tr>
<tr>
<th>Department</th>
<td>CSE</td>
</tr>
<tr>
<th>Class</th>
<td>2nd Year</td>
</tr>
<tr>
<th>Place</th>
<td>HYDERABAD</td>
</tr>
<tr>
<th>Country</th>
<td>INDIA</td>
</tr>
<tr>
<th>Age</th>
<td>23</td>
</tr>
</table>
</body>
</html>
OUTPUT
index-3.html
my-profile.html
friend-profile.html
d. Write a HTML program, in such a way that,
rather than placing large images on a page, the preferred technique is to use thumbnails by setting the height and wight parameters to something like 100×100 pixels. Each thumbnail image is also a link to a full sized version of the image. Create an image gallery using this technique.
PROCEDURE STEPS:
Step 1: Open the Visual Studio Code and create three HTML files named index_4.html.
Step 2: Place the thumbnail images and corresponding full-sized images in the images folder which is in the same path as that of html files.
Step 3: Locate the HTML file index_4.html in the File Explorer.
Step 4: Open the HTML file index_4.html in a Web Browser.
SOURCE CODE
index_4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
.gallery {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.gallery a img {
border: 1px solid #ccc;
border-radius: 5px;
width: 100px;
height: 100px;
object-fit: cover;
}
</style>
</head>
<body>
<h1>Image Gallery</h1>
<p>Click on a thumbnail to view the full-sized image.</p>
<div class="gallery">
<!-- Image 1 -->
<a href="images/full-size-image1.jpg" target="_blank">
<img src="images/thumbnail-image1.jpg" alt="Thumbnail 1">
</a>
<!-- Image 2 -->
<a href="images/full-size-image2.jpg" target="_blank">
<img src="images/thumbnail-image2.jpg" alt="Thumbnail 2">
</a>
<!-- Image 3 -->
<a href="images/full-size-image3.jpg" target="_blank">
<img src="images/thumbnail-image3.jpg" alt="Thumbnail 3">
</a>
<!-- Image 4 -->
<a href="images/full-size-image4.jpg" target="_blank">
<img src="images/thumbnail-image4.jpg" alt="Thumbnail 4">
</a>
</div>
</body>
</html>