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

callum-kramer
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

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

  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>

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

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

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

  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. Using Hyperlinks to Structure Documents: Anchor Tags

  11. Traditional tree-like structure:

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

  13. But some information structures are more complicated:

  14. But some information structures are more complicated:

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

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

  17. Anchors

  18. Anchors • An anchor appears in one document

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

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

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

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

  23. Anchors (contd.) • An anchor points 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

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

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

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

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

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

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

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

  31. <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> <A HREF="kelly.htm"> Sean T. O'Kelly </A> • <LI> ... • </OL> • </BODY> • </HTML>

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

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