Scribd
Upload
10 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
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
10 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
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/ 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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy