AWT PRACTICAL FILE
Input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>My Friend</title>
<marquee behavior="scroll" direction="left">My Friend Mehak</marquee>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Meet My Friend!</h1>
<p>My friend's name is Mehak.</p>
<p>Mehak is an amazing person who loves to explore new places and meet new people.</p>
<p>She enjoys bullying people<sup>*</sup>.</p>
<p>We often go on adventures together and create wonderful memories.</p>
<p>I Call Her Peppa Pig</p>
<p>Fun fact: Mehak calls herself the Queen<sup>👑</sup> of Drama!</p>
<marquee behavior="scroll" direction="left">oink oink</marquee>
<img src="mehak.jpg" alt="Picture of Mehak" style="width:300px;height:200px;" />
</body>
</html>
Output
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List of IT Companies</title>
</head>
<body>
<h1>Top IT Companies</h1>
<h2>Unordered List</h2>
<ul>
<li>Google</li>
<li>Microsoft</li>
<li>Amazon</li>
<li>TCS</li>
<li>Infosys</li>
<li>Wipro</li>
<li>IBM</li>
<li>Apple</li>
<li>AWS</li>
<li>Dell</li>
<li>Oracle</li>
<li>Hitachi</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>Google</li>
<li>Microsoft</li>
<li>Amazon</li>
<li>TCS</li>
<li>Infosys</li>
<li>Wipro</li>
<li>IBM</li>
<li>Apple</li>
<li>AWS</li>
<li>Dell</li>
<li>Oracle</li>
<li>Hitachi</li>
</ol>
</body>
</html>
Output:
Input:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Google</title>
<a href="Google.html"> <img src="google.png" alt="Google Logo"
style="width:200px;height:100px;"></a>
<header>
<a href="about.html">About</a>
</header>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to Google</h1>
</body>
</html>
Output:
Input:
Part a
TABLE 1 Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Layout Table</title>
<style>
table { border-collapse: collapse; table-layout: fixed; width: 600px; }
td { border: 2px solid #000; text-align: center; font: 600 18px/1.2 system-ui;
height: 80px; }
</style>
</head>
<body>
<table>
<tr>
<td rowspan="2" colspan="2">1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td colspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td colspan="2">6</td>
</tr>
<tr>
<td colspan="2">7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
Output
Input:
Part - b
TABLE 2 LAYOUT
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rowspan Colspan Layout</title>
<style>
table {
border-collapse: collapse;
margin: 50px auto;
}
td {
border: 2px solid black;
width: 100px;
height: 80px;
text-align: center;
vertical-align: middle;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="3">1</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td colspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
Output:
Input
<!DOCTYPE html>
<html>
<head>
<title>My Timetable</title>
<style>
table {
border-collapse: collapse;
width: 80%;
margin: 20px auto;
font-family: Arial, sans-serif;
text-align: center;
}
th, td {
border: 2px solid #333;
padding: 10px;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1 style="text-align:center;">Weekly Timetable</h1>
<table>
<tr>
<th>Day</th>
<th>9:15 - 10:10</th>
<th>10:15 - 11:10</th>
<th>11:15 - 12:10</th>
<th>12:15 - 1:10</th>
<th>1:15 - 2:10</th>
<th>2:15 - 3:10</th>
<th>3:15 - 4:10</th>
<th>4:15 - 5:10</th>
</tr>
<tr>
<td>Monday</td>
<td>BS105</td>
<td class="break">Break</td>
<td>CSIT248</td>
<td colspan="2" class="Break">Break</td>
<td>CSIT246</td>
<td>SW102</td>
<td>CSIT248</td>
</tr>
<tr>
<td>Tuesday</td>
<td>JPAN118</td>
<td></td>
<td>CSIT246</td>
<td colspan="5" class="empty">Free</td>
</tr>
<tr>
<td>Wednesday</td>
<td colspan="2" class="empty">Free</td>
<td>BS105</td>
<td colspan="2" class="break">Break</td>
<td>CSIT247</td>
<td colspan="2">CSIT248</td>
</tr>
<tr>
<td>Thursday</td>
<td colspan="2">CSIT246</td>
<td class="break">Break</td>
<td>CSIT247</td>
<td colspan="4" class="empty">Free</td>
</tr>
<tr>
<td>Friday</td>
<td colspan="5" class="empty">Free</td>
<td>CSIT248</td>
<td colspan="2">CSIT247</td>
</tr>
</table>
</body>
</html>
Output:
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.login-box {
margin: 100px auto;
width: 350px;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px #aaa;
}
table {
width: 100%;
}
td {
padding: 10px;
}
input[type="text"], input[type="password"] {
width: 95%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
background: grey;
color: white;
padding: 10px;
border: none;
width: 100%;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background: red;
}
</style>
</head>
<body>
<div class="login-box">
<h2 style="text-align:center;">Login</h2>
<form action="#" method="post">
<table>
<tr>
<td><label for="username">Username:</label></td>
<td><input type="text" id="username" name="username"
required></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" id="password" name="password"
required></td>
</tr>
<tr>
<td colspan="2" style="text-align:center;">
<input type="submit" value="Login">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
Output:
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About Me</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
table {
width: 60%;
margin: auto;
border-collapse: collapse;
background-color: whitesmoke;
text-align: center;
}
th, td {
padding: 12px;
text-align: center;
}
img {
width: 150px;
height: auto;
border-radius: 10px;
}
caption {
caption-side: top;
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
}
</style>
</head>
<body>
<table>
<caption>About Me</caption>
<tr>
<td><img src="myphoto.jpg" alt="My Photo"></td>
</tr>
<tr>
<td>Aanchal Kanoujia</td>
</tr>
<tr>
<td>24</td>
</tr>
<tr>
<td>Gemini</td>
</tr>
<tr>
<td>Reading, Writing, traveling</td>
</tr>
<tr>
<td>“I am a passionate learner and a tech enthusiast. I love exploring new
technologies and applying them to solve real-world problems. In my free time, I
enjoy reading books and traveling to new places.”</td>
</tr>
<tr>
<td>“I believe in continuous learning and self-improvement. I am always
looking for opportunities to grow and expand my knowledge in the field of
technology.”</td>
</tr>
<tr>
<td>“I am currently working on a project that involves developing an AI
model for yield prediction in agriculture. This project aims to help farmers make
informed decisions based on data analysis.”</td>
</tr>
<tr>
<td>“I am also working on a personal project to create a portfolio and blog
website where I can share my experiences and knowledge with others.”</td>
</tr>
<tr>
<td>“I am excited about the future of technology and how it can transform
our lives. I am committed to being a part of this transformation and contributing to
the tech community.”</td>
<tr>
<td>“I am always open to new challenges and opportunities. I believe that
every experience is a chance to learn and grow.”</td>
</tr>
<tr>
<td>“I am looking forward to collaborating with like-minded individuals and
organizations to create innovative solutions that can make a difference in the
world.”</td>
<tr>
<td><marquee>“Enjoy the butterflies. Enjoy being naive. Enjoy the nerves,
the pressure, people not knowing your name, all that stuff.”</marquee></td>
</tr>
</table>
</body>
</html>
Output
Input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: darkblue; text-align: center;">
Welcome to My Inline CSS Web Page
</h1>
<p style="font-size: 18px; color: lightblue;">
This is an example of a paragraph with inline CSS styling.
</p>
</body>
</html>
Output
Input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal CSS</title>
<style>
h1 {
color: darkorchid;
text-align: center;
font-family: Arial, sans-serif;
text-decoration: underline;
}
p{
font-size: 18px;
color: palevioletred;
background-color: #f0f0f0;
padding: 10px;
}
</style>
</head>
<body>
<h1>Welcome to My Internal CSS Web Page</h1>
<p>This an example of paragraph with internal css </p>
</body>
</html>
Output
Input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to My External CSS Web Page</h1>
<p>This is an example of paragraph with external css </p>
Style.css
body {
background-color: #f0f8ff;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
text-align: center;
}
p{
color: #333;
font-size: 18px;
}
Output
Input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IT Company - Placement Introduction</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
🚀 TechVision IT Solutions Pvt. Ltd.
</div>
<div class="nav">
<a href="about.html" target="companyFrame">About Us</a>
<a href="services.html" target="companyFrame">Services</a>
<a href="careers.html" target="companyFrame">Careers</a>
<a href="contact.html" target="companyFrame">Contact</a>
</div>
<div class="content">
<iframe name="companyFrame" src="about.html"></iframe>
</div>
<div class="footer">
© 2025 TechVision IT Solutions | Designed for Campus Placement
</div>
</body>
</html>
Output
