Help:Wiki University Wikitext--Div Tag - Introduction





<< Previous Chapter Next Chapter >>

An alternative to the P-tag

 * You have learned that text can be placed on pages simply by the "copy-and-paste" technique.
 * You also learned that you can separate text, particularly sentences and paragraphs, using the 'enter' key or line breaks:.
 * However, you cannot add attributes to line breaks.
 * To deal with adding attributes, you learned about using the paragraph tag or P-tags: Lorem ipsum …...

We are now going to talk about a tag equivalent to the P-tag called the DIV-tag.

Div tags

 * DIV-tags are used far more frequently than paragraph tags and the real workhorse of the FamilySearch Wiki.
 * The “div” stands for “division” and means a division or part of a page.
 * It looks just a like a paragraph tag: Lorem ipsum …..
 * Use div tags to add attributes and if you want to have the paragraphs right next to each other; i.e. with no built-in spaces between paragraphs.

Div tags are containers

 * Div tags can be looked upon as containers.
 * Like P-tags, whatever attributes applied between the opening   and closing    tag will not affect the other parts of the page.
 * 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
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.  Lorem ipsum ...   Lorem ipsum ...
 * So let's put two paragraphs on a page using div tags with different background colors and see how they appear on the page:
 * Here is the coding:


 * NOTICE that one border of the two paragraphs is touching.

Try these out


 Exercises Check your answers
 * Copy and paste the two Lorem ipsum... paragraphs shown above into your sandbox.
 * Using paragraph tags add a background color of "moccasin" to the first paragraph.
 * Using paragraph tags add a background color of "crimson" to the second paragraph.
 * Copy and paste the two Lorem ipsum... paragraphs shown above into your sandbox.
 * Using div tags add a background color of "lightblue" to the first paragraph.
 * Using div tags add a background color of "lightgreen" to the second paragraph.
 * What difference do you note between the two styles?

 Quick Quiz
 * The div tag and paragraph tag function the same way.
 * 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

Check your answers

<< Previous Chapter Next Chapter >>