Scribd
Upload
20 views

Web Programming - WPS Office

Its a time to me money heist

Uploaded by

Ksp
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

Web Programming - WPS Office

Its a time to me money heist

Uploaded by

Ksp
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

2.

Student form css

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Student Form</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 0;

.container {

max-width: 400px;

margin: 50px auto;

background-color: #fff;

padding: 20px;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

.form-group {

margin-bottom: 20px;

}
label {

font-weight: bold;

display: block;

margin-bottom: 5px;

input[type="text"], input[type="email"], input[type="password"] {

width: 100%;

padding: 10px;

border: 1px solid #ccc;

border-radius: 3px;

input[type="submit"] {

background-color: #007bff;

color: #fff;

padding: 10px 20px;

border: none;

border-radius: 3px;

cursor: pointer;

input[type="submit"]:hover {

background-color: #0056b3;

</style>

</head>

<body>
<div class="container">

<h2>Student Form</h2>

<form action="#" method="post">

<div class="form-group">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

</div>

<div class="form-group">

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

</div>

<div class="form-group">

<label for="password">Password:</label>

<input type="password" id="password" name="password" required>

</div>

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

</form>

</div>

</body>

</html>
2. image as web link

<a href="https://www.example.com">
<img src="https://www.example.com/image.jpg"
alt="Description of the image">
</a>
3. Web link in same web page

<!DOCTYPE html>

<html>

<head>

<title>Same Webpage Link Example</title>

</head>

<body>

<h2 id="section1">Section 1</h2>

<p>This is the content of section 1.</p>

<h2 id="section2">Section 2</h2>

<p>This is the content of section 2.</p>

<p><a href="#section1">Go to Section 1</a></p>

<p><a href="#section2">Go to Section 2</a></p>

</body>

</html>
5.ORDER LIST

<!DOCTYPE html>

<html>

<head>

<title>Ordered List Example</title>

</head>

<body>

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>

</body>

</html>
7. LOGIN PAGE

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Login Page</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

.container {

max-width: 400px;

margin: 100px auto;

padding: 20px;

background-color: #fff;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

h2 {

text-align: center;

}
input[type="text"], input[type="password"] {

width: 100%;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-radius: 5px;

box-sizing: border-box;

input[type="submit"] {

width: 100%;

background-color: #4caf50;

color: white;

padding: 10px;

border: none;

border-radius: 5px;

cursor: pointer;

input[type="submit"]:hover {

background-color: #45a049;

</style>

</head>

<body>
<div class="container">

<h2>Login</h2>

<form action="/login" method="post">

<label for="username">Username</label>

<input type="text" id="username" name="username" required>

<label for="password">Password</label>

<input type="password" id="password" name="password" required>

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

</form>

</div>

</body>

</html>
8. DESIGN THE FORM WITH ALL INPUT

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Login Form</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

.container {

max-width: 400px;

margin: 100px auto;

padding: 20px;

background-color: #fff;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

h2 {

text-align: center;

label {
display: block;

margin-bottom: 5px;

input[type="text"], input[type="email"], input[type="password"], input[type="date"] {

width: 100%;

padding: 10px;

margin: 5px 0 15px 0;

border: 1px solid #ccc;

border-radius: 5px;

box-sizing: border-box;

input[type="submit"] {

width: 100%;

background-color: #4caf50;

color: white;

padding: 10px;

border: none;

border-radius: 5px;

cursor: pointer;

input[type="submit"]:hover {

background-color: #45a049;

</style>

</head>
<body>

<div class="container">

<h2>Login</h2>

<form action="/login" method="post">

<label for="username">Username</label>

<input type="text" id="username" name="username" required>

<label for="password">Password</label>

<input type="password" id="password" name="password" required>

<label for="name">Name</label>

<input type="text" id="name" name="name" required>

<label for="email">Email</label>

<input type="email" id="email" name="email" required>

<label for="dob">Date of Birth</label>

<input type="date" id="dob" name="dob" required>

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

</form>

</div>

</body>
</html>
9. FRAMES

<!DOCTYPE html>

<html>

<head>

<title>Frames Example</title>

</head>

<frameset cols="25%,75%">

<frame src="menu.html">

<frame src="content.html">

</frameset>

</html>
13.STUDENT INFORMATION (css)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Student Information</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="student-info">

<h2>Student Information</h2>

<div class="student">

<div class="student-details">

<p><strong>Name:</strong> John Doe</p>

<p><strong>Age:</strong> 20</p>

<p><strong>Grade:</strong> 11</p>

</div>

<div class="student-photo">

<img src="student_photo.jpg" alt="Student Photo">


</div>

</div>

</div>

</body>

</html>

You might also like