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 Section 1 Section 1.1 Section 1.2 Section 2 Section 2.1 Section 2.2 Section 2.3

Of course, there would be text This manual is divided into two main sections. Section 1 This section has two sub-sections. Section 1.1

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 and tags Unordered lists are contained between the and tags In each type of list, a list item is tagged by putting it between an and tag

Janvier Fevrier Mars

Wine Bread Cheese

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:

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

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 –the end anchor tag

Anchor Tags Until now, we have seen only simple tags The start anchor tag,, is a structured tag –that is, it has sub-parts The sub-parts of a tag are called attributes The start anchor tag,, 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 Some examples:

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 and tags

The City of Cork Cork Cork is the second-largest city in Ireland. It's mayor is Fred O'Connor. It's population is...

The City of Cork Cork Cork is the second-largest city in Ireland. It's mayor is Fred O'Connor. It's population is...

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)

Politics in Ireland Presidents The presidents of Ireland are: Douglas Hyde Sean T. O'Kelly Eamon De Valera...

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)

Politics in Ireland Presidents Douglas Hyde He founded the Gaelic League... blah blah... Eamon de Valera He took part in blah blah...

Organizing groups of anchors: Frequently, all the anchors in a document have HREFs that are very similar: Douglas Hyde Sean T. O'Kelly Eamon De Valera It would be good if we could avoid having to repeat the common parts of these HREFs HTML provides the tag to meet this need

Politics in Ireland Presidents The presidents of Ireland are: Douglas Hyde Sean T. O'Kelly...

The tag: This appears within the element of a HTML specification: some-title The href in a tag is prepended to whatever hrefs appear in tags

The tag: Thus... Douglas Hyde Sean T. O'Kelly is equivalent to Douglas Hyde Sean T. O'Kelly