Help:Wiki University Wikitext--Div Tag - Introduction

Paragraph tags are not Wikitext

 * Up to this point, we have been showing you how to deal with paragraphs using the paragraph tags Lorem ipsum …..  .  These paragraph tags are not really Wikitext coding.
 * They are actually HTML coding.
 * We have brought up aragraph tags because they are used so often the FamilySearch Wiki and you need to know how to handle them.
 * As stated previously, there is no Wikitext equivalent to a paragraph. Text can be place on pages without any tags at all.  But to separate them you have to use line brake tags.
 * However, you cannot add attributes to line brake tags. All you will have is black text on a white background just as you see in any book.  So if you want to change anything in a paragraph, you need to use a paragraph tag or something equivalent.

Div tags

 * However, maybe you do not want to have a spaces between paragraphs.
 * What if you wanted to have the paragraphs be right next to each other but still have to ability to add attributes to them.
 * Let us introduce you to a new tag which by the way is probably used far more than paragraph tags. It is the   tag commoningly 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 look upon as containers.
 * Whatever is done between the opening and closing div tag will not affect the other parts of the page. The paragraph acts the same way.
 * You can rearrange bottles in a box but it will not affect bottles in other boxes.
 * It is only when you move the box that you will affect the 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. To further illustrate this, lets give each paragraph a background using our background-color attribute: 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.
 * So lets put two paragraphs on a page using div tags and see what happens to them.
 * Notice that the paragraphs are separated without any spaces between.
 * Notice that the borders of the backgrounds are touching.

 Exercises 1. What is the coding to install our lorem ipsum paragraph in your sandbox with a background color of light green with white text and padding on the top and bottom of 20 pixels.

2. Then load our lorem ipsum paragraph twice with no background color and no text color but with a padding-bottom of the first paragraph of 100px. What happens to the space between the paragraphs? Check your answers >

 Quick Quiz
 * To have the text 20px from the left edge of the background what attribute do you use?
 * A. padding:20px
 * B. padding-right:20px
 * C. padding-left:20px


 * To have the background 50px from all side of the text, what attribute do you use?
 * A. padding-right:50px
 * B. padding-top:50px
 * C. None of the above

Check your answers >