<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width: 100%;
height: 100px;
border: 1px solid black;
align-items: center;
text-align: center;
color: azure;
}
a{
text-decoration: none;
color: blue;
}
.main{
height: 400px;
background: skyblue;
}
.less{
height: 50px;
background: yellow;
}
.marks{
height: 200px;
background: lightcoral;
}
.foot{
background: blue;
}
.links{
border: 1px solid black;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
document.querySelector('form').onsubmit = function(){
let name = document.querySelector('#name').value;
alert(`Hello ${name}`);
}
})
</script>
</head>
<body>
<table class="marks">
<tr>
<td><img src="" alt=""></td>
</tr>
</table>
<table class="less">
<tr>
<td class="links"><a href="#">Home</a></td>
<td class="links"><a href="about.html">About Us</a></td>
<td class="links"><a href="contact.html">Contact Us</a></td>
</tr>
</table>
<table class="main">
<tr>
<td></td>
</tr>
</table>
<table class="foot">
<tr><td>Footer</td></tr>
</table>
</body>
</html>
Leave a comment