SlideShare ist ein Scribd-Unternehmen logo
1 von 11
<
        < HTML
        Lesson 3: Linking It All Together

By Olivia Moran




[Codo Dojo – HTML Group Sligo, Ireland]
liviamoran.me
www.oliviamoran.me
http://www.slideshare.net/oliviamoran
Links
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.
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
External Links
<html><body>

<p><a href="http://www.rte.ie/">RTE
News</a> This is a link to the RTE News
Page.</p>

<p><a
href="http://www.w3.org/">W3C</a> This
is a link to a website on the World Wide
Web.</p>

</body></html>
Target Links

The target attribute specifies where to open the
linked document. The example below will open
the linked document in a new browser window or
a new tab:


     <a href="http://www.rte.ie/">
 target="_blank">Visit W3Schools!</a>
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 chapter
explains 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>
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 words
should be replaced by %20 to ensure that the
browser will display the text properly.
</p>

</body></html>
HTML Game (index.html)
<html><body>

Your name is <b><i>Codo Dojo</i></b>

You are standing in front of a castle
surrounded 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>
HTML Game (room1.html)
<html><body>

you are in the castle <br/>
<img src="castle.jpg">


</body></html>
HTML Game (room2.html)
<html><body>

You feel off a cliff
<img src="cliff.jpg">

</body></html>

Weitere ähnliche Inhalte

Was ist angesagt? (12)

Sample html basic projects
Sample html basic projectsSample html basic projects
Sample html basic projects
 
Formatting your web page
Formatting your web pageFormatting your web page
Formatting your web page
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
 
Chrome OS user guide
Chrome OS user guideChrome OS user guide
Chrome OS user guide
 
Gmail in education means organization november 2011
Gmail in education means organization november 2011Gmail in education means organization november 2011
Gmail in education means organization november 2011
 
WDD
WDDWDD
WDD
 
HTML5 - create hyperlinks and anchors
HTML5 - create hyperlinks and anchorsHTML5 - create hyperlinks and anchors
HTML5 - create hyperlinks and anchors
 
Basic html tutorial
Basic html tutorialBasic html tutorial
Basic html tutorial
 
Unit 2.6
Unit 2.6Unit 2.6
Unit 2.6
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginners
 
SchoolCenter Training
SchoolCenter TrainingSchoolCenter Training
SchoolCenter Training
 
#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]
 

Andere mochten auch

Top Tips For Creating A Great CV
Top Tips For Creating A Great CVTop Tips For Creating A Great CV
Top Tips For Creating A Great CV
Olivia Moran
 
Feature Extraction
Feature ExtractionFeature Extraction
Feature Extraction
skylian
 
Image feature extraction
Image feature extractionImage feature extraction
Image feature extraction
Rushin Shah
 

Andere mochten auch (9)

Brainwave Feature Extraction, Classification & Prediction
Brainwave Feature Extraction, Classification & PredictionBrainwave Feature Extraction, Classification & Prediction
Brainwave Feature Extraction, Classification & Prediction
 
Olivia Moran, my linked in recommendations
Olivia Moran, my linked in recommendationsOlivia Moran, my linked in recommendations
Olivia Moran, my linked in recommendations
 
Top Tips For Creating A Great CV
Top Tips For Creating A Great CVTop Tips For Creating A Great CV
Top Tips For Creating A Great CV
 
Low level feature extraction - chapter 4
Low level feature extraction - chapter 4Low level feature extraction - chapter 4
Low level feature extraction - chapter 4
 
Feature Extraction
Feature ExtractionFeature Extraction
Feature Extraction
 
Basic Html Tags Tutorial For Kids
Basic Html Tags Tutorial For KidsBasic Html Tags Tutorial For Kids
Basic Html Tags Tutorial For Kids
 
Feature Extraction
Feature ExtractionFeature Extraction
Feature Extraction
 
Introduction to EEG: Instrument and Acquisition
Introduction to EEG: Instrument and AcquisitionIntroduction to EEG: Instrument and Acquisition
Introduction to EEG: Instrument and Acquisition
 
Image feature extraction
Image feature extractionImage feature extraction
Image feature extraction
 

Ähnlich wie Lesson 3: Linking It All Together

HTML by Telerik Akademy
HTML by Telerik AkademyHTML by Telerik Akademy
HTML by Telerik Akademy
Ognyan Penkov
 
Basics tags for HTML
Basics tags for HTMLBasics tags for HTML
Basics tags for HTML
vidyamittal
 
Webware - from Document to Operating System
Webware - from Document to Operating System Webware - from Document to Operating System
Webware - from Document to Operating System
Channy Yun
 

Ähnlich wie Lesson 3: Linking It All Together (20)

Introduction to WEB HTML, CSS
Introduction to WEB HTML, CSSIntroduction to WEB HTML, CSS
Introduction to WEB HTML, CSS
 
HTML by Telerik Akademy
HTML by Telerik AkademyHTML by Telerik Akademy
HTML by Telerik Akademy
 
Html hyperlinks
Html hyperlinksHtml hyperlinks
Html hyperlinks
 
Just Enough HTML for Fatwire
Just Enough HTML for FatwireJust Enough HTML for Fatwire
Just Enough HTML for Fatwire
 
Khoa dang (kay)
Khoa dang (kay)Khoa dang (kay)
Khoa dang (kay)
 
HyperTextMarkupLanguage.ppt
HyperTextMarkupLanguage.pptHyperTextMarkupLanguage.ppt
HyperTextMarkupLanguage.ppt
 
Html coding
Html codingHtml coding
Html coding
 
LINKING IN HTML
LINKING IN HTMLLINKING IN HTML
LINKING IN HTML
 
Web development basics
Web development basicsWeb development basics
Web development basics
 
If you know nothing about HTML, this is where you can start !!
If you know nothing about HTML, this is where you can start !!If you know nothing about HTML, this is where you can start !!
If you know nothing about HTML, this is where you can start !!
 
Industrial training report
Industrial training report Industrial training report
Industrial training report
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
Lab#2 overview of html
Lab#2 overview of htmlLab#2 overview of html
Lab#2 overview of html
 
Html for beginners part II
Html for beginners part IIHtml for beginners part II
Html for beginners part II
 
Basics tags for HTML
Basics tags for HTMLBasics tags for HTML
Basics tags for HTML
 
Web Design-III IT.ppt
Web Design-III IT.pptWeb Design-III IT.ppt
Web Design-III IT.ppt
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
 
Webware - from Document to Operating System
Webware - from Document to Operating System Webware - from Document to Operating System
Webware - from Document to Operating System
 
Html2
Html2Html2
Html2
 
Html5
Html5Html5
Html5
 

Mehr von Olivia Moran

Mehr von Olivia Moran (15)

Lesson 2: Getting To Know HTML
Lesson 2: Getting To Know HTMLLesson 2: Getting To Know HTML
Lesson 2: Getting To Know HTML
 
Lesson 1: Introduction to HTML
Lesson 1: Introduction to HTMLLesson 1: Introduction to HTML
Lesson 1: Introduction to HTML
 
E-College
E-CollegeE-College
E-College
 
Social Media Strategy
Social Media StrategySocial Media Strategy
Social Media Strategy
 
E-Learning @ The Library
E-Learning @ The LibraryE-Learning @ The Library
E-Learning @ The Library
 
Blended Learning
Blended LearningBlended Learning
Blended Learning
 
What is Moodle
What is MoodleWhat is Moodle
What is Moodle
 
The E-Tutor: A Jack Of All Trades
The E-Tutor: A Jack Of All TradesThe E-Tutor: A Jack Of All Trades
The E-Tutor: A Jack Of All Trades
 
Technology Infrastructure For The Pervasive Vision, Does It Exist Yet?
Technology Infrastructure For The Pervasive Vision, Does It Exist Yet?Technology Infrastructure For The Pervasive Vision, Does It Exist Yet?
Technology Infrastructure For The Pervasive Vision, Does It Exist Yet?
 
Biometrics Iris Scanning: A Literature Review
Biometrics Iris Scanning: A Literature ReviewBiometrics Iris Scanning: A Literature Review
Biometrics Iris Scanning: A Literature Review
 
Self Organisation: Inspiring Neural Network & IT Design
Self Organisation: Inspiring Neural Network & IT DesignSelf Organisation: Inspiring Neural Network & IT Design
Self Organisation: Inspiring Neural Network & IT Design
 
Project Management: A Critical Examination of the PPARS Project
Project Management: A Critical Examination of the PPARS ProjectProject Management: A Critical Examination of the PPARS Project
Project Management: A Critical Examination of the PPARS Project
 
Knowledge Management: A Literature Review
Knowledge Management: A Literature ReviewKnowledge Management: A Literature Review
Knowledge Management: A Literature Review
 
Complexity Versus Comprehendability: Simplifying Wireless Security
Complexity Versus Comprehendability: Simplifying Wireless SecurityComplexity Versus Comprehendability: Simplifying Wireless Security
Complexity Versus Comprehendability: Simplifying Wireless Security
 
Baseline Brainwave Biometrics
Baseline Brainwave BiometricsBaseline Brainwave Biometrics
Baseline Brainwave Biometrics
 

Kürzlich hochgeladen

Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 

Kürzlich hochgeladen (20)

Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Plant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxPlant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptx
 
How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
 

Lesson 3: Linking It All Together

  • 1. < < HTML Lesson 3: Linking It All Together By Olivia Moran [Codo Dojo – HTML Group Sligo, Ireland] liviamoran.me www.oliviamoran.me http://www.slideshare.net/oliviamoran
  • 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. 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. External Links <html><body> <p><a href="http://www.rte.ie/">RTE News</a> This is a link to the RTE News Page.</p> <p><a href="http://www.w3.org/">W3C</a> This is a link to a website on the World Wide Web.</p> </body></html>
  • 6. Target Links The target attribute specifies where to open the linked document. The example below will open the linked document in a new browser window or a new tab: <a href="http://www.rte.ie/"> target="_blank">Visit W3Schools!</a>
  • 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 chapter explains 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. 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 words should be replaced by %20 to ensure that the browser will display the text properly. </p> </body></html>
  • 9. HTML Game (index.html) <html><body> Your name is <b><i>Codo Dojo</i></b> You are standing in front of a castle surrounded 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. HTML Game (room1.html) <html><body> you are in the castle <br/> <img src="castle.jpg"> </body></html>
  • 11. HTML Game (room2.html) <html><body> You feel off a cliff <img src="cliff.jpg"> </body></html>