• Home

  • Documents

  • Another example using headings Suppose we want to write a web document which has two main sections...
42
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

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

  • View
    212

  • Download
    0

Embed Size (px)

Citation preview

Page 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

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

Page 2: 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

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>

Page 3: 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
Page 4: 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

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>

Page 5: 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
Page 6: 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

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

Page 7: 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

Example lists

• An ordered list: 1. January 2. February 3. March

• An unordered list:• wine• bread• cheese

Page 8: 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
Page 9: 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

• 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

Page 10: 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

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

Page 11: 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

<ol>

<li> Janvier </li>

<li> Fevrier </li>

<li> Mars </li>

</ol>

Page 12: 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

<ul>

<li> Wine </li>

<li> Bread </li>

<li> Cheese </li>

</ul>

Page 13: 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

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

Page 14: 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

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

Page 15: 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

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

Page 16: 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

Using Hyperlinks to Structure Documents:

Anchor Tags

Page 17: 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

Traditional tree-like structure:

Page 18: 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

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

Page 19: 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

But some information structures are more complicated:

Page 20: 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

But some information structures are more complicated:

Page 21: 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

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

Page 22: 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

HTML allows us to specify documents which are graphs:

• The tool which HTML provides for building graph-like documents is called an anchor tag

Page 23: 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

Anchors

Page 24: 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

Anchors

• An anchor appears in one document

Page 25: 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

Anchors

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

Page 26: 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

Anchors (contd.):

• An anchor is enclosed within a pair of tags:– the start anchor tag <a>– the end anchor tag </a>

Page 27: 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

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

Page 28: 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

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

Page 29: 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

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

Page 30: 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

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

Page 31: 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

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

Page 32: 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
Page 33: 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

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)

Page 34: 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

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

Page 35: 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
Page 36: 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

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)

Page 37: 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
Page 38: 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

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

Page 39: 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

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

Page 40: 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

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

Page 41: 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 <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

Page 42: 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 <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>


OData Version 4.01. Part 1: Protocol · Web view11.3 Requesting Changes and subsections 11.5.4 Functions and subsections POST requests: 11.4.2 Create an Entity and subsections 11.4.7.1

OData Version 4.01. Part 1: Protocol · Web view11.3 Requesting Changes and subsections 11.5.4 Functions and subsections POST requests: 11.4.2 Create an Entity and subsections 11.4.7.1

Documents
Suppose I have two C programs: M1.c and M2.c them halts ...webhome.cs.uvic.ca/~wendym/courses/320/17/notes/320_40_self... · 1 Suppose I have two C programs: M1.c and M2.c I remember

Suppose I have two C programs: M1.c and M2.c them halts ...webhome.cs.uvic.ca/~wendym/courses/320/17/notes/320_40_self... · 1 Suppose I have two C programs: M1.c and M2.c I remember

Documents
Ecological Subsections of Katmai National Park & Preserve, Alagnak Wild … · 2019. 4. 9. · WAM2 Walatka Mountains –Valley Bottoms..... 32 Figure 1. Map of Ecological Subsections

Ecological Subsections of Katmai National Park & Preserve, Alagnak Wild … · 2019. 4. 9. · WAM2 Walatka Mountains –Valley Bottoms..... 32 Figure 1. Map of Ecological Subsections

Documents
WIRELESS TRANSMISSION 649of propagation qualitatively. Different types of fading are discussed in the other two subsections. 13.3.1 Mechanisms Radio waves suffer attenuation and dispersion

WIRELESS TRANSMISSION 649of propagation qualitatively. Different types of fading are discussed in the other two subsections. 13.3.1 Mechanisms Radio waves suffer attenuation and dispersion

Documents
SUBSECTIONS - Zep.ee

SUBSECTIONS - Zep.ee

Documents
Quantum phases in resonantly-interacting gasesA collision of two particles is well described by scattering theory, so we will introduce some important concepts here. Suppose that two

Quantum phases in resonantly-interacting gasesA collision of two particles is well described by scattering theory, so we will introduce some important concepts here. Suppose that two

Documents
FLEXIBLE LEARNING APPROACH TO PHYSICS ÊÊÊ Module M1.3 ... · Subsections 3.1 to 3.3 are concerned with the principles and conventions of graph drawing, while Subsections 3.4 to

FLEXIBLE LEARNING APPROACH TO PHYSICS ÊÊÊ Module M1.3 ... · Subsections 3.1 to 3.3 are concerned with the principles and conventions of graph drawing, while Subsections 3.4 to

Documents
FLEXIBLE LEARNING APPROACH TO PHYSICS ÊÊÊ · PDF fileÊÊÊ FLEXIBLE LEARNING APPROACH TO PHYSICS ... Subsection 2.2 and the subsequent two subsections are concerned with the

FLEXIBLE LEARNING APPROACH TO PHYSICS ÊÊÊ · PDF fileÊÊÊ FLEXIBLE LEARNING APPROACH TO PHYSICS ... Subsection 2.2 and the subsequent two subsections are concerned with the

Documents
Subsections - Smith College · 2012-03-14 · Select a Chapter Subsections Bits and Bytes Introduction to the 68HC11 Memory Map Registers Programming the 68HC11 Machine Code vs. Assembly

Subsections - Smith College · 2012-03-14 · Select a Chapter Subsections Bits and Bytes Introduction to the 68HC11 Memory Map Registers Programming the 68HC11 Machine Code vs. Assembly

Documents
Ecological Subsections of Aniakchak National Monument and Preserve

Ecological Subsections of Aniakchak National Monument and Preserve

Documents
SUBSECTIONS - Zep EU CATALOG.pdf · SUBSECTIONS SOLVENTS Petroleum ... IRON CLAD NEW AERO ... It is a cold galvanizing aerosol with an unusually high zinc content and binding resins

SUBSECTIONS - Zep EU CATALOG.pdf · SUBSECTIONS SOLVENTS Petroleum ... IRON CLAD NEW AERO ... It is a cold galvanizing aerosol with an unusually high zinc content and binding resins

Documents
Zero-Inflated Negative Binomial Regression - NCSS · The Zero-Inflated Negative Binomial Regression Model Suppose that for each observation, there are two possible cases. Suppose

Zero-Inflated Negative Binomial Regression - NCSS · The Zero-Inflated Negative Binomial Regression Model Suppose that for each observation, there are two possible cases. Suppose

Documents
FARMGATE MILK PRICE STATEMENT · Milk Price from season to season is revenue. The first three subsections describe the key factors that influence revenue. The later subsections describe

FARMGATE MILK PRICE STATEMENT · Milk Price from season to season is revenue. The first three subsections describe the key factors that influence revenue. The later subsections describe

Documents
Myers’ Psychology for AP*...– Unit subsections hyperlinks: Immediately after the unit title slide, a page (slide #3) can be found listing all of the unit’s subsections. While

Myers’ Psychology for AP*...– Unit subsections hyperlinks: Immediately after the unit title slide, a page (slide #3) can be found listing all of the unit’s subsections. While

Documents
Callisto: An Intelligent Project Management System · 2003-04-18 · Callisto: An Intelligent Project Management System Introduction In the following two subsections, we present a

Callisto: An Intelligent Project Management System · 2003-04-18 · Callisto: An Intelligent Project Management System Introduction In the following two subsections, we present a

Documents
Teacher assignmenT in OnTariO schOOls6 Teacher Assignment in Ontario Schools 2.1 Basic Requirements Principals must consider the two basic requirements stated in Regulation 298 (subsections

Teacher assignmenT in OnTariO schOOls6 Teacher Assignment in Ontario Schools 2.1 Basic Requirements Principals must consider the two basic requirements stated in Regulation 298 (subsections

Documents
Exercises on Electrostatics Exercise 1.1 Suppose you have two

Exercises on Electrostatics Exercise 1.1 Suppose you have two

Documents
Heterogeneous Servers based on Programmable Cores and ... · In the next two subsections we describe the Nanocore and NanoWire respectively. We then describe three of the ex-emplar

Heterogeneous Servers based on Programmable Cores and ... · In the next two subsections we describe the Nanocore and NanoWire respectively. We then describe three of the ex-emplar

Documents
Okay, we have a. Now what? Suppose I need these two values Every week on new data

Okay, we have a. Now what? Suppose I need these two values Every week on new data

Documents
Module’10:’ Coordinate’Proof’ Using’Slope’and’ Distance · Now prove that if two lines have the same slope, then they are parallel. Suppose lines m and n are two lines

Module’10:’ Coordinate’Proof’ Using’Slope’and’ Distance · Now prove that if two lines have the same slope, then they are parallel. Suppose lines m and n are two lines

Documents
Analysis of Variance Chapter 15 - continued. 15.5 Two-Factor Analysis of Variance - Example 15.3 –Suppose in Example 15.1, two factors are to be examined:

Analysis of Variance Chapter 15 - continued. 15.5 Two-Factor Analysis of Variance - Example 15.3 –Suppose in Example 15.1, two factors are to be examined:

Documents
Requests relief from ASME B&PV Code,Section XI,Subsections

Requests relief from ASME B&PV Code,Section XI,Subsections

Documents
Zero-Inflated Poisson Regression - NCSS · The Zero-Inflated Poisson Regression Model Suppose that for each observation, there are two possible cases. Suppose that if case 1 occurs,

Zero-Inflated Poisson Regression - NCSS · The Zero-Inflated Poisson Regression Model Suppose that for each observation, there are two possible cases. Suppose that if case 1 occurs,

Documents
Speed, Velocity and Acceration. How Fast? Suppose you recorded two joggers on a distance-time graph. How could you tell the two joggers apart on the graph?

Speed, Velocity and Acceration. How Fast? Suppose you recorded two joggers on a distance-time graph. How could you tell the two joggers apart on the graph?

Documents
TABLE OF CONTENTS SECTION F - RESOURCES Subsections Page ... · TABLE OF CONTENTS SECTION F - RESOURCES Subsections Page GENERAL 6000 Role of Resources 6000 Resource Limits 6010 SSI

TABLE OF CONTENTS SECTION F - RESOURCES Subsections Page ... · TABLE OF CONTENTS SECTION F - RESOURCES Subsections Page GENERAL 6000 Role of Resources 6000 Resource Limits 6010 SSI

Documents
ETM 620 - 09U 1 Analysis of Variance (ANOVA) Suppose we want to compare more than two means? For example, suppose a manufacturer of paper used for grocery

ETM 620 - 09U 1 Analysis of Variance (ANOVA) Suppose we want to compare more than two means? For example, suppose a manufacturer of paper used for grocery

Documents
Evaluation of New Zealand’s Country Programme in Timor-Leste€¦ · 1. Part One: The Summary Findings which includes two subsections: › The Key Points: a double page infographic

Evaluation of New Zealand’s Country Programme in Timor-Leste€¦ · 1. Part One: The Summary Findings which includes two subsections: › The Key Points: a double page infographic

Documents
Skylands Landscape - New Jersey · The Lower New England Section consists of two subsections in northwestern New Jersey, the Hudson Highlands (221Ae) and the Reading Prong (221Am)

Skylands Landscape - New Jersey · The Lower New England Section consists of two subsections in northwestern New Jersey, the Hudson Highlands (221Ae) and the Reading Prong (221Am)

Documents
Suppose hypothesis

Suppose hypothesis

Documents
Freakonomics: Summary Nicolas Zuleta-AP English Language Subsections 1-4

Freakonomics: Summary Nicolas Zuleta-AP English Language Subsections 1-4

Documents