Scribd
Upload
13 views

HTML Practical 1

The document contains instructions and solutions for 5 HTML exercises: 1. Creating a basic HTML page structure with head, title, and body tags. 2. Adding a link and image to an HTML page. 3. Creating an HTML table with columns for name, age, and city and adding sample rows. 4. Adding basic CSS styling to the first exercise like changing fonts and colors. 5. Making an HTML form to collect user information like name, email, interests, and address.

Uploaded by

Palak Batra
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views

HTML Practical 1

The document contains instructions and solutions for 5 HTML exercises: 1. Creating a basic HTML page structure with head, title, and body tags. 2. Adding a link and image to an HTML page. 3. Creating an HTML table with columns for name, age, and city and adding sample rows. 4. Adding basic CSS styling to the first exercise like changing fonts and colors. 5. Making an HTML form to collect user information like name, email, interests, and address.

Uploaded by

Palak Batra
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

Hardik Bakshi

210010800018

Exercise 1: Basic HTML Structure Create an HTML document with the following
structure:

Title: "My First HTML Page"

Head: Contains the title element.

Body: Contains a heading (h1) that says "Hello, Polytechnic Students!" and a
paragraph (p) with some introductory text.

<!DOCTYPE html>

<html>

<head>

<title>My First HTML Page</title>

</head>

<body>

<h1>Hello, Polytechnic Students!</h1>

<p>Welcome to the world of HTML. This is your first HTML page.</p>

</body>

</html>

Exerc
Hardik Bakshi
210010800018

ise 2: Links and Images Create an HTML document with a link (a) that goes to a website of your
choice and an image (img) that is displayed on the page.

Solution 2:

<!DOCTYPE html>

<html>

<head>

<title>Links and Images</title>

</head>

<body>

<h1>Visit Our Website</h1>

<a href="https://www.example.com" target="_blank">Click here to visit Example.com</a>

<h2>Our Logo</h2>

<img src="logo.png" alt="Company Logo" width="200" height="100">

</body>

</html>
Hardik Bakshi
210010800018

Exercise 3 Create an HTML file with a table.

The table should have three columns: Name, Age, and City.

Add at least three rows of data to the table.

Style the table using CSS to make it visually appealing.

<!DOCTYPE html>

<html>

<head>

<style>

table {

border-collapse: collapse;

width: 50%;

margin: 20px auto;

th, td {

border: 1px solid #ddd;

padding: 8px;

text-align: left;

th {

background-color: #f2f2f2;

</style>

</head>

<body>

<table>

<tr>

<th>Name</th>
Hardik Bakshi
210010800018

<th>Age</th>

<th>City</th>

</tr>

<tr>

<td>John Doe</td>

<td>25</td>

<td>New York</td>

</tr>

<tr>

<td>Jane Smith</td>

<td>30</td>

<td>Los Angeles</td>

</tr>

<tr>

<td>Bob Johnson</td>

<td>22</td>

<td>Chicago</td>

</tr>

</table>

</body>

</html>
Hardik Bakshi
210010800018

Exercise 4: Basic CSS Styling Style the HTML document from Exercise 1 with the
following CSS rules:

Set the background color of the <body> to light blue.

Change the text color of the <h1> to red.

Add a border around the image.

Change the font size of the paragraph to 16px.

<!DOCTYPE html>

<html>

<head>

<title>My First Web Page</title>

<style>

body {

background-color: lightblue;

h1 {

color: red;

img {

border: 2px solid black;

p{

font-size: 16px;

</style>

</head>

<body>

<h1>Welcome to My Website</h1>
Hardik Bakshi
210010800018

<p>This is my first web page. It's a simple example to get started with HTML and CSS.</p>

<img src="your-image.jpg" alt="Image Description">

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

</body>

</html>
Hardik Bakshi
210010800018

Exercise 5 : Make a HTML form for user information


<!DOCTYPE html>

<html>

<head>

<title>User Information Form</title>

<style>

.form{

border: 2px solid black;

background-color: rgb(0, 174, 255);

</style>

</head>

<body style="display:flex; background-color: blue;">

<div class="form"> <form action="action.php” target= “_blank”


method="post">

<h1 style="text-align: center;">User info Form</h1>

<fieldset>

<legend>User Information</legend>

<label for="name">Name:</label>

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

<label for="email">Email:</label>

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

<label for="dob">Date of Birth:</label>

<input type="date" id="dob" ><br><br>

<label>Area of Interest:</label><br>
Hardik Bakshi
210010800018

<input type="radio" id="interest1" >

<label for="interest1">Technology</label><br>

<input type="radio" id="interest2" >

<label for="interest2">Sports</label><br>

<input type="radio" id="interest3" >

<label for="interest3">Music</label><br><br>

</fieldset>

<fieldset>

<legend>Hobbies</legend>

<input type="checkbox" id="hobby1" >

<label for="hobby1">Reading</label><br>

<input type="checkbox" id="hobby2>

<label for="hobby2">Traveling</label><br>

<input type="checkbox" id="hobby3" >

<label for="hobby3">Gardening</label><br><br>

</fieldset>

<fieldset>

<legend>Address</legend>

<label for="address">Address:</label><br>

<textarea id="address" name="address" rows="4" cols="50"


required></textarea><br><br>

</fieldset>

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

</form>
Hardik Bakshi
210010800018

</div>

</body>

</html

You might also like