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

From FamilySearch Wiki
Jump to navigation Jump to search
m
m
Line 1: Line 1:
 
{{HTML School}}{{HTML Tutorial Sidebar}}
 
{{HTML School}}{{HTML Tutorial Sidebar}}
 
__NOTOC__
 
__NOTOC__
<div style=" float:right; width:70%; margin:top:-30px; margin-bottom:0px; ">
+
<div style=" float:right; width:70%; margin-top:-30px; margin-bottom:0px; ">
 
<!--first table links at top of page---------------------------------------------->
 
<!--first table links at top of page---------------------------------------------->
 
<table style="width:100%; margin-bottom:-10px; ">
 
<table style="width:100%; margin-bottom:-10px; ">

Revision as of 11:56, 22 August 2015

Lessons


Flexbox/CSS Grid

Additional Helps

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

How are blocks of text loaded on a page? This our Lorem Ipsum shortened paragraph loaded 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. 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 there is no separation of paragraphs. It all shows as 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:
<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:

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.

  • This is the preferred method to place paragraphs on a page.
  • NOTICE that there is more space around the individual paragraphs.
  • Another major reason we use this method is it will be 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
  • Grab a paragraph from a page in the Wiki and paste it three times in your sandbox. Separate the paragraphs with two <br> between each one.

  • Then with the same paragraph put <p> and </p> between each one.


Quick Quiz
  • When you load paragraphs, using the enter button will automatically put spaces between them.
A. True
B. False
  • It is better to use <br> then <p> in separating paragraphs.
A. True
B. False
  • A <p> does not require an ending tag.
A. True
B. False