Lesson 7 - Hypertext Links

Lesson 7 - Hypertext Links

Web Pages vs Web Site week4.html week5.html X O table1.html
Apples Bananas Carrots Tomatoes Watermelons Eat: Fruits & Veggies 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 week4.html week5.html X O 30 29 28 27 26 25 24 23 22 21 20 19 18 17 16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1 Sat Fri Thu Wed Tue Mon Sun April 2009 table1.html calendar.html

Web Page vs. Web Site Home

Web Page vs. Web Site Master Page Page 1 Page 4 Page 2 Page 3

Welcome to my Pets Web page.
File Name = pets.html 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

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

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

Created with an ANCHOR tag
Hypertext links Created with an ANCHOR tag <a>

Hypertext links Created with an ANCHOR tag <a> <a href=“link”> Internet page Document Downloadable file

Hypertext links Created with an ANCHOR tag <a href=“link”> </a> Text to be displayed

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>

pets.html Welcome to my Pets Web site. Click for info on Dogs Click for info on Cats Click for info on Birds Notepad dogs.html <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>

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> <a href = “dogs.html” > Click for info on Dogs </a> Anchor Tag <a href=“link"> Text to be displayed </a>

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> <a href = “dogs.html” > Click for info on Dogs </a> <br> Anchor Tag <a href = “cats.html”> Click for info on Cats </a> <a href=“link"> Text to be displayed </a>

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> <a href = “dogs.html” > Click for info on Dogs </a> <br> <a href = “cats.html”> Click for info on Cats </a> Anchor Tag <a href="link"> <br> <a href = “birds.html”> Click for info on Birds </a> Text to be displayed </a>

Save as: pets.html pets.html Notepad 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> <br> <a href = “cats.html”> Click for info on Cats </a> Save as: pets.html <br> <a href = “birds.html”> Click for info on birds </a> </body> </html>

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

Save as: dogs.html dogs.html Notepad This is my web page about Dogs
return Notepad <html> <head> <title> Dogs </title> </head> <body bgcolor=“#ff0000”> <H2 align=“center”> This is my web page</H2> <H2 align=“center”>about Dogs</H2> <a href = “pets.html”> return </a> </body> </html> Save as: dogs.html

Save as: cats.html cats.html This is my web page about Cats return
<head> <title> Cats </title> </head> <body bgcolor=“#0000FF”> <H2 align=“center”> This is my web page</H2> <H2 align=“center”>about Cats</H2> <a href = “pets.html”> </a> </body> </html> Animals.html This is my web page about animals return Notepad Save as: cats.html <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>

birds.html This is my web page about Birds return <html>
<head> <title> Birds </title> </head> <body bgcolor=“#00ff00”> <H2 align=“center”> This is my web page</H2> <H2 align=“center”>about Birds</H2> <a href = “pets.html”> return </a> </body> </html> birds.html This is my web page about Birds return

\my documents\My WebPages
dogs.html cats.html birds.html <html> <head> <title> Dogs </title> </head> <body bgcolor=“#ff0000”> <H2 align=“center”> This is my web page</H2> about Dogs</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</H2> about Cats</H2> <a href = “pets.html”> return </a> </body> </html> <html> <head> <title> Birds</title> </head> <body bgcolor=“#00ff00”> <H2 align=“center”> This is my web page</H2> about Birds</H2> <a href = “pets.html”> return </a> </body> </html> \my documents\My WebPages

\my documents\My WebPages
pets.html <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> <br> <a href = “cats.html”> Click for info on Cats </a> <br> <a href = “birds.html”> Click for info on Birds </a> </body> </html> \my documents\My WebPages

FILE NAMING & REFERENCING

Cases of Links Linking files that are in the same folder
Linking files in different folders on the same computer Relative reference Absolute reference Linking to pages on Internet Linking to s Linking to points in same document

FILE REFERENCING Absolute vs. Relative

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

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

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

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

Disk Drive Folder Folder

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

My Documents Folder My Web Files Folder pets.html birds.html cats.html dogs.html

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

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

Important Letters Folder My Web Files Folder Family Web Folder
My Documents Folder Finances My Web Files Folder 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 Family Web Folder Pets Web Folder Important Letters Business Web Folder

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 the point of reference. Relative Reference in same folder as the web page

My Web Files pets.html <a href = “dogs.html” </a> dogs.html cats.html birds.html

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

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

<a href=“birds.html”>
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”>

<a href=“prior pets/hamsters.html”>
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”>

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 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 = “ ” </a> ../cats.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>

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>

FILE REFERENCING Absolute vs. Relative
An ABSOLUTE REFERENCE defines the entire path to a file. <a href= “ ”> Click for info on Dogs </a> <a href=“ Click to go to GOOGLE</a>

~frankr

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 “ / ”

EXTRA CREDIT !!! Anchor Tag Options
<a href=“dogs.html”> Click Here </a> <a href=“dogs.html" target="_blank"> Click Here </a> <a Send mail to Frank </a>

Lesson 7 - Hypertext Links

Similar presentations

Presentation on theme: "Lesson 7 - Hypertext Links"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Lesson 7 - Hypertext Links

Similar presentations

Presentation on theme: "Lesson 7 - Hypertext Links"— Presentation transcript:

Similar presentations

About project

Feedback