Files, Folders & Navigation

After this lesson, you can connect two HTML files with navigation in both directions and understand folder paths.

BEGIN WITH A QUESTION

Understanding begins with a question.

The link about.html works from the home page, but not from the articles folder. Why can the same file name produce different results?

Connect two HTML files with navigation in both directions and understand folder paths.

UNDERSTAND THE CONCEPT

Picture your file locations

If index.html and about.html share a folder, each can link to the other using just the file name. From articles/, ../about.html means go up one folder first. Assets/photo.svg means enter the assets folder below the current location.

Spelling is part of the address

Use simple, consistent names such as about.html. Many servers distinguish uppercase and lowercase: About.html may differ from about.html. Avoid pasting a C:\... address from your computer, because visitors do not have that file.

Two pages remain two documents

Each file has its own head and body, with a different title. In the Lucia editor, select a file name to edit and preview that page. The preview does not open outgoing links; the checker examines relationships between files in two-page exercises.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<!-- Structure: index.html, about.html, assets/observatory.svg -->
<!-- In index.html -->
<a href="about.html">About the garden</a>

<!-- In about.html -->
<a href="index.html">Back to home</a>

<!-- From articles/intro.html to the home page -->
<a href="../index.html">Home</a>

BROWSER RESULT

These snippets come from three different locations. Each href is resolved from the file containing the link.

COMMON MISTAKES

<a href="C:\Users\Aku\about.html">About</a>

That is a location on a personal computer. Use a relative path within the site folder, such as about.html for a neighboring file.

TRY TOGETHER

Practice clarifies understanding.

01 From articles/intro.html, how do you reach index.html in the parent folder?

index.html../index.htmlarticles/index.html

Try as often as you need. The independent task that follows records lesson completion.

WRITE · OBSERVE · UNDERSTAND

Open a way there and back

Edit both files. In index.html, link to about.html with the text ‘About the garden’. In about.html, link back to index.html with ‘Garden home’. Keep the tab titles different.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Reading Garden</title>
</head>
<body>
<h1>Reading Garden</h1>
<p>A shared space for reading.</p>
</body>
</html>

index.htmlHTMLLn 1, Col 112 lines2 spasi

Editor shortcuts & help

Ctrl + Space: Show suggestions · ↑ ↓ select · Enter accept · Esc close
Shift + Alt + F: Format code
Ctrl/⌘ + F: Find and replace text
Ctrl/⌘ + [ / ]: Decrease / increase indentation
Tab: Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
Ctrl/⌘ + Z: Undo changes, including formatting

Suggestions use the language, snippets, and local code context. Formatting runs in your browser.

Document preview

Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.

TAKE THIS UNDERSTANDING WITH YOU

Practice gives a foundation.

Files in the same folder can link using their file names.
../ goes up one folder; / starts at the site root.
Each page still needs its own document structure and title.

Link

A lesson is complete when the independent task meets its goals. Return to the reading at any time.

Connect with other concepts

Relative path °Link °URL °

Library: Read a web address without getting lost ↗

Next lesson →