WT lab
WT lab
1. <!DOCTYPE html>
<head>
< tle>My First Web Page | vtucode</ tle>
</head>
<body>
<!-- Moving text -->
<marquee>Welcome to vtucode</marquee>
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f4f4f4;
color: #333;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:nth-child(odd) {
background-color: #e6f7ff;
}
.lab-hour {
background-color: #ffcccc;
}
.elec ve-hour {
background-color: #ccffcc;
}
.highlight {
font-weight: bold;
color: #d63384;
}
oot {
background-color: #e0e0e0;
font-weight: bold;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Time Table</h1>
<table>
<thead>
<tr>
<th>Day/Time</th>
<th>9:00 - 10:00</th>
<th>10:00 - 11:00</th>
<th>11:00 - 12:00</th>
<th>12:00 - 1:00</th>
<th>Lunch Break</th>
<th>2:00 - 3:00</th>
<th>3:00 - 4:00</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>Math</td>
<td>English</td>
<td class="lab-hour">Physics Lab</td>
<td>Elec ve</td>
<td rowspan="5" class="highlight">Break</td>
<td class="elec ve-hour">Elec ve</td>
<td>History</td>
</tr>
<tr>
<td>Tuesday</td>
<td class="elec ve-hour">Elec ve</td>
<td>Biology</td>
<td>Math</td>
<td class="lab-hour">Chemistry Lab</td>
<td>Geography</td>
<td>PE</td>
</tr>
<tr>
<td>Wednesday</td>
<td>History</td>
<td class="lab-hour">Computer Lab</td>
<td>English</td>
<td>Math</td>
<td>Physics</td>
<td class="elec ve-hour">Elec ve</td>
</tr>
<tr>
<td>Thursday</td>
<td>PE</td>
<td>History</td>
<td>Geography</td>
<td class="elec ve-hour">Elec ve</td>
<td>Biology</td>
<td>Math</td>
</tr>
<tr>
<td>Friday</td>
<td class="lab-hour">Biology Lab</td>
<td>Math</td>
<td>English</td>
<td>Physics</td>
<td class="elec ve-hour">Elec ve</td>
<td>Chemistry</td>
</tr>
</tbody>
< oot>
<tr>
<td colspan="8">End of Timetable</td>
</tr>
</ oot>
</table>
</body>
</html>
3. <!DOCTYPE html>
<head>
< tle>Styled HTML Page | vtucode</ tle>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Main Heading</h2>
<h3>Subheading</h3>
<hr>
<p>This is a paragraph demonstra ng the basic text styling applied by
CSS.</p>
<div>
This is a styled <strong>div</strong> element with padding and a light
border. Inside the div, we can also use
<span>span elements</span> that have their own styles, like this bold
and orange text.
</div>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h2 {
color: #2c3e50;
font-size: 2em;
margin-bo om: 10px;
}
h3 {
color: #34495e;
font-size: 1.5em;
margin-bo om: 8px;
}
hr {
border: 0;
height: 2px;
background-color: #e74c3c;
margin: 20px 0;
}
p{
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 10px 0;
}
div {
padding: 15px;
border: 1px solid #bdc3c7;
background-color: #ecf0f1;
}
span {
color: #e67e22;
font-weight: bold;
}
me::before {
img {
margin-le : 15px;
height: 300px;
width: 400px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
max-width: 100%;
}
a{
text-decora on: none;
color: #ea0e4c;
}
a:hover {
color: #6200ee;
text-decora on: underline;
}
.highlight {
background-color: yellow;
padding: 3px;
}
.center {
text-align: center;
}
#special-paragraph {
font-size: 1.2em;
color: #8e44ad;
background-color: #f5f5f5;
padding: 10px;
border-le : 5px solid #8e44ad;
}
h2,
h3,
p{
margin-le : 20px;
}
4. <!DOCTYPE html>
<head>
< tle>Registra on Form | vtucode</ tle>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f4f8;
margin: 0;
padding: 20px;
display: flex;
jus fy-content: center;
align-items: center;
min-height: 100vh;
}
.container {
width: 100%;
max-width: 600px;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direc on: column;
gap: 20px;
}
h2 {
text-align: center;
color: #333;
margin: 0;
}
.form-group {
display: flex;
flex-direc on: column;
gap: 5px;
margin-bo om: 10px;
}
label {
font-size: 14px;
color: #555;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
.gender-op ons {
display: flex;
gap: 10px;
align-items: center;
}
input[type="submit"],
input[type="reset"] {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
flex: 1;
}
.bu on-group {
display: flex;
gap: 10px;
jus fy-content: center;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
}
input[type="reset"] {
background-color: #f44336;
color: white;
}
.form-group textarea {
margin-bo om: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>Registra on Form</h2>
<form ac on="#" method="post">
<div class="form-group">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required>
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
</div>
</body>
</html>
5. <!DOCTYPE html>
<head>
< tle>Newspaper Page | vtucode</ tle>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px;
font-family: 'Arial', sans-serif;
color: #000000;
display: flex;
flex-direc on: column;
min-height: 100vh;
}
header {
margin-bo om: 30px;
border-radius: 10px;
align-items: center;
background-color: #7b38f7;
color: #fff;
padding: 20px;
display: flex;
jus fy-content: space-between;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
header a {
font-size: 25px;
font-weight: 600;
color: #fff;
text-decora on: none;
}
nav {
display: flex;
gap: 20px;
color: #fff;
text-align: center;
}
nav a {
font-size: 18px;
color: #fff;
text-decora on: none;
font-weight: bold;
}
nav a:hover {
text-decora on: underline;
}
.content {
display: flex;
jus fy-content: space-between;
flex: 1;
margin: auto;
padding: 20px 0;
gap: 20px;
posi on: rela ve;
}
.main-content {
cursor: pointer;
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
background-color: #fff;
border-radius: 12px;
padding: 25px;
box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}
aside {
border: 1px solid #ccc;
padding: 20px;
width: 350px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
posi on: -webkit-s cky;
posi on: s cky;
top: 20px;
color: #333;
right: 0;
margin-le : 20px;
}
.related-news h3 {
text-align: center;
border-radius: 7px;
padding: 8px;
background: #000;
color: #ffffff;
font-size: 1.4em;
margin-bo om: 15px;
}
.related-news ul {
list-style: outside;
padding: 7px;
margin: 0;
}
.related-news li {
margin-bo om: 12px;
}
.related-news a {
text-decora on: none;
color: #7b38f7;
font-weight: bold;
transi on: color 0.3s ease;
}
.related-news a:hover {
text-decora on: underline;
}
footer {
border-radius: 10px;
background-color: #7b38f7;
color: #fff;
padding: 20px;
font-weight: 500;
text-align: center;
margin-top: auto;
font-size: 18px;
}
ar cle {
transi on: all 0.3s ease;
background-color: #fff;
padding: 15px;
box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
border-radius: 7px;
color: #000000;
}
figure {
background-color: #fafafa;
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
text-align: center;
margin: 0;
}
figcap on {
font-size: 0.9em;
color: #666;
}
img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
sec on {
padding: 20px;
width: 100%;
background-color: #fff;
border-radius: 8px;
box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}
sec on h2 {
color: #fff;
background: #000;
font-size: 24px;
border-radius: 10px;
text-align: center;
padding: 10px;
margin-bo om: 30px;
}
table {
width: 100%;
border-collapse: collapse;
}
cap on {
font-size: 18px;
margin-bo om: 10px;
color: #555;
}
thead {
background-color: #007BFF;
color: #fff;
}
th,
td {
padding: 12px;
text-align: le ;
}
th {
font-weight: bold;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tbody tr:hover {
background-color: #eaeaea;
}
th,
td {
padding: 8px;
font-size: 14px;
}
}
cap on {
background-color: #d9d9d9;
padding: 10px;
font-weight: bold;
border-bo om: 2px solid #ddd;
sec on {
margin-top: 40px;
margin-bo om: 50px;
}
ar cle h2 {
color: #7b38f7;
font-size: 1.3em;
margin-bo om: 12px;
}
ar cle p {
text-align: le ;
line-height: 1.2;
margin-top: 10px;
}
ar cle:hover {
background-color: #e7dd ;
}
aside {
width: 100%;
margin-top: 20px;
posi on: sta c;
margin-le : 0;
}
.main-content {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<header>
<a href="#">Newspaper</a>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Services</a>
<a href="#">Marke ng</a>
<a href="#">Updates</a>
</nav>
</header>
<div class="content">
<main class="main-content">
<ar cle>
<h2>Ar cle Title 1</h2>
<figure>
<img src="h ps://via.placeholder.com/600x400" alt="Placeholder Image">
<figcap on>Image Cap on</figcap on>
</figure>
<p>This is the content of the first ar cle. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</ar cle>
<ar cle>
<ar cle>
<h2>Ar cle Title 3</h2>
<figure>
<img src="h ps://via.placeholder.com/600x400" alt="Placeholder Image">
<figcap on>Image Cap on</figcap on>
</figure>
<p>This is the content of the third ar cle. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</ar cle>
<ar cle>
<h2>Ar cle Title 4</h2>
<figure>
<img src="h ps://via.placeholder.com/600x400" alt="Placeholder Image">
<figcap on>Image Cap on</figcap on>
</figure>
<p>This is the content of the fourth ar cle. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</ar cle>
<ar cle>
<h2>Ar cle Title 5</h2>
<figure>
<img src="h ps://via.placeholder.com/600x400" alt="Placeholder Image">
<figcap on>Image Cap on</figcap on>
</figure>
<p>This is the content of the fourth ar cle. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</ar cle>
<ar cle>
<h2>Ar cle Title 6</h2>
<figure>
<img src="h ps://via.placeholder.com/600x400" alt="Placeholder Image">
<figcap on>Image Cap on</figcap on>
</figure>
<p>This is the content of the fourth ar cle. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</ar cle>
</main>
<aside class="related-news">
<h3>Related News</h3>
<ul>
<li><a href="#">Related News 1</a></li>
<li><a href="#">Related News 2</a></li>
<li><a href="#">Related News 3</a></li>
</ul>
</aside>
</div>
<sec on>
<h2>Recent Posts</h2>
<div>
<table>
<cap on>List of Posts</cap on>
<thead>
<tr>
<th>Post Title</th>
<th>Date</th>
<th>Author</th>
</tr>
</thead>
<tbody>
<tr>
<td>Post 1</td>
<td>2024-08-30</td>
<td>Author 1</td>
</tr>
<tr>
<td>Post 2</td>
<td>2024-08-29</td>
<td>Author 2</td>
</tr>
<tr>
<td>Post 3</td>
<td>2024-08-28</td>
<td>Author 3</td>
</tr>
</tbody>
</table>
</div>
</sec on>
<footer>
<p>© 2024 Newspaper. All rights reserved.</p>
</footer>
</body>
</html>