Help:Wiki University HTML-- Div Tag - Introduction

From FamilySearch Wiki
Jump to navigation Jump to search

Lessons


Flexbox/CSS Grid

Additional Helps


DIV TAGS

<div>
  • Up to this point, we have been showing you how to deal with paragraphs using the paragraph tags <p>Lorem ipsum …..</p>.
  • Let us introduce you to a new tag which is used far more than paragraph tags and the real workhorse of the Wiki.
  • It is the <div> tag commonly referred to as a “div tag”.
  • The “div” stands for “division” and means a division or part of a page.
  • It works just a like a paragraph tag but does not have any built in spacing.

DIV TAGS ARE CONTAINERS

  • Div tags can be looked upon as containers.
  • Whatever attributes are applied between the opening and closing div tag will not affect the other parts of the page.
  • The paragraph acts the same way.
  • You can compare div tags to a box of bottles. You can rearrange bottles in a box but it will not affect bottles in other boxes.

HOW DIV TAGS AFFECT PARAGRAPHS

  • So let's put two paragraphs on a page using div tags with different background colors and see how they appear on the page:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

  • Here is the coding:

<div style="background-color:lightgreen">Lorem ipsum ....</div>

<div style="background-color:lightgray">Lorem ipsum ....</div>

  • NOTICE that the borders of the backgrounds are touching.

In the next chapter we will talk about how to separate them.


HOW DIV TAGS AFFECT WORDS

  • So far we have only talked about sentences and paragraphs. Div tags give us the ability to effect smaller things like individual words of groups of words without the effects of paragraph tags. For example to made a single word bold:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

  • Here is the coding:
<div style="">Lorem</div> ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis

  • For the most part, we will be using div tags from now on, on both small and large bits of coding.

Html7.jpg

You can apply all the attributes we have learned so far in div tags.


TRY THESE OUT . . . . .

Tests.gif
Exercises
  • Copy our lorem ipsum paragraphs twice with the first one with a background color of "moccasin" and the second one with a color "crimson," both with a padding of 20 pixels, but using div tags instead of paragraph tags:


Quick Quiz
  • The div tag and paragraph tag both have built in margins.
A. True
B. False
  • The attributes work the same way in the div tag as in the paragraph tag
A. True
B. False
  • Div tags put spaces between paragraphs
A. True
B. False