HTML/XHTML
Hyperlinks
Discussion
- Hyperlinks
- Links (hyperlinks) are used to go from page to page.
- Links can go to any type of file or page that is uploaded to the web such as another
web page, an image, pdf, music, video, text files, word files, spreadsheets, etc.
- The HTML tag used to define a hyperlink is the anchor or <a> tag.
- The syntax of the anchor tag is
<a href="url">Some link</a>
- The attribute href stands for hyperlink reference and is assigned the address of
the link.
- url (Uniform Resource Locator or Universal Resource Locator) is the address of the link. The
standard form of an address to a page is
http://www.austincc.edu/jscholl/
- http means HyperTextTransferProtocol
- :// is a separator between the protocol and the adderess
- www stands for World Wide Web
- austincc is the domain name for Austin Community College
- edu is the domain extension and describes the doman as being an educational institution
- / is another separator and designates another folder
- jscholl is my account on the Austin Community College server and has the name jscholl
- When no page (or other file) is designated in the address, the default page is displayed. Each
server sets the allowable names for default pages and the order of precedence. Common default pages are
index.html
index.htm
index.shtml
index.php
index.php5
index.php4
index.php3
index.cgi
default.html
default.htm
home.html
home.htm
Index.html
Index.htm
Index.shtml
Index.php
Index.cgi
Default.html
Default.htm
Home.html
Home.htm
placeholder.html
- We will only use index.htm or index.html for our default page names.
- The words between the open and close a tag are what appear on the page for the user to see and
click on for access to the page. There are four states of a link called link, visited, hover, and active.
The default for the link in the "link" state is underlined and blue.
- When a url contains a full Internet address, it is called an abolute path or absolute link.
- When you are linking to a page located on a different server, you must always use an absolute link.
- When pages or files are stored on the same server as your page resides, you can use a relative path or relative link.
- The format for a relative path is
<a href="somePage.htm">Some page on the same server in the same folder</a>
<a href="subfolder/somePage.htm">Some page on the same server in a sub folder of the current folder</a>
<a href="../somePage.htm">Some page on the same server in a folder above the current folder</a>
- Use the / separator for each folder in the path.
- Use ../ for each heirarchial level higher than the current folder. For example from the page
http://www.austincc.edu/jscholl/summer2009/javascript/teachers/HTML/links.htm you could link to the
testing center page using the relative path
<a href="../../../../../testctr/hours.php
to reach the testing center hours page on the ACC server.
- Linking to a specific place on a page uses a named anchor.
- A named anchor requires 2 parts.
- a link to a specific place on the page
- code at the location where the link is directed
for example view my syllabus
- The menu at the top of the page links to locations within the page.
- View the source code of the syllabus page.
The menu code links to different locations on the page
<a href="#courseInfo">Course Information</a> |
<a href="#policies">Policies</a> |
<a href="#catalog">Catalog</a> |
<a href="#text">Text</a> |
<a href="#rationale"> Rationale</a> |
<a href="#objectives"> Objectives</a> |
<a href="#requirements"> Requirements</a> |
<a href="#grades">Grades</a> |
<a href="#homework"> Assignments</a> |
<a href="#exams">Exams</a>
- Each location is coded with an anchor and a name, for example:
<a name="courseInfo"></a>
- Since there is not text between the opening and closing a tag, nothing is displayed on the screen.
- You can link to a specific location on a different page as long as the specific location has a name and
you add the # and the name to the end of the address in the link.
- Opening a page in a new window
- By default a link will open in the same window. You can code the link to open in a new window. Prior to
XHTML strict, the target attribute was used to instruct the browser to open the link in a new window.
When using XHTML strict, you cannot use the target="_blank" attribute. The following link will open in a new
window and complies with XHTML strict coding guidelines:
<a href="http://www.htmlhelp.com/reference/html40/entities/"
onclick="window.open(this.href,'_blank');return false;">
Character Entities</a>
- Values for instructing how links are to open
name -- opens a link in a window of the name used
_blank -- opens a new window
_parent -- when using frames, opens in the current window (frameset)
_self -- opens in the same window
_top -- opens a window in the original window and cancels all frames
new -- opens a window named new
- Email links
- The mailto link is not as valuable as it once was since many users do not configure their computers to
associate with a mail program and Internet Explorer does not allow the body of a message to
send through a form using HTML and JavaScript. Most mail coding is now done through server-side scripting.
Practice:
- Create an index page
- Your page should link to
your myFirstPage.htm page in your HTML folder in the same window
the requirements location on my syllabus page mentioned above in a new window
- Add a heading, an image, and text to your index page.
- Add an anchor with a name to each part of your index page.
- Create a menu at the top of your page to link to each part of your index page. (If your entire page
is viewable without scrolling, you will not be able to see the internal link focusing.
- Make any corrections for any page that does not validate or display correctly.