A Web Tutorial Series: Parent/Child Relationships, Images and Additional Body Tags, Comments, & Problem Solving
A Recap of the Previous Tutorial in the Series
In the previous tutorial entitled A Web Tutorial Series: Using HTML Formatting Markup in the Page Body for Paragraphs, Lists, and HTML Text Formatting we covered the first tags we ever used to add markup to the body. The main point emphasized is that in order to create robust web pages one must using HTML tags. The paragraph tag was introduced to divide thoughts or paragraphs. The line break tag was also introduced to create spacing as well. The three types of lists supported by HTML: the unordered list, the ordered list, and the definition list were discussed and an illustration presented. The concept and examples of HTML text formatting was covered. Tags such as: <sub>, subscript; <sup>, superscript; <i>, italic; <strong>, for important text were illustrated.
Use of the tags brought out several major concepts which we will continue to expound and expand upon:
- HTML formatting versus CSS styling, which is content versus style, or semantic meaning versus syntactic representation
- the demonstrated part/child relationship represented in lists
- making appropriate decisions for content, that is answering the question: "What type of list is really needed here?" or "Is this really a new paragraph or do I just require additional spacing?"
Our intention of starting to discuss problem solving was not achieved in that tutorial and will be in this tutorial. Problem solving techniques is not a "one size fits all" answer. As our sophistication and design skills grow there are new challenges The current environment is a single page. That will grow to an interconnect web site with scripting, programming, database access, performance issues and security issues.
Goals for this Tutorial
The title is pretty much self explanatory:
- parent/child relationships. We saw this in the example of lists. A list item, <li>, is a child of an unordered or ordered list. Complications can occur when a tag is misplaced. An orphaned <li> outside of a list really doesn't make sense.
- comments. Problem avoidance can probably be stated as the first step in porblem solution. Good documentation
- images. Image inclusion tags. Perhaps one of the most important tags in HTML. Text is fine but it is the pictures which draw the reader's attention.
- problem solving. We look at this from some obvious things to look for in the web page code. We also begin to look at aids the browser itself might provide.
- additional HTML body tags.
Parent Child Relationships
It may not seem critical at this point to understand the relationships between the elements in an HTML document at present, but beginning to make this association between element will become critical when you beginning utilizing a product such as JavaScript to modify a HTML page.
Essentially, a HTML document is a family tree. The ancestor of every element within the tree is represented by the <html> tag. Both the <head> and the <body> are said to be children of <html>. Their relationship to one another, <head> to <body> is that of siblings.
The relationship of siblings is best thought of as not being nested within one another.
Now looking at a skeleton of a very simple HTML page: "What is the relationship of <H1> or <P> to <HTML>?" In everyday language we would say that <H1> and <P> are grandchildren of <HTML> or that <HTML> is their grandparent. This terminology is not used, rather we say that <HTML> is their ancestor or that <P> and <H1> are descendants of <HTML>.
Seem silly? Really, it's not and as mentioned most modern web pages are manipulated with these relationships in mind, with products such as JavaScript. Starting to think this way will be helpful now.
One current application for thinking this way. In the previous tutorial we discussed lists. An unordered list, for example, has list items for children. <li> tags are found in lists and they would seem to be out of place anywhere else. The second snapshot following this tutorial illustrates the case of a totally out of place <li>. It does get displayed, but look how. Granted, this is a "cooked up", simple example, but as these tutorials proceed, it not inconceivable that something. more exotic than this will appear in your code.
A Simple HTML DOM
Misplaced Children Example
Comments: A Way to Document Code, Speed Development, and Assist in Debugging
Comments are a great way to document your code since they reside with it and as mentioned above a way to prevent problems.
The form for a comment is
<!-- this is a comment -->
A good preamble to a web page might contain name, name of developer and date created, any special considerations (e.g. a page may invoke a scripting language, or access a database), and a change log indicating the date of the change, by who, and nature of the change.
Two non-obvious ways in which comments might be used are: to speed development and as a debugging aid.
In speeding up development consider the following scenario: a page is going to need a number of images and some additional coding. As we add images our load time for the page increases. If the page is going to display ten images, each load becomes slower. So, rather than incrementally adding images, one could add an image, load and check the appropriateness of the image and the accuracy of its link and then comment the image out temporarily and move on to the next image repeating the process. Only when all the images were checked ou and any coding was added would all of the comments tags be removed.
As a debugging aid, suspect code sections could be commented out and incrementally reintroduced to the web page. perhaps pinpointing the point of failure.
Tip: Microsoft Internet Explorer supports an addition form of commenting, a conditional comment. The comments can take on one of two forms: revealed or hidden.
The following snapshot illustrates the use of standard HTML comments.
Illustration of the Use of Comments in Web Pages
Adding Images to Web Pages
The way to include images in the HTML web page source is with the <img> tag. The <img> tag is an empty tag (like the <br> tag) as it contains no source only attributes.
The basic format of an image tag is:
<img src="the URL of the image" alt='some alternate text" width="width" height="height">
src, alt, height, and width are the attributes of the image. The only one required is the src which is the source location of the image file. Naturally, you have to specify what you want to display.
alt The reason to specify alt is to have some meaningful display of text if for some reason the image to be displayed is not available.
height and width are helpful values to include. Without their specification the browser has no idea about how large the image is. This results in a changing page layout as the image loads. If the values are specified the browser can compute in advance the page size, thus the page loads more smoothly. By default, image size parameters are given in pixels.
The following snapshot shows the HTML source and the resulting display of an image.
Illustration of HTML Code and Resulting Display of an Image
Problem Resolution
We looked at two tips for identifying problems today albeit, simple one:
- using comments to exclude code to narrow a problem.
- noticing relationships in the family tree which should not occur. In our example, <li> is misplaced as it could never be in the parent-child relationship indicated.
- and touched on problem solving
JavaScript Can Make Web Pages Come to Life
Wrapup and What's Next
We covered some ground today and laid the foundation for things which may seem very far in the future, such as HTML DOM and JavaScript. We did cover:
- parent/child relationships
- comments
- <img> to include pictures and is a <body> element
- problem solving with the help of comments and a good understanding of parent-child relationships
For our next tutorial, we will do a little bit of review on heading, we will introduce the subject of anchors, and look at browser developer features.