HTML Links

HTML
Links

Ms. Azroui

​Objectives

• Understand the purpose and syntax of HTML links.

• Learn how to create internal (relative) and external (absolute) links.

• Be able to distinguish the difference between absolute and relative links.

• Be able to set up a same-page link that allows users to skip to the main content of a web page.

Open Ended

Why is it important to insert hyperlinks on a web page?

What is a URL?

u http://  Internet Protocol to tell the browser how to connect with the server hosting the URL.  Most documents on the web begin with http://, but they might also begin with https://, ftp://, telnet://, or others.

u www.tafths.org    Domain name where the file is located.

u academics      Folder or directory where the file is located

u index.html  Filename

​u For example, consider the following URL:

u http://www.tafths.org/academics/index.html

u Links to web pages refer to the address, or URL of the web page.

URL's consist of various parts...

​Linking to a URL – Absolute Reference

u Links are inserted into a document using the <a> tag which stands for “anchor”.

u The <a> elements requires an href attribute, which defines the destination of the link.

u To link to external websites, you use an absolute path, for example:

<a href ="http://www.youtube.com">Visit YouTube</a>

u Links are inserted within the document using the <a> tag which stands for “anchor”.

u The <a> elements requires an href attribute, which defines the destination of the link.

u To link to an internal web page, you use a relative path, for example:

<a href="index.html">Home Page</a>

Linking to a URL – Relative Reference

How do I remember these links?
Relative vs. Absolute

u A relative URL is used to reference local files within the same directory.

u An absolute URL is used to reference external files that are stored elsewhere on the Internet.

u Away from the directory.

​u an email link

u Jump-to links are typically used on very long pages, where users can benefit from having a link at the top of the page that allows them to jump to a certain section of the page without scrolling.

​u a jump-to-link/skip-to-link

Special Types of Links
u Two types of links make web surfing more convenient: