Scribd
Upload
48 views17 pages

Web Design File

The document contains code snippets demonstrating different HTML elements and tags. It includes examples of creating web pages with links between pages, embedding images and text, styling elements with CSS, creating a clickable image map, and building a form with various input fields.

Uploaded by

90scartoonshowskid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
48 views17 pages

Web Design File

The document contains code snippets demonstrating different HTML elements and tags. It includes examples of creating web pages with links between pages, embedding images and text, styling elements with CSS, creating a clickable image map, and building a form with various input fields.

Uploaded by

90scartoonshowskid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Ques 1: Write a program in HTML only where three pages should link with

each other and demonstrate some tags i.e., heading, image, paragraph,
horizontal ruler line, bold, italic, and underline tags.
Answer :-

<html>
<head>
<title>Home Page</title>
</head>
<body>
<h1> <i>WEBPAGES</i> </h1>
<div>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="tool.html">Tools</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
<h3> <b>WELCOME</b> To My Basic Website</h3>
<hr>
<img src="witcher 3.jpg" width="600" height="400">
<br>
<h4> <u> Thank You for Visiting <u> </h4>
</body>
</html>

Output:-
Ques 2: Create a website using HTML and CSS, which should consist of
the webpages Home, Product, and Contact Us. The product page should
demonstrate at least 3 real-life product information.
Answer:-
<html>
<head>
<title>WWE Shop</title>
<style>
.Nav-Bar{
text-align: center;
background-color: black;
border-radius: 10px;
}
button, .nav-link{
background-color: rgb(212, 47, 47);
color: white;
border-radius: 8px;
}

.Banner{
text-align: center;
}
.Content{
text-align: center;
}
.products img{
border: 2px solid black;
border-radius: 25px;
margin: 30px;
display: inline-block;
}
.products img:hover{
box-shadow: 0 0 10px black;
}
.media a{
border: 2px solid black;
margin: 10px;
display: inline-block;
border-radius: 10px;
padding: 5px;
}
</style>
</head>
<body>
<!-- navigation bar -->
<div class="Nav-Bar">
<hr>
<button class="nav-item">
<a class="nav-link" href="index.html">HOME</a>
</button>
<button class="nav-item">
<a class="nav-link" href="products.html">PRODUCTS</a>
</button>
<button class="nav-item">
<a class="nav-link" href="about.html">ABOUT US</a>
</button>
<button class="nav-item">
<a class="nav-link" href="contact-us.html">CONTACT US</a>
</button>
<hr>
</div>
<!-- banner -->
<div class="Banner">
<img src="wwelogo.png" alt="Banner" width="300px" height="100px">
<hr>
</div>
<!-- overiew of products -->
<div>
<h2><u>Product Views</u></h2>
<img src="banner.avif" alt="Overview" height="600px" width="2250px">
<hr>
</div>
<!-- home page content -->
<div>
<h2 class="Content"><u>WWE Products and Superstars Merchandise</u></h2>
<p> The WWE Shop is your online source for all things WWE including title
belts,
apparel and accessories. Score one of the hottest items available from our
collection of WWE x NFL Title Belts. While you're here, gear up for the next
big
event or shop for WWE gifts and Gift Cards for all the lucky men, women and kids
on
your shopping list.
The newest WWE T-Shirts and Hats from our assortment make great gifts for
any
fan.
Find collectibles like action figures and bobbleheads for your favorite superstar or
choose a piece of gear to help you celebrate your favorite new gimmick. Find
merch for current WWE greats like Egde, Roman Reigns, Becky Lynch, Seth
Rollins, Sami Zayn and Brock Lesnar or remember legends like Stone Cold Steve
Austin, The Undertaker and The Rock.
No matter what you’re searching for, you can count on us for the latest and
greatest WWE merchandise.
We’ve got memorabilia to help you commemorate some of your favorite
moments
in WWE history as well as events to come. Gear up for this year’s upcoming Clash
at the Castle with officially licensed apparel like T-Shirts, hoodies and more.
As your favorite superstars become reigning champs or compete in events like
Money in the Bank, Royal Rumble and WrestleMania, WWE Shop is here with all
the merch to help you show off your support.
Whether you’re looking for gear to rep the roster from RAW, Smackdown or NXT,
our collection offers all the gifts and apparel you need to satisfy fans of all ages.
</p>
<hr>
<br>
</div>
<!-- listed products -->
<h1><u>BUY NOW</u>:-</h1>
<div class="products">
<a href="products.html"><img src="white.avif"
alt="Products" width="400px" height="600px"></a>
<a href="products.html"><img src="product.avif"
alt="Products" width="500px" height="600px"></a>
<a href="products.html"><img src="stone code.avif"
alt="Products" width="400px" height="600px"></a>
<div>
<hr>
<br>
<!-- social media links -->
<h2><u>SOCIAL MEDIA</u></h2>
<div class="media">
<a href="https://www.facebook.com/" target="_blank"><img
src="fb_icon_325x325.png" alt="Facebook" width="100px" height="100px"></a>
<a href="https://www.instagram.com/" target="_blank"><img
src="Instagram.jpg"
alt="Instagram" width="100px" height="100px"></a>
<a href="https://twitter.com/" target="_blank"><img src="twitter x.png"
alt="Twitter" width="100px" height="100px"></a>
<a href="https://maps.google.com/" target="_blank"><img src="unnamed.png"
alt="Adress" width="100px" height="100px"></a>
<hr>
</div>
</body>
</html>
Output:-
Ques 3:. Create a webpage that should demonstrate all types of style
sheets.
Answer:
<html>
<head>
<title>Style Sheet Demo</title>
</head>

<!--Internal Style-->
<style>
body {
background-color: #f2f2f2;
margin: 0;
padding: 0;
}

p{
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}

.internal-box { width: 150px;


height: 150px;
background-color: #2ecc71;
margin-bottom: 20px;
}
</style>

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


</head>
<body>
<u><h1>Style Sheet </h1></u>
<h2>Inline styles, internal styles, and external styles.</h2>
<div style="width:100px; height: 100px; background-color: #3498db;
margin-bottom: 20px;">Inline Style</div>
<div class="internal-box">Internal style</div>
<div class="external-box">External style</div>
</body>
</html>

//styles.css

.external-box { width: 350px;


height: 150px;
background-color: rgb(204, 46, 175);
margin-bottom: 20px;
}
Output:-

Ques4: Create a web page to embed an image map in a web page using
HTML

Answer:-
<html>
<head>
<title>Image Map Example</title>
</head>
<body>
<h1>Clickable Image Map</h1>
<img src="russia.jpg" alt="russia Map" usemap="#map" height="300px">
<map name="map">
<area shape="rect" coords="100,50,200,150" alt="moscow"
href="north-america.html">
<area shape="rect" coords="300,50,400,150" alt="Ukrain"
href="Ukrain.html">
<area shape="rect" coords="500,50,600,150" alt="North korea" href="North
korea.html">
<area shape="rect" coords="700,50,800,150" alt="London" href="London.html">
<area shape="rect" coords="100,200,200,300" alt="Europe" href="europe.html">
<area shape="rect" coords="300,200,400,300" alt="China” href ="China.html">
</map>
</body>
</html>
Output:-

Ques 5: Create a program in HTML that should show a form with different
input elements
Answer:-
<html>
<head>
<title>Form</title>
</head>
<body>
<h1>Form Page</h1>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>

<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<br>
<label>Interests:</label>
<input type="checkbox" id="reading" name="interests" value="reading">
<label for="reading">Reading</label>
<input type="checkbox" id="traveling" name="interests" value="traveling">
<label for="traveling">Traveling</label>
<br>

<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>
<br>

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


</form>
</body>
</html>
Output:-

Ques 6: Create a webpage that should show how can download some
contents in zip format from the server.
Answer:-
<html>
<head>
<title>Zip Download Example</title>
</head>
<body>
<h1>Zip File</h1>
<p>Click the button below to download the contents in a zip file:</p>
<button onclick="downloadZip( )"> Download Zip </button>

<script>
function downloadZip() {
const files = [ { name: 'file1.txt', content: 'This is file 1 content.' },
{ name: 'file2.txt', content: 'This is file 2 content.' },
];
const zip = new JSZip();
files.forEach(file => {zip.file(file.name, file.content);
});
zip.generateAsync({ type: 'blob' })
.then(blob => {
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'downloaded_contents.zip';
document.body.appendChild(link); link.click();
document.body.removeChild(link);
});
.catch(error => {console.error('Error generating zip file:', error); });
}
</script>
</body>
</html>

Output:-

Ques 7: Create a web page to get the coordinates from an image using
Javascript
Answer:-
<html>
<head>
<title>Image Coordinates Example</title>
<style>
#image-container { position: relative;
}

#coordinate-display { position: absolute;


top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.8);
padding: 5px;
font-size: 14px;
}
</style>
</head>
<body>
<h1> Map Image Coordinates</h1>
<div id="image-container">
<img src="new zealand" height="400" width="400" alt="Your Image" id="image"
onclick="getCoordinates(event)">

<div id="coordinate-display">Coordinates: <span id="coordinates"></span></div>


</div>
<script>
function getCoordinates(event) { const x = event.offsetX;
const y = event.offsetY;

document.getElementById('coordinates').innerText = `X: ${x}, Y: ${y}`;


}
</script>

</body>
</html>

Output:-
Ques 8: Design an HTML form for keeping students record and validate it
using Javascript.
Answer:-
<html>
<head>
<title>Student Record Form</title>
<style>
label {
display: block;
margin-bottom: 5px;
}

input {
margin-bottom: 10px;
}

.error-message { color: red;


margin-top: 5px;
}
</style>
</head>
<body>
<h1>Student Record Form</h1>
<form id="studentForm" onsubmit="validateForm(event)">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required>
<span id="firstNameError" class="error-message"></span>

<label for="lastName">Last Name:</label>


<input type="text" id="lastName" name="lastName" required>
<span id="lastNameError" class="error-message"></span>

<label for="age">Age:</label>
<input type="number" id="age" name="age" required>
<span id="ageError" class="error-message"></span>

<label for="grade">Grade:</label>
<input type="text" id="grade" name="grade" required>
<span id="gradeError" class="error-message"></span>

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


</form>

<script>
function validateForm(event) {
// Prevent the form from submitting by default event.preventDefault();

// Reset error messages resetErrorMessages();

// Get form inputs const firstName =


document.getElementById('firstName').value.trim();
const lastName = document.getElementById('lastName').value.trim();
const age = document.getElementById('age').value;
const grade = document.getElementById('grade').value.trim();

// Validation logic
let isValid = true;
if (firstName === '') { isValid = false;
displayError('firstNameError', 'First Name is required.');
}

if (lastName === '') { isValid = false;


displayError('lastNameError', 'Last Name is required.');
}

if (isNaN(age) || age <= 0) { isValid = false;


displayError('ageError', 'Please enter a valid age.');
}

if (grade === '') { isValid = false;


displayError('gradeError', 'Grade is required.');
}

// If the form is valid, you can submit it or perform further actions


if (isValid) {
alert('Form submitted successfully!');
// You can add additional logic here, such as sending data to a
server.
}
}

function displayError(id, message) {


// Display error message document.getElementById(id).innerText = message;
}

function resetErrorMessages() {
// Reset all error messages const errorMessages =
document.getElementsByClassName('error-message'); for (const
errorMessage of errorMessages) {errorMessage.innerText = '';
}
}
</script>
</body>
</html>
Output:-

Ques 9: Write an XML that should show the list of states and union
territories after visiting the link
“https://en.wikipedia.org/wiki/List_of_states_and_union_territories_of_I
ndia_by_area”
Answer:-
<?xml version="1.0" encoding="UTF-8"?>
<India>
<Region>
<State>
<Name>Andhra Pradesh</Name>
<Capital>Amaravati</Capital>
<Area>160,205 sq km</Area>
<Population>49,506,799</Population>
</State>
<State>
<Name>Arunachal Pradesh</Name>
<Capital>Itanagar</Capital>
<Area>83,743 sq km</Area>
<Population>1,383,727</Population>
</State>
</Region>
<Region>
<UnionTerritory>
<Name>Andaman and Nicobar Islands</Name>
<Capital>Port Blair</Capital>
<Area>8,249 sq km</Area>
<Population>379,944</Population>
</UnionTerritory>
<UnionTerritory>
<Name>Chandigarh</Name>
<Capital>Chandigarh</Capital>
<Area>114 sq km</Area>
<Population>1,055,450</Population>
</UnionTerritory>
</Region>
</India>

Output:-

Ques 10: Write an HTML program to create resume preparation using


tables.
Answer:-
<html>
<head>
<title>Resume</title>
<style>
th, td{
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<h1>Resume</h1>
<table>
<tr>
<th colspan="3">Personal Information</th>
</tr>
<tr>
<th>Name :</th>
<td>Ashutosh Singh</td>
</tr>
<tr>
<th>Email :</th>
<td> <a>[email protected]</a></td>
</tr>
<tr>
<th>Contact :</th>
<td>9125024087</td>
</tr>
<tr>
<th>Address:</th>
<td>Vineet khand 1, Gomti Nagar , Lucknow</td>
</tr>
</table>

<h2>Education</h2>
<table>
<tr>
<th>High School</th>
<th>Institution</th>
<th>Year</th>
</tr>
<td>10th</td>
<td>SSV</td>
<td >2019</td>
<tr>
<th>Intermediate</th>
<th>Institution</th>
<th>Year</th>
</tr>
<tr>
<td>12th</td>
<td>SSV</td>
<td>2021</td>
</tr>
<tr>
<th> Undergraduation Degree</th>
<th>Institution</th>
<th>Year</th>
</tr>
<tr>
<td>BCA</td>
<td>CIMS</td>
<td>2024</td>
</tr>
</table>

<h2>Skills</h2>
<ul>
<li>Python</li>
<li>Frontend Design</li>
<li>C language</li>
<li>JAVA</li>
<li>My SQL</li>
</ul>
</body>
</html>

Output:-

You might also like