Page 173 - DCAP202_Fundamentals of Web Programming

Fundamentals of Web Programming

Notes
Example: If you had a Level 3 Heading (H3) that you wanted the second word to be red,
you could surround that word with <span style=”color : #f00;”>2ndWord</span> and it would
still be a part of the H3 tag, just red. For example:
<h3>This is My <span style=”color: red;”>Awesome</span> Headline</h3>

14.4.2 Using <DIV> ... </DTV> Tag

The DIV elements defines logical divisions in your web page. It acts a lot like a P element, by
placing newlines before and after the division. A division can have multiple paragraphs in it.

Using the DIV Tag

To use the DIV element, simply surround the area of your page that you want as a separate
division with the <div> and </div> tags:
<div id=”mydiv”>
<p>contents of div</p>
</div>
The DIV element gives you the chance to define the style of whole sections of the HTML. You can
define a division of your page as a call out and give that area a different style from the surrounding
text. That area could have images, paragraphs, headlines, anything you wanted.

Notes The DIV element also gives you the ability to ID areas of your documents so that
you can change them with Ajax and dynamic HTML.

The DIV element is different from the new HTML5 SECTION element because it does not give
the enclosed content any semantic meaning. If you aren’t sure whether the block of content
should be a DIV or a SECTION, think about what that content’s purpose is and why you need the
DIV or SECTTION element.

 If you need the element simply to add styles to that area of the page, you should use the
DIV element.

 If that area of the page has a specific meaning, for example it holds all your social media
elements or it contains your blogroll, then you should use the SECTION element.

One thing to keep in mind when using the DIV element is that it breaks paragraphs. It acts as a
paragraph end/beginning, and while you can have paragraphs within a DIV you can’t have a
DIV inside a paragraph.
The primary attributes of the DIV element are:

 style
 class
 id

Task Illustrate the use of div tag with example.

166 LOVELY PROFESSIONAL UNIVERSITY