Section 4.6. ...and here s how the browser sees the HTML


4.6. ...and here's how the browser sees the HTML

The browser has to make some sense of all that markup, and organize it in a way that allows the browserand your JavaScript codeto work with the page. Here's what the browser turns your text markup into:

"Head First HTML with CSS & XHTML"

"Welcome to the Webville Tree Farm. We're still learning about CSS, so pardon our plain site. We just bought "

a

", though, so expect great things soon."

p

"Webville Tree Farm"

"You can visit us at the corner of Binary Blvd. and DOM Drive. Come check us out today!"

h1

p

body

"Webville Tree Farm"

title

head

html

Wait a second. Just because you put a picture of a plant behind my markup doesn't make it a tree. I still don't understand where trees come into the picture.

The browser organizes your markup into a "tree" structure.

When a browser loads an HTML page, it starts out with the <html> element. Since this is at the "root" of the page, <html> is called the root element.

Then, the browser figures out what elements are directly beneath <html>, like <head>. and <body> These branch out from the <html> element (starting to get the tree vibe?), and have a whole set of elements and text of their own. Of course, the elements in each branch can have branches and children of their own... and on and on, until the entire page is represented.

Eventually, the browser gets to a piece of markup that has nothing beneath it, like the text in a <p> element, or an <img> element. These pieces of markup, without anything under them, are called leaves. So your entire page ends up being one big tree to the web browser.

Let's look at that tree structure again, but this time with some lines making the connections between the markup a little clearer.

4.6.1. How the browser sees your HTML (part 2)

 Text is represented in the tree, as well as elements.                                    "Head First HTML with CSS & XHTML" "Welcome to the Webville Tree Farm.   We're still learning about CSS, so pardon out plain site. We just bought "     a                                               ", though, so expect great things soon." "Webville Tree Farm"               p                                           "You can visit us at the corner of                                            Binary Blvd. and DOM Drive. Come                                                   check us out today!" Eventually, the tree ends in leaves, which often are just pieces of text in the HTML. When you're showing the elements in a tree, you usually leave off the angle brackets, < and >. h1            p...and other times, an element has only one child.                                                        body Sometimes an element has several children...   "Webville Tree Farm"         title Each bit of markup can have any number of children.           head              html <html> is the root element. Everything else branches out from it. 

Here's the HTML that this tree represents.

 <html>  <head>    <title>Webville Tree Farm</title>  </head>  <body>  <h1>Webville Tree Farm</h1>  <p>Welcome to the Webville Tree Farm.     We're still learning about CSS, so     pardon our plain site. We just bought     <a href=     "http://www.headfirstlabs.com/books/hfhtml/">       Head First HTML with CSS & XHTML</a>,     though, so expect great things soon.</p>  <p>You can visit us at the corner of     Binary Blvd. and DOM Drive. Come check     us out today!</p>  </body> </html> 




Head Rush Ajax
Head Rush Ajax (Head First)
ISBN: 0596102259
EAN: 2147483647
Year: 2004
Pages: 241

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net