ASSIGNMENT 1:
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>Webpage using HTML basic tags</title>
</head>
<body>
<p>Chettinad Institute Of Technology</p><br>
<b>Bachelor Of Engineering</b><br>
<strong>Computer Science Engineering</strong><br>
<i>Web Development Essentials</i><br>
<em>HTML</em><br>
<u>Hypertext Markup Language</u><br>
<mark>Webpage using HTML text tags</mark><br>
<small>Smaller text</small><br>
<del>Deleted text</del><br>
<ins>Inserted text</ins><br>
<strike>Strikethrough text</strike><br>
<p>HTML<sub>Subscript text</sub></p>
<p>HTML<sup>Superscript text</sup></p>
</body>
</html>
OUTPUT:
ASSIGNMENT 2:
<!DOCTYPE html>
<html lang=” a”>
<head>
<title> This is my project </title>
</head>
<body background="C:\Users\dhars\OneDrive\Desktop\istockphoto-1150425295-612x612 (1).jpg">
<h1>CAR SHOWROOM</h1>
<p> <a href="[Link] Follow CARS on Instagram</a></p>
<h1> TELL US YOUR FAVORITE </h1>
<form method="post" action="/submit-form">
<fieldset>
<legend> User Information </legend>
<label for="name"> Name </label>
<input type="text" name="name" id="name"><br><br>
<label> Sex </label>
<input type="radio" name="sex" id="male" value="male">
<label> Male </label><br><br>
<input type="radio" name="sex" id="female" value="female">
<label> Female </label><br><br>
<label> Favorite </label>
<select>
<option>TOYOTA</option>
<option>Rolls Royce</option>
<option>BMW</option>
<option>MARUTI SWIFT</option>
<option>SUZUKI</option>
</select><br><br>
<label for="message"> Tell us why you chose this brand </label>
<textarea cols="30" rows="4"></textarea><br><br>
<input type="checkbox">
<label for="Newsletter"> Subscribe </label><br><br>
<input type="Submit" value="Submit">
</fieldset>
</form>
</body>
</html>
OUTPUT:
ASSIGNMENT 3:
<!DOCTYPE html>
<html>
<head>
<title>CAFE COFFE</title>
</head>
<body>
<h1>Restaurant Menu</h1>
<h2>Starters</h2>
<table border="1">
<tr>
<th>Items (Unordered List)</th>
<th>Price</th>
</tr>
<tr>
<td>
<ul>
<li>Vegetable Soup</li>
<li>Paneer Tikka</li>
<li>Spring Rolls</li>
<li>Garlic Bread</li>
</ul>
</td>
<td>
100<br>
150<br>
100<br>
</td>
</tr>
</table>
<table border="1">
<tr>
<th>Items (Definition List)</th>
<th>Price</th>
</tr>
<h3> Starters - Chicken </h3>
<ol>
<li> Chicken 65 </li>
<li> Chicken Tikka </li>
<li> Chicken Lollipop </li>
<li> Pepper Chicken </li>
</ol>
<h3> Starters - Egg </h3>
<ol>
<li> Egg Pakora </li>
<li> Egg 65 </li>
<li> Egg Roll </li>
<li> Masala Omelette </li>
</ol>
<h2>Desserts</h2>
<tr>
<td>
<dl>
<dt>Vanilla Milkshake</dt>
<dd>Cold creamy milkshake with vanilla flavor.</dd>
<dt>Ice Cream</dt>
<dd>Cold dessert available in various flavors.</dd>
<dt>Fruit Salad</dt>
<dd>Fresh fruits mixed and served chilled.</dd>
<dt>Chocolate Brownie</dt>
<dd>Soft chocolate cake served with nuts or ice cream.</dd>
</dl>
</td>
<td>
<dl>
<dt>90</dt><br>
<dt>80</dt><br>
<dt>60</dt><br>
<dt>70</dt><br>
</dl>
</td>
</tr>
</table>
</body>
</html>
OUTPUT:
ASSIGNMENT 3:
HTML Code –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Café Bliss</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<header>
<h1>☕ Café Bliss</h1>
<p>Fresh Brews & Sweet Moments</p>
</header>
<nav>
<a href="#home">Home</a>
<a href="#menu">Menu</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<div class="container">
<!-- Left Sidebar -->
<aside class="sidebar left">
<h3>Specials</h3>
<ul>
<li>Mocha Magic</li>
<li>Hazelnut Latte</li>
<li>Blueberry Muffin</li>
</ul>
</aside>
<!-- Main Content -->
<section class="content">
<h2>Welcome to Café Bliss</h2>
<p>
Step into the world of warmth and aroma! At Café Bliss, we serve happiness in every cup.
Enjoy handcrafted coffees, delicious desserts, and cozy vibes that make you feel at home.
</p>
<div class="menu">
<div class="item">
<img src="[Link]
alt="Espresso">
<h3>Espresso</h3>
<p>Strong, bold, and full of flavor.</p>
</div>
<div class="item">
<img src="[Link] alt="Latte">
<h3>Latte</h3>
<p>Creamy, smooth, and comforting.</p>
</div>
<div class="item">
<img src=[Link]
CSS Code –
/* Basic Styling */
body {
margin: 0;
font-family: 'Poppins', sans-serif;
background-color: #fefaf5; /* Very light cream background */
color: #3e2723;
}
/* Header */
header {
text-align: center;
background-color: #6f4e37;
color: white;
padding: 1.5em 0;
/* Navigation Bar */
nav {
background-color: #8d6e63;
display: flex;
justify-content: center;
gap: 20px;
padding: 0.8em 0;
nav a {
color: white;
text-decoration: none;
font-weight: bold;
nav a:hover {
text-decoration: underline;
}
/* Layout using Flexbox */
main {
display: flex;
flex-wrap: wrap;
padding: 20px;
gap: 20px;
/* Sidebar */
.sidebar {
flex: 1;
min-width: 200px;
background-color: #f3e5ab;
border-radius: 10px;
padding: 15px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
/* Main Content */
.content {
flex: 3;
background-color: #ffffff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* Grid Layout for Menu Items */
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin-top: 20px;
.item {
background-color: #fff8f0;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
padding: 10px;
transition: transform 0.3s;
.item:hover {
transform: scale(1.05);
.item img {
width: 100%;
border-radius: 10px 10px 0 0;
.item h3 {
margin: 10px 0 5px;
}
/* Footer */
footer {
background-color: #6f4e37;
color: white;
text-align: center;
padding: 1em 0;
margin-top: 20px;
/* Responsive Layout */
@media (max-width: 768px) {
main {
flex-direction: column;
.sidebar {
text-align: center;