SlideShare a Scribd company logo
1 of 13
Hyperlinks
Relative Links
    Intrapage Link
    Intrasystem Link
Absolute Link
Review
Intrasystem Link

• These are hyperlinks connected to
  external references.
• Anchor Tag
                <a> </a>
• Attributes
        <a href=URL>Hypertext</a>
<a href=URL title=“link title”>Hypertext</a>
Creating Intrasystem Link
• Create a folder named Q2Practice3Surname
• Create 4 Web pages with the following
  Background Color:
            Red, Blue, Green, Yellow
• The title of each Web page is its background
  color.
• Save as Q2Red.htm, Q2Blue.htm, Q2Green.htm,
  and Q2Yellow.htm respectively.
Creating Intrasystem Link
• Open a new notepad, type all the basic markup
  tags. The title of this Web page is “Home Page”.
• Save the page as Q2Practice4.htm
• Create hypertexts which are connected to the
  other four colored Web pages.
Example:
       <a href=“Q2Red.htm”>Go to Red</a>
      <a href=“Q2Blue.htm”>Go to Blue</a>
    <a href=“Q2Green.htm”>Go to Green</a>
    <a href=“Q2Yellow.htm”>Go to Yellow</a>
Changing hyperlink colors
• The colors to be used for the
  hyperlink are defined in the
  <body> tag using the following
  attributes:
• <body link=“color”>
  – The link attribute indicates the
    color of the hypertext which are
    not yet visited by the browser.
Changing hyperlink colors
• The colors to be used for the
  hyperlink are defined in the
  <body> tag using the following
  attributes:
• <body alink=“color”>
  – The alink attribute indicates the
    color of the hyperlink text while
    the link is selected.
Changing hyperlink colors
• The colors to be used for the
  hyperlink are defined in the
  <body> tag using the following
  attributes:
• <body vlink=“color”>
  – The vlink attribute indicates the
    color of the hyperlink which are
    already visited.
Example
<body link=“blue” alink=“red” vlink=“purple”>
These are the default hyperlink colors.
    Self defined hyperlink colors.
<body link=“pink” alink=“pink” vlink=“pink”>
For hyperlinks which do not change colors.
Notes: (For Files all in the same single folder)
• When creating an intrasystem link to pages,
  documents, and files on the same folder, you
  could type in the entire URL.
                     However,
• If the disc is used on other system it might
  have a different name and it will not return
  your desired link.
• Since the methods assignment are in the same
  folder, you can simply type the exact name of
  the files for the hyperlink.
                         
Notes: (For Files in different folders)
• You might decide to keep things orderly, you will create
  different folders for each of your files.
• This would require you to link from one folder to
  another. Again, the best way is to use relative links.
• For example, your Home page is in the parent folder
  and your Page1 is in another folder inside the parent
  folder, you will include the name of the folder before
  the filename, separated by a backslash ().
• Example:
<a href=“SubjectsComputer.htm”>Computer</a>
Absolute Links

• These are hyperlinks connected to
  Web sites published on the WWW.
• Anchor Tag
                <a> </a>
• Attributes
       <a href=“URL”>Hypertext</a>
Example:
<a href=“www.google.com”>Go to Google</a>
Mail to Link

• This creates a link on the Web site
  that opens an email window.
• href value
       Href=“mailto: emailaddress”
• Example
   <a href=“mailto:mspoli@yahoo.com”>
        Send email to your teacher
                   </a>

More Related Content

What's hot

Hyperlinks in HTML
Hyperlinks in HTMLHyperlinks in HTML
Hyperlinks in HTML
Aarti P
 
Introduction to xhtml
Introduction to xhtmlIntroduction to xhtml
Introduction to xhtml
Dhairya Joshi
 
ARTDM 171, Week 3: Web Basics + Group Projects
ARTDM 171, Week 3: Web Basics + Group ProjectsARTDM 171, Week 3: Web Basics + Group Projects
ARTDM 171, Week 3: Web Basics + Group Projects
Gilbert Guerrero
 

What's hot (20)

Html links
Html linksHtml links
Html links
 
Std 10 Computer Chapter 1 introduction to HTML (Part 1)
Std 10 Computer Chapter 1  introduction to HTML (Part 1)Std 10 Computer Chapter 1  introduction to HTML (Part 1)
Std 10 Computer Chapter 1 introduction to HTML (Part 1)
 
Std 10 Computer Chapter 1- Introduction to HTML - Basic Formatting Tag in HT...
Std 10 Computer  Chapter 1- Introduction to HTML - Basic Formatting Tag in HT...Std 10 Computer  Chapter 1- Introduction to HTML - Basic Formatting Tag in HT...
Std 10 Computer Chapter 1- Introduction to HTML - Basic Formatting Tag in HT...
 
Html links
Html linksHtml links
Html links
 
Hyperlinks in HTML
Hyperlinks in HTMLHyperlinks in HTML
Hyperlinks in HTML
 
Week 4 Lecture Part 2
Week 4 Lecture Part 2Week 4 Lecture Part 2
Week 4 Lecture Part 2
 
Hyperlink
HyperlinkHyperlink
Hyperlink
 
How to make a hyperlink in HTML code
How to make a hyperlink in HTML codeHow to make a hyperlink in HTML code
How to make a hyperlink in HTML code
 
Artistic Web Applications - Week3 - Part 2
Artistic Web Applications - Week3 - Part 2Artistic Web Applications - Week3 - Part 2
Artistic Web Applications - Week3 - Part 2
 
Introduction to xhtml
Introduction to xhtmlIntroduction to xhtml
Introduction to xhtml
 
HTML5 - create hyperlinks and anchors
HTML5 - create hyperlinks and anchorsHTML5 - create hyperlinks and anchors
HTML5 - create hyperlinks and anchors
 
ARTDM 171, Week 3: Web Basics + Group Projects
ARTDM 171, Week 3: Web Basics + Group ProjectsARTDM 171, Week 3: Web Basics + Group Projects
ARTDM 171, Week 3: Web Basics + Group Projects
 
Anchor tag HTML Presentation
Anchor tag HTML PresentationAnchor tag HTML Presentation
Anchor tag HTML Presentation
 
Week 4 Lecture Part 1
Week 4 Lecture Part 1Week 4 Lecture Part 1
Week 4 Lecture Part 1
 
Rest
RestRest
Rest
 
CARA MEMBUAT REFERENSI DAN SITASI PADA NASKAH
CARA MEMBUAT REFERENSI DAN SITASI PADA NASKAHCARA MEMBUAT REFERENSI DAN SITASI PADA NASKAH
CARA MEMBUAT REFERENSI DAN SITASI PADA NASKAH
 
Mendeley, Grammarly and Document Clouds for Thesis and Research Collaboration
Mendeley, Grammarly and Document Clouds for Thesis and Research CollaborationMendeley, Grammarly and Document Clouds for Thesis and Research Collaboration
Mendeley, Grammarly and Document Clouds for Thesis and Research Collaboration
 
Learn HTML at ASIT
Learn HTML at ASITLearn HTML at ASIT
Learn HTML at ASIT
 
uptu web technology unit 2 Css
uptu web technology unit 2 Cssuptu web technology unit 2 Css
uptu web technology unit 2 Css
 
Elements of html powerpoint
Elements of html powerpointElements of html powerpoint
Elements of html powerpoint
 

Similar to Links - IntraSystem and Absolute (20)

Hyperlink.85 to 86
Hyperlink.85 to 86Hyperlink.85 to 86
Hyperlink.85 to 86
 
Internet with HTML
Internet with HTMLInternet with HTML
Internet with HTML
 
HTML Lists & Llinks
HTML Lists & LlinksHTML Lists & Llinks
HTML Lists & Llinks
 
Unit 2 (html)
Unit 2  (html)Unit 2  (html)
Unit 2 (html)
 
3. tutorial html web desain
3. tutorial html web desain3. tutorial html web desain
3. tutorial html web desain
 
BASIC HTML PROGRAMMING
BASIC HTML PROGRAMMINGBASIC HTML PROGRAMMING
BASIC HTML PROGRAMMING
 
Web Design.ppt
Web Design.pptWeb Design.ppt
Web Design.ppt
 
BITM3730 9-20.pptx
BITM3730 9-20.pptxBITM3730 9-20.pptx
BITM3730 9-20.pptx
 
BITM3730 9-19.pptx
BITM3730 9-19.pptxBITM3730 9-19.pptx
BITM3730 9-19.pptx
 
Lecture1and2
Lecture1and2Lecture1and2
Lecture1and2
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Castro Chapter 6
Castro Chapter 6Castro Chapter 6
Castro Chapter 6
 
Java script and html new
Java script and html newJava script and html new
Java script and html new
 
Java script and html
Java script and htmlJava script and html
Java script and html
 
HTML_JavaScript_Malaysia_2008 (2).ppt
HTML_JavaScript_Malaysia_2008 (2).pptHTML_JavaScript_Malaysia_2008 (2).ppt
HTML_JavaScript_Malaysia_2008 (2).ppt
 
Html
HtmlHtml
Html
 
Unit 5 application layer
Unit 5 application layerUnit 5 application layer
Unit 5 application layer
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
BITM3730Week4.pptx
BITM3730Week4.pptxBITM3730Week4.pptx
BITM3730Week4.pptx
 
Introduction to linking
Introduction to linkingIntroduction to linking
Introduction to linking
 

Recently uploaded

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Recently uploaded (20)

Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 

Links - IntraSystem and Absolute

  • 1. Hyperlinks Relative Links Intrapage Link Intrasystem Link Absolute Link
  • 3. Intrasystem Link • These are hyperlinks connected to external references. • Anchor Tag <a> </a> • Attributes <a href=URL>Hypertext</a> <a href=URL title=“link title”>Hypertext</a>
  • 4. Creating Intrasystem Link • Create a folder named Q2Practice3Surname • Create 4 Web pages with the following Background Color: Red, Blue, Green, Yellow • The title of each Web page is its background color. • Save as Q2Red.htm, Q2Blue.htm, Q2Green.htm, and Q2Yellow.htm respectively.
  • 5. Creating Intrasystem Link • Open a new notepad, type all the basic markup tags. The title of this Web page is “Home Page”. • Save the page as Q2Practice4.htm • Create hypertexts which are connected to the other four colored Web pages. Example: <a href=“Q2Red.htm”>Go to Red</a> <a href=“Q2Blue.htm”>Go to Blue</a> <a href=“Q2Green.htm”>Go to Green</a> <a href=“Q2Yellow.htm”>Go to Yellow</a>
  • 6. Changing hyperlink colors • The colors to be used for the hyperlink are defined in the <body> tag using the following attributes: • <body link=“color”> – The link attribute indicates the color of the hypertext which are not yet visited by the browser.
  • 7. Changing hyperlink colors • The colors to be used for the hyperlink are defined in the <body> tag using the following attributes: • <body alink=“color”> – The alink attribute indicates the color of the hyperlink text while the link is selected.
  • 8. Changing hyperlink colors • The colors to be used for the hyperlink are defined in the <body> tag using the following attributes: • <body vlink=“color”> – The vlink attribute indicates the color of the hyperlink which are already visited.
  • 9. Example <body link=“blue” alink=“red” vlink=“purple”> These are the default hyperlink colors. Self defined hyperlink colors. <body link=“pink” alink=“pink” vlink=“pink”> For hyperlinks which do not change colors.
  • 10. Notes: (For Files all in the same single folder) • When creating an intrasystem link to pages, documents, and files on the same folder, you could type in the entire URL. However, • If the disc is used on other system it might have a different name and it will not return your desired link. • Since the methods assignment are in the same folder, you can simply type the exact name of the files for the hyperlink. 
  • 11. Notes: (For Files in different folders) • You might decide to keep things orderly, you will create different folders for each of your files. • This would require you to link from one folder to another. Again, the best way is to use relative links. • For example, your Home page is in the parent folder and your Page1 is in another folder inside the parent folder, you will include the name of the folder before the filename, separated by a backslash (). • Example: <a href=“SubjectsComputer.htm”>Computer</a>
  • 12. Absolute Links • These are hyperlinks connected to Web sites published on the WWW. • Anchor Tag <a> </a> • Attributes <a href=“URL”>Hypertext</a> Example: <a href=“www.google.com”>Go to Google</a>
  • 13. Mail to Link • This creates a link on the Web site that opens an email window. • href value Href=“mailto: emailaddress” • Example <a href=“mailto:mspoli@yahoo.com”> Send email to your teacher </a>