Download presentation
Presentation is loading. Please wait.
1
Meet the Document Tree Your roadmap to Web Design
2
Topics for Today Elements Document Tree Ancestors and Descendants Parents and Children Siblings
3
Elements Every XHTML Web page consists of content that is organized into elements. An element is anything that you define with XHTML tags. Though you wouldn't know it just from looking at a page, each element is a little box on the page. These boxes form an invisible document tree.
4
Document Tree <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Sample Item 1 Item 2 Item 3
5
Here’s what they look like
6
Document Tree A document tree is a conceptual diagram that shows the relationships among elements in a hierarchy rather than as boxes within boxes. You'll never see a document tree on your computer screen, because you don't need to. It's just a means of illustrating element relationships in a hierarchical fashion. It's a lot like how you'd use a hierarchy to illustrate relationships among individuals in a family tree. The document tree for the sample page shown above looks like this.
7
Hey, I’m a Doc Tree! Notice the hierarchy…
8
Ancestors and Descendents The term ancestor refers to any element that is above other elements in the tree. It doesn't matter how many levels higher the element is. For example, in our document tree, the body element is the ancestor to all other elements in the tree.
9
Ancestors and Descendants Coding view…
10
Ancestors and Descendants The term descendant refers to any element that's below some element in the document tree. It doesn't matter how many levels below it is. It just has to be lower in the tree to be a descendant. In the image below, all of the yellow elements are descendants of the body element.
11
Ancestors and Descendants Code View
12
Parents and Children The term parent refers to an element that is connected to, and exactly one level above, some other element. An element might have many ancestors, but it only has one parent. In our sample document tree, the body element is the parent to the ul element (only). The ul element is the parent to all of the li elements.
13
Parents and Children Code View…
14
Child A child element is one that is directly connected to, and exactly one level below, its parent. In our sample document tree, the ul element is child to the body element. The li elements are children of the ul element.
15
Child Code View…
16
Siblings Elements that share the same parent are siblings. In our document tree, the li elements are siblings because they share the same parent, the ul element.
17
Siblings Code View…
Similar presentations
