Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Relative addresses
Although our blog is on the web, but when we’re working on it, we do it on our computer—that is, locally. So we can test changed pages before publishing them, links to other blog pages should open the file on our computer, and not from somewhere on the Internet. You need to use a special address for these types of links, such as, for example:
<a href="day-2.html">Second blog entry</a>
This type of address is called relative. In contrast to “normal” addresses, it does not contain a full website address. In order to resolve a relative address and reach its destination, the browser must decode it. To do this, it typically starts with the position of the current page. For example, there are two files in the c:/blog
folder:
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
can be decoded 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 main blog.
- index.html
- style.css
Thanks! We’ll fix everything at once!
The code has changed, click “Refresh” or turn autorun on.
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Similar to the first item, add another three links to the table of contents for the blog.
- Link with relative address to the the second paragraph of
day-2.html
. - Link with relative address to the the third paragraph of
day-3.html
. - Link with relative address to the the fourth paragraph of
day-4.html
.
Comments