Web Designning-I Practical File
Unit-1 Practical list
1. Design a program to create basic structure of HTML page to print Hello World.
2. Create a program to Print syllabus of your subject using list tags.
3. Design a program to perform Internal linking using <a> tag.
4. Design a program in html to perform external linking.
5. Create a table using table tag to display your bio-data.
6. Write a practice program which have a inline CSS effect.
7. Write a program that have internal CSS effect.
8. Give a implementation of external CSS effect on <p> tag as well as the complete HTML body
section.
9. Observe the external style sheet cascade order: Create an HTML file with a paragraph.
Include two style sheets—one with a blue text colour & pink background colour and another
with a red text colour and yellow background colour. Observe the cascade order.
10. Create a new website name it is form. Test.html and create a form with form control.
11. Create a web page name it’s table.html and create a table.
12. Case Study: Registration Page in Table form.
13. Case Study: Create Employee Registration webpage using HTML Form Object.
14. Case Study: Create a static web page using table tags of HTML.
15. Case Study: Create a static web page which defines all text formatting tags of HTML in
tabular format.
16. Case Study: Create webpage using list tags of HTML.
17. Case Study: Write a program to Create Registration Form in Form tag in HTML
Programs: -
1. Design a program to create basic structure of HTML page to print Hello
World.
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1> Hello World!!!!!</h1>
</body>
</html>
2. Create a program to print syllabus of your subject using list tags.
<!DOCTYPE html>
<html>
1|Page
Web Designning-I Practical File
<head>
<title>semester 3 subject</title>
</head>
<body>
<h1> Subjects for semester 3</h1>
<ul>
<li> Web Design</li>
<li> Software Engineering</li>
<li> Statistical method</li>
<li> Object oriented Programming</li>
<li> Database Handling using Python</li>
</ul>
</body>
</html>
3. Design a program to perform Internal linking using <a> tag.
<!DOCTYPE html>
<html>
<head>
<title>Internal Linking Example</title>
</head>
<body>
<h1> Internal Linking Example</h1>
<p> This is a simple example of Internal Linking using anchor tags</p>
<ul>
<li> <a href="#Webdesign">Web Design</a></li>
<li> <a href="#Software Engineering"> Software Engineering</li>
<li> <a href="#Statistical method">Statistical method</li>
<li> <a href="#Object oriented Programming">Object oriented Programming</li>
<li> <a href="#Database Handling using Python">Database Handling using Python</li>
</ul>
2|Page
Web Designning-I Practical File
</body>
</html>
4. Design a program in html to perform external linking.
<!DOCTYPE html>
<html>
<head>
<title>External Linking Example</title>
</head>
<body>
<h1> External Linking Example</h1>
<p> This is a simple example of External Linking using anchor tags</p>
<ul>
<li> <a href="#http://www.example.com">Example Website</a></li>
<li> <a href="#http://www.openai.com"> OpenAI Website</li>
<li> <a href="#http://www.wikipedia.com">wikipedia</li>
</ul>
</body>
</html>
5. Create a table using table tag to display your bio-data.
<!DOCTYPE html>
<html>
<head>
<title>Bio-data</title>
</head>
<body>
<h1> Bio-Data</h1>
3|Page
Web Designning-I Practical File
<table border="1">
<tr>
<th> Attribute</th>
<th>value</th>
</tr>
<tr>
<td>name</td>
<td>Heena Desai</td>
</tr>
<tr>
<td>Age</td>
<td>21</td>
</tr>
<tr>
<td>Study</td>
<td>BCA</td>
</tr>
<tr>
<td>Birthdate</td>
<td>24-10-2004</td>
</tr>
<tr>
<td>Email</td>
<td>HeenaDesai@gmail.com</td>
</tr>
<tr>
<td>Mobile No</td>
<td>9099******</td>
</tr>
</table>
4|Page
Web Designning-I Practical File
</body>
</html>
6. Write a practice program which have a inline CSS effect.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color:blue;text-align:center;">Inline CSS Example</h1>
<p style="font-size:16px;color:green;">This is a Paragraph with inline styles applied</p>
<div style="background-color:yellow;padding:10px;">
<p> This is a div with a yellow background color and padding</p>
</div>
<ul style="list-style-type:square;color:purple">
<li> item 1</li>
<li> item 2</li>
<li> item 3</li>
</ul>
<a href="https://www.example.com" style="text-decoration:none;color:red;">Visit Example
Website</a>
</body>
</html>
7. Write a program that have internal CSS effect.
<!DOCTYPE html>
<html>
<head>
5|Page
Web Designning-I Practical File
<title>Intenal CSS Example</title>
<style>
h1{
color:blue;
text-align:center;
}
p{
font-size:16px;
color:green;
}
styled_div{
background-color:yellow;
padding:10px;
}
styled_list{
list-style-type:square;
color:purple;
}
styled_link{
text-decoration:none;
color:red;
}
</style>
</head>
<body>
<h1>Intenal CSS Example</h1>
<p>This is a Paragraph with Intenal styles applied</p>
<div class="styled_div">
<p> This is a div with Intenal styling</p>
</div>
6|Page
Web Designning-I Practical File
<ul class"styled_list">
<li> item 1</li>
<li> item 2</li>
<li> item 3</li>
</ul>
<a href="https://www.example.com" class="styled_link">Visit Example Website</a>
</body>
</html>
8. Give a implementation of external CSS effect on <p> tag as well as the complete
HTML body section.
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" type="text/CSS" href="style.css">
</head>
<body>
<h1> External CSS Example</h1>
<p>This is a Paragraph with External styles applied</p>
<div class="styled-div">
<p> This is a div with External styling</p>
</div>
<ul class="styled-list">
<li> item 1</li>
<li> item 2</li>
<li> item 3</li>
</ul>
<a href="https://www.example.com" class="style-link">Visit Example Website</a>
</body>
</html>
7|Page
Web Designning-I Practical File
style.css
/* Practical 9 css*/
h1{
color:blue;
text-align:center;
}
p{
font-size:16px;
color:green;
}
styled-div{
background-color:yellow;
padding:10px;
}
styled-list{
list-style-type:square;
color:purple;
}
styled-link{
text-decoration:none;
color:red;
}
9. Observe the external style sheet cascade order:
Create an HTML file with a paragraph. Include two style sheets—one with a
blue text colour & pink background colour and another with a red text colour
and yellow background colour. Observe the cascade order.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
8|Page
Web Designning-I Practical File
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#ad{
background-color:yellow;
color: red;
}
#as{
background-color:pink;
color: blue;
}
</style>
</head>
<body>
<p id="as">
Lorem ipsum dolor sit amet,consectetur adipisicing elit.Inventore dolore,maxime at facilis,
recusandae incidunt esseiure obacaecati repellendus quia consequuntur!Susipit aliquid unde
repellat earum consequatur architecto,delectus consequuntur!</p>
<p id="ad">Lorem ipsum dolor sit amet consectetur adipisicing elit.Ipsum esse earum ut nihil
id doloremque.Aliquam error neque voluptate enim vitae iste.</p>
</body>
10. Create a new website name it is form. Test.html and create a form with form control.
<!DOCTYPE html>
<html>
<head>
<title>MMT (Make My Trip)</title>
</head>
<body>
<h1 align="center">Booking for Trip</h1>
9|Page
Web Designning-I Practical File
<h2 align="center">Personal Detail</h2>
<form align="center">
<label style="color:red;"> Full Name:</label>
<input style="background-color:pink;" type="text" name="Name">
<br>
<label style="color:red;"> E-Mail:</label>
 <input style="background-color:pink;" type="E-Mail" name="E-Mail">
<br>
<label style="color:red;"> Address:</label>
 <textarea style="background-color:pink;" name="Address" cols="20"
rows="5"></textarea>
<br>
<label style="color:red;"> State:</label>
 <input style="background-color:pink;" type="text" name="State">
<br>
<label style="color:red;"> City:</label>
  <input style="background-color:pink;" type="text" name="City">
<br>
<label style="color:red;"> Pincode:</label>
 <input style="background-color:pink;" type="text" name="Pincode">
<br>
<label style="color:red;"> Gender:</label>
<label>Male</label>
<input type="radio" value="Male" name="H">
<label>Female</label>
<input type="radio" value="Female" name="H">
<br>
<h1 align="center"> Trip Related Detail</h1>
<label style="color:red"> Categoies</label>
<select style="background-color:pink;" name="intrest" size="1">
<option value="1">Beach Place</option>
10 | P a g e
Web Designning-I Practical File
<option value="2">Mountain Place</option>
</select>
<br>
<label style="color:red;">Places Provided by tourisum</label>
<select style="background-color:pink;" name="Place" size="1">
<option value="1">Goa</option>
<option value="2">Uti</option>
<option value="3">Delhi</option>
<option value="4">Shimla</option>
<option value="5">Kashmir</option>
<option value="6">Kerela</option>
</select>
<br>
<label style="color:red;">Budget</label>
<select style="background-color:pink;" name="Budget" size="1">
<option value="1">6000</option>
<option value="2">>10000</option>
<option value="3">>5000</option>
<option value="4">12000</option>
<option value="5">25000</option>
<option value="6">30000</option>
</select><br>
<input type="submit" value="submit" style="margin-top:10px"/>
</form>
</body>
</html>
11. Create a web page name it’s table.html and create a table.
<!DOCTYPE html>
<html>
<head>
11 | P a g e
Web Designning-I Practical File
<title>Creating Table</title>
</head>
<body>
<h1 align="center"><u>---:Table Demo:---</u></h1>
<table border="1px" align="center" bgcolor="black" cellpadding="34px"
cellspacing="34px" style="font-family:cursive; font-size=60px">
<tr style="background-color:red;">
<td style="font-size:50px;"><u>~Name~</u></td>
<td style="font-size:50px;"><u>~Age~</u></td>
<td style="font-size:50px;"><u>~Post~</u></td>
</tr>
<tr style="background-color:yellow;">
<td style="font-size:20px;font-family:arial;">Freya</td>
<td style="font-size:20px">15</td>
<td style="font-size:20px">Manager</td>
</tr>
<tr style="background-color:pink;">
<td style="font-size:20px">Mahesh</td>
<td style="font-size:20px">30</td>
<td style="font-size:20px">Developer</td>
</tr>
<tr style="background-color:green;">
<td style="font-size:20px">Raj</td>
<td style="font-size:20px">35</td>
<td style="font-size:20px">Tester</td>
</tr>
<tr style="background-color:purple;">
<td style="font-size:20px">Dhruti</td>
<td style="font-size:20px">28</td>
<td style="font-size:20px">Designer</td>
</tr>
12 | P a g e
Web Designning-I Practical File
</table>
</body>
</html>
[Note: The Design output has been provided; you have to write the code for it yourself.]
12. Case Study: Registration Page in Table form.
13. Case Study: Create Employee Registration webpage using HTML Form Object.
14. Case Study: Create a static web page using table tags of HTML.
15. Case Study: Create a static web page which defines all text formatting tags of HTML in
tabular format.
13 | P a g e
Web Designning-I Practical File
16. Case Study: Create webpage using list tags of HTML.
14 | P a g e
Web Designning-I Practical File
17. Case Study: Write a program to Create Registration Form in Form tag in HTML.
15 | P a g e
