What is the <a> tag? <ul><li>It defines a hyperlink, linking one page to another. </li></ul><ul><li>To create this link, t...
What will your links look like? <ul><li>An unvisited link will be underlined and blue, looking like this: </li></ul><ul><l...
<ul><li>An active link will be underlined and will be red, looking like this: </li></ul><ul><li>These three link styles wi...
HTML 4.01 vs. HTML5 <ul><li>The <a> tag in HTML 4.01 was used as either a hyperlink or an anchor, a way to pinpoint reader...
How to create your hyperlink <ul><li>You MUST make sure you have the  href  attribute after your “a”. </li></ul><ul><ul><l...
<ul><li>After the href attribute, an “=” sign needs to go into place. </li></ul><ul><ul><li><a href = ”http://www.yahoo.co...
<ul><li>DON'T forget to put  http://  before your destination. </li></ul><ul><ul><li><a href=” http:// www.yahoo.com”></a>...
<ul><li>Now, you add the text that will be seen on your page as the link to your destination, like so: </li></ul><ul><ul><...
Placement in your code <ul><li>In your code, the <a> tag will be put inside your body. For example: </li></ul><ul><li><!DO...
What it will look like and other attributes <ul><li>On your web page, this is what would be seen: </li></ul><ul><li>It wil...
Upcoming SlideShare
Loading in...5
×

Cecelia_Salas_ATag_Presentation

756

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
756
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Cecelia_Salas_ATag_Presentation

  1. 1. What is the <a> tag? <ul><li>It defines a hyperlink, linking one page to another. </li></ul><ul><li>To create this link, the attribute href needs to follow the “a” tag. </li></ul><ul><li>The href indicates the destination of the link. It is the URL. </li></ul>
  2. 2. What will your links look like? <ul><li>An unvisited link will be underlined and blue, looking like this: </li></ul><ul><li>A visited link will also be underlined and will be purple, looking like this: </li></ul>Yahoo! Yahoo!
  3. 3. <ul><li>An active link will be underlined and will be red, looking like this: </li></ul><ul><li>These three link styles will be the same in all browsers by default. </li></ul><ul><li>The styles can be changed with CSS, like color. </li></ul>Yahoo!
  4. 4. HTML 4.01 vs. HTML5 <ul><li>The <a> tag in HTML 4.01 was used as either a hyperlink or an anchor, a way to pinpoint readers to a specific part of a web page, like a special shortcut. </li></ul><ul><li>In HTML5, it will always be a hyperlink. </li></ul>
  5. 5. How to create your hyperlink <ul><li>You MUST make sure you have the href attribute after your “a”. </li></ul><ul><ul><li><a href =”http://www.yahoo.com”></a> </li></ul></ul><ul><li>Make sure there is a space between the two. </li></ul><ul><ul><li>< a href =”http://www.yahoo.com”></a> </li></ul></ul>
  6. 6. <ul><li>After the href attribute, an “=” sign needs to go into place. </li></ul><ul><ul><li><a href = ”http://www.yahoo.com”></a> </li></ul></ul><ul><li>Next, you put your destination page between quotes. </li></ul><ul><ul><li><a href= ”http://www.yahoo.com” ></a> </li></ul></ul>
  7. 7. <ul><li>DON'T forget to put http:// before your destination. </li></ul><ul><ul><li><a href=” http:// www.yahoo.com”></a> </li></ul></ul><ul><li>Make sure you close your bracket and close your tag, like so: </li></ul><ul><ul><li><a href=”http://www.yahoo.com” ></a> </li></ul></ul>
  8. 8. <ul><li>Now, you add the text that will be seen on your page as the link to your destination, like so: </li></ul><ul><ul><li><a href=” http://www.yahoo.com ”> Yahoo! </a> </li></ul></ul><ul><li>It does not need to be one word. It can be a sentence if you'd like. You can use spaces in this area. </li></ul>
  9. 9. Placement in your code <ul><li>In your code, the <a> tag will be put inside your body. For example: </li></ul><ul><li><!DOCTYPE html> </li></ul><ul><li><head> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>Check out <a href=“ http://www.yahoo.com ”>Yahoo!</a> for local news. </li></ul><ul><li></body></html> </li></ul>
  10. 10. What it will look like and other attributes <ul><li>On your web page, this is what would be seen: </li></ul><ul><li>It will now be clickable, and will take you to your destination. </li></ul>Attribute Value Description charset char_encoding Not supported in HTML5 coords coordinates Not supported in HTML5 href URL Specifies URL to go to hreflang language_code Specifies language of link media media_query Specifies what media link is optimized for name section_name Not supported in HTML5 rel alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag Specifies relationship between current and linked rev text Not supported in HTML5 shape default, rect, circle, poly Not supported in HTML5 target _blank, _parent, _self, _top, framename Specifies where to open link type MIME_type Specifies the MIME type Check out Yahoo! for local news.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×