BCSL504 | Web Technology Lab|
Laboratory Components
1. HTML Basics "Myfirstwebpage.html" - Fundamental HTML tags and structures
2. HTML Tables "Table.html" - Create a class timetable with advanced table features
3. External CSS Styling "style.css" - Demonstrate various CSS selectors and styles
4. HTML Forms with CSS "registration.html" - Input elements styled with CSS
5. Semantic HTML and CSS "newspaper.html" - Use of semantic elements with
styling
6. JavaScript Calculator Simple calculator with multiple operations
7. JavaScript and JSON JSON manipulation, conversion, and hashing
8. PHP and Databases Visitor counter and database sorting with PHP
9. jQuery DOM Manipulation Content appending, animation, and color changing
10. Ajax Operations Ajax requests with and without jQuery, JSON handling
Dept. CSE Page 1
BCSL504 | Web Technology Lab|
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.)
Program:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
Dept. CSE Page 2
BCSL504 | Web Technology Lab|
<body>
<marquee>Basic HTML Tags</marquee>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
<p>This is a paragraph. It demonstrates the use of the paragraph tag in
HTML. Paragraphs are used to group related content together.</p>
<hr>
<p>This is another paragraph.<br>This text appears on a new line due to the
line break tag.</p>
<blockquote>
This is a block quote. It's often used to highlight quoted text from another
source.
</blockquote>
<pre>
This is preformatted text.
It preserves both spaces and
line breaks, making it useful
Dept. CSE Page 3
BCSL504 | Web Technology Lab|
for displaying code or ASCII art.
</pre>
<p>
Here are examples of logical styles:<br>
<b>Bold text</b><br>
<i>Italic text</i><br>
<u>Underlined text</u><br>
<strong>Strong text</strong><br>
<em>Emphasized text</em><br>
Text with <sub>subscript</sub> and <sup>superscript</sup>
</p>
</body>
</html>
Explanation
Step 1: Document Structure
<!DOCTYPE html>: This declaration tells the browser that this is an HTML5 document.
<html >: The root element of the HTML page.
<head>: This section contains metadata about the document.
<body>: This section contains the visible content of the webpage.
Dept. CSE Page 4
BCSL504 | Web Technology Lab|
Step 2: The Head Section
<title>: Sets the title of the webpage, which appears in the browser tab.
Step 3: The Body Content
<marquee>: Creates scrolling text (Note: This tag is outdated and not recommended for
modern websites).
Headings: <h1> to <h6> tags represent six levels of section headings, with <h1> being the
highest (most important) and <h6> the lowest.
<p>: Defines a paragraph of text.
<hr>: Creates a horizontal line, often used to separate content.
<br>: Inserts a single line break.
<blockquote>: Used for quoting content from another source.
<pre>: Defines preformatted text, which preserves both spaces and line breaks.
Step 4: Text Formatting
<b> and <strong>: Both typically display text in bold. <strong> is preferred as it adds
semantic meaning of strong importance.
<i> and <em>: Both typically display text in italics. <em> is preferred as it adds semantic
meaning of emphasis.
<u>: Underlines text (use with caution as it can be confused with hyperlinks).
<sub>: Defines subscript text.
<sup>: Defines superscript text.
Dept. CSE Page 5
BCSL504 | Web Technology Lab|
Experiment-02
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.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Time Table</title>
</head>
<body>
<table border=2>
<thead>
<tr>
<th colspan="7">Class Time Table</th>
</tr>
<tr>
Dept. CSE Page 6
BCSL504 | Web Technology Lab|
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00 - 10:00</td>
<td>Math</td>
<td>English</td>
<td>Science</td>
<td>History</td>
<td>Geography</td>
<td rowspan="6">No Classes</td>
</tr>
<tr class="odd-row">
Dept. CSE Page 7
BCSL504 | Web Technology Lab|
<td>10:00 - 11:00</td>
<td>Physics</td>
<td>Chemistry</td>
<td>Biology</td>
<td class="elective-hours">Computer Science</td>
<td class="elective-hours">Art</td>
</tr>
<tr>
<td>11:00 - 12:00</td>
<td class="lab-hours" colspan="2">Physics Lab</td>
<td class="lab-hours" colspan="2">Chemistry Lab</td>
<td class="lab-hours">Biology Lab</td>
</tr>
<tr class="odd-row">
<td>12:00 - 13:00</td>
<td class="lunch" colspan="5">Lunch Break</td>
</tr>
<tr>
<td>13:00 - 14:00</td>
<td>Literature</td>
Dept. CSE Page 8
BCSL504 | Web Technology Lab|
<td>Math</td>
<td>English</td>
<td>Physics</td>
<td>Chemistry</td>
</tr>
<tr class="odd-row">
<td>14:00 - 15:00</td>
<td class="elective-hours">Music</td>
<td class="elective-hours">Drama</td>
<td class="lab-hours" colspan="3">Computer Lab</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="7">* Lab hours are highlighted in pink, elective hours in light
green</td>
</tr>
</tfoot>
</table>
</body>
Dept. CSE Page 9
BCSL504 | Web Technology Lab|
</html>
Explanation
Step 1: Document Structure
The document starts with the standard HTML5 declaration and structure.
The <head> section contains metadata and styling information.
The <body> section contains the visible content, which in this case is a table.
Step 2: Table Structure
The table is created using the <table> tag.
It has three main parts: <thead> (table header), <tbody> (table body), and <tfoot>
(table footer).
Step 3: Table Header (<thead>)
The first row spans all columns and displays "Class Time Table".
The second row shows the days of the week and a "Time" column.
Step 4: Table Body (<tbody>)
Each <tr> represents a row in the timetable.
The first column in each row shows the time slot.
Subsequent columns represent different subjects for each day.
Special formatting is applied to certain cells:
Lab hours are highlighted in pink.
Dept. CSE Page 10
BCSL504 | Web Technology Lab|
Elective hours are highlighted in light green.
The lunch break spans across multiple columns.
The "Saturday" column spans multiple rows to show "No Classes".
Alternate rows have a slightly different background color for better readability.
Step 5: Special Cell Attributes
colspan is used to make cells span multiple columns (e.g., for labs and lunch).
rowspan is used to make the "Saturday" cell span multiple rows.
Classes are applied to cells for specific styling (e.g., "lab-hours", "elective-hours").
Step 6: Table Footer (<tfoot>)
The footer provides a legend explaining the color coding used in the table.
This HTML document demonstrates several important concepts:
Table structure and formatting
Use of CSS for styling
Cell spanning (both rows and columns)
Color coding for different types of classes
Responsive design considerations (though the table itself isn't responsive)
Dept. CSE Page 11
BCSL504 | Web Technology Lab|
Experiment-03
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.
Program:
Style.html
<!DOCTYPE html>
<html>
<head>
<title>Sample Styled Page (No Div)</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main id="main-content">
<h2>Welcome to Our Styled Page</h2>
Dept. CSE Page 12
BCSL504 | Web Technology Lab|
<p>This is a paragraph right after an h2. It demonstrates the adjacent
sibling selector.</p>
<h3>Hover over me!</h3>
<hr>
<p >This paragraph has a lang attribute, demonstrating the attribute
selector.</p>
<p>Here's a <span class="highlight">highlighted</span> word using the
class selector.</p>
<section>
<p>This paragraph is inside a section, showing the descendant
selector.</p>
<span>This span is a direct child of the section.</span>
</section>
<p>The current date and time: <time datetime="2023-08-31">August 31,
2023</time></p>
<p>Notice how the first letter of each paragraph is styled differently.</p>
<article class="special">
<p>This paragraph is inside an article with class="special".</p>
</article>
Dept. CSE Page 13
BCSL504 | Web Technology Lab|
<img src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="A placeholder image" >
<p>Check out this <a href=”https://vtu.ac.in/”
target=”_blank”>link</a> to seedifferent link states.</p>
</main>
</body>
</html>
Style.css
/* Element Selector */
h2 {
color: #2c3e50;
font-family: 'Arial', sans-serif;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
/* Element Selector with Pseudo-class */
h3:hover {
color: #e74c3c;
cursor: pointer;
transition: color 0.3s ease;
Dept. CSE Page 14
BCSL504 | Web Technology Lab|
}
/* Element Selector */
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0,
0.75), rgba(0, 0, 0, 0));
/* Element Selector with Attribute */
p[lang] {
font-style: italic;
/* Class Selector */
.highlight {
background-color: #f1c40f;
padding: 5px;
Dept. CSE Page 15
BCSL504 | Web Technology Lab|
/* ID Selector */
#main-content {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #ecf0f1;
/* Descendant Selector */
div p {
line-height: 1.6;
margin-bottom: 15px;
/* Child Selector */
div > span {
font-weight: bold;
color: #16a085;
/* Adjacent Sibling Selector */
Dept. CSE Page 16
BCSL504 | Web Technology Lab|
h2 + p {
font-size: 1.1em;
color: #7f8c8d;
/* Attribute Selector */
time[datetime] {
color: #8e44ad;
font-weight: bold;
/* Pseudo-element Selector */
p::first-letter {
font-size: 1.5em;
font-weight: bold;
color: #c0392b;
/* Multiple Selectors */
img, a {
Dept. CSE Page 17
BCSL504 | Web Technology Lab|
border: 1px solid #bdc3c7;
padding: 5px;
/* Pseudo-class Selector for Links */
a:link, a:visited {
color: #3498db;
text-decoration: none;
a:hover, a:active {
color: #e74c3c;
text-decoration: underline;
/* Attribute Selector for Images */
img[alt] {
Dept. CSE Page 18
BCSL504 | Web Technology Lab|
max-width: 100%;
height: auto;
/* Combining Selectors */
div.special p {
text-indent: 20px;
color: #27ae60;
Explanation
Step 1: HTML Structure
The document starts with the standard HTML5 declaration and basic structure.
The <head> section includes metadata, title, and a link to an external CSS file
(style.css).
The <body> contains a <main> element with the id "main-content", which holds all
the visible content.
Step 2: Main Content Structure
The main content includes various HTML elements like h2, h3, p, hr, section, article,
img, and a.
Dept. CSE Page 19
BCSL504 | Web Technology Lab|
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
Syntex:- <img src="pic_trulli.jpg" alt="Italian Trulli">
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which indicates
the link's destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.
HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
Example:-
Use target="_blank" to open the linked document in a new browser window or tab:
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Dept. CSE Page 20
BCSL504 | Web Technology Lab|
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements - which is then styled with
CSS or manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
Any sort of content can be put inside the <div> tag!
Ex:- <div style=” border: 5px outset red; background-color: lightblue; text-
align: center;”>
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
The <span> tag is an inline container used to mark up a part of a text, or a part
of a document.
The <span> tag is easily styled by CSS or manipulated with JavaScript using the
class or id attribute.
The <span> tag is much like the <div> element, but <div> is a block-level element
and <span> is an inline element.
Ex:- <p>My mother has <span style="color:blue">blue</span> eyes.</p>
These elements demonstrate different CSS selectors and properties.
Step 3: CSS Styling (from style.css)
Element Selectors:
h2: Styled with color, font-family, border-bottom, and
Dept. CSE Page 21
BCSL504 | Web Technology Lab|
padding. h3: Has a hover effect changing color with a
transition.
hr: Styled as a gradient
line.
Attribute Selectors:
p[lang]: Applies italic style to paragraphs with a lang attribute.
time[datetime]: Styles time elements with a datetime attribute.
img[alt]: Ensures responsive sizing for images with alt text.
Class Selector:
.highlight: Applies background color and
padding.
ID Selector:
#main-content: Sets max-width, margin, padding, and background color.
Dept. CSE Page 22
BCSL504 | Web Technology Lab|
Descendant Selector:
div p: Styles paragraphs inside divs (note: no divs in this HTML, so this won't apply).
Child Selector:
<div > span: Styles spans that are direct children of divs (also won't apply here).
Adjacent Sibling Selector:
h2 + p: Styles paragraphs immediately following h2
elements.
Pseudo-element Selector:
p::first-letter: Styles the first letter of each paragraph.
Multiple Selectors:
img, a: Applies border and padding to both images and
links.
Pseudo-class Selectors for Links:
a:link, a:visited, a:hover, a:active: Different styles for various link states.
Combining Selectors:
div.special p: Would style paragraphs in divs with class "special" (not applicable
here).
Dept. CSE Page 23
BCSL504 | Web Technology Lab|
Step 4: Specific Content and Styling Examples
The h2 and following p demonstrate the adjacent sibling selector.
The h3 has a hover effect.
A paragraph with lang="en" shows the attribute selector in action.
The "highlight" class is applied to a span within a paragraph.
A section with a paragraph and span demonstrates descendant and child selectors
(though the CSS for div won't apply).
The <time> element shows the datetime attribute selector.
An article with class="special" is included, but the CSS for div.special won't apply.
An image and a link are included to demonstrate various selectors and responsive
design.
Dept. CSE Page 24
