Scribd
Upload
21 views19 pages

Iat I Iii Year

The document contains multiple HTML examples demonstrating various web development concepts. It includes creating tables, forms, e-commerce product pages, styling with CSS, and implementing features like scrollable containers and sticky headers. Each example is structured with appropriate HTML and CSS to showcase specific functionalities.

Uploaded by

ranganathanb893
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
21 views19 pages

Iat I Iii Year

The document contains multiple HTML examples demonstrating various web development concepts. It includes creating tables, forms, e-commerce product pages, styling with CSS, and implementing features like scrollable containers and sticky headers. Each example is structured with appropriate HTML and CSS to showcase specific functionalities.

Uploaded by

ranganathanb893
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/ 19

Create the following table using HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Weather Station Table</title>

<table>

<tr>

<th rowspan="2">Station</th>

<th colspan="2">Temperature</th>

<th rowspan="2">Humidity</th>

<th rowspan="2">Weather</th>

</tr>

<tr>

<th>Max</th>

<th>Min</th>

</tr>

<tr>

<td>USA</td>

<td>24</td>

<td>19</td>

<td>60%</td>

<td>Cloudy
</tr>

<tr>

<td>Germany</td>

<td>5</td>

<td>-1</td>

<td>70%</td>

<td>Rainy</td>

</tr> </table>

</body> </html>

2.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Application Form</title>

</head>

<body>

<h2>Application Form</h2>

<form>
<label for="first-name">First Name:</label>

<input type="text" id="first-name" name="first-name">

<label for="last-name">Last Name:</label>

<input type="text" id="last-name" name="last-name">

<br><br>

<label for="dob">Date of birth:</label>

<input type="date" id="dob" name="dob">

<label for="age">Age:</label>

<input type="number" id="age" name="age" min="1">

<br><br>

<label for="gender">Gender:</label>

<select id="gender" name="gender">

<option value="male">Male</option>

<option value="female">Female</option>

<option value="other">Other</option>

</select>

<label for="email">Email Address:</label>

<input type="email" id="email" name="email" placeholder="Enter email address">

<br><br>

<label>Positions Available:</label>

<input type="radio" id="junior" name="position" value="Junior Developer">

<label for="junior">Junior Developer</label>


<input type="radio" id="mid" name="position" value="Mid-level Developer">

<label for="mid">Mid-level Developer</label>

<input type="radio" id="senior" name="position" value="Senior Developer">

<label for="senior">Senior Developer</label>

<br><br>

<label>Programming Languages:</label>

<input type="checkbox" id="java" name="languages" value="Java">

<label for="java">Java</label>

<input type="checkbox" id="javascript" name="languages" value="JavaScript">

<label for="javascript">JavaScript</label>

<input type="checkbox" id="python" name="languages" value="Python">

<label for="python">Python</label>

<br><br>

<label for="password">Password:</label>

<input type="password" id="password" name="password">

<label for="confirm-password">Confirm Password:</label>

<input type="password" id="confirm-password" name="confirm-password">

<br><br>

<input type="submit" value="Submit">

<input type="reset" value="Reset">

</form>
</body>

</html>

3. Create an E-commerce product page with the following tags

a. <sub> and <sup>


b. <progress>
c. <meter>
d. <audio> and <video>
e. <bdo>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>E-Commerce Product Page</title>

</head>

<body>

<h1>E-Commerce Product Page</h1>

<div class="product">

<h2>Smartphone X<sup>Pro</sup></h2>

<img src="https://via.placeholder.com/300" alt="Smartphone X Pro">

<p><strong>Price:</strong> <span class="price">$999.99</span></p>

<p><strong>Battery Life:</strong> 4500mAh (Supports fast charging<sub>30W</sub>)</p>

<p><strong>Stock Availability:</strong></p>

<meter value="70" min="0" max="100">70%</meter> (70% Stock Remaining)


<p><strong>Customer Rating:</strong></p>

<progress value="80" max="100"></progress> (80% Positive Reviews)

<h3>Product Overview</h3>

<p>

The latest <bdo dir="rtl">Smartphone X Pro</bdo> offers cutting-edge technology with a


powerful processor,

high-resolution camera, and fast charging.

</p>

<h3>Product Demo</h3>

<video width="100%" controls>

<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

<h3>Product Description (Audio)</h3>

<audio controls>

<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mp3">

Your browser does not support the audio tag.

</audio>

<br><br>

<button>Add to Cart</button>

<button>Buy Now</button>

</div>

</body>

</html>
4. Use CSS Rounded corners for an element with a border,

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rounded Corners</title>
<style>
.rounded-box {
width: 300px;
height: 150px;
border: 2px solid green;
border-radius: 15px; /* This makes the corners rounded */
padding: 20px;
font-size: 18px;
}
</style>
</head>
<body>

<div class="rounded-box">
Rounded corners!
</div>
</body>
</html>
5. Using HTML, CSS create a scrollable container that will snap on elements when scrolling.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrollable Snap Container</title>
<style>
body {
font-family: Arial, sans-serif;
}

.scroll-container {
width: 80%;
height: 300px;
border: 2px solid #333;
overflow-x: auto;
scroll-snap-type: x mandatory;
display: flex;
gap: 10px;
padding: 10px;
white-space: nowrap;
}

.scroll-item {
flex: 0 0 100%;
width: 100%;
height: 100%;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
border-radius: 10px;
scroll-snap-align: center;
}
</style>
</head>
<body>

<h2>Scrollable Snap Container</h2>


<p>Scroll horizontally to see the snap effect.</p>

<div class="scroll-container">
<div class="scroll-item">Item 1</div>
<div class="scroll-item" style="background-color: lightcoral;">Item 2</div>
<div class="scroll-item" style="background-color: lightgreen;">Item 3</div>
<div class="scroll-item" style="background-color: lightsalmon;">Item 4</div>
</div>

</body>
</html>
6.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Ian's Timetable</title>

</head>

<body>

<h2>Ian's Timetable</h2>

<table>

<tr>

<th rowspan="2"></th>

<th colspan="3">Morning</th>

<th>Lunch</th>

<th colspan="3">Afternoon</th>

<th colspan="4">Evening</th>

</tr>

<tr>
<td>9-10 am</td>

<td>10-11 am</td>

<td>11-12 am</td>

<td>1-2 pm</td>

<td>2-3 pm</td>

<td>3-4 pm</td>

<td>4-5 pm</td>

<td>5-6 pm</td>

<td>6-7 pm</td>

<td>7-8 pm</td>

<td>8-9 pm</td>

</tr>

<tr>

<th>Work</th>

<td colspan="3">Monday Development Meeting</td>

<td></td>

<td colspan="2">Client Meeting</td>

<td></td>

<td>commute</td>

<td colspan="3">Free</td>

</tr>

<tr>

<td></td>

<td colspan="3">Tuesday in Office</td>

<td></td>

<td colspan="3">in Office</td>

<td colspan="4"></td>

</tr>

<tr>
<th>Lecture</th>

<td colspan="3">Wednesday CSC205</td>

<td></td>

<td colspan="3">preparation</td>

<td colspan="4"></td>

</tr>

<tr>

<td></td>

<td colspan="3">Thursday MAM200</td>

<td></td>

<td colspan="3">Tutorials for MAM200</td>

<td colspan="3">Free</td>

</tr>

<tr>

<th>Research</th>

<td colspan="3">Friday Research</td>

<td></td>

<td colspan="3"></td>

<td colspan="4">Research</td>

</tr>

</table>

</body>

</html>

2.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Contact Us Form</title>

</head>

<body>

<h2>Contact Us Form Example</h2>

<form>

<label for="name">Name*:</label>

<input type="text" id="name" name="name" required>

<label for="phone">Phone number:</label>

<input type="tel" id="phone" name="phone">

<label for="email">Email address*:</label>

<input type="email" id="email" name="email" required>


<label for="comments">Comments*:</label>

<textarea id="comments" name="comments" required></textarea>

<button type="submit">Submit</button>

</form>

</body>

</html>

3. Create a basic HTML page that displays an image. The image should be centered on the page,
and it should be 300px wide while maintaining its aspect ratio.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Centered Image</title>

<style>

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f9f9f9;

margin: 0;

.image-container {

text-align: center;
}

img {

width: 300px;

height: auto; /* Maintains aspect ratio */

border: 3px solid #333;

border-radius: 10px;

margin: 20px;

box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);

</style>

</head>

<body>

<div class="image-container">

<img src="image.jpg" alt="A brief description of the image">

</div>

</body>

</html>

4. Explain the different CSS properties used to style links in their different states (unvisited,
visited, hover, and active). Provide an example of CSS code that demonstrates how to style links
using these states.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Styled Links</title>

<style>
a:link {

color: blue;

text-decoration: none;

a:visited {

color: purple;

a:hover {

color: red;

text-decoration: underline;

a:active {

color: orange;

background-color: yellow;

</style>

</head>

<body>

<h2>Styled Links Example</h2>

<p>Click on the link below to see the different styles:</p>

<a href="https://www.example.com" target="_blank">Visit Example.com</a>

</body>

</html>

5. Using HTML, CSS create a list with floating section headings that stay fixed at the top as the
user scrolls down the page.
<!DOCTYPE html>

<html lang="en">
<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Sticky List Headings</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f4f4f4;

.container {

width: 50%;

margin: 20px auto;

height: 400px; /* Fixed height for scrolling */

overflow-y: auto; /* Enables vertical scrolling */

background: #fff;

border: 1px solid #ddd;

border-radius: 8px;

box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);

.section-header {

position: sticky;

top: 0;

background: #007bff;

color: white;

padding: 10px;
font-size: 18px;

font-weight: bold;

z-index: 10; /* Keeps headers above content */

border-bottom: 2px solid #0056b3;

.list-item {

padding: 10px;

border-bottom: 1px solid #ddd;

background: white;

</style>

</head>

<body>

<div class="container">

<div class="section-header">Fruits</div>

<div class="list-item">Apple</div>

<div class="list-item">Banana</div>

<div class="list-item">Mango</div>

<div class="list-item">Grapes</div>

<div class="list-item">Orange</div>

<div class="section-header">Vegetables</div>

<div class="list-item">Carrot</div>

<div class="list-item">Broccoli</div>

<div class="list-item">Spinach</div>

<div class="list-item">Tomato</div>

<div class="list-item">Onion</div>
<div class="section-header">Dairy</div>

<div class="list-item">Milk</div>

<div class="list-item">Cheese</div>

<div class="list-item">Butter</div>

<div class="list-item">Yogurt</div>

<div class="section-header">Beverages</div>

<div class="list-item">Tea</div>

<div class="list-item">Coffee</div>

<div class="list-item">Juice</div>

<div class="list-item">Smoothie</div>

</div>

</body>

</html>

You might also like