SlideShare une entreprise Scribd logo
1  sur  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>

Contenu connexe

Tendances (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]
 

En vedette

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
 

En vedette (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
 

Similaire à 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
 

Similaire à 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
 

Plus de Olivia Moran

Plus de 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
 

Dernier

Gardella_PRCampaignConclusion Pitch Letter
Gardella_PRCampaignConclusion Pitch LetterGardella_PRCampaignConclusion Pitch Letter
Gardella_PRCampaignConclusion Pitch Letter
MateoGardella
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
 
An Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdfAn Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdf
SanaAli374401
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
PECB
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
heathfieldcps1
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 

Dernier (20)

Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
Gardella_PRCampaignConclusion Pitch Letter
Gardella_PRCampaignConclusion Pitch LetterGardella_PRCampaignConclusion Pitch Letter
Gardella_PRCampaignConclusion Pitch Letter
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
Advance Mobile Application Development class 07
Advance Mobile Application Development class 07Advance Mobile Application Development class 07
Advance Mobile Application Development class 07
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
An Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdfAn Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdf
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 

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>