The building blocks - DOM structure and page elements
The DOM structure or the Document Object Model is the backbone of the structure that builds up every single webpage and most other information wrappers on the internet. The structure can be viewed as a tree structure. Only instead of looking at the branches of the tree we look at the roots. This also can be compared to the DOM structure directly because what we see is the result of the DOM structure being parsed by the web-browser and not the structure itself.
First of all, the DOM structure is not only bound to HTML. It is actually derived from XML and appears as the main structure of XML, XHTML, SVG, XSLT etc. The DOM is a kind of wrapper containing all the information. Each TAG in the structure contains a bit of the data that is to be displayed. The TAG is refFered to as an element. An element can be anything from a header or paragraph to a form element or an image. The type of element is determined by its name. An image will have the element <img>. A header can have the name <h4>, and a paragraph has the name <p>. Now these are elements that are "known" to the browser. They have a special style assigned to them as default and behave and look as the browser is programmed to display them. I will not go through each and every one of them here - there are way too many - but I will however give an example of how they fit together and show you some of their most basic elements.
We will concentrate mainly on HTML in this blog post. All the other technologies play their part in both WebPages and as carriers of information but the HTML DOM structure is what we will deal with now. Every valid Web page contains the following structure regardless of if they have been coded statically or dynamically. The structure looks as follows.
This is an empty web page. It has no content, and no information on how to be displayed or what to contain. It has the HTML element as its root, and this element has two branches, HEAD and BODY. The heading is meant for the browser. This element will contain child elements that tell the browser how to display the elements or run certain functionality like a JavaScript. The head can also contain META information - information for the browser (about the content), and are used by for instance search engines.
The BODY really gives up its role in its name. This is where the information you want to display goes. Images and text, forms and other elements must be contained within this element for the page to be valid. By valid I mean that the structure is valid by the terms set by www.W3.org. Most browserstry to use the standards set by www.W3.org. This has the positive side effect that you as a web designer or developer knows whether the code you write is going to perform as you wish in the browser of the end user. But enough of that. Now in the next example we add some more elements to the structure.
Now let's have a look at this part for part. In the following code we have added some information to the HTML element, and added a DOCTYPE declaration. The DOCTYPE declaration tells the browser what kind of document this is. In addition to html, this could be xml or SVG for that matter, and the browser needs this information to be able to display the page correctly. This document is a HTML document and follows the XHTML 1.0 Transitional standard. In addition we tell the browser that the page is in English language.
The HEAD element has gained a few children too. We have included four elements. First a META element with information for the browser on what character set to display the page in and adds that we are still dealing with HTML. For this page we use UTF-8 which display different character set used by most browsers. Then we include the TITLE element. The text in this element is what will be displayed in the browsers title bar. Last but not least we include the elements linking style sheets and scripts. In will not go too deep into these two since I will do at least one blog post on each of them. Anyways, this is how you link external CSS and JS files to the DOM.
Now for the elements inside the BODY element, I have chosen use DIV elements as wrappers. The reason I want to use these is because they don't have any build in shapes in the browsers, and that they are easy to place and shape using style sheets. The DIV elements have different children. Basically this page has an image, a menu containing links, and a main area where I would like to put some text. Each element will be explained further down on the page.
Now the header has an image as its child. The IMG element has three attributes. These specify certain properties for the element. The src has a path to the source of the image. So if your image is placed in a directory called images - and the image is named foo.jpg, then it would look like the example above. You might notice two other attributes here as well. I'll deal with the attribute specific to the image element first. The alt attribute contains a short description displayed to the user if the image is not displayed. This might be caused by a server failure, a slow bandwidth (No, not everyone have broadband) or the user might not use a browser displaying images. The id attribute is used in many of the different elements. This is used to name the specific element so that we can traverse the entire DOM structure and find this individual element. This is why you should never have more than one element with a specific name. (If you want to use CSS to give a collection of elements a special set of properties, you should use the class element.). The menu element contains a list. This list is an UL list - unordered list. There are several different types of lists. You should check the HTML specification for further options. Each bullet point in the list starts and ends with the <li> tag. Inside the list element I have put a hyperlink. This hyperlink is what actually gives this menu any functionality. Now the element name for a hyperlink is <a>. There is one crucial attribute to this element to work. The href attribute tells the browser the destination of the link. There are a few other attributes as well, but they are not mandatory for the page to be valid. The last of the three main elements give above is the div element called main area. It contains a <p> element which is a paragraph element. For headings you use i.e. an h4 tag.
This was a short? overview of how you use the DOM structure to build up what are the blocks of a web page. The example is only one of a thousand different ways to do this. So you might want to do it in 999 other ways than this, but it should give you a rough pictures. If you have questions or comments you are welcome to give them. I'll try to respond as well as I can.
So until next time - happy coding.
First of all, the DOM structure is not only bound to HTML. It is actually derived from XML and appears as the main structure of XML, XHTML, SVG, XSLT etc. The DOM is a kind of wrapper containing all the information. Each TAG in the structure contains a bit of the data that is to be displayed. The TAG is refFered to as an element. An element can be anything from a header or paragraph to a form element or an image. The type of element is determined by its name. An image will have the element <img>. A header can have the name <h4>, and a paragraph has the name <p>. Now these are elements that are "known" to the browser. They have a special style assigned to them as default and behave and look as the browser is programmed to display them. I will not go through each and every one of them here - there are way too many - but I will however give an example of how they fit together and show you some of their most basic elements.
We will concentrate mainly on HTML in this blog post. All the other technologies play their part in both WebPages and as carriers of information but the HTML DOM structure is what we will deal with now. Every valid Web page contains the following structure regardless of if they have been coded statically or dynamically. The structure looks as follows.
<html> <head></head> <body></body> </html>
This is an empty web page. It has no content, and no information on how to be displayed or what to contain. It has the HTML element as its root, and this element has two branches, HEAD and BODY. The heading is meant for the browser. This element will contain child elements that tell the browser how to display the elements or run certain functionality like a JavaScript. The head can also contain META information - information for the browser (about the content), and are used by for instance search engines.
The BODY really gives up its role in its name. This is where the information you want to display goes. Images and text, forms and other elements must be contained within this element for the page to be valid. By valid I mean that the structure is valid by the terms set by www.W3.org. Most browserstry to use the standards set by www.W3.org. This has the positive side effect that you as a web designer or developer knows whether the code you write is going to perform as you wish in the browser of the end user. But enough of that. Now in the next example we add some more elements to the structure.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>My webpage...</title>
<link rel="stylesheet" href="css/layout.css" type="text/css" />
<script type="text/javascript" src="scripts/functions.js"></script>
</head>
<body>
<!-- This how you comment your code. Comments are often needed for explaining your code. The browser will take no notice of it. -->
<!-- Following is three branches of the body element. These are DIV elements and acts as wrappers in the structure.-->
<div id="header">
<img id="headerImg" src="images/foo.jpg" alt="An image..." />
</div>
<div id="menu">
<ul>
<li><a href="http://www.w3.org" >Link foo</a></li>
<li><a href="http://www.engvoldsen.net" >Link bar</a></li>
<ul>
</div>
<div id="mainArea">
<p>This is the main area. I can insert text, images, forms and so on.</p>
</div>
</body>
</html>
Now let's have a look at this part for part. In the following code we have added some information to the HTML element, and added a DOCTYPE declaration. The DOCTYPE declaration tells the browser what kind of document this is. In addition to html, this could be xml or SVG for that matter, and the browser needs this information to be able to display the page correctly. This document is a HTML document and follows the XHTML 1.0 Transitional standard. In addition we tell the browser that the page is in English language.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
The HEAD element has gained a few children too. We have included four elements. First a META element with information for the browser on what character set to display the page in and adds that we are still dealing with HTML. For this page we use UTF-8 which display different character set used by most browsers. Then we include the TITLE element. The text in this element is what will be displayed in the browsers title bar. Last but not least we include the elements linking style sheets and scripts. In will not go too deep into these two since I will do at least one blog post on each of them. Anyways, this is how you link external CSS and JS files to the DOM.
<head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>My webpage...</title> <link rel="stylesheet" href="css/layout.css" type="text/css" /> <script type="text/javascript" src="scripts/functions.js"></script> </head>
Now for the elements inside the BODY element, I have chosen use DIV elements as wrappers. The reason I want to use these is because they don't have any build in shapes in the browsers, and that they are easy to place and shape using style sheets. The DIV elements have different children. Basically this page has an image, a menu containing links, and a main area where I would like to put some text. Each element will be explained further down on the page.
<div id="header">
<img id="headerImg" src="images/foo.jpg" alt="An image..." />
</div>
<div id="menu">
<ul>
<li><a href="http://www.w3.org" >Link foo</a></li>
...
<ul>
</div>
<div id="mainArea">
<p>This is the main area. I can insert text, images, forms and so on.</p>
</div>
Now the header has an image as its child. The IMG element has three attributes. These specify certain properties for the element. The src has a path to the source of the image. So if your image is placed in a directory called images - and the image is named foo.jpg, then it would look like the example above. You might notice two other attributes here as well. I'll deal with the attribute specific to the image element first. The alt attribute contains a short description displayed to the user if the image is not displayed. This might be caused by a server failure, a slow bandwidth (No, not everyone have broadband) or the user might not use a browser displaying images. The id attribute is used in many of the different elements. This is used to name the specific element so that we can traverse the entire DOM structure and find this individual element. This is why you should never have more than one element with a specific name. (If you want to use CSS to give a collection of elements a special set of properties, you should use the class element.). The menu element contains a list. This list is an UL list - unordered list. There are several different types of lists. You should check the HTML specification for further options. Each bullet point in the list starts and ends with the <li> tag. Inside the list element I have put a hyperlink. This hyperlink is what actually gives this menu any functionality. Now the element name for a hyperlink is <a>. There is one crucial attribute to this element to work. The href attribute tells the browser the destination of the link. There are a few other attributes as well, but they are not mandatory for the page to be valid. The last of the three main elements give above is the div element called main area. It contains a <p> element which is a paragraph element. For headings you use i.e. an h4 tag.
This was a short? overview of how you use the DOM structure to build up what are the blocks of a web page. The example is only one of a thousand different ways to do this. So you might want to do it in 999 other ways than this, but it should give you a rough pictures. If you have questions or comments you are welcome to give them. I'll try to respond as well as I can.
So until next time - happy coding.
Comments
Post a Comment