1 lesson 7 - hypertext links. 2 web pages vs web site 3029282726 25242322212019 18171615141312...

1

Lesson 7 - Hypertext Links

2

Web Pages vs Web Site

3029282726

25242322212019

18171615141312

111098765

4321

SatFriThuWedTueMonSun

April 2009

X O XO X XO O X

ApplesBananasCarrots

TomatoesWatermelons

Eat: Fruits & Veggies

week4.htmlHello 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

Welcome to my Pets Web page.

My Dog My Cat My 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

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

pets.html





cats.html

dogs.html

birds.htmlReturn

Return

Return

6

pets.html





cats.html

dogs.html

birds.htmlReturn

Return

Return

7

pets.html





cats.html

dogs.html

birds.htmlReturn

Return

Return

8

Hypertext links

• Created with an ANCHOR tag

<a>

9

Hypertext links


Internet pageDocumentDownloadable fileEmail

<a><a href=“link”>

10

Hypertext links


<a href=“link”> Text to be displayed </a>

11

pets.html





Notepad<html><head><title> Home Page </title></head><body bgcolor=“#ffff00”>

<H1 align=“center”> Welcome to my Pets Web site. </H1>

12

pets.html





Notepad<html><head><title> Home Page </title></head>

<body bgcolor=“#fff00”>

<H1 align=“center”> Welcome to my Web site. </H1>

Anchor Tag

<a href=“link">

Text to be displayed

</a>

dogs.html

13

pets.html






<body bgcolor=“#ffff00”>


Anchor Tag

<a href=“link">


</a>

<a href = “dogs.html” >


</a>

14

pets.html








Anchor Tag

<a href=“link">


</a>



</a>

<a href = “cats.html”> Click for info on Cats </a>

<p>

15

pets.html








Anchor Tag

<a href="link">


</a>



</a>

<p><a href = “cats.html”> Click for info on Cats </a><p><a href = “birds.html”> Click for info on Birds </a>

16

pets.html

Welcome to my Web site.









</a>

<p><a href = “cats.html”> Click for info on Cats </a><p><a href = “birds.html”> Click for info on birds </a>

</body></html>

Save as:

pets.html

17

pets.html





18

dogs.html

This is my web pageabout Dogs

return

Notepad<html><head><title> Dogs </title></head>

<body bgcolor=“#ff0000”>

<H2 align=“center”> This is my web page <br> about Dogs</H2>

<a href = “pets.html”> return </a>

</body></html>

Save as:

dogs.html

19

<html><head><title> Animals </title></head>

<body bgcolor=“green”>

<H2 align=“center”> This is my web page about animals</H2>

<a href = “index.html”> return </a>

</body></html>

Animals.html

This is my web pageabout animals

return

Notepad

cats.html

This is my web pageabout Cats

return

<html><head><title> Cats </title></head>

<body bgcolor=“#0000FF”>

<H2 align=“center”> This is my web page about Cats</H2>


</body></html>

Save as:

cats.html

20

birds.html

This is my web pageabout Birds

return

<html><head><title> Birds </title></head>

<body bgcolor=“#00ff00”>

<H2 align=“center”> This is my web page about Birds</H2>


</body></html>

21

<html><head><title> Birds</title></head>

<body bgcolor=“#00ff00”>

<H2 align=“center”> This is my web page about Birds</H2>


</body></html>

<html><head><title>Cats</title></head>

<body bgcolor=“#0000ff”>

<H2 align=“center”> This is my web page about Cats</H2>


</body></html>

<html><head><title> Dogs </title></head>

<body bgcolor=“#ff0000”>

<H2 align=“center”> This is my web page about Dogs</H2>


</body></html>

dogs.html cats.html birds.html

\my documents\My WebPages

22

<html><head><title> Home Page </title></head>





</a>

<p><a href = “cats.html”> Click for info on Cats </a>

<p><a href = “birds.html”> Click for info on Birds </a>

</body></html>

\my documents\My WebPages

pets.html

23

FILE NAMING&

REFERENCING

24

pets.htmldogs.htmlcats.htmlbirds.html

©2005 Google - Searching 8,058,044,651 web pages

25

FILE REFERENCING

Absolute vs. Relative

26

pets.html

cats.htmldogs.html

birds.html

27

C:\my Documents\My Web Files\pets.html

Disk Drive

28


Disk Drive

Folder

29


Disk Drive

Folder Folder

30


Disk Drive

Folder Folder File

31


C:\my Documents\My Web Files\cats.html

C:\my Documents\My Web Files\dogs.html

C:\my Documents\My Web Files\birds.html

33

My Web FilesFolder

My Documents

Folder

pets.html

cats.htmldogs.html

birds.html

34

Family WebFolder

Business WebFolder

Pets WebFolder

ImportantLetters

FinancesMy Documents

Folder

My Web FilesFolder

35

My Documents Folder

My Web FilesFolder

Family WebFolder

Business WebFolder

Pets WebFolder

ImportantLetters

Finances

36

My Documents Folder

My Web FilesFolder

Family WebFolder

Business WebFolder

Pets WebFolder

ImportantLetters

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

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

pets.html





<a href=“dogs.html” Click for info on Dogs</a>

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

My Web Files

pets.html

dogs.html

cats.html

birds.html

<a href = “dogs.html” </a>

39

My Web Files

<a href = “prior pets/hamsters.html” </a>

pets.html

dogs.html prior pets

cats.html

birds.html

hamsters.html

snakes.html

40

FOLDER: My Documents

FOLDER: My Web Files• pets.html• dogs.html• cats.html• birds.html

FOLDER: prior pets• hamsters.html• snakes.html

41

FOLDER: My Documents• children.html• relatives.html



<a href=“birds.html”>

42




<a href=“prior pets/hamsters.html”>

43




<a href = “ ../relatives.html ” </a>

44




../cats.html

POP QUIZ

<a href = “ ” </a>

45




<a href = “ ../../relatives.html ” </a>

POP QUIZ

46




<a href = “My Web Files/prior pets/snakes.html ” </a>

POP QUIZ

47

Absolute vs. Relative

An ABSOLUTE REFERENCE defines the entire path to a file.

<a href= “ http://udel.edu/~frankr/pets/dogs.html ”> Click for info on Dogs </a>

FILE REFERENCING

<a href=“http://google.com/index.html”> Click to go to GOOGLE</a>

48

http://udel.eud/~frankr

edu

49

http://udel.edu/~franr

~frankr

50

http://udel.edu/~frankr

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

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

51

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

Always include the extension Avoid Upper CaseAvoid Mixed CaseAvoid SpacesDo not use “ \ ”

Use lowercase for filenames

Remember to use “ / ”

52

Anchor Tag Options

<a href=“dogs.html”> Click Here </a>

<a href=“mailto:[email protected]”>

<a href=“dogs.html" target="_blank"> Click Here </a>

Send mail to Frank </a>

EXTRA CREDIT !!!