HTML Lang Charset Name Content: Styled List (: :,, : ) (: ) (: )
Uploaded by
suji73039HTML Lang Charset Name Content: Styled List (: :,, : ) (: ) (: )
Uploaded by
suji730391.<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled List</title>
<style>
body {
background-color: green;
font-family: "Times New Roman", Times, serif;
font-size: 40px;
}
.red {
color: red;
}
.yellow {
color: yellow;
}
</style>
</head>
<body>
<ul>
<li class="red">hi</li>
<ul>
<li>ONE
<ol>
<li>two</li>
<li>three</li>
</ol>
</li>
</ul>
</ul>
<li>hello</li>
<li>on
<ol>
<li>WEB</li>
</ol>
</li>
<li>DESIGN
<ol type="i">
<li class="yellow">z</li>
<li class="yellow">x</li>
</ol>
</li>
</ul>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Grid</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<div class="row text-center text-white" style="background-color: pink;">
<div class="col">Demo for bootstrap grid system</div>
</div>
<div class="row text-white text-center mt-3">
<div class="col-2" style="background-color: orange;">2 columns</div>
<div class="col-5" style="background-color: blue;">5 columns</div>
<div class="col-5" style="background-color: blue;">5 columns</div>
</div>
<div class="row text-white text-center mt-3">
<div class="col-4" style="background-color: orange;">4 columns</div>
<div class="col-4" style="background-color: blue;">4 columns</div>
<div class="col-4" style="background-color: blue;">4 columns</div>
</div>
</div>
</body>
</html>
3. <html>
<head>
<style>
.box1{
background-color: aqua;
height: 250px;
width:500px;
text-decoration: underline;
font-size: 30px;
justify-content: center;
border:5px solid red;
}
.box2{
background-color: aqua;
height: 250px;
width:500px;
text-decoration: underline;
font-size: 30px;width:500px;
text-decoration: underline;
font-size: 30px;
justify-content: center;
border:5px solid red;
}
</style>
</head>
<body>
<div class="box1"style="text-align:center;">WEB PAGE</div> <br>
<div class="box2"style="text-align:center;">DESIGN</div>
</body>
</html>
4. <html>
<head>
<title>JS</title>
</head>
<body>
<script >
let n1=prompt("enter the number:");
let n2=prompt("enter the second number:");
let sum=parseFloat(n1)+parseFloat(n2);
alert("the answer:" +sum);
</script>
</body>
</html>
5. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
<link rel="stylesheet" href="style5.css">
</head>
<body>
<h2>Registration Form</h2>
<form>
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<button type="submit">Register</button>
</form>
</body>
</html>
CSS
body {
background-color: #FAFAD2;
color: #E8DEE5;
font-family: "Times New Roman", Arial, sans-serif;
font-size: 12px;
text-transform: uppercase;
text-align: center;
font-style: italic;
padding: 10px 20px 12px 22px;
}
form {
display: inline-block;
text-align: left;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px gray;
}
h2 {
text-align: center;
color: black;
text-transform: uppercase;
font-style: italic;
}
label {
display: inline-block;
width: 100px;
margin-bottom: 10px;
}
input {
padding: 5px;
margin-bottom: 10px;
}
button {
padding: 5px 10px;
cursor: pointer;
text-transform: uppercase;
}
6. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
<link rel="stylesheet" href="style5.css">
<script>
function validateForm() {
const email = document.getElementById("email").value;
const atPosition = email.indexOf("@");
const dotPosition = email.lastIndexOf(".");
if (atPosition < 1 || dotPosition < atPosition + 2 || dotPosition
+ 2 >= email.length) {
alert("Please enter a valid email address.");
return false;
}
return true;
}
</script>
</head>
<body>
<h2>Registration Form</h2>
<form onsubmit="return validateForm()">
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<button type="submit">Register</button>
</form>
</body>
</html>
7. <!DOCTYPE html>
<html>
<head>
<style>
.container{
display: flex;
jus fy-content: space-between;
padding: 20px;
background-color: #ff00ae;
}
.box1{
flex:2;
padding: 20px;
background-color: #2f00ff;
text-align: center;
}
.box2,.box3{
flex:1;
padding: 20px;
background-color: aqua;
text-align: center;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</body>
</html>
8.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Phone Number Validation</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
.form-container {
background-color: #f8dede; /* light pink background */
display: inline-block;
padding: 30px;
border-radius: 8px;
}
.form-container label {
display: block;
margin-top: 10px;
text-align: left;
}
.form-container input[type="text"],
.form-container input[type="email"] {
width: 250px;
padding: 6px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-container input[type="submit"] {
margin-top: 15px;
padding: 8px 16px;
background-color: #333;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
<script>
function validateForm() {
const phone = document.getElementById("phone").value;
// Check if it's non-empty and has exactly 10 digits
const phonePattern = /^\d{10}$/;
if (phone.trim() === "") {
alert("Phone number cannot be empty.");
return false;
} else if (!phonePattern.test(phone)) {
alert("Phone number must be exactly 10 digits.");
return false;
}
return true;
}
</script>
</head>
<body>
<div class="form-container">
<form onsubmit="return validateForm()">
<label for="fullname">Full Name</label>
<input type="text" id="fullname" name="fullname" required>
<label for="email">E-mail address</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone number</label>
<input type="text" id="phone" name="phone" required>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
9.
<html>
<head>
<style>
table{
background-color: red;
color: black;
font-family: 'Times New Roman', Times, serif;
font-size: 12px;
text-transform: uppercase;
}
</style>
</head>
<body>
<table border="3px" style=" border-collapse: collapse;">
<tr style="color: chartreuse;">
<th>Match Type</th>
<th colspan="2">Team</th>
<th>Result</th>
</tr>
<tr>
<td rowspan="2">Test</td>
<td>India</td>
<td>Australia</td>
<td>India won by 132 runs</td>
</tr>
<tr>
<td>England</td>
<td>South Africa</td>
<td>Draw</td>
</tr>
<tr>
<td rowspan="3">ODI</td>
<td>New zealand</td>
<td>West Indies</td>
<td>New Zealand won by 5 wickets</td>
</tr>
<tr>
<td>Pakistan</td>
<td>Sri Lanka</td>
<td>Sri Lanka won by 70 runs</td>
</tr>
<tr>
<td>Bangladesh</td>
<td>India</td>
<td>India won by 3 qickets</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Layout</title>
<style>
.container {
display: flex;
flex-direction: column;
height: 400px;
}
.header {
background-color: red;
padding: 20px;
text-align: center;
color: white;
}
.main {
display: flex;
flex: 1;
}
.nav {
background-color: yellow;
width: 20%;
padding: 20px;
}
.content {
background-color: limegreen;
flex: 1;
padding: 20px;
text-align: center;
color: white;
}
.footer {
background-color: deepskyblue;
padding: 20px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="main">
<div class="nav">Nav</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Grid Layout</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
background-color: #f08030;
padding: 10px;
width: 500px;
margin: 20px auto;
}
.grid-item {
background-color: #f9f5dc;
border: 1px solid #ccc;
padding: 20px;
}
.item1 {
grid-row: span 2;
}
.item4 {
grid-column: span 2;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item item1"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item item4"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Exam Scores</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
table {
width: 60%;
margin: auto;
border-collapse: collapse;
background-color: #f8f8f8;
}
th, td {
border: 2px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: #4dff00;
font-size: 18px;
}
td {
font-size: 16px;
}
</style>
</head>
<body>
<h2>Student Exam Scores</h2>
<table>
<tr>
<th>Name</th>
<th>Student ID</th>
<th>Exam</th>
<th>Physics</th>
<th>Math</th>
</tr>
<tr>
<td rowspan="2">Harry</td>
<td rowspan="2">1101</td>
<td>Mid Term</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td>Final Term</td>
<td>70</td>
<td>79</td>
</tr>
<tr>
<td rowspan="2">Perker</td>
<td rowspan="2">1102</td>
<td>Mid Term</td>
<td>68</td>
<td>63</td>
</tr>
<tr>
<td>Final Term</td>
<td>82</td>
<td>85</td>
</tr>
<tr>
<td rowspan="2">Jane</td>
<td rowspan="2">1103</td>
<td>Mid Term</td>
<td>72</td>
<td>86</td>
</tr>
<tr>
<td>Final Term</td>
<td>71</td>
<td>84</td>
</tr>
<tr>
<td rowspan="2">Cathy</td>
<td rowspan="2">1104</td>
<td>Mid Term</td>
<td>78</td>
<td>98</td>
</tr>
<tr>
<td>Final Term</td>
<td>91</td>
<td>94</td>
</tr>
</table>
</body>
</html>
<html>
<head>
</head>
<body>
<table border="2px">
<tr>
<th rowspan="2"></th>
<th colspan="2">Average</th>
<th rowspan="2">Red eyes</th>
</tr>
<tr>
<th>height</th>
<th>weight</th>
</tr>
<tr>
<th>Males</th>
<td>1.9</td>
<td>0.003</td>
<td>40%</td>
</tr>
<tr>
<th>Females</th>
<td>1.7</td>
<td>0.002</td>
<td>43%</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>CSS Box Model</title>
<style>
.box-container {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
padding: 20px;
border: 4px solid blueviolet;
width: fit-content;
margin: 30px auto;
}
.box-container img {
height: 200px;
width: auto;
}
.box-container .text {
font-family: Arial, sans-serif;
max-width: 300px;
}
</style>
</head>
<body>
<div class="box-container">
<img src="flower.jpg" alt="Flower Image"> <!-- Replace with your image -->
<div class="text">
<p><strong>In nature, nothing is perfect and everything is
perfect.</strong></p>
<ul>
<li>Nature never goes out of style.</li>
<li>There is beauty around every bend.</li>
<li>In my happy place.</li>
<li>Let your canopy be the stars in the sky.</li>
<li>Free as a bird.</li>
<li>Standing at the shore is where I must be.</li>
<li>Breathe deep.</li>
<li>This view never gets old.</li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date of Birth Validation</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 100px;
}
.form-container {
background-color: #f0f2f5;
padding: 30px;
display: inline-block;
border-radius: 10px;
}
label {
font-weight: bold;
letter-spacing: 1px;
display: block;
margin-bottom: 8px;
}
input[type="text"] {
padding: 8px;
width: 250px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
text-align: center;
}
input[type="submit"] {
margin-top: 15px;
padding: 8px 16px;
background-color: #333;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
<script>
function validateDOB() {
const dob = document.getElementById("dob").value;
// Regex to match dd/mm/yyyy
const dobPattern = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-
2])\/(19|20)\d\d$/;
if (!dobPattern.test(dob)) {
alert("Please enter Date of Birth in dd/mm/yyyy format.");
return false;
}
alert("DOB accepted: " + dob);
return true;
}
</script>
</head>
<body>
<div class="form-container">
<form onsubmit="return validateDOB()">
<label for="dob">DATE OF BIRTH</label>
<input type="text" id="dob" name="dob" placeholder="DD/MM/YYYY"
required>
<br>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Computer Science and Engineering</title>
<style>
.styled-text {
color: yellow;
font-family: Arial, sans-serif;
font-size: 12px;
letter-spacing: 30px;
border-bottom: 20px wavy yellow;
}
</style>
</head>
<body>
<p class="styled-text">Computer Science and Engineering</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Age Calculator</title>
</head>
<body>
<h2>Age Calculator</h2>
<button onclick="calculateAge()">Find My Age</button>
<p id="result"></p>
<script>
function calculateAge() {
const currentYear = new Date().getFullYear();
const birthYear = prompt("Enter your birth year:");
if (birthYear) {
const age = currentYear - parseInt(birthYear);
document.getElementById("result").innerText = `Your age is
${age} years.`;
} else {
document.getElementById("result").innerText = "Please enter a
valid birth year.";
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: grid;
grid-template-areas:
"header header"
"left main"
"footer footer";
grid-template-columns: 200px auto;
grid-template-rows: 80px auto 60px;
gap: 10px;
height: 100vh;
padding: 10px;
}
.header {
grid-area: header;
background-color: #ff99cc;
padding: 20px;
text-align: center;
font-size: 20px;
}
.left-panel {
grid-area: left;
background-color: #ff66b2;
padding: 20px;
}
.main-content {
grid-area: main;
text-align: center;
padding: 20px;
}
.footer {
grid-area: footer;
background-color: #9933cc;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="left-panel">Left Panel</div>
<div class="main-content">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"href="h ps://cdnjs.cloudflare.com/ajax/libs/boots
trap/5.0.1/css/bootstrap.min.css">
</head>
<body>
<p ><span style="background-color: rgba(255, 252, 252, 0);color:
white;"> you can
the narj tag to hilhtlight</span></p>
<p><del>this line of text is bad</del></p>
<p><del>no longer is uead</del></p>
<p><u>this line of text is mean to be treated</u></p>
<p><u>unerlined</u></p>
<p><small>this line is meant to be treated</small></p>
<h4><em>renderd as bod</em></h4>
<p><i>italic</i></p>
</body>
</html>
<html>
<head>
</head>
<body>
<h1>HTML cooking School</h1>
<h4>Recipes</h4>
<ul>
<li>cakes
<ul>
<li><a href="#">Plain Sponge</a></li>
<li><a href="#">Chocolate Cake</a></li>
<li><a href="#">Apple Tea Cake</a></li>
</ul>
</li>
<li>biscuits
<ul>
<li><a href="#">ANZAC Biscuits</a></li>
<li><a href="#">Jam Drops</a></li>
<li><a href="#">Melting Moments</a></li>
</ul>
</li>
<li>breads/quick bread
<ul>
<li><a href="#">Damper</a></li>
<li><a href="#">Scones</a></li>
</ul>
</li>
</ul>
</body>
</html>
<html>
<head>
<style>
.box{
background-color: yellow;
border: 3px solid black;
}
</style>
</head>
<body>
<div class="box">
<h1>Submit your Information</h1>
<form>
<label for="First Name">First Name:</label>
<input type="text" id="First Name" name="First Name required">
<br><br>
<label for="Last Name">Last Name:</label>
<input type="text" id="Last Name" name="Last Name required">
<br><br>
<label for="Gender">Gender:</label>
<input type="radio" id="Gender">Male
<input type="radio" id="Gender">FeMale <br><br>
<label for="Hobbies">Hobbies:</label>
<input type="checkbox" id="Hobbies">Reading
<input type="checkbox" id="Hobbies">Surfing
<input type="checkbox" id="Hobbies">Listening to Music <br><br>
<button type="submit">SUBMIT</button>
<button type="reset">RESET</button>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
h2{
color: red;
}
.cat {
border: 20px solid;
border-radius: 20px;
opacity: 0.5;
width: 300px;
height: auto;
display: block;
margin-bottom: 20px;
}
.tom {
border-color: red;
}
.tim {
border-color: green;
}
</style>
</head>
<body>
<h2>TOM</h2>
<img src="tom.jpg" alt="Tom" class="cat tom">
<h2>TIM</h2>
<img src="tim.jpg" alt="Tim" class="cat tim">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Link Example</title>
<style>
.styled-link {
color: red; /* Initially red */
text-decoration: none;
font-size: 20px;
}
.styled-link:hover {
color: green; /* Changes to green when hovered */
}
.styled-link:active {
color: yellow; /* Changes to yellow when clicked */
}
.styled-link:visited {
color: blue; /* Changes to blue when visited again */
}
</style>
</head>
<body>
<a href="https://www.yahoo.com" class="styled-link">click the link</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout Example</title>
<link rel="stylesheet" href="style21.css">
</head>
<body>
<div class="grid-container">
<div class="box light-blue">1</div>
<div class="box orange">2</div>
<div class="box blue">3</div>
<div class="box yellow">4</div>
<div class="box purple">5</div>
<div class="box green">6</div>
<div class="box peach">7</div>
<div class="box teal">8</div>
<div class="box maroon">9</div>
</div>
</body>
</html>
Css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 10px;
text-align: center;
}
.box {
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
width: 100px;
height: 100px;
color: white;
}
.light-blue { background-color: #add8e6; }
.orange { background-color: #ffa500; }
.blue { background-color: #0000ff; }
.yellow { background-color: #ffff00; color: black; }
.purple { background-color: #800080; }
.green { background-color: #008000; }
.peach { background-color: #ffdab9; color: black; }
.teal { background-color: #008080; }
.maroon { background-color: #800000; }
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 2px solid blue;
width: 200px;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>Fruit
<ul>
<li>Bananas</li>
<li>Apples
<ul>
<li>Green</li>
<li>Red</li>
</ul>
</li>
<li>Pears</li>
</ul>
</li>
<li>Vegetables</li>
<li>Meat</li>
</ul>
</div>
</body>
</html>
html
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
header, footer {
background: red;
color: white;
padding: 10px;
text-align: center;
}
.main {
display: flex;
flex: 1;
}
nav {
background: deepskyblue;
flex: 1;
padding: 10px;
color: white;
}
article {
background: purple;
flex: 2;
padding: 10px;
color: white;
}
aside {
background: green;
flex: 1;
padding: 10px;
color: white;
}
footer {
background: deeppink;
}
</style>
</head>
<body>
<div class="container">
<header>HEADER</header>
<div class="main">
<nav>LEFT SIDEBAR</nav>
<article>MAIN CONTENT</article>
<aside>RIGHT SIDEBAR</aside>
</div>
<footer>FOOTER</footer>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #ccff33;
font-family: Arial;
}
.form-container {
background-color: yellowgreen;
width: 300px;
padding: 20px;
margin: auto;
border-radius: 10px;
}
h3 {
color: red;
text-align: center;
}
label {
display: block;
margin-top: 10px;
}
input[type="text"], input[type="password"], input[type="email"], select,
textarea {
width: 100%;
padding: 5px;
}
input[type="submit"] {
background-color: orange;
color: white;
border: none;
padding: 10px;
width: 100%;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="form-container">
<h3>Personal Details</h3>
<form>
<label>Name:</label>
<input type="text">
<label>Password:</label>
<input type="password">
<label>E-mail id:</label>
<input type="email">
<label>Gender:</label>
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
<h3>Educational Qualification</h3>
<label>Select Group:</label>
<select>
<option>Select Group</option>
<option>Science</option>
<option>Commerce</option>
</select>
<label>Hobbies:</label>
<input type="checkbox"> Playing chess
<input type="checkbox"> Reading Books
<h3>Address</h3>
<textarea rows="3"></textarea>
<label>Attach Resume:</label>
<input type="file">
<input type="submit" value="SUBMIT">
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
.form-container {
width: 400px;
margin: auto;
border: 1px solid #ccc;
padding: 20px;
background-color: #f2f2f2;
}
.form-header {
background-color: green;
color: white;
padding: 10px;
text-align: center;
font-size: 20px;
}
input, textarea, select {
width: 100%;
padding: 10px;
margin: 10px 0;
}
.buttons {
text-align: center;
}
.submit-btn {
background-color: green;
color: white;
border: none;
padding: 10px 20px;
}
.reset-btn {
background-color: red;
color: white;
border: none;
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="form-container">
<div class="form-header">Contact Form<br><small>Please fill all the text
in the fields.</small></div>
<form>
<label>Your Name:</label>
<input type="text" placeholder="Your Full Name">
<label>Your Email:</label>
<input type="email" placeholder="Enter your Email">
<label>Your mobile number:</label>
<input type="text" placeholder="Enter your mobile number">
<label>Your message to us:</label>
<textarea placeholder="Enter your query here"></textarea>
<label>Select how you want updates:</label>
<select>
<option>-- Please choose one option --</option>
<option>Email</option>
<option>SMS</option>
</select>
<div class="buttons">
<button type="submit" class="submit-btn">Submit</button>
<button type="reset" class="reset-btn">Reset</button>
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
>
</head>
<body>
<div class="container mt-4">
<table class="table table-hover table-dark text-center">
<tr>
<td colspan="2">KCE</td>
<td>EEE</td>
<td>CSE</td>
</tr>
<tr class="table-active">
<td>IT</td>
<td>MECH</td>
<td>CSD</td>
<td>CY</td>
</tr>
<tr class="table-danger">
<td rowspan="2">ECE</td>
<td>CST</td>
<td>ECE</td>
<td rowspan="2">ETE</td>
</tr>
<tr class="table-bordered">
<td colspan="2">EEE</td>
</tr>
<tr class="table-bordered">
<td>WEB</td>
<td>DESIGN</td>
<td colspan="2">WEB PAGE</td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 80%;
margin: 20px auto;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: green;
color: white;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
#changeColorBtn {
display: block;
margin: 10px auto;
padding: 10px;
}
</style>
</head>
<body>
<table id="studentTable">
<tr>
<th>Name</th>
<th>Age</th>
<th>Degree</th>
<th>College Name</th>
</tr>
<tr>
<td>John Doe</td>
<td>20</td>
<td>B.Sc</td>
<td>XYZ University</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>22</td>
<td>B.A</td>
<td>ABC College</td>
</tr>
<!-- Add 3 more rows if required -->
</table>
<button id="changeColorBtn" onclick="changeColor()">Change Table
Color</button>
<script>
function changeColor() {
document.getElementById("studentTable").style.backgroundColor = "#ffe0b3";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<h2>HTML form</h2>
<form onsubmit="return validateForm()">
First name: <input type="text" id="fname"><br><br>
Last name: <input type="text"><br><br>
E-mail: <input type="text" id="email"><br><br>
Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
<script>
function validateForm() {
let name = document.getElementById("fname").value;
let email = document.getElementById("email").value;
if (name === "" || email === "") {
alert("Name and Email cannot be empty");
return false;
}
return true;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: yellow;
font-family: Arial;
}
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: green;
}
a:active {
color: red;
}
</style>
</head>
<body>
<h2>My Links</h2>
<a href="https://www.google.com" target="_blank">Google</a><br>
<a href="https://www.facebook.com" target="_blank">Facebook</a><br>
<a href="https://www.youtube.com" target="_blank">YouTube</a><br>
<a href="https://www.twitter.com" target="_blank">Twitter</a><br>
<a href="https://www.instagram.com" target="_blank">Instagram</a><br>
</body>
</html>
Add this JavaScript inside a <script> tag:
<script>
function sayHello() {
alert("Hello World");
}
</script>
<button onclick="sayHello()">Click Me</button>
<!DOCTYPE html>
<html>
<head>
<title>Health Chart</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
text-align: center;
}
table {
width: 80%;
margin: auto;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>Health Chart</h2>
<table>
<tr>
<th rowspan="2">State of Health</th>
<th colspan="2">Fasting Value</th>
<th rowspan="2">After Eating<br>2 hours after eating</th>
</tr>
<tr>
<th>Minimum</th>
<th>Maximum</th>
</tr>
<tr>
<td>Healthy</td>
<td>70</td>
<td>100</td>
<td>Less than 140</td>
</tr>
<tr>
<td>Pre-Diabetes</td>
<td>101</td>
<td>126</td>
<td>140 to 200</td>
</tr>
<tr>
<td>Diabetes</td>
<td>More than 126</td>
<td>N/A</td>
<td>More than 200</td>
</tr>
</table>
</body>
</html>
You might also like
- Tables: Program:: Doctype HTML Head StyleNo ratings yetTables: Program:: Doctype HTML Head Style12 pages
- Bài 5. Giới Thiệu Về Sản Xuất Bánh Bích Quy Introduction To Biscuit - MakingNo ratings yetBài 5. Giới Thiệu Về Sản Xuất Bánh Bích Quy Introduction To Biscuit - Making14 pages
- Process Control Ing in Biscuits ManufacturingNo ratings yetProcess Control Ing in Biscuits Manufacturing6 pages
- Protein Biscuits - The Conscious Plant KitchenNo ratings yetProtein Biscuits - The Conscious Plant Kitchen2 pages
- Raja Biscuits (Snehakangal) Final Order Sheet-5No ratings yetRaja Biscuits (Snehakangal) Final Order Sheet-56 pages
- Biscuits: The Pakistani Biscuit IndustryNo ratings yetBiscuits: The Pakistani Biscuit Industry2 pages
- Kids A Cookin Author Research and Extension Kansas State UniversityNo ratings yetKids A Cookin Author Research and Extension Kansas State University248 pages
- Copycat Red Lobster Cheddar Bay Biscuits - The Recipe CriticNo ratings yetCopycat Red Lobster Cheddar Bay Biscuits - The Recipe Critic2 pages