Scribd
Upload
33 views9 pages

Web Applications Practical File

The document contains multiple HTML code examples for different tasks. It includes code for creating a city webpage with landmarks, a list of places in Maharashtra, a population table for countries, an image hyperlink example, and a form for uploading an article with various fields. Each section demonstrates specific HTML elements and styling techniques.

Uploaded by

abhi dahiya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
33 views9 pages

Web Applications Practical File

The document contains multiple HTML code examples for different tasks. It includes code for creating a city webpage with landmarks, a list of places in Maharashtra, a population table for countries, an image hyperlink example, and a form for uploading an article with various fields. Each section demonstrates specific HTML elements and styling techniques.

Uploaded by

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

Q1 Write a HTML code to generate the following output.

Create an html page with following


specifications Title should be about myCity Place your City name at the top of the page in large text
and in blue colour Add names of landmarks in your city each in a different color, style and typeface
One of the landmark, your college name should be blinking Add scrolling text with a message of your
choice

ANS:-
<html>

<head>

<title>About My City</title>

<style>

.city-name {

font-size: 24px;

color: blue;

.landmark {

font-size: 18px;

font-family: Arial, sans-serif;

.landmark-1 {

color: red;

.landmark-2 {

color: green;

.landmark-3 {

color: orange;

.blink {

animation: blink 1s infinite;

@keyframes blink {

0% { opacity: 1; }

50% { opacity: 0; }
100% { opacity: 1; }

</style>

</head>

<body>

<h1 class="city-name">Gameland</h1>

<p class="landmark landmark-1">Xbox Palace</p>

<p class="landmark landmark-2">PlayStation Palace</p>

<p class="landmark landmark-3">Nintendo Palace 3</p>

<h2 class="blink">The Gaming Zone (Blinking)</h2>

<marquee behavior="scroll" direction="left">

Vsit us only if SERIOUS about gaming

</marquee>

</body>

</html>

Q2 Write a HTML code to generate following output


Maharashtra
o Pune
I. Dighi
II. Moshi
III. Shivajinagar
o Mumbai
I. Santakruiz
II. Vikroli
III. Mumbra

ANS:-

<html>

<head>

<title>Places in Maharashtra</title>

<style>

.state-name {

font-size: 24px;

color: blue;

.city {

margin-left: 20px;

.landmark {

margin-left: 40px;

</style>

</head>

<body>

<h1 class="state-name">Maharashtra</h1>

<ul class="city">

<li>

<strong>Pune</strong>

<ol class="landmark">

<li>I. Dighi</li>

<li>II. Moshi</li>
<li>III. Shivajinagar</li>

</ol>

</li>

<li>

<strong>Mumbai</strong>

<ol class="landmark">

<li>I. Santakruiz</li>

<li>II. Vikroli</li>

<li>III. Mumbra</li>

</ol>

</li>

</ul>

</body>

</html>

Q3
ANS:-

<html>

<head>

<title>Country Population</title>

</head>

<body>

<table>

<tr>

<th>Country</th>

<th>Population (In Crores)</th>

<th>1998</th>

<th>1999</th>

<th>2000</th>

</tr>

<tr>

<td>INDIA</td>

<td>100</td>

<td>85</td>

<td>90</td>

<td>100</td>

</tr>

<tr>

<td>USA</td>

<td>40</td>

<td>30</td>

<td>35</td>

<td>40</td>

</tr>

<tr>

<td>UK</td>

<td>35</td>

<td>25</td>

<td>30</td>
<td>35</td>

</tr>

</table>

</body>

</html>

<html>

<head>

<title>Image Hyperlink Example</title>

</head>

<body>

<h1>Image Hyperlink Example</h1>

<p>

<a href="https://www.example.com" target="_blank">This link will open in a new window.</a>

</p>

<p>

<a href="https://www.example.com">This link will open in the same window.</a>

</p>

<p>
<a href="#reference">This link will open to a reference within the same document.</a>

</p>

<p>

<img src="https://example.com/image.png" alt="Image">

</p>

<h2 id="reference">Reference Within the Same Document</h2>

<p>

This is the reference that the link above points to.

</p>

<p>

<a href="https://example.com/image2.png"><img src="https://example.com/image.png" alt="Image"></a>

</p>

<p>

This image is a hyperlink to the second image.

</p>

</body>

</html>
Q5 :- Design an html form to take the information of a article to be uploaded such as file
path, author name , type (technical, literary, general), subject topic ( to be selected from a
list) etc. One should provide button to Submit as well as Reset the form contents.
<html>

<head>

<title>Upload Article</title>

</head>

<body>

<h2>Upload Article</h2>

<form action="#" method="post">

<label for="file">File Path:</label>

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

<label for="author">Author Name:</label>

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

<label for="type">Type:</label>

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

<option value="technical">Technical</option>

<option value="literary">Literary</option>

<option value="general">General</option>

</select><br><br>

<label for="subject">Subject Topic:</label>

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

<option value="SCIENCE">Topic 1</option>

<option value="CULTURE">Topic 2</option>

<option value="POLITICAL">Topic 3</option>

</select><br><br>

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

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

</form>

</body>
</html>

You might also like