Wednesday, August 14, 2013

Parts of a HTML document

As explained before an HTML document consists of a head section and a body section. Now let’s take a look at some of the tags that appear in each of the section.

Parts of a HTML document

 Document head


Some of the tags permitted in the head section of a document are:

<title> - there can only be one title for a web page.

<link> - used when the document is associated with another document

<meta> - provides information of the content of the document

<object> -to place various objects

<style> - information regarding styling a document. This will be covered in a later section

<script> -used when dealing with a scripting language such as javascript, PHP, etc

<base> - specifies the documents base URL

Document body


There are wide varieties of elements that appear in the body section. Certain elements are associated with structuring the document and certain elements are associated with styling. Also HTML elements can be differentiated between “Block elements” and “Inline elements”.

 Block elements


When displaying content of block elements the browser will have a line break before and after the element content. Some of the important block elements are given in table 


Now let’s try out some examples with block elements.

Example 1:


Now let’s try out some examples with block elements.
 Example 2:


 Inline Elements


Inline elements don’t have a line break before or after the element. Usually inline element appears within block elements. If inline element appear separately a break tag (“<br>”) is used to make a line break.

Note: when inline elements are not included within block elements then a break tag needs to be added to make line break. <br> tag is a special tag, since it does not have a opening and a closing tag. The break tag can be typed as either “<br>” or <br />.  <hr> is another tag that does not have both a opening and a closing tag. It can also be typed as either as “<hr>” or  “<hr />” in HTML. <hr> tag creates a horizontal line across the web page.



Attributes


Attributes give more meaning to elements. Attributes are places in the opening tag. The syntax of an attribute is:

<opening_tag attribute=”value”>element content</closing_tag>

Eg: <body bgcolor=”red”>
      …………
      ………….
   </body>

Here the bgcolor attribute is placed in the <body> tag. bgcolor is the name of the attribute. The value of the attribute is placed inside double quotes (“”). In this example the value of the bgcolor attribute is red. Though it is not mandatory to place an attribute value within double quotes, it is a good practice to follow.

There are wide varieties of attributes used with elements. Most of the important attributes will be discussed during the course in various sections. In general attributes can be put into five groups. They are universal attributes, language attributes, events, presentational attributes and specialized attributes. Some of the universal and presentational attributes will be discussed in this chapter.
2.5.1 Universal attributes

id attribute


The “id” attribute gives an element a unique identity in the document. The id attribute value must be unique otherwise during rendering the browser will throw an error message. “id” attribute must start with a letter or an underscore and should only contain alphanumeric characters.  “id” attribute has replaced the use of the “name” attribute.

Style attribute

This attribute is used to introduce style into a document. But however style sheets are a better method of styling than using this attribute. This attribute is supported by many elements.

Example:

<body style="background-color:yellow">  changes the background color of the whole page to yellow.

But when this is used on a <p> tag as:
 <p style="background-color:blue; font-size 16pt">text with a backround color of blue</p> only the background covering the paragraph will be changed. Here also the text of the paragraph section will be set to a font size of 16.
font-type:arial sets the desired font type.
margin:18pt sets the margin to 18pt’s. Here the margin is set to 18pt’s all around. margin-left sets only the left margin. Likewise margin-right, margin-top and margin-bottom sets the appropriate margin to the given value.

Presentational attributes

The align attribute
Tells an element how to align its content. The possible values for this attribute are left, right and center.

Presentation attributes of the body element

  •   background - sets the background to an image set by an URL. The image will be tiled across the page
  •   bgcolor – discussed in a previous section
  •   text – assigns a color to text. This attribute value will be applied to the whole page
  •   link – assigns a color to a link before being activated
  •   vlink – assigns a color to a link after being activated
  •   alink – assigns a color to a link while being activated

Font element and its presentational attributes

Font is an inline element. Its presentational attributes are:

  •  size – sets the font size. Ranges from 1 to 5, the default being 3.
  •  color – sets the font color
  •  face – sets the font name (type)

HTML Comments


In a well prepared web page there would be comments. Comments are placed by developers to make code more readable and easier to understand. Though comments will appear as part of the coding it wont appear on the web browser. The syntax of HTML code is: In this site you can see a comment box.

<!-- this is a comment -->
Posted by at

No comments:

Post a Comment

I know how time is important to you, But your comment will help us to develop this site....

Subscribe to: Post Comments (Atom)