ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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?
working

This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://corp.maven.io/privacy-policy

Show Details
Necessary
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
Features
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Marketing
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Statistics
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
ClickscoThis is a data management platform studying reader behavior (Privacy Policy)