DOM

2 DOM

Consider a book.

It is a string of characters. The characters are grouped in words and the words are grouped in sentences

Chapter 1 Variation Under DomesticationCauses of Variability Effects of Habit Correlation of Growth Inheritance Character of Domestic Varieties Difficulty of distinguishing between Varieties and Species Origin of Domestic Varieties from one or more Species Domestic pigeons, their Differences and Origin Principle of Selection anciently followed, its Effects Methodical and Unconscious Selection Unknown Origin of our Domestic Productions Circumstances favourable to Man's power of Selection When we look to the individuals of the same variety or sub-variety of our older cultivated plants and animals, one of the first points which strikes us, is, that they generally differ much more from each other, than do the individuals of any one species or variety in a state of nature. When we reflect on the vast diversity of the plants and animals which have been cultivated, and which have varied during all ages under the most different climates and treatment, I think we are driven to conclude that this greater variability is simply due to our domestic productions having been raised under conditions of life not so uniform as, and somewhat different from, those to which the parent-species have been exposed under nature. There is, also, I think, some probability in the view propounded by Andrew Knight, that this variability may be partly connected with excess of food. It seems pretty clear that organic beings must be exposed during several generations to the new conditions of life to cause any appreciable amount of variation; and that when the organisation has once begun to vary, it generally continues to vary for many generations. No case is on record of a variable being ceasing to be variable under cultivation. Our oldest cultivated plants, such as wheat, still often yield new varieties: our oldest domesticated animals are still capable of rapid improvement or modification. It has been disputed at what period of time the causes of variability, whatever they may be, generally act; whether during the early or late period of development of the embryo, or at the instant of conception. Geoffroy St Hilaire's experiments show that unnatural treatment of the embryo causes monstrosities; and monstrosities cannot be separated

Content

2

When it is published a layout is created which reflects the efforts of the type setter to make the structure of the information clear.

Here is an example of making the book available as a web page

2 DOM3

Here is an alternative – layout.

More or less successful?

4 2 DOM

The layout will also reflect the publishers wish to establish a distinctive look.

5 2 DOM

The layout will also reflect the publishers wish to establish a distinctive look.

Here the precis at the top of the chapter has been removed.Why?Is this a good idea?

6 2 DOM

Side by side comparison of two similar ideas, but actually very different effects.Which is better?

7 2 DOM

So the author provided the text, but it is the publisher who decided how the book as laid out.

The layout was communicated to the typesetter via the “markup”

The typesetter could layout the pages in accordance with the house style.

Going from hardback to paperback, in principle, there is no need to change the content (obviously) nor the markup.

All that happens is the markup is interpreted in a different way.

When we produce web pages they are more flexible, easier to maintain and easier to prepare for different purposes if we separate the way content and the structure from the way we are going to display that content.

Markup

The paragraph symbol, which you get in microsoft word when you are reviewing a document

¶ is a typesettter’s markup symbol.

8 2 DOM

For the web we create a file to hold the content and to document the structure – but not the layout.

The html file

A typical html file looks like this

The browser then makes a decision on how to display <h2> - the second level heavy. Font size, style, colour,…

<!DOCTYPE html> <html> <head>

<title>Page information</title>

</head> <body>

Page contents – including markup describing the role of the text

<h2>Variation under domestication</h2>

</body></html>

html*

9 2 DOM

CSS3 – allows you to separate the layout instructions from the content and structure,

Good practice everywhere

Vital for mobile development

(It will be something on which I judge the quality of your assignment)

A number of different style sheets can be written for use in different contexts.

Can also make style sheets for visual impairments – colour blind – or even to create Braille or for a screen reader.

presentation

10 2 DOM

A CSS file is just a set of css instructions

h2 {font-size:16px; font-family:verdana;}

Property:value pairs

CSS

selector

property

value

11 2 DOM

1 Introduction 99Notes

CSS <!DOCTYPE html> <html> <head>

<title>Page information</title> <style> body {background-color:yellow;} h1 {font-size:36pt;} h2 {color:blue; font-size:20pt} p {margin-left:50px;} </style> </head> <body> Page contents – including markup describing the role of the text

<h2>Variation under domestication</h2> </body></html>

CSS in the html file – what you

should never do

12

The markup tags describe the role of different bits of text in the file. Tags come in pairs which delimit their start and

<h1>This is a top level header </h1>

The tags do not define:

how the page is laid out

or the look of the text.

That is determined by the browser unless you describe what you want with a style sheet.

The style sheet should be in separate file

href gives the address of the file. This one snazzy.css is in the same directory as the html file.

It may be in another directory, in which case you must give the directory path.

It may even be on another machine when you give the url of the file.

<head> <title>Page of course Information</title> <link rel=“stylesheet” href=“snazzy.css” type = “text/css” /></head>

External CSS file

13 2 DOM

Imagine being asked to draw out a web page given the html.

In order to create the web page you would need to go through the whole file.

A web browser needs to do the same thing.Identifying elements – sub-elements and content.

It builds a suitable representation in memory.

Parsing the file

<html> <head>

Page information

</head> <body>

Page contents – including markup describing the role of the text

<h2>Variation under domestication</h2>

</body></html>

Need to produce a more complex file

14 2 DOM

There are many ways of representing a web page in memory.

Early web browsers did it in many ways.

Once there is a model in memory it is possible to manipulate it in interesting ways.

It provides a structure for interactive web pages.

All browsers should model the web page in the same way.

If in addition they provide an API(Application Programmer Interface) it becomes easy for a web creator to make an “exciting web page” which works on all browsers.

This is the DOM

Document Object Model

Not unique – but standard

Building a model

15 2 DOM

Suppose you are looking for a file

Or

Trying to find somewhere to store a file

You open windows explorer

16

Content

Apologies to people who use

Macs

Contents of the directory

2 DOM

Open the local disk directory by left clicking.

17

Content

Contents of the directory

Just the directories

2 DOM

Open the local disk directory by left clicking.

18

Content

Contents of the directory

We can continue to dig down through the directories

2 DOM

This way of organising a data is referred to as a tree

And to mix metaphors the higher directories are called the parents. The ones which spring from a parent are children. And children of the same parents are siblings.

19

tree

2 DOM

How would you search all the nodes of the tree?

20

Walking a tree

2 DOM

Start at the top.

Remembering that although we don’t show files they are accessible via the directories.

21

Walking a tree

2 DOM

Top is searched so we go onto the first child directory.

22

Walking a tree

2 DOM

What next?

23

Walking a tree

2 DOM

What next?

24

Walking a tree

2 DOM

Search siblings or search children

25

Walking a tree

2 DOM

And then?

26

Walking a tree

2 DOM

Go to the first child of the first child and search the “generation”.

Back track up the generations until you find a searched directory with siblings

27

Walking a tree

2 DOM

This is called breadth first

This is called depth first.

28

Walking a tree

2 DOM

The tree structure has no correspondence to the way the files are set out on disk.

It is a structure built by the OS to allow it (and you) to access files.

It also makes the structure accessible to php as I hope you recall.

You can walk a tree programmatically. (Not easy)

29

The point?

getcwdopendirreaddir

dir

PHP

2 DOM

Go to a web site (amazon.co.uk) (using firefox)

On the tools menu choose Toggle Tools

And then the Inspector tab

30

DOM tree

2 DOM

You find a display which is much like a windows directory listing.

With the same arrows which can “drill down” into the structure.

31

DOM tree

2 DOM

In order to build a page the computer must read more than just the next token.

It has to read it all and create a structure it can use as it builds the web page

<table><tr> <td>some text</td> <td>some more text</td> <td>another column</td></tr><tr> <td>some more text</td> <td>some text</td> <td>another column of text</td></tr></table>

A table needs to determine the widest entry for each column and row before it starts to build the table.

.

32

DOM tree

2 DOM

There are many ways of representing a web page in memory.

Early web browsers did it in many ways.

Once there is a model in memory it is possible to manipulate it in interesting ways.

It provides a structure for interactive web pages.

W3C said all browsers should model the web page in the same way.

If in addition they provide an API(Application Programmer Interface) it becomes easy for a web creator to make an “exciting web page” which works on all browsers.

This is the DOM

Document Object Model

Not unique – but standard

Building a model

2 DOM

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.“

It is a tree structure.

The elements of the page are represented by nodes and it is possible to access these nodes.

Nodes have a number of properties which can be accessed by standard calls.

DOM

nodes

root

2 DOM

Type in a string and be taken directly to the directory

35

Alternate

Search string

2 DOM