1 lesson 7 - hypertext links. 2 web pages vs web site 3029282726 25242322212019 18171615141312...
Post on 29-Mar-2015
217 Views
Preview:
TRANSCRIPT
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
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.htmlReturn
Return
Return
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.htmlReturn
Return
Return
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.htmlReturn
Return
Return
8
Hypertext links
• Created with an ANCHOR tag
<a>
9
Hypertext links
• Created with an ANCHOR tag
Internet pageDocumentDownloadable fileEmail
<a><a href=“link”>
10
Hypertext links
• Created with an ANCHOR tag
<a href=“link”> Text to be displayed </a>
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<html><head><title> Home Page </title></head><body bgcolor=“#ffff00”>
<H1 align=“center”> Welcome to my Pets Web site. </H1>
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<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
Welcome to my Pets Web site.
Click for info on Dogs
Click for info on Cats
Click for info on Birds
Notepad<html><head><title> Home Page </title></head>
<body bgcolor=“#ffff00”>
<H1 align=“center”> Welcome to my Pets Web site. </H1>
Anchor Tag
<a href=“link">
Text to be displayed
</a>
<a href = “dogs.html” >
Click for info on Dogs
</a>
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<html><head><title> Home Page </title></head>
<body bgcolor=“#ffff00”>
<H1 align=“center”> Welcome to my Pets Web site. </H1>
Anchor Tag
<a href=“link">
Text to be displayed
</a>
<a href = “dogs.html” >
Click for info on Dogs
</a>
<a href = “cats.html”> Click for info on Cats </a>
<p>
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<html><head><title> Home Page </title></head>
<body bgcolor=“#ffff00”>
<H1 align=“center”> Welcome to my Pets Web site. </H1>
Anchor Tag
<a href="link">
Text to be displayed
</a>
<a href = “dogs.html” >
Click for info on Dogs
</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.
Click for info on Dogs
Click for info on Cats
Click for info on Birds
Notepad<html><head><title> Home Page </title></head>
<body bgcolor=“#ffff00”>
<H1 align=“center”> Welcome to my Pets Web site. </H1>
<a href = “dogs.html” >
Click for info on Dogs
</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
Welcome to my Pets Web site.
Click for info on Dogs
Click for info on Cats
Click for info on Birds
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>
<a href = “pets.html”> return </a>
</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>
<a href = “pets.html”> return </a>
</body></html>
21
<html><head><title> Birds</title></head>
<body bgcolor=“#00ff00”>
<H2 align=“center”> This is my web page about Birds</H2>
<a href = “pets.html”> return </a>
</body></html>
<html><head><title>Cats</title></head>
<body bgcolor=“#0000ff”>
<H2 align=“center”> This is my web page about Cats</H2>
<a href = “pets.html”> return </a>
</body></html>
<html><head><title> Dogs </title></head>
<body bgcolor=“#ff0000”>
<H2 align=“center”> This is my web page about Dogs</H2>
<a href = “pets.html”> return </a>
</body></html>
dogs.html cats.html birds.html
\my documents\My WebPages
22
<html><head><title> Home Page </title></head>
<body bgcolor=“#ffff00”>
<H1 align=“center”> Welcome to my Pets Web site. </H1>
<a href = “dogs.html” >
Click for info on Dogs
</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
C:\my Documents\My Web Files\pets.html
Disk Drive
Folder
29
C:\my Documents\My Web Files\pets.html
Disk Drive
Folder Folder
30
C:\my Documents\My Web Files\pets.html
Disk Drive
Folder Folder File
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
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
Welcome to my Pets Web site.
Click for info on Dogs
Click for info on Cats
Click for info on Birds
<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
FOLDER: My Web Files• pets.html• dogs.html• cats.html• birds.html
FOLDER: prior pets• hamsters.html• snakes.html
<a href=“birds.html”>
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
<a href=“prior pets/hamsters.html”>
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 ” </a>
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 = “ ” </a>
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 ” </a>
POP QUIZ
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 ” </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:frankr@udel.edu”>
<a href=“dogs.html" target="_blank"> Click Here </a>
Send mail to Frank </a>
EXTRA CREDIT !!!
top related