Scribd
Upload
4 views

Multi-Page Websites

Uploaded by

Zeeshan Malik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Multi-Page Websites

Uploaded by

Zeeshan Malik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Creating Multi-Page Websites

1. File Paths (Relative and Absolute Paths)


a. Relative Paths:

Relative paths specify the location of a file or resource in relation to the current location
of the webpage. They are concise and are often preferred for internal links within a
website.

Syntax:

• `./`: Current directory.


• `../`: Parent directory.
• `folder/file.html`: Path to a specific file within a folder.

Example:
<a href="./about.html">About Page</a>
<a href="../contact.html">Contact Page</a>

b. Absolute Paths:

Absolute paths provide the complete URL or file path starting from the root directory.
They are useful when linking to external resources or when the file is not in the same
directory.

Syntax:

• `https://www.example.com/page.html`: Full URL.


• `/folder/file.html`: Path from the root directory.

Example:
<a href="https://www.example.com/about.html">About Page</a>
<a href="/contact.html">Contact Page</a>

2. Webpages in Multi-Page Websites Context

In the context of a multi-page website, each webpage is an individual HTML document


representing a distinct section or content within the site. The use of multiple pages helps organize
information and enhances user navigation.

What are Webpages?


• Definition: A webpage is a document, usually written in HTML, that is accessible through
a web browser. It can contain text, images, links, and other multimedia elements.

Components of Webpages

i. HTML Structure: Each webpage has a specific HTML structure that includes elements like
`<head>`, `<title>`, and `<body>`.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>About Us</title>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>

ii. Content: The content within the `<body>` tag varies from page to page, providing unique
information or functionality.
<body>
<h1>About Us</h1>
<p>Welcome to our company's about page. </p>
<a href="contact.html">Contact us</a>
</body>

iii. Navigation: Links are used to navigate between pages, creating a cohesive experience for
users.
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

Importance of Webpages in Multi-Page Websites:

• Content Organization: Each webpage serves a specific purpose or provides unique


content, allowing for better organization.
• Improved Navigation: Users can navigate seamlessly between different sections of the
website.
• SEO Benefits: Search engines index individual pages, improving discoverability.

Practice It!

1. Copy the folder “File Paths” to your Web Development Project folder and open it in VS
Code
2. The folders, and images are available there.
3. The goal is to write HTML with img tags and appropriate paths to create the following

Figure 1

4. The skeleton HTML is given below, just copy and write required html, remember to add
alt attribute for each img tag as well.
<h1>All the Animals</h1>
<h2>Rabbit:</h2>

<h2>Cat:</h2>

<h2>Dog:</h2>

<h2>Fish:</h2>

<h2>Bird:</h2>

Practice this as well!!

Creating Multipage websites

1. Copy the folder “Web Pages” in your Web Development Projects folder and open it in
VSCode. There are folders, with the pages index.html, about.html, contact.html and the cat
image

Figure 2

2. Write html (in the index.html) to create a web page that looks like the one in figure 3.
<h1>Welcome to My Website!</h1>
<!-- Add an image of yourself(or the cat) that links to the
about page -->

<hr />
<!-- Add a link to your contact me page here -->
3. Your image (or the cat image) should redirect to about.html page and the Contact Me link
to the page contact.html

Figure 3

You might also like