Scribd
Upload
4 views10 pages

Web Programming Part B

The document contains multiple HTML examples including a student registration form with validation, a college timetable using table features, a web page with a CSS navigation menu, a multimedia example displaying an image, audio, and video, and a student marks table styled with CSS. Each section demonstrates different aspects of web programming and design. The examples showcase form handling, table layout, CSS styling, and multimedia integration.

Uploaded by

lavanyagowda409
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
4 views10 pages

Web Programming Part B

The document contains multiple HTML examples including a student registration form with validation, a college timetable using table features, a web page with a CSS navigation menu, a multimedia example displaying an image, audio, and video, and a student marks table styled with CSS. Each section demonstrates different aspects of web programming and design. The examples showcase form handling, table layout, CSS styling, and multimedia integration.

Uploaded by

lavanyagowda409
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

Web Programming Part B

1. Student Registration Form with Validation


<!DOCTYPE html>
<html>
<head>
<title>Student Registration</title>
</head>

<body>

<h2 align="center">Student Registration Form</h2>

<form>
Name: <input type="text" required><br><br>

Email: <input type="email" required><br><br>

Password: <input type="password" minlength="6"><br><br>

Gender:
<input type="radio" name="g">Male
<input type="radio" name="g">Female<br><br>

Course:
<select>
<option>C</option>
<option>Java</option>
<option>Python</option>
<option>Web Programming</option>
</select><br><br>

Hobbies:
<input type="checkbox">Reading
<input type="checkbox">Music
<input type="checkbox">Sports<br><br>

Address:<br>
<textarea rows="4" cols="30"></textarea><br><br>

<input type="submit" value="Submit">


<input type="reset">

</form>

</body>
</html>

2. Time Table using Table, Rowspan and Colspan


<!DOCTYPE html>
<html>
<head>
<title>College Timetable</title>
</head>

<body>

<h2 align="center">College Time Table</h2>

<table border="1" align="center">

<tr>
<th>Day</th>
<th>9-10</th>
<th>10-11</th>
<th>11-12</th>
<th>12-1</th>
</tr>

<tr>
<td>Monday</td>
<td>Maths</td>
<td>Physics</td>
<td rowspan="2">Lab</td>
<td>English</td>
</tr>
<tr>
<td>Tuesday</td>
<td>C Programming</td>
<td>Electronics</td>
<td>Maths</td>
</tr>

<tr>
<td>Wednesday</td>
<td colspan="2">Workshop</td>
<td>Physics</td>
<td>Library</td>
</tr>

</table>

</body>
</html>

3. Web Page with Navigation Menu using CSS


<!DOCTYPE html>
<html>
<head>
<title>Navigation Menu</title>
<style>
body{
font-family: Arial;
}

nav{
background:black;
padding:10px;
}

nav a{
color:white;
text-decoration:none;
margin:15px;
font-size:18px;
}

nav a:hover{
color:yellow;
}

</style>

</head>
<body>

<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Courses</a>
<a href="#">Contact</a>
</nav>

<h2>Welcome to Web Programming</h2>


<p>This page demonstrates a navigation bar using CSS.</p>

</body>
</html>

4. HTML Page with Image, Audio and Video


<!DOCTYPE html>
<html>
<head>
<title>Multimedia Example</title>
</head>

<body>
<h2>Multimedia in HTML</h2>

<h3>Image</h3>
<img src="[Link]" width="300">

<h3>Audio</h3>
<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>

<h3>Video</h3>
<video width="400" controls>
<source src="movie.mp4" type="video/mp4">
</video>

</body>
</html>

5. Student Marks Table with CSS Styling


<!DOCTYPE html>
<html>
<head>

<title>Student Marks</title>

<style>
table{
border-collapse:collapse;
width:50%;
}

th{
background-color:green;
color:white;
}

td,th{
border:1px solid black;
padding:8px;
text-align:center;
}

tr:nth-child(even){
background-color:#f2f2f2;
}
</style>

</head>

<body>
<h2>Student Marks</h2>

<table>

<tr>
<th>Name</th>
<th>Maths</th>
<th>Science</th>
<th>English</th>
</tr>

<tr>
<td>Ravi</td>
<td>85</td>
<td>90</td>
<td>80</td>
</tr>

<tr>
<td>Deepa</td>
<td>88</td>
<td>92</td>
<td>84</td>
</tr>
<tr>
<td>Arun</td>
<td>75</td>
<td>85</td>
<td>70</td>
</tr>

</table>

</body>
</html>

You might also like