Part 1 | Getting Started
5. HTML Links
This section of the guide covers HTML Links. HTML Links are the key component of Web page interactivity. Links provide the ability to navigate throughout the World Wide Web and create menu navigation elements in Web design. They also allow Web pages to link to external code such as CSS and Javascript documents to add styling and functionality. Therefore, it is essential to understand the different ways they are used and coded when designing Web pages.
– “Fall seven times, stand up eight.”
ABOUT LINKS
HTML LINKS (HYPERLINKS)
HTML Hyperlinks are found in almost every Web page. They allow us to navigate from page to page within a website, to a section of content within a Web page and to pages on other websites. Essentially, they make it possible to navigate around the World Wide Web by clicking on a link and jumping to another document. A link can be applied to text, an image or just about any other HTML element.
LINK SYNTAX | HTML Example 6
HTML Links are defined by the <a> tag as follows:
<a href=”URL of the document or data“>Text for the Link</a>
The href attribute identifies the address of the HTML document for the link. The text (or image) of the link resides within the tag.
A URL (Uniform Resource Locator) is the Web address of a document or data on the Internet, usually in the form of a Domain Name and/or pages within directories of that domain.
1. Absolute Links:
An absolute link (external link) is defined when the href attribute specifies the full URL of the document address including the protocol to obtain the document, the domain server to get it from, the directory the document is located in, and finally the document name with the document extension (.html). An external link from another website to this website would look like this:
<a href=”https://thewebdesignsurvivalguide.com“>The Web Design Survival Guide</a>
Note: The first page of a website domain is always named index.html, however it is not necessary to indicate this at the top level of the domain name in an absolute link as the Internet browser looks for the document named index.html automatically.
2. Relative Links:
An relative link (internal or local link) is a link from one document to another from within a directory of the same website (domain) and only requires the directory path and the name of the document. A link to this Web page from another page of this website looks like this:
<a href=”/part-1-getting-started-html-links.html“>4. HTML Links</a>
3. Anchor Links:
An anchor link (bookmark link) is a link from one location of an HTML document to another location in the same document. This is useful to provide navigation to sections of long Web pages and commonly used to jump-to the top or bottom of a Web page.
An anchor link is defined in two places in the HTML code:
1. Define an ID Selector to an HTML element:
<footer id=”bottom“>
2. Identify the ID selector name with the hash tag symbol (#) in the href attribute of the link:
<a href=”#bottom“>Goto Footer</a>
4. Menu Links:
Website navigation links are commonly arranged as menus at the top or side of a Web page. Menu links are relative links arranged in HTML Lists. Links organized by HTML lists and list items are typically organized inside the HTML semantic <nav> tag. Sometimes these are called “UL Trees” because they are usually coded with the <ul> tag and often have lists nested within one or more <li> tags to define sub menu links.
An HTML list organized inside a <nav> tag to create a simple menu might look like this without any sub lists:
<nav class=”navbar”>
<ul>
<li><a href=”#“>Menu Link 1</a></li>
<li><a href=”#“>Menu Link 2</a></li>
<li><a href=”#“>Menu Link 3</a></li>
<li><a href=”#“>Menu Link 4</a></li>
<li><a href=”#“>Menu Link 5</a></li>
</ul>
</nav>
In this example, the hash tag symbol (#) is being used as a placeholder or “null” link for the URL of the href attribute. Even though the # symbol will not link to another document, it allows the link to appear as if it is functional in the Web browser and displays the link cursor (finger) on mouse over. This is useful for styling links on a home page prior to coding subsequent Web pages in a website.
The menu links are styled by the following CSS rule (combinator selector):
.navbar ul li{
float: left;
list-style: none;
padding-right: 15px;
font-size: 14px;
}
float: left; = Aligns the links horizontally.
list-style: none; = Removes the default bullet points from the list.
padding-right: 15px; = Adds 15px space between the text for each <li> tag.
font-size: 14px; = Defines the font size of the text for the links in the<li> tags.
LINK STYLING (CSS) | CSS for HTML Example 6
HTML Text Links are styled with CSS pseudo-classes. A pseudo-class is used to define a special state of an HTML element. There a variety of ways to style links to provide visual feedback to the user including:
An unvisited link (default):
a:link {
color: #50baba;
}
A visited link (link state cached in browser):
a:visited {
color: #5a84b3;
}
A mouse over link (changes state on mouse over):
a:hover {
color: #cccccc;
}
A selected link (active link state in browser):
a:active {
color: #50baba;
LINK TARGET ATTRIBUTES | HTML Example 6
HTML Links can also include a target attribute to define how the link is opened in the browser. The target attribute can have one of the following values:
_blank – Opens the linked document in a new window or tab.
_self – Opens the linked document in same window/tab as it was clicked.
_parent – Opens the linked document in the parent frame.
_top – Opens the linked document in the full body of the window.
An absolute link with the blank attribute to this website might be:
a href=”https://thewebdesignsurvivalguide.com” target=”_blank”>The Web Design Survival Guide</a>
HTML Example 6
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<link rel="stylesheet" href="css-for html-example-6.css">
</head>
<body data-rsssl=1>
<header>
<h2>h2 Headline inside the header tag</h2>
</header>
<nav class="navbar">
<ul>
<li><a href="#">Menu Link 1</a></li>
<li><a href="#">Menu Link 2</a></li>
<li><a href="#">Menu Link 3</a></li>
<li><a href="#">Menu Link 4</a></li>
<li><a href="#">Menu Link 5</a></li>
</ul>
</nav>
<main>
<section id="section-1">
<article>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo totam velit, debitis quam quia, minus praesentium voluptatibus nisi explicabo quasi placeat enim dolor sapiente sit similique architecto, consequatur ex! Veritatis, explicabo beatae aut esse quisquam qui ea deleniti fugit, dolorum eos unde. Explicabo, modi, velit nam libero odio adipisci nisi omnis?</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate officia maxime quidem reprehenderit odit autem dolorem minima repellendus pariatur repellat consectetur laboriosam ex sapiente ducimus aliquam modi, magnam iusto minus numquam, itaque, consequuntur adipisci, est molestiae. Delectus nisi labore quod est, iste quibusdam excepturi optio eos fuga.</p>
</div>
</article>
</section>
</main>
<footer>
<p><a href=”https://www.thewebdesignsurvivalguide.com” data-et-target-link=”_blank”</a></p>
</footer>
</body>
</html>
CSS for HTML Example 6
@charset "UTF-8";
/* CSS Document */
body{
font-family: "Open Sans", Arial, sans-serif;
}
header{
background-color: lightgray;
padding: 5px;
}
h2{
font-size: 24px;
padding: 10px;
font-weight: normal;
text-transform: uppercase;
}
a:link{
color: #50baba;
text-decoration: none;
}
a:visited{
color: #5a84b3;
}
a:hover{
color: #cccccc;
text-decoration: underline;
}
a:active{
color: #50baba;
}
#nav-example{
background-color: #000000;
padding: 2px;
height: 30px;
}
.navbar ul li{
float: left;
list-style: none;
padding-right: 15px;
font-size: 14px;
}
#section-1{
background-color: grey;
padding: 5px;
overflow: auto;
}
.column{
width: 47%;
float: left;
background-color: white;
margin: 5px;
padding: 5px;
}
footer{
background-color: black;
padding: 5px;
font-size: 14px;
font-style: italic;
color: white;
clear: both;
padding-left: 15px;
}h2 Headline inside the header tag
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo totam velit, debitis quam quia, minus praesentium voluptatibus nisi explicabo quasi placeat enim dolor sapiente sit similique architecto, consequatur ex! Veritatis, explicabo beatae aut esse quisquam qui ea deleniti fugit, dolorum eos unde. Explicabo, modi, velit nam libero odio adipisci nisi omnis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate officia maxime quidem reprehenderit odit autem dolorem minima repellendus pariatur repellat consectetur laboriosam ex sapiente ducimus aliquam modi, magnam iusto minus numquam, itaque, consequuntur adipisci, est molestiae. Delectus nisi labore quod est, iste quibusdam excepturi optio eos fuga.
Proceed to the next part of the guide if you feel you have a solid understanding of the topics covered so far. Review the related links to study these concepts in more detail.
Web Design Tools & Resources