EX. NO.
:1 DATE:
HTML FILE WITH TAGS USING AN EDITOR AND DISPLAY NAME AND ADDRESS
AIM:
To Create a HTML file with tags using an editor and display your name and address in different colors and
fonts centered across the screen.
PROCEDURE :
1. Go to start all Programs Accessories Notepad.
2. Type the HTML code.
3. Include title ”my first web page” in title tag.
4. Set the background for the webpage by using bgcolor attributes of the body tag.
5. Format the name and address in different colour using font tag to display text.
6. Align [name, address]to center by using align =”left ” of <p> tag.
7. Save the HTML document to a file (e g., first.html)
8. Run the html code using browser.
HTML CODE :
<DOCTYPE html>
<html >
<head>
<title>My first web page</title>
</head>
<body bgcolor=”green”>
<font size=”16” color=”white” face=”Arial”>
<p align=”center”>
Name: Smithy<br>
Age: 18
</p></font>
<font size=”16” color=”red” face=”Arial”>
<p align=”center”>
Address: Fill the Address<br> Phone:
123535615
</p>
</p> </font>
</body>
</html>
RESULT:
Thus the HTML Program have been successfully executed.
EX. NO. :2 DATE:
DISPLAY IMAGES IN DIFFERENT HEIGHT AND WEIGHT
AIM :
To Write HTML tags to display images in different height and widths.
PROCEDURE :
1. Go to start all Programs Accessories Notepad.
2. Define HTML document structure - `html`, `head`, and `body` elements
3. Add metadata (title, etc.) in `head` section
4. Create `img` element in `body` section
- Set `src` attribute to image file path
- Set `height` and `width` attributes
5. Add styling and alignment
6. Save the HTML document to a file (e g., image.html)
7. Run the html code using browser.
HTML CODE :
<DOCTYPE html>
<html>
<head>
<title>program 05</title>
</head>
<body>
<center>
<img src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample
Pictures\Winter.jpg" height="200" width="200" align="middle"/>
</center>
</body>
</html>
RESULT:
Thus the HTML Program have been successfully executed.
EX. NO. :3 DATE:
AUDIO FILE
AIM :
To Write HTML tags to play audio file when play button is pressed.
PROCEDURE :
1. Go to start all Programs Accessories Notepad.
2. Type the HTML code.
3. <div> tag defines a division or a section in an HTML document.
4. Use Audio tag from the system.
5. Add source src link from the system.
6. Add necessary styles that may reflected to class and image as background.
7. Go to file save save the file with html extension.
8. Run the html file using Firefox browser or Chrome.
HTML CODE :
<DOCTYPE html>
<html>
<head><title>AUDIO</title></head>
<body Background-image:url(‘huts.jpg’)
Background-size:100% 100%>
<div class="audio">
<h2><i> <u>Audio</u></i> </h2>
<!--AUDIO Autoplay-->
<audio controls>
<source src="D:\my music\final.mp3"
type="audio/mp3">
</audio>
</div>
</body>
</html>
RESULT:
Thus the HTML Program have been successfully executed.
EX. NO. :4 DATE:
LIST OF COURSES AVAILABLE IN A COLLEGE USING LIST
AIM :
To Write HTML tags to create list of courses available in a college and show their features in definition list
PROCEDURE :
1. Go to start all Programs Accessories Notepad
2. Type the HTML code.
3. Include the <H>----</H> tag to display the headings.
4. First use the <ul>----</ul> tag to display the Arts and Science.
5. Second use the <ol> ---- </ol> tag to display ordered list of all Courses.
6. Inside <ol>tag use <li> -- </li> tag to list each Courses.
7. Go to file save save the file with html extension.
8. Run the html code using browser.
HTML CODE:
<DOCTYPE html>
<html>
<head>
<title>College Courses</title>
</head>
<body bgcolor=”lightgreen”>
<font size=”16” color=”white” face=”Arial”>
<center><h2>RAJA COLLEGE OF ARTS AND SCIENCE </h2></center></font>
<font size=”16” color=”white” face=”Brush script M7”> <center><h5>(Affiliated to Alagappa University-
Karaikudi)</h5></center></font>
<center><h5> Kunjarvalasai, Vedhalai, Ramnad.</h5></center>
<hr>
<h4> List Of Courses Available</h4>
<h3>ARTS</h3>
<ul>
<li>B.Com</li>
<li>B.Com.,(CA)</li>
<li>BBA</li>
<li>B.A</li>
</ul>
<h3>SCIENCE</h3>
<ul>
<li>B.Sc.,(Maths)</li>
<li>B.C.A</li>
<li>B.Sc.,(Computer Science)</li>
</ul>
<h3>Special Courses</h3>
<ul>
<li>DMLT</li>
<li>B.Sc.,(Physical Education)</li>
</ul>
<dl>
<dt>ABOUT US</dt>
<dd>Our College is one of the most popular college in Ramanathapuram District<br> Admission open
for UG Courses</dd>
</dl>
</body>
</html>
RESULT:
Thus the HTML Program have been successfully executed.
EX. NO. :5 DATE:
LINK ANOTHER WEB PAGE TO YOUR PAGE
AIM :
To Write HTML tags to link another web page to your page.
PROCEDURE :
1. Go to start all Programs Accessories Notepad.
2. Create file called as page1.html.
3. To provide external link between Gmail website use <a> .
4. URL of Gmail website in href attribute.
5. Save the HTML document to a file (e g., link.html)
6. Run the page1.html file using browsers.
7. If we click on the link it should link to Gmail website.
HTML CODE :
<DOCTYPE html>
<html>
<head><title>page 1</title>
</head>
<body>
<h1><center>WELCOME!</center></h1>
<h1><center><a href=http://www.gmail.com> Click here to visit Gmail website</a></center></h1>
</body>
</html>
RESULT :
Thus the HTML Program have been successfully executed.
EX. NO. : 6 DATE:
TABLES
AIM :
To Write HTML tags to create a table with text content and format it suitably with colors and features.
PROCEDURE :
1. Go to start all Programs Accessories Notepad.
2. Write the basic HTML structure
3. Create table elements: <table> </table>
4. Create caption element: <caption> </caption>
5. Add table data to create tr and td elements for table data: <tr><td> Data 1</td></tr>
6. Add table attributes like table width ="50%" border = "4">
7. Save the HTML document to a file (e g., table.html)
8. Run the html file using firefox browser.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #D6EEEE;
}
</style>
</head>
<body>
<center><h2>TIME TABLE</h2></center>
<center><h2>DEPARTMENT OF COMPUTER SCIENCE</h2></center>
<center><h2>II COMPUTER SCIENCE</h2></center>
<table width ="50%" border ="4">
<tr>
<th>Hours/Day Order</th>
<center><th>I</th>
<th>II</th>
<td rowspan=7>B<br>R<br>E<br>A<br>K
<th>III</th>
<th>IV</th>
<td rowspan=7> L<br>U<br>N<br>C<br>H
<th>V</th>
<th>VI</th>
</tr>
<tr>
<td>A</td>
<td>Web Design</td>
<td>Data Structure</td>
<td>Tamil</td>
<td>English</td>
<td colspan=2>DS Lab
</tr>
<tr>
<td>B</td>
<td>Dara Structure</td>
<td>English</td>
<td> Tamil</td>
<td>Web Design</td>
<td>WD</td>
<td>MM</td>
</tr>
<tr>
<td>C</td>
<td>Web Design</td>
<td>Tamil</td>
<td>English</td>
<td>Data Structure</td>
<td>MM</td>
<td>PET</td>
</tr>
<tr>
<td>D</td>
<td colspan=2>DS Lab
<td>English</td>
<td>Tamil</td>
<td>Data Structure</td>
<td>Web Design</td>
</tr>
<tr>
<td>E</td>
<td>Data Structure</td>
<td>WD</td>
<td>MM</td>
<td>English</td>
<td>Tamil</td>
<td>Library</td>
</tr>
<tr>
<td>F</td>
<td>Data Structure</td>
<td>English</td>
<td colspan=2>WD Lab
<td>Tamil</td>
<td>WD</td>
</tr>
</table>
</body>
</html>
RESULT :
Thus the HTML Program have been successfully executed.
EX. NO. : 7 DATE:
TABLE WITH PHOTOGRAPHS OF ANIMALS
AIM :
To Write HTML tags to create a table with photographs of animals and show their lifesspan and habits in a different
page when mouse is clicked over the photos.
PROCEDURE :
RESULT :
Thus the HTML Program have been successfully executed.
EX. NO. : 8 DATE :
INLINE STYLE SHEET
AIM :
To Write HTML tags to define inline style sheet and test it.
PROCEDURE :
1. Go to start all Programs Accessories Notepad.
2. Type the HTML code.
3. Add a “Style” attribute to an HTML elements ,<h1></h1> and<p></p>.
4. Define CSS properties and values within double quotes.
5. CSS properties are color, font-size, text – align.
6. Go to file save save the with.html extension.
7. Run the html file using firefox browser.
HTML CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Inline CSS</title>
</head>
<body>
<h1 style="color: green;
font-size: 60px;
text-align: center;">
RAJA COLLEGE OF ARTS AND SCIENCE
</h1>
<p style="color: gray;
font-size: 25px;
text-align: center;">
Department of Computer Science
</p>
</body>
</html>
RESULT :
Thus the HTML Program have been successfully executed.
EX. NO. : 9 DATE :
INTERNAL STYLE SHEET
AIM :
To Write HTML tags to define internal style sheet and test it.
PROCEDURE :
1. Go to start all Programs Accessories Notepad.
2. Type the HTML code.
3. Open the HTML document and locate the <head> opening tag.
4. Add a <style> element within the <head> section.
5. Define CSS properties within the <style> element.
6. Go to file save save the with.html extension.
7. Run the html file using firefox browser.
HTML CODE :
<html>
<head>
<style>
div
{
padding: 70px;
border: 1px solid #4CAF50;
}
h1
{
text-align: center;
text-transform: uppercase;
color: #1a8cff;
}
h2
{
text-align: center;
text-transform: uppercase;
color: #910d14;
}
h3
{
text-align: center;
text-transform: uppercase;
color: #70a336;
}
p.serif
{
font-family: "Times New Roman", Times, serif;
}
p.sansserif
{
font-family: Arial, Helvetica, sans-serif;
}
p.italic
{
font-style: italic;
}
p.oblique
{
font-style: oblique;
}
</style>
</head>
<body>
<h1 style="background-color:Mobile;" >Mobile</h1>
<h2 style="background-color:Camera;">Camera</h2>
<h3>html fonts </h3>
<p class="sansserif">
Cascading Style Sheets (CSS) is a stylesheet language
used to describe the presentation of a document
written in HTML or XML.
</p>
<p class="serif">
CSS describes how elements should be rendered on
screen, on paper, in speech, or on other media..
</p>
<p class="italic">
This tutorial will teach you CSS from basic.
</P>
<p class="oblique">
The CSS font properties define the font family,
boldness, size, and the style of a text.
</p>
<div>
This element has a padding of 70px.
</div>
</body>
</html>
RESULT :
Thus the HTML Program have been successfully executed.
EX. NO. : 10 DATE :
EXTERNAL STYLE SHEET
AIM :
To Write HTML tags to define external style sheet and test it.
PROCEDURE :
1. Go to start all Programs Accessories Notepad.
2. Type the HTML code.
3. Create external stylesheet (ess.css) using link tag inside the <head> section.
4. Use CSS selectors to style HTML elements.
5. Go to file save save the with.html extension.
6. Run the html file using firefox browser.
HTML CODE :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="ess.css" />
</head>
<body>
<div class="main">
<h1 class="ess">
EXTERNAL STYLE SHEETS
</h1>
<p id="ess1">
External CSS is a method used to style multiple HTML pages with a single stylesheet.
</p>
</div>
</body>
</html>
/* ess.css */
.main {
text-align: center;
}
.ess {
font-size: 60px;
color: green;
}
#ess1 {
font-size: 25px;
color: skyblue;
};
RESULT :
Thus the HTML Program have been successfully executed.
EX. NO. :11 DATE:
HORIZONTAL AND VERTICAL PARTITION
AIM :
To Write HTML tags to divide the screen space into horizontal and vertical partitions and load a different html file in
each partition.
PROCEDURE:
1. Go to start all Programs Accessories Notepad.
2. Type the HTML code.
3. Create separate HTML files for each partition (e.g., `top.html`, `bottom.html`, `left.html`, `right.html`)
4. Add content to each HTML file
5. Create a new HTML file (e.g., `index.html`)
6. Replace the `src` attributes in the iframe tags with the paths to HTML files
7. Go to file save save the with.html extension.
8. Run the html file using firefox browser.
HTML CODE :
<!DOCTYPE html>
<html>
<head>
<title>Partitioned Screen</title>
<style>
body {
margin: 0;
padding: 0;
}
iframe {
border: none;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- Horizontal partition -->
<iframe src="top.html" frameborder="0" width="100%" height="50%"></iframe>
<iframe src="bottom.html" frameborder="0" width="100%" height="50%"></iframe>
<!-- Vertical partition -->
<table width="100%" height="100%" frameborder="0">
<tr>
<td width="50%"><iframe src="left.html" frameborder="0" width="100%" height="100%"></iframe></td>
<td width="50%"><iframe src="right.html" frameborder="0" width="100%" height="100%"></iframe></td>
</tr>
</table>
</body>
</html>
RESULT :
Thus the HTML Program have been successfully executed.
EX. NO. :12 DATE:
COLLEGE APPLICATION FORM FOR ADMISSION
AIM :
To Write HTML tags to design a form to enable a student to fill up application form for admission to a degree
programme in a college.
PROCEDURE :
1. Go to start all Programs Accessories Notepad.
2. Type the HTML code.
3. First start by setting the basic template of an HTML webpage.
4. After this, let’s add a form tag and then most used are the action and the method attribute.
5. GET and POST are the two HTTP requests.
6. Add headings and some description to our form. Create a <h2> tag and write “Student Registration form”
inside it. Also, add a short description inside the <p> tag. Also, add a <br> tag at the end of <p> tag to create
space before adding the next elements.
7. Add some input fields and labels and also add a drop-down of preferred courses. For this, we will use the
<option> tag under the <select> tag.
8. Background color as orange and add the ‘bgcolor’ attribute to the body.
9. Finally, Created a Registration form with proper input fields.
HTML CODE :
<!DOCTYPE html>
<html>
<!-- Header Section-->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Student Registration Form
</title>
</head>
<!--Body of the Webpage-->
<body bgcolor="orange">
<!--Start of Form-->
<div style="margin: auto;width: 30%;">
<form>
<h2>Student Registration Form</h2>
<p>Fill in this form to register</p>
<br>
<!--Input elemets for form-->
<label><b>First Name</b></label>
<input type="text" placeholder="Enter your first name" name="first_name" required>
<br>
<br>
<label><b>Last Name</b></label>
<input type="text" placeholder="Enter your last name" name="last_name" required>
<br>
<br>
<label><b>E-mail</b></label>
<input type="email" placeholder="Enter your e-mail" name="email" required>
<br>
<br>
<label><b>Date of Birth</b></label>
<input type="date" name="dob" required>
<br>
<br>
<label><b>Set Username</b></label>
<input type="text" placeholder="Set Username" name="username" required>
<br>
<br>
<label><b>Set Password</b></label>
<input type="password" placeholder="Set password" name="password" required>
<br>
<br>
<label><b>Gender</b></label><br>
<input type="radio" name="gender" value="Male">
<label for="Male">Male</label><br>
<input type="radio" name="gender" value="Female">
<label for="Female">Female</label><br>
<input type="radio" name="gender" value="Others">
<label for="Others">Others</label>
<br>
<br>
<label><b>Course :</b></label>
<select>
<option value="Course">Course</option>
<option value="CS">Computer Fundamentals</option>
<option value="AI">Artificial Intelligence</option>
<option value="ML">Machine Learning</option>
<option value="OOPS">Object Oriented Programming</option>
<option value="DBMS">Database Management System</option>
</select>
<br>
<br>
<input type="button" value="Register"/>
</form>
</div>
</body>
</html>
RESULT :
Thus the HTML Program have been successfully executed.
EX. NO. :13 DATE:
SIMPLE PERSONAL WEBSITE WITH THREE OR MORE PAGES
AIM :
Write HTML tags to design a simple personal website with three or more pages accessible from home page.
PROCEDURE :
1. Create a new folder for your website.
2. Go to start all Programs Accessories Notepad.
3. Create the following HTML files:
- index.html (home page)
- about.html
contact.html
portfolio.html (or other pages as needed)
4. Add basic HTML structure to each file.
5. Create a navigation menu in each HTML file.
6. Add links to other pages.
7. Style the menu using CSS.
8. Add text, images, and multimedia content to each page.
9. Create a CSS file (e.g., styles.css).
10. Use HTML elements (headers, paragraphs, lists, etc.) to structure content.
11. Use CSS to style content.
12. Link CSS file to each HTML file. Add CSS rules to style layout, colors, fonts, etc..
HTML CODE :
<--Home Page (index.html)- - >
<!DOCTYPE html>
<html>
<head>
<title>My Personal Website</title>
<style>
body {
font-family: Arial, sans-serif;
}
nav {
background-color: #f0f0f0;
padding: 10px;
text-align: center;
}
nav a {
text-decoration: none;
color: #337ab7;
margin: 10px;
}
</style>
</head>
<body>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
<a href="portfolio.html">Portfolio</a>
</nav>
<h1>Welcome to My Personal Website</h1>
<p>This is my personal website, where I share my thoughts, experiences, and projects.</p>
</body>
</html>
```
*About Page (about.html)*
```
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
<a href="portfolio.html">Portfolio</a>
</nav>
<h1>About Me</h1>
<p>Hello, my name is [Your Name], and I'm a [Your Profession/Student].</p>
<p>This is a brief overview of my background, interests, and goals.</p>
</body>
</html>
```
*Contact Page (contact.html)*
```
<!DOCTYPE html>
<html>
<head>
<title>Contact Me</title>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
<a href="portfolio.html">Portfolio</a>
</nav>
<h1>Contact Me</h1>
<p>Get in touch with me through:</p>
<ul>
<li>Email: [your email]</li>
<li>Phone: [your phone number]</li>
<li>LinkedIn: [your LinkedIn profile]</li>
</ul>
</body>
</html>
```
*Portfolio Page (portfolio.html)*
```
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
<a href="portfolio.html">Portfolio</a>
</nav>
<h1>My Portfolio</h1>
<p>Here are some of my notable projects:</p>
<ul>
<li>Project 1: [brief description]</li>
<li>Project 2: [brief description]</li>
<li>Project 3: [brief description]</li>
</ul>
</body>
</html>
RESULT :
Thus the HTML Program have been successfully executed.
EX. NO. :14 DATE:
SIMPLE WEBSITE TO PROMOTE A PRODUCT OF A COMPANY
AIM :
Write HTML tags to design a simple website to promote a product of a company.
PROCEDURE :
1. Go to start all Programs Accessories Notepad.
2. Type the HTML code.
HTML CODE :
<!DOCTYPE html>
<html>
<head>
<title>Product Promotion Website</title>
<style>
body {
font-family: Arial, sans-serif;
}
.header {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
.product {
display: block;
margin: 40px auto;
width: 80%;
text-align: center;
}
.features {
display: block;
margin: 40px auto;
width: 80%;
}
.testimonials {
display: block;
margin: 40px auto;
width: 80%;
}
.call-to-action {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Header Section -->
<div class="header">
<h1>Product Name</h1>
<p>Tagline</p>
</div>
<!-- Product Section -->
<div class="product">
<h2>Our Product</h2>
<img src="product-image.jpg" alt="Product Image">
<p>Description</p>
</div>
<!-- Features Section -->
<div class="features">
<h2>Key Features</h2>
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
</div>
<!-- Testimonials Section -->
<div class="testimonials">
<h2>Customer Testimonials</h2>
<blockquote>
<p>Testimonial 1</p>
<cite>Customer 1</cite>
</blockquote>
<blockquote>
<p>Testimonial 2</p>
<cite>Customer 2</cite>
</blockquote>
</div>
<!-- Call-to-Action Section -->
<div class="call-to-action">
<button>Buy Now</button>
</div>
<!-- Footer Section -->
<div class="footer">
<p>© 2023 Company Name</p>
</div>
</body>
</html>
RESULT:
Thus the HTML Program have been successfully executed.
EX. NO. :15 DATE:
COVER PAGE OF BOOKS AND DISPLAY THE DETAILS ABOUT THE BOOK
AIM :
Write HTML tags to design a simple website showing images of cover page of books and display the details about
the book in their own pages when mouse is clicked over the respective photographs.
PROCEDURE:
1. Go to start all Programs Accessories Notepad.
2. Type the HTML code.
3. Create an `index.html` file with a book gallery section.
4. Add images of book covers with links to their respective detail pages.
5. Create separate HTML files for each book's details (e.g., `book1.html`, `book2.html`, etc.).
6. In each book's detail page, add the book's title, author, description, and image.
7. Add a link back to the gallery page.
8. Go to file save save the file with html extension.
9. Run the html code using browser.
HTML CODE:
< - - Index.html - ->
<!DOCTYPE html>
<html>
<head>
<title>Book Gallery</title>
<style>
body {
font-family: Arial, sans-serif;
}
.book-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.book {
margin: 20px;
}
</style>
</head>
<body>
<h1>Book Gallery</h1>
<div class="book-gallery">
<div class="book">
<a href="book1.html">
<img src="book1.jpg" alt="Book 1">
</a>
</div>
<div class="book">
<a href="book2.html">
<img src="book2.jpg" alt="Book 2">
</a>
</div>
<div class="book">
<a href="book3.html">
<img src="book3.jpg" alt="Book 3">
</a>
</div>
</div>
</body>
</html>
```
*Book1.html*
```
<!DOCTYPE html>
<html>
<head>
<title>Book 1 Details</title>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Book 1 Details</h1>
<img src="book1.jpg" alt="Book 1">
<p>Title: Book 1 Title</p>
<p>Author: Book 1 Author</p>
<p>Description: Book 1 Description</p>
<a href="index.html">Back to Gallery</a>
</body>
</html>
```
*Book2.html*
```
<!DOCTYPE html>
<html>
<head>
<title>Book 2 Details</title>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Book 2 Details</h1>
<img src="book2.jpg" alt="Book 2">
<p>Title: Book 2 Title</p>
<p>Author: Book 2 Author</p>
<p>Description: Book 2 Description</p>
<a href="index.html">Back to Gallery</a>
</body>
</html>
```
*Book3.html*
```
<!DOCTYPE html>
<html>
<head>
<title>Book 3 Details</title>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Book 3 Details</h1>
<img src="book3.jpg" alt="Book 3">
<p>Title: Book 3 Title</p>
<p>Author: Book 3 Author</p>
<p>Description: Book 3 Description</p>
<a href="index.html">Back to Gallery</a>
</body>
</html>
``
RESULT:
Thus the HTML Program have been successfully executed.
