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

3. AdvWeb-2/13 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 (ecxcel files) – html files.

4. AdvWeb-3/13 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.

5. AdvWeb-4/13 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 words displayed for the link

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

7. AdvWeb-6/13 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

8. AdvWeb-7/13 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

9. AdvWeb-8/13 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

10. AdvWeb-9/13 Using Directories or Folders

11. AdvWeb-10/13 Relative Specification of Sub- Folder u Inside Index.html how create a link to – homew1.html? - – picture1.gif? – unit1.html Click here for homework1 Click here for picture1 Click here for course material 1

12. AdvWeb-11/13 Relative Linking in Sub-Folders u To refer to the parent folder put a.. In the path: u For example, inside Homework how create a link to: – index.html? - Click here for homepage – picture1.gif? – unit1.html Click here for picture1 Click here for course material 1 Note: Use fwd slash.. refers to parent dir

13. AdvWeb-12/13 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

14. AdvWeb-13/13 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.