Relative & Absolute Links & Inserting Images

Relative & Absolute Links & Inserting Images A Quick Introduction

Absolute Link • Absolute Link – a full URL to a file or website <a href=http://www.mywebsite.com/resume.html>Resume</a> <a href=“http://www.google.com”>Google</a>

Relative Link • Relative Link – the location of a file you want to link to in relation to the page currently being viewed • For example, you want to link from your home page to your resume page, and both of these documents are saved in the same folder <a href=“resume.html”>Resume</a>

Relative Link • What if the document isn’t saved in the same folder? • For example, you want to link to a PDF that is saved in a subfolder of the current folder the web page you are on is saved in: <a href=“/Chapter2/Part1/page23.pdf”>Helpful PDF </a>

Relative Link • What if you need to leave the current folder and go up to a higher level folder to reach the document you need to link to? <a href=“../home.html”>Home Page</a> • The two dots indicate to the browser to look up one level from the current folder (and in this case, then find the home.html document)

Relative Link • What is the path that will result from this relative link? <a href=“../images/map.jpeg”>Enlarged Map</a> It will go up one level, look for the images folder, go into images folder, find map.jpeg file

Examples of Relative Links

Images • You can very easily insert images into your web pages using the following tag: <imgsrc=“logo.gif” height=“200” width=“500” alt=“My Company Name” /> • img = image, src = source, alt = text to show if image won’t load or for persons with disabilities using screen readers, alternate text will be read

Relative & Absolute Links & Inserting Images