INTERNET  WEBSITE  /  WEB  PAGE  LINKS  EXPLAINED


A Web Page, as explained in the Web Terminology section, normally contains Internet Instructions (codes), Pictures, Text (the Information itself), Links and so on. However. The actual viewable (on-screen) content can only made up of Pictures, Video, Animation, Text and Links. Sometimes a web page's viewable (on-screen) content is made up purely of text, purely of pictures, purely of links or a mixture of text, pictures and links for example. I briefly mentioned links in the Getting Started section, but in this section I will be explaining links in more detail as they can go unnoticed when you are a beginner to the internet.


A link is normally a piece of Underlined Blue Text or a picture that, behind the scenes, has been programmed with a link (website address) to a file, web page or another website so that when you click on that link it either sends you to another web page, another website or downloads a file. These days, with many programmers becoming more creative, the link can now be anything from coloured text to an animated picture. Other forms of link include menus. Here are examples of standard links.



Fig 1.0  A Picture Link
Main Index





Fig 1.1  A Text Link


Main Index


Fig 1.2  A Picture & Text Link

Fig 1.0 shows a standard Picture Link, whereby when you click on the picture the link takes you to the main index web page of this website. You will know this by hovering the mouse pointer over the picture, but not clicking on it, and then looking at the status bar of the Safari web browser application. The status bar will show you which website (i.e. http://www.maccomputerlessons.com) or specific web page (i.e. http://www.maccomputerlessons.com/index.htm) a link is going to. Therefore, get into the habit of looking at the status bar so that you have some clue as to which website or web page you will be visiting. Although the status bar is available for all links, sometimes a link's URL (website address) is too long to be fully displayed inside the, small, allocated status bar area. Saying this, you should be able to see enough of the URL to know where the link is taking you.

Fig 1.1 shows a standard Text Link, called Main Index, whereby when you click on the text the link takes you to the main index web page of this website.

Fig 1.2 shows a standard Picture & Text Link, whereby when you click on either the picture or the text the link takes you to the main index web page of this website. When you click on a Picture & Text link both the picture and the text might become selected, depending on the operating system you are using (i.e. Windows, OS X or Linux).


In certain circumstances it's always a good idea to check where a link is taking you beforehand, by hovering the mouse pointer over the link and then looking at the status bar of the web browser application you are using (i.e. Safari or Firefox). So if you are looking on a photography website for example for a desktop background photo or a photo to put on a birthday card you might click on a picture link that takes you to a Registration web page rather than the Photo Download web page. This could be because the website owner is not allowing certain photo files to be downloaded for free. On the other hand the link could take you to a malware website. So always look at where a link is taking you before clicking on it. Not all web browser applications will show link details in their status bar, in which case it could be a case of Trial & Error!!



Fig 1.3  The status bar of a web browser might display the URL (website address) of where a link is going

Years ago almost every website designer/programmer used the standard, blue underlined, Text Link within their web pages, but these days it is commonly used by search engine websites (such as Google and Yahoo) and for basic areas of a website only. Website designers/programmers have since turned their attention to creating more colourful, alternative, text links rather than using standard, blue underlined, text links (see below).



Fig 1.4  Standard Text Links are commonly found on Search Engine Results web pages these days

With this next group of text links the emphasis is on the Hover Link. When you hover the mouse pointer over a standard, blue underlined, text link it normally stays blue and underlined because of the way it has been programmed. However, as said above, now that website designers/programmers have become more adventurous they tend to programme the standard, blue underlined, text link so that when the mouse pointer is hovered over it the text link changes colour; Its background colour, text colour or both are changed. Even the underline is sometimes changed.

In the first example the original text link, called BBC ONE, is pink with no underline and bold (Fig 1.5) whereas when the mouse pointer is placed (hovered) over it (Fig 1.6) the text becomes white and the background becomes pink; therefore inverting it. If you actually click on the text link it takes you to the main BBC ONE web page.



Fig 1.5  The BBC ONE text link is pink with no underline


Fig 1.6  Hover the mouse pointer over the pink text link and it changes

In the second example the original text link, called DRAMAS & SOAPS, is grey with no underline (Fig 1.7) whereas when the mouse pointer is placed (hovered) over it (Fig 1.8) the text stays grey but it also becomes underlined. If you actually click on the text link it takes you to the Dramas & Soaps web page.



Fig 1.7  The DRAMAS & SOAPS text link is grey with no underline


Fig 1.8  Hover the mouse pointer over the grey text link and it becomes underlined

In the final example of this group of text links; When you hover the mouse pointer over the black text link called EastEnders it becomes light-grey in colour and also changes the background of the preview are above it - It changes the EastEnders photo with a description of the TV Series. And this is one of the main reasons for the Hover Link - It can change the text link's associated preview area, if it has one, as well as the text link's characteristics/attributes. So in this case the website programmer was able to display more information within a limited space on the web page simply by using an Hover Link to change the photo within the preview area for a description.

With the just said in mind you should no longer look at web page elements, such as a photo/preview area, as static - Do not think "that area only contains a photo" in other words. Hover over the photo area and its text link, if it has one, instead; just to see if there is additional information behind it.



Fig 1.9  The EastEnders text link is black with no underline


Fig 1.10  Hovering over the black text link makes it grey and changes the preview area

Some text links look like buttons, menus and drop-down menus even though they function as links simply because that is the way the website has been designed/programmed. A button is usually something you click on within a Application Form website, Flight website, Price Comparison website or Online Shopping website that performs a specific action behind the scenes; such as the BUY NOW, PROCEED TO CHECKOUT, CONTINUE, SUBMIT, CANCEL and YES buttons. A text link on the other hand is usually a piece of text, perhaps surrounding by colour and/or imagery, that you click on in order to take you to another web page or website completely. However, these days text, imagery and functionality are being combined to the point where you can no longer distinguish between what a real link is and what a button is. Take this next example from the PC World website.

When you search for a Laptop computer for example there is a link called PRODUCT DETAILS that when clicked on becomes an expanded piece of text, similar to a drop-down menu without the menu-items. The menu-items have been replaced by pure text (a description of the product).



Fig 1.11  Clicking on the PRODUCT DETAILS text does not link to another website or web page.....




Fig 1.12  .....it expands the words Product Details into a mini description of the product being sold.

And if you click on the GENUINE WINDOWS... text link it displays a pop-up window telling you that PC World recommends Windows 8 whereby you would normally expect that standard, blue underlined, text link to take you to a separate web page about the recommended Windows 8.



Fig 1.13  Clicking on a standard, blue underlined, text link these days might not link to another website or web page.....




Fig 1.14  .....it might display a pop-up window instead.

Another example of a text link not being a standard text link is when it is programmed as a Menu System. For example. In the example below EBay have grouped together standard text links (coloured grey) going down the left-side of the web page whereby when you hover over one of them it brings up (displays) a sub-menu, which is basically a set of sub text links that have been joined to that particular main text link. As you can see in Fig 1.15 below I am hovering over the text link called Electronics & Technology whereby a sub-menu (set of sub text links) have now appeared. In Fig 1.16 I have since moved the mouse pointer rightwards towards the sub text link (sub menu menu-item) called Computers, Tablets & Networking. If I click on that sub text link (sub-menu menu-item) I will be taken to another web page - The Computers, Tablets & Networking web page. I could of clicked on the main text link called Electronics & Technology instead which would of taken me to the Electronics & Technology web page.



Fig 1.15  Some standard text links are programmed to be menus and menu-items




Fig 1.16  You have the choice of clicking on a main text link (main menu-item) or sub text link (sub menu menu-item)

The final link I want to make you aware of is the Download Link, which is normally either a text link or a button. When you go to download the web browser application called Firefox for example, clicking on its download button makes it download the actual installation file. It knows where to find the installation file because, just like a standard text link, behind the scenes it has a link (website address) to the installation file attached to its code. Hence it has a link to the installation file and is therefore known as a Download link.



Fig 1.15  The Firefox Download Button has a download link (website address of the installation file) attached to its button code

With some download links they are not available until you do something, such as sign-in to your account or buy a piece of music. In this last example I have already played the recording called "Alarm", by clicking on its PLAY button, whereby the actual record title information and link turned orange and white (from grey and charcoal). So at this point you might think you need to make a record's title information turn orange and white before you can download the actual mp3 file, but this is not the case. You can actually hover over a record's title information and download link, whereby they turn grey and charcoal, and then just click on the Download Link (down arrow symbol). The orange and white just means you have played that particular recording, regardless if you downloaded it or not.



Fig 1.16  You don't always need to highlight something, or play it, in order to download its associated file(s).

Hopefully you can see that links come in all shapes, sizes and colours and that many of them need a certain level of understanding if you want to fully explore a website, especially when there is lots happening on a website whereby you might not be 100% sure if you should click on a link or just hover over it with the mouse pointer. In such cases be cautious as to what you might be clicking on, but at the same time don't be afraid to click. You will never gain experience if you don't try clicking on something every now and then. One golden rule here, of course, is to always use a known/branded company website such as Amazon, Microsoft, Apple, PC World and so on. Obviously if you entertain dodgy music-download websites you should expect malware and other problems, but if you entertain the iTunes store you should just enjoy the music!