Now that you’ve got the hang of creating webpages, it’s time to learn how to link pages together which, of course, is the difference between a webpage and a website. Previously you created a file named index.html. This file will literally become the index of your website, also known as a ‘homepage,’ that will tie your entire site together.
As you may know, all of those links that you have clicked many thousands of times are officially referred to as hyperlinks; hence the title of this lesson.
First let’s create a new html file named classmates.html (which we will use in a later lesson) and save it into the mysite folder. For content, just copy and paste the text in the box below.
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>classmates</title> <link rel="stylesheet" href=""> </head> <body> My Classmates will live here. </body> </html>
Now, open index.html and just before the closing </body> tag enter
<a href="classmates.html">My Classmates </a>
As you can see, classmates.html is the file that you are linking to, My Classmates is the text that will actually be visible in the browser and </a> ends everything. You can think of <a href= as sort of the pointer. In case you are wondering, href stands for ‘hypertext reference.’
Linking to a file in another folder works just as you would expect. If classmates.html were inside of a folder called work, the link would read
<a href="work/classmates.html">My Classmates </a>
As we mentioned in a previous chapter, Brackets will do most of the work for you if you exercised the “Open Folder” option (available from File menu). Just below is a video of that process.
Upstream Links (linking backward)
Assuming that classmates.html is inside of the work folder, what if you wanted to link back to index.html? In that case you would use ../ as part of your link as shown below. The two dots, in conjunction with a forward slash, tells the browser to move back one folder level.
<a href="../index.html">My index page </a>
If classmates was inside of yet another folder inside of the work folder as shown at right, the link to index.html would include ../../ as in
<a href="../../index.html">My index page </a>
Lets examine just one more ../ scenario before we move on. In this case, as illustrated at right, we want to link from a file called 2012.html in a folder named gators to another file named 2014.html inside of a folder named bulldogs. The link in this case has to include ../ plus the name of the folder that you are linking into plus the name of the file that you are linking to, as shown below.
<a href="../bulldogs/2014.html">Bulldogs 2014 Ouch!</a>
Linking to a URL
To link to a website or webpage that already exists on the Internet somewhere other than your website, the url must include http://
Linking to cnn.com would look like this
<a href="http://www.cnn.com">Cnn Website </a>
The easiest way to link to any webpage or site is to visit the site with your browser, copy the address and paste it in. The screenshot shown here
for example, would appear correctly in a link as
<a href="http://www.wired.com/2015/01/karpathy/">Wired Article</a>
In case you are wondering why the link above shows only a folder named karpathy with no file name, there are at least two possible reasons.
One is that most web servers are set up so that html files with names such as index.html, home.html, or default.html, load automatically whenever you link or browse to a folder.
The other possible reason (the actual reason in this case) is that content management systems, such as wordpress, generate pages ‘on the fly’ from a database when a browser visits a given url. I just looked at the karpathy source code and the online version of wired magazine turns out to be one great big wordpress site.
Test the link from index.html to classmates by (1) saving index.html and (2) opening index.html in your browser and clicking the link.
Upload everything to the server.
If things work properly the next step is to upload both files to your web account so that I, and the rest of the world can see your work.
This brings us to an important point. Whenever you update a file on your computer, such as index.html, you must upload the file to the server in order for it to work on your website.
Lets say that again.Whenever you update a file on your computer, such as index.html, you must upload the file to the server in order for it to work on your website. In other words, changing the index.html file on your computer changes nothing on the server until you upload the new index.html and replace the older version on the server. So upload it now into the public_html folder. As you do so, cyberduck will ask you is you want to replace the index.html file on the server. Click yes. In order to update a file that is on the web server, you must replace it with the newer file.
Don’t forget to upload your classmates
Congratulations. You have updated index.html. You may be thinking that the next logical step is to go to your website (emuel.mynmi.net for example) and test the link. But that would be wrong because the link will not work until you put classmates.html on the server as well.
In the next lesson you will alter the version of classmates.html that is on your computer by adding pictures of your classmates. At that point you will have to upload the updated version classmates.html from your computer to the server. You will also have to upload all of your classmate’s images to the server. Otherwise, classmates will not have any pictures to display.