Download Linking Techniques in HTML: Absolute, Relative, and Dreamweaver - Prof. Peter L. Hoelter and more Study notes Web Design and Development in PDF only on Docsity!
week::three
Linking in HTML
Overview o Basis for the entire web—you can go anywhere at anytime. o Allows for the stream-of-conciseness browsing, where one interest leads to the next, which leads to another one, and so on. o Linking not only applies to text and graphic hyperlinks, but to links to graphics and other document types as well. HTML Structure o This appears in blue and underlined Tag: Attribute: href Value: my_file.html Closing Tag: Result: This appears in blue and underlined o 
Tag: ![]()
Attribute: src Value: company_logo.gif Closing Tag: / > Result: logo is displayed o This HTML structure is one reason why we have to be concerned with how we name our files. File-Relative Links o The path to the file you’re linking to is determined by its relative position to the current file. o They only give directions from the file’s current location. o Relative links only reference files located in your Local Root Folder, which also means they can only access files on your Web site. o For relative links, Web servers and browsers automatically add the necessary information to complete the link. o Three examples of a relative link on the start.html to imac.html:
Description HTML Link from start.html File Hierarchy
If the file you are linking to is in the same folder as the current file, then you simply use the file name.
iMac
If the file you are linking to is one folder beneath the current file location, then the folders structure is specified.
iMac
If the file you are linking to is one folder up from the current file location, then a ../ is used to go up. You can use as many ../ as it takes to get to the destination file.
iMac
Server-Relative Links
o These are relative links that point to a file based on the top-level of the Local Root Folder. This differs from file-relative links, which are based on the location of the HTML file that contains the link. o All server-relative links begin with a backslash ( / ). This tells the browser to begin its search for the file at the very top level of the Local Root Folder. o The advantage of these comes while you are building the Web site. They allow you to reuse page templates and HTML code snippets without worrying about the current location of your HTML files. With file-relative links, you must alter the link based on the location of your file. o Samples: A link to a company logo located in a common directory: 
A link to an About Us page: About Us
Absolute Links
o Absolute links are links that give the entire path to a file, regardless of where the initial file is located. o Absolute links always includes the prefix http:// o They allow you to jump to any page on the Internet at any time (hence the name world wide web ). o Samples: A link to the VC 237 Web site that is absolute link: VC 237 Web Design I
An absolute link to a image located on a remote web server: 
o Note that all the information needed to access this page is included in these links. The link can live anywhere and still take the user to the page.
Which type should I use?
o Use file-relative links to link to files within your Local Root Folder. It’s easier to move the site from one location to another Relative links are shorter than absolute links Dreamweaver uses these by default o If you need to access a page on another site, absolute links are the only way. o If you know for sure the full domain name and URL of your Web site, use server-relative links for files used many times throughout your site (logos and navigational graphics, CSS and JavaScript libraries).
What should you not do?
Link Types
Text o HTML text can be designated as a link to another page or document. o The text that is displayed is independent of the link itself. o The text color changes (generally to blue) and becomes underlined, though the exact appearance can be customized using Dreamweaver’s Page Properties dialog box or using Cascading Style Sheets. Image o An image can be designated as a link to another page or document. o The entire image becomes clickable, and by default a blue border will be displayed around the image. o The blue border can be removed by setting the border attribute to 0. Image Maps o Allows you to assign invisible link areas, called Hotspots, to an image, each with their own size, shape and URL. o Hotspots within the same image can link to difference destinations. o Each image map must have a unique name, though Dreamweaver takes care of this for us. o Hotspot Shapes: Rectangle Oval Freeform polygon o Hotspot shapes can be manipulated like slices in ImageReady. o Sample Image Map: Note that there are six rectangular Hotspots below: Keywords, People, Organizations, BPA Kids, BPA Energy Efficiency & EE Home, and Site Map.
o When to use Image Maps When your navigation images do not include rollovers or other dynamic effects. For quick functional mock-ups of a Photoshop web site design. Programmer preference. o Why not use them? Large images with image maps do not gain the advantages of image slicing. Individual rollovers are much more difficult to create and very inefficient in terms of download size.
Named Anchors
o Allow you to mark a particular part of a long HTML document, scrolling the page for the user to that particular mark when the link is clicked. o Named Anchors contain two parts: the anchor , and a link to that anchor. o When a user clicks on a link to an anchor, the web browser goes to that page and scrolls directly to the anchor. o For long pages, anchors are often used to provide a Back to Top link at the bottom of page (The site for this class uses this method). o HTML Samples: Anchor: Links to anchors on the current page: Download Week Five Handouts Links to anchors on a different page: Download Week Five Handouts o Adding a Named Anchor in Dreamweaver Insert > Named Anchor (Command-Option- A) Each anchor must have a unique name. Don’t begin your anchor name with a number—anchors work most reliably when they begin with a alpha character. Treat the name of the anchor just like you would a HTML file name (no capitol letters, spaces or special characters) Be sure to name the anchor something meaningful. Anchors look like this in Dreamweaver: o Linking to an Anchor You link to an anchor just like you do to a file. Dreamweaver takes care of the HTML for you. Dreamweaver Point and Shoot works well with anchors. Anchor links add a # sign plus the name of the anchor to standard links.
E-mail Link
o E-mail links launch the user’s primary e-mail application and automatically creates a new e-mail with the specified address. o HTML Sample: E-mail links are created using the tag E-mail the Instructor The mailto: text preceding the e-mail address triggers the user’s e-mail client. o Adding an E-mail Link in Dreamweaver Insert > Email Link o Options: Text – The text you want to display as a link. E-mail – The destination e-mail address. o Hint: If you first select the text you want to use as a link, and then select E-mail Link in the Insert menu, the Text option will automatically be filled with the highlighted text. o You can also add e-mail links manually by entering mailto: plus the e-mail address in the manual link box in the Properties palette.. o Note: E-mail links are often harvested by spammers. If you don’t want the addresses to be picked up by them, either use an encoder, or don’t create a mailto: link and simply type it in an odd way. Example: phoelter [ at ] chemeketa dot edu )
