ALIGNING BLOCKS OF ELEMENTS

A slightly more flexible method of aligning text elements is to use the <div>(division)tag. <div> includes several attributes, which are listed in appendix B. among these attributes is a align (deprecated in HTML 4.01), which align elements to the left, right, or center just as it does for headings and paragraphs. Unlike using alignments in individually mends, however, <div> is used surround a block of HTML tags of any  kind, and it affects all the tags and text inside the opening and closing tags. Two advantage of div over the align attribute follows.

   You need to use <div> only once, rather than including align repeatedly in several different tags.

Ø  <div> can be used to align anything (headings, <h2 align =”left”> <a href=”who.html”>who we are</a></h2> paragraphs, quotes, images, tables, and so on); the align attribute is available on  only alimited number of tags.

 To  align a block of HTML code, surround it with opening and closing <div> tags, and then include the align attribute in the opening tag, as in other tags, align can have the value left, right, or center:

<h1 align=”left”> serendipity products </h1>

<div align =”right”>

<h2><a href=”who. Html”>who we are</a></h2>

<h2><a href=”products.html”> what we do</a></h2>

<h2><a href=”contacts.html”> how to reach us </a></h2>

</div>

All the HTML between the two <div> tags will be aligned according to the value of the align attribute. If individual align attributes appear in headings or paragraphs inside the <div>, those values will override the global <div> setting.

Note that <div> itself isn’t a paragraph type; it’s just a container. Rather than altering the layout of the text itself it just enables you to set off a group of texts. One function of <div>is to change text alignment with the align attribute. It’s also often used with CSS to apply styles to a specific block of text (much like its counterpart, <span>). In fact, to center elements within the <div> the CSS way (instead of using the deprecated align attribute),you can use the text-align property. Valid values for it are left, right, center, and justify, figure 6.14 used.

INPUT

<div> style=”text-align: left”> left aligned text. </div>

 <div> style=”text-align: right”> right aligned text. </div>

<div> style=”text-align: centered”> centered text. </div>

<div> style=”text-align: justify”>  this text is  justified. I’m adding some extra text for padding so that you can see exactly how the justification works. As you can see, the text is expanded so that it is aligned with both this left and right margins. <div>

ALIGNMENTS AVAILABLE USING CSS.

OUT PUT FIGURE 6.14 VARIOUS TEXT  6.14

You can also include the align attribute in the <p> tag. It’s most common to use the justify setting for the align attribute with the <p>and <div<> tags. when you justify a paragraph, the text is spaced so that it’s flush with both the left and right margins of the page.