Html links


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html links

  1. 1. HTML<br />Links<br />
  2. 2. What do I need to make a link?<br />To make links, you use what you always use when coding HTML: <br />an element. <br />A simple element with one attribute and you will be able to link to anything and everything. <br />
  3. 3. Here is an example of what a link to could look like:<br /><a href="">Here is a link to</a><br />
  4. 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.<br />
  5. 5. In the example the attribute href has the value "", which is the full address of Facebook and is called a URL (Uniform Resource Locator). <br />Remember to close the element with an </a>.<br />
  6. 6. What about links between my own pages?<br />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:<br /><a href="page2.htm">Click here to go to page 2</a><br />
  7. 7. If page 2 were placed in a subfolder (named "subfolder"), the link could look like this:<br /><a href="subfolder/page2.htm">Click here to go to page 2</a> <br />
  8. 8. The other way around, a link from page 2 (in the subfolder) to page 1 would look like this:<br /><a href="../page1.htm">A link to page 1</a> <br />
  9. 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 "../../".<br />
  10. 10. What about internal links within a page?<br />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 "#".<br />
  11. 11. Use the id attribute to mark the element to which you want to link. For example:<br /><h1 id="heading1">heading 1</h1> <br />
  12. 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:<br /><a href="#heading1">Link to heading 1</a> <br />
  13. 13. <html> <br /> <head> <br /> </head> <br /><body> <br /> <p><a href="#heading1">Link to heading 1</a></p> <p><a href="#heading2">Link to heading 2</a></p><br /> <h1 id="heading1">heading 1</h1> <br /> <p>Text texttexttext</p> <br /> <h1 id="heading2">heading 2</h1> <br /> <p>Text texttexttext</p> <br /></body> <br /></html> <br />
  14. 14. Are there any other attributes I should know of?<br />To create a link, you always have to use the href attribute. In addition, you can also put a title on your link:<br /><a href="" title="Visit Andy’s webpage"></a> <br />
  15. 15. images can be links<br />Example:<br /><a href=""> <img src="logo.png" /></a> <br />