1. DOM

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

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

4. Here is an alternative – layout. More or less successful? 4 2 DOM

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

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

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

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

9. 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 - the second level heavy. Font size, style, colour,… Page information Page contents – including markup describing the role of the text Variation under domestication html* 9 2 DOM

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

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

12. 1 Introduction 99Notes CSS Page information body {background-color:yellow;} h1 {font-size:36pt;} h2 {color:blue; font-size:20pt} p {margin-left:50px;} Page contents – including markup describing the role of the text Variation under domestication CSS in the html file – what you should never do 12

13. The markup tags describe the role of different bits of text in the file. Tags come in pairs which delimit their start and This is a top level header 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. Page of course Information <link rel=“stylesheet” href=“snazzy.css” type = “text/css” /> External CSS file 13 2 DOM

14. 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 Page information Page contents – including markup describing the role of the text Variation under domestication Need to produce a more complex file 14 2 DOM

15. 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 ( A pplication P rogrammer I nterface) it becomes easy for a web creator to make an “exciting web page” which works on all browsers. This is the DOM D ocument O bject M odel Not unique – but standard Building a model 15 2 DOM

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

17. Open the local disk directory by left clicking. 17 Content Contents of the directory Just the directories 2 DOM

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

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

20. How would you search all the nodes of the tree? 20 Walking a tree 2 DOM

21. Start at the top. Remembering that although we don’t show files they are accessible via the directories. 21 Walking a tree 2 DOM

22. Top is searched so we go onto the first child directory. 22 Walking a tree 2 DOM

23. What next? 23 Walking a tree 2 DOM

24. What next? 24 Walking a tree 2 DOM

25. Search siblings or search children 25 Walking a tree 2 DOM

26. And then? 26 Walking a tree 2 DOM

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

28. This is called breadth first This is called depth first. 28 Walking a tree 2 DOM

29. 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? getcwd opendir readdir dir PHP 2 DOM

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

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

32. 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 some text some more text another column some more text some text another column of text 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

33. 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 ( A pplication P rogrammer I nterface) it becomes easy for a web creator to make an “exciting web page” which works on all browsers. This is the DOM D ocument O bject M odel Not unique – but standard Building a model 2 DOM

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

35. Type in a string and be taken directly to the directory 35 Alternate Search string 2 DOM