another example using headings
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
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”>
Anchors (contd.)
• An anchor points 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> <A HREF="kelly.htm"> Sean T. O'Kelly </A> <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>