Scribd
Upload
117 views11 pages

Web Lab PGM 1 To 3

Uploaded by

mywebgemini
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
117 views11 pages

Web Lab PGM 1 To 3

Uploaded by

mywebgemini
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/ 11

EXPERIMENT - 01

Develop the HTML page named as “Myfirstwebpage.html”. Add the following tags with
relevant content.
1. Set the title of the page as “My First Web Page”
2. Within the body use the following tags:
a) Moving text = “Basic HTML Tags”
b) Different heading tags (h1 to h6)
c) Paragraph
d) Horizontal line
e) Line Break
f) Block Quote
g) Pre tag
h) Different Logical Style (<b>, <u>, <sub>, <sup> etc.)

Code:
Myfirstwebpage.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<!-- Moving Text -->
<marquee>Basic HTML Tags</marquee>
<!-- Different Heading Tags -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<!-- Paragraph -->
<p>This is a paragraph demonstrating basic HTML tags and their usage.</p>
<!-- Horizontal Line -->
<hr>
<!-- Line Break -->
This is some text. <br> This is the next line after a line break.
<!-- Block Quote -->
<blockquote>
"This is a block quote, usually used for quoting someone or something significant."
</blockquote>
<!-- Preformatted Text -->
<pre>
This is preformatted text.
It preserves
the whitespace
and line breaks.
</pre>
<!-- Different Logical Styles -->
<p>
This is <b>bold</b> text. <br>
This is <i>italic</i> text. <br>
This is <u>underlined</u> text. <br>
This is <strike>strikethrough</strike> text. <br>
This is <sup>superscript</sup> text. <br>
This is <sub>subscript</sub> text. <br>
This is <strong>strong</strong> text. <br>
This is <em>emphasized</em> text.
</p>
</body>
</html>

Sample Output:
EXPERIMENT 2
Develop the HTML page named as “Table.html” to display your class time table.
a) Provide the title as Time Table with table header and table footer, row-span and col-span
etc.
b) Provide various colour options to the cells (Highlight the lab hours and elective hours
with different colours.)
c) Provide color options for rows.
Code:
TimeTable.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Table</title>
<!-- Internal style -->
<style>
/* Table is set to 60% width, with borders collapsed for a neat look, and
text centered */
table {
width: 60%;
border-collapse: collapse;
text-align: center;
}
/* Style for table headers and cells with black borders and padding for
spacing */
th, td {
border: 1px solid black;
padding: 10px;
}
/* Header background is green with white text for clear visibility */
th {
background-color: green;
color: white;
}
/* Footer cells have a light gray background with bold text for emphasis */
tfoot td {
background-color: lightgray;
font-weight: bold;
}
/* Special class for lab hours: highlighted with light coral */
.lab {
background-color: lightcoral; /* Highlight lab hours */
}
/* Special class for elective hours: highlighted with light green */
.elective {
background-color: lightgreen; /* Highlight elective hours */
}
/* Rows alternate between light yellow (even rows) and light cyan (odd
rows) for better readability */
tr:nth-child(even) {
background-color: lightyellow;
}
tr:nth-child(odd) {
background-color: lightcyan;
}
</style>
</head>
<body>

<!-- Heading for the time table -->


<h1>Class Time Table</h1>

<!-- Main table for displaying the time table -->


<table>
<thead>
<!-- Table title spanning 8 columns -->
<tr>
<th colspan="8">Time Table</th>
</tr>
<!-- Table headers for the days and time slots -->
<tr>
<th>Day</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>1:00 - 2:00</th>
<th>2:00 - 3:00</th>
<th>3:00 - 4:00</th>
</tr>
</thead>
<tbody>
<!-- Data rows with specific subjects and elective or lab highlights -->
<tr>
<td>Monday</td>
<td>TOC</td> <!-- Theory of Computation -->
<td>SE</td> <!-- Software Engineering -->
<td>CN</td> <!-- Computer Networks -->
<td>EVS</td> <!-- Environmental Studies -->
<td class="elective">Elective: AI</td> <!-- Highlight elective (AI) -->
<td>AI</td> <!-- Artificial Intelligence -->
<td>RM</td> <!-- Research Methodology -->
</tr>
<tr>
<td>Tuesday</td>
<td>SE</td>
<td>TOC</td>
<td>CN</td>
<td>EVS</td>
<td>AI</td>
<!-- Lab session spanning 2 hours -->
<td class="lab" colspan="2">WEB LAB (2 Hours)</td> <!-- Highlight
lab -->
</tr>
<tr>
<td>Wednesday</td>
<td>TOC</td>
<td>SE</td>
<td>CN</td>
<td class="elective">Elective: RM</td> <!-- Highlight elective
(Research Methodology) -->
<!-- Lab session spanning 3 hours -->
<td colspan="3" class="lab">WEB LAB (2 Hours)</td> <!-- Highlight
lab -->
</tr>
<tr>
<td>Thursday</td>
<td>CN</td>
<td>SE</td>
<td>AI</td>
<td>TOC</td>
<td>EVS</td>
<td class="elective">Elective: RM</td> <!-- Highlight elective -->
<td>SE</td>
</tr>
<tr>
<td>Friday</td>
<td>AI</td>
<td>TOC</td>
<td>CN</td>
<td>EVS</td>
<!-- Lab session spanning 2 hours -->
<td colspan="2" class="lab">WEB LAB (2 Hours)</td> <!-- Highlight
lab -->
<td>RM</td>
</tr>
</tbody>
<tfoot>
<!-- Footer row indicating the end of the timetable -->
<tr>
<td colspan="8">End of Timetable</td>
</tr>
</tfoot>
</table>

</body>
</html>
Sample Output:

EXPERIMENT 3
Develop an external style sheet named as “style.css” and provide different styles for h2,
h3, hr, p, div, span, time, img & a tags. Apply different CSS selectors for tags and
demonstrate the significance of each.

style.css:

/* Element Selector: Applies to all h2 elements */


h2 {
font-family: 'Courier New', Courier, monospace;
color: darkblue;
text-align: center;
border-bottom: 3px solid #333;
}

/* Element Selector: Applies to all h3 elements */


h3 {
font-size: 1.5em;
color: darkgreen;
margin-bottom: 10px;
}

/* Element Selector: Applies to all hr elements */


hr {
border: 1px solid #ccc;
margin: 20px 0;
}

/* Class Selector: Applies only to paragraphs with the 'intro' class */


p.intro {
font-size: 1.2em;
line-height: 1.6;
background-color: #f0f0f0;
padding: 15px;
}

/* ID Selector: Targets only the div with ID 'content' */


#content {
background-color: #e8e8e8;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Class Selector: Highlights text inside span elements */


span.highlight {
color: red;
font-weight: bold;
}

/* Element Selector: Applies styles to time elements */


time {
color: #555;
font-style: italic;
font-size: 0.9em;
}

/* Attribute Selector: Applies styles to img elements with an alt attribute */


img[alt] {
border: 3px solid #ddd;
border-radius: 8px;
max-width: 100%;
}

/* Pseudo-class Selector: Styles the a tag when hovered */


a:hover {
color: orange;
text-decoration: underline;
}

/* Universal Selector: Applies a border-box layout model to all elements */


*{
box-sizing: border-box;
}
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Selectors Demonstration</title>
<!-- Linking the external stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>

<!-- Applying the h2 style -->


<h2>Welcome to My Website</h2>

<!-- Applying the h3 style -->


<h3>Latest Updates</h3>

<!-- Applying the hr style -->


<hr>

<!-- Applying the p.intro style using class selector -->


<p class="intro">This is an introduction to the website. The paragraph is styled
using a class selector to emphasize its importance.</p>

<!-- Applying the div style using ID selector -->


<div id="content">
<p>This is a div styled using an ID selector. It contains a highlighted <span
class="highlight">word</span> and some important information.</p>
<!-- Applying the time element style -->
<p>Published on: <time datetime="2024-09-24">September 24,
2024</time></p>
</div>

<!-- Applying the img style using attribute selector -->


<img src="example.jpg" alt="Sample Image">

<!-- Applying the a:hover pseudo-class -->


<p>Check out our <a href="#">latest article</a> to learn more!</p>
</body>
</html>

Sample Output:

You might also like