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

Use lower- case tags –The picture on this slide is very old –It shows upper-case tags, which were allowed back then –Upper-case tags are not allowed any more –Do not use upper-case tags

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

HTML tags must be used only for specifying the structure of documents So far, we have seen these tags: – Each of these tags carries a meaning –It introduces a particular kind of structure into a document HTML tags must be used only for this purpose They must never be abused to achieve a desired appearance –For example, the tag must never be used to introduce empty space into the appearance of a document

Never use presentational tags Some years ago, a version of HTML introduced some tags that were intended to allow programmers to control the appearance web pages The tags, called presentational tags, should never be used. They include – These tags remain in modern HTML, only to admit legacy web pages Style sheets should be used instead of presentational tags

Tags with an ambiguous status There are a few tags which some people regard as presentational but which other people regard as structural These include – It is always possible to achieve the effect of these tags by using style sheets So, try to avoid using them

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 tag

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:

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