Links (or Hyperlinks) are HTML elements by which we can open other pages, jump from one document to another or to another point on the same page. They are very important in creating web pages.
- General Syntax:
<a href="url" title="Link title">Link text</a>
- "a" - is the HTML element to create links
- "href" - specifies the destination of a link
- "url" - (Uniform Resource Locator) is the address of the link (the page that will be open).
For example: http://coursesweb.net/html/
- "title" - specifies a title for the hyperlink (a hidden text that only appears when the mouse is positioned over the link)
- "Link text" - is the text that appears in the web page, which must be clicked on. This text can be replaced with an image:
<a href="url" title="Link title"><img src="image_address" alt="Title" /></a>
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
You can create two types of hyperlinks:
1. Hyperlink to another document (called external links).
2. A bookmark inside a document, by using the "name" attribute (called internal links).
These type of links open external documents. The URL address added at the "href" attribute can be of two types:
1) Absolute path - the URL contains the domain name too.
<a href="http://coursesweb.net/index.php" title="Free courses">Vist CoursesWeb.net</a>
2) Relative path - the URL contains only the name of the document (and the path to the folder if the document is in another directory).
<!-- The index.php page is in the same folder -->
- Relative path is used only with documents which are on the same server.
<a href="index.php" title="Free courses">Home</a>
<!-- The page.html is up one directory -->
<a href="../page.html" title="Free courses">Text</a>
<!-- The page.html is in a sub-directory -->
<a href="folder/page.html" title="Free courses">Text</a>
An internal link allows you to jump to another section on the same web page, so it basically scrolls the page up or down to the desired location.
To create an internal link you must follow these steps:
- Write the following code to the target, a bookmark which marks the location where you jump and is on the same web page.
- <a name="word"> </a>
- the "name" attribute indicates the target for the link
- the "word" can be any word, will be used in the "href" attribute
- Create the link, anywhere in the page, using for "href" attribute the same "word" specified in the "name" attribute.
- <a href="#word">Link text</a>
<a href="#next1">Next section</a>
<p>Lots of paragraphs<br />
<a name="next1"> </a>
<p>Here is the next section.</p>
Bookmarks are not displayed, they are invisible to the reader.
The HTML5 standard suggest using the "id" attribute instead of the "name" attribute for specifying the name of an anchor.
• You can combine the external hyperlinks with internal links, to jump to a certain section of another document, where you have added the bookmark.
<a href="page_url#bookmark" title="A title">Link text</a>
• The <a> tag can have a target attribute, which specifies where to open the linked document.
There are 4 special "target" values:
- target="_top" - will load the link in entire window, any frames will disappear.
- target="_blank" - will load the link in a new window, the old window will remain opened.
- target="_self" - will load the link in the same window.
- target="_parent" - the "_parent" indicates the previous frame from which the current page was opened, if it does not exist then the link will be opened in the current window.
The next example will open the linked document in a new browser window or a new tab:
<a href="http://marplo.net/" title="Free courses" target="_blank">Free courses</a>