Difference between revisions of "Help:Wiki University Wikitext--Paragraphs"

From FamilySearch Wiki
Jump to navigation Jump to search
m (→‎Try these out: modify verbage for clarity)
 
Line 67: Line 67:
 
<div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises</div>
 
<div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises</div>
 
<div style="padding-top:12px; padding-left:10px; ">
 
<div style="padding-top:12px; padding-left:10px; ">
*Copy and paste this paragraph: 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. Paste it three times in your sandbox. Separate the paragraphs with two <font color="red"><nowiki><br></nowiki></font color> between each one.<br><br>
+
*Copy this paragraph and paste it three times into your sandbox: ''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.'' Separate the paragraphs with two <font color="red"><nowiki><br></nowiki></font color> between each one.<br><br>
*Then copy and paste the same paragraph three more times put <font color="red"><nowiki><p></nowiki></font color> and <font color="red"><nowiki></p></nowiki></font color> between each one.
+
*Copy and paste the same paragraph three more times into your sandbox and put <font color="red"><nowiki><p></nowiki></font color> and <font color="red"><nowiki></p></nowiki></font color> between each one.
  
 
</div>
 
</div>

Latest revision as of 12:34, 12 April 2021

Lessons


Intermediate


Advanced


Flexbox


Additional Helps

How text loads on a page[edit | edit source]

How are blocks of text loaded on a page? Let's load (copy and paste) the following Lorem Ipsum paragraph three times: "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."


  • The resulting preview will look like this:

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. 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. 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.


  • Note: There is no separation of paragraphs but one large paragraph.

How to keep paragraphs separated[edit | edit source]

There are a couple of ways to keep paragraphs separated: Line Breaks and Paragraph tags.

Line Breaks[edit | edit source]

<br>
  • Place a <br> "line break" tag between the paragraphs which is the same as hitting the enter key. Here's the coding:
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.
<br>
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.
<br>

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's how the paragraphs now appear:

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 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.

  • If you want more space between the paragraphs add more <br> tags.

Paragraph tags[edit | edit source]

<p>
Place a <p>"opening paragraph" tag and a </p> "closing paragraph" tag around the paragraphs:[edit | edit source]

<p>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.</p>

<p>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.</p>

<p>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.</p>

Here is how the text will look like now:[edit | edit source]

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 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.

  • NOTICE that there is more space around the individual paragraphs.
  • Another major reason we use this method is with these opening and closing <p> and </p> tags we can manipulate the text by making changes to the font or add background colors. More coming on this topic.

Try these out[edit | edit source]

Tests.gif
Exercises
  • Copy this paragraph and paste it three times into your sandbox: 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. Separate the paragraphs with two <br> between each one.

  • Copy and paste the same paragraph three more times into your sandbox and put <p> and </p> between each one.


Quick Quiz
  • When you hit the enter button once it will automatically put a space between the paragraphs.
A. True
B. False
  • It is better to use <br> than <p> in separating paragraphs.
A. True
B. False
  • A <p> does not require an ending tag?
A. True
B. False