Meet the Document Tree Your roadmap to Web Design.

Slides:

Advertisements

Similar presentations

COSC2007 Data Structures II Chapter 10 Trees I. 2 Topics Terminology.

Advertisements

XHTML Basics. What is XHTML? XHTML is newer than the old HTML XHTML has stricter rules and does not allow some elements formerly used in HTML One benefit.

CSS CSS Precise Aesthetic Control. Cascading Style Sheets Though they can be put in HTML header, usually a separate page that the HTML links to Contains.

Anne McGrath 16 th February  Review of what we have learned so far.  Angled brackets surround HTML tags.  The words between the angled brackets.

ECE 250 Algorithms and Data Structures Douglas Wilhelm Harder, M.Math. LEL Department of Electrical and Computer Engineering University of Waterloo Waterloo,

Today’s objectives  Element relations – tree structure  Pseudo classes  Pseudo elements.

© 2004, Robert K. Moniot Chapter 6 CSS : Cascading Style Sheets.

Information Technology in Travel, Hospitality and Tourism

Web Page Development Identify elements of a Web Page Start Notepad

Tutorial 4 Creating Special Effects with CSS

XHTML and CSS Overview. Hypertext Markup Language A set of markup tags and associated syntax rules Unlike a programming language, you cannot describe.

HTML syntax By Ana Drinceanu. Definition: Syntax refers to the spelling and grammar of a programming language. Computers are inflexible machines that.

XML Primer. 2 History: SGML vs. HTML vs. XML SGML (1960) XML(1996) HTML(1990) XHTML(2000)

WHAT IS INHERITANCE? Java Unit 11: Inheritance I.

Tutorial 4 Creating Special Effects with CSS. XP Objectives Work with CSS selectors Create styles for lists Create and apply class styles Create a rollover.

Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.

Trees. Introduction to Trees Trees are very common in computer science They come in different forms They are used as data representation in many applications.

Unit 3 Day 2 FOCS – Web Design. Journal Unit #3 Entry #1 Which of the videos that we saw yesterday did you find the most interesting? What was it about.

Intro to Dreamweaver Web Design Section 7-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.

Objectives: 1. Create a Skeleton HTML 2. View a Skeleton File Through a Server and Browser 3. Learn HTML Body Tags for the Display of Text and Graphics.

Today’s objectives  Review  CSS | Rules | Declarations  HTML Structure document  Class asignment.

HTML | DOM. Objectives  HTML – Hypertext Markup Language  Sematic markup  Common tags/elements  Document Object Model (DOM)  Work on page | HTML.

Introduction Of Tree. Introduction A tree is a non-linear data structure in which items are arranged in sequence. It is used to represent hierarchical.

JavaScript – The DOM JavaScript is object based The browser is object based – We can access the browser's objects in the same way we did JavaScript's Two.

HTML | DOM. Objectives  HTML – Hypertext Markup Language  Sematic markup  Common tags/elements  Document Object Model (DOM)  Work on page | HTML.

Lesson 05 // Web Design, Layout & Structure 1.Web Design/Designer-Coder Relationship 2.Fixed vs Fluid Website Layouts 3.Screen Resolutions.

McGraw-Hill/Irwin © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Scripting with the DOM Ellen Pearlman Eileen Mullin Programming the Web.

Using the CSS. What is CSS? CSS is a language that’s used to define the formatting applied to a Website, including colors, background images, typefaces.

WEB APPLICATION DEVELOPMENT For More visit:

Intro To Web Design with Adobe Dreamweaver CSS Cascading Style Sheets (CSS) is the W3C standard for defining the presentation of documents written in HTML,

CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. August 25, 2010—All HTML code brought to XHTML standards.

IT Introduction to Website Development Welcome!

Trees CS 105. L9: Trees Slide 2 Definition The Tree Data Structure stores objects (nodes) hierarchically nodes have parent-child relationships operations.

Data Structures TREES.

HTML Basics Computers. What is an HTML file? *HTML is a format that tells a computer how to display a web page. The documents themselves are plain text.

Web Design Mr. Briggs’ Classes September 6-7, 2011.

 2008 Pearson Education, Inc. All rights reserved Document Object Model (DOM): Objects and Collections.

HTML & CSS BasicsHTMLCSSQuizAnswers  The logo In this website(made of html and css Codes), you will learn some basics of How to use HTML and CSS codes.

CO1552 – Web Application Development Further JavaScript: Part 1: The Document Object Model Part 2: Functions and Events.

M180: Data Structures & Algorithms in Java Trees & Binary Trees Arab Open University 1.

Tutorial 4 Creating Special Effects with CSS. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Work with CSS selectors.

Tutorial 4 Creating Special Effects with CSS. XP Objectives Work with CSS selectors Create styles for lists Create and apply class styles Create a rollover.

Human Genetic Pedigrees. What is a Genetic Pedigree? l A genetic pedigree is an easy way to track your family traits. It looks like a family tree, but.

IN THIS LESSON, WE WILL BECOME FAMILIAR WITH HTML AND BEGIN CREATING A WEB PAGE IN YOUR COMPUTER HTML – the foundation.

1 The tree data structure Outline In this topic, we will cover: –Definition of a tree data structure and its components –Concepts of: Root, internal, and.

Nesting and Floating. Nesting and Floating Elements To make our page content appear the way we want, and to make the best use of screen space, we can.

IN THIS LESSON, WE WILL BECOME FAMILIAR WITH HTML AND BEGIN CREATING A WEB PAGE IN YOUR COMPUTER HTML – the foundation.

XML DOM Week 11 Web site:

Chapter 4 and 5. Objectives Introduce markup: elements and attributes How browsers interpret HTML documents Basic structure of HTML document What do style.

Getting Started with HTML

CSS: Cascading Style Sheets

Introduction to basic HTML

Week 11 Web site: XML DOM Week 11 Web site:

The Document Object Model

Creating supertasks in DITA

Document Object Model (DOM): Objects and Collections

HTML Structure.

Tutorial 4 Creating Special Effects with CSS

Basic HTML Workshop.

Inheritance CSS.

WJEC GCSE Computer Science

Presentation transcript:

Meet the Document Tree Your roadmap to Web Design

Topics for Today  Elements  Document Tree  Ancestors and Descendants  Parents and Children  Siblings

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.

Document Tree  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "   Sample   Item 1  Item 2  Item 3 

Here’s what they look like

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.

Hey, I’m a Doc Tree! Notice the hierarchy…

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.

Ancestors and Descendants Coding view…

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.

Ancestors and Descendants  Code View

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.

Parents and Children  Code View…

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.

Child  Code View…

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.

Siblings  Code View…