From f86ee9936d5508a0f18c61b95b9fd4bb8210b7d6 Mon Sep 17 00:00:00 2001 From: Miss-Siddhi-Pagire Date: Fri, 23 Jan 2026 20:58:05 +0530 Subject: [PATCH] HTML path navigation notes added --- ...ct-folder-structure-and-path-navigation.md | 236 ++++++++++++++++++ index.html | 17 ++ 2 files changed, 253 insertions(+) create mode 100644 docs/html/15-project-folder-structure-and-path-navigation/15-project-folder-structure-and-path-navigation.md create mode 100644 index.html diff --git a/docs/html/15-project-folder-structure-and-path-navigation/15-project-folder-structure-and-path-navigation.md b/docs/html/15-project-folder-structure-and-path-navigation/15-project-folder-structure-and-path-navigation.md new file mode 100644 index 00000000..4ae0e209 --- /dev/null +++ b/docs/html/15-project-folder-structure-and-path-navigation/15-project-folder-structure-and-path-navigation.md @@ -0,0 +1,236 @@ +# Project Folder Structure and Path Navigation + +This guide explains **how to organize project files** and **how to navigate folders using HTML paths**. Understanding these basics is essential for beginners to correctly **link web pages** and **display images** without errors. + +--- + +## 1. What Is Folder Navigation in HTML? + +Folder navigation means telling the browser **where a file is located** using a _path_. + +Paths are mainly used in: + +- `` tag → to link one page to another +- `` tag → to display images + +If the path is incorrect, links will not open and images will not appear. + +--- + +## 2. Standard Project Folder Structure + +A clean and beginner-friendly project structure looks like this: + +``` +project/ +│ +├── index.html # Main (Home) page +├── about.html # Another main-level page +│ +├── pages/ # Folder for extra pages +│ └── contact.html +│ +└── images/ # Folder for images + └── logo.png +``` + +### Why This Structure Is Important + +- Keeps files organized +- Makes paths easy to understand +- Prevents confusion as the project grows + +--- + +## 3. Project Rules and Naming Conventions + +### a) `index.html` Is the Root File + +- `index.html` is the **starting point** of your website +- Browsers automatically open `index.html` when a folder or site is loaded + +Example: + +``` +example.com → loads index.html automatically +``` + +--- + +### b) Use Centralized Folders + +- **Images:** Store _all_ images inside the `images/` folder +- **Pages:** Store all extra HTML pages inside the `pages/` folder + +This keeps your project clean and professional. + +--- + +### c) Case Sensitivity Matters + +File and folder names must match **exactly**. + +Incorrect + +```html + +``` + +Correct + +```html + +``` + +> Tip: Always use **lowercase names** for files and folders. + +--- + +## 4. Path Navigation Symbols (Very Important) + +| Symbol | Meaning | Explanation | +| --------- | ------------------ | ------------------------------------------------------ | +| `./` | Current folder | Refers to the folder where the current file is located | +| `folder/` | Go inside a folder | Moves into a sub-folder | +| `../` | One folder back | Moves to the parent folder | +| `../../` | Two folders back | Moves up two folder levels | + +--- + +## 5. Practical Examples + +## Example 1: Linking Files in the Same Folder + +### File: `index.html` + +```html + + + + + Home Page + + +

Welcome to Home Page

+ +

This page links to another file in the same folder.

+ + Go to About Page + + +``` + +--- + +### File: `about.html` + +```html + + + + + About Page + + +

About Page

+ +

This file is in the same folder as index.html.

+ + Back to Home + + +``` + +--- + +## Example 2: Linking a File Inside a Folder + +### File: `index.html` + +```html + + + + + Home Page + + +

Home Page

+ +

Click below to open Contact page inside pages folder.

+ + Contact Us + + +``` + +--- + +## Example 3: Moving One Folder Back (`../`) + +### File: `pages/contact.html` + +```html + + + + + Contact Page + + +

Contact Page

+ +

This file is inside the pages folder.

+ + + Go to Home + +

+ + + Website Logo + + +``` + +--- + +## Example 4: Moving Two Folders Back (`../../`) + +### File Location + +`project/folder1/folder2/demo.html` + +### File: `demo.html` + +```html + + + + + Demo Page + + +

Demo Page

+ +

This file is two folders deep.

+ + Go to Home + + +``` + +--- + +## 6. Common Mistakes & Best Practices + +Small mistakes in paths are very common for beginners. Use the table below to avoid them. + +| Problem | Incorrect Example | Correct Example | +| --------------- | --------------------- | -------------------- | +| Extra slashes | `pages//contact.html` | `pages/contact.html` | +| Missing `../` | `images/logo.png` | `../images/logo.png` | +| Wrong case | `./Images/Logo.PNG` | `./images/logo.png` | +| Spaces in names | `my images/pic.jpg` | `my-images/pic.jpg` | + +Happy Coding! diff --git a/index.html b/index.html new file mode 100644 index 00000000..f0c213ca --- /dev/null +++ b/index.html @@ -0,0 +1,17 @@ + + + + Div Tag + + +
+

Pizza

+

Pizza is a delicious Italian food.

+
+ +
+

Biryani

+

Biryani is a spicy Indian rice dish.

+
+ +