Links in Html

1,903 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,903
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • Links in Html

    1. 1. HYPERTEXT MARKUP LANGUAGE<br />WEB ENGINEERING LAB-3<br />
    2. 2. Overview<br />Working with links<br />
    3. 3. Using the ANCHOR tag<br />The anchor element <a> is used to create links.<br /><a href=“url” title=“text”> description </a><br />
    4. 4. External Link<br /> <a href=“http://www.yahoo.com”> Yahoo! </a> <br /><ul><li>Anchor element’shrefattribute is used to specify the Hyperlink Reference (that is, a reference to link’s address).
    5. 5. When linking to an external document, it is essential to provide http:// otherwise the link will not work.</li></li></ul><li>TRY IT !<br />
    6. 6. Observe the output<br />
    7. 7. Observe the output<br />Did you notice that there is a space after heading but not after the links?<br />
    8. 8. Types of HTML elements<br />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. <br />Block-level elements: place a line break before and after the element. Such elements stack vertically on top of each other. <br />
    9. 9. Understanding paths<br />9<br />prepared by: Meer SadafNaeem<br /><ul><li>There are two types of pathnames: relative & absolute.</li></li></ul><li>Absolute path specifies a file’s precise location within a computer’s entire folder structure.<br />course<br />C:/course/bcit/intro.html<br />se<br />bcit<br />index.html<br />class1<br />list.html<br />intro.html<br />chem.html<br />math.html<br />eng.html<br />
    10. 10. Absolute path specifies a file’s precise location within a computer’s entire folder structure.<br />course<br />C:/course/bcit/class1/eng.html<br />se<br />bcit<br />index.html<br />class1<br />list.html<br />intro.html<br />chem.html<br />math.html<br />eng.html<br />
    11. 11. Relative path specifies a file’s location in relation to the location of the current document.<br />course<br />se<br />bcit<br />index.html<br />class1<br />list.html<br />intro.html<br />chem.html<br />math.html<br />eng.html<br />
    12. 12. If the file is in same folder as the current document, you do not specify the folder name. <br />contact.html<br />course<br />se<br />bcit<br />index.html<br />class1<br />list.html<br />contact.html<br />intro.html<br />eng.html<br />chem.html<br />math.html<br />
    13. 13. If the file is in a subfolder of the current document, include the name of the subfolder followed by the file name.<br />class1/math.html<br />course<br />se<br />bcit<br />index.html<br />class1<br />list.html<br />contact.html<br />intro.html<br />eng.html<br />chem.html<br />math.html<br />
    14. 14. To go one level up the folder tree, start the relative path with a double period (..) & then provide the name of the file<br />../index.html<br />course<br />se<br />bcit<br />index.html<br />class1<br />list.html<br />contact.html<br />intro.html<br />eng.html<br />chem.html<br />math.html<br />
    15. 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.<br />../se/list.html<br />course<br />se<br />bcit<br />index.html<br />class1<br />list.html<br />contact.html<br />intro.html<br />eng.html<br />chem.html<br />math.html<br />
    16. 16. Internal Link<br /> <a href=“file.html”> Go to next page</a> <br /><ul><li>In href, specify the relative path of the document to which you want to link.</li></li></ul><li>Labeling to document fragments<br /> <a name=“top”> Welcome to NED</a> <br />top<br />Page is scrolled to the location named top<br /><a href=“#directions”> go to top of the page</a> <br />Go to top<br />
    17. 17. Labeling sections with the name attribute<br /> <a name=“top”> Welcome to NED</a> <br /><ul><li>the name attribute allows links to be able to point to a specific section within a document (instead of links always leading to the top of a document).
    18. 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.</li></ul><a href=“#top”> go to top of the page</a> <br />
    19. 19. Creating titles for your links<br /> <a href=“http://www.yahoo.com” title=“Yahoo website”> Yahoo! </a> <br /><ul><li>title attribute allows an advisory title that explains the resource in more detail.
    20. 20. Browsers may choose different methods of showing the advisory title attribute, such as displaying the title in a tool tip or balloon help.</li></li></ul><li>Changing browser windows with target attribute<br /><ul><li>By default, each new page you open replaces the content of the previous page in the browser window.
    21. 21. To return the previous page, one has to click their browser’s Back button.
    22. 22. target attribute indicates the name of window where you would like the linked page to appear.</li></li></ul><li>target attribute<br /> <a href=“url” target=“window”> content</a> <br /><ul><li>Here window is a name assigned to the new browser window.</li></li></ul><li>target attribute<br /><ul><li>The browsers that obey target attribute, create a new windows that look as if an extra copy of the browser is running.
    23. 23. 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.</li></li></ul><li>Linking to email addresses<br /> <a href=“mailto: emailaddress”> …….</a> <br /><ul><li>Anchors can also link to email addresses.
    24. 24. When someone clicks on this type of anchored link, their default email program initiates an email message to the linked address.</li>

    ×