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}}
+
<div style="display:grid; grid-template-columns:10% 10% 20% 10% 10% 20% 20%">
<div style=" float:left; width:78%; 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:1.2em; 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:1.2em; 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">
 +
<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-------------------------------------------->
 
<h2 style="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; margin-bottom:-10px; padding:0px">HOW TEXT LOADS ON A PAGE</h2>
 
<h2 style="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; margin-bottom:-10px; padding:0px">HOW TEXT LOADS ON A PAGE</h2>
 
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>
Line 21: Line 26:
 
*Line Breaks
 
*Line Breaks
 
*Paragraph tags.</p>
 
*Paragraph tags.</p>
<h2 style="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; padding:0px">LINE BREAKS</h2>
+
==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 38: Line 43:
  
  
<h2 style="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; padding:0px">PARAGRAPH TAGS</h2>
+
==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:
Line 68: Line 73:
  
  
<h2 style="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; margin-top:-20px; padding:0px">TRY THESE OUT . . . . . </h2>
+
==TRY THESE OUT . . . . . ==
 
[[File:Tests.gif|100px|right]]
 
[[File:Tests.gif|100px|right]]
 
<!--Exercises -------------------------------------------------------------->
 
<!--Exercises -------------------------------------------------------------->
Line 104: Line 109:
 
</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:1.2em; 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:1.2em; 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]]

Revision as of 09:14, 8 February 2018

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:

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

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.

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