SlideShare ist ein Scribd-Unternehmen logo
1 von 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.

Weitere ähnliche Inhalte

Was ist angesagt?

Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheetMichael Jhon
 
Hyperlinks in HTML
Hyperlinks in HTMLHyperlinks in HTML
Hyperlinks in HTMLAarti P
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSSAmit Tyagi
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Gil Fink
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS PresentationShawn Calvert
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet pptabhilashagupta
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to htmlvikasgaur31
 
Html, CSS & Web Designing
Html, CSS & Web DesigningHtml, CSS & Web Designing
Html, CSS & Web DesigningLeslie Steele
 
Html images syntax
Html images syntaxHtml images syntax
Html images syntaxJayjZens
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginnersSingsys Pte Ltd
 
Learn html Basics
Learn html BasicsLearn html Basics
Learn html BasicsMcSoftsis
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS Dave Kelly
 

Was ist angesagt? (20)

Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
Hyperlinks in HTML
Hyperlinks in HTMLHyperlinks in HTML
Hyperlinks in HTML
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Span and Div tags in HTML
Span and Div tags in HTMLSpan and Div tags in HTML
Span and Div tags in HTML
 
Introduction to XHTML
Introduction to XHTMLIntroduction to XHTML
Introduction to XHTML
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html, CSS & Web Designing
Html, CSS & Web DesigningHtml, CSS & Web Designing
Html, CSS & Web Designing
 
Html images syntax
Html images syntaxHtml images syntax
Html images syntax
 
Css position
Css positionCss position
Css position
 
Html frames
Html framesHtml frames
Html frames
 
Css and its types
Css and its typesCss and its types
Css and its types
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
 
Learn html Basics
Learn html BasicsLearn html Basics
Learn html Basics
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 

Andere mochten auch

Working with HTML Lists
Working with HTML ListsWorking with HTML Lists
Working with HTML ListsRay Villalobos
 
Powerful Link Building Strategies that Work
Powerful Link Building Strategies that WorkPowerful Link Building Strategies that Work
Powerful Link Building Strategies that WorkDemandWave
 
The Semantic Web #4 - RDF (1)
The Semantic Web #4 - RDF (1)The Semantic Web #4 - RDF (1)
The Semantic Web #4 - RDF (1)Myungjin Lee
 
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)Beat Signer
 
HTML Link - Image - Comments
HTML  Link - Image - CommentsHTML  Link - Image - Comments
HTML Link - Image - CommentsHameda Hurmat
 
HTML Basic Tags
HTML Basic Tags HTML Basic Tags
HTML Basic Tags Nisa Soomro
 
Client-Server Hybrid Applications with Vaadin
Client-Server Hybrid Applications with VaadinClient-Server Hybrid Applications with Vaadin
Client-Server Hybrid Applications with VaadinArtur-vaadin
 
INTRODUCTION TO HTML
INTRODUCTION TO HTMLINTRODUCTION TO HTML
INTRODUCTION TO HTMLbwire sedrick
 
Anchor tag HTML Presentation
Anchor tag HTML PresentationAnchor tag HTML Presentation
Anchor tag HTML PresentationNimish Gupta
 
WebKit and GStreamer
WebKit and GStreamerWebKit and GStreamer
WebKit and GStreamercalvaris
 
Designing the expert system
Designing the expert systemDesigning the expert system
Designing the expert systemasimnawaz54
 

Andere mochten auch (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
 

Ähnlich wie HTML Links and Anchors Guide

Introduction to linking
Introduction to linkingIntroduction to linking
Introduction to linkingShehzad Yaqoob
 
1.3 creating links
1.3 creating links1.3 creating links
1.3 creating linksBulldogs83
 
1.3 creating links
1.3 creating links1.3 creating links
1.3 creating linksBulldogs83
 
HTML5 - create hyperlinks and anchors
HTML5 - create hyperlinks and anchorsHTML5 - create hyperlinks and anchors
HTML5 - create hyperlinks and anchorsGrayzon Gonzales, LPT
 
HTML Foundations, pt 2
HTML Foundations, pt 2HTML Foundations, pt 2
HTML Foundations, pt 2Shawn Calvert
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML BasicsShawn Calvert
 
Hypertext presentation
Hypertext presentationHypertext presentation
Hypertext presentationIftikhar Alam
 
htmllinks-191023021435.pptxaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
htmllinks-191023021435.pptxaaaaaaaaaaaaaaaaaaaaaaaaaaaaahtmllinks-191023021435.pptxaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
htmllinks-191023021435.pptxaaaaaaaaaaaaaaaaaaaaaaaaaaaaaBhargaviGorde1
 
HTML Lists & Llinks
HTML Lists & LlinksHTML Lists & Llinks
HTML Lists & LlinksNisa Soomro
 
Just Enough HTML for Fatwire
Just Enough HTML for FatwireJust Enough HTML for Fatwire
Just Enough HTML for FatwireKenneth Quandt
 
Xhtml Part2
Xhtml Part2Xhtml Part2
Xhtml Part2nleesite
 
Basic HTML Tutorial For Beginners
Basic HTML Tutorial For BeginnersBasic HTML Tutorial For Beginners
Basic HTML Tutorial For BeginnersDHTMLExtreme
 
Xhtml Part1
Xhtml Part1Xhtml Part1
Xhtml Part1nleesite
 

Ähnlich wie HTML Links and Anchors Guide (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
 

Kürzlich hochgeladen

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 GraphThiyagu K
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Educationpboyjonauth
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
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 17Celine George
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Krashi Coaching
 
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxContemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxRoyAbrique
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Sapana Sha
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13Steve Thomason
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
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 . pdfQucHHunhnh
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
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 ConsultingTechSoup
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxpboyjonauth
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxGaneshChakor2
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxNirmalaLoungPoorunde1
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdfSoniaTolstoy
 

Kürzlich hochgeladen (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
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
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
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
 
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxContemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
 
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
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 
Staff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSDStaff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSD
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
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
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
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
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptx
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptx
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptx
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 

HTML Links and Anchors Guide

  • 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.

Hinweis der Redaktion

  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.