Komya Cs

KOMYA BHARTI
516
BA (H) ENGLISH
GE-Introduction to
web programming
HTML
Q1)
. Create an HTML document with following formatting – Bold, Italics, Underline,

Colors,Headings, Title, Font and Font Width, Background, Paragraph, Line
Breaks, Horizontal Line, marquee text.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Formatting Example</title>
<style>
body {
background-color: blue;
font-family: Arial, sans-serif;
h1 {
color: navy;
font-size: 24px;
font-weight: bold;
text-decoration: underline;
p{
color: yellow;
font-style: italic;
font-size: 18px;
}
.underline {
text-decoration: underline;
</style>
</head>
<body>
<h1>MY WEBPAGE</h1>
<p>WEBPAGE WITH <span class="underline">underlined text</span>.</p>
<p>WEBPAGE WITH <strong>bold text</strong> and <em>italic text</em>.</p>
<p style="color: purle;"> specific color.</p>
<p style="font-family: 'Courier New', monospace;"> custom font.</p>
<p style="font-size: 20px;"> custom font size.</p>
<hr>
<marquee behavior="scroll" direction="left">Marquee text!</marquee>
</body>
</html>
Q2)
. Create an HTML document with Ordered and Unordered lists.
<!DOCTYPE html>
<html lang="en">
<head>
<title>List Q2</title>
</head>
<body>
<h1>Example Lists</h1>
<h2>Ordered List:</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h2>Unordered List:</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</body>
</html>
Q3) Create an HTML document demonstrating use of images in webpages
(including images
as logos, cell data in a table, background of a table, clickable icons, etc)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Images in Webpages</title>
<style>
/* Style for table background */
table {
background-color: #f2f2f2;
width: 100%;
height: 200px;
border-collapse: collapse;
th, td {
padding: 10px;
border: 1px solid #ddd;
/* Style for clickable icon */
.icon {
cursor: pointer;
</style>
</head>
<body>

<header>
<img src="C:\Users\91920\Desktop\KB.png" alt="Company Logo" width="200">
</header>

<table>
<tr>
<th>Latest Products</th>
</tr>
<tr>
<td><img src="C:\Users\91920\Desktop\HDP.jpg" alt="Product 1: Supercharged Headphones"

width="150"><br>Supercharged Headphones</td>
<td><img src="C:\Users\91920\Desktop\smtvv.jpg" alt="Product 2: Ultra HD Smart TV"

width="150"><br>Ultra HD Smart TV</td>
</tr>
</table>

<div>
<img src="click_icon.png" alt="Click Me" class="icon" width="50" onclick="alert('You clicked the

icon!')">
<p>Click the icon above!</p>
</div>
</body>
</html>
Q4)
Create an HTML document to demonstrate Internal and External linking.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Q4</title>
</head>
<body>
<h1>Internal Linking</h1>
<p><a href="#section2">Jump to Section 2</a></p>\
<p id="section1">This is Section 1. <a href="#section2">Jump to Section 2</a></p>
<p id="section2">This is Section 2. <a href="#section1">Back to Section 1</a></p>
<h1>External Linking</h1>
<p><a href="https://www.example.com">Visit Example Website</a></p>
</body>
</html>
Q5)
. Create an HTML document to display the following table:
<html>
<title>Table</title>
<style>
th,td {border:solid; border-color:blue}
th {background-color:yellow;}
</style>
<body>
<table>
<tr color="yellow">
<th colspan="4" >Seminar</th>
</tr>
<tr color="yellow">
<th rowspan="2">Day</th>
<th colspan="2">Schedule</th>
<th rowspan="2">Topic</th>
</tr>
<tr>
<th>Start Time</th>
<th>End Time</th>
</tr>
<tr>
<td rowspan="2">Monday</td>
<td rowspan="2">8:00AM</td>
<td rowspan="2">5:00PM</td>
<td>Introduction to HTML</td>
</tr>
<tr>
<td>Important Html tag</td>
</tr>
<tr bgcolor="grey">
<td rowspan="3">Tuesday</td>
<td>8:00AM</td>
<td>11:00AM</td>
<td rowspan="2">CSS-1</td>
</tr>
<tr bgcolor="grey">
<td>11:00AM</td>
<td>2:00PM</td>
</tr>
<tr bgcolor="grey">
<td>2:00PM</td>
<td>5:00PM</td>
<td>JavaScript-1</td>
</tr>
<tr>
<td>Wednesday</td>
<td>8:00AM</td>
<td>12Noon</td>
<td>JavaScript-2</td>
</tr>
<tr bgcolor="grey">
<td rowspan="2">Thursday</td>
<td>8:00AM</td>
<td>12Noon</td>
<td>JQuery</td>
</tr>
<tr bgcolor="grey">
<td>1:00PM</td>
<td>3:00PM</td>
<td>Valedictory</td>
</tr>
</table>
</body>
</html>
Q6)
Create an HTML page demonstrating the following semantic tags:

a. Header
b. Nav
c. Main
d. Section
e. Footer
f. Details
g. Summary
h. Figure
i. Figure caption
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic Tags Q6</title>
<style>
body {
header {
background-color: #333;
color: #fff;
text-align: center;
nav {
color: #fff;
text-align: center;
main {
padding: 20px;
section, article, aside {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
footer {
color: #fff;
padding: 10px;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
figure {
margin: 0;
padding: 0;
text-align: center;
figcaption {
font-style: italic;
</style>
</head>
<body>
<header>
<h1>This is a Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>Section 1</h2>
<p>This is a section of the webpage.</p>
</section>
<article>
<h2>Article 1</h2>
<p>This is an article with some content.</p>
</article>
<details>
<summary>Click to expand</summary>
<p>Additional details or information can be placed here.</p>
</details>
<figure>
<img src="C:/Users/91920/Desktop/LOGO.jpg" alt="Image" width="200" height="100">
<figcaption>This is a figure caption.</figcaption>
</figure>
</main>
<footer>
<p>© VANSH.J_CS.COM</p>
</footer>
</body>
</html>
Q7)
. Create a student registration form using HTML which has the following controls:
a. Text Box
b. Text Area
c. Dropdown box
d. Option/radio buttons
e. Check boxes
f. Reset and Submit button
On pressing the Submit button, a message “Form submitted” should be displayed.
<!DOCTYPE html>
<html lang="en">
<head><title>Student Registration Form</title>
</head>
<body>
<h1>Student Registration Form</h1>
<form action="#" method="post" onsubmit="alert('Form submitted'); return true;">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="address">Address:</label><br>
<textarea id="address" name="address" rows="4" cols="50" required></textarea><br><br>
<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female">Female</label><br><br>
<label for="course">Course:</label><br>
<select id="course" name="course" required>
<option value="">Select a course</option>

<option value="Engineering">Engineering</option>
<option value="Medicine">Medicine</option>
<option value="Business">Business</option>
<option value="Arts">Arts</option>
</select><br><br>
<label for="semester">Semester:</label><br>
<input type="number" id="semester" name="semester" min="1" max="8" required><br><br>
<label for="skills">Skills:</label><br>
<input type="checkbox" id="java" name="skills" value="Java">
<label for="java">Java</label>
<input type="checkbox" id="SQL" name="skills" value="SQL">
<label for="SQL">SQL</label>
<input type="checkbox" id="python" name="skills" value="Python">
<label for="python">Python</label>
<input type="checkbox" id="html" name="skills" value="HTML/CSS">
<label for="html">HTML/CSS</label><br><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
</body>
</html>
CSS
Q1) Create a webpage for your department with a drop-down navigation menu for faculty,
courses, activities, etc. Implement the webpage using styles, rules, selectors, ID, class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Department Website</title>
<style>
/* Styles for navigation menu */
.dropdown {
position: relative;
display: inline-block;
margin-right: 20px; /* Added gap between menu items */
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
z-index: 1;
border: 1px solid #ccc; /* Added border */
border-top: none; /* Removed top border */
.dropdown:hover .dropdown-content {
display: block;
/* Styles for links in navigation menu */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
/* Styles for header */
header {
color: white;
padding: 20px;
text-align: center;
</style>
</head>
<body>
<header>
<h1>Department of ENGLISH</h1>
</header>
<nav>
<div class="dropdown">
<span>Faculty</span>
<div class="dropdown-content">
<a href="#">Professor A</a>
<a href="#">Professor B</a>
<a href="#">Professor C</a>
</div>
</div>
<span>Courses</span>
<a href="#">Course 1</a>
</div>
</div>
<span>Activities</span>
<a href="#">Seminar</a>
<a href="#">Workshop</a>
<a href="#">Conference</a>
</div>
</div>
</nav>
<main>
<h2>Welcome to the Department of ENG</h2>
<p>This is the main content of the webpage.</p>
</main>
<footer>
<p>© 2024 Department of ENG. All rights reserved.</p>
</footer>
</body>
</html>
Q2) Add appropriate CSS code to change the text, list, div element and table properties of
the HTML questions above
<!DOCTYPE html>
<html lang="en">
<head>
<title>Department Website</title>
<style>
/* Styles for navigation menu */
.dropdown {
position: relative;
display: inline-block;
margin-right: 20px; /* Added gap between menu items */
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
z-index: 1;
border: 1px solid #ccc; /* Added border */
border-top: none; /* Removed top border */
.dropdown:hover .dropdown-content {
display: block;
}
/* Styles for links in navigation menu */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
.dropdown-content a:hover {
/* Styles for header */
header {
color: white;
padding: 20px;
text-align: center;
/* Styles for text */
p{
font-size: 16px;
line-height: 1.6;
/* Styles for list */
ul {
list-style-type: circle;
/* Styles for div element */
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
border: 2px solid #ccc;
border-radius: 10px;
/* Styles for table */
table {
width: 100%;
border-collapse: collapse;
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
th {
</style>
</head>
<body>
<header>
<h1>Department of ENG</h1>
</header>
<nav>
<span>Faculty</span>
<a href="#">Professor A</a>
<a href="#">Professor B</a>
<a href="#">Professor C</a>
</div>
</div>
<span>Courses</span>
</div>
</div>
<span>Activities</span>
<a href="#">Seminar</a>
<a href="#">Workshop</a>
<a href="#">Conference</a>
</div>
</div>
</nav>
<main>
<h2>Welcome to the Department of ENG</h2>
<div class="container">
<p>This is the main content of the webpage.</p>
<ul>
<li>List item 1</li>
</ul>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</div>
</main>
<footer>
<p>© 2024 Department of ENGLISH. All rights reserved.</p>
</footer>
</body>
</html>
Java SCRIPT
Q1)
Write a Javascript code to accept a number from the user through the prompt and print its
multiplication table.
<html>
<head>
<title>Multiplication Table</title>
</head>
<body>
<h2>Multiplication Table</h2>
<script>
function displayMultiplicationTable() {
var num = prompt("Enter a number:");
if (num !== null && !isNaN(num)) {
num = parseInt(num);
var table = "<h3>Multiplication Table for " + num + ":</h3>";
for (var i = 1; i <= 10; i++) {
var result = num * i;
table += num + " x " + i + " = " + result + "<br>";
}
document.body.innerHTML += table;
} else {
alert("Invalid input! Please enter a valid number.");
}
}
// Call the function when the page loads

displayMultiplicationTable();
</script>
</body>
</html>
Q2. Create an HTML form having two text boxes and 4 buttons as shown below:
Write a Javascript code to implement respective operation when a user clicks on a

button.
The result of the operation is to be displayed on an alert window.
<html>
<head>
<title>Calculator</title>
</head>
<body>
<h2>Calculator</h2>
<form id="calculatorForm">
<label for="num1">Number 1:</label>
<input type="text" id="num1" name="num1"
onfocus="changeBackgroundColor(this)"><br><br>
<button type="button" onclick="addition()">Add</button>

<button type="button" onclick="subtraction()">Subtract</button>
<button type="button" onclick="multiplication()">Multiply</button>
<button type="button" onclick="division()">Divide</button>
</form>
<script>
function addition() {
var num1 = parseFloat(document.getElementById("num1").value);
var result = num1 + num2;
alert("Result: " + result);
}
function subtraction() {
var result = num1 - num2;
}
function multiplication() {
var result = num1 * num2;
}
function division() {
if (num2 === 0) {
alert("Cannot divide by zero!");
} else {
var result = num1 / num2;
}
}
</script>
</body>
</html>
3. Write a Javascript code to change the background color of a text box when the text
box gets focus.
<html>
<head>
<title>Change Text-box Background</title>
</head>
<body style="background-color: skyblue;">
<h2>Change Text-box Background Color</h2>
<form id="calculatorForm">

<button type="button" onclick="addition()">Add</button>

<button type="button" onclick="subtraction()">Subtract</button>
<button type="button" onclick="multiplication()">Multiply</button>
<button type="button" onclick="division()">Divide</button>
</form>
<script>
function changeBackgroundColor(element) {
element.style.backgroundColor = "#00ffff";
}
function addition() {
var result = num1 + num2;
}
function subtraction() {
var result = num1 - num2;
}
function multiplication() {
var result = num1 * num2;
}
function division() {
if (num2 === 0) {
alert("Cannot divide by zero!");
} else {
var result = num1 / num2;
}
}
</script>
</body>
</html>
4. Write a Javascript code for Q7 (of HTML above) to input and validate all data. Create
functions to perform validation of each element, for example:
a. Roll number is a 7-digit numeric value.
b. Name should be an alphabetical value (String).
c. Non-empty fields like DOB.
<html >
<head>
<title>Registration Form</title>
</head>
<body style="background-color: teal;">
<h1 style="color: #FC6A03; text-align: center;">Registration Form</h1>
<h2 style="text-align: center;">A Student Registration Form</h2>
<form id="form" autocomplete="on">
<fieldset>
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname" autofocus required><br><br>
<label for="lname">Last Name:</label><br>

<input type="text" id="lname" name="lname" required><br><br>
<label for="rollno">Roll No:</label><br>

<input type="text" id="rollno" name="rollno" required><br><br>
<label for="phone">Phone No:</label><br>

<input type="tel" id="phone" name="phone" maxlength="10" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="5"
maxlength="15" required><br><br>
<label for="address">Address:</label><br>
<textarea id="address" name="address" required></textarea><br><br>
<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label><br><br>
<label>Courses:</label><br>
<input type="checkbox" id="course1" name="course1" value="DSC">
<label for="course1"> Do you have select your discipline courses?</label><br>
<input type="checkbox" id="course2" name="course2" value="GE">
<label for="course2"> Do you know GE Courses</label><br>
<input type="checkbox" id="course3" name="course3" value="SEC">
<label for="course3"> Do you know SEC Courses</label><br>
<input type="checkbox" id="course4" name="course4" value="VAC">
<label for="course4"> Do you know SEC Courses</label><br><br>
<button type="button" onclick="validateForm()">Submit</button>

<input type="reset" value="Reset"><br><br>
</fieldset>
</form>
<script>
function validateForm() {
var fname = document.getElementById("fname").value.trim();
var lname = document.getElementById("lname").value.trim();
var rollno = document.getElementById("rollno").value.trim();
var phone = document.getElementById("phone").value.trim();
var password = document.getElementById("password").value.trim();
var address = document.getElementById("address").value.trim();
if (fname === "" || lname === "" || rollno === "" || phone === "" || password ===
"" || address === "") {
alert("Please fill in all fields.");
return;
}
if (!/^[a-zA-Z]+$/.test(fname) || !/^[a-zA-Z]+$/.test(lname)) {
alert("First name and last name should contain only alphabets.");
return;
}
if (!/^\d{7}$/.test(rollno)) {
alert("Roll number should be a 7-digit numeric value.");
return;
}
if (!/^\d{10}$/.test(phone)) {
alert("Phone number should be a 10-digit numeric value.");
return;
}
if (password.length < 5 || password.length > 15) {

alert("Password should be between 5 to 15 characters long.");
return;
}
alert("Form submitted successfully!");

}
</script>
</body>
</html>
.
jQuery and JSON

1. Change text color and contents using button click events using jQuery. <!DOCTYPE
html>
<html lang="en">
<head>
<title>Change Text Color and Contents</title>
<style>
.text {
color: black;
}
</style>
</head>
<body>
<p class="text">This is a paragraph.</p>
<button id="changeColor">Change Color</button>
<button id="changeText">Change Text</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#changeColor").click(function(){
$(".text").css("color", "red");
});
$("#changeText").click(function(){
$(".text").text("New text content");
});
});
</script>
</body>
</html>
2. Select elements using ID, class, elements name, attribute name.
<html>
<head>
<title>jQuery Selectors</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight {
background-color: pink;
}
</style>
</head>
<body>
<h1 id="heading">Hello, jQuery!</h1>
<button id="btn1">Click me!</button>
<div class="container">
<p>This is a paragraph inside a container.</p>
</div>
<input type="text" name="username" placeholder="Enter your username" data-
type="inputField">
<script>
// Select elements by ID, class, element name, and attribute name
// Select by ID
$("#heading").text("Welcome to jQuery!");
// Select by class and apply a class to highlight

$(".container").addClass("highlight");
// Select by element name and change text

$("p").text("This paragraph text is updated using jQuery.");
// Select by attribute name and value

$("[data-type='inputField']").attr("placeholder", "Enter your new username");
// Click event example

$("#btn1").click(function() {
alert("Button clicked!");
});
</script>
</body>
</html>
3. Write a JQuery function to test whether a date is a weekend.
<html>
<head>
<title>Check if Date is a Weekend</title>
<script>
function isWeekend(dateString) {
var date = new Date(dateString);
var dayOfWeek = date.getDay();
if (dayOfWeek === 0 || dayOfWeek === 6) {
return true; // Weekend
} else {
return false; // Not a weekend
}
}
$(document).ready(function() {
$('#checkDateBtn').click(function() {
var inputDate = $('#dateInput').val();
if (isWeekend(inputDate)) {
$('#result').text(inputDate + ' is a weekend.');
} else {
$('#result').text(inputDate + ' is not a weekend.');
}
});
});
</script>
</head>
<body>
<label for="dateInput">Enter a Date:</label>
<input type="text" id="dateInput" placeholder="YYYY-MM-DD">
<button id="checkDateBtn">Check</button>
<p id="result"></p>
</body>
</html>
4. Demonstrate various events: blur, change, focus, click, dblClick, submit.
<html>
<head>
<title>jQuery Events</title>
<script>
$(document).ready(function() {
$('#inputBlur').blur(function() {
$('#outputBlur').text('Input blurred');
});
$('#inputChange').change(function() {
$('#outputChange').text('Value changed to: ' + $(this).val());
});
$('#inputFocus').focus(function() {
$('#outputFocus').text('Input focused');
});
$('#btnClick').click(function() {
$('#outputClick').text('Button clicked');
});
$('#btnDoubleClick').dblclick(function() {
$('#outputDoubleClick').text('Button double-clicked');
});
$('#formSubmit').submit(function(event) {
event.preventDefault(); // Prevent form submission
$('#outputSubmit').text('Form submitted');
});
});
</script>
</head>
<body>
<label for="inputBlur">Blur Event:</label>
<input type="text" id="inputBlur">
<p id="outputBlur"></p>
<label for="inputChange">Change Event:</label>

<input type="text" id="inputChange">
<p id="outputChange"></p>
<label for="inputFocus">Focus Event:</label>

<input type="text" id="inputFocus">
<p id="outputFocus"></p>
<button id="btnClick">Click Event</button>

<p id="outputClick"></p>
<button id="btnDoubleClick">Double Click Event</button>
<p id="outputDoubleClick"></p>
<form id="formSubmit">
<label for="textInput">Submit Event:</label>
<input type="text" id="textInput">
<input type="submit" value="Submit">
</form>
<p id="outputSubmit"></p>
</body>
</html>
5. Write a jQuery code that demonstrates the mouseOver and mouseOut event.
a. The web page should have a hyperlink labeled “It shows the mouse events” and
linked to your college website.
b. When the mouse hovers over the link, the background color of webpage should
change to green and link text should change to “I’m green now”.
c. When the mouse is taken away from the link, the background color of webpage
should change to red and the link text should change to “I’m red now”.
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events Demo</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jque
ry.min.js"></script>
<style>body{transition:background-color 0.5s ease;
}
</style>
</head>
<script>
$(document).ready(function(){
$("#mouseLink").mouseover(function(){
$("body").css("background-color", "green");
$(this).text("I'm green now");
});
$("#mouseLink").mouseout(function(){
$("body").css("background-color", "red");
$(this).text("I'm red now");
});
});
</script>
</head>
<body>
ABC
</body>
</html>

Komya Cs

Uploaded by

Copyright:

Available Formats

Komya Cs

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

Komya Cs

Uploaded by

Copyright:

Available Formats

KOMYA BHARTI

. Create an HTML document with following formatting – Bold, Italics, Underline,

font-family: Arial, sans-serif;

<p>WEBPAGE WITH <span class="underline">underlined text</span>.</p>

<p>WEBPAGE WITH <strong>bold text</strong> and <em>italic text</em>.</p>

<p style="color: purle;"> specific color.</p>

<p style="font-family: 'Courier New', monospace;"> custom font.</p>

<p style="font-size: 20px;"> custom font size.</p>

<marquee behavior="scroll" direction="left">Marquee text!</marquee>

. Create an HTML document with Ordered and Unordered lists.

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

/* Style for table background */

border: 1px solid #ddd;

/* Style for clickable icon */

<img src="C:\Users\91920\Desktop\KB.png" alt="Company Logo" width="200">

<td><img src="C:\Users\91920\Desktop\HDP.jpg" alt="Product 1: Supercharged Headphones"

<td><img src="C:\Users\91920\Desktop\smtvv.jpg" alt="Product 2: Ultra HD Smart TV"

<img src="click_icon.png" alt="Click Me" class="icon" width="50" onclick="alert('You clicked the

<p>Click the icon above!</p>

<p><a href="#section2">Jump to Section 2</a></p>\

<p id="section1">This is Section 1. <a href="#section2">Jump to Section 2</a></p>

<p id="section2">This is Section 2. <a href="#section1">Back to Section 1</a></p>

<p><a href="https://www.example.com">Visit Example Website</a></p>

. Create an HTML document to display the following table:

Create an HTML page demonstrating the following semantic tags:

<title>Semantic Tags Q6</title>

font-family: Arial, sans-serif;

section, article, aside {

border: 1px solid #ccc;

<p>This is a section of the webpage.</p>

<p>This is an article with some content.</p>

<p>Additional details or information can be placed here.</p>

<img src="C:/Users/91920/Desktop/LOGO.jpg" alt="Image" width="200" height="100">

<figcaption>This is a figure caption.</figcaption>

<head><title>Student Registration Form</title>

<h1>Student Registration Form</h1>

<form action="#" method="post" onsubmit="alert('Form submitted'); return true;">

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

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

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

<input type="radio" id="male" name="gender" value="male" required>

<input type="radio" id="female" name="gender" value="female" required>

<select id="course" name="course" required>

<option value="">Select a course</option>

<input type="number" id="semester" name="semester" min="1" max="8" required><br><br>

<input type="checkbox" id="java" name="skills" value="Java">

<input type="checkbox" id="SQL" name="skills" value="SQL">

<input type="checkbox" id="python" name="skills" value="Python">

<input type="checkbox" id="html" name="skills" value="HTML/CSS">

<input type="reset" value="Reset">

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

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

/* Styles for navigation menu */

margin-right: 20px; /* Added gap between menu items */

box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);

border: 1px solid #ccc; /* Added border */

<p>© 2024 Department of ENG. All rights reserved.</p>

<p>© 2024 Department of ENGLISH. All rights reserved.</p>