Curriculum

HTML Basic

HTML Introduction

0/1

HTML Editors

0/1

HTML Basic

0/1

HTML Elements

0/1

HTML Attributes

0/1

HTML Headings

0/1

HTML Paragraphs

0/1

HTML Styles

0/1

HTML Formatting

0/1

HTML Quotation

0/1

HTML Comments

0/1

HTML Colors

0/1

HTML CSS

0/1

HTML Links

0/3

HTML Images

0/3

HTML Favicon

0/1

HTML Page Title

0/1

HTML Tables

0/8

HTML Lists

0/4

HTML Block and Inline

0/1

HTML Div

0/1

HTML classes

0/1

HTML id

0/1

HTML Iframes

0/1

HTML Java Script

0/1

HTML File Paths

0/1

HTML - The Head Element

0/1

HTML Layout

0/1

HTML Responsive

0/1

HTML Computer Code

0/1

HTML Semantic

0/1

HTML Style Guide

0/1

HTML Entities

0/1

HTML Symbols

0/1

HTML Emojis

0/1

HTML Charsets

0/1

HTML URL Encode

0/1

HTML vs. XHTML

0/1

HTML Forms

0/6

HTML Graphics

0/2

HTML Media

0/5

HTML APIs

0/5

Text lesson

Links

HTML Links – Hyperlinks

HTML links function as hyperlinks, enabling you to navigate to other documents with a click. When you hover your cursor over a link, it changes into a small hand symbol.

Click to Learn

Note: A link is not restricted to text. It can be an image or any other HTML element!

HTML Links – Syntax

The <a> tag in HTML is used to create a hyperlink, and it is structured as follows:

The href attribute of the <a> element is crucial, as it specifies the destination of the link.

The visible portion to users is the link text.

By clicking on this text, users are directed to the designated URL.

Example

<a href=”https://code7school.com/”>Visit code7school.com!</a>

HTML Links – The target Attribute

Normally, clicking a link opens the linked page in the same browser window. To alter this behavior, you can set a different target for the link using the target attribute.

The target attribute determines the location where the linked document will open.

Possible values for the target attribute include:

_self: This is the default setting, where the document opens in the same window or tab where the link was clicked.
_blank: This option opens the document in a new window or tab.
_parent: This choice opens the document in the parent frame of the current frame.
_top: Selecting this will open the document in the entire window, overriding any frames.

Example

<a href=”https://code7school.com/” target=”_blank”>Visit code7school.com!</a>

Absolute URLs vs. Relative URLs

Both examples above employ an absolute URL (a complete web address) within the href attribute.

A local link (a link to a page within the same website) is designated with a relative URL (excluding the “https://www” portion):

Example

<h2>Absolute URLs</h2>
<p><a href=”https://www.w3.org/”>W3C</a></p>
<p><a href=”https://www.google.com/”>Google</a></p>

<h2>Relative URLs</h2>
<p><a href=”html_images.asp”>HTML Images</a></p>
<p><a href=”/css/default.asp”>CSS Tutorial</a></p>

Click to Learn

Use an Image as a Link

To make an image into a link, simply enclose the <img> tag within the <a> tag.

Link to an Email Address

To generate a link that opens the user’s email program to compose a new email, include “mailto:” within the href attribute.

<a href=”mailto:[email protected]”>Send email</a>

Click to Learn

Button as a Link

To transform an HTML button into a link, JavaScript code must be incorporated.

JavaScript enables you to define actions for specific events, such as clicking a button.

<button onclick=”document.location=’default.asp'”>HTML Tutorial</button>

Click to Learn

Link Titles

The title attribute provides additional details about an element, commonly displayed as tooltip text when the cursor hovers over the element.

Example

<a href=”https://www.code7school.com/courses” title=”Go to code7 course section”>Visit Tutorial’s</a>

Click to Learn

Absolute URLs and Relative URLs

Example

Link to a webpage using the complete URL:

<a href=”https://www.code7school.com/courses”>Tutorial’s</a>

Chapter Summary

Employ the <a> tag to create a hyperlink.
Utilize the href attribute to specify the URL of the link.
Apply the target attribute to designate the opening location for the linked content.
Incorporate an <img> tag within an <a> tag to make an image function as a link.
Implement the ‘mailto:‘ protocol within the href attribute to initiate the user’s email client when the link is clicked.