Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Lesson 3: Linking It All Together


Published on

This presentation

Published in: Education
  • Be the first to comment

  • Be the first to like this

Lesson 3: Linking It All Together

  1. 1. < < HTML Lesson 3: Linking It All TogetherBy Olivia Moran[Codo Dojo – HTML Group Sligo, Ireland]liviamoran.mewww.oliviamoran.me
  2. 2. Links
  3. 3. A tag What is it?• The HTML <a> tag defines a hyperlink.• A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.• When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
  4. 4. A tag What is it?• By default, links will appear as follows in all browsers: An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red
  5. 5. External Links<html><body><p><a href="">RTENews</a> This is a link to the RTE NewsPage.</p><p><ahref="">W3C</a> Thisis a link to a website on the World WideWeb.</p></body></html>
  6. 6. Target LinksThe target attribute specifies where to open thelinked document. The example below will openthe linked document in a new browser window ora new tab: <a href=""> target="_blank">Visit W3Schools!</a>
  7. 7. Linking To Parts Of A Page<html><body><p><a href="#C4">See also Chapter 4.</a></p><h2>Chapter 1</h2><p>This chapter explains ba bla bla</p><h2>Chapter 2</h2><p>This chapter explains ba bla bla</p><h2>Chapter 3</h2><p>This chapter explains ba bla bla</p><h2><a id="C4">Chapter 4</a></h2><p>This chapterexplains ba bla bla</p><h2>Chapter 5</h2><p>This chapter explains ba bla bla</p><h2>Chapter 6</h2><p>This chapter explains ba bla bla</p></body></html>
  8. 8. Email Link<html><body><p>This is an email link:<a href="mailto:someone@example?Subject=Hello%20again"> Send Mail</a></p><p><b>Note:</b> Spaces between wordsshould be replaced by %20 to ensure that thebrowser will display the text properly.</p></body></html>
  9. 9. HTML Game (index.html)<html><body>Your name is <b><i>Codo Dojo</i></b>You are standing in front of a castlesurrounded by a <b>shark filled</b> moat.You can <i>enter</i> the castle or<i>jump</i> in the moat.<p><a href ="room1.html">Enter</a> or<a href="room2.html"> Jump</a></nowiki></p></body></html>
  10. 10. HTML Game (room1.html)<html><body>you are in the castle <br/><img src="castle.jpg"></body></html>
  11. 11. HTML Game (room2.html)<html><body>You feel off a cliff<img src="cliff.jpg"></body></html>