EL PORTAFOLIO EDUCATIVO

Probably the most important concept underlying the entire World Wide Web is the hyperlink. Those 1 or 2 words, normally in blue and underlined, which your visitor can click on to move to another page or another site. Once you know how to create simple web pages, and some hyperlinks to allow your visitors to move between them, you have the basic building blocks for constructing just about any site you could ever need.

Before we can create hyperlinks we’ll need to create a second page for our site to complement our index.html home page. So fire up Amaya and, using the instructions on page 51, create another page in your local Web Work folder. This time, name it more.html instead of index.html. With 2 pages created for our site, we can now create some hyperlinks between them.

Using Amaya, open your index.html page. To do this, go to the File menu, choose Open Document, then select File, then browse to the index.html file in your Web Work folder. Edit the page so as to include some text which will include the clickable hyperlink. Then select the actual words that you want to turn into a link, by dragging over them with your mouse like this:

By selecting the text, we’ve told Amaya which words we want to turn into a hyperlink. All that remains is to specify which web page to open when the link is clicked. So, from the Links menu, click on "Create or change link" and, in the box that appears, type more.html

and click the Confirm button. Then click somewhere on the blank white space within your index page.

Your link is now created, and should appear on your page as underlined text like this:

You’ve probably noticed my choice of clickable text, namely "find out more". You might have expected me to choose "click here" instead. After all, doesn’t it make sense to always turn "click here" or "click this link" into, well, something clickable? Actually, no it doesn’t. One important aspect of web site design is accessibility. This means making sure that your site can be used fully by those with disabilities. For example, that bit of text which pops up when someone hovers over a picture (in case they can't see the pictures), or visitors being able to navigate through your site using keyboard shortcuts rather than a mouse. Making your site accessible is, if nothing else, common sense and a polite thing to do. In many cases, depending on which country you’re based in and whether your site is produced by an organisation in the public or private sector, creating an accessible site is actually a legal obligation and you risk prosecution if disabled users can’t make full use of it.

People who are blind or partially-sighted often use screen reader software to help them navigate the web. This special software reads out the contents of web pages via a voice

synthesizer. Having read out the contents of the page, it will then scan the page for hyperlinks and read those too, so that the user can press a key as soon as he or she hears the particular link they want to visit. And that’s the reason why I chose to highlight the words "find out more" rather than "click here". Because a blind person would much rather listen to a list of choices that consisted of "find out more", "go to main menu", "print this page", "browse our catalogue" and so on, than a list that said "click here", "click here", "click here", "click here" or "click here".

Anyway, back to our page. We’ve created a link from our home page to our "more info" page. Before our fantastic new two-page site is ready to test, we should also create a link from more.html page to the index page. So close the index page, open the more.html file instead, and, using the same process as above, add a line to more.html which says something like "click here for the home page". Then turn "home page" into a clickable link which goes to index.html and save the file. Then quit Amaya.

Before we can test our links, we’ll upload them to the server. So refer to the instructions on page 53 for uploading files, and use FileZilla to upload both index.html and more.html to your server. Finally, close FileZilla and use your Web browser to surf to your web site. Click on the links, and you should be able to move between your two pages. Isn’t that neat?

Now that you know everything that’s required to create a simple web site with links, why not try creating a third and fourth page for your site, and set up some more hyperlinks between them?