Theory
Theory
Comments

Relative addresses

Our blog is published on the web, but we work on a local copy on our computer. To test changes before publishing them, links between our blog pages should open the local files. We can use relative addresses for these links: they describe where another file is in relation to the current page. For example:

<a href="day-2.html">Second blog entry</a>

This is a relative address: it gives a path rather than a complete URL. The browser resolves it using the address of the current page to work out where the destination is. In this example, the two pages are files on our computer. Suppose the c:/blog folder contains these two files:

c:/blog/
      |-index.html // This page is open in the browser
      |-inner.html

The page c:/blog/index.html is open in the browser, and it contains a link with a relative address inner.html. In order to follow this link, the browser looks at the location of the open page and replaces the last part in it:

c:/blog/index.html + inner.html // Replace the last part
c:/blog/inner.html              // Open this file

Relative addresses work not only for files on a computer, but also for pages on a network. If you were to publish the two files from the example on the Internet (without changing their relative position to each other), then the link would still work. The relative address inner.html on the page https://site.com/blog/index.html is resolved as follows:

https://site.com/blog/index.html + inner.html // Replace the last part
https://site.com/blog/inner.html              // Open this address

Let’s add some more relative links to the blog’s main page.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>The website of a beginning coder</h1> </header> <main> <nav> <h2>Recent Posts</h2> <ul> <li><a href="day-1.html">Day One. How I forgot to feed the cat</a></li>  <li>Day Two. I want to become a coder</li> <li>Day Three. My cat is upset with me</li> <li>Day Four. How I almost got sick</li> <li>Day Five. I am relaxing</li> <li>Day Six. How I failed to understand anything</li> <li>Day Seven. Muffin gave me an assignment</li> <li>Day Eight. It’s getting very serious</li> <li>Day Nine. Or, more precisely, night</li> <li>Day Ten. Summing up</li> <li>Day Eleven. Everything should be taken in moderation</li> </ul> </nav> <section> <p>Greetings to everyone! Welcome to my first site. Up until just recently I had no idea what a coder does for a living, but now I have found interactive courses in HTML and CSS and I have set myself the goal of becoming one. I was even assigned an instructor, Muffin, who won’t let me slack off and will track my progress.</p> <p>My first assignment is to keep a diary and honestly write about all of my accomplishments.</p> </section> <section> Skills section </section> </main> <footer> Website footer </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 36px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } ul { list-style: none; padding-left: 0; } footer { margin-top: 30px; }

Goalscompleted

Similar to the first item, add another three links to the table of contents for the blog.

In the second list item, create a link to day-2.html using a relative address.
In the third list item, create a link to day-3.html using a relative address.
In the fourth list item, create a link to day-4.html using a relative address.

Relative addresses

Comments

Log in

Sign up

Restore access