Web Tech

HTML Assignment
1. Create a static webpage using table tags of HTML.

<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Static Webpage with HTML Tables</title>
</head> <body>
<table border="2" cellpadding="15">
<caption>Employee Information</caption>
<thead> <tr> <th>ID</th> <th>Name</th> <th>Department</th> <th>Position</th>

</tr></thead> <tbody>
<tr> <td> 1 </td> <td>Neymar jr</td> <td>IT</td> <td>Intern</td> </tr>
<tr> <td>2</td> <td>Sadio mane</td> <td>HR</td> <td>HR Manager</td> </tr>
<tr> <td>3</td> <td>Messi</td> <td>Marketing</td> <td>Marketing Specialist</td>

</tr>
</tbody> </table> </body> </html>
Output:
2. Create a static web page which defines all text formatting tags of HTML in tabular format.
<head>
<title>HTML Text Formatting Tags</title>
</head> <body>
<h1>HTML Text Formatting Tags</h1>

<table>
<thead>
<tr> <th>Tag</th> <th>Description</th> </tr>
</thead> <tbody>
<tr> <td><b></td> <td>Defines bold text</td> </tr>
<tr> <td><strong></td> <td>Defines important text</td> </tr>
<tr> <td><i></td> <td>Defines italic text</td> </tr>
<tr> <td><em></td> <td>Defines emphasized text</td> </tr>
<tr> <td><mark></td> <td>Defines marked/highlighted text</td> </tr>
<tr> <td><small></td> <td>Defines smaller text</td> </tr>
<tr> <td><del></td> <td>Defines deleted text</td> </tr>
<tr> <td><ins></td> <td>Defines inserted text</td> </tr>
<tr> <td><sub></td> <td>Defines subscripted text</td> </tr>
<tr> <td><sup></td> <td>Defines superscripted text</td> </tr>
<tr> <td><u></td> <td>Defines underlined text</td> </tr>
<tr> <td><s></td> <td>Defines strikethrough text</td> </tr>
<tr> <td><q></td> <td>Defines a short quotation</td> </tr>
<tr> <td><cite></td> <td>Defines the title of a work</td> </tr>

<tr> <td><code></td> <td>Defines a piece of computer code</td> </tr>
<tr> <td><pre></td> <td>Defines preformatted text</td> </tr>
<tr> <td><var></td> <td>Defines a variable</td> </tr>
</tbody> </table>
</body>
</html>
Output:
3. Create a webpage using list tags of HTML.

<head><meta charset="UTF-8">
<title>HTML List Tags Example</title> </head>
<body> <h1>HTML List Tags Example</h1>
<h2>Unordered List</h2> <p>An unordered list is a list in which the items are not in any
particular order. It uses the <code><ul></code> tag:</p>
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
<h2>Ordered List</h2>
<p>An ordered list is a list in which the items are in a specific order. It uses the
<code><ol></code> tag:</p>
<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
<h2>Description List</h2>
<p>A description list is a list of terms with a description of each term. It uses the
<code><dl></code> tag, with terms inside <code><dt></code> tags and descriptions
inside <code><dd></code> tags:</p>
<dl> <dt>HTML</dt> <dd>Hypertext Markup Language </dd>
<dt>CSS</dt> <dd>Cascading Style Sheets</dd> <dt>JavaScript</dt>
<dd>A programming language for the web</dd> </dl>

</body> </html>
Output:
4. Create webpage to include image using HTML tag.
<!DOCTYPE html>
<html lang="en"> <head>

<title>Image Example</title> </head>
<body> <h1 style="color: red;">HTML Image Example</h1>
<img src= "liv.jpeg" alt="liv lifiint ucl" style="height: 200px;" />
<p>This is an examples on how you should the UCL trophy</p>
</body> </html>
Output:
5. Create employee registration webpage using HTML form objects.
<!DOCTYPE html>
<html lang="en"><head>
<title>Employee Registration Form</title>
<link rel="stylesheet" href="style.css"></head><body><div class="container">
<h1>Employee Registration</h1>
<form action="submit.php" method="post"> <div class="form-group">
<label for="firstName">First Name:</label>
<input type="text" name="firstName" id="firstName" required></div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" name="lastName" id="lastName" required></div>
<div class="form-group"><label for="email">Email Address:</label>
<input type="email" name="email" id="email" required></div>
<div class="form-group"><label for="dob">Date of Birth</label>

<input type="date" name="dob" id="dob" required></div>
<div class="form-group"><label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required></div>
<div class="form-group"><label for="department">Department:</label>
<select name="department" id="department">
<option value="">Select Department</option>
<option value="IT">IT</option>
<option value="Marketing">Marketing</option>
<option value="Sales">Sales</option></select></div>
<div class="form-group"><button type="submit">Register</button>

</div></form></div></body></html>
CSS:
body {font-family: sans-serif; margin: 0; padding: 20px; }
.container {width: 400px;margin: auto;border: 1px solid #b52525;padding: 50px;border-radius: 5px;background-

color: #5d6d5e; }
h1 {text-align: center; margin-bottom: 20px;font-size: 35px;}
.form-group {margin-bottom: 15px;}
label {display: block;margin-bottom: 5px;}
input,select {width: 100%;padding: 10px; border: 1px solid #2e2828;border-radius: 3px;}

button {background-color: #050e05; color: white;padding: 10px 20px; border: none;border-radius: 3px;cursor:
pointer;}
button:hover{background-color: #45A049;}
Output:
6. Create an HTML file (e.g. first_page.html) that specifies a page that contains a heading
and two
paragraphs of text. Use the HTML tags <h1>, </h1>, <p> and </p> in this exercise. As the
texts in the
heading and paragraphs you can use any texts you like.
 Add an unordered list to this web page. An unordered list should look like the
following when it is shown by a browser:
 An unordered list can be specified with the tags <ul> and </ul>.
 An unordered list typically contains a number of list items that can be specified
with tags <li> and </li>.
 After you have created your unordered list, check out what happens when you
convert it to an ordered list by replacing the tags <ul> and </ul> with <ol> and
</ol>, respectively.
 Add an image to your web page. In this exercise you must use the <img> tag. As an
image, you can use any .jpg or .png file you find on the Internet.
<!DOCTYPE html>
<title>First Page</title>
<style>
body {font-family: Arial, sans-serif; margin: 20px;}
h1,h2 {color: #000000;text-align: center;background-color: aqua;}
ul, ol { margin-left: 20px; }

</style> </head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is the first paragraph of text on my web page. It provides an introduction and some
context about the content of the page.</p>
<p>This is the second paragraph. It gives additional information and elaborates on the topics
mentioned in the first paragraph.</p>
<h2>Unordered List Example</h2> <ul>
<li>An unordered list can be specified with the tags <ul> and </ul>.</li>
<li>An unordered list typically contains a number of list items that can be specified with tags
<li> and </li>.</li>
<li>After you have created your unordered list, check out what happens when you convert it to
an ordered list by replacing the tags <ul> and </ul> with <ol> and </ol>,
respectively.</li> </ul>
<h2>Image Example</h2> <img src="liv.jpeg" alt="Example Image" style="height: 200px;

display: flex; justify-content: center;">
OUTPUT:
7. Create another .html file that contains a heading and a couple of paragraphs. You could
name this new file another_page.html, and you should place it into the same folder where
your first .html is. After you have created the new .html page, add a link to the first page so
that the browser will load another_page.html when you click the text Go to the other page. in
the first page. You need to use the <a> and </a> tags in this exercise. Inside the tag <a> you
need to use a href attribute that specifies which page will be loaded when the link is clicked.
 First.html
<!DOCTYPE html>
<html lang="en"> <head><meta charset="UTF-8">
<title>First Page</title><style>
h1,h2 {color: #000000;text-align: center;background-color: aqua;}
ul, ol { margin-left: 20px; } a:hover{background-color: #a37575;}
</style> </head><body>
<p>This is the first paragraph of text on my web page. It provides an introduction and
some context about the content of the page.</p>
<p>This is the second paragraph. It gives additional information and elaborates on the
topics mentioned in the first paragraph.</p>
<li>An unordered list typically contains a number of list items that can be specified with
tags <li> and </li>.</li>
<li>After you have created your unordered list, check out what happens when you
convert it to an ordered list by replacing the tags <ul> and </ul> with
<ol> and </ol>, respectively.</li> </ul>
<h2>Image Example</h2> <img src="liv.jpeg" alt="Example Image" style="height:
200px; display: flex; justify-content: center;">
<p>Employeee registration link <br><span><a href="ass4.html" title="This leads you to
another page.">Go to the other page.</a></span></p>
</body> </html>
 another_page.html
<!DOCTYPE html>
<html lang="en"><head>
<title>Employee Registration Form</title>
<link rel="stylesheet" href="style.css"></head><body><div class="container">
<h1>NEW PAGE FORM</h1>
<form action="submit.php" method="post"> <div class="form-group">
<label for="firstName">First Name:</label>
<input type="text" name="firstName" id="firstName" required></div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" name="lastName" id="lastName" required></div>
<div class="form-group"><label for="email">Email Address:</label>
<input type="email" name="email" id="email" required></div>
<div class="form-group"><label for="dob">Date of Birth</label>

<input type="date" name="dob" id="dob" required></div>
<div class="form-group"><label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required></div>
<div class="form-group"><label for="department">Department:</label>
<select name="department" id="department">
<option value="">Select Department</option>
<option value="IT">IT</option>
<option value="Marketing">Marketing</option>
<option value="Sales">Sales</option></select></div>
<div class="form-group"><button type="submit">Register</button> </div></form></div></body></html>
CSS:
body {font-family: sans-serif; margin: 0; padding: 20px; }
.container {width: 400px;margin: auto; padding: 50px;border-radius: 5px;background-color: #5d6d5e; }
h1 {text-align: center; margin-bottom: 20px;font-size: 35px;}
.form-group {margin-bottom: 15px;}
label {display: block;margin-bottom: 5px;}
input,select {width: 100%;padding: 10px; border: 1px solid #2e2828;border-radius: 3px;}
button {background-color: #050e05; color: white;padding: 10px 20px; border: none;border-radius: 3px;cursor:
pointer;}
button:hover{background-color: #45A049;}
Outputs:
8. HTML tags like <a> can have certain attributes. The href attribute is mandatory in the <a>
tag. Additionally it is possible to use the title attribute which specifies a text that emerges when
the mouse cursor is moved above a link. This kind of text is called a tool tip. Modify the link
that you created in the previous exercise so that a tool tip says "This leads you to another
page." when the mouse cursor is over the link.
First Page:
<!DOCTYPE html>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
h1 { color: #333; }
ul, ol { margin-left: 20px; }
img { max-width: 100%; height: auto; display: block; margin: 20px 0; }

a { color: #007BFF; text-decoration: none; }
a:hover { text-decoration: underline; }
</style> </head>
<body> <h1>Welcome to My Web Page</h1>

respectively.</li> </ul> <h2>Image Example</h2>
<img src="rank3.jpeg" alt="Example Image">
<p><a href="assignment8.1.html" title="This leads you to another page.">Go to the other

page.</a></p>
</body> </html>
Second Page:
<head> <meta charset="UTF-8">
<title>Another Page</title>
<style>
h1 { color: #333; }
</style> </head>
<body> <h1>Welcome to Another Page</h1

<p>This is another page with some more content. You can navigate back to the first page or
explore more information here.</p>
<p>This is the second paragraph on this page. It provides additional content to enhance the user
experience and demonstrate navigation between pages.</p>
<p><a href="assignment8.html" title="This leads you back to the first page.">Go back to the
first page.</a></p>
</body> </html> Outputs:

9. It is possible to use a picture (image) as a link. Modify your page so that the picture that is
on your page will also serve as a link that leads to another page.
 First page:
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<style>
h1 { color: #333;}
ul, ol {margin-left: 20px; }
img { max-width: 100%; height: auto; display: block; margin: 20px 0;}
a { color: #007BFF; text-decoration: none;}
a:hover { text-decoration: underline; }
</style> </head>
<body>
<p>This is the first paragraph of text on my web page. It provides an introduction and
some context about the content of the page.</p>
<p>This is the second paragraph. It gives additional information and elaborates on the
topics mentioned in the first paragraph.</p>
<h2>Unordered List Example</h2>
<ul>
<li>An unordered list typically contains a number of list items that can be specified with
tags <li> and </li>.</li>
<li>After you have created your unordered list, check out what happens when you
convert it to an ordered list by replacing the tags <ul> and </ul> with
<ol> and </ol>, respectively.</li> </ul>
<h2>Image Example</h2> <img src="rank3.jpeg" alt="Example Image">

page.</a></p>
</body> </html>
 Second Page:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 { color: #333; }
</style> </head>
<body>
<h1>Welcome to Another Page</h1>
<p>This is another page with some more content. You can navigate back to the first page
or explore more information here.</p>
<p>This is the second paragraph on this page. It provides additional content to enhance
the user experience and demonstrate navigation between pages.</p>
<p><a href="assignment8.html" title="This leads you back to the first page.">Go back to
the first page.</a></p>
</body> </html>
Outputs:
10. Upload your two .html files to a server and test that they work as real internet pages.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 { color: #333; }
ul, ol { margin-left: 20px;}
img { max-width: 100%; height: auto; display: block; margin: 20px 0;}
a { color: #007BFF; text-decoration: none; }
a:hover {text-decoration: underline; }
</style>
</head>
<body>
<h2>Unordered List Example</h2>
<ul>
respectively.</li>
</ul> <h2>Image Example</h2>
<a href="another_page.html" title="This leads you to another page.">
<img src="rank2.avif" alt="Example Image"> </a>

page.</a></p>
</body> </html>
Second one:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body { font-family: Arial, sans-serif; margin: 20px;}

h1 { color: #333; }
</style> </head>
<body> <h1>Welcome to Another Page</h1>
<p>This is another page with some more content. You can navigate back to the first page or
explore more information here.</p>
<p>This is the second paragraph on this page. It provides additional content to enhance the user
experience and demonstrate navigation between pages.</p>
<p><a href="assignment10.html" title="This leads you back to the first page.">Go back to the
first page.</a></p>
</body> </html>
Output:
11. Design a website for a College. There should be at least 15 web-pages present in the web-
site. There should be:
 One Home page that leads to other pages. The Home page should contain the name of
the college as heading along with the college logo. There should be a tab with the
following links:
 Home;
 Academics;
 Admission;
 Gallery.
 There should be an appropriate description of the college on the homepage.
 One Academics page which contains a list of all the departments present in the college
Arts, Science and Commerce. The list should be a nested list, with available courses
mentioned under each department. There should be a minimum of two courses under
each department, (for e.g. Computer Science and Mathematics under Science, English
and Sociology under Arts and so on). Each Course entry in the list should be a HTML
link that leads to a web-page totally dedicated to the course itself.
 Each Course should have its own dedicated web-page. This page should contain a
description about the course, a list of all the teachers taking the course and the
timetable for that particular subject.
 The Admission page basically contains a form that a student needs to fill up in order to
take admission in the college. The form should ask all the necessary questions using
appropriate form elements.
 One gallery page that contains set of photos taken of the college and its sutdents.
Please note that each web-page in this website should have the same background
Image/color. The looks of each page should be similar.
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My College</title>
<style>
body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; }
.container {width: 80%; margin: auto; overflow: hidden;}
header { background: #333;color: #fff;padding-top: 30px;min-height: 70px;
border-bottom: #77aaff 3px solid; }
header a { color: #fff; text-decoration: none;text-transform: uppercase;font-size: 16px; }
header ul { padding: 0; list-style: none;}
header li { float: left; display: inline; padding: 0 20px 0 20px; }
header #branding { float: left;}
header #branding h1 {margin: 0; }
header nav { float: right; margin-top: 10px; }
.banner { background: url('college.jpg') no-repeat center center/cover; height: 400px;
text-align: center; color: #fff; }
.banner h1 { padding-top: 150px; font-size: 50px; }
.content { padding: 20px; background: #fff; margin-top: 20px; }
</style> </head>
<body> <header>
<div class="container"> <div id="branding">
<h1><img src="logo.png" alt="College Logo" style="vertical-align: middle; height:
50px;"> My College</h1>
</div> <nav>
<ul> <li><a href="index.html">Home</a></li>
<li><a href="academics.html">Academics</a></li>
<li><a href="admission.html">Admission</a></li>
<li><a href="gallery.html">Gallery</a></li> </ul> </nav> </div>
</header> <section class="banner"> <div class="container">
<h1>Welcome to My College</h1> </div>
</section> <section class="content container">
<h2>About Us</h2>
<p>My College is a premier institution offering world-class education in various
disciplines. Our college is committed to providing students with an enriching academic
experience that equips them with the skills and knowledge necessary to excel in their
chosen fields.</p>
<p>With a rich history and a vibrant campus life, My College offers a wide range of
undergraduate and postgraduate programs in Arts, Science, and Commerce. Our
dedicated faculty, state-of-the-art facilities, and a strong emphasis on research and
innovation make us one of the top choices for students from around the globe.</p>
</section>
</body>
</html>
Academics.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Academics - My College</title>
<style>
.container { width: 80%; margin: auto; overflow: hidden; }
header { background: #333; color: #fff; padding-top: 30px;
min-height: 70px; border-bottom: #77aaff 3px solid; }
header a { color: #fff; text-decoration: none; text-transform: uppercase; font-size: 16px;}
header ul { padding: 0; list-style: none; }
header li { float: left; display: inline; padding: 0 20px 0 20px; }
header #branding { float: left; }
header #branding h1 { margin: 0; }
</style> </head>
<body>
<header> <div class="container"> <div id="branding">
<h1> <a href="index.html"> My College</a> </h1> </div>
<nav> <ul> <li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li> </ul> </nav>
</div> </header>
<section class="content container">
<h2>Academic Departments</h2>
<ul> <li>Arts <ul>
<li><a href="english.html">English</a></li>
<li><a href="sociology.html">Sociology</a></li>
</ul> </li> <li>Science <ul>
<li><a href="computer_science.html">Computer Science</a></li>
<li><a href="mathematics.html">Mathematics</a></li>
</ul> </li>
<li>Commerce <ul> <li><a href="accounting.html">Accounting</a></li>
<li><a href="finance.html">Finance</a></li> </ul> </li>
</ul> </section> </body>
</html>
Admission.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Admission - My College</title>
<style>
header { background: #333; color: #fff; padding-top: 30px; min-height: 70px; border-
bottom: #77aaff 3px solid; }
header a { color: #fff; text-decoration: none; text-transform: uppercase; font-size: 16px; }
header li { float: left; display: inline; padding: 0 20px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; }
.form-group input, .form-group select, .form-group textarea
{ width: 100%; padding: 8px; box-sizing: border-box; }</style>
</head> <body>
<header>
<h1><a href="index.html">My College</a></h1> </div>
<nav> <ul>
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul> </nav> </div> </header>
<section class="content container">
<h2>Admission Form</h2>
<form action="submit_admission.html" method="post">
<div class="form-group"> <label for="name">Full Name</label>
<input type="text" id="name" name="name" required> </div>
<div class="form-group"> <label for="email">Email</label>
<input type="email" id="email" name="email" required> </div>
<div class="form-group"> <label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" required> </div>
<div class="form-group"> <label for="department">Department</label>
<select id="department" name="department" required>
<option value="arts">Arts</option> <option value="science">Science</option>
<option value="commerce">Commerce</option> </select>
</div> <div class="form-group">
<label for="message">Additional Information</label>
<textarea id="message" name="message" rows="4"></textarea> </div>
<button type="submit">Submit</button> </form> </section>
</body> </html>
Gallery.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gallery - My College</title>
<style>
body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding:
0; }
.gallery { display: flex; flex-wrap: wrap; }
.gallery img { width: 30%; margin: 1.66%; border: 2px solid #333; } </style>
</head> <body>
<header>
<h1><a href="index.html">My College</a></h1> </div>
<nav> <ul>
<li><a href="gallery.html">Gallery</a></li> </ul>
</nav> </div> </header>
<section class="content container"> <h2>Gallery</h2>
<div class="gallery"> <img src="photo1.jpg" alt="Photo 1">
<img src="photo2.jpg" alt="Photo 2"> <img src="photo3.jpg" alt="Photo 3">
<img src="photo4.jpg" alt="Photo 4"> <img src="photo5.jpg" alt="Photo 5">
</div> </section>
</body> </html>
English.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>English - My College</title>
<style>
</style> </head> <body>
<header>
<div class="container">
<div id="branding"> <h1><a href="index.html">My College</a></h1> </div>
<nav> <ul>
<li><a href="gallery.html">Gallery</a></li>
</ul> </nav> </div>
</header> <section class="content container">
<h2>English Department</h2>
<p>The English Department at My College offers a diverse range of courses that cover
literature, language, and writing. Our curriculum is designed to foster critical thinking,
creativity, and effective communication skills.</p>
<h3>Faculty</h3>
<ul> <li>Dr. Jane Doe</li> <li>Prof. John Smith</li> </ul>
<h3>Timetable</h3>
<table>
<tr> <th>Day</th> <th>Time</th> <th>Course</th> </tr>
<tr><td>Monday</td><td>10:00 - 11:30</td> <td>Introduction to Literature</td> </tr>
<tr><td>Wednesday</td> <td>14:00 - 15:30</td><td>Creative Writing</td> </tr>
</table> </section> </body>
</html>
Outputs:
12. Design a website for the Tourism Sites of a given City. There should be at least 15 web-
pages present in the web-site. There should be:
 One Home page that leads to other pages. The Home page should contain the name of
the City as heading along with a logo. There should be a tab with the following links:
Home
Heritage
Hotel Booking
Gallery
There should be an appropriate description of the college on the home page.
 One heritage page which contains a list of all the Heritage Sites present in the
city. The list should be a list of Pictures. There should be a minimum of ten
heritages sites. Each Image entry in the list should be a HTML link/button that
leads to a web-page totally dedicated to the Heritage Site itself.
 Each Heritage Site should have its own dedicated web page. This page should
contain a description about the site along with its history.
 The Hotel booking page basically contains a form that a person needs to fill up in
order to stay in a hotel. The form should ask all the necessary questions using
appropriate form elements.
 One gallery page that contains set of photos taken of the Heritage Sites
throughout the city.
Please note that each webpage in the website should have the same background Image/
Color,
The looks of each page should be similar.
Index.html:
<!DOCTYPE html>
<html>
<head>
<title>Patan Tourism</title>
<link rel="stylesheet" type="text/css" href="style.css"></head>
<body><div class="navbar"><div class="logo"><h1>Visit Patan</h1></div><div
class="menu">
<ul><li><a href="#">Home</a></li>
<li><a href="heritage.html">Heritage</a></li>
<li><a href="hotels.html">Hotel Booking</a></li>
<li><a href="gallery.html">Gallery</a></li></ul>
</div></div><div class="body">
<div class="heading"> <section><h2>Unveiling the Enchanting Beauty of
Patan</h2><hr>
<p>Lalitpur, also known as Patan, is a vibrant city nestled in the Kathmandu Valley of
Nepal. Renowned for its rich cultural heritage, exquisite craftsmanship, and ancient
temples, Patan offers a unique blend of history, spirituality, and artistic expression.
Embark on a captivating journey through Patan's labyrinthine alleys, where
time seems to stand still. Explore magnificent Durbar Squares adorned with intricate
woodcarvings and captivating sculptures. Immerse yourself in the city's vibrant festivals,
where colorful processions and traditional music fill the air.
This website serves as your ultimate guide to exploring the hidden gems and
captivating experiences that Patan has to offer.</p></section></div></div><hr>
<footer class="footer"><p>© Patan Tourism 2024</p></footer>
</body>
</html>
Heritage.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Heritage Sites - City Tourism</title>
<style>
.heritage-gallery { display: flex; flex-wrap: wrap; }
.heritage-gallery img { width: 30%; margin: 1.66%; border: 2px solid #333; }
.heritage-gallery a { text-decoration: none; }
</style> </head>
<body>
<header> <div class="container"> <div id="branding">
<h1><a href="index.html">City Tourism</a></h1> </div>
<nav> <ul>
<li><a href="hotel_booking.html">Hotel Booking</a></li>
<li><a href="gallery.html">Gallery</a></li> </ul> </nav> </div>
</header>
<section class="content container"> <h2>Heritage Sites</h2>
<div class="heritage-gallery">
<a href="heritage1.html"><img src="heritage1.jpg" alt="Heritage Site 1"></a>
</div> </section> </body> </html>
Hotel-booking.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <title>Hotel Booking - XYZ City</title>
<style>
body {font-family: Arial,sans-serif;margin: 0;padding: 0;}
header {background-color: #f0f0f0;
padding: 20px;text-align: center;}
header img {width: 50px;height: 50px;margin: 10px;}
h1 {font-size: 24px;margin-bottom: 10px;}
nav ul {list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;}
nav li {margin-right: 20px;}
nav a {text-decoration: none; color: #337ab7;}
nav a:hover {color: #0b0e10;}
main {display: flex;
flex-direction: column;
align-items: center;
padding: 20px;}
section {background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
h2 {font-size: 18px;
margin-top: 0;}
form {display: flex;
flex-direction: column;}
label {margin-bottom: 10px;}</style>
</head>
<body> <header> <img src="123.jpg" alt="City Logo">
<h1>Book Your Stay</h1> <nav> <ul>
<li><a href="hotel-booking.html">Hotel Booking</a></li>
<li><a href="gallery.html">Gallery</a></li> </ul>
</nav> </header> <main> <section>
<h2>Hotel Booking Form</h2> <form action="submit-booking.html" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>
<label for="checkin">Check-in Date:</label>
<input type="date" id="checking>
</html>
Outputs:
Heritage.html
Hotel.html

Web Tech

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Tech

Uploaded by

Copyright:

Available Formats

HTML Assignment

1. Create a static webpage using table tags of HTML.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Static Webpage with HTML Tables</title>

<table border="2" cellpadding="15">

<thead> <tr> <th>ID</th> <th>Name</th> <th>Department</th> <th>Position</th>

<tr> <td> 1 </td> <td>Neymar jr</td> <td>IT</td> <td>Intern</td> </tr>

<tr> <td>2</td> <td>Sadio mane</td> <td>HR</td> <td>HR Manager</td> </tr>

<tr> <td>3</td> <td>Messi</td> <td>Marketing</td> <td>Marketing Specialist</td>

</tbody> </table> </body> </html>

<!DOCTYPE html> <html lang="en">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>HTML Text Formatting Tags</title>

<h1>HTML Text Formatting Tags</h1>

<tr> <th>Tag</th> <th>Description</th> </tr>

<tr> <td>&lt;b&gt;</td> <td>Defines bold text</td> </tr>

<tr> <td>&lt;strong&gt;</td> <td>Defines important text</td> </tr>

<tr> <td>&lt;i&gt;</td> <td>Defines italic text</td> </tr>

<tr> <td>&lt;em&gt;</td> <td>Defines emphasized text</td> </tr>

<tr> <td>&lt;mark&gt;</td> <td>Defines marked/highlighted text</td> </tr>

<tr> <td>&lt;small&gt;</td> <td>Defines smaller text</td> </tr>

<tr> <td>&lt;del&gt;</td> <td>Defines deleted text</td> </tr>

<tr> <td>&lt;ins&gt;</td> <td>Defines inserted text</td> </tr>

<tr> <td>&lt;sub&gt;</td> <td>Defines subscripted text</td> </tr>

<tr> <td>&lt;sup&gt;</td> <td>Defines superscripted text</td> </tr>

<tr> <td>&lt;u&gt;</td> <td>Defines underlined text</td> </tr>

<tr> <td>&lt;s&gt;</td> <td>Defines strikethrough text</td> </tr>

<tr> <td>&lt;q&gt;</td> <td>Defines a short quotation</td> </tr>

<tr> <td>&lt;cite&gt;</td> <td>Defines the title of a work</td> </tr>

<tr> <td>&lt;pre&gt;</td> <td>Defines preformatted text</td> </tr>

<tr> <td>&lt;var&gt;</td> <td>Defines a variable</td> </tr>

3. Create a webpage using list tags of HTML.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>HTML List Tags Example</title> </head>

<body> <h1>HTML List Tags Example</h1>

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>

<dl> <dt>HTML</dt> <dd>Hypertext Markup Language </dd>

<dt>CSS</dt> <dd>Cascading Style Sheets</dd> <dt>JavaScript</dt>

<dd>A programming language for the web</dd> </dl>

4. Create webpage to include image using HTML tag.

<html lang="en"> <head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<body> <h1 style="color: red;">HTML Image Example</h1>

<img src= "liv.jpeg" alt="liv lifiint ucl" style="height: 200px;" />

<p>This is an examples on how you should the UCL trophy</p>

5. Create employee registration webpage using HTML form objects.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Employee Registration Form</title>

<link rel="stylesheet" href="style.css"></head><body><div class="container">

<label for="firstName">First Name:</label>

<input type="text" name="firstName" id="firstName" required></div>

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

<input type="text" name="lastName" id="lastName" required></div>

<div class="form-group"><label for="email">Email Address:</label>

<input type="email" name="email" id="email" required></div>

<div class="form-group"><label for="dob">Date of Birth</label>

<div class="form-group"><label for="phone">Phone Number:</label>

<input type="tel" id="phone" name="phone" required></div>

<div class="form-group"><label for="department">Department:</label>

<select name="department" id="department">

<option value="">Select Department</option>

<div class="form-group"><button type="submit">Register</button>

.container {width: 400px;margin: auto;border: 1px solid #b52525;padding: 50px;border-radius: 5px;background-

<tr> <td><b></td> <td>Defines bold text</td> </tr>

<tr> <td><strong></td> <td>Defines important text</td> </tr>

<tr> <td><i></td> <td>Defines italic text</td> </tr>

<tr> <td><em></td> <td>Defines emphasized text</td> </tr>

<tr> <td><mark></td> <td>Defines marked/highlighted text</td> </tr>

<tr> <td><small></td> <td>Defines smaller text</td> </tr>

<tr> <td><del></td> <td>Defines deleted text</td> </tr>

<tr> <td><ins></td> <td>Defines inserted text</td> </tr>

<tr> <td><sub></td> <td>Defines subscripted text</td> </tr>

<tr> <td><sup></td> <td>Defines superscripted text</td> </tr>

<tr> <td><u></td> <td>Defines underlined text</td> </tr>

<tr> <td><s></td> <td>Defines strikethrough text</td> </tr>

<tr> <td><q></td> <td>Defines a short quotation</td> </tr>

<tr> <td><cite></td> <td>Defines the title of a work</td> </tr>

<tr> <td><pre></td> <td>Defines preformatted text</td> </tr>

<tr> <td><var></td> <td>Defines a variable</td> </tr>