1. 1 Lesson 7 - Hypertext Links

2. 2 Web Pages vs Web Site 3029282726 25242322212019 18171615141312 111098765 4321 SatFriThuWedTueMonSun April 2009 XOX OXX OOX Apples Bananas Carrots Tomatoes Watermelons Eat: Fruits & Veggies week4.html Hello there ! All text is the Largest Heading Aligned to the left Color is Blue Top Margin is 100 Left Margin is 150 Background color is Green week5.html table1.html calendar.html

3. 3 Welcome to my Pets Web page. My DogMy CatMy Bird Fido Dalmatian Male Black & white Large Born: 12/10/03 Kitty Siamese Female Gray Small Born: 2/16/06 Tweety Parakeet Female Green Small Born: 6/30/08 File Name = pets.html

4. 4 pets.html Welcome to my Pets Web site. Click for info on Dogs Click for info on Cats Click for info on Birds cats.html dogs.html birds.html

5. 5 pets.html Welcome to my Pets Web site. Click for info on Dogs Click for info on Cats Click for info on Birds cats.html dogs.html birds.html Return

6. 6 pets.html Welcome to my Pets Web site. Click for info on Dogs Click for info on Cats Click for info on Birds cats.html dogs.html birds.html Return

7. 7 pets.html Welcome to my Pets Web site. Click for info on Dogs Click for info on Cats Click for info on Birds cats.html dogs.html birds.html Return

8. 8 Hypertext links Created with an ANCHOR tag

9. 9 Hypertext links Created with an ANCHOR tag Internet page Document Downloadable file Email

10. 10 Hypertext links Created with an ANCHOR tag Text to be displayed

11. 11 pets.html Welcome to my Pets Web site. Click for info on Dogs Click for info on Cats Click for info on Birds Notepad Home Page Welcome to my Pets Web site.

12. 12 pets.html Welcome to my Pets Web site. Click for info on Dogs Click for info on Cats Click for info on Birds Notepad Home Page Welcome to my Web site. Anchor Tag Text to be displayed dogs.html

13. 13 pets.html Welcome to my Pets Web site. Click for info on Dogs Click for info on Cats Click for info on Birds Notepad Home Page Welcome to my Pets Web site. Anchor Tag Text to be displayed <a href = dogs.html > Click for info on Dogs </a>

14. 14 pets.html Welcome to my Pets Web site. Click for info on Dogs Click for info on Cats Click for info on Birds Notepad Home Page Welcome to my Pets Web site. Anchor Tag Text to be displayed <a href =dogs.html > Click for info on Dogs <a href = cats.html > Click for info on Cats </a>

15. 15 pets.html Welcome to my Pets Web site. Click for info on Dogs Click for info on Cats Click for info on Birds Notepad Home Page Welcome to my Pets Web site. Anchor Tag Text to be displayed <a href =dogs.html > Click for info on Dogs Click for info on Cats <p> <a href = birds.html > Click for info on Birds </a>

16. 16 pets.html Welcome to my Web site. Click for info on Dogs Click for info on Cats Click for info on Birds Notepad Home Page Welcome to my Pets Web site. <a href =dogs.html > Click for info on Dogs Click for info on Cats Click for info on birds Save as: pets.html

17. 17 pets.html Welcome to my Pets Web site. Click for info on Dogs Click for info on Cats Click for info on Birds

18. 18 dogs.html This is my web page about Dogs return Notepad Dogs This is my web page about Dogs <a href = pets.html> return </a> Save as: dogs.html

19. 19 Animals This is my web page about animals return Animals.html This is my web page about animals return Notepad cats.html This is my web page about Cats return Cats This is my web page about Cats return Save as: cats.html

20. 20 birds.html This is my web page about Birds return Birds This is my web page about Birds return

21. 21 Birds This is my web page about Birds return Cats This is my web page about Cats return Dogs This is my web page about Dogs return dogs.html cats.htmlbirds.html \my documents\My WebPages

22. 22 Home Page Welcome to my Pets Web site. <a href =dogs.html > Click for info on Dogs Click for info on Cats Click for info on Birds \my documents\My WebPages pets.html

23. 23 FILE NAMING & REFERENCING

24. 24 pets.html dogs.html cats.html birds.html ©2005 Google - Searching 8,058,044,651 web pages

25. 25 FILE REFERENCING Absolute vs. Relative

26. 26 pets.html cats.html dogs.html birds.html

27. 27 C:\my Documents\My Web Files\pets.html Disk Drive

28. 28 C:\my Documents\My Web Files\pets.html Disk Drive Folder

29. 29 C:\my Documents\My Web Files\pets.html Disk Drive Folder

30. 30 C:\my Documents\My Web Files\pets.html Disk Drive Folder File

31. 31 C:\my Documents\My Web Files\pets.html C:\my Documents\My Web Files\cats.html C:\my Documents\My Web Files\dogs.html C:\my Documents\My Web Files\birds.html

32. 32

33. 33 My Web Files Folder My Documents Folder pets.htmlcats.htmldogs.htmlbirds.html

34. 34 Family Web Folder Business Web Folder Pets Web Folder Important Letters Finances My Documents Folder My Web Files Folder

35. 35 My Documents Folder My Web Files Folder Family Web Folder Business Web Folder Pets Web Folder Important Letters Finances

36. 36 My Documents Folder My Web Files Folder Family Web Folder Business Web Folder Pets Web Folder Important Letters Finances My Documents Folder Finances Folder Important Letters Folder My Web Files Folder Family Web Folder Business Web Folder Pets Web Folder pets.html cats.html dogs.html birds.html

37. 37 http://udel.edu/~frankr/pets/pets.html pets.html Welcome to my Pets Web site. Click for info on Dogs Click for info on Cats Click for info on Birds A RELATIVE REFERENCE defines the path to a file using the current location as a the point of reference. Relative Reference in same folder as the web page

38. 38 My Web Files pets.html dogs.html cats.html birds.html <a href = dogs.html

39. 39 My Web Files <a href = prior pets/hamsters.html pets.html dogs.html prior pets cats.html birds.html hamsters.html snakes.html

40. 40 FOLDER: My Documents FOLDER: My Web Files pets.html dogs.html cats.html birds.html FOLDER: prior pets hamsters.html snakes.html

41. 41 FOLDER: My Documents children.html relatives.html FOLDER: My Web Files pets.html dogs.html cats.html birds.html FOLDER: prior pets hamsters.html snakes.html

42. 42 FOLDER: My Documents children.html relatives.html FOLDER: My Web Files pets.html dogs.html cats.html birds.html FOLDER: prior pets hamsters.html snakes.html

43. 43 FOLDER: My Documents children.html relatives.html FOLDER: My Web Files pets.html dogs.html cats.html birds.html FOLDER: prior pets hamsters.html snakes.html <a href =../relatives.html

44. 44 FOLDER: My Documents children.html relatives.html FOLDER: My Web Files pets.html dogs.html cats.html birds.html FOLDER: prior pets hamsters.html snakes.html../cats.html POP QUIZ <a href =

45. 45 FOLDER: My Documents children.html relatives.html FOLDER: My Web Files pets.html dogs.html cats.html birds.html FOLDER: prior pets hamsters.html snakes.html <a href =../../relatives.html POP QUIZ

46. 46 FOLDER: My Documents children.html relatives.html FOLDER: My Web Files pets.html dogs.html cats.html birds.html FOLDER: prior pets hamsters.html snakes.html <a href = My Web Files/prior pets/snakes.html POP QUIZ

47. 47 Absolute vs. Relative An ABSOLUTE REFERENCE defines the entire path to a file. Click for info on Dogs FILE REFERENCING Click to go to GOOGLE

48. 48 http://udel.eud/~frankr edu

49. 49 http://udel.edu/~franr ~frankr

50. 50 http://udel.edu/~frankr http://udel.edu/~frankr/index.html http://udel.edu/~frankr/pets.html

51. 51 http://udel.edu/~frankr/pets.html Always include the extension Avoid Upper Case Avoid Mixed Case Avoid Spaces Do not use \ Use lowercase for filenames Remember to use /

52. 52 Anchor Tag Options Click Here Click Here Send mail to Frank EXTRA CREDIT !!!