Scribd
Upload
20 views

Web Programming - WPS Office

Its a time to me money heist

Uploaded by

Ksp
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
20 views

Web Programming - WPS Office

Its a time to me money heist

Uploaded by

Ksp
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
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