Web Lab 1 and 2

1. 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.)
// 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>
<style>
.moving-text {
font-size: 24px;
color: blue;
animation: moveText 50s infinite;
}
@keyframes moveText {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
</style>
</head>
<body>

<div class="moving-text">Basic HTML Tags</div>

<h1>This is a Heading 1</h1>

<p>This is a paragraph. It is used to define a block of text. Paragraphs are used to separate different
sections of content.</p>

<hr>


<p>This is a paragraph with a line break.<br>Here is the text after the line break.</p>

<blockquote>
<p>This is a blockquote. Blockquotes are used for displaying quotations from other sources. They are
typically indented from the rest of the content.</p>
</blockquote>

<pre>
This is a preformatted text block.
It preserves both spaces and line breaks.
Preformatted text is often used for displaying code.
</pre>

<p>
<b>This text is bold.</b><br>
<u>This text is underlined.</u><br>
<sub>This text is subscript.</sub><br>
<sup>This text is superscript.</sup><br>
<i>This text is italicized.</i><br>
<mark>This text is highlighted.</mark>
</p>
</body>
</html>
Explanation of the Tags Used:

1.Moving Text:
This tag creates a moving text effect using CSS animations. The text "Basic HTML Tags" will scroll
across the screen.
2. Heading Tags:
These tags define headings of various levels, with <h1> being the largest and most important,
down to <h6>, which is the smallest.
3. Paragraph:
The <p> tag defines a paragraph of text. It automatically adds space before and after the
paragraph.
4.Horizontal Line:
The <hr> tag creates a horizontal line, which is typically used to separate content.
5.Line Break:
The <br> tag inserts a line break within text, allowing content to continue on the next line.
6. Block Quote:
The <blockquote> tag is used for displaying quotes from other sources. It typically indents the
quoted text.
7. Preformatted Text:
The <pre> tag displays text in a fixed-width font and preserves both spaces and line breaks.
8.Different Logical Styles:
<b>: Makes the text bold.
<u>: Underlines the text.
<sub>: Renders the text as subscript.
<sup>: Renders the text as superscript.
<i>: Italicizes the text.
<mark>: Highlights the text, often used to denote important content.

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 colour options for rows
// Table.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>
<style>
table {
width: 100%;
border-collapse: collapse;
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
th {
background-color: #f4f4f4;
}
.highlight-lab {
background-color: #d1e7dd; /* Light green for lab hours */
.highlight-elective {
background-color: #cfe2f3; /* Light blue for elective hours */
.highlight-weekend {
background-color: #f9c2c2; /* Light red for weekends */
.break {
background-color: #ffe599; /* Light yellow for breaks */
.header, .footer {
background-color: #e2e2e2;
font-weight: bold;
</style>
</head>
<body>
<h1>Class Time Table</h1>
<table>

<thead>
<tr>
<th rowspan="3">Time</th>
<th colspan="6">Monday to Saturday</th>
</tr>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<th colspan="6">Schedule</th>
</tr>
</thead>

<tbody>
<tr>
<td>9:00 - 10:00</td>
<td class="highlight-elective">Math</td>
<td class="highlight-elective">Physics</td>
<td class="highlight-elective">Computer Science</td>
<td class="highlight-weekend">Rest</td>
</tr>
<tr>
<td>10:00 - 11:00</td>
<td class="highlight-lab">Chemistry Lab</td>
<td class="highlight-lab">Lab</td>
<td class="highlight-lab">Chemistry Lab</td>
</tr>
<tr>
<td class="break">11:00 - 11:10</td>
<td class="break" colspan="6">Short Break</td>
</tr>
<tr>
<td>11:10 - 12:00</td>
<td>English</td>
<td>English</td>
<td>English</td>
<td>English</td>
<td>English</td>
</tr>
<tr>
<td>12:00 - 1:00</td>
<td>History</td>
<td>History</td>
<td>History</td>
<td>History</td>
<td>History</td>
</tr>
<tr>
<td class="break">1:00 - 1:10</td>
<td class="break" colspan="6">Lunch Break</td>
</tr>
<tr>
<td>1:10 - 2:00</td>
<td class="highlight-elective">Elective 1</td>
</tr>
<tr>
<td>2:00 - 3:00</td>
<td class="highlight-lab">Biology Lab</td>
<td class="highlight-lab">Biology Lab</td>
</tr>
<tr>
<td>3:00 - 4:00</td>
<td>Physical Education</td>
</tr>
</tbody>

<tfoot>
<tr>
<td colspan="7" class="footer">End of Time Table</td>
</tr>
</tfoot>
</table>
</body>
</html>

Web Lab 1 and 2

Uploaded by

Copyright:

Available Formats

Web Lab 1 and 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Lab 1 and 2

Uploaded by

Copyright:

Available Formats

1. Develop the HTML page named as “Myfirstwebpage.html”.

Add the following tags with relevant

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)

h) Different Logical Style (<b>, <u>, <sub>, <sup> etc.)

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

<title>My First Web Page</title>

animation: moveText 50s infinite;

from { transform: translateX(100%); }

<div class="moving-text">Basic HTML Tags</div>

<h1>This is a Heading 1</h1>

<h2>This is a Heading 2</h2>

<h3>This is a Heading 3</h3>

<h4>This is a Heading 4</h4>

<h5>This is a Heading 5</h5>

<h6>This is a Heading 6</h6>

This is a preformatted text block.

It preserves both spaces and line breaks.

Preformatted text is often used for displaying code.

<b>This text is bold.</b><br>

<u>This text is underlined.</u><br>

<sub>This text is subscript.</sub><br>

<sup>This text is superscript.</sup><br>

<i>This text is italicized.</i><br>

<mark>This text is highlighted.</mark>

Explanation of the Tags Used:

8.Different Logical Styles:

<b>: Makes the text bold.

<u>: Underlines the text.

<sub>: Renders the text as subscript.

<sup>: Renders the text as superscript.

<i>: Italicizes the text.

<mark>: Highlights the text, often used to denote important content.

c) Provide colour options for rows

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

border: 1px solid #ddd;

background-color: #d1e7dd; /* Light green for lab hours */

background-color: #cfe2f3; /* Light blue for elective hours */

background-color: #f9c2c2; /* Light red for weekends */

background-color: #ffe599; /* Light yellow for breaks */

<h1>Class Time Table</h1>

<th colspan="6">Monday to Saturday</th>

<td class="highlight-elective">Computer Science</td>

<td class="highlight-lab">Chemistry Lab</td>

<td class="highlight-lab">Chemistry Lab</td>

<td class="break">11:00 - 11:10</td>

<td class="break" colspan="6">Short Break</td>