Chapter 12
Hyperlinks: The Basics

This chap­ter is for novice web­site builders. It reveals an impor­tant con­cept about web­site build­ing that’s rel­e­vant to build­ing your web­pages for your webbook.

URLs

URL is the acronym for uni­ver­sal resource loca­tor. Think of the resource as being  HTML files (web­pages) or media files. Think of uni­ver­sal as being any­where on the entire web. And think of loca­tor as being the spe­cif­ic and unique web address of any par­tic­u­lar web­page or media file.

Typical Webpage

The web­page in this exam­ple is on the make-believe web­site named Enjoy Scenic South­ern Col­orado. The web­site address (URL) is EnjoyScen​ic​Soth​ern​Col​orado​.com. Below is a web­page of the web­site called gallery. Its URL is:

 http://​EnjoyScen​ic​South​ern​Col​orado​.com/​g​a​l​l​e​r​y​.​h​tml

In this par­tial view of the gallery web­page, you can see photographs.

Photo

The file name for the top pho­to­graph is pagosa-lakes-pano.jpg. Assum­ing that the pho­to­graph file is stored in the same fold­er on the same hard disk as the web­page, the URL for the pho­to is as follows:

http:// EnjoyScen​ic​South​ern​Col​orado​.com/​p​a​g​o​s​a​-​l​a​k​e​s​-​p​a​n​o​.​jpg

This is called an absolute link. It’s absolute­ly the full and cor­rect web address of the photograph.

Markups

Because the pho­to file is in the same fold­er on the same hard disk, you don’t even have to include the URL. You can just name the file with­out any­thing else. To embed the pho­to­graph in the web­page, you can use the fol­low­ing markups with the file­name the fol­low­ing URLs:

<img src=”http:// EnjoyScen​ic​South​ern​Col​orado​.com/​p​a​g​o​s​a​-​l​a​k​e​s​-​p​a​n​o​.​jpg”>

(absolute hyper­link)

<img src=”pagosa-lakes-pano.jpg”>

(rel­a­tive hyperlink)

This sec­ond link (src) is called a rel­a­tive link. It shows the resource (pho­to) rel­a­tive to where the web­page is (in this case in the same fold­er in the same stor­age such as a hard drive).

Absolute links are self-explana­to­ry. How­ev­er, you need to learn the rel­a­tive link­ing scheme to use rel­a­tive links. There are many online tuto­ri­als on it to assist your learn­ing. Read one of them.

Keep in mind  If you build your webbook in WordPress, you won’t need the relative hyperlinks that this chapter covers. WordPress does the linking for you. However, if instead you build your webbook in HTML, you will need relative hyperlinks. But you will only need relative hyperlinks if you intend to distribute your webbook in a ZIP file for local use on a user’s device.

Dispersed URLs

Sup­pose that you keep a huge archive of your pho­tographs at a (make-believe) web­site named Pho­to Repos­i­to­ry (pho​torepos​i​to​ry​.com). Your name is Har­ri­son, which is the name of your account and your fold­er on the web serv­er. Thus, the URL for the pho­to­graph above (assum­ing it’s stored on this web­site) is:

http://​Pho​toRepos​i​to​ry​.com/​h​a​r​r​i​s​o​n​/​p​a​g​o​s​a​-​l​a​k​e​s​-​p​a​n​o​.​jpg

What’s mag­ic about the web is that you can embed this file in your web­page, even though the file does not exist on the web serv­er that hosts your own web­site. Thus, the markup for the pho­to file in any web­page will be as follows:

<img src=”http://PhotoRepository.com/harrison/pagosa-lakes-pano.jpg”>

The mag­ic is sim­ply this. The user’s web brows­er imports the HTML5 file (web­page) from your web­site. It imports the pho­to file from the Pho​toRepos​i​to​ry​.com web serv­er. It assem­bles these togeth­er into a nice web­page for a user to view.

The two web servers pro­vid­ing the HTML file and the media file for the web­page have noth­ing to do with each oth­er. Dif­fer­ent busi­ness­es or peo­ple own and oper­ate each web server.

Why is this impor­tant to know? It’s impor­tant because it shows that you can bring in files from any­where on the web into your web­pages. For instance, you may have a huge num­ber of pho­tos that you don’t want to store on the host web serv­er for your web­site (for what­ev­er rea­sons). So you store them at Pho​toRepos​i​to​ry​.com. Wher­ev­er files are locat­ed on the web, through the mag­ic of hyper­links, you can embed them in your webpage.

Summary

You can store the com­po­nent files of your web­page any­place on the web. This goes for HTML files, media files, graph­ic files, JavaScript files, CSS files, font files, and the like. Via the appro­pri­ate HTML5 hyper­link­ing markups (absolute links) and the appro­pri­ate URLs, a user’s web brows­er can import these var­i­ous com­po­nents mag­i­cal­ly into a ful­ly func­tion­ing web­page that a user can view and use.

Nonethe­less, if you want to pro­vide users a ver­sion of your web­book to users that they can load on their com­put­ers and use offline, you need to load the files for the entire web­book into a ZIP file and send users the ZIP file. For such a ver­sion, you will need to use rel­a­tive links instead of absolute links.