SlideShare uma empresa Scribd logo
1 de 15
HTML Links
What do I need to make a link? To make links, you use what you always use when coding HTML:  an element.  A simple element with one attribute and you will be able to link to anything and everything.
Here is an example of what a link to facebook.com could look like: <a href="http://www.facebook.com/">Here is a link to Facebook.com</a>
The element “a” stands for "anchor". And the attribute href is short for "hypertext reference", which specifies where the link leads to - typically an address on the internet or a file name.
In the example the attribute href has the value "http://www.facebook.com", which is the full address of Facebook and is called a URL (Uniform Resource Locator).  Remember to close the element with an </a>.
What about links between my own pages? If you want to make a link between pages on the same website, you do not need to spell out the entire address (URL) for the document. For example, if you have made two pages (let us call them page1.htm and page2.htm) and saved them in the same folder you can make a link from one page to the other by only typing the name of the file in the link. Under such circumstances a link from page1.htm to page2.htm could look like this: <a href="page2.htm">Click here to go to page 2</a>
If page 2 were placed in a subfolder (named "subfolder"), the link could look like this: <a href="subfolder/page2.htm">Click here to go to page 2</a>
The other way around, a link from page 2 (in the subfolder) to page 1 would look like this: <a href="../page1.htm">A link to page 1</a>
"../" points to the folder one level up from position of the file from which the link is made. Following the same system, you can also point two (or more) folders up by writing "../../".
What about internal links within a page? You can also create internal links within a page - for example a table of contents at the top with links to each chapter below. All you need to use is a very useful attribute called id (identification) and the symbol "#".
Use the id attribute to mark the element to which you want to link. For example: <h1 id="heading1">heading 1</h1>
You can now create a link to that element by using "#" in the link attribute. The "#" must be followed by the id of the tag you want to link to. For example: <a href="#heading1">Link to heading 1</a>
<html>  	<head>  	</head>  <body>  		<p><a href="#heading1">Link to heading 1</a></p> 	<p><a href="#heading2">Link to heading 2</a></p> 		 <h1 id="heading1">heading 1</h1>  		<p>Text texttexttext</p>  		<h1 id="heading2">heading 2</h1>  		<p>Text texttexttext</p>  </body>  </html>
Are there any other attributes I should know of? To create a link, you always have to use the href attribute. In addition, you can also put a title on your link: <a href="http://www.andy.com/" title="Visit Andy’s webpage">Andy.com</a>
images can be links Example: <a href="http://www.html.net"> <img src="logo.png" /></a>

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Anchor tag HTML Presentation
Anchor tag HTML PresentationAnchor tag HTML Presentation
Anchor tag HTML Presentation
 
Html hyperlinks
Html hyperlinksHtml hyperlinks
Html hyperlinks
 
HTML5 - create hyperlinks and anchors
HTML5 - create hyperlinks and anchorsHTML5 - create hyperlinks and anchors
HTML5 - create hyperlinks and anchors
 
Basic HTML Tutorial For Beginners
Basic HTML Tutorial For BeginnersBasic HTML Tutorial For Beginners
Basic HTML Tutorial For Beginners
 
LINKING IN HTML
LINKING IN HTMLLINKING IN HTML
LINKING IN HTML
 
Stage6
Stage6Stage6
Stage6
 
Links - IntraPage
Links - IntraPageLinks - IntraPage
Links - IntraPage
 
Gidon Session 7
Gidon Session 7Gidon Session 7
Gidon Session 7
 
Hyperlinks in HTML
Hyperlinks in HTMLHyperlinks in HTML
Hyperlinks in HTML
 
How To Create Personal Web Pages On My Web
How To Create Personal Web Pages On My WebHow To Create Personal Web Pages On My Web
How To Create Personal Web Pages On My Web
 
Class11
Class11Class11
Class11
 
Open Graph Protocol
Open Graph ProtocolOpen Graph Protocol
Open Graph Protocol
 
Googling
GooglingGoogling
Googling
 
Tips for Effective Google Search
Tips for Effective Google SearchTips for Effective Google Search
Tips for Effective Google Search
 
Www
WwwWww
Www
 
shs-adcppt1
shs-adcppt1shs-adcppt1
shs-adcppt1
 
Local seo
Local seoLocal seo
Local seo
 
Local seo
Local seoLocal seo
Local seo
 
SHS-ADC(Hyperlinks)
SHS-ADC(Hyperlinks)SHS-ADC(Hyperlinks)
SHS-ADC(Hyperlinks)
 

Destaque

Destaque (6)

Working with html tables
Working with html tablesWorking with html tables
Working with html tables
 
Imagetag
ImagetagImagetag
Imagetag
 
Working with tables
Working with tablesWorking with tables
Working with tables
 
Netiquette
NetiquetteNetiquette
Netiquette
 
Css intro
Css introCss intro
Css intro
 
Netiquette
NetiquetteNetiquette
Netiquette
 

Semelhante a Html links

Semelhante a Html links (20)

1.3 creating links
1.3 creating links1.3 creating links
1.3 creating links
 
Html
HtmlHtml
Html
 
Xhtml Part1
Xhtml Part1Xhtml Part1
Xhtml Part1
 
Html
HtmlHtml
Html
 
HTML Notes And Some Attributes
HTML Notes And Some AttributesHTML Notes And Some Attributes
HTML Notes And Some Attributes
 
Html1
Html1Html1
Html1
 
Semantically Correct And Standards Compliance Html
Semantically Correct And Standards Compliance HtmlSemantically Correct And Standards Compliance Html
Semantically Correct And Standards Compliance Html
 
HTML
HTMLHTML
HTML
 
Intr To Html & Xhtml
Intr To Html & XhtmlIntr To Html & Xhtml
Intr To Html & Xhtml
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Block2 Session2 Presentation
Block2 Session2 PresentationBlock2 Session2 Presentation
Block2 Session2 Presentation
 
Wordpress & HTML5 by Rob Larsen
Wordpress & HTML5 by Rob LarsenWordpress & HTML5 by Rob Larsen
Wordpress & HTML5 by Rob Larsen
 
Lecture1
Lecture1Lecture1
Lecture1
 
Learn HTML and CSS_ Learn to build a website with HTML and CSS
Learn HTML and CSS_ Learn to build a website with HTML and CSS Learn HTML and CSS_ Learn to build a website with HTML and CSS
Learn HTML and CSS_ Learn to build a website with HTML and CSS
 
Merging Result-merged.pdf
Merging Result-merged.pdfMerging Result-merged.pdf
Merging Result-merged.pdf
 
M02 un06 p01
M02 un06 p01M02 un06 p01
M02 un06 p01
 
Hypertext presentation
Hypertext presentationHypertext presentation
Hypertext presentation
 
Week 2-intro-html
Week 2-intro-htmlWeek 2-intro-html
Week 2-intro-html
 
Intro to html
Intro to htmlIntro to html
Intro to html
 
Web1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSWeb1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSS
 

Html links

  • 2. What do I need to make a link? To make links, you use what you always use when coding HTML: an element. A simple element with one attribute and you will be able to link to anything and everything.
  • 3. Here is an example of what a link to facebook.com could look like: <a href="http://www.facebook.com/">Here is a link to Facebook.com</a>
  • 4. The element “a” stands for "anchor". And the attribute href is short for "hypertext reference", which specifies where the link leads to - typically an address on the internet or a file name.
  • 5. In the example the attribute href has the value "http://www.facebook.com", which is the full address of Facebook and is called a URL (Uniform Resource Locator). Remember to close the element with an </a>.
  • 6. What about links between my own pages? If you want to make a link between pages on the same website, you do not need to spell out the entire address (URL) for the document. For example, if you have made two pages (let us call them page1.htm and page2.htm) and saved them in the same folder you can make a link from one page to the other by only typing the name of the file in the link. Under such circumstances a link from page1.htm to page2.htm could look like this: <a href="page2.htm">Click here to go to page 2</a>
  • 7. If page 2 were placed in a subfolder (named "subfolder"), the link could look like this: <a href="subfolder/page2.htm">Click here to go to page 2</a>
  • 8. The other way around, a link from page 2 (in the subfolder) to page 1 would look like this: <a href="../page1.htm">A link to page 1</a>
  • 9. "../" points to the folder one level up from position of the file from which the link is made. Following the same system, you can also point two (or more) folders up by writing "../../".
  • 10. What about internal links within a page? You can also create internal links within a page - for example a table of contents at the top with links to each chapter below. All you need to use is a very useful attribute called id (identification) and the symbol "#".
  • 11. Use the id attribute to mark the element to which you want to link. For example: <h1 id="heading1">heading 1</h1>
  • 12. You can now create a link to that element by using "#" in the link attribute. The "#" must be followed by the id of the tag you want to link to. For example: <a href="#heading1">Link to heading 1</a>
  • 13. <html> <head> </head> <body> <p><a href="#heading1">Link to heading 1</a></p> <p><a href="#heading2">Link to heading 2</a></p> <h1 id="heading1">heading 1</h1> <p>Text texttexttext</p> <h1 id="heading2">heading 2</h1> <p>Text texttexttext</p> </body> </html>
  • 14. Are there any other attributes I should know of? To create a link, you always have to use the href attribute. In addition, you can also put a title on your link: <a href="http://www.andy.com/" title="Visit Andy’s webpage">Andy.com</a>
  • 15. images can be links Example: <a href="http://www.html.net"> <img src="logo.png" /></a>