Scribd
Upload
8 views15 pages

F 1 Aex

The document provides several HTML programs demonstrating the use of lists, hyperlinks, image profiles, and an image gallery. Each section includes code examples and explanations of ordered lists, unordered lists, nested lists, definition lists, and hyperlink functionalities. The final program showcases an image gallery using thumbnails that link to full-sized images.

Uploaded by

Praveena
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
8 views15 pages

F 1 Aex

The document provides several HTML programs demonstrating the use of lists, hyperlinks, image profiles, and an image gallery. Each section includes code examples and explanations of ordered lists, unordered lists, nested lists, definition lists, and hyperlink functionalities. The final program showcases an image gallery using thumbnails that link to full-sized images.

Uploaded by

Praveena
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/ 15

DATE: EXP NO: PAGE NO:

AIM:WriteaHTMLprogram,toexplaintheworkingoflists.
Note:Itshouldhaveanorderedlist,unorderedlist,nestedlistsandorderedlistinan
unordered List and definition lists
PROGRAM:
<!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>Understanding HTML Structure</li>
<li>Styling with CSS</li>
<li>Building Interactive Features with JavaScript</li>
</ol>

<!-- Unordered List -->


<h2>2. Unordered List</h2>
<ul>
<li>Grains</li>
<li>Proteins</li>
<li>Snacks</li>
</ul>

<!-- Nested Lists -->

FULL STACK DEVELOPMENT-1 CSE DEPARTMENT


DATE: EXP NO: PAGE NO:

<h2>3. Nested List</h2>


<ul>
<li>Operating Systems
<ul>
<li>Windows</li>
<li>macOS</li>
<li>Linux</li>
</ul>
</li>
<li>Mobile Technologies
<ul>
<li>Android</li>
<li>iOS</li>
<li>Flutter</li>
</ul>
</li>
</ul>

<!-- Ordered List inside Unordered List -->


<h2>4. Ordered List in an Unordered List</h2>
<ul>
<li>Data Science
<ol>
<li>Data Collection</li>
<li>Data Cleaning</li>
<li>Data Visualization</li>
</ol>
</li>
<li>Machine Learning
<ol>
<li>Supervised Learning</li>
<li>Unsupervised Learning</li>
<li>Reinforcement Learning</li>
</ol>
</li>
</ul>

<!-- Definition List -->


<h2>5. Definition List</h2>
<dl>
<dt>HTML</dt>

FULL STACK DEVELOPMENT-1 CSE DEPARTMENT


DATE: EXP NO: PAGE NO:

<dd>HyperText Markup Language, the standard markup language for creating web
pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, a style sheet language used for describing the
presentation of a document written in HTML.</dd>
<dt>JavaScript</dt>
<dd>A high-level, dynamic, untyped, and interpreted programming language,
commonly used for web development.</dd>
</dl>

</body>
</html>
OUTPUT:

Working with Lists in HTML


1. Ordered List
1. Understanding HTML Structure
2. Styling with CSS
3. Building Interactive Features with JavaScript

2. Unordered List
 Grains
 Proteins
 Snacks

3. Nested List
 Operating Systems
o Windows
o macOS
o Linux
 Mobile Technologies
o Android
o iOS
o Flutter

4. Ordered List in an Unordered List


 Data Science
1. Data Collection

FULL STACK DEVELOPMENT-1 CSE DEPARTMENT


DATE: EXP NO: PAGE NO:

2. Data Cleaning
3. Data Visualization
 Machine Learning
1. Supervised Learning
2. Unsupervised Learning
3. Reinforcement Learning

5. Definition List
HTML
HyperText Markup Language, the standard markup language for
creating web pages.
CSS
Cascading Style Sheets, a style sheet language used for describing the
presentation of a document written in HTML.
JavaScript
A high-level, dynamic, untyped, and interpreted programming language,
commonly used for web development.

RESULT:
Hence the program for to explain the working of lists was executed successfully.

FULL STACK DEVELOPMENT-1 CSE DEPARTMENT


DATE: EXP NO: PAGE NO:

AIM:
Write a HTML program, to explain the working of hyperlinks using <a> tag and href,
target Attributes.
PROGRAM:
<!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>&lt;a&gt;</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.bing.com">Visit Bing</a>
</p>
<p>This link takes you to Bing's homepage when clicked.</p>

FULL STACK DEVELOPMENT-1 CSE DEPARTMENT


DATE: EXP NO: PAGE NO:

<h2>2. Opening a Link in a New Tab</h2>


<p>
<a href="https://www.github.com" target="_blank">Visit GitHub</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="#section4">Go to Section 4</a>
</p>
<p>Clicking this link scrolls the page to a specific section with the ID "section4".</p>

<h2>4. Email Link</h2>


<p>
<a href="mailto:[email protected]">Send an Email</a>
</p>
<p>This link opens the user's default email client to send an email to
"[email protected]".</p>

<h2>5. Phone Link</h2>


<p>
<a href="tel:+19876543210">Call +1 (987) 654-3210</a>
</p>
<p>On mobile devices, this link will prompt the user to make a call to the specified
number.</p>

<h2 id="section4">6. Section 4 - Internal Navigation Target</h2>


<p>This is Section 4, which is the target of the internal link above.</p>
</body>
</html>
OUTPUT:

Working with Hyperlinks in HTML


The <a> tag in HTML is used to create hyperlinks. The href attribute specifies
the URL of the link, and the target attribute defines how the link opens.

1. Basic Hyperlink
Visit Bing

FULL STACK DEVELOPMENT-1 CSE DEPARTMENT


DATE: EXP NO: PAGE NO:

This link takes you to Bing's homepage when clicked.

2. Opening a Link in a New Tab


Visit GitHub

The target="_blank" attribute ensures the link opens in a new tab or window.

3. Internal Link (Within the Same Page)


Go to Section 4

Clicking this link scrolls the page to a specific section with the ID "section4".

4. Email Link
Send an Email

This link opens the user's default email client to send an email to
"[email protected]".

5. Phone Link
Call +1 (987) 654-3210

On mobile devices, this link will prompt the user to make a call to the specified
number.

6. Section 4 - Internal Navigation Target


This is Section 4, which is the target of the internal link above.

RESULT:
Hence the html program to explain the working of hyperlinks using <a> tag and href,
target Attributes was executed successfully.

FULL STACK DEVELOPMENT-1 CSE DEPARTMENT


DATE: EXP NO: PAGE NO:

AIM:
To 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.
PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Profile Links</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.profile-image {
margin: 20px;
border-radius: 10px;
transition: transform 0.2s;
}
.profile-image:hover {
transform: scale(1.05);
}
</style>
</head>
<body>

<a href="https://your-profile-link.com" target="_blank">


<img
src="https://i.pinimg.com/originals/f3/8d/bc/f38dbcbab1e30643e05f5b9caa8aaa39.jpg
" alt="your name" class="profile-image" width="200" height="200">
</a>
<p>Click on my image to view my profile.</p>
<a href="https://friends-profile-link.com" target="_blank">
<img
src="https://th.bing.com/th/id/OIP.6zS7OIn9dZNzbStbFT_xyQAAAA?w=417&h=626&rs=
1&pid=ImgDetMain" alt="Friend's Name" class="profile-image" width="200"
height="200">

FULL STACK DEVELOPMENT-1 CSE DEPARTMENT


DATE: EXP NO: PAGE NO:

</a>
<p>Click on my image to view friends 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>

FULL STACK DEVELOPMENT-1 CSE DEPARTMENT


DATE: EXP NO: PAGE NO:

</tr>
<tr>
<th>Date of Birth</th>
<td>06 may 2005</td>
</tr>
<tr>
<th>Department</th>
<td>CSE</td>
</tr>
<tr>
<th>Class</th>
<td>2nd Year</td>
</tr>
<tr>
<th>Place</th>
<td>Pulivendula</td>
</tr>
<tr>
<th>Country</th>
<td>INDIA</td>
</tr>
<tr>
<th>Age</th>
<td>19</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;
}

FULL STACK DEVELOPMENT-1 CSE DEPARTMENT


DATE: EXP NO: PAGE NO:

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>Aravind</td>
</tr>
<tr>
<th>Date of Birth</th>
<td>7 March 2004</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>

FULL STACK DEVELOPMENT-1 CSE DEPARTMENT


DATE: EXP NO: PAGE NO:

<tr>
<th>Country</th>
<td>INDIA</td>
</tr>
<tr>
<th>Age</th>
<td>21</td>
</tr>
</table>
</body>
</html>
Outputs:

FULL STACK DEVELOPMENT-1 CSE DEPARTMENT


DATE: EXP NO: PAGE NO:

Result:
Hence the 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 was successfully executed.

FULL STACK DEVELOPMENT-1 CSE DEPARTMENT


DATE: EXP NO: PAGE NO:

AIM:
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 widthparameters
to something like to 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
PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flower Thumbnails</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: center;
}
.gallery img {
width: 250px;
height: 250px;
object-fit: cover;
border: 2px solid #ddd;
border-radius: 25%;
}
</style>
</head>
<body>
<center><h1>Flower Thumbnail Gallery</h1></center>
<div class="gallery">
<a href="../images/rose.jpg" target="_blank">
<img src="../images/roseThumb.png" alt="Rose" />
</a>
<a href="../images/tulip.jpg" target="_blank">
<img src="../images/tulipThumb.png" alt="Tulip" />
</a>
<a href="../images/sunflower.jpg" target="_blank">
<img src="../images/sunflowerThumb.png" alt="Sunflower" />
</a>

FULL STACK DEVELOPMENT-1 CSE DEPARTMENT


DATE: EXP NO: PAGE NO:

<a href="../images/orchid.jpg" target="_blank">


<img src="../images/orchidThumb.png" alt="Orchid" />
</a>
<a href="../images/lily.jpg" target="_blank">
<img src="../images/lilyThumb.png" alt="Lily" />
</a>
<a href="../images/peony.jpg" target="_blank">
<img src="../images/peonyThumb.png" alt="Peony" />
</a>
<a href="../images/hibiscus.jpg" target="_blank">
<img src="../images/hibiscusThumb.png" alt="Hibiscus" />
</a>
</div>
</body>
</html>
OUTPUT:

RESULT:
Hence the 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 widthparameters to
something like to 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 was executed
successfully.

FULL STACK DEVELOPMENT-1 CSE DEPARTMENT

You might also like