Shows the entire path to the file, including the scheme, server name, the complete path, and the file name itself. Same idea of stating your full name, street #, street name, city, state, zip, and country The location of the absolute URL itself has no bearing on the location of the actual file referenced. No matter where it is in the webpage, it will look the same from any server An absolute URL - points to another web site (like href="http://www.example.com/default.htm") Uses the http protocol http://www.site.com/web/index.html http://www.site.com/web/images/image.gif Describes the location of the desired file with reference to the location of the file that contains the URL itself. Similar to “giving directions” to a particular address As if stating “you are here” identifies the reference point: Relative to that file’s location on the server. Absolute URLs do not care where they are located. “In this folder, there is a folder called…” A relative URL - points to a file within a web site (like href="default.htm") Using makes it easy to move your pages from a local system to a server. href Attribute What does “href” stand for? Hypertext reference What tag is involved with adding the href attribute? <a> The href should include the = sign and the url should have quotations that surround it. Example: <p><a href=“http://google.com”>title you want shown</a></p> Some helpful hints to Links When using links in your own website, you need a relative path: href=“secondpage.html” When going outside of your website, you need an absolute path: href:http://google.com Why a link will not work: Incorrect path in the href attribute Typed incorrectly Ensuring Your Link will Work Be sure your link is spelled correctly and/or your tag and attribute is in its correct areas. Check the path in the attribute Best bet: Be sure the website is still working Copy and paste the link right into your code Do not choose a link where the viewer needs to log in unless you “know” they will already have an account or you are directing them to create an account. LINK COLOR What is the difference between a link, an active link, and a visited link color? Active links change color (when directed to do so) when a link is being clicked. Visited links change color (when directed to do so) when a link has been visited. Why would you want to change the color of a link? The blue default color clashes or blends in with the background The active link will let someone know that they are about to click a link The visited link will let someone know that is where they have been before. LINK COLOR CONTINUED… To change all the links on a page to a specific color, where would you put the new attribute? In the body tag This includes all changes: active link and visited link They are only separated by a space though defined by their individual attributes. What are the new attributes? Link? link=“…” Active Link? alink=“…” Visited Link? vlink=“…” LINK COLOR CONTINUED Why change all links in the page and not individually different colors? Uniformity and not confusing To change all links in the page: <body link=“#008080” alink=“#FF0000” vlink=“#808080> or <body link=“teal” alink=“red” vlink=“gray”> Links Within Your Page A new attribute: id= Called an identifier How are we going to use it? We will be adding a “back to top” link at the bottom of your webpage. Because it is a link, what tags and attribute would we use? <a> start and end tags href= href= will always have a pound sign that follows within the quotations of the value About the ID attribute Can be used to identify a particular element Can also be used in CSS and JavaScript You can add an ID attribute to almost any tag in your html document RESTRICTIONS! The value of the id attribute cannot contain spaces and must be unique on your page You cannot have 2 elements share the same ID It is case sensitive You must remain consistent! Adding the Link Always add your identifier within your heading 1 (or where ever you want the link to go though must have an element to attach to) Should look something like this: <h1 id=“top”>Some Interesting Information</h1> Add your link to the bottom of the page before the closing of your body Be sure to add it to its own paragraph Should look something like this: <p><a href=“#top”>Back to Top</a></p>