Queston1 .
Design a web page for department’s/school’s information including latest news
window.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Department/School Information</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Department/School Name</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#programs">Programs</a></li>
<li><a href="#faculty">Faculty</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="latest-news">
<h2>Latest News</h2>
<ul id="news-list">
<li><a href="#">News item 1</a></li>
<li><a href="#">News item 2</a></li>
<li><a href="#">News item 3</a></li>
</ul>
</section>
<section id="about">
<h2>About</h2>
<p>Insert department/school information here.</p>
</section>
<section id="programs">
<h2>Programs</h2>
<ul>
<li>Program 1</li>
<li>Program 2</li>
<li>Program 3</li>
</ul>
</section>
<section id="faculty">
<h2>Faculty</h2>
<ul>
<li>Faculty member 1</li>
<li>Faculty member 2</li>
<li>Faculty member 3</li>
</ul>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Insert contact information here.</p>
</section>
</main>
<footer>
<p>Copyright © Manvendra Singh/School of computer science</p>
</footer>
<script src="script.js"></script>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
header {
background-color: #333;
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
nav li {
margin-right: 20px;
nav a {
color: #fff;
text-decoration: none;
nav a:hover {
text-decoration: underline;
main {
padding: 20px;
section {
margin-bottom: 20px;
h2 {
margin-top: 0;
ul {
list-style: disc;
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
#news-list {
margin: 0;
padding: 0;
#news-list li {
margin-bottom: 10px;
JAVA SCRIPT
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
OUTPUT
Question 2.Design a web page illustrating different concepts of hyperlinks in html including
bookmarks.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hyperlinks in HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Hyperlinks in HTML</h1>
</header>
<main>
<section>
<h2>Types of Hyperlinks</h2>
<ul>
<li><a href="#">Absolute Hyperlink</a></li>
<li><a href="relative.html">Relative Hyperlink</a></li>
<li><a href="https://www.google.com">External Hyperlink</a></li>
<li><a href="mailto:[email protected]">Email Hyperlink</a></li>
<li><a href="tel:+1234567890">Telephone Hyperlink</a></li>
</ul>
</section>
<section>
<h2>Linking to Specific Parts of a Page</h2>
<p>To create a bookmark, use the <code><a></code> tag with the
<code>id</code> attribute:</p>
<pre><h2 id="section1">Section 1</h2></pre>
<p>Then create a hyperlink to the bookmark using the <code><a></code>
tag with the <code>href</code> attribute set to <code>#section1</code>:</p>
<pre><a href="#section1">Link to Section 1</a></pre>
</section>
<section>
<h2>Linking to External Resources</h2>
<p>To link to external resources such as images, stylesheets, and scripts, use the
<code><link></code> tag:</p>
<pre><link rel="stylesheet" href="style.css"></pre>
</section>
</main>
<footer>
<p>Copyright © Hyperlinks in HTML</p>
</footer>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
section {
margin-bottom: 20px;
h2 {
margin-top: 0;
ul {
list-style: disc;
margin-left: 20px;
pre {
background-color: #eee;
padding: 10px;
border: 1px solid #ccc;
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
OUTPUT
