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.
To begin, use Brackets to create a new html file.
- Between the <body> tags add the following text: "My classmates will appear here later ".
- Save the file as classmates.html into the mysite folder.
- Now, open index.html and just before the closing </body> tag create a link to classmates.html as shown below.
Classmates.html is the file that you are linking to, by My Classmates is the text that will actually be visible in the browser. </a> defines the end of the link. 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). You may have noticed that classmates.html appeared automatically as you were typing out the link. Just below is a video of that process.
Add a title to your link
It is also possible, and recommended, to add information to your link via a title tag as shown here.
There are two reasons why it is a good practice to add a title.
ONE: if someone mouses over your link and hovers for a second, the information in the title will appear. This allows the user to decide if they are interested in actually following the link.
TWO: Visually impaired visitors to your site can actually listen to the information provided by the title tag.
Upstream Links (linking backward)
Assuming that classmates.html is inside of the work folder as shown at right, what if you wanted to link back to index.html, which is in the folder that contains work? In that case you would use ../ as part of your link as shown below. The two dots, inconjunction with a forward slash, tells the browser to move back one folder level.
<a href="../index.html">My index page </a>
<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
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 classmates.html
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. Why? Because you have literally placed index.html on ANOTHER COMPUTER. When you browse to that server (the other computer) and click on the link to classmates.html, nothing happens unless the file that is linked to is also on the other computer (server).
In a subsequent 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.