A Smarter Way To Learn HTML & CSS(2015)

30
Link addresses

When a link address doesn’t specify a page, like about.html or faq.html, the browser knows to go to the home page of the site, usually called index.html.

http://www.stackoverflow.com...

…is the same as…

http://www.stackoverflow.com/index.html

If I wanted to link to a page other than index.html, I would include the page name in the address, like… http://www.stackoverflow.com/web-design.html

Note that there’s a / between the domain name and the page name. There are no spaces.

If the page I wanted to link to were in a subfolder under the main folder, I’d include the subfolder name as well:

http://www.stackoverflow.com/questions/web-design.html

A link might drill down through additional levels of subdirectories, to get to a page. For example:

http://www.stackoverflow.com/questions/rookie/newest/web-design.html

You don’t have to have several levels of subdirectories in your site structure, but you might want to for purposes of organization if the site has hundreds of pages. On the other hand, if it’s a simple site, you might have, for example, just an “images” subfolder and a “styles” subfolder under the main folder. All the HTML pages would be in the main folder. Or you might choose to have a flat structure, with no subdirectories at all. It’s up to you.

When you link to a page on your own site, you can skip the domain name. For example, if I want to display a link on the home page of my site that takes the user to my own site’s faq page, I won’t have to write…

<a href="http://www.asmarterwaytolearn.com/faq.html">Frequently Asked Questions</a>

I can write, simply…

<a href="faq.html">Frequently Asked Questions</a>

When I omit the domain name, the browser understands that I’m linking to a page on the same site.

If the page I’m linking to is on the same site but in a folder or several levels of directories lower than the folder you’re linking from, you can still skip the domain name, but you have to include the name(s) of the lower folder or directories.

<a href="services/code-checking.html">Frequently Asked Questions</a>

In the example above, you’re telling the browser that the page code-checking.html is one level below the folder you’re linking from, in the subfolder services. Note that there is no / before the subfolder name.

But suppose you want to link from a page in the services subfolder to a page in the products subfolder that’s on the same level as the services subfolder. So now you have to tell the browser to first go back up one level, and then go down from there to the products subfolder. This is how you do it.

<a href="../products/text-editors.html">Frequently Asked Questions</a>

For each level the browser needs to go back up in order to go down again, add an additional ../

For example, suppose you’re writing a link on a page that’s in a folder two levels down from the home page. To link back to the home page (index.html), you’d write:

<a href="../../index.html">Home</a>

In your HTML file create a brief paragraph that includes a link that takes the user to the why-exercises.html page at smarterwaytolearn.com. Save the file and display the page. Click the link.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-30-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/30.html