anchor

Another example using headings
• Suppose we want to write a web document
which has two main sections
• Suppose the first section has two
subsections
• And suppose the second section has three
subsections
• Thus, there exists Section 1, Section 1.1,
Section 1.2, Section 2, Section 2.1, Section
2.2, Section 2.3
We represent this structure using
headings
<BODY>
<H1> Section 1 </H1>
<H2> Section 1.1 </H2>
<H2> Section 1.2 </H2>
<H1> Section 2 </H1>
<H2> Section 2.1 </H2>
<H2> Section 2.2 </H2>
<H2> Section 2.3 </H2>
</BODY>
Of course, there would be text
<BODY>
<P>
This manual is divided into two main
sections.
</P>
<H1> Section 1 </H1>
<P>
This section has two sub-sections. </P>
<H2> Section 1.1 </H2>
Lists
• A very common kind of structure to have in
a document is a list
• A list is specified in HTML by enclosing it
• between a pair of tags
• There are different kinds of lists, including:
– unordered lists
– ordered lists
Example lists
• An ordered list:
1. January
2. February
3. March
• An unordered list:
• wine
• bread
• cheese
Tagging lists
• Ordered lists are contained between the
<OL> and </OL> tags
• Unordered lists are contained between the
<UL> and </UL> tags
• In each type of list, a list item is tagged by
putting it between an <LI> and </LI> tag
<OL>
<LI> Janvier </LI>
<LI> Fevrier </LI>
<LI> Mars </LI>
</OL>
<UL>
<LI> Wine </LI>
<LI> Bread </LI>
<LI> Cheese </LI>
</UL>
Using Hyperlinks to Structure
Documents:
Anchor Tags
Traditional tree-like structure:
Trees can be laid out in a linear
fashion:
• Book
– Chapter 1
• Section 1
– Section 1.1
– Section 1.2
• Section 2
– Chapter 2
• Section 2
But some information structures
are more complicated:
But some information structures
are more complicated:
That is, some documents are not
trees, but are graphs:
• Each node in the last slide is a page
describing some entity, either a city or a
person
• In the description of each person, there is a
link to the description of his home-town
• In the description of each city, there is a link
to the description of the person who is its
mayor
HTML allows us to specify
documents which are graphs:
• The tool which HTML provides for building
graph-like documents is called an anchor
Anchors
Anchors
• An anchor appears in one document
Anchors
• An anchor appears in one document
• But it usually points to another document
Anchors (contd.):
• An anchor is enclosed within a pair of tags:
– the start anchor tag <A>
– the end anchor tag </A>
Anchor Tags
• Until now, we have seen only simple tags
• The start anchor tag, <A>, is a structured
tag
– that is, it has sub-parts
• The sub-parts of a tag are called attributes
• The start anchor tag, <A>, can have several
attributes
– for now, we will look at only one attribute, the
HREF attribute
Anchor tags (contd.)
• A start anchor tag with a HREF attribute
looks like this
<a href=“some-URL”>
• Some examples:
<A HREF=“http://student.cs.ucc.ie/cs4400/ra1”>
<A HREF=“http://www.ucc.ie”>
<A HREF=“htp://www.microsoft.com”>
Cs 3314 got here on 10 oct 2005
Anchors (contd.)
• An anchor can point from one web page to
another web page
• The HREF attribute in the start tag of the
anchor says where the anchor is pointing
• We still have to specify what the anchor
looks like in the document where it appears
• This is done by specifying the content that
lies between the <A> and </A> tags
<HTML>
<HEAD> <TITLE> The City of Cork </TITLE> </HEAD>
<BODY>
<H1> Cork </H1>
<P>
Cork is the second-largest city in Ireland.
It's mayor is
<A HREF="http://www.iol.ie/people/fred.htm"> Fred O'Connor </A>.
It's population is ...
</P>
</BODY>
</HTML>
<HTML>
<HEAD> <TITLE> The City of Cork </TITLE> </HEAD>
<BODY>
<H1> Cork </H1>
<P>
Cork is the second-largest city in Ireland.
It's mayor is
<A HREF="http://www.iol.ie/people/fred.htm"> Fred O'Connor </A>.
It's population is ...
</P>
</BODY>
</HTML>
Anchors can be placed anywhere
normal document content can
appear:
• They can appear in the middle of
paragraphs of text, as we have seen
• They can appear as items in list, (as seen in
the next slide)
<HTML>
<HEAD> <TITLE> Politics in Ireland </TITLE> </HEAD>
<BODY>
<H1> Presidents </H1>
<P>
The presidents of Ireland are:
</P>
<OL>
<LI> <A HREF="http://www.iol.ie/pres/hyde.htm"> Douglas Hyde </A> </LI>
<LI> <A HREF="http://www.iol.ie/pres/kelly.htm"> Sean T. O'Kelly </A></LI>
<LI> <A HREF="http://www.iol.ie/pres/dev.htm"> Eamon De Valera </A></LI>
<LI> ...</LI>
</OL>
</BODY>
</HTML>
Anchors can be placed anywhere
normal document content can
appear:
• They can appear in the middle of
paragraphs of text, as we have seen
• They can appear as items in list
• They can even appear in headings (as seen
in the next slide)
<HTML>
<HEAD> <TITLE> Politics in Ireland </TITLE> </HEAD>
<BODY>
<H1> Presidents </H1>
<H2>
<A HREF="http://www.iol.ie/presidents/hyde.htm"> Douglas Hyde </A>
</H2>
<P> He founded the Gaelic League ... blah blah ... </P>
<H2>
<A HREF="http://www.iol.ie/presidents/dev.htm"> Eamon de Valera </A>
</H2>
<P> He took part in 1916 ... blah blah ... </P>
</BODY>
</HTML>
Organizing groups of anchors:
• Frequently, all the anchors in a document
have HREFs that are very similar:
<A HREF="http://www.iol.ie/pres/hyde.htm"> Douglas Hyde </A>
<A HREF="http://www.iol.ie/pres/kelly.htm"> Sean T. O'Kelly </A>
<A HREF="http://www.iol.ie/pres/dev.htm"> Eamon De Valera </A>
• It would be good if we could avoid having
to repeat the common parts of these HREFs
• HTML provides the <BASE> tag to meet
this need
<HTML>
<HEAD>
<TITLE> Politics in Ireland </TITLE>
<BASE HREF=“http://www.iol.ie/pres/”>
</HEAD>
<BODY>
<H1> Presidents </H1>
<P>
The presidents of Ireland are:
</P>
<OL>
<LI> <A HREF="hyde.htm"> Douglas Hyde </A></li>
<LI> <A HREF="kelly.htm"> Sean T. O'Kelly </A></li>
<LI> ...
</OL>
</BODY>
</HTML>
The <base> tag:
• This appears within the <head> element of a
HTML specification:
<head>
<title> some-title </title>
<base href=“some-URL” >
</head>
• The href in a <base> tag is prepended to
whatever hrefs appear in <a> tags
The <BASE> tag:
• Thus
<BASE HREF=“http://www.iol.ie/pres/”>
...
<A HREF="hyde.htm"> Douglas Hyde </A>
<A HREF="kelly.htm"> Sean T. O'Kelly </A>
• is equivalent to
<A HREF=”http://www.iol.ie/pres/hyde.htm"> Douglas Hyde </A>
<A HREF=”http://www.iol.ie/pres/kelly.htm"> Sean T. O'Kelly </A>

Download Report

anchor

Paperzz.com

Your Paperzz