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.
The links can be created with <a> tag.

Syntax:
<a href='url' title='Link title'>Link text</a>
- 'href' - attribute that contains the destination of the link.
- 'url' - (Uniform Resource Locator) is the address of the link (the page that will be open), ex.: https://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.

Example:
<h4>Example link</h4>
<p>This is a simple link.</p>
 <a href='/html' title='HTML Course'>HTML Course</a>
• The color of the links in page can be changed with the CSS color property.
In css:
<style>
/*links color */
a {
 color: #0000fe;
}

/*color when mouse is over the link */
a:hover {
 color: #00d000;
}

/*color of visited links */
a:visited {
 color: #fe0000;
}
</style>
- Example:
<style>
a { color: #f00000; }
a:visited { color: #00d000; }
a:hover { color: #0000e0; }
</style>

<h4>Example colored link</h4>
<p>This is a link with color defined in CSS.</p>
 <a href='/html' title='HTML Course'>HTML Course</a>
• The text of the link can be replaced with an image:
<h4>Example link with image</h4>
<p>Click the image to open the link.</p>
<a href='/blog/' title='Spirituality'><img src='../imgs/smile_gift.png' alt='Smile' width='150' height='132'/></a>

You can create two types of hyperlinks:

1. Hyperlink to another document (called external links).
2. A bookmark inside a document, by using the 'id' attribute (called internal links).

External Links

These type of links open external documents. The URL address added in the 'href' attribute can be of two types:


  1) Absolute path - the URL contains the full address, with the domain name (the 'http' and 'https' protocols can be omitted).
Example:
<a href='//coursesweb.net/css' title='CSS courses'>CSS Course</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).
Example:
<!-- The index.php page is in the same folder -->
<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>
- Relative path is used only with documents which are on the same server.

Internal Links

An internal link allows you to jump to another section on the same page, so it basically scrolls the page up or down to the desired location.
To create an internal link you must follow these steps:

  1. Write the following code to the target, a bookmark which marks the location where you jump and is on the same web page.
    <a id='indice'> </a>
    - the 'id' attribute indicates the target for the link.
    - the 'indice' can be any word, will be used in the 'href' attribute.
  2. Create the link, anywhere in the page, using for 'href' attribute a hash (#) with the same 'indice' specified in the 'id' attribute.
    <a href='#indice'>Link text</a>
Example:
<h4>Example internal link</h4>

<a href='#next1'>Next section</a>

<p style='height:990px;'>Lots of paragraphs...<br>
...</p>

<a id='next1'> </a>
<p>Here is the next section.</p>
<p>Everything is good and beautiful when you see it as it really is.</p><br>

Bookmarks are not displayed, they are invisible to the reader.
You can use the ID of any element in page as target and indice for hash '#' in 'href' ( href='#id_div' ).


• 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 target attribute

The <a> tag can have a target attribute, which specifies where to open the linked document.
There are 4 special 'target' values:


The next example will open the linked document in a new tab in browser:
<h4>Example link with target</h4>
<p>The following link has target='_blank', will open the page in a new tab.</p>
 <a href='//gamv.eu/' target='_blank' title='Flash Games'>Flash Games</a>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";
Creating Hyperlinks - Links

Last accessed pages

  1. Follow the mouse cursor with a DIV inside a Parent (2915)
  2. JavaScript code and PHP (21587)
  3. Add Pause in JavaScript script (9991)
  4. Input text fields (2286)
  5. Read Excel file data in PHP - PhpExcelReader (61135)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (558)
  2. Read Excel file data in PHP - PhpExcelReader (467)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (342)
  4. PHP getElementById and getElementsByTagName (266)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (253)