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

From FamilySearch Wiki
Jump to navigation Jump to search
m
m (→‎TRY THESE OUT . . . . .: changed then to than)
 
(14 intermediate revisions by one other user not shown)
Line 1: Line 1:
{{HTML School}}{{HTML Tutorial Sidebar}}
+
<div style="display:grid; grid-template-columns:10% 10% 20% 20% 20% 20%">
<div style=" float:right; width:73%; margin-bottom:0px; margin-top:-30px">
+
<!--------------row 1-------------------------->
<!--first table links at top of page---------------------------------------------->
+
<!--tool bar--------------------------------------------------->
<table style="width:100%; margin-bottom:-10px; ">
+
{{HTML School}}
<tr><td>
+
<!----------------row 2---------------------------->
<div style="font-size:14pt; font-family:arial;  ">[[Help:Wiki University HTML-- Comments|<< Previous Chapter]] </div>
+
<!-------------------menu-------------------------------->
</td>
+
<div style="grid-column:1/3; background-color:#FFEDCC; box-shadow:1px 1px 5px #888888">{{HTML Tutorial Sidebar}}</div>
<td>
+
<!-----------------------main------------------------>
<div style="font-size:14pt; font-family:arial; text-align:right; ">[[Help:Wiki University HTML-- Changing Fonts|Next Chapter >>]] </div>
+
<!-------------------------------chapters top row---------------------------------->
</td></tr>
+
<div style="grid-column:3/8; padding-left:0.5em">
</table>
+
<!-------------------------------chapters top row---------------------------------->
----
+
<div style="display:flex; justify-content:space-between; padding:10px; margin-bottom:-1em">
==How text loads on a page==
+
<div style="font-size:1.3em">[[Help:Wiki University HTML-- Comments|<< Previous Chapter]]</div>
 +
<div style="text-align:right"><span style="background-color:orange; padding:5px; font-size:1.3em">[[Help:Wiki University HTML-- Changing Fonts|Next Chapter >>]]</span></div>
 +
</div>
 +
<div style="margin-left:0.5em">
 +
<!-----------------------main material below this line-------------------------------------------->
 +
==HOW TEXT LOADS ON A PAGE==
 
How are blocks of text loaded on a page?  Here are '''three''' Lorem Ipsum paragraphs loaded in this section:<br><br>
 
How are blocks of text loaded on a page?  Here are '''three''' Lorem Ipsum paragraphs loaded in this section:<br><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.  
 
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.  
Line 17: Line 22:
 
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<ref>If you wondering what this text is, it is called Lorem Ipsum.  It is pseudo-Latin text which is just to illustrate layout so that the viewer will not get caught up reading the text instead of paying attention to the concepts being taught.</ref>.  
 
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<ref>If you wondering what this text is, it is called Lorem Ipsum.  It is pseudo-Latin text which is just to illustrate layout so that the viewer will not get caught up reading the text instead of paying attention to the concepts being taught.</ref>.  
 
*<font color="blue"><b>NOTICE</b></font color> there is no separation of paragraphs.  It all shows as one large paragraph.
 
*<font color="blue"><b>NOTICE</b></font color> there is no separation of paragraphs.  It all shows as one large paragraph.
 
+
==HOW TO KEEP PARAGRAPHS SEPARATED==
 
 
==How to keep paragraphs separated==
 
 
<p>There are a couple of ways to keep paragraphs separated:  
 
<p>There are a couple of ways to keep paragraphs separated:  
 
*Line Breaks
 
*Line Breaks
 
*Paragraph tags.</p>
 
*Paragraph tags.</p>
 
+
==LINE BREAKS==
 
 
==Line Breaks==
 
 
<div style="float:right; font-size:24pt; margin-bottom:10px;"><nowiki><br></nowiki></div>
 
<div style="float:right; font-size:24pt; margin-bottom:10px;"><nowiki><br></nowiki></div>
 
*Place a <font color="red"><nowiki><br></nowiki></font color> "line break" tag between the paragraphs which is the same as hitting the enter key.  Here's the coding:
 
*Place a <font color="red"><nowiki><br></nowiki></font color> "line break" tag between the paragraphs which is the same as hitting the enter key.  Here's the coding:
Line 31: Line 32:
 
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.  
 
<div style="border:2px solid crimson; background-color:moccasin;  
 
<div style="border:2px solid crimson; background-color:moccasin;  
padding:10px; width:100%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><br></nowiki></font color></div>
+
padding:10px; max-width:50%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><br></nowiki></font color></div>
 
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. <div style="border:2px solid crimson; background-color:moccasin;  
 
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. <div style="border:2px solid crimson; background-color:moccasin;  
padding:10px; width:100%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><br></nowiki></font color></div>
+
padding:10px; max-width:50%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><br></nowiki></font color></div>
 
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's how the paragraphs now appear:
 
:*Here's how the paragraphs now appear:
Line 42: Line 43:
  
  
==Paragraph tags==
+
==PARAGRAPH TAGS==
 
<div style="float:right; font-size:24pt; margin-bottom:10px;"><nowiki><p></nowiki></div>
 
<div style="float:right; font-size:24pt; margin-bottom:10px;"><nowiki><p></nowiki></div>
 
*Place a <font color="red"><nowiki><p></nowiki></font color>"opening paragraph" tag and a <font color="red"><nowiki></p></nowiki></font color> "closing paragraph" tag around the paragraphs:
 
*Place a <font color="red"><nowiki><p></nowiki></font color>"opening paragraph" tag and a <font color="red"><nowiki></p></nowiki></font color> "closing paragraph" tag around the paragraphs:
  
 
<div style="border:2px solid crimson; background-color:moccasin;  
 
<div style="border:2px solid crimson; background-color:moccasin;  
padding:10px; width:100%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><p></nowiki></font color></div>
+
padding:10px; max-width:50%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><p></nowiki></font color></div>
  
 
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.  
  
 
<div style="border:2px solid crimson; background-color:moccasin;  
 
<div style="border:2px solid crimson; background-color:moccasin;  
padding:10px; width:100%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki></p><p></nowiki></font color></div>
+
padding:10px; max-width:50%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki></p><p></nowiki></font color></div>
  
 
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.  
  
 
<div style="border:2px solid crimson; background-color:moccasin;  
 
<div style="border:2px solid crimson; background-color:moccasin;  
padding:10px; width:100%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki></p><p></nowiki></font color></div>
+
padding:10px; max-width:50%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki></p><p></nowiki></font color></div>
  
 
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.  
 
<div style="border:2px solid crimson; background-color:moccasin;  
 
<div style="border:2px solid crimson; background-color:moccasin;  
padding:10px; width:100%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki></p></nowiki></font color></div>
+
padding:10px; max-width:50%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki></p></nowiki></font color></div>
  
 
Here is how the text will look like now:<br>
 
Here is how the text will look like now:<br>
Line 67: Line 68:
 
<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>
 
<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>
*<strong>This is the preferred method to place paragraphs on a page</strong>.
 
 
*<font color="blue"><b>NOTICE</b></font color> that there is more space around the individual paragraphs.
 
*<font color="blue"><b>NOTICE</b></font color> 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 <font color="red"><nowiki><p></nowiki></font color> and <font color="red"><nowiki></p></nowiki></font color> tags we can manipulate the text by making changes to the font or add background colors.  More coming on this topic.
 
*Another '''major reason''' we use this method is it will be with these opening and closing <font color="red"><nowiki><p></nowiki></font color> and <font color="red"><nowiki></p></nowiki></font color> tags we can manipulate the text by making changes to the font or add background colors.  More coming on this topic.
  
 
+
==TRY THESE OUT . . . . . ==
==Try these out==
 
 
[[File:Tests.gif|100px|right]]
 
[[File:Tests.gif|100px|right]]
 
<!--Exercises -------------------------------------------------------------->
 
<!--Exercises -------------------------------------------------------------->
Line 95: Line 94:
 
:A. True
 
:A. True
 
:B. False
 
:B. False
*It is better to use <font color="red"><nowiki><br></nowiki></font color> then <font color="red"><nowiki><p></nowiki></font color> in separating paragraphs.
+
*It is better to use <font color="red"><nowiki><br></nowiki></font color> than <font color="red"><nowiki><p></nowiki></font color> in separating paragraphs.
 
:A. True
 
:A. True
 
:B. False
 
:B. False
Line 108: Line 107:
 
</div>
 
</div>
  
<!--Links to next and preceding chapters bottom of page ----------------------------->
+
<!---------------------------------end of material------------------------------------------->
<table style="width:100%; ">
+
</div>
<tr><td>
+
<!-------------------------------chapters bottom---------------------------------------------------->
<div style="font-size:14pt; font-family:arial;  ">[[Help:Wiki University HTML-- Comments|<< Previous Chapter]] </div>
+
<div style="clear:both"></div>
</td>
+
<div style="display:flex; justify-content:space-between; padding:10px">
<td>
+
<div style="font-size:1.3em">[[Help:Wiki University HTML-- Comments|<< Previous Chapter]]</div>
<div style="font-size:14pt; font-family:arial; text-align:right; ">[[Help:Wiki University HTML-- Changing Fonts|Next Chapter >>]] </div>
+
<div style="text-align:right"><span style="background-color:orange; padding:5px; font-size:1.3em">[[Help:Wiki University HTML-- Changing Fonts|Next Chapter >>]]</span></div>
</td></tr>
+
</div>
</table>
 
----
 
 
{{reflist}}
 
{{reflist}}
 
 
</div>
 
</div>
 
__NOTOC__
 
__NOTOC__
[[Category:HTML Lessons]]
+
[[Category:Wiki Lessons]]

Latest revision as of 22:23, 11 February 2019

HOW TEXT LOADS ON A PAGE[edit | edit source]

How are blocks of text loaded on a page? Here are three Lorem Ipsum paragraphs loaded in this section:

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[1].

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

  • 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> than <p> in separating paragraphs.
A. True
B. False
  • A <p> does not require an ending tag.
A. True
B. False
  1. If you wondering what this text is, it is called Lorem Ipsum. It is pseudo-Latin text which is just to illustrate layout so that the viewer will not get caught up reading the text instead of paying attention to the concepts being taught.