Examples of HTML Links

Anchors

Review of link to web page

Link to Fermilab Education Server's precollege index page at URL "http://www-ed.fnal.gov/search/precol_index.html". Label the link "Fermilab Precollege Programs".

Link to specific place in web page: anchor location

Link directly to the outreach programs on Fermilab Education Server's precollege index page at "http://www-ed.fnal.gov/search/precol_index.html". (The anchor for this location on this page is named "out".) Label the link "Fermilab Precollege TRC Programs".

Link to specific place in same web page

Make an Anchor in this page named "same_page". Label it "Anchor in Same Page".

Images

Normal link to HTML page

Link to the Fermilab Education Center home page at "http://www-ed.fnal.gov/ed_home.html". Label the link "Fermilab Education Center Home Page".

Link to external image

Link to the picture at "http://www-ed.fnal.gov/graphics/ed_home.gif". Label the link "Fermilab Education Center Home Picture".

Include an inlined image in your page

Include the picture at "http://www-ed.fnal.gov/graphics/fermi_ed_logo.gif".

Use an image to link to another web page

Include the picture "http://www-ed.fnal.gov/graphics/fermi_ed_logo.gif" as a link to the Fermilab Education Center home page at "http://www-ed.fnal.gov/ed_home.html".

Use an image to link to another image

Include the picture "http://www-ed.fnal.gov/graphics/fermi_ed_logo.gif" as a link to the picture at "http://www-ed.fnal.gov/graphics/ed_home.gif".

Hierarchy

Link to a page in the same folder

Link to the file "another_page.html" in the same folder as this file. Label the link "Another page in the same folder".

Link to a page in a sub folder

Link to the file "lower_page.html" in the sub folder "subfolder". ("subfolder" and this file "train_link_examples.html" are in the same folder.) Label the link "Another page in a subfolder".

Link to a page in a parent folder

Edit the file "lower_page.html" in the folder "subfolder". (i.e. "subfolder" and this page "train_link_examples.html" should be at the same level.) Add a link in "lower_page.html" to train_link_examples.html. Label the link "Page in parent's folder". Write the text of the link here as a comment for later reference.

Anchors

Link to specific place in same web page

Link back to the "same_page" anchor earlier in this page. Label the link "Back to local anchor".