2. AdvWeb-1/15 DePaul University SNL 262 Web Page Design Links In HTML Instructor: David A. Lash

3. AdvWeb-2/15 What we will talk about... u Creating HTML links – Creating absolute links – Creating relative links u Creating email links

4. AdvWeb-3/15 What Are Links In HTML? u Hyperlinks are the means which HTML lets you branch from 1 file to another. u You can link to any file, that includes but not limited to: – wav files, – picture files (gif, jpg, etc), – powerpoint files, – xcl (excel files) – html files.

5. AdvWeb-4/15 What Are Links In HTML? u If a supported file format, it is displayed: u gif file (http://www.depaul.edu/~dlash/website/depaul.gif) gif file u jpg file (http://www.depaul.edu/~dlash/website/Lab1b.JPG) jpg file u HTML file that contains a jpg file (http://www.depaul.edu/~dlash/website/Lab1.html) HTML file that contains a jpg file u If a file is of a format that cannot be displayed, typically download the file: – For example an excel file. - http://www.depaul.edu/~dlash/website/depaul.gifexcel file – Or ppt file u Also most browsers will automatically open up a pre-addressed email letter. (mailto: dlash@condor.depaul.edu)pre-addressed email letter.

6. AdvWeb-5/15 General Link Format u Specified in HTML in the following format: Click Here Anchor tag can be used for links Internet address of file to link to The “clickable text” for the link

7. AdvWeb-6/15 Link Examples My Home Page u Clickable text displayed on page u Page to load when link is clicked Example from book http://www.24hourhtmlcafe.com/hour3/cams.htm

8. AdvWeb-7/15 Link Examples If you like to goto to my favorite page then Here is Disney Fun Otherwise you need to Click here What is display on Web Page (as link) Page to load when link is clicked http://www.depaul.edu/~dlash/extra/Webpage/examples/03SAMPLE.html

9. AdvWeb-8/15 Linking to non-HTML Files u Linking to non-html files if no different than linking to HTML files Depaul Link DePaul Logo (http://www.depaul.edu/~dlash/website/depaul.gif) http://www.depaul.edu/~dlash/extra/Webpage/examples/03links.html

10. AdvWeb-9/15 Absolute VS Relative Links u Absolute addresses - Link to a file at an external site. – You need to specify the complete address of the file to link to: E.g., – http://www.depaul.edu/~dlash/file.html The file is here u - Relative Address - Link to a file at current site. – Can specify just the file to load on your site: E.g., u The file is here file.html

11. AdvWeb-10/15 Using Relative Links u If a file is in a sub-directory you can still access it via relative links: – For example, assume your create a directory called homework under public_html [public_html] index.html \ [homework] hw.html Can link from index.html to hw.html as follows: my homework index.html is in public_html hw.html is in hw.html Goto this directory Get this file

12. AdvWeb-11/15 Using Relative Links u Suppose you want to access a in a directory above your current directory: – Use.. To access the parent directory. – For example, [public_html] index.html My Homework \ [homework] hw.html Can link from hw.html to back index.html as follows: my home page index.html is in public_html hw.html is in hw.html Go up one level Get this file in parent directory

13. AdvWeb-12/15 Relative Specification of Sub- Folder C u OK assume the following file structure [public_html] index.html / \ [labs] [homework] lab1.html hw1.html hw2.html u What would be the URL of hw2.html if your homepage was at students.depaul.edu/~jsmith? u How would you link from hw2.html to lab1.html? u How would you link from hw2.html to index.html? Lab1.html is in “labs” hw1.html and hw2.html is in homework students.depaul.edu/~jsmith/homework/hw2.html Lab1

14. AdvWeb-13/15 Linking to a pre-addressed email u A Link that when clicked, opens a page automatically to a pre-addressed mail form u General Format: Click here u For example: email me! Email address Text to display

15. AdvWeb-14/15 Some Miscellaneous Points u What file does each of the following load? – If you’d like then Click Here – If you don’t like then pick one of these out – Otherwise just go back home.

16. AdvWeb-15/15 What this section was about... u Creating HTML links – Creating absolute links – Creating relative links u Creating email links