Download
another example using headings n.
Skip this Video
Loading SlideShow in 5 Seconds..
Another example using headings PowerPoint Presentation
Download Presentation
Another example using headings

Another example using headings

112 Vues Download Presentation
Télécharger la présentation

Another example using headings

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. 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

  2. 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>

  3. 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>

  4. 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

  5. Example lists • An ordered list: • 1. January • 2. February • 3. March • An unordered list: • wine • bread • cheese

  6. 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

  7. 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

  8. <ol> • <li> Janvier </li> • <li> Fevrier </li> • <li> Mars </li> • </ol>

  9. <ul> • <li> Wine </li> • <li> Bread </li> • <li> Cheese </li> • </ul>

  10. 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

  11. 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

  12. 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

  13. Using Hyperlinks to Structure Documents: Anchor Tags

  14. Traditional tree-like structure:

  15. 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

  16. But some information structures are more complicated:

  17. But some information structures are more complicated:

  18. 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

  19. HTML allows us to specify documents which are graphs: • The tool which HTML provides for building graph-like documents is called an anchor tag

  20. Anchors

  21. Anchors • An anchor appears in one document

  22. Anchors • An anchor appears in one document • But it usually points to another document

  23. Anchors (contd.): • An anchor is enclosed within a pair of tags: • the start anchor tag <a> • the end anchor tag </a>

  24. 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

  25. 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”>

  26. 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

  27. <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>

  28. <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>

  29. 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)

  30. <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>

  31. 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)

  32. <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>

  33. 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

  34. <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>

  35. 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

  36. 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>