06 Sep 2018
Class Schedule
21 Aug | intro
23 Aug | clients
28 Aug | servers
30 Aug | networks
04 Sep | basics lab
06 Sep | HTML - practice |
theory |
tags |
links |
HTML terms |
02.01 |
next session
11 Sep | presentational layer
18 Sep | working with layers
20 Sep | behavior layer
25 Sep | images & design
27 Sep | website lab
02 Oct | object layers
04 Oct | tools that read markup
09 Oct | document markup lab
11 Oct | spreadsheets, formulas & functions
16 Oct | data display
18 Oct | Fall Break
23 Oct | database tools
25 Oct | spreadsheets lab
30 Oct | relational databases
01 Nov | tables
06 Nov | relationships
08 Nov | input & output
13 Nov | SQL
15 Nov | complex queries
20 Nov | databases lab
22 Nov | Thanksgiving
27 Nov | presentation design
29 Nov | presentation delivery
04 Dec | presentation lab
13 Dec | 0800-1100 | final in class presentation
This work
is licensed under a
Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
home & schedule | class blog | syllabus | contact | grades
Anchor tags allow you to embed instructions that tell the browser to open a link in another location - either another place in the current page, or another web page, or another place in another web page.
Using anchor tags to link to other locations
Remember: tag attribute value
The next step is to add some simple hypertext links
This too, is straightforward. You can add a link to (or anchor to) our course home page by adding the following code to your page (by typing this text into your original file, still on your computer).
<a href="http://ils.unc.edu/courses/2018_fall/inls161_003/index.html">The INLS161-003 Home Page</a>
The above <a> anchor tag can appear anywhere between the <body> and </body> tags.
href (or hypertext reference) is an attribute of the tag.
In this case, the href has a value which
indicates what web page is on the other end
of the link you just created (in other words, what page should get fetched if you click on the link).
Each tag in HTML has a set of possible attributes, some required, some optional. The best ways to learn about the possibilities is to consult an HTML reference and to look at HTML source code.
Note that like other tags, the <a> anchor tag must be mirrored with an </a> close anchor tag. You are connecting everything between the two tags to that anchor.
back to top
Using a simple text editor,
add the anchors below to within the body of your local page to create links to pages both on and off your website
<p>This web site is divided into a minimum of three areas, with a minimum of one of the areas having subordinate pages as well. Specifically, the areas are </p>
<ol>
<li><a href="02_aboutme.html">About me</a>. This area may have subordinate pages for a fuller Curriculum Vitae or a résumé. </li>
<li><a href="02_classes.html">Classes</a>. This area will have subordinate pages for four tasks due as part of <a href="http://ils.unc.edu/courses/2018_fall/inls161_003/"> INLS161-003 Information Tools</a>
<ul>
<li><a href="03_classes_task03.html">Document Markup</a></li>
<li><a href="03_classes_task04.html">Spreadsheets</a></li>
<li><a href="03_classes_task05.html">Relational Databases</a></li>
<li><a href="03_classes_task06.html">Presentational Graphics</a></li>
</ul>
</li>
<li><a href="02_interests.html">Interests</a>. This area may have subordinate pages for fuller explorations of personal interests.</li>
</ol>
Test it out. Paste your new code into your index file using your text editor and look at it, first in your text editor, and then in your browser of choice. Note that you probably don't already have these other pages. However, if you create them, this page now has a link to them. You can choose your own page file names; I used these names simply to remind myself that several of the pages are second level pages, while others are third level pages.
Note also that we are using some special characters in this HTML code.
For example, résumé is rendered in a browser as
résumé
back to top
Note the difference between anchors and the references they use:
An ABSOLUTE REFERENCE takes you to one and only one specific location.
<a href="http://ils.unc.edu/courses/2018_fall/inls161_003/"> INLS161-003 Information Tools</a>
In our case, we used an absolute reference to go to our class home page.
A RELATIVE REFERENCE takes you to a location that is hierarchically relative to the specific location of the reference.
<a href="03_classes_task03.html"> document markup task</a>
In our case, we used relative references to point to files that we have not yet included in our file structure, but are located in the same directory as the page on which they are written. When we create pages with those file names, the anchor link will work.
back to top
Internal Links
It's really easy to create internal links in an HTML document. This is important if you have a long document and you want to be able to jump around or if you have a table of contents and you want to allow the reader to jump directly to a chapter or a section. We'll look at creating internal links using your page.
To do this, you actually must create two anchors in your HTML that represent the two ends of the hypertext link. The link that you click on looks exactly like a normal anchor except that the href attribute is slightly different. Try this
- Insert the following at the top of your page: <a href="#bottom">Jump to the Bottom </a>
- and the following at the bottom of the page: <p id="bottom">Bottom of page</p>
<a href="#bottom">Jump to the Bottom</a>
<p>This web site is divided into a minimum of three areas, with a minimum of one of the areas having subordinate pages as well. Specifically, the areas are</p>
<ol>
<li><a href="02_aboutme.htm">About me</a>. This area may have subordinate pages for a fuller Curriculum Vitae or a résumé.</li>
<li><a href="02_classes.htm">Classes</a>. This area will have subordinate pages for four tasks due as part of <a href="http://ils.unc.edu/courses/2018_fall/inls161_003/"> INLS161-003 Information Tools</a></li>
<ul>
<li><a href="03_classes_task03.htm">Document Markup</a></li>
<li><a href="03_classes_task04.htm">Spreadsheets</a></li>
<li><a href="03_classes_task05.htm">Relational Databases</a></li>
<li><a href="03_classes_task06.htm">Presentational Graphics</a></li>
</ul>
</li>
<li><a href="02_interests.htm">Interests</a>. This area may have subordinate pages for fuller explorations of personal interests.</li>
</ol>
<p id="bottom">Bottom of page</p>
In this example, the top anchor is the link that you would click on, and the paragraph with a special ID is the place that you would jump to. Note that the top anchor element contains a " # " in the href and the bottom ID element does not.
Note that each time you see on these pages,
you are seeing an anchor (<a href="#top">)
to an id on line 27 (id="top").
back to top
Jumping to the middle of another page
No problem, provided that there are anchors of the second form ( with an "id" attribute) in that file.
Try this: Insert the following link to a the location of your gradesheets in your page:
<a href="http://ils.unc.edu/courses/2018_fall/inls161_003/
206b.structural.html#structure">well-formed web pages</a>
It might look like this in your code
<li><a href="02_interests.htm">Interests</a>. This area may have subordinate pages for fuller explorations of personal interests. One interest I have is <a href="http://ils.unc.edu/courses/2018_fall/inls161_003/
206b.structural.html#structure">well-formed web pages</a></li>
Read the page into your browser and click on the link.
It's wise to always provide a way for the user to go back up to the top of the page too. You can use a text anchor
-
such as this one [top]
- or you can use a hyperlinked symbol, like the arrow to the right
- both go to the id="top" attribute and its associated value on line 26 of this page.
back to top
HTML - practice | theory | tags | links | HTML terms | 02.01 | next session