Scribd
Upload
28 views

HTML Record

Uploaded by

techexplorers2020
Copyright
© © All Rights Reserved
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
28 views

HTML Record

Uploaded by

techexplorers2020
Copyright
© © All Rights Reserved
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 25

Aim: Design a web page to Show your College and its departments details using

basic text formatting tags (at least 4)


SourceCode:
<html>
<head>
<title>My College and Departments</title>
</head>
<body bgcolor="white">
<img src="logo.jpg"hight=700 width="100%">
<br>
<br>
<img src="ideal logo.jpg"alt="college logo" hight=100 width=100 align="left">
<p><h1>Ideal College For Advance Studies</h1></p>
<br>
<h2>Departments</h2>
<br>
<ol>
<li>B.S.W</li>
<p>The Social Work courses are designed to produce highly trained professionals
career and personality development. The Syllabus covers the subjects-
Psychology,Medical & Psychiatric Social Work, Sociology, Human Growth &
Development, Community Health, Community Development, Professional Skill
Development, Counselling, Family and Child Welfare etc..</p>
<li>B.C.A</li>
<p>
The Course of BCA has been amongst the most demanding courses for indian
youths. With the gradual growth and development of internet and information
technology, the need for Computer specialized courses have been raised to great
height. Since BCA is a bachelor level course, the scope can be further improved if an
individual candidate under takes a master level course (MCA).
</p>
<li>B.Com</li>
<p>
The B.Com Programme Provides a good base for a range of careers. These are
broadly of two types- those related to buisness and finance such as Chartered
Accountancy (CWA),Banking and so on, and the non-finance fields such as Law,Civil
Services, Mass Communicaion, Hotel etc…
</p>
<li>B.A – English</li>
<p>
The ongoing boom in the Indian economy has further increased world mobility, by
adopting English as a major medium of instruction in schools and colleges.
</p>
</ol>
</body>
</html>
Output:
Aim: Design a web page to show image as link (include two different links)
SourceCode:
<!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;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.container {
display: flex;
gap: 20px;
}
.container a {
text-decoration: none;
}
.container img {
width: 300px;
height: 200px;
border: 2px solid #ccc;
border-radius: 10px;
transition: transform 0.3s, border-color 0.3s;
}
.container img:hover {
transform: scale(1.05);
border-color: #333;
}
</style>
</head>
<body>
<div class="container">
<a href="https://www.example1.com" target="_blank">
<img src="https://via.placeholder.com/300x200.png?text=Link+1" alt="Link
1">
</a>
<a href="https://www.example2.com" target="_blank">
<img src="https://via.placeholder.com/300x200.png?text=Link+2" alt="Link
2">
</a>
</div>
</body>
</html>
Output:
Aim: Create a webpage to show photo album (minimum 4 photos)
SourceCode:
Index.html:
<html>
<head>
<title>album</title>
</head>
<frameset cols="30%,*">
<frame src="album image.html">
<frame name="right">
</frameset>
</html>
album image.html:
<html>

<head>
<title>Image</title>
</head>

<body>
<center>
<a href="logo.jpg" target="right">
<img src="https://via.placeholder.com/150.png?text=Logo+1" alt="Random
Logo">
</a>
<br>
<a href="logo1.jpg" target="right">
<img src="https://via.placeholder.com/150.png?text=Logo+1" alt="Random
Logo 1">
</a>
<br>
<a href="logo2.jpg" target="right">
<img src="https://via.placeholder.com/150.png?text=Logo+2" alt="Random
Logo 2">
</a>
<br>
<a href="logo3.jpg" target="right">
<img src="https://via.placeholder.com/150.png?text=Logo+3" alt="Random
Logo 3">
</a>
</body>

</html>
Output:
Aim: Divide a webpage into 3 parts using frames and include a background image,
table, and hyper link in the parts
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>Webpage with Frames</title>
</head>
<frameset rows="33%, 33%, 34%">
<frame src="part1.html" name="tableFrame">
<frame src="part2.html" name="backgroundFrame">
<frame src="part3.html" name="linksFrame">
</frameset>
</html>
Part1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Frame</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>Service</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>Web Development</td>
<td>Creating responsive and modern websites</td>
<td>$2000</td>
</tr>
<tr>
<td>SEO Optimization</td>
<td>Improving search engine rankings</td>
<td>$1500</td>
</tr>
<tr>
<td>Graphic Design</td>
<td>Designing visually appealing graphics</td>
<td>$1000</td>
</tr>
</table>
</body>
</html>
Part2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Frame</title>
<style>
body {
margin: 0;
height: 100%;
background-image: url('your-background-image.jpg');
background-size: cover;
background-position: center;
color: white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to Our Company</h1>
</body>
</html>
Part3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Links Frame</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
a{
display: block;
margin-bottom: 10px;
color: #1a0dab;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://www.example.com">Example Link 1</a>
<a href="https://www.example.com">Example Link 2</a>
<a href="https://www.example.com">Example Link 3</a>
</body>
</html>
Output:
Aim: Design a web page to show the product details of a computer, printer
andscanner with images
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Details</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.container {
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
}
.product {
margin-bottom: 40px;
}
.product h2 {
margin-bottom: 10px;
}
.product img {
max-width: 100%;
height: auto;
}
.product-details {
margin-top: 20px;
}
.product-details p {
margin: 5px 0;
}
</style>
</head>
<body>

<header>
<h1>Product Details</h1>
</header>

<div class="container">

<div class="product">
<h2>Computer</h2>
<img src="mackbook.jpg" alt="Computer">
<div class="product-details">
<p>Brand: Apple</p>
<p>Model: MacBook Pro</p>
<p>Price: $1299</p>
<p>Description: The MacBook Pro is a powerful laptop designed for
professionals. It features a high-resolution Retina display, fast processors, and
ample storage.</p>
</div>
</div>

<div class="product">
<h2>Printer</h2>
<img src="printer.jpg" alt="Printer">
<div class="product-details">
<p>Brand: HP</p>
<p>Model: OfficeJet Pro 9015</p>
<p>Price: $229</p>
<p>Description: The HP OfficeJet Pro 9015 is an all-in-one printer that offers
fast printing, scanning, and copying. It's perfect for small businesses or home
offices.</p>
</div>
</div>

<div class="product">
<h2>Scanner</h2>
<img src="scanner.jpg" alt="Scanner">
<div class="product-details">
<p>Brand: Canon</p>
<p>Model: CanoScan LiDE 300</p>
<p>Price: $79</p>
<p>Description: The Canon CanoScan LiDE 300 is a compact and affordable
scanner that offers high-quality scanning of documents and photos. It's perfect for
home or office use.</p>
</div>
</div>

</div>
</body>
</html>
Output:
Aim: Create a webpage for student registration form(include address,
gender(radiobutton),qualification(select box),languages known(checkbox))

You might also like