Program Development

1
HTM Section 2

• Hypertext Links
• Different section of same page
• On page link
• Different web page
• Different web site
• Links are underlined by the browser
• Browser default color

• New Codes
• 160 Space
• 183 Bullet (centered dot)

2
HTM Section 2
On Page Link
Single Web Page
Classes Grading Appointment - Safety
Classes This is some text for this particular
section of the web page. It has nothing to do
with the link but is just information
Grading This is some text for this particular
section of the web page. It has nothing to do
with the link but is just information
Appointment This is some text for this particular
section of the web page. It has nothing to do
with the link but is just information
Safety This is some text for this particular
section of the web page. It has nothing to do
with the link but is just information
3
HTM Section 2
On Page Link
Single Web Page
Classes Grading Appointment - Safety
Classes This is some text for this particular
section of the web page. It has nothing to do
with the link but is just information
Grading This is some text for this particular
section of the web page. It has nothing to do
with the link but is just information
Appointment This is some text for this particular
section of the web page. It has nothing to do
with the link but is just information
Safety This is some text for this particular
section of the web page. It has nothing to do
with the link but is just information
4
HTM Section 2
On Page Link

• Origination (From) of link
• Format
• lta hrefsomelabelgttextlt/agt
• somelabel name of destination
• Text heading of the link
• lt/agt end of tag

• Destination (To) of link
• Format
• lta namesomelabelgttextlt/agt
• somelabel name of destination
• Text heading of the link
• lt/agt end of tag

Go from one area on a page to another area Note
the in the Origination HTML
5
I. On Page Links Page 2.04 2.10
6
HTM Section 2
Links to other same site pages
Home Page
7
HTM Section 2
Links to other same site pages

• Origination (From) of link
• Format
• lta hrefsomepage.htmgttextlt/agt
• somepage.htm name of destination file
• Text heading of the link
• lt/agt end of tag

• Destination (To) of link
• Page must exist in same folder

Go from one page to another page in the same web
site
FYI link to a file in the preceding
folder ../somefile.htm
8
II. Same Site Page Links Page 2.10 2.21
9
HTM Section 2
Links to other site pages - Addressing

• Absolute Path Name
• Precise location of the file
• Preceded by a forward slash /
• Relative Path Names
• Same folder filename.htm
• Previous folder ../filename.htm
• Sub folder subfolder/filename.htm

• Origination (From) of link
• Format
• Same folder
• lta hrefsomepage.htmgttextlt/agt
• Sub folder
• lta href/somepage.htmgttextlt/agt
• lta href/somefolder/somepage.htmgttextlt/agt
• Previous folder
• lta href../somepage.htmgttextlt/agt

10
HTM Section 2
Links to other sites on the Internet

• Origination (From) of link
• Format
• lta hrefhttp//www.somesite.extensiongttextlt/agt
• Examples
• lta hrefhttp//www.somesite.comgttextlt/agt
• lta hrefhttp//www.somesite.com/directorygttextlt/
  agt

FYI Default page is index.htm or index.html if
no HTML file is specified
11
HTM Section 2
Pages in a new window

• lta hrefhttp//url targetwindownamegttextlt/agt
• Opens the linked document in the named window
  (frames)

• lta hrefhttp//url target_blankgttextlt/agt
• Opens the linked document in a new window
• Note no quotation marks around the _blank
• Works with any name of a non-existing window
• Example targetx

12
HTM Section 2
Email Link
Format lta hrefmailtoemailaddressgttextlt/agt
13
LAB/Homework Assignment
Update Mr. Dubes Web SitePages 2.22
2.32 Email address to use Morris.fulcher_at_baker.e
du Put Test from WEB111A in the
Subject line if you wish to send a test email