WEB TECHNOLOGY LAB MANUAL
PART-A
1)Develop and demonstrate HTML page containing basic text formatting tags,hyper link,images
<!DOCTYPE html>
<html>
<head>
<title>HTML Formatting Demo</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<h2><u>Text Formatting Examples</u> </h2>
<p><b>This is bold text</b></p>
<p><i>This is italic text</i></p>
<p><u>This is underlined text</u></p>
<p>This is <mark>highlighted</mark> text</p>
<p>This is <del>deleted</del> and <ins>inserted</ins> text</p>
<p>Water: H<sub>2</sub>O | Equation: E = mc<sup>2</sup></p>
<h2> <u>Hyperlink Example</u></h2>
<p>Visit <a href="https://www.wikipedia.org/" target="_blank">Wikipedia</a> for more
information.</p>
<h2><u>Image Example</u></h2>
<p>Here is an image:</p>
<img src="https://via.placeholder.com/200" alt="Sample Image" width="200" height="200">
</body>
</html>
2)Develop and demonstrate HTML page containing IIIsem bCA/B.sc Course time table using
table tag and its properties such as rowspan and colspan
<!DOCTYPE html>
<html>
<head>
<title>lab program 2</title>
</head>
<body>
<table border rules="all" align="center">
<caption>III semester time table</caption>
<tr align="center">
<th>day</th>
<th>9:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-01:00</th>
<th>01:00-02:00</th>
<th>02:00-03:00</th>
<th>03:00-04:00</th>
</tr>
<tr align="center">
<th>Monday</th>
<td>english</td>
<td>mathematics</td>
<td rowspan="6">break</td>
<td>programming</td>
<td>computer</td>
<td rowspan="6">lunch</td>
<td colspan="2">lab</td>
</tr>
<tr align="center">
<th>tuesday</th>
<td>maths</td>
<td>digital logic</td>
<td>programming</td>
<td>english</td>
<td>maths</td>
<td>Sports</td>
</tr>
<tr align="center">
<th>wed</th>
<td colspan="2">lab</td>
<td>maths</td>
<td>english</td>
<td>digital</td>
<td>library</td>
</tr>
<tr align="center">
<th>thurs</th>
<td>digital</td>
<td>english</td>
<td colspan="2">lab</td>
<td>maths</td>
<td>activities</td>
</tr>
<tr align="center">
<th>fri</th>
<td>programming</td>
<td>maths</td>
<td>enlisg</td>
<td>digital</td>
<td colspan="2">lab</td>
</tr>
<tr align="center">
<th>sat</th>
<td>eng</td>
<td>seminar</td>
<td>project</td>
</tr>
</table>
</body>
</html>
3)Develop HTML page containing college course details using ordered and unordered list
<!DOCTYPE html>
<html>
<head>
<title>College course details</title>
</head>
<body>
<h1 align="center">ABC College-Course Details</h1>
<h2>Courses offered</h2>
<ol>
<li>Bachelor of Computer Application (BCA)</li>
<li>Bachelor of Business Admisntration(BBA)</li>
<li>Bachelor of Commerce (B.com) </li>
<li>Bachelor of Arts(BA)</li>
<li>Bachelor of Science(B.sc)</li>
</ol>
<h2>BCA Course Structure</h2>
<ul>
<li>I semester</li>
<ul>
<li>Web technology</li>
<li>C# dot net</li>
<li>kannada</li>
<li>english</li>
<li>sports</li>
</ul>
<li>II semester</li>
<ul>
<li>Web technology</li>
<li>C# dot net</li>
<li>kannada</li>
<li>english</li>
<li>sports</li>
</ul>
<li>III semester</li>
<ul>
<li>Web technology</li>
<li>C# dot net</li>
<li>kannada</li>
<li>english</li>
<li>sports</li>
</ul>
</ul>
<h2>Facilities Provided</h2>
<ul>
<li>Computer lab</li>
<li>library</li>
<li>wi-fi campus</li>
<li>sports</li>
<li>placement cell</li>
</ul>
</body>
</html>
4)Design and develop student application form using HTML form elements
<!DOCTYPE html>
<html>
<head>
<title>Student application form</title>
</head>
<body>
<h2 align="center">Student Application Form</h2>
<form action="">
<label for="fname">First name :</label>
<br>
<input type="text" id="fname" name="fname" required>
<br>
<br>
<label for="lname">last name:</label>
<input type="text" name="lname" id="lname" required>
<br><br>
<label for="dob">Date of Birth:</label>
<br>
<input type="date" id="dob" name="dob" required>
<br><br>
<label>Gender</label>
<br>
<input type="radio" name="gender" id="male" value="Male" required >
<label for="male">Male</label>
<input type="radio" name="gender" id="female">
<label for="Female">Female</label>
<input type="radio" name="gender" id="other">
<label for="other">other</label>
<br><br>
<label for="email">Email</label>
<br>
<input type="email" id="email" name="email" required>
<br><br>
<label for="phone">Phone Number:</label>
<br><br>
<input type="tel" name="phone" id="phone" pattern="[0-9]{0-9}" required>
<br><br>
<label for="course">Select Course:</label>
<br><br>
<select name="course" id="course" required>
<option value="">Select</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Com">B.Com</option>
<option value="BA">BA</option>
</select>
<br><br>
<label for="address">Address:</label>
<br>
<textarea name="address" id="address" rows="5" cols="50" required></textarea>
<br><br>
<button type="submit">Submit Application</button>
<button type="rest">Rest Form</button>
</form>
</body>
</html>
5) develop and demonstrate html web page with appropriate tags to show the usage of external
level style specification document level style specification inline level style specification
INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<title>
BASIC OF CSS
</title>
<link rel="stylesheet" href="stylee.css">
</head>
<style>
p{
color: green;
font-size: 18px;
}
.doc-style
{
background-color: yellow;
padding: 10px;
border: 2px solid black;
}
</style>
<body>
<h1>STYLING DEMONSTRATION</h1>
<p class="doc-style">
this is a paragraph uses document level</p>
<p>this uses inline-level styling</p>
</body>
</html>
CSS PAGE( style.css)
/* external style-applies to body and h1*/
body{
background-color: aquamarine;
font-family: cursive;
}
h1
{
color: darkblue;
text-align: center;
}
6) write a program to create div and apply the following css properties on div
a.margin
b.padding
c.border box shadow
HTML PAGE-
<!DOCTYPE html>
<html>
<head>
<title>
Styling Example
</title>
<link rel="stylesheet" href="styleee.css">
</head>
<body>
<div class="styled-box">
<h2>styled div box</h2>
<p>this div demonstrated margin,padding,border,and box shadow</p>
</div>
</body>
</html>
CSS-PAGE
.styled-box
{
width: 300px;
margin: 50px auto;
padding: 20px;
border: 2px solid black;
box-shadow: 5px 5px 15px green;
background: #f9f9f9;
text-align: center;
font-family: cursive;
}
