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.1 A Text Link
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 going.
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 might not link to another website or web page..... ?? ed???