Scribd
Upload
49 views3 pages

Web Designing

The document outlines an experiment for designing an HTML page titled 'HOBBIES' that includes a table with Roll No, Name, and Hobbies. It specifies the requirements, procedure, and provides a code example for creating and styling the page with a peach background. The conclusion confirms the successful creation and deployment of the web page on a local web server.

Uploaded by

sidharthsrchembakassery
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
49 views3 pages

Web Designing

The document outlines an experiment for designing an HTML page titled 'HOBBIES' that includes a table with Roll No, Name, and Hobbies. It specifies the requirements, procedure, and provides a code example for creating and styling the page with a peach background. The conclusion confirms the successful creation and deployment of the web page on a local web server.

Uploaded by

sidharthsrchembakassery
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

Web Designing

Exp no 8:
Aim : Design an HTML page with a table titled "HOBBIES" showing Roll No,
Name, and Hobbies. Include three rows with different hobby lists (ordered and
unordered). Style the page with a peach background, borders, and centered title.
Also deploy the page on local web server.
Requirements
1. PC with latest configuration and web browser
2. WAMP or XAMPP
3. Text editor
Procedure
1. Create a simple Web Page
2. Save the file with .html extension in the root folder
3. Deploy and Access the Web Page
Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hobbies</title>
<style>
body {
background-color: #fff2e6;
font-family: 'Georgia', serif;
text-align: center;
}
h1 {
margin-top: 30px;
}
table {
margin: 20px auto;
border:1px solid black;
width: 60%;
background-color: #fff2e6;
}
th, td {
border: 2px solid #8b5e3c;
padding: 15px;
vertical-align: top;
text-align: left;
}
th {
background-color: #fff2e6;
font-weight: bold;
}
ul, ol {
margin: 0;
padding-left: 20px;
}
</style>
</head>
<body>
<h1>HOBBIES</h1>
<table border="1">
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Hobbies</th>
</tr>
<tr>
<td>17</td>
<td>Ram</td>
<td>
<ul>
<li>Reading</li>
<li>Writing</li>
<li>Coding</li>
</ul>
</td>
</tr>
<tr>
<td>33</td>
<td>Riya</td>
<td>
<ol>
<li>Singing</li>
<li>Dancing</li>
<li>Football</li>
</ol>
</td>
</tr>
<tr>
<td>58</td>
<td>Rahul</td>
<td>
<ul style="list-style-type: circle;">
<li>Singing</li>
<li>Dancing</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Conclusion
Created the web page and deployed on local web server.

You might also like