Links and file paths

What you will build

Create an About page with two-way navigation and debug missing files without guessing.

Understand the idea first

A link asks where to go from the current file. Relative paths change with location; absolute URLs include a protocol and domain. Draw the file tree first.

Build it step by step

my-learning-page/ ├─ index.html └─ pages/ └─ about.html

<!-- index.html -->
<a href="pages/about.html">About me</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML reference</a>

<!-- pages/about.html -->
<a href="../index.html">Back to learning page</a>

1. Create the pages folder and about.html with a complete document skeleton.
2. Add the first link to the home page; from the root, enter pages/.
3. Add the return link; .. moves up one directory.
4. Click both directions and watch the location in the address bar.

Read the important lines

• href is the destination; link text should describe it.
• ./ is the current directory and ../ is its parent.
• If a new tab is truly needed, combine _blank with rel="noopener noreferrer".

URLs and special characters

A URL can contain a protocol, host, path, query, and fragment, as in https://example.com/search?q=html#result. The fragment jumps to a matching id. In HTML text, write < when you need a visible less-than sign and & for a standalone ampersand so the browser does not interpret them as markup or a character reference.

Common mistakes and what to check

Practice without copying

Create notes/week-1.html. Link to it from home, then link from it to home and About.

Completion check

• My page contains the required new content
• I can explain the key tags or attributes without the answer
• I deliberately created and fixed at least one error