Q1) Design The Following Web Page Using HTML5 Sematic Elements

Q1) Design the following web page using HTML5 sematic elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>LOGO</h1>
<nav>
<ul>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">SHOPS</a></li>
</ul>
</nav>
<div>
<span>*****</span>
<span>53 326 14 62</span>
</div>
</header>
<main>
<section>
<h2>ALL ABOUT OUR PRODUCTS</h2>
<article>
<h3>Summary</h3>
<p>Description about the product</p>
</article>
<section>
<h3>USE 1 FOR OUR PRODUCTS</h3>
<p>Description</p>
</section>
<section>
<p>Description</p>
</section>
<section>
<p>Description</p>
</section>
</section>
<aside>
<h2>Client recommendations about the product</h2>
<p>Summary of independent journalist's evaluation of the product</p>
<p><a href="#">LINK</a></p>
</aside>
</main>
<footer>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">LEGAL</a></li>
</ul>
</nav>
</footer>
</body>
</html>
2)Design a student registration form which includes the following fields
Student name, address, contact number, email-Id, DOB,(date, month,week,year) username,
password, favourite color, upload resume.(multiple files).
In the above form all the fields are mandatory.
When the form is loaded then the mouse pointer should blink on the first textbox.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Student Registration Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Student Registration Form</h1>
<form action="#" method="post" enctype="multipart/form-data">
<label for="student_name">Student Name:<span class="mandatory">*</span></label><br>
<input type="text" id="student_name" name="student_name" required><br><br>
<label for="address">Address:<span class="mandatory">*</span></label><br>
<textarea id="address" name="address" rows="4" required></textarea><br><br>
<label for="contact_number">Contact Number:<span class="mandatory">*</span></label><br>
<input type="tel" id="contact_number" name="contact_number" pattern="[0-9]{10}" required><br><br>
<label for="email">Email ID:<span class="mandatory">*</span></label><br>
<input type="email" id="email" name="email" required><br><br>
<label>Date of Birth:<span class="mandatory">*</span></label><br>
<input type="date" name="dob" required><br><br>
<label for="username">Username:<span class="mandatory">*</span></label><br>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:<span class="mandatory">*</span></label><br>
<input type="password" id="password" name="password" required><br><br>

<label for="favourite_color">Favourite Color:<span class="mandatory">*</span></label><br>
<input type="color" id="favourite_color" name="favourite_color" required><br><br>
<label for="resume">Upload Resume:<span class="mandatory">*</span></label><br>
<input type="file" id="resume" name="resume" multiple required><br><br>
<input type="submit" value="Submit">
</form>
<script>
document.getElementById("student_name").focus();
</script>
</body>
</html>
Q3) Design the following web page using canvas elements
1. Design the following web application for Gaana.com.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gaana.com</title>
<style>
canvas {
border: 1px solid #000;
display: block;
margin: 0 auto;
width: 640px; /* Adjust width as needed */
height: 360px; /* Adjust height as needed */
}
</style>
</head>
<body>
<h1>Gaana.com</h1>
<nav>
<ul>
<li><a href="#">All Trending Songs</a></li>
<li><a href="#">New Songs</a></li>
<li><a href="#">Old Songs</a></li>
</ul>
</nav>
<canvas id="videoCanvas"></canvas>
<script>
// JavaScript code for video playback (to be implemented)
var canvas = document.getElementById("videoCanvas");
var ctx = canvas.getContext("2d");
// Placeholder text
ctx.font = "20px Arial";
ctx.fillText("Video will", 50, 50);
ctx.fillText("be play", 50, 80);
ctx.fillText("here", 50, 110);
</script>
</body>
</html>
Q4)Design a News Paper application by using all semantic elements
<!DOCTYPE html>
<html lang="en">
<head>
<title>Newspaper Application</title>
<style>
/* CSS styling for the page */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer, nav, main, section, article, aside {

border: 1px solid black;
margin: 5px;
padding: 5px;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
footer nav ul li {
display: inline;
margin-right: 10px;
}
</style>
</head>
<body>
<header>
<h1>Newspaper Application</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Opinion</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Entertainment</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Top Stories</h2>
<article>
<h3>Breaking News</h3>
<p>Description of breaking news...</p>
</article>
<article>
<h3>Feature Story</h3>
<p>Description of feature story...</p>
</article>
</section>
<aside>
<h2>Advertisement</h2>
<p>Buy our product now!</p>
</aside>
</main>
<footer>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</nav>
</footer>
</body>
</html>

Q1) Design The Following Web Page Using HTML5 Sematic Elements

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Q1) Design The Following Web Page Using HTML5 Sematic Elements

Uploaded by

Copyright:

Available Formats

Q1) Design the following web page using HTML5 sematic elements

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

<title>Student Registration Form</title>

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

<h1>Student Registration Form</h1>

<form action="#" method="post" enctype="multipart/form-data">

<label for="student_name">Student Name:<span class="mandatory">*</span></label><br>

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

<label for="address">Address:<span class="mandatory">*</span></label><br>

<textarea id="address" name="address" rows="4" required></textarea><br><br>

<label for="contact_number">Contact Number:<span class="mandatory">*</span></label><br>

<input type="tel" id="contact_number" name="contact_number" pattern="[0-9]{10}" required><br><br>

<label for="email">Email ID:<span class="mandatory">*</span></label><br>

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

<label>Date of Birth:<span class="mandatory">*</span></label><br>

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

<label for="username">Username:<span class="mandatory">*</span></label><br>

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

<label for="password">Password:<span class="mandatory">*</span></label><br>

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

<input type="color" id="favourite_color" name="favourite_color" required><br><br>

<label for="resume">Upload Resume:<span class="mandatory">*</span></label><br>

<input type="file" id="resume" name="resume" multiple required><br><br>

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

header, footer, nav, main, section, article, aside {

You might also like