SlideShare une entreprise Scribd logo
1  sur  24
HYPERTEXT MARKUP LANGUAGE WEB ENGINEERING LAB-3
Overview Working with links
Using the ANCHOR tag The anchor element <a> is used to create links. <a  href=“url” title=“text”> description </a>
External Link  <a href=“http://www.yahoo.com”> Yahoo! </a>  ,[object Object]
When linking to an external document, it is essential to provide http:// otherwise the link will not work.,[object Object]
Observe the output
Observe the output Did you notice that there is a space after heading but not after the links?
Types of HTML elements Inline elements: have no line breaks associated with the element and flow horizontally using a soft line break when reaching the edge of its parent element.	 Block-level elements: place a line break before and after the element. Such elements stack vertically on top of each other.
Understanding paths 9 prepared by: Meer SadafNaeem ,[object Object],[object Object]
Absolute path specifies a file’s precise location within a computer’s entire folder structure. course C:/course/bcit/class1/eng.html se bcit index.html class1 list.html intro.html chem.html math.html eng.html
Relative path specifies a file’s location in relation to the location of the current document. course se bcit index.html class1 list.html intro.html chem.html math.html eng.html
If the file is in same folder as the current document, you do not specify the folder name.  contact.html course se bcit index.html class1 list.html contact.html intro.html eng.html chem.html math.html
If the file is in a subfolder of the current document, include the name of the subfolder followed by the file name. class1/math.html course se bcit index.html class1 list.html contact.html intro.html eng.html chem.html math.html
To go one level up the folder tree, start the relative path with a double period (..) & then provide the name of the file ../index.html course se bcit index.html class1 list.html contact.html intro.html eng.html chem.html math.html
To specify the same folder on same level (sibling folder), move up the folder tree using double period (..) & then down the tree using the name of the sibling folder. ../se/list.html course se bcit index.html class1 list.html contact.html intro.html eng.html chem.html math.html
Internal Link  <a href=“file.html”> Go to next page</a>  ,[object Object],[object Object]
Labeling sections with the name attribute  <a name=“top”> Welcome to NED</a>  ,[object Object]
Once you have named a location in the document, you can go to that location taking a normal link tag & adding a number sign (#) & the name assigned to the URL.<a href=“#top”> go to top of the page</a>
Creating titles for your links  <a href=“http://www.yahoo.com”  title=“Yahoo website”> Yahoo! </a>  ,[object Object]
Browsers may choose different methods of showing the advisory title attribute, such as displaying the title in a tool tip or balloon help.,[object Object]
To return the previous page, one has to click their browser’s Back button.
target attribute indicates the name of window where you would like the linked page to appear.,[object Object],[object Object]
The old window is located behind the new window, & the old page that contained the link will still be visible, if the browser does not take up the full screen. If a browser does take up the full screen, then the only way to see the old window is for the user to switch windows & go back to old page.,[object Object]
When someone clicks on this type of anchored link, their default email program initiates an email message to the linked address.

Contenu connexe

Tendances

Hyperlinks in HTML
Hyperlinks in HTMLHyperlinks in HTML
Hyperlinks in HTML
Aarti P
 

Tendances (20)

Css types internal, external and inline (1)
Css types internal, external and inline (1)Css types internal, external and inline (1)
Css types internal, external and inline (1)
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Html ppt
Html pptHtml ppt
Html ppt
 
Html frames
Html framesHtml frames
Html frames
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
 
Css position
Css positionCss position
Css position
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
 
Html images syntax
Html images syntaxHtml images syntax
Html images syntax
 
Hyperlinks in HTML
Hyperlinks in HTMLHyperlinks in HTML
Hyperlinks in HTML
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
Learn html Basics
Learn html BasicsLearn html Basics
Learn html Basics
 
Html presentation
Html presentationHtml presentation
Html presentation
 
CSS
CSSCSS
CSS
 
Html
HtmlHtml
Html
 
Web Page Designing Using HTML
Web Page Designing Using HTMLWeb Page Designing Using HTML
Web Page Designing Using HTML
 
html-table
html-tablehtml-table
html-table
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 

En vedette

Client-Server Hybrid Applications with Vaadin
Client-Server Hybrid Applications with VaadinClient-Server Hybrid Applications with Vaadin
Client-Server Hybrid Applications with Vaadin
Artur-vaadin
 
Designing the expert system
Designing the expert systemDesigning the expert system
Designing the expert system
asimnawaz54
 

En vedette (20)

LINKING IN HTML
LINKING IN HTMLLINKING IN HTML
LINKING IN HTML
 
Links - IntraPage
Links - IntraPageLinks - IntraPage
Links - IntraPage
 
HTML
HTMLHTML
HTML
 
Html links
Html linksHtml links
Html links
 
Working with HTML Lists
Working with HTML ListsWorking with HTML Lists
Working with HTML Lists
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
Powerful Link Building Strategies that Work
Powerful Link Building Strategies that WorkPowerful Link Building Strategies that Work
Powerful Link Building Strategies that Work
 
Html hyperlinks
Html hyperlinksHtml hyperlinks
Html hyperlinks
 
HTML Tags
HTML TagsHTML Tags
HTML Tags
 
The Semantic Web #4 - RDF (1)
The Semantic Web #4 - RDF (1)The Semantic Web #4 - RDF (1)
The Semantic Web #4 - RDF (1)
 
XML and XML Applications - Lecture 04 - Web Information Systems (WE-DINF-11912)
XML and XML Applications - Lecture 04 - Web Information Systems (WE-DINF-11912)XML and XML Applications - Lecture 04 - Web Information Systems (WE-DINF-11912)
XML and XML Applications - Lecture 04 - Web Information Systems (WE-DINF-11912)
 
The Role Of Links In SEO
The Role Of Links In SEOThe Role Of Links In SEO
The Role Of Links In SEO
 
HTML Link - Image - Comments
HTML  Link - Image - CommentsHTML  Link - Image - Comments
HTML Link - Image - Comments
 
HTML Basic Tags
HTML Basic Tags HTML Basic Tags
HTML Basic Tags
 
Client-Server Hybrid Applications with Vaadin
Client-Server Hybrid Applications with VaadinClient-Server Hybrid Applications with Vaadin
Client-Server Hybrid Applications with Vaadin
 
INTRODUCTION TO HTML
INTRODUCTION TO HTMLINTRODUCTION TO HTML
INTRODUCTION TO HTML
 
Anchor tag HTML Presentation
Anchor tag HTML PresentationAnchor tag HTML Presentation
Anchor tag HTML Presentation
 
Html Frames
Html FramesHtml Frames
Html Frames
 
WebKit and GStreamer
WebKit and GStreamerWebKit and GStreamer
WebKit and GStreamer
 
Designing the expert system
Designing the expert systemDesigning the expert system
Designing the expert system
 

Similaire à Links in Html

Introduction to linking
Introduction to linkingIntroduction to linking
Introduction to linking
Shehzad Yaqoob
 
1.3 creating links
1.3 creating links1.3 creating links
1.3 creating links
Bulldogs83
 
1.3 creating links
1.3 creating links1.3 creating links
1.3 creating links
Bulldogs83
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML Basics
Shawn Calvert
 
Hypertext presentation
Hypertext presentationHypertext presentation
Hypertext presentation
Iftikhar Alam
 
Xhtml Part2
Xhtml Part2Xhtml Part2
Xhtml Part2
nleesite
 
Xhtml Part1
Xhtml Part1Xhtml Part1
Xhtml Part1
nleesite
 

Similaire à Links in Html (20)

Introduction to linking
Introduction to linkingIntroduction to linking
Introduction to linking
 
1.3 creating links
1.3 creating links1.3 creating links
1.3 creating links
 
1.3 creating links
1.3 creating links1.3 creating links
1.3 creating links
 
Html links
Html linksHtml links
Html links
 
HTML5 - create hyperlinks and anchors
HTML5 - create hyperlinks and anchorsHTML5 - create hyperlinks and anchors
HTML5 - create hyperlinks and anchors
 
M02 un06 p01
M02 un06 p01M02 un06 p01
M02 un06 p01
 
Week 2-intro-html
Week 2-intro-htmlWeek 2-intro-html
Week 2-intro-html
 
HTML Foundations, pt 2
HTML Foundations, pt 2HTML Foundations, pt 2
HTML Foundations, pt 2
 
Advanced dreamweaver
Advanced dreamweaverAdvanced dreamweaver
Advanced dreamweaver
 
Css advanced – session 5
Css advanced – session 5Css advanced – session 5
Css advanced – session 5
 
Ch 6: Links
Ch 6: LinksCh 6: Links
Ch 6: Links
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML Basics
 
Hypertext presentation
Hypertext presentationHypertext presentation
Hypertext presentation
 
htmllinks-191023021435.pptxaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
htmllinks-191023021435.pptxaaaaaaaaaaaaaaaaaaaaaaaaaaaaahtmllinks-191023021435.pptxaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
htmllinks-191023021435.pptxaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 
HTML Lists & Llinks
HTML Lists & LlinksHTML Lists & Llinks
HTML Lists & Llinks
 
Xhtml
XhtmlXhtml
Xhtml
 
Just Enough HTML for Fatwire
Just Enough HTML for FatwireJust Enough HTML for Fatwire
Just Enough HTML for Fatwire
 
Xhtml Part2
Xhtml Part2Xhtml Part2
Xhtml Part2
 
Basic HTML Tutorial For Beginners
Basic HTML Tutorial For BeginnersBasic HTML Tutorial For Beginners
Basic HTML Tutorial For Beginners
 
Xhtml Part1
Xhtml Part1Xhtml Part1
Xhtml Part1
 

Dernier

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
 

Dernier (20)

SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
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
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
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
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
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
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
 
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.
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
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
 
Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)
 
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
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 

Links in Html

  • 1. HYPERTEXT MARKUP LANGUAGE WEB ENGINEERING LAB-3
  • 3. Using the ANCHOR tag The anchor element <a> is used to create links. <a href=“url” title=“text”> description </a>
  • 4.
  • 5.
  • 7. Observe the output Did you notice that there is a space after heading but not after the links?
  • 8. Types of HTML elements Inline elements: have no line breaks associated with the element and flow horizontally using a soft line break when reaching the edge of its parent element. Block-level elements: place a line break before and after the element. Such elements stack vertically on top of each other.
  • 9.
  • 10. Absolute path specifies a file’s precise location within a computer’s entire folder structure. course C:/course/bcit/class1/eng.html se bcit index.html class1 list.html intro.html chem.html math.html eng.html
  • 11. Relative path specifies a file’s location in relation to the location of the current document. course se bcit index.html class1 list.html intro.html chem.html math.html eng.html
  • 12. If the file is in same folder as the current document, you do not specify the folder name. contact.html course se bcit index.html class1 list.html contact.html intro.html eng.html chem.html math.html
  • 13. If the file is in a subfolder of the current document, include the name of the subfolder followed by the file name. class1/math.html course se bcit index.html class1 list.html contact.html intro.html eng.html chem.html math.html
  • 14. To go one level up the folder tree, start the relative path with a double period (..) & then provide the name of the file ../index.html course se bcit index.html class1 list.html contact.html intro.html eng.html chem.html math.html
  • 15. To specify the same folder on same level (sibling folder), move up the folder tree using double period (..) & then down the tree using the name of the sibling folder. ../se/list.html course se bcit index.html class1 list.html contact.html intro.html eng.html chem.html math.html
  • 16.
  • 17.
  • 18. Once you have named a location in the document, you can go to that location taking a normal link tag & adding a number sign (#) & the name assigned to the URL.<a href=“#top”> go to top of the page</a>
  • 19.
  • 20.
  • 21. To return the previous page, one has to click their browser’s Back button.
  • 22.
  • 23.
  • 24. When someone clicks on this type of anchored link, their default email program initiates an email message to the linked address.

Notes de l'éditeur

  1. Always try to use relative paths for your links. By doing so, even if you move your document or files to another computer, the link will still work.
  2. Always try to use relative paths for your links. By doing so, even if you move your document or files to another computer, the link will still work.
  3. Always try to use relative paths for your links. By doing so, even if you move your document or files to another computer, the link will still work.
  4. Always try to use relative paths for your links. By doing so, even if you move your document or files to another computer, the link will still work.
  5. Always try to use relative paths for your links. By doing so, even if you move your document or files to another computer, the link will still work.
  6. Always try to use relative paths for your links. By doing so, even if you move your document or files to another computer, the link will still work.
  7. Always try to use relative paths for your links. By doing so, even if you move your document or files to another computer, the link will still work.
  8. Always try to use relative paths for your links. By doing so, even if you move your document or files to another computer, the link will still work.