Lesson Four: The External (Absolute) Link
Now that you know about links that stay within your website, let's learn about "external" links that leave your site and lead somewhere else.
Uniform Resource Locators (URLs)
Each web page on the Internet needs some sort of unique name so it can be identified. A page can be accessed by a Uniform Resource Locator (URL). URLs can be used to identify HTML files, PHP files, image files, plain text files, and many other file types. Here is an example URL:
https://www.example.com/page.html
This URL consists of several components:
1. Protocol: In this case, the protocol is "https://" which stands for Hypertext Transfer Protocol Secure. It is a secure version of the HTTP protocol, ensuring a secure connection between the web server and the user's browser.
2. Domain: The domain is "www.example.com". It identifies the specific website where the page is hosted. Domains are unique and can be registered by individuals, companies, or organizations.
3. Path: The path refers to the specific location or file on the website. In this example, the path is "/page.html" indicating that the page is located in the root directory or a specific subdirectory with that name.
4. File type: The file type is represented by the ".html" extension in this example. It indicates that the page is an HTML file, which can be rendered by web browsers.
Using this URL, a user can access the web page by entering it into their browser or by clicking on a hyperlink that points to this URL.
https://www.example.com/page.html
The URL is composed of several parts:
1. Protocol: In this example, the protocol is "https". This indicates the method that should be used to access the page. Common protocols include "http" and "https" for web pages, "ftp" for file transfers, and "mailto" for email addresses.
2. Domain: The domain is the main part of the URL and identifies the server where the web page is hosted. In this example, the domain is "www.example.com". The domain is made up of a specific name (such as "example") and a top-level domain (such as ".com", ".org", or ".net").
3. Path: The path is the specific location of the file on the server. In this example, the path is "/page.html". The path can include folders and subfolders to organize files on the server.
Linking to an External Website
To create a link that leads to an external website, you can use the "a" tag with the "href" attribute. The "href" attribute specifies the URL of the destination. Here is an example:
<a href="https://www.example.com">Visit Example Website</a>
In this example, the link text is "Visit Example Website", and the URL is "https://www.example.com". When the link is clicked, the user will be taken to the specified website.
Linking to a Specific Page on an External Website
You can also link to a specific page on an external website by including the URL of the page in the "href" attribute. Here is an example:
<a href="https://www.example.com/about.html">About</a>
In this example, the link text is "About" and the URL is "https://www.example.com/about.html". When the link is clicked, the user will be taken to the specified page on the external website.
External links are an important aspect of web design because they allow you to connect your website to other valuable resources and provide additional information to your visitors. Remember to always check that the external website is reliable and trustworthy before linking to it.
https://www.example.com/page1.html
In this example, "https://" is the protocol or communication method used to access the webpage. "www.example.com" is the domain or host name of the website, and "page1.html" is the specific page or file being accessed.
Creating an External Link
To create an external link on your website, you can use the HTML anchor tag `<a>` combined with the `href` attribute. The `href` attribute specifies the URL of the desired webpage. Here is an example code for creating an external link:
```html
<a href="https://www.example.com/page1.html">Link to External Page</a>
```
In this code, the text "Link to External Page" will be displayed as the link. When a user clicks on the link, they will be directed to the URL specified in the `href` attribute.
Differentiating External and Internal Links
It is important to differentiate external links from internal links on your website. This helps users understand where they will be directed when they click on a link.
One way to make this distinction is to use a different visual style for external links. For example, you can change the color or add an icon to indicate that it is an external link. Additionally, you can add a small note or tooltip to inform users that the link will take them outside of your website.
Testing External Links
Before publishing your website, it is crucial to test all external links to ensure they are working correctly. Click on each link to verify that it leads to the intended webpage. This helps provide a seamless and user-friendly experience for your website visitors.
In conclusion, external links allow you to connect your website to other webpages on the internet. By using URLs and the HTML anchor tag with the `href` attribute, you can direct users to specific webpages outside of your site. Remember to differentiate external links visually and test them to ensure their functionality.