LinksBuilding a Website Lesson 5

LinksThere are various ways to use links on a website:

Link to other sitesLink to other pages on the same siteEmail linksOpen links in a new windowLink to a specific part of another page

Linking to Other SitesLinks are created using the <a> element,

which has an attribute called hrefThe value of the href attribute (what’s inside the “ ”) is the page that you want people to go to when they click that link.

The full website (absolute URL) must be typed within the “ ”.

Instead of google.com, you must use http://www.google.comCod

eBrows

er<a href=“http://www.google.com”>Google</a> Googl

e

Linking to Other Pages on the

Same SiteWhen you are linking to other pages within the same site, you do not need to specify the domain name in the URL (Uniform Resource Locator).

You can use a shorthand known as a relative URL.

If all of the pages of the site are in the same folder, you can just use the file name.Cod

eBrows

er<p> <ul> <li><a href=“index.html”>Home</a></li> <li><a href=“about-us.html”>About</a></li> <li><a href=“movies.html”>Movies</a></li> <li><a href=“contact.html”>Contact</a></li> </ul></p>

• Home• About• Movies• Contact

Email LinksTo create a link that starts up the user’s email program and addresses an email to a specified email address, you use the <a> element with the href attribute.

This time, the value of the href attribute starts with mailto: and is followed by the email address you want the email to be sent to.Cod

eBrows

er<a href=“mailto: desiree_chavez@lnsd.net”>Email Mrs. Chavez</a>

Email Mrs. Chavez

Opening Links in a New Window

If you want a link to open in a new window or tab, you can use the target attribute on the opening <a> tag.

The value of this attribute should be _blank

CodeBrowser

<a href=“http://www.youtube.com” target=“_blank”>You Tube</a>

(opens in new window)

You Tube (opens in new window)

Linking to a Specific Part of the Same PageAt the top of a long page, you may want to add links to

sections on the bottom of your page

You may also want to add a link from part way down the page to back up to the top to save users from scrolling all the way up

Before you can link to a specific part of the page, you need to identify the points on the page that you will link to

To identify points, you must use the id attribute. This can be used on every HTML element.

To link to an element with an id attribute, use the <a> element again, but the value of the href attribute starts with # followed by the value of the id attribute you want to link to.

Code

Browser<h1 id=“top”>Classes I Teach</h1>

<a href=“#math”>Math</a><br /><a href=“#science”>Science</a><br /><a href=“#coding”>Coding</a><br /><br />

<h2 id=“math”>Math</h2><p>8^th grade common core standards at Los Nietos Middle School</p>

<h2 id=“science”>Science</h2><p>8^th grade California science standards at Los Nietos Middle School

<h2 id=“coding”>Coding</h2><p>Introduction to coding with HTML, Minecraft, and Bootstrap</p>

<p><a href=“#top”>Top</a></p>

Classes I TeachMathScienceCoding

Math8th grade common core standards at Los Nietos Middle School

Science8th grade California science standards at Los Nietos Middle School

CodingIntroduction to coding with HTML, Minecraft, and Bootstrap

Top

Exit Ticket