Scribd
Upload
9 views

WT lab

The document is a web technology lab manual that includes various HTML examples such as a simple web page, a timetable, a styled HTML page, a registration form, and a newspaper layout. Each section demonstrates different HTML elements, CSS styles, and layouts, showcasing how to structure and style web content effectively. It serves as a practical guide for learning web development fundamentals.

Uploaded by

debugthebug336
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

WT lab

The document is a web technology lab manual that includes various HTML examples such as a simple web page, a timetable, a styled HTML page, a registration form, and a newspaper layout. Each section demonstrates different HTML elements, CSS styles, and layouts, showcasing how to structure and style web content effectively. It serves as a practical guide for learning web development fundamentals.

Uploaded by

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

WEB TECHNOLOGY LAB MANUAL

1. <!DOCTYPE html>
<head>
< tle>My First Web Page | vtucode</ tle>
</head>
<body>
<!-- Moving text -->
<marquee>Welcome to vtucode</marquee>

<!-- Different heading tags -->


<h1>This is an H1 heading</h1>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>
<h4>This is an H4 heading</h4>
<h5>This is an H5 heading</h5>
<h6>This is an H6 heading</h6>
<!-- Paragraph -->
<p>This is a paragraph demonstra ng the use of the paragraph tag in
HTML.</p>
<!-- Horizontal line -->
<hr>
<!-- Line break -->
<p>This is a line of text before the break.<br>This is a line of text a er the
break.</p>
<!-- Block Quote -->
<blockquote>
This is a blockquote. It is used to display a quota on or excerpt from
another source.
</blockquote>
<!-- Pre tag -->
<pre>
This is preforma ed text.
It preserves spaces and line breaks.
</pre>

<!-- Different Logical Style tags -->


<p>This is <b>bold</b> text.</p>
<p>This is <i>italicized</i> text.</p>
<p>This is <u>underlined</u> text.</p>
<p>This is <sup>superscript</sup> text.</p>
<p>This is <sub>subscript</sub> text.</p>
<p>This is <em>emphasized</em> text.</p>
<p>This is <strong>strong</strong> text.</p>
<p>This is <mark>highlighted</mark> text.</p>
<p>This is <small>small</small> text.</p>
<p>This is <del>deleted</del> text.</p>
<p>This is <ins>inserted</ins> text.</p>
<p>This is <code>inline code</code> text.</p>
</body>
</html>
2. <!DOCTYPE html>
<head>
< tle>Time Table | vtucode</ tle>
<style>
body {
font-family: Arial, sans-serif;
}
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}

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>

<p>Current me: < me>10:30 AM</ me></p>

<img src="h ps://vtucode.in/wp-content/uploads/2024/08/Web-


Technology-Lab.jpg" alt="Placeholder Image">

<p>Visit <a href="h ps://vtucode.in">vtucode.in</a> to learn more


about our services.</p>
<p class="highlight">This paragraph is highlighted with a yellow
background.</p>
<p class="center">This text is centered using a class selector.</p>

<p id="special-paragraph">This is a special paragraph with unique styles


applied through an ID selector.</p>
</body>
</html>

*{
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 {

content: ' ';


color: #16a085;
}

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>

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


</div>
<div class="form-group">
<label>Gender:</label>
<div class="gender-op ons">
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</div>
</div>
<div class="form-group">
<label for="country">Country:</label>
<select id="country" name="country">
<op on value="usa">USA</op on>
<op on value="canada">Canada</op on>
<op on value="uk">UK</op on>
<op on value="india">India</op on>
</select>
</div>
<div class="form-group">
<label for="bio">Bio:</label>
<textarea id="bio" name="bio" rows="4"></textarea>
</div>
<div class="bu on-group">
<input type="submit" value="Register">
<input type="reset" value="Reset">
</div>
</form>

</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;
}

@media (max-width: 600px) {

th,
td {
padding: 8px;
font-size: 14px;
}
}

cap on {
background-color: #d9d9d9;
padding: 10px;
font-weight: bold;
border-bo om: 2px solid #ddd;

border-radius: 8px 8px 0 0;


font-size: 1.1em;
color: #333;
}

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 ;
}

@media (max-width: 768px) {


.content {
flex-direc on: column;
padding: 10px;
}

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>

<h2>Ar cle Title 2</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 second 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 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>

You might also like