Appearance
Advanced Topics
Links
Purpose of Links
Hyperlinks are clickable parts of an HTML page that will open another HTML page. The clickable area on the first page can be text or an image
When the user's mouse hovers over the clickable item, the mouse cursor will change shape and the item will change appearance to indicate the link
html
<a href="aUrl">Link Text</a>a - the Anchor HTML tag
href - a parameter to the Anchor tag
aUrl - a correctly formatted address to the linked page
Link Text - the clickable text that will appear on the page
Link to another page on my site
The correctly formatted address you supply in the Anchor tag can refer to an HTML page in the same folder as the one currently displayed
In this case, the location and HTML filename are all that is required
Example:
html<!DOCTYPE html> <html> <body> <a href="./Page2.html">Click here to see Page 2</a> </body> </html>The address is to an HTML file in the same directory as the current page, and is names Page2.html Below is what how it will appear in a browser
Relative URL
The above URL is referred to as relative because the location (indicated by ./) tell the browser to look in a location associated (or relative) to the current file
Link to another page on another site
While using links to other pages in a website make viewing content easier, the ability to create links to page son other websites is what really make HTML useful. A page can contain information and a like to other sites with similar information
Well-formed URL
For linking to other sites, the Anchor tag must contain a URL with all the required parts
html
<a href="https://catalog.hancockcollege.edu/current/courses/cs/">Computer Science Course Information</a>https:// - Indicates a Hypertext Transport Protocol
The s at the end of https indicates the site uses a secure connection to make it harder for hackers to listen in on what you are doing on the site
hancockcollege.edu - is the web server name
catalog. in front of hancockcollege.edu is a more specific part of Hancock's internet resources. It is still part of the web server name
current/courses/cs/" - the folder structure to locate the actual HTML page to display
Why is there no index.html file included in the above Anchor?
If an Anchor's href address does not include the name of the HTML file to view, the browser will try a couple of standard HTML page names
index.html is one of these standard filenames. It is typically a starting page for a topic or resource
Example:
html<!DOCTYPE html> <html> <body> <a href="https://catalog.hancockcollege.edu/current/courses/cs/">Computer Science Course Information</a> </body> </html>Below is what how it will appear in a browser
Absolute URL
The above URL is refered to as absolute because the location (indicated by https://catalog.hancockcollege.edu) provides an complete (or absolute) address, starting with the website
Opening the link in a new tab
The browser's default behavior when opening a new link is to overwrite the current page with the new content
However, the browser can be directed to open a new tab and render the linked page there
html
<a href="https://catalog.hancockcollege.edu/current/courses/cs/" target="_blank">Computer Science Course Information</a>target="_blank" in the Anchor tag will open the linked page in a new tab