Website Development Course – Anchor Element

[ Music ]>>Welcome to our class. In this class, we will learn
about the anchor element, or the “a” element or tag. The anchor element, or “a”
element, is used to link pages. If I were to click on this
link, that will take me to a page for HTML Lists. I will access that page in
the same browser window. I can click on this link
that will take me back to the anchor page and
that page will load in the same browser window. So for a website, you want
the links to be launched in the same browser
window or tab because they are all
related to the same website. If we look at the syntax
of the “a” element, we will have an opening
and a closing “a” tag. The “href” attribute
indicates the name of the file or the destination of that link
when that link is clicked on. The phrasing or words in
between the opening and closing “a” tag is the hyperlink. That is the phrase that
will be clicked on, and when that is clicked
on, it will take us to this destination,
which is an HTML web page. The title attribute is for
purposes of accessibility. It gives screen readers
additional information about the nature of that link. So if I were to put the
cursor over the hyperlink in the browser, you can see
there is a little tool tip which gives me the value
of the title attribute. There might be times when you
do not want the destination of a link to open
in the same window. You might want it to open in
a new window or a new tab. When you are linking
to another resource that takes the user away
from your own website, you probably want to do what
is called “target” that link to open into a new
tab or window. We use the target attribute,
there are certain values that that attribute can take. The “underscore blank” value is
a reserved word and it will open up a new browser tab
or window every time. So here I have two links that
are going to external websites and they are both targeted
into “underscore blank.” When I click on this link,
when I click on this link, it will open into a new tab and now I can go
back to my web page. When I click on this link, again
it will open into a new tab. So there might be times when you
want to open several new tabs. However, should you wish to
open them in the same window, all you have to do is to
give it the same name, and I will use the
same name “new” and this is just a user-defined
name for the new window. Now when I click on
this external link, it opens in a tab, I
go back to my web page, I click on this external link,
it opens in the same tab. Notice I have some history. If you were to be linking
to a group of resources, you might want to make them open in the same window using
the target attribute, which would be more
user-friendly to your audience. We have the ability to
send email from a hyperlink and we do this by using
the “mailto” protocol. This is an Internet protocol
just the same as “http” and it tells the browser to launch the default
mail application. This was very useful in
the early days of the web, before we had web-based email. Some browsers know how to work with web-based email
and some do not. However, this works very
well on a mobile device. So if I were to click
on this link, you can see that
nothing is happening. That might not be
a very useful thing to do in a desktop website. HTML5 has given us the “tel”
prefix and the “sms” prefix, so we can use the “tel” prefix to have our mobile
device dial a phone number when we click a hyperlink
in our mobile phone. “Sms,” which stands for “short
message service,” allows us to launch the text messaging
service in a mobile device when we click on a hyperlink. Now, this will do
nothing on the desktop. It was designed to be
used on a mobile device because these applications
are built into the phone. Another thing you might
commonly see in websites, especially websites that scroll
down for quite some distance, you might see a link that says
something like “top of page,” and if I click on that
link, I can go back to the top of the page. So we have the ability to
use our anchor element, or our “a” element to link to
sections of the same document. You might hear this referred
to as a “named anchor” or a “fragment identifier.” How that works is
the value of our “href” attribute is an
identifier, and the name of the identifier is referenced
by the pound, or the hashtag. So somewhere in my document I
have an identifier with an ID that says “ID equals top,”
and if I scroll up, indeed, in my H1 element, there
is “ID equals top.” So I am able to click on
this hyperlink inside this “a” element, and rather than
loading a new page or going to a different website, I can go
to a location in the same page, and this location
will be wherever that matching ID value exists.

Add a Comment

Your email address will not be published. Required fields are marked *