Another example using headings Suppose we want to write a web document which has two main sections...
-
date post
19-Dec-2015 -
Category
Documents
-
view
212 -
download
0
Transcript of Another example using headings Suppose we want to write a web document which has two main sections...
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
• 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 <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>
HTML tags must be used only for specifying the structure of documents
• So far, we have seen these tags:– <p> <h1> <h2> <ol> <ul> <li>
• 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 <p> 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– <basefont> <big> <b> <center> <font> <i> <s> <small>
<strike> <sub> <sup> <tt> <u>
• 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 – <br> <hr> <em> <strong>
• 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:
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
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 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>