Scribd
Upload
6 views18 pages

2.3 HTML Attributes - Anchor Tags 21-22

Uploaded by

1000201
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views18 pages

2.3 HTML Attributes - Anchor Tags 21-22

Uploaded by

1000201
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

Do Now

Computer

1. Open popcode in Google Classroom


(don’t forget to login)
2. Write the code that creates a group of text
with 2 different sized headers, some basic
text, and a list!
Coders will...
create HTML elements with attributes to add links to their
pages.

Vocabulary: attributes, href, anchor tag <a>


Direct Teach

➔ What do you see on


this page?
➔ What HTML
elements have you
learned how to
write?
➔ What is on the page
that you haven't
learned how to add
yet?
Direct Teach

Today we're going to


learn how to create links
to other pages using
anchor tags!

Links allow us to
navigate or move around
on the web. Sometimes
we call that web surfing!
Anchor Tags

An anchor tag <a> allows us to move around on the web.

You can use anchor tags to jump around on a web page, a


website, to link to files on your computer, and to create links to
other websites.

The internet is a series of interconnected links!


Example: Bacon Egg and Cheese

Direct Teach
Turn and Talk

What are some


clues that
something is a
link on the web?
Lightning Question

What kind of specific information can we find out


about this person from her driver’s license?

What is
characteristic
about this person?
Direct Teach

➔ Attributes provide additional information about an


element
Just like ➔ Attributes are always included in the opening tag
describing ➔ All HTML elements can have attributes
someone, you can ➔ Attributes usually come in name/value pairs like:
name="value"
add specificity to
tags using HTML
Attributes
href Attribute
Anchor tags have an href attribute.
This tells the browser where the link lives on the internet.

<a href ="https://CodeNation.org/"> Code Nation </a>

closing tag
attribute

the text that the user


will see and click on

Direct Teach
href Attribute
Think of the href attribute like the “To:” section on an envelope. The value of this
attribute explains where to go, just like an address.

<a href="https://CodeNation.org/">Code Nation</a>

href =
To:
123 Main Street, Apt 2A "https://CodeNation.org/"
New York, NY

Direct Teach
Lightning Question

<a href="https://www.shakeshack.com">Shake Shack</a>


What text will the user
see on the webpage?
(it'll usually be in blue)

Where will the user go


when they click the blue
text?
Lightning Question

Let’s look at how


it may appear on a
website. What is
the content? What
is the attribute?
Guided Practice

Let’s add a link to


a website about
our favorite movie
to this page.
Independent Practice

Open this popcode. Follow the


instructions on the left!

Make sure you're logged into Popcode!


Submit
Give it a title.
1 Create and copy the
Snapshot.

Open up the
2 assignment in
Google
Did you submit Classroom

your
Assignment? 3 Select ADD “Link” and
4 Turn it in and you’ll
paste in your Snapshot. see this when you’re
done.
Closing

Why are
attributes
important? Why Coders will …
is an attribute in create HTML elements with attributes to
an anchor tag add links to their pages.
important?
Exit Ticket

a. <a href="https://www.google.com"></a>Google It!

Question 1: Which code b. <a href="https://www.google.com">Google it!</a>


creates a link to c. <a="https://www.google.com">Google it!</a>
https://www.google.com/
d. <a> “https://www.google.com">Google it!</a>
when the user clicks on
the words "Google it!"
Exit Ticket

<a href=”https://netflix.com”> Time to watch a show! </a>

Question 2: What text


a. https://netflix.com
would the user
actually see displayed b. Time to watch a show!
on the page and have c. <a href= “https://netflix.com”>
to click on to get to Time to watch a show! </a>
the web destination? d. <a> href=”https://netflix.com” </a>

You might also like