Create Multi-page Website using HTML | Tutorial Library Science

HTML Practical: Creating a Multi-Page Website Using HTML

This practical explains how to create a departmental website using HTML only, without CSS. The website contains a main page, navigation menu, calendar, achievements, library resources, application form, and OPAC page.

Step 1: Create a Folder

Create a folder named DepartmentWebsite on your computer. Save all the following files inside it.

DepartmentWebsite/
    index.html
    navbar.html
    main.html
    calendar.html
    achievements.html
    resources.html
    application.html
    OPAC.html

Open Notepad, write the HTML code, and save each file with its specified filename. In Notepad, choose Save as type: All Files.

Step 2: Create the Main Page (index.html)

The main page divides the browser window into two sections using HTML frames. The left section contains the navigation menu, and the right section displays the selected page.

Code for index.html

<html> <head> <title>Department of Library Science</title> </head> <frameset cols="25%,75%"> <frame src="navbar.html" name="navigation"> <frame src="main.html" name="contentFrame"> </frameset> </html>

Explanation

• <frameset cols="25%,75%"> divides the window into two vertical sections.
• <frame src="navbar.html"> displays the navigation menu.
• <frame src="main.html"> displays the welcome page.
• name="contentFrame" identifies the frame where linked pages will open.

Note: The frameset method is obsolete in modern HTML, but it is included here for learning purposes and for reproducing older HTML practicals.

Step 3: Create the Navigation Menu (navbar.html)

The navigation menu contains links to all the other pages of the website.

Code for navbar.html

<html> <head> <title>Navigation Menu</title> </head> <body> <center> <h2>Department of Library Science</h2> <a href="main.html" target="contentFrame">Home</a> <br><br> <a href="calendar.html" target="contentFrame"> Our Calendar </a> <br><br> <a href="achievements.html" target="contentFrame"> Our Achievements </a> <br><br> <a href="resources.html" target="contentFrame"> Our Sources </a> <br><br> <a href="application.html" target="contentFrame"> Application Form </a> <br><br> <a href="OPAC.html" target="contentFrame"> OPAC </a> </center> </body> </html>

Explanation

• <a> creates a hyperlink.
• href specifies the destination file.
• target="contentFrame" opens the linked page in the right-hand frame.
• <br> moves the next item to a new line.
• <center> centres the content. This is an older HTML element and is obsolete in modern HTML.

Step 4: Create the Main Content Page (main.html)

This page displays the welcome message and introduction to the department.

Code for main.html

<html> <head> <title>Main Page</title> </head> <body> <center> <h1>Welcome to the Department of Library Science</h1> </center> <h2>About Our Department</h2> <p> The Department of Library Science promotes the study of library management, information organisation, information retrieval and digital information services. </p> <p> The department supports students through academic resources, practical training, seminars and research activities. </p> <p> Use the navigation menu to explore our calendar, achievements, resources, application form and OPAC. </p> </body> </html>

Step 5: Create the Calendar Page (calendar.html)

An HTML table can be used to create a calendar. The <table> element creates the table, <tr> creates rows, and <th> and <td> create heading and data cells.

Code for calendar.html

<html> <head> <title>Calendar of Events</title> </head> <body> <center> <h1>Calendar of Events - August 2027</h1> </center> <table border="2" width="100%"> <tr> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> <th>Saturday</th> <th>Sunday</th> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td>1</td> </tr> <tr> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> <td>11</td> <td>12<br>Library Orientation</td> <td>13</td> <td>14</td> <td>15<br>Independence Day</td> </tr> <tr> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td> <td>22</td> </tr> <tr> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> <td>29</td> </tr> <tr> <td>30</td> <td>31</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>

Note: The example demonstrates table construction. Verify the calendar year and institutional event dates before using it as an actual calendar. August 15 is India's Independence Day.

Step 6: Create the Achievements Page (achievements.html)

This page lists the achievements and activities of the department.

Code for achievements.html

<html> <head> <title>Our Achievements</title> </head> <body> <center> <h1>Our Achievements</h1> </center> <h2>Academic Activities</h2> <ul> <li>Library orientation programmes</li> <li>Workshops and seminars</li> <li>Participation in academic conferences</li> </ul> <h2>Research and Publications</h2> <ul> <li>Research articles published by faculty members</li> <li>Student research projects</li> <li>Collaborative research activities</li> </ul> <h2>Recent Events</h2> <p> Add details of recent departmental events, awards and other verified achievements here. </p> </body> </html>

Explanation

• <ul> creates an unordered list.
• <li> creates an individual list item.
• <h2> creates a secondary heading.

Step 7: Create the Library Resources Page (resources.html)

This page contains links to useful educational and research resources.

Code for resources.html

<html> <head> <title>Library Resources</title> </head> <body> <center> <h1>Library Resources</h1> </center> <p>Explore useful resources for study and research.</p> <ul> <li> <a href="https://ndl.iitkgp.ac.in/" target="_blank"> National Digital Library of India </a> </li> <li> <a href="https://scholar.google.com/" target="_blank"> Google Scholar </a> </li> <li> <a href="https://doaj.org/" target="_blank"> Directory of Open Access Journals </a> </li> </ul> <h2>Library Services</h2> <p> Include information about borrowing, reference services, internet access and digital library services. </p> </body> </html>

Step 8: Create the Application Form (application.html)

The application form demonstrates HTML form controls such as text fields, radio buttons, checkboxes, dropdown menus, textareas and buttons.

Code for application.html

<html> <head> <title>Application Form</title> </head> <body> <center> <h1>Application Form</h1> </center> <form action="#" method="post"> Name:<br> <input type="text" name="fullname" required> <br><br> Email Address:<br> <input type="email" name="email" required> <br><br> <p>Preferred Service:</p> <input type="radio" name="service" value="reading"> Reading Room <br> <input type="radio" name="service" value="digital"> Digital Resources <br><br> <p>Areas of Interest:</p> <input type="checkbox" name="interests" value="catalogue"> Library Catalogue <br> <input type="checkbox" name="interests" value="ebooks"> E-books <br> <input type="checkbox" name="interests" value="journals"> E-journals <br><br> <label for="place"> Places to Visit in Srinagar: </label> <br> <select id="place" name="place"> <option value="">Select a place</option> <option value="dal-lake">Dal Lake</option> <option value="nishat-bagh">Nishat Bagh</option> <option value="shalimar-bagh">Shalimar Bagh</option> <option value="hari-parbat">Hari Parbat</option> </select> <br><br> <label for="feedback"> Enter Your Valuable Feedback: </label> <br> <textarea id="feedback" name="feedback" rows="5" cols="45" placeholder="Enter your feedback here">

Important HTML form elements

Element	Purpose
<form>	Groups form controls.
type="text"	Accepts text input.
type="email"	Accepts an email address and provides basic browser validation.
type="radio"	Allows one selection from a group with the same name.
type="checkbox"	Allows multiple selections.
<select>	Creates a dropdown menu.
<option>	Defines a choice in the dropdown menu.
<textarea>	Accepts longer text or feedback.
type="reset"	Resets the form controls.
type="submit"	Attempts to submit the form.

Important: This is a demonstration form. The action="#" attribute does not provide a working system for storing applications. A server-side application or form service is needed to collect and store submissions.

Step 9: Create the OPAC Page (OPAC.html)

OPAC stands for Online Public Access Catalogue. It helps users search for books and other library materials by title, author, subject or keyword.

Code for OPAC.html

<html> <head> <title>Library OPAC</title> </head> <body> <center> <h1>Online Public Access Catalogue</h1> </center> <p> OPAC enables users to search a library catalogue by title, author, subject or keyword. </p> <h2>How to Search</h2> <ol> <li>Open the library catalogue.</li> <li>Select a suitable search field.</li> <li>Enter the title, author or subject.</li> <li>Review the search results and bibliographic details.</li> <li>Check the availability and location of the item.</li> </ol> <p> <a href="https://www.worldcat.org/" target="_blank"> Visit WorldCat </a> </p> </body> </html>

How to search an OPAC

1. Open the library catalogue website.
2. Select a search option, such as Title, Author or Subject.
3. Enter the required search term.
4. Click the Search button.
5. Review the results and bibliographic details.
6. Check the item's availability and shelf location.

WorldCat is provided as an example of a catalogue discovery service. Replace its link with your institution's OPAC address when available.

Step 10: Connect All the Pages

Check that all the HTML files are saved in the same folder and that their filenames match the navigation links.

Navigation Link	Destination File
Home	main.html
Our Calendar	calendar.html
Our Achievements	achievements.html
Our Sources	resources.html
Application Form	application.html
OPAC	OPAC.html

For example, this link opens the achievements page inside the frame named contentFrame.

<a href="achievements.html" target="contentFrame"> Our Achievements </a>

Step 11: Open and Test the Website

1. Open the DepartmentWebsite folder.
2. Double-click index.html.
3. Check whether the navigation menu appears on the left and the welcome page appears on the right.
4. Click Our Calendar and check whether the calendar appears.
5. Open Our Achievements and Our Sources.
6. Test the Application Form and OPAC links.
7. Click Home to return to the welcome page.
8. Correct any errors in filenames or links.

Common errors and solutions

Error	Solution
A page does not open.	Check the filename and file extension.
A page opens in a new tab.	Check the target attribute and the name of the destination frame.
HTML code appears as plain text.	Check whether the file was saved with the .html extension.
The form does not store information.	Connect it to a suitable backend or form service.
An image does not appear.	Check the image filename and location.

Step 12: Understand the Website Structure

The main page loads the navigation menu and the welcome page. When a visitor clicks a navigation link, the selected HTML file opens in the content frame.

index.html
    |
    |-- navbar.html
    |
    |-- main.html
           |
           |-- calendar.html
           |-- achievements.html
           |-- resources.html
           |-- application.html
           |-- OPAC.html

The pages are separate files. The navigation menu connects them through hyperlinks, and the main layout provides the two-section browser display.

Step 13: Alternative Using the Older frameset Method

If your practical specifically requires a separate frameset file, create a file named frames.html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Department Website</title> </head> <frameset cols="25%,75%"> <frame src="navbar.html" name="navigation"> <frame src="main.html" name="contentFrame"> </frameset> </html>

The attribute cols="25%,75%" divides the browser window into two vertical sections. The first frame occupies 25% of the width and the second occupies 75%.

Note: The frameset method is obsolete in modern HTML. Use it for historical practical exercises only. For new websites, use modern HTML layout techniques.

Step 14: Add a Department Logo

You can add the department logo to the main page using the <img> tag.

<center> <img src="department-logo.png" alt="Department Logo" width="150"> </center>

Save the image as department-logo.png in the same folder as main.html. If the filename or location differs, update the src attribute.

Step 15: Final Checklist

• All HTML files are saved in the correct folder.
• The main page opens successfully.
• The navigation menu displays all required links.
• Each link opens the correct page in the content frame.
• The calendar table is correctly arranged.
• The achievements and resources pages contain relevant information.
• The application form contains text fields, radio buttons, checkboxes, a dropdown and a feedback area.
• The OPAC page contains search instructions and a relevant catalogue link.
• The department logo appears correctly.
• All links and filenames have been tested.

Practical outcome: You have created a multi-page departmental website using basic HTML without CSS. The website includes a main page, navigation menu, calendar, achievements, library resources, application form, OPAC page and department logo.

Below are a few snapshots along with the functional outcome of the above codes.

Department of Library Science Home Our Calendar Our Achievements Our Sources Application Form OPAC

Welcome to the Department of Library Science Ministry of Electronics and Information Technology Government of India About Our Department The Department of Library Science promotes the study of library management, information organisation, information retrieval and digital information services. The department supports students through academic resources, practical training, seminars and research activities. Use the navigation menu on the left to explore our calendar, achievements, resources, application form and OPAC. Latest Updates Library Orientation Programme – 12 August 2027 Workshop on Information Literacy – 20 August 2027 New e-resources added to the library portal