Web Tech
Uploaded by
sucidesqud450Web Tech
Uploaded by
sucidesqud450HTML 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.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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.
<!DOCTYPE html> <html lang="en">
<head><meta charset="UTF-8">
<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>
<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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<meta charset="UTF-8">
<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">
<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>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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; } a:hover{background-color: #a37575;}
</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;">
<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>
<meta charset="UTF-8">
<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">
<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>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Page</title>
<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>
<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="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:
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Another Page</title>
<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="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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Page</title>
<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>
<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="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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Another Page</title>
<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="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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Page</title>
<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>
<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>
<a href="another_page.html" title="This leads you to another page.">
<img src="rank2.avif" alt="Example Image"> </a>
<p><a href="assignment10.1.html" title="This leads you to another page.">Go to the other
page.</a></p>
</body> </html>
Second one:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Another Page</title>
<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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Academics - 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; }
.content { padding: 20px; background: #fff; margin-top: 20px; }
</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="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="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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admission - 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; }
header #branding { float: left; }
header #branding h1 { margin: 0; }
header nav { float: right; margin-top: 10px; }
.content { padding: 20px; background: #fff; margin-top: 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>
<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="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="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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery - 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; }
header #branding { float: left; }
header #branding h1 { margin: 0; }
header nav { float: right; margin-top: 10px; }
.content { padding: 20px; background: #fff; margin-top: 20px; }
.gallery { display: flex; flex-wrap: wrap; }
.gallery img { width: 30%; margin: 1.66%; border: 2px solid #333; } </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="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="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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>English - 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; }
header #branding { float: left; }
header #branding h1 { margin: 0; }
header nav { float: right; margin-top: 10px; }
.content { padding: 20px; background: #fff; margin-top: 20px; }
</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="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="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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heritage Sites - City Tourism</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; }
header #branding { float: left; }
header #branding h1 { margin: 0; }
header nav { float: right; margin-top: 10px; }
.content { padding: 20px; background: #fff; margin-top: 20px; }
.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="index.html">Home</a></li>
<li><a href="heritage.html">Heritage</a></li>
<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>
<a href="heritage2.html"><img src="heritage2.jpg" alt="Heritage Site 2"></a>
<a href="heritage3.html"><img src="heritage3.jpg" alt="Heritage Site 3"></a>
<a href="heritage4.html"><img src="heritage4.jpg" alt="Heritage Site 4"></a>
<a href="heritage5.html"><img src="heritage5.jpg" alt="Heritage Site 5"></a>
<a href="heritage6.html"><img src="heritage6.jpg" alt="Heritage Site 6"></a>
<a href="heritage7.html"><img src="heritage7.jpg" alt="Heritage Site 7"></a>
<a href="heritage8.html"><img src="heritage8.jpg" alt="Heritage Site 8"></a>
<a href="heritage9.html"><img src="heritage9.jpg" alt="Heritage Site 9"></a>
<a href="heritage10.html"><img src="heritage10.jpg" alt="Heritage Site 10"></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="index.html">Home</a></li>
<li><a href="heritage.html">Heritage</a></li>
<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
You might also like
- The C# Player's Guide - 5th Edition - 5.0.083% (18)The C# Player's Guide - 5th Edition - 5.0.0497 pages
- Get Coding! Learn HTML, CSS, and JavaScript and Build A Website, App, and Game PDF91% (32)Get Coding! Learn HTML, CSS, and JavaScript and Build A Website, App, and Game PDF209 pages
- Hacking The Art of Exploitation 2nd Edition Jon Erickson100% (19)Hacking The Art of Exploitation 2nd Edition Jon Erickson492 pages
- Test Bank For Systems Analysis and Design With UML, 4th Edition100% (2)Test Bank For Systems Analysis and Design With UML, 4th Edition32 pages
- Need Ideas For Getting Your Sub's Mind Into A Submissive Space PDF50% (2)Need Ideas For Getting Your Sub's Mind Into A Submissive Space PDF3 pages
- Stupid Pluto Tricks With The ADALM-PLUTO FOSDEM 2018: Robin Getz Michael Hennerich100% (1)Stupid Pluto Tricks With The ADALM-PLUTO FOSDEM 2018: Robin Getz Michael Hennerich35 pages
- Introduction To HTML - GHCC HackToLearnNo ratings yetIntroduction To HTML - GHCC HackToLearn22 pages
- HTML Tags Chart: Tag Name Code Example Browser ViewNo ratings yetHTML Tags Chart: Tag Name Code Example Browser View9 pages
- Front End Development Assignment 1-20 QNo ratings yetFront End Development Assignment 1-20 Q15 pages
- HTML Tags Chart: Tag Name Code Example Browser ViewNo ratings yetHTML Tags Chart: Tag Name Code Example Browser View38 pages
- HTML 2. TAG or Element: Syntax:: Tools: 1. 2No ratings yetHTML 2. TAG or Element: Syntax:: Tools: 1. 29 pages
- WINSEM2024-25_BCSE203E_ELA_VL2024250504384_2025-01-02_Reference-Material-II (1)No ratings yetWINSEM2024-25_BCSE203E_ELA_VL2024250504384_2025-01-02_Reference-Material-II (1)92 pages
- Web Design and Internet Programming Lab Manual (2)No ratings yetWeb Design and Internet Programming Lab Manual (2)18 pages
- Front End Web Development Assignments (2)No ratings yetFront End Web Development Assignments (2)6 pages
- Coding With JavaScript For Dummies Everything To Know About JavaScript (2020) - 40153100% (1)Coding With JavaScript For Dummies Everything To Know About JavaScript (2020) - 40153247 pages
- Dokumen - Pub Introduction To Counting Amp Probability The Art of Problem Solving 2nbsped 1934124109 9781934124109100% (1)Dokumen - Pub Introduction To Counting Amp Probability The Art of Problem Solving 2nbsped 1934124109 9781934124109256 pages
- NWO, Illuminati, Freemason, Occult, Bible Prophecy, Conspiracy, Secret Society, Etc. LinksNo ratings yetNWO, Illuminati, Freemason, Occult, Bible Prophecy, Conspiracy, Secret Society, Etc. Links47 pages
- Python Programming For Beginners - A Crash Course To Learn Python and Other Recommended Coding83% (6)Python Programming For Beginners - A Crash Course To Learn Python and Other Recommended Coding86 pages
- Experiment-01: Introduction The Linux Operating SystemNo ratings yetExperiment-01: Introduction The Linux Operating System9 pages
- Full download Natural Language Processing in Action Understanding analyzing and generating text with Python 1st Edition Hobson Lane pdf docx100% (2)Full download Natural Language Processing in Action Understanding analyzing and generating text with Python 1st Edition Hobson Lane pdf docx40 pages
- VHDL Code For Vending Machine ControllerNo ratings yetVHDL Code For Vending Machine Controller4 pages
- Student Information System Project Report in Java0% (1)Student Information System Project Report in Java13 pages
- Manual Testing Session-6: WWW - PavanonlinetrainingsNo ratings yetManual Testing Session-6: WWW - Pavanonlinetrainings11 pages
- Presentation - MIL-STD-31000 - A - Overview - Roy WhittenburgNo ratings yetPresentation - MIL-STD-31000 - A - Overview - Roy Whittenburg19 pages
- Using ADAMS Engine For Analyzing CrankshNo ratings yetUsing ADAMS Engine For Analyzing Cranksh4 pages
- Birla Institute of Technology Welfare Society: Mess Fee Deposit ProcedureNo ratings yetBirla Institute of Technology Welfare Society: Mess Fee Deposit Procedure9 pages
- ?oracle ASM Filter Driver & ASMLIB & UDEV? (Kamrani)No ratings yet?oracle ASM Filter Driver & ASMLIB & UDEV? (Kamrani)9 pages
