ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

A Web Tutorial Series: Parent/Child Relationships, Images and Additional Body Tags, Comments, & Problem Solving

Updated on March 13, 2014

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

A simple illustration of a HTML DOM (Document Object Model).
A simple illustration of a HTML DOM (Document Object Model).

Misplaced Children Example

 cannot ever be though a correctly enter here. There is no conceivable parent-child relationship possible.
cannot ever be though a correctly enter here. There is no conceivable parent-child relationship possible.
The problem might even go unnoticed, but error like this due occur in development.
The problem might even go unnoticed, but error like this due occur in development.

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

This illustrates several uses of comments: a preamble comment, a comment on what text needs to be changed and contact information,  and a speed up comment where the link was checked out but we do not need this to be displayed until coding is complete
This illustrates several uses of comments: a preamble comment, a comment on what text needs to be changed and contact information, and a speed up comment where the link was checked out but we do not need this to be displayed until coding is complete

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

Code for displaying an image. Specifying width before height avoids mistakes age generally pictures are given in dimensions width X height.
Code for displaying an image. Specifying width before height avoids mistakes age generally pictures are given in dimensions width X height.
The resulting display.
The resulting display.

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

JavaScript when incorporated into web pages makes them dynamic. It requires an understanding of the HTML DOM, the relationship between elements in a family tree.
JavaScript when incorporated into web pages makes them dynamic. It requires an understanding of the HTML DOM, the relationship between elements in a family tree.

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.


Please apprise us of the Value of this Article to You

5 out of 5 stars from 1 rating of How would you rate this article as a benefit to you?

Comments

    0 of 8192 characters used
    Post Comment

    • profile image

      James 3 years ago

      Who ever is reading this testimony today should please celebrate with me and my family because it all started like a joke to some people and others said it was impossible.My name is james,CEO Udegbe Ventures and i live in Ghana.I am businss man and business was going real well till about 9year ago something terrible happen.i lost all my goods which i have imported from china,as time goes on i lost it all.to even get food to eat was a problem and my wife packed out of my house because i was unable to take care of her and my kids at that particular time. i manage all through seven years, no wife to support me to take care of the children and there come a faithful day that i will never forget in my life i met an old friend who i explain all my difficulties to, and he took me to a spell caster and the name of the Temple is called, OGBONI spiritual temple, i was assure that everything will be fine and my wife will come back to me.after the wonderful works of DR.OGBONI,today i am back in business and even much bigger.if you must kwon am now one of the richest man in my country.i advice you if you facing any problem in life,just know that there is no problem without a solution for there is no problem too big for Dr OGBONI to solve,do contact him via email on :ogbonispelitemple@hotmail.com

      LONG LIVE DR.OGBONI AND THE gods of his ancestors!!!

    • DaisyGloria profile image

      Daisy Gloria 3 years ago from Anderson, Indiana

      Great way to start HTML coding post. Tutorial with image for HTML, Head, Body, H1, P is nice to understand in post.