SlideShare una empresa de Scribd logo
1 de 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.

Más contenido relacionado

La actualidad más candente

1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
apnwebdev
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
vikasgaur31
 

La actualidad más candente (20)

Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
Html ppt
Html pptHtml ppt
Html ppt
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html n CSS
Html n CSSHtml n CSS
Html n CSS
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Bootstrap ppt
Bootstrap pptBootstrap ppt
Bootstrap ppt
 
Css box-model
Css box-modelCss box-model
Css box-model
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
Anchor tag HTML Presentation
Anchor tag HTML PresentationAnchor tag HTML Presentation
Anchor tag HTML Presentation
 
Std 10 Computer Chapter 3 Handling Images in HTML (Part 1)
Std 10 Computer Chapter 3 Handling Images in HTML (Part 1)Std 10 Computer Chapter 3 Handling Images in HTML (Part 1)
Std 10 Computer Chapter 3 Handling Images in HTML (Part 1)
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
html-table
html-tablehtml-table
html-table
 
Html
HtmlHtml
Html
 
Dhtml ppt (2)
Dhtml ppt (2)Dhtml ppt (2)
Dhtml ppt (2)
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
 
HTML
HTMLHTML
HTML
 
Advance HTML
Advance HTMLAdvance HTML
Advance HTML
 

Destacado

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
 

Destacado (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
 
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
 
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
 
Html images and html backgrounds
Html images and html backgroundsHtml images and html backgrounds
Html images and html backgrounds
 
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 RevolutionWebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
 

Similar a 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
 

Similar a 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
 

Último

Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
AnaAcapella
 
Vishram Singh - Textbook of Anatomy Upper Limb and Thorax.. Volume 1 (1).pdf
Vishram Singh - Textbook of Anatomy  Upper Limb and Thorax.. Volume 1 (1).pdfVishram Singh - Textbook of Anatomy  Upper Limb and Thorax.. Volume 1 (1).pdf
Vishram Singh - Textbook of Anatomy Upper Limb and Thorax.. Volume 1 (1).pdf
ssuserdda66b
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
KarakKing
 

Último (20)

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
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
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...
 
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
 
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
 
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
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
 
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
 
Vishram Singh - Textbook of Anatomy Upper Limb and Thorax.. Volume 1 (1).pdf
Vishram Singh - Textbook of Anatomy  Upper Limb and Thorax.. Volume 1 (1).pdfVishram Singh - Textbook of Anatomy  Upper Limb and Thorax.. Volume 1 (1).pdf
Vishram Singh - Textbook of Anatomy Upper Limb and Thorax.. Volume 1 (1).pdf
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...
 
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
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
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
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 

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.

Notas del editor

  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.