html5-img
1 / 42

Another example using headings

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

megan
Download Presentation

Another example using headings

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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>

More Related