FamilySearch HTML Tutorial Answers: Difference between revisions

m
Text replacement - "\<p(.*?)\>(.*?)\<\/p>" to "<span$1>$2</span>"
m (Text replacement - "\<p(.*?)\>(.*?)\<\/p>" to "<span$1>$2</span>")
(144 intermediate revisions by 5 users not shown)
Line 33: Line 33:
Here's the coding:
Here's the coding:
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
#<nowiki><h1>Kentucky Genealogy</h1></nowiki>
#<font color="red"><nowiki><h1></nowiki></font color>Kentucky Genealogy<font color="red"><nowiki></h1></nowiki></font color>
#<nowiki><h3>History</h3></nowiki>
#<font color="red"><nowiki><h2></nowiki></font color>History<font color="red"><nowiki></h2></nowiki></font color>
#<nowiki><h3>Vital Records</h3></nowiki>
#<font color="red"><nowiki><h2></nowiki></font color>Vital Records<font color="red"><nowiki></h2></nowiki></font color>
#<nowiki><h4>Birth Certificates</h4></nowiki></div>
#<font color="red"><nowiki><h3></nowiki></font color>Birth Certificates<font color="red"><nowiki></h3></nowiki></font color></div>
</div>
</div>
=====Quick Quiz=====
=====Quick Quiz=====
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*We don't use Header Ones in FamilySearch Wiki articles
*We don't use Header Ones in FamilySearch Wiki articles
::True
:True
*Header Five and Six are rairly used
*Header Five and Six are rairly used
::True
:True
*Header Two work well in FamilySearch WIki
*Header Two work well in FamilySearch WIki
::False
:False
*Avoid using Header Three and Header Four in articles
*Avoid using Header Three and Header Four in articles
::False
:False
</div>
</div>
[[Help:Wiki University HTML-- Headers|Back to Headers]]
[[Help:Wiki University HTML-- Headers|Back to Headers]]
Line 57: Line 57:
*Coding for unordered list:
*Coding for unordered list:
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<nowiki><ul></nowiki><br>
<font color="red"><nowiki><ul></nowiki></font color><br>
<nowiki><li>Birth Certificates</li></nowiki><br>
<font color="red"><nowiki><li></nowiki></font color>Birth Certificates<font color="red"><nowiki></li></nowiki></font color><br>
<nowiki><li>Land Records</li></nowiki><br>
<font color="red"><nowiki><li></nowiki></font color>Land Records<font color="red"><nowiki></li></nowiki></font color><br>
<nowiki><li>Probate Records</li></nowiki><br>
<font color="red"><nowiki><li></nowiki></font color>Probate Records<font color="red"><nowiki></li></nowiki></font color><br>
<nowiki><li>Census</li></nowiki><br>
<font color="red"><nowiki><li></nowiki></font color>Census<font color="red"><nowiki></li></nowiki></font color><br>
<nowiki><li>Vital Records</li></nowiki><br>
<font color="red"><nowiki><li></nowiki></font color>Vital Records<font color="red"><nowiki></li></nowiki></font color><br>
<nowiki></ul></nowiki></div><br>
<font color="red"><nowiki></ul></nowiki></font color></div><br>


*This is how the unordered lists will appear:
*This is how the unordered lists will appear:
Line 72: Line 72:
::*Vital Records
::*Vital Records
*Coding for ordered list:
*Coding for ordered list:
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<nowiki><ol></nowiki>
<font color="red"><nowiki><ol></nowiki></font color><br>
<nowiki><li>World</nowiki></li><br>
<font color="red"><nowiki><li></nowiki></font color>World<font color="red"><nowiki></li></nowiki></font color><br>
<nowiki><li>North America</li></nowiki><br>
<font color="red"><nowiki><li></nowiki></font color>North America<font color="red"><nowiki></li></nowiki></font color><br>
<nowiki><li>United States of America</li></nowiki><br>
<font color="red"><nowiki><li></nowiki></font color>United States of America<font color="red"><nowiki></li></nowiki></font color><br>
<nowiki><li>State of Missouri</li></nowiki><br>
<font color="red"><nowiki><li></nowiki></font color>State of Missouri<font color="red"><nowiki></li></nowiki></font color><br>
<nowiki><li>Jackson County</li></nowiki><br>
<font color="red"><nowiki><li></nowiki></font color>Jackson County<font color="red"><nowiki></li></nowiki></font color><br>
<nowiki><li>Independence</li></nowiki><br>
<font color="red"><nowiki><li></nowiki></font color>Independence<font color="red"><nowiki></li></nowiki></font color><br>
<nowiki></ol></nowiki></div><br>
<font color="red"><nowiki></ol></nowiki></font color></div><br>
*This is how the ordered list will appear:
*This is how the ordered list will appear:
#World
#World
Line 154: Line 155:
**Soybeans
**Soybeans
**Barley
**Barley
 
</div>
To practice nesting ordered list, in your sandbox create an ordered list with the following items: North American, United States of America, State of Missouri and Jackson County. In between each item list three items that apply.</div>


<br><br>
<br><br>
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*If you were nesting a list of states in no particular order in a list of countries, which list would you use?:
*If you were nesting a list of states in no particular order in a list of countries, which list would you use?:
::B. Unordered List
:B. Unordered List
*If you were nesting a list of states by size in a list of countries by size, which lists would you use?
*If you were nesting a list of states by size in a list of countries by size, which lists would you use?
::A. Ordered List
:A. Ordered List
</div>
</div>
[[Help:Wiki University HTML-- Nesting Lists|Back to Nesting Lists]]
[[Help:Wiki University HTML-- Nesting Lists|Back to Nesting Lists]]
Line 171: Line 171:
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgreen; padding:5px; ">
*Your wording of the comments is as good as anyone else's.  Whatever makes sense to you is ok.
*Your wording of the comments is as good as anyone else's.  Whatever makes sense to you is ok.
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><!--List of newspapers published in Kirksville, Missouri----------------></nowiki></font color></div><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><!--</nowiki></font color>List of newspapers published in Kirksville, Missouri<font color="red">----------------></font color></div><br>
<nowiki>=== Newspapers ===</nowiki><br>
<nowiki>=== Newspapers ===</nowiki><br>
<nowiki>*[http://www.kirksvilledailyexpress.com/ Kirksville Daily Express]</nowiki><br>
<nowiki>*[http://www.kirksvilledailyexpress.com/ Kirksville Daily Express]</nowiki><br>
<nowiki>*[http://chroniclingamerica.loc.gov/lccn/sn89066097/ click here to see past issues of Kirksville, Missouri Newspaper Archives]</nowiki><br>
<nowiki>*[http://chroniclingamerica.loc.gov/lccn/sn89066097/ click here to see past issues of Kirksville, Missouri Newspaper Archives]</nowiki><br>


<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><!--List of libraries, addresses and phone numbers----------------></nowiki></font color></div><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><!--</nowiki></font color>List of libraries, addresses and phone numbers<font color="red">----------------></font color></div><br>


<nowiki>=== Libraries and Museums  ===</nowiki><br>
<nowiki>=== Libraries and Museums  ===</nowiki><br>
Line 189: Line 189:
<nowiki>(660) 785-4051</nowiki><br><br>
<nowiki>(660) 785-4051</nowiki><br><br>


<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><!--List of historical societies-------------------------></nowiki></font color></div><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><!--</nowiki></font color>List of historical societies<font color="red">----------------></font color></div><br>


<nowiki>=== Societies  ===</nowiki><br>
<nowiki>=== Societies  ===</nowiki><br>
<nowiki>*[http://www.adairchs.org/ Adair County Historical Society]</nowiki><br>
<nowiki>*[http://www.adairchs.org/ Adair County Historical Society]</nowiki><br>
<nowiki>*[http://www.adairchs.org/FAMILY_HISTORY_ADAIR.pdf Search Your Family History in Adair Co. MO]</nowiki><br>
<nowiki>*[http://www.adairchs.org/FAMILY_HISTORY_ADAIR.pdf Search Your Family History in Adair Co. MO]</nowiki><br>
<nowiki>*[https://familysearch.org/learn/wiki/en/Special:Search?</nowiki><br>fulltext=true&search=Kirksville+Missouri+Family+History+Center Family History Center]</nowiki><br>
<nowiki>*[https://familysearch.org/wiki/en/Special:Search?</nowiki><br>fulltext=true&search=Kirksville+Missouri+Family+History+Center FamilySearch Center]</nowiki><br>


<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><!--Link to town clerk-----------------------------></nowiki></font color></div><br>  
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><!--</nowiki></font color>Link to town clerk<font color="red">----------------></font color></div><br>  


<nowiki>==== Town Clerk  ====</nowiki><br>
<nowiki>==== Town Clerk  ====</nowiki><br>
<nowiki>*[http://www.kirksvillecity.com/ Kirksville City Website]</nowiki><br>
<nowiki>*[http://www.kirksvillecity.com/ Kirksville City Website]</nowiki><br>


<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><!--Location of city directory for Kirksville, Missouri-----------></nowiki></font color></div><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><!--</nowiki></font color>Location of city directory for Kirksville, Missouri<font color="red">----------------></font color></div><br>


<nowiki>=== City Directories  ===</nowiki><br>
<nowiki>=== City Directories  ===</nowiki><br>
Line 207: Line 207:
</nowiki>
</nowiki>
</div>
</div>
 
[[Help:Wiki University HTML-- Comments|Back to Comments]]
====Quick Quiz====
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
Line 226: Line 226:
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><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><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.  
*Then with the same paragraph put <font color="red"><nowiki><p></nowiki></font color> and <font color="red"><nowiki></p></nowiki></font color> between each one.
*Then with the same paragraph put <font color="red"><nowiki><span></nowiki></font color> and <font color="red"><nowiki></span></nowiki></font color> between each one.
<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>
<span>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. </span>
<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>
<span>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. </span>
<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>
<span>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. </span>
*<i>Notice the spacing between the paragraphs is almost the same in both problems.  However, the paragraph tag allows you to make changes to the paragraph whereas the <font color="red"><nowiki><br></nowiki></font color> will not and which we will cover in the next chapter</i>.
*<i>Notice the spacing between the paragraphs is almost the same in both problems.  However, the paragraph tag allows you to make changes to the paragraph whereas the <font color="red"><nowiki><br></nowiki></font color> will not and which we will cover in the next chapter</i>.
</div>
</div>
Line 236: Line 236:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*When you load paragraphs, using the enter button will automatically put spaces between them.
*When you load paragraphs, using the enter button will automatically put spaces between them.
::B. False
:B. False
*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.
*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.
::B. False
:B. False
*A <font color="red"><nowiki><p></nowiki></font color> does not require an ending tag for the paragraphs to separate like the <font color="red"><nowiki><br></nowiki></font color>
*A <font color="red"><nowiki><p></nowiki></font color> does not require an ending tag for the paragraphs to separate like the <font color="red"><nowiki><br></nowiki></font color>
::B. False
:B. False
</div>
</div>
[[Help:Wiki University HTML-- Paragraphs|Back to Paragraph Page]]
[[Help:Wiki University HTML-- Paragraphs|Back to Paragraph Page]]
Line 247: Line 247:
====Exercises====
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgreen; padding:5px; ">
<p style="font-family:papyrus; font-size:14pt; ">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>
<span style="font-family:papyrus; font-size:14pt; ">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.</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><p style="font-family:papyrus; font-size:14pt; "></nowiki></div>
 
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><span style="</nowiki><font color="red">font-family:papyrus; font-size:14pt</font color>">Lorem ipsum ... <nowiki></span></nowiki></div>


<p style="font-family:mistral; font-size:14pt; ">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>
<span style="font-family:mistral; font-size:14pt; ">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.</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><p style="font-family:mistral; font-size:14pt; "></nowiki></div>
 
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><span style="</nowiki><font color="red">font-family:mistral; font-size:14pt</font color>">Lorem ipsum ... <nowiki></span></nowiki></div>


</div>
</div>
Line 268: Line 270:
====Exercises====
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgreen; padding:5px; ">
*Enlarge the lorem ipsum paragraph to 20pt.
*Enlarge the lorem ipsum paragraph to 20px.
<p style="font-size:20pt">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>
<span style="font-size:20px">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.</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><p style="font-size:20pt"></nowiki></div><br>
 
*Enlarge a header to 36pt.
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:14px; font-family:Courier New"><nowiki><span style="</nowiki><font color="red">font-size:20px</font color>">Lorem ipsum ... <nowiki></span></nowiki></div><br>
<h1 style="font-size:36pt; margin:0px; padding:0px">Header</h1>
*Enlarge a header to 36px.
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><h1 style="font-size:36pt"></nowiki></div>
<h1 style="font-size:36px; margin:0px; padding:0px">Header</h1>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:14px
; font-family:Courier New"><nowiki><h1 style="</nowiki><font color="red">font-size:36px</font color">">Lorem ipsum ... <nowiki></p></nowiki></div>


</div>
</div>
Line 291: Line 295:
*Change the color of a header.
*Change the color of a header.


<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><p style="color:Cornflowerblue"></nowiki></div><br><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><span style="</nowiki><font color="red">color:Cornflowerblue</font color>">Lorem ipsum ... <nowiki></span></nowiki></div><br><br>


<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><p style="color:#5f9ea0"></nowiki></div><br><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><span style="</nowiki><font color="red">color:#5f9ea0</font color>">Lorem ipsum ... <nowiki></span></nowiki></div><br><br>


<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><h1 style="color:red">Header</h1></nowiki></div>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><h1 style="</nowiki><font color="red">color:red</font color">>Header<nowiki></h1></nowiki></div>
</div>
</div>


Line 314: Line 318:
====Exercises====
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgreen; padding:5px; ">
*Make the second word of each sentence of the lorem ipsum bold.
*Make the first sentence bold.
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.<br>
<p>Here is the coding</p>
Here is the coding:
Lorem '''<nowiki>'''ipsum''' </nowiki>''' dolor sit amet, consectetur adipiscing elit. Donec '''<nowiki> '''sit'''</nowiki>''' amet iaculis metus. Pellentesque '''<nowiki>'''habitant'''</nowiki>''' morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce '''<nowiki>'''elementum'''</nowiki>''' efficitur faucibus. Curabitur '''<nowiki>'''eleifend''' </nowiki>'''quis ligula ac ullamcorper. Curabitur eget suscipit turpis.
<p style="border:1px solid red; padding:5px">
<font color="red"><nowiki><span style="font-weight:bold"></nowiki></font>Lorum ipsum dolor sit amet, consectetur adipiscing elit.<font color="red"><nowiki></p></nowiki></font> 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.</span>


*Make the next to the last sentence of lorem ipsum italic.
*Make the next to the last sentence of lorem ipsum italic.
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.
<p>Here is the coding</p>
<span>Here is the coding</span>
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. '''<nowiki>''Curabitur eleifend quis ligula ac ullamcorper''</nowiki>'''. Curabitur eget suscipit turpis.   
<p style="border:1px solid red; padding:5px">
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. <font color="red"><nowiki><span style="font-style:etalic"></nowiki></font>Curabitur eleifend quis ligula ac ullamcorper<font color="red"><nowiki></p></nowiki></font>. Curabitur eget suscipit turpis.  </span>


*Make the last sentence both bold and italics.
*Make the last sentence both bold and italics.
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'''''.
<p>Here is the coding</p>
<span>Here is the coding</span>
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. '''<nowiki>''''Curabitur eget suscipit turpis'''''</nowiki>'''.    
<div style="border:1px solid red; padding:5px">
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. <font color="red"><nowiki><span style="font-weight:bold; font-style:etalic"></nowiki></font>Curabitur eget suscipit turpis<font color="red"><nowiki></span></nowiki></font>. </div>   
</div>
</div>


====Quick Quiz====
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*To make a sentence in bold text, you flank the sentence with two apostrophes
*To make a sentence in bold text, you use the "text-weight:bold" attribute
::B. False
::B. False
*To make a word italicized, you flank the word with two quotation marks
*To make a word italicized, you flank the "text-style:italic attribute
::B. False
::B. False
</div>
</div>
Line 343: Line 350:
====Exercises====
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10px; font-family:Courier New">
<nowiki><p style="font-family:arial; font-size:12pt; color:red">Lorem ipsum ....</p></nowiki>
 
<nowiki><span style="</nowiki><font color="red">font-family:arial; font-size:12px; color:red</font color>">Lorem ipsum ....<nowiki></span></nowiki>
</div>
</div>
</div>
</div>
Line 355: Line 363:
::D. None of the above
::D. None of the above
*How would you make a word italicized along with the three attribute changes to the paragraph?
*How would you make a word italicized along with the three attribute changes to the paragraph?
::C. All of the above
::C. Flank the work with two apostrophes.
</div>
</div>
[[Help:Wiki University HTML-- Multi-attributes|Back to Multi-attributes]]
[[Help:Wiki University HTML-- Multi-attributes|Back to Multi-attributes]]
Line 365: Line 373:
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgreen; padding:5px; ">
*What is the coding to change the color of the  background  of the lorem ipsum paragraph to green and the text to orange.
*What is the coding to change the color of the  background  of the lorem ipsum paragraph to green and the text to orange.
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><p style="background-color:green; color:orange">lorem ipsum ....</p></nowiki></font color></div><br>
 
<p style="background-color:green; color:orange">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><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><span style="</nowiki><font color="red">background-color:green; color:orange</font color>">lorem ipsum ....<nowiki></span></nowiki></div><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><p style="background-color:red; color:gold">lorem ipsum ....</p></nowiki></font color></div><br>
 
<p style="background-color:red; color:gold">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>
<span style="background-color:green; color:orange">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.</span><br>
 
*Create a paragraph of your favorite color for the background of the lorem ipsum paragraph and another color for the text from the list of colors.
 
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><span style="</nowiki><font color="red">background-color:red; color:gold</font color>">lorem ipsum ....<nowiki></span></nowiki></div><br>
 
<span style="background-color:red; color:gold">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.</span>


</div>
</div>
Line 374: Line 388:
====Quick Quiz====
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
**How to make text invisible on a page without erasing it.
*How to make text invisible on a page without erasing it.
::C. All of the above.
:C. All of the above.


</div>
</div>
Line 384: Line 398:
====Exercises====
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgreen; padding:5px; ">
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.
1. What is the coding to change the background color to light green with blue text and padding on the top and bottom of 20 pixels.
<br>
<br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><p style="background-color:lightgreen; color:white; padding-top:20px; padding-bottom:20px">Lorem ipsum .....</p></nowiki></font color></div><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><span style="</nowiki><font color="red">background-color:lightgreen; color:blue; padding-top:20px; padding-bottom:20px</font color>">Lorem ipsum .....<nowiki></span></nowiki></div><br>
----
----
2. Load our lorem ipsum paragraph twice with no background color and no text color but with a <font color="red">padding-bottom</font color> of the first paragraph of 100px.  What happens to the space between the paragraphs?<br>
2. Copy our lorem ipsum paragraph twice with no background color and no text color but with a <font color="red">padding-bottom</font color> of the first paragraph of 100px.  What happens to the space between the paragraphs?<br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><p style="padding-bottom:100px">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>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><span style="padding-bottom:100px">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.</span>
<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></div><br>
<span>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.</span></div><br>
*It widens by over 100 pixels.
*It widens by over 100 pixels.
</div>
</div>
Line 397: Line 411:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*To have the text 20px from the left edge of the background what attribute do you use?
*To have the text 20px from the left edge of the background what attribute do you use?
::C. padding-left:20px
:C. padding-left:20px
*To have the background 50px from all side of the text, what attribute do you use?
*To have the background 50px from all side of the text, what attribute do you use?
::C. None of the above</div>
:C. None of the above</div>
[[Help:Wiki University HTML-- Padding|Back to Padding]]
[[Help:Wiki University HTML-- Padding|Back to Padding]]


Line 405: Line 419:
====Exercises====
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgreen; padding:5px; ">
*Load our lorem ipsum paragraphs twice with the first one with a background color of moccasin and the second one with a color crimson, both with a padding of 20 pixels, but using div tags instead of paragraph tags:
*Copy our lorem ipsum paragraphs twice with the first one with a background color of moccasin and the second one with a color crimson, both with a padding of 20 pixels, but using div tags instead of paragraph tags:


<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><div style="background-color:moccasin; padding:20px; "></nowiki></div>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><div style="</nowiki><font color="red">background-color:moccasin; padding:20px</font color>">Lorem ipsum ... <nowiki></div></nowiki></div><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><div style="background-color:crimson; padding:20px; "></nowiki></div><br>
 
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><div style="</nowiki><font color="red">background-color:crimson; padding:20px</font color>">Lorem ipsum ... <nowiki></div></nowiki></div><br>
   
   
<div style="background-color:moccasin; padding:20px; ">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><br>
<div style="background-color:moccasin; padding:20px; ">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><br>
Line 415: Line 430:


</div>
</div>
 
[[Help:Wiki University HTML-- Div Tag - Introduction|Back to Div Tag - Introduction]]
====Quick Quiz====
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*The div tag and paragraph tag function the same way.
*The div tag and paragraph tag are both have built in margins.
::A. True
:A. False
*The attributes work the same way in the div tag as in the paragraph tag
*The attributes work the same way in the div tag as in the paragraph tag
::A. True
:A. True
*Div tags put spaces between paragraphs
*Div tags put spaces between paragraphs
::B. False</div>
:B. False</div>
[[Help:Wiki University HTML-- Div Tag - Introduction|Back to Div Tag - Introduction]]
[[Help:Wiki University HTML-- Div Tag - Introduction|Back to Div Tag - Introduction]]
==Margins==
==Margins==
====Exercises====
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgreen; padding:5px; ">
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 a margin on the bottom of 40 pixels.
1. What is the coding to change our lorem ipsum paragraph in your sandbox with a background color of light green with Purple text and a margin on the bottom of 40 pixels.
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><div style="background-color:lightgreen; color:white; margin-bottom:40px">Lorem ipsum ....</div>   </nowiki></font color></div><br>
 
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><div style="</nowiki><font color="red">background-color:lightgreen; color:Purple; margin-bottom:40px</font color>">Lorem ipsum ....<nowiki></div></nowiki></div><br>


2. What is the coding to install our lorem Ipsum paragraph to you sandbox with a background color of light blue with white lext and a margin on the top of 20 pixels.
2. what is the code to change our lorem Ipsum paragraph in your sandbox with a background color of light blue with white text and a margin on the top of 20 pixels.
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><div style="background-color:lightblue; color:white; margin-top:20px">Lorem ipsum ....</div>   </nowiki></font color></div>
 
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><div style="</nowiki><font color="red">background-color:lightblue; color:white; margin-top:20px</font color>">Lorem ipsum ....<nowiki></div></nowiki></div>
</div>
</div>


Line 438: Line 456:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Margin-top only affects top of paragraph
*Margin-top only affects top of paragraph
::A. True
:A. True
*Margin-left moves the paragraph to the right of the left side of the page
*Margin-left moves the paragraph to the right of the left side of the page
::A. True
:A. True
*Margin-right moves the paragraph to the right of the right side of the of the page
*Margin-right moves the paragraph to the right of the right side of the of the page
::B. False
:B. False
</div>
</div>
[[Help:Wiki University HTML-- Margins|Back to Margins]]
[[Help:Wiki University HTML-- Margins|Back to Margins]]
==Borders==
==Borders==
====Exercises====
====Exercises====
Line 452: Line 471:
</div><br>
</div><br>
*Here is the coding:
*Here is the coding:
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><div style="border:10px groove lightgreen">Lorem ipsum ...</div>  </nowiki></font color></div><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><div style="</nowiki><font color="red">border:10px groove lightgreen</font color>">Lorem ipsum ...<nowiki></div>  </nowiki></div><br>
*Using a div tag put a border around our lorem ipsum paragraph of a "ridge" type that is 15 pixels thick with whatever color you like:
*Using a div tag put a border around our lorem ipsum paragraph of a "ridge" type that is 15 pixels thick with whatever color you like:
<div style="border:15px ridge lightblue; ">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:15px ridge lightblue; ">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><br>
</div><br>
*Here is the coding:
*Here is the coding:
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><div style="border:15px ridge lightgreen">Lorem ipsum ...</div>  </nowiki></font color></div>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><div style="</nowiki><font color="red">border:15px ridge lightgreen</font color>">Lorem ipsum ...<nowiki></div>  </nowiki></div>
</div>
</div>


Line 477: Line 496:
<div style="border:1px solid red; width:200px; height:400px; ">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><br>
<div style="border:1px solid red; width:200px; height:400px; ">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><br>
Here is the coding:
Here is the coding:
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><div style="border:1px solid red; width:200px; height:400px; "></nowiki></font color>Lorem ipsum ....<font color="red"><nowiki></div> </nowiki></font color></div>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><div style="</nowiki><font color="red">border:1px solid red; width:200px; height:400px</font color>">Lorem ipsum ....<nowiki></div> </nowiki></div>
</div>
</div>


Line 493: Line 512:
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgreen; padding:5px; ">
*Take this title: "I Love Wikitext" and put it on the center of the page.<br>
*Take this title: "I Love Wikitext" and put it on the center of the page.<br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><div style="text-align:center">I Love Wikitext</nowiki></font color><font color="red"><nowiki></div></nowiki></font color></div><br>
 
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><div style="</nowiki><font color="red">text-align:center</font color>">I Love Wikitext<nowiki></div></nowiki></div><br>


*Take this title: "I Love Wikitext" and put it on the right side of the page.<br>
*Take this title: "I Love Wikitext" and put it on the right side of the page.<br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><div style="text-align:right">I Love Wikitext</nowiki></font color><font color="red"><nowiki></div></nowiki></font color></div><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><div style="</nowiki><font color="red">text-align:right</font color>">I Love Wikitext</nowiki><nowiki></div></nowiki></div><br>


*Take this title: "I Love Wikitext" and put it on the left of the page.<br>
*Take this title: "I Love Wikitext" and put it on the left of the page.<br>
Line 549: Line 569:
<font color="red"><nowiki><table></nowiki></font color><br>
<font color="red"><nowiki><table></nowiki></font color><br>
<font color="red"><nowiki><tr></nowiki></font color><br>
<font color="red"><nowiki><tr></nowiki></font color><br>
<font color="red"><nowiki><td>Apples</td></nowiki></font color><br>
<font color="red"><nowiki><td></nowiki></font color>Apples<font color="red"><nowiki></td></nowiki></font color><br>
<font color="red"><nowiki><td>Peas</td></nowiki></font color><br>
<font color="red"><nowiki><td></nowiki></font color>Peas<font color="red"><nowiki></td></nowiki></font color><br>
<font color="red"><nowiki><td>Peanuts</td></nowiki></font color><br>
<font color="red"><nowiki><td></nowiki></font color>Peanuts<font color="red"><nowiki></td></nowiki></font color><br>
<font color="red"><nowiki><td>Wheat</td></nowiki></font color><br>
<font color="red"><nowiki><td></nowiki></font color>Wheat<font color="red"><nowiki></td></nowiki></font color><br>
<font color="red"><nowiki><tr></nowiki></font color><br>
<font color="red"><nowiki><tr></nowiki></font color><br>
<font color="red"><nowiki></tr></nowiki></font color><br>
<font color="red"><nowiki></tr></nowiki></font color><br>
<font color="red"><nowiki><td>Pears</td></nowiki></font color><br>
<font color="red"><nowiki><td></nowiki></font color>Pears<font color="red"><nowiki></td></nowiki></font color><br>
<font color="red"><nowiki><td>Carrots</td></nowiki></font color><br>
<font color="red"><nowiki><td></nowiki></font color>Carrots<font color="red"><nowiki></td></nowiki></font color><br>
<font color="red"><nowiki><td>Walnuts</td></nowiki></font color><br>
<font color="red"><nowiki><td></nowiki></font color>Walnuts<font color="red"><nowiki></td></nowiki></font color><br>
<font color="red"><nowiki><td>Oats</td></nowiki></font color><br>
<font color="red"><nowiki><td></nowiki></font color>Oats<font color="red"><nowiki></td></nowiki></font color><br>
<font color="red"><nowiki><tr></nowiki></font color><br>
<font color="red"><nowiki><tr></nowiki></font color><br>
<font color="red"><nowiki></tr></nowiki></font color><br>
<font color="red"><nowiki></tr></nowiki></font color><br>
<font color="red"><nowiki><td>Cherries</td></nowiki></font color><br>
<font color="red"><nowiki><td></nowiki></font color>Cherries<font color="red"><nowiki></td></nowiki></font color><br>
<font color="red"><nowiki><td>Corn</td></nowiki></font color><br>
<font color="red"><nowiki><td></nowiki></font color>Corn<font color="red"><nowiki></td></nowiki></font color><br>
<font color="red"><nowiki><td>Cashews</td></nowiki></font color><br>
<font color="red"><nowiki><td></nowiki></font color>Cashews<font color="red"><nowiki></td></nowiki></font color><br>
<font color="red"><nowiki><td>Barley</td></nowiki></font color><br>
<font color="red"><nowiki><td></nowiki></font color>Barley<font color="red"><nowiki></td></nowiki></font color><br>
<font color="red"><nowiki><tr></nowiki></font color><br>
<font color="red"><nowiki><tr></nowiki></font color><br>
<font color="red"><nowiki></tr></nowiki></font color><br>
<font color="red"><nowiki></tr></nowiki></font color><br>
<font color="red"><nowiki><td> Oranges</td></nowiki></font color><br>
<font color="red"><nowiki><td></nowiki></font color>Oranges<font color="red"><nowiki></td></nowiki></font color><br>
<font color="red"><nowiki><td>Beans</td></nowiki></font color><br>
<font color="red"><nowiki><td></nowiki></font color>Beans<font color="red"><nowiki></td></nowiki></font color><br>
<font color="red"><nowiki><td>Almonds</td></nowiki></font color><br>
<font color="red"><nowiki><td></nowiki></font color>Almonds<font color="red"><nowiki></td></nowiki></font color><br>
<font color="red"><nowiki><td>Buckwheat</td></nowiki></font color><br>
<font color="red"><nowiki><td></nowiki></font color>Buckwheat<font color="red"><nowiki></td></nowiki></font color><br>
<font color="red"><nowiki></tr></nowiki></font color><br>
<font color="red"><nowiki></tr></nowiki></font color><br>
<font color="red"><nowiki></table></nowiki></font color></div>
<font color="red"><nowiki></table></nowiki></font color></div>
Line 578: Line 598:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Tables do not need a closing tag
*Tables do not need a closing tag
::B. False
:B. False
*Rows must have a closing tag
*Rows must have a closing tag
::b. False
:A. True
*Cells must have something in them for the table to be visible.
*Cells must have something in them for the table to be visible.
::A. True
:A. True
</div>
</div>
[[Help:Wiki University HTML-- Tables|Back to Tables]]
[[Help:Wiki University HTML-- Tables|Back to Tables]]
==Tables - Borders==
==Tables - Borders==


Line 612: Line 633:
| Buckwheat
| Buckwheat
|}
|}
<p>Here is the coding in the opening table tag:</p>
<span>Here is the coding in the opening table tag:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki>{| </nowiki><font color="red"> style="border:15px ridge cornsilk"</font color></div><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><table </nowiki><font color="red"> style="border:15px ridge cornsilk"</font color>></div><br>
*Put a border for the whole table that is 15 pixels wide, "double" border with a border color of brown.  
*Put a border for the whole table that is 15 pixels wide, "double" border with a border color of brown.  
{| style="border:15px double brown"
{| style="border:15px double brown"
Line 637: Line 658:
| Buckwheat
| Buckwheat
|}
|}
<p>Here is the coding:</p>
<span>Here is the coding:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki>{|</nowiki><font color="red"><nowiki> style="border:15px double brown"</nowiki></font color></div><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><table</nowiki><font color="red"><nowiki> style="border:15px double brown"</nowiki></font color>></div><br>
*Put a blue border around the cells in the first column 1 pixel thick.
*Put a blue border around the cells in the first column 1 pixel thick.
*<font color="blue"><b>NOTICE</b></font color> no pipe after the attribute.
*<font color="blue"><b>NOTICE</b></font color> no pipe after the attribute.
Line 663: Line 684:
| Buckwheat
| Buckwheat
|}
|}
<p>Here is the coding:</p>
<span>Here is the coding:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki>{|</nowiki><font color="red"><nowiki> style="border:15px double brown"</nowiki></font color><br>
 
<nowiki>|-</nowiki><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
| <font color="red"><nowiki>style="border:1px solid blue" | </nowiki></font color>Apples<br>
 
<nowiki>| Peas</nowiki><br>
<nowiki><table </nowiki><font color="red">style="border:15px double brown"</font color>><br>
<nowiki>| Peanuts</nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki>| Wheat</nowiki><br>
<nowiki><td </nowiki><font color="red">style="border:1px solid blue"</font color>>Apples<nowiki></td></nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki><td></nowiki>Peas<nowiki></td></nowiki><br>
| <font color="red"><nowiki>style="border:1px solid blue" | </nowiki></font color>Pears<br>
<nowiki><td></nowiki>Peanuts<nowiki></td></nowiki><br>
<nowiki>| Carrots</nowiki><br>
<nowiki><td></nowiki>Wheat<nowiki></td></nowiki><br>
<nowiki>| Walnuts</nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki>| Oats</nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki><td </nowiki><font color="red">style="border:1px solid blue"</font color>>Pears<nowiki></td></nowiki><br>
| <font color="red"><nowiki>style="border:1px solid blue" | </nowiki></font color>Cherries<br>
<nowiki><td></nowiki>Carrots<nowiki></td></nowiki><br>
<nowiki>| Corn</nowiki><br>
<nowiki><td></nowiki>Walnuts<nowiki></td></nowiki><br>
<nowiki>| Cashews</nowiki><br>
<nowiki><td></nowiki>Oats<nowiki></td></nowiki><br>
<nowiki>| Barley</nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki></tr></nowiki><br>
| <font color="red"><nowiki>style="border:1px solid blue" | </nowiki></font color> Oranges<br>
<nowiki><td </nowiki><font color="red">style="border:1px solid blue"</font color>>Cherries<nowiki></td></nowiki><br>
<nowiki>| Beans</nowiki><br>
<nowiki><td></nowiki>Corn<nowiki></td></nowiki><br>
<nowiki>| Almonds</nowiki><br>
<nowiki><td></nowiki>Cashews<nowiki></td></nowiki><br>
<nowiki>| Buckwheat</nowiki><br>
<nowiki><td></nowiki>Barley<nowiki></td></nowiki><br>
<nowiki>|}</nowiki></div>
<nowiki><tr></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><td </nowiki><font color="red">style="border:1px solid blue"</font color>>Oranges<nowiki></td></nowiki><br>
<nowiki><td></nowiki>Beans<nowiki></td></nowiki><br>
<nowiki><td></nowiki>Almonds<nowiki></td></nowiki><br>
<nowiki><td></nowiki>Buckwheat<nowiki></td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki></table></nowiki></div>


</div>
</div>
Line 691: Line 719:
====Quick Quiz====
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Attributes must be separated with a pipe from the contents of the cell
*Borders can only be on the outside of a table.
::A. True
:B. False
*You can put borders around rows
*You can put borders around rows
::B. False
:B. False
*You can put borders on columns
*You can put borders on columns
::A. True
:A. True
</div>
</div>
[[Help:Wiki University HTML-- Tables - Borders|Back to Tables - Borders]]
[[Help:Wiki University HTML-- Tables - Borders|Back to Tables - Borders]]
Line 730: Line 758:
|}
|}
*Here is the coding:
*Here is the coding:
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki>{| style="border:25px inset green; width:90%"</nowiki><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<nowiki>|-</nowiki><br>
 
<nowiki>| style="border:1px solid green; width:35%" | Apples</nowiki><br>
<nowiki><table style="</nowiki><font color="red">border:25px inset green; width:90%</font color>"><br>
<nowiki>| style="border:1px solid green; width:15%" | Peas</nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki>| style="border:1px solid green; width:25%" | Peanuts</nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid green; width:35%</font color">">Apples<nowiki></td></nowiki><br>
<nowiki>| style="border:1px solid green; " | Wheat</nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid green; width:15%</font color">">Peas<nowiki></td></nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid green; width:25%</font color">">Peanuts<nowiki></td></nowiki><br>
<nowiki>| Pears</nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid green</font color>">Wheat<nowiki></td></nowiki><br>
<nowiki>| Carrots</nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki>| Walnuts</nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki>| Oats</nowiki><br>
<nowiki><td>Pears</td></nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki><td>Carrots</td></nowiki><br>
<nowiki>| Cherries</nowiki><br>
<nowiki><td>Walnuts</td></nowiki><br>
<nowiki>| Corn</nowiki><br>
<nowiki><td>Oats</td></nowiki><br>
<nowiki>| Cashews</nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki>| Barley</nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki><td>Cherries</td></nowiki><br>
<nowiki>| Oranges</nowiki><br>
<nowiki><td>Corn</td></nowiki><br>
<nowiki>| Beans</nowiki><br>
<nowiki><td>Cashews</td></nowiki><br>
<nowiki>| Almonds</nowiki><br>
<nowiki><td>Barley</td></nowiki><br>
<nowiki>| Buckwheat</nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki>|}</nowiki></div>
<nowiki></tr></nowiki><br>
<nowiki><td>Orange</td></nowiki><br>
<nowiki><td>Beans</td></nowiki><br>
<nowiki><td>Almonds</td></nowiki><br>
<nowiki><td>Buckwheat</td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki></table></nowiki>
</div>
</div>
</div>


Line 757: Line 792:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Putting the width in the first cell of a row determines the width of the first column in the table
*Putting the width in the first cell of a row determines the width of the first column in the table
::A. True
:A. True
*The width of a table will be determined by the material in the cells, if you do not set the widths
*The width of a table will be determined by the material in the cells, if you do not set the widths
::A. True
:A. True
*You can set the width of a table in percentages only
*You can only set the width of a table in percentages
::B. False</div>
:B. False</div>
[[Help:Wiki University HTML-- Tables - Widths|Back to Tables - Widths]]
[[Help:Wiki University HTML-- Tables - Widths|Back to Tables - Widths]]
==Tables - Captions==
==Tables - Captions==
====Exercises====
====Exercises====
Line 800: Line 836:
|}
|}
*Here is the coding:
*Here is the coding:
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki>{| style="border:25px outset orange; width:85%"</nowiki><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<nowiki>|+ style="font-size:28pt; text-align:center; margin-bottom:20px; font-family:Curlz MT" | Healthy Foods</nowiki><br>
<nowiki><table style="</nowiki><font color="red">border:25px outset orange; width:85%</font color>"><br>
<nowiki>|-</nowiki><br>
<nowiki><caption style="</nowiki><font color="red">font-size:28pt; text-align:center; margin-bottom:20px; font-family:Curlz MT</font color>">Healthy Foods<nowiki></caption></nowiki><br>
<nowiki>| style="border:1px solid orange; width:25%" | Apples</nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki>| style="width:25%; "|Peas</nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid orange; width:25%</font color">">Apples<nowiki></td></nowiki><br>
<nowiki>| style="width:25%; "|Peanuts</nowiki><br>
<nowiki><td style="</nowiki><font color="red">width:25%</font color">">Peas<nowiki></td></nowiki><br>
<nowiki>| style="width:25%; "|Wheat</nowiki><br>
<nowiki><td style="</nowiki><font color="red">width:25%</font color">">Peanuts<nowiki></td></nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki><td style="</nowiki><font color="red">width:25%</font color>">Wheat<nowiki></td></nowiki><br>
<nowiki>| style="border:1px solid orange" | Pears</nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki>| Carrots</nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki>| Walnuts</nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid orange; width:25%</font color">">Pears<nowiki></td></nowiki><br>
<nowiki>| Oats</nowiki><br>
<nowiki><td> Carrots</td></nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki><td> Walnuts</td></nowiki><br>
<nowiki>| style="border:1px solid orange" | Cherries</nowiki><br>
<nowiki><td> Oats</td></nowiki><br>
<nowiki>| Corn</nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki>| Cashews</nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki>| Barley</nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid orange; width:25%</font color">">Cherries<nowiki></td></nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki><td> Corn</td></nowiki><br>
<nowiki>| style="border:1px solid orange" | Oranges</nowiki><br>
<nowiki><td> Cashews</td></nowiki><br>
<nowiki>| Beans</nowiki><br>
<nowiki><td> Barley</td></nowiki><br>
<nowiki>| Almonds</nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki>| Buckwheat</nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki>|}</nowiki></div>
<nowiki><td style="</nowiki><font color="red">border:1px solid orange; width:25%</font color">">Orange<nowiki></td></nowiki><br>
<nowiki><td> Beans</td></nowiki><br>
<nowiki><td> Almonds</td></nowiki><br>
<nowiki><td> Buckwheat</td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki></table></nowiki></div>


</div>
</div>
Line 829: Line 870:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*The order of attributes is critical.
*The order of attributes is critical.
::B. False
:B. False
*The caption can only be on the left side of the page
*The caption can only be on the left side of the page
::B. False
:B. False
*Only margin-bottom of the caption will cause a separation between the caption and the table
*Only margin-bottom of the caption will cause a separation between the caption and the table
::B. False</div>
:B. False</div>
[[Help:Wiki University HTML-- Tables - Captions|Back to Tables - Captions]]
[[Help:Wiki University HTML-- Tables - Captions|Back to Tables - Captions]]
==Tables - Column headings==
==Tables - Column headings==
====Exercise====
====Exercise====
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgreen; padding:5px; ">
*With our above table place a yellow border, "dashed" style and 10 pixels thick.
*With our above table place a orange border, "dashed" style and 10 pixels thick.
*Make the table 500 pixels wide.
*Make the table 500 pixels wide.
*Next place a blue border around the headers.
*Next place a blue border around the headers.
Line 845: Line 887:
*Install a lightblue background color for the headers.
*Install a lightblue background color for the headers.
Should look like this:<br><br>
Should look like this:<br><br>
{| style="border:10px dashed yellow; width:500px; "
{| style="border:10px dashed orange; width:500px; "
|+ style="font-size:24pt; text-align:center; margin-bottom:15px; font-family:new times roman" | Healthy Foods  
|+ style="font-size:24pt; text-align:center; margin-bottom:15px; font-family:new times roman" | Healthy Foods  
|-
|-
Line 876: Line 918:
*Here is the coding:<br><br>
*Here is the coding:<br><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<nowiki>{| style="border:10px dashed orange; width:500px"</nowiki><br>
<nowiki><table style="</nowiki><font color="red">border:10px dashed orange; width:500px</font color>"><br>
<nowiki>|+ style="font-size:28pt; text-align:center; margin-bottom:20px; font-family:times new roman" | Healthy Foods</nowiki><br>
<nowiki><caption style="</nowiki><font color="red">font-size:28pt; text-align:center; margin-bottom:20px; font-family:times new roman"</font color>>Healthy Foods<nowiki></td></nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki>! style="border:1px solid blue; text-align:center; width:25%; background-color:lightblue; " |Fruits</nowiki><br>
<nowiki><th style="</nowiki><font color="red">border:1px solid blue; text-align:center; width:25%; background-color:lightblue</font color>">Fruits<nowiki></td></nowiki><br>
<nowiki>! style="border:1px solid blue; text-align:center; width:25%; background-color:lightblue; " |Vegetable</nowiki><br>
<nowiki><th style="</nowiki><font color="red">border:1px solid blue; text-align:center; width:25%; background-color:lightblue</font color>">Vegetable<nowiki></td></nowiki><br>
<nowiki>! style="border:1px solid blue; text-align:center; width:25%; background-color:lightblue; " |Nuts</nowiki><br>
<nowiki><th style="</nowiki><font color="red">border:1px solid blue; text-align:center; width:25%; background-color:lightblue</font color>">Nuts<nowiki></td></nowiki><br>
<nowiki>! style="border:1px solid blue; text-align:center; width:25%; background-color:lightblue; " |Grains</nowiki><br>
<nowiki><th style="</nowiki><font color="red">border:1px solid blue; text-align:center; width:25%; background-color:lightblue</font color>">Grains<nowiki></td></nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki>| Apples</nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki>| Peas</nowiki><br>
<nowiki><td>Pears</td></nowiki><br>
<nowiki>| Peanuts</nowiki><br>
<nowiki><td>Carrots</td></nowiki><br>
<nowiki>| Wheat</nowiki><br>
<nowiki><td>Walnuts</td></nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki><td>Oats</td></nowiki><br>
<nowiki>| Pears</nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki>| Carrots</nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki>| Walnuts</nowiki><br>
<nowiki><td>Cherries</td></nowiki><br>
<nowiki>| Oats</nowiki><br>
<nowiki><td>Corn</td></nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki><td>Cashews</td></nowiki><br>
<nowiki>| Cherries</nowiki><br>
<nowiki><td>Barley</td></nowiki><br>
<nowiki>| Corn</nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki>| Cashews</nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki>| Barley</nowiki><br>
<nowiki><td>Orange</td></nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki><td>Beans</td></nowiki><br>
<nowiki>| Oranges</nowiki><br>
<nowiki><td>Almonds</td></nowiki><br>
<nowiki>| Beans</nowiki><br>
<nowiki><td>Buckwheat</td></nowiki><br>
<nowiki>| Almonds</nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki>| Buckwheat</nowiki><br>
<nowiki></table></nowiki></div>
<nowiki>|}</nowiki></div>
</div>
</div>


Line 909: Line 950:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*The headers are always centered on the column.
*The headers are always centered on the column.
::B. False
:B. False
*You have to use the text-align to put the header on the left side
*You have to use the text-align to put the header on the left side
::B. False
:B. False
*Headers are always in bold type.
*Headers are always in bold type.
::A. True
:A. True
</div>
</div>
[[Help:Wiki University HTML-- Tables - Column headings|Back to Tables - Column headings]]
[[Help:Wiki University HTML-- Tables - Column headings|Back to Tables - Column headings]]
Line 954: Line 995:
| style="border:1px solid blue; "|Buckwheat
| style="border:1px solid blue; "|Buckwheat
|}
|}
<p>Here is the coding</p>
<span>Here is the coding</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki>{| style="</nowiki><font color="red">border:5px dotted black; width:600px; border-spacing:5px</font color> "<br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
|-<br>
 
! style="border:1px solid blue; text-align:center; <font color="red">padding:5px; background-color:lightblue</font color>; " | Fruits<br>
<nowiki><table style="</nowiki><font color="red">border:5px dotted black; width:600px; border-spacing:5px</font color>"><br>
! style="border:1px solid blue; text-align:center; <font color="red">padding:5px; background-color:lightblue</font color>; " | Vegetable<br>
<nowiki><tr></nowiki><br>
! style="border:1px solid blue; text-align:center; <font color="red">padding:5px; background-color:lightblue</font color>; " | Nuts<br>
<nowiki><th style="</nowiki>border:1px solid blue; text-align:center; <font color="red">padding:5px; background-color:lightblue</font color>">Fruits<nowiki></th></nowiki><br>
! style="border:1px solid blue; text-align:center; <font color="red">padding:5px; background-color:lightblue</font color>; " | Grains<br>
<nowiki><th style="</nowiki>border:1px solid blue; text-align:center; <font color="red">padding:5px; background-color:lightblue</font color>">Vegetable<nowiki></th></nowiki><br>
|- <br>
<nowiki><th style="</nowiki>border:1px solid blue; text-align:center; <font color="red">padding:5px; background-color:lightblue</font color>">Nuts<nowiki></th></nowiki><br>
| style="border:1px solid blue; "|Apples<br>
<nowiki><th style="</nowiki>border:1px solid blue; text-align:center; <font color="red">padding:5px; background-color:lightblue</font color>">Grains<nowiki></th></nowiki><br>
| style="border:1px solid blue; "|Peas<br>
<nowiki></tr></nowiki><br>
| style="border:1px solid blue; "|Peanuts<br>
<nowiki><tr></nowiki><br>
| style="border:1px solid blue; "|Wheat<br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Apples<nowiki></td></nowiki><br>
|-<br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Peas<nowiki></td></nowiki><br>
| style="border:1px solid blue; "|Pears<br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Peanuts<nowiki></td></nowiki><br>
| style="border:1px solid blue; "|Carrots<br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Wheat<nowiki></td></nowiki><br>
| style="border:1px solid blue; "|Walnuts<br>
<nowiki><tr></nowiki><br>
| style="border:1px solid blue; "|Oats<br>
<nowiki></tr></nowiki><br>
|-<br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Pears<nowiki></td></nowiki><br>
| style="border:1px solid blue; "|Cherries<br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Carrots<nowiki></td></nowiki><br>
| style="border:1px solid blue; "|Corn<br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Walnuts<nowiki></td></nowiki><br>
| style="border:1px solid blue; "|Cashews<br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Oats<nowiki></td></nowiki><br>
| style="border:1px solid blue; "|Barley<br>
<nowiki><tr></nowiki><br>
|-<br>
<nowiki></tr></nowiki><br>
| style="border:1px solid blue; "|Orange<br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Cherries<nowiki></td></nowiki><br>
| style="border:1px solid blue; "|Beans<br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Corn<nowiki></td></nowiki><br>
| style="border:1px solid blue; "|Almonds<br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Cashews<nowiki></td></nowiki><br>
| style="border:1px solid blue; "|Buckwheat<br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Barley<nowiki></td></nowiki><br>
|}</div>
<nowiki><tr></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Orange<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Beans<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Almonds<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Buckwheat<nowiki></td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki></table></nowiki></div>
</div>
</div>


Line 987: Line 1,035:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Only the border-collaspe attribute is required to separate cell borders.
*Only the border-collaspe attribute is required to separate cell borders.
::B. False
:B. False
*Padding attribute only pads on the left side of the text
*Padding attribute only pads on the left side of the text
::B. False
:B. False
*The header font cannot be changed
*The header font cannot be changed
::B. False
:B. False
</div>
</div>
[[Help:Wiki University HTML-- Tables - Cells|Back to Tables - Rows]]
[[Help:Wiki University HTML-- Tables - Cells|Back to Tables - Rows]]
==Tables - Rows==
==Tables - Rows==
====Exercises====
====Exercises====
Line 1,032: Line 1,081:


Here's the coding:
Here's the coding:
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki>{| style="</nowiki><font color="red">border:10px groove yellow; width:700px</font color>; "<br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
|-  <br>
 
! style="<font color="red">border:1px solid blue; background-color:lightblue; color:white</font color>; " | Fruits<br>
<nowiki><table style="</nowiki><font color="red">border:10px groove yellow; width:700px</font color>"><br>
! style="<font color="red">border:1px solid blue; background-color:lightblue; color:white</font color>; " |Vegetable<br>
<nowiki><tr></nowiki><br>
! style="<font color="red">border:1px solid blue; background-color:lightblue; color:white</font color>; " |Nuts<br>
<nowiki><th style="</nowiki><font color="red">border:1px solid blue; background-color:lightblue; color:white</font color>">Fruits<nowiki></th></nowiki><br>
! style="<font color="red">border:1px solid blue; background-color:lightblue; color:white</font color>; " |Grains<br>
<th style="<font color="red">border:1px solid blue; background-color:lightblue; color:white</font color>">Vegetable<nowiki></th></nowiki><br>
|-<br>
<th style="<font color="red">border:1px solid blue; background-color:lightblue; color:white</font color>">Nuts<nowiki></th></nowiki><br>
| Apples<br>
<th style="<font color="red">border:1px solid blue; background-color:lightblue; color:white</font color>">Grains<nowiki></th></nowiki><br>
| Peas<br>
<nowiki></tr></nowiki><br>
| Peanuts<br>
<nowiki><tr></nowiki><br>
| Wheat<br>
<nowiki><td>Apples</td></nowiki><br>
|-<br>
<nowiki><td>Peas</td></nowiki><br>
| Pears<br>
<nowiki><td>Peanuts</td></nowiki><br>
| Carrots<br>
<nowiki><td>Wheat</td></nowiki><br>
| Walnuts<br>
<nowiki><tr></nowiki><br>
| Oats<br>
<nowiki></tr></nowiki><br>
|-<br>
<nowiki><td>Pears</td></nowiki><br>
| Cherries<br>
<nowiki><td>Carrots</td></nowiki><br>
| Corn<br>
<nowiki><td>Walnuts</td></nowiki><br>
| Cashews<br>
<nowiki><td>Oats</td></nowiki><br>
| Barley<br>
<nowiki><tr></nowiki><br>
|-<br>
<nowiki></tr></nowiki><br>
| Orange<br>
<nowiki><td>Cherries</td></nowiki><br>
| Beans<br>
<nowiki><td>Corn</td></nowiki><br>
| Almonds<br>
<nowiki><td>Cashews</td></nowiki><br>
| Buckwheat<br>
<nowiki><td>Barley</td></nowiki><br>
|}</div>
<nowiki><tr></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><td>Orange</td></nowiki><br>
<nowiki><td>Beans</td></nowiki><br>
<nowiki><td>Almonds</td></nowiki><br>
<nowiki><td>Buckwheat</td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki></table></nowiki></div>
</div>
</div>


Line 1,064: Line 1,120:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*To make all the cells in column the same you need only put the code in the top cell
*To make all the cells in column the same you need only put the code in the top cell
::B. False
:B. False
*Background color cannot be placed in cells through coding in row
*Background color cannot be placed in cells through coding in row
::B. False
:B. False
*You can change the font-family in the rows
*You can change the font-family in the rows
::A. True
:A. True
</div>
</div>
[[Help:Wiki University HTML-- Tables - Rows|Back to Tables - Rows]]
[[Help:Wiki University HTML-- Tables - Rows|Back to Tables - Rows]]
Line 1,107: Line 1,163:
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><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><br>
Here is the coding in the beginning table tag:
Here is the coding in the beginning table tag:
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki>{| style="border:1px solid red; width:50%;</nowiki><font color="red"> float:right; margin-left:10px</font color>"</div>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<nowiki><table style="border:1px solid red; width:50%;</nowiki><font color="red"> float:right; margin-left:10px</font color>"></div>
</div>
</div>


Line 1,113: Line 1,170:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Text will always float up to the right side of a table when placing a table on the page.
*Text will always float up to the right side of a table when placing a table on the page.
::B. False
:B. False
*Text will float when you place a table on the right side of a page.
*Text will float when you place a table on the right side of a page.
::A. True
:A. True
*You cannot place a table in the middle of the page.
*You cannot place a table in the middle of the page.
::B. False
:B. False
</div>
</div>
[[Help:Wiki University HTML-- Tables - Placement|Back to Tables - Placement]]
[[Help:Wiki University HTML-- Tables - Placement|Back to Tables - Placement]]
==Tables - Sorting==
==Tables - Sorting==
====Exercises====
====Exercises====
Line 1,159: Line 1,217:
|}
|}
Here is the coding:
Here is the coding:
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki>{| </nowiki><font color="red">class="sortable" </font color>style="border:1px solid red; width:100% "<br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
|-  <br>
 
! Fruits<br>
<nowiki><table </nowiki><font color="red">class="sortable" </font color><nowiki>style="border:1px solid red; width:100%</nowiki>"><br>
! Vegetable<br>
<nowiki><tr></nowiki><br>
! Nuts<br>
<nowiki><th>Fruits</th></nowiki><br>
! Grains<br>
<nowiki><th>Vegetable</th></nowiki><br>
|-<br>
<nowiki><th>Nuts</th></nowiki><br>
| Apples<br>
<nowiki><th>Grains</th></nowiki><br>
| Peas<br>
<nowiki></tr></nowiki><br>
| Peanuts <br>
<nowiki><tr></nowiki><br>
| Wheat<br>
<nowiki><td>Apples</td></nowiki><br>
|-<br>
<nowiki><td>Peas</td></nowiki><br>
| Pears<br>
<nowiki><td>Peanuts</td></nowiki><br>
| Carrots<br>
<nowiki><td>Wheat</td></nowiki><br>
| Walnuts<br>
<nowiki></tr></nowiki><br>
| Oats<br>
<nowiki><tr></nowiki><br>
|-<br>
<nowiki><td>Pears</td></nowiki><br>
| Cherries<br>
<nowiki><td>Carrots</td></nowiki><br>
| Corn<br>
<nowiki><td>Walnuts</td></nowiki><br>
| Cashews<br>
<nowiki><td>Oats</td></nowiki><br>
| Barley<br>
<nowiki></tr></nowiki><br>
|-<br>
<nowiki><tr></nowiki><br>
| Orange<br>
<nowiki><td>Cherries</td></nowiki><br>
| Beans<br>
<nowiki><td>Corn</td></nowiki><br>
| Almonds<br>
<nowiki><td>Cashews</td></nowiki><br>
| Buckwheat<br>
<nowiki><td>Barley</td></nowiki><br>
<font color="red">
<nowiki></tr></nowiki><br>
|-<br>
<font color="red"><nowiki><tr></nowiki></font color><br>
| Apricots <br>
<font color="red"><nowiki><td>Orange</td></nowiki></font color><br>
| Broccoli<br>
<font color="red"><nowiki><td>Beans</td></nowiki></font color><br>
| Brazil Nuts<br>
<font color="red"><nowiki><td>Almonds</td></nowiki></font color><br>
| Soy Beans<br></font color>
<font color="red"><nowiki><td>Buckwheat</td></nowiki></font color><br>
<nowiki>
<nowiki></tr></nowiki><br>
|}</nowiki></div>
<nowiki></table></nowiki></div>
</div>
</div>


Line 1,198: Line 1,256:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*When you click the sorting icon, the sorting is permanent.  
*When you click the sorting icon, the sorting is permanent.  
::B. False
:B. False
*When you add items to a table, you need to insert the item in the table where it is supposed to go if you want your table in alphabetical order even with the sorting class applied.
*When you add items to a table, you need to insert the item in the table where it is supposed to go if you want your table in alphabetical order even with the sorting class applied.
::B. False
:B. False
*Sorting will revert back to the original order if you leave the page the table is on.
*Sorting will revert back to the original order if you leave the page the table is on.
::A. True
:A. True
</div>
</div>
[[Help:Wiki University HTML-- Tables - Sorting|Back to Tables - Sorting]]
[[Help:Wiki University HTML-- Tables - Sorting|Back to Tables - Sorting]]
==Tables - Scrolling==
==Tables - Scrolling==
====Exercises====
====Exercises====
Line 1,240: Line 1,299:
|}
|}
</div><br>
</div><br>
<p>Here is the coding:</p>
<span>Here is the coding:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><div style="overflow:scroll; width:400px; height:400px; "></nowiki></font color><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><div style="overflow:scroll; width:400px; height:400px; "></nowiki></font color><br>
<nowiki>{| style="border:1px solid red; width:900px; height:900px; "</nowiki><br>  
<nowiki><table style="border:1px solid red; width:900px; height:900px"></nowiki><br>  
|-  <br>
<nowiki><tr></nowiki><br>
! Fruits<br>
<nowiki><th></nowiki>Fruits<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
|}<br>
<nowiki></table></nowiki><br>
<font color="red"><nowiki></div></nowiki></font color></div>
<font color="red"><nowiki></div></nowiki></font color></div>
</div>
</div>
Line 1,256: Line 1,315:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*When creating the horizontal scroll bar, you do not have to set the width.
*When creating the horizontal scroll bar, you do not have to set the width.
::B. False
:B. False
*Vertically scroll bars are only useful for very tall tables.
*Vertically scroll bars are only useful for very tall tables.
::A. True
:A. True
*You cannot have horizontal and vertical scroll bars at the same time.
*You cannot have horizontal and vertical scroll bars at the same time.
::B. False
:B. False


</div>
</div>
Line 1,297: Line 1,356:
|}
|}
*Here is the coding:
*Here is the coding:
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki>{|</nowiki><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
|-<br>
 
| style="width:20%; background-color:lightblue; padding:5px; border-right:1px solid black; "|<br>
<nowiki><table></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><td style="</nowiki>width:20%; background-color:lightblue; padding:5px; border-right:1px solid black"><br>
Adair <nowiki><br></nowiki><br>
Adair <nowiki><br></nowiki><br>
Andrew <nowiki><br></nowiki><br>
Andrew<nowiki><br></nowiki><br>
Atchison <nowiki><br></nowiki><br>
Atchison<nowiki><br></nowiki><br>
Audrain <br>
Audrain <nowiki><br></nowiki><br>
| style="width:20%; background-color:lightgray; padding:5px; border-right:1px solid black; "|<br>
<nowiki></td></nowiki><br>
Barry <nowiki><br></nowiki><br>
<nowiki><td style="</nowiki>width:20%; background-color:lightgray; padding:5px; border-right:1px solid black"><br>
Barry<nowiki><br></nowiki><br>
Barton <nowiki><br></nowiki><br>
Barton <nowiki><br></nowiki><br>
Bates <nowiki><br></nowiki><br>
Bates <nowiki><br></nowiki><br>
Benton <br>
Benton <nowiki><br></nowiki><br>
| style="width:20%; background-color:lightblue; padding:5px; border-right:1px solid black; "|<br>
<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki>width:20%; background-color:lightblue; padding:5px; border-right:1px solid black"><br>
Bollinger <nowiki><br></nowiki><br>
Bollinger <nowiki><br></nowiki><br>
Boone <nowiki><br></nowiki><br>
Boone <nowiki><br></nowiki><br>
Buchanan <nowiki><br></nowiki><br>
Buchanan <nowiki><br></nowiki><br>
Butler <br>
Butler <nowiki><br></nowiki><br>
| style="width:20%; background-color:lightgray; padding:5px; border-right:1px solid black; "|<br>
<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki>width:20%; background-color:lightgray; padding:5px; border-right:1px solid black"><br>
Caldwell <nowiki><br></nowiki><br>
Caldwell <nowiki><br></nowiki><br>
Callaway <nowiki><br></nowiki><br>
Callaway <nowiki><br></nowiki><br>
Camden <nowiki><br></nowiki><br>
Camden <nowiki><br></nowiki><br>
Cape Girardeau <br>
Cape Girardeau <nowiki><br></nowiki><br>
| style="width:20%; background-color:lightblue; padding:5px; "|<br>
<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki>width:20%; background-color:lightblue; padding:5px">
Carroll <nowiki><br></nowiki><br>
Carroll <nowiki><br></nowiki><br>
Carter <nowiki><br></nowiki><br>
Carter <nowiki><br></nowiki><br>
Cass <nowiki><br></nowiki><br>
Cass <nowiki><br></nowiki><br>
Cedar <br>
Cedar <nowiki><br></nowiki><br>
<nowiki>|}</nowiki></div>
<nowiki></td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki></table></nowiki></div>


</div>
</div>
Line 1,331: Line 1,398:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*To have a list of items in six columns you need to create a table with one row and six cells.
*To have a list of items in six columns you need to create a table with one row and six cells.
::B. True
:B. True
*A one row table looks better if the columns are of equal length.
*A one row table looks better if the columns are of equal length.
::A. True
:A. True
*To make the items on separate lines, you use <nowiki><p></nowiki> tags only.
*To make the items on separate lines, you use <nowiki><p></nowiki> tags only.
::B. False</div>
:B. False</div>
[[Help:Wiki University HTML-- Tables - Columns Only|Back to Tables - Columns Only]]
[[Help:Wiki University HTML-- Tables - Columns Only|Back to Tables - Columns Only]]
==Breadcrumb Trails==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
*Take these three pages in FamilySearch Wiki and link them together with a breadcrumb trail:
**United States
**California
**Contra Costa County
*Use a > as the pointer to the next page.
<p>Here is the coding:</p>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki>
[[United States Genealogy]] > [[California Genealogy]] > [[Contra Costa County, California Genealogy]]</nowiki></font color></div>
</div>
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*Breadcrumb trails are usually placed at the bottom of the page.
::B. False
*Breadcrumb trails are external links placed in order of size.
::B. False
*Breadcrumb trails are not to be used to go back to preceding pages that you came from.
::B. False
</div>
[[FamilySearch Wikitext Breadcrumb Trails|Back to Breadcrumb Trails]]
==References/Footnotes==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
*Take our Lorem ipsum paragraph and place three made up references on it:<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.
*Place the references at the bottom of this paragraph.
<div style="border:1px solid red">
Lorem ipsum dolor sit amet<ref>This reference one</ref>, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi<ref>This is reference two</ref> tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget<ref>This is reference three</ref> suscipit turpis.
{{reflist}}</div>
Here is the coding:
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
Lorem ipsum dolor sit amet<font color="red"><nowiki><ref>This reference one</ref></nowiki></font color>, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi<font color="red"><nowiki><ref>This is reference two</ref></nowiki></font color> tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget<font color="red"><nowiki><ref>This is reference three</ref></nowiki></font color> suscipit turpis.
{{reflist}}</div>
</div>
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*References can only so long.
::B. False
*References will only show up at the bottom of the page.
::B. False
*References are only for book and page numbers
::B. False
</div>
[[FamilySearch Wikitext References/Footnotes|Back to References/Footnotes]]
==SEO==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
Your SEO is probably as good as what anyone else can come up with.  But here is an example of one for the state of Missouri:<br>
<div style="border:1px solid red">Guide to '''Missouri ancestry, genealogy and family history''' birth records, marriage records, death records, census records, family history, and military records.</div> </div>
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*SEO's can be as long as you want.
::B. False
*SEO's can be anywhere on a page.
::B. False
*SEO's are not looked at by your browser.
::B. False
</div>
[[FamilySearch Wikitext SEO|Back to SEO]]
==Templates==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
*How do you save a template?
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">template:Lorem ipsum</div><br>
*How do you embed a template?
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki>{{Lorem ipsum}}</nowiki></div><br>
*How do you embed a template that you might want to edit someday?
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">{{subst:Lorem ipsum}}</div>
</div>
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*Templates are easy to change.
::A. True
*Change the template and wherever it is embedded is changed as well.
::A. True
*There is no way to change a template without changing it wherever it is embedded.
::B. False
</div>
[[FamilySearch Wikitext Templates|Back to Templates]]


==Tables - Column Spans==
==Tables - Column Spans==
Line 1,447: Line 1,418:
! style="border:1px solid red; width:25%" | Grains
! style="border:1px solid red; width:25%" | Grains
|-
|-
| colspan="4" style="border:1px solid red; background-color:wheat" | Apples
| colspan="4" style="border:1px solid red" | Apples
|-
|-
| style="border:1px solid red" | Pears
| style="border:1px solid red" | Pears
Line 1,459: Line 1,430:
| style="border:1px solid red" | Barley
| style="border:1px solid red" | Barley
|-
|-
| colspan="3" style="border:1px solid red; background-color:wheat" | Orange
| colspan="3" style="border:1px solid red" | Orange
| style="border:1px solid red" | Beans
| style="border:1px solid red" | Beans
|}
|}


<p>Here is the coding</p>
<span>Here is the coding</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<nowiki>{| style="border:1px solid red; width:100%" </nowiki><br>
<nowiki><table style="border:1px solid red; width:100%"></nowiki><br>
|- <br>
<nowiki><tr></nowiki><br>
! style="border:1px solid red; width:25%" | Fruits<br>
<nowiki><th style="border:1px solid red; width:25%">Fruits</th></nowiki><br>
! style="border:1px solid red; width:25%" | Vegetable<br>
<nowiki><th style="border:1px solid red; width:25%">Vegetable</th></nowiki><br>
! style="border:1px solid red; width:25%" | Nuts<br>
<nowiki><th style="border:1px solid red; width:25%">Nuts</th></nowiki><br>
! style="border:1px solid red; width:25%" | Grains<br>
<nowiki><th style="border:1px solid red; width:25%">Grains</th></nowiki><br>
|-<br>
<nowiki></tr></nowiki><br>
<font color="red"><nowiki>| colspan="4" style="border:1px solid red" | Apples</nowiki></font color><br>
<nowiki><tr></nowiki><br>
|-<br>
<font color="red"><nowiki><td colspan="4" </nowiki></font color>style="border:1px solid red">Apples<nowiki></td></nowiki><br>
| style="border:1px solid red" | Pears<br>
<nowiki></tr></nowiki><br>
| style="border:1px solid red" | Carrots<br>
<nowiki><tr></nowiki><br>
| style="border:1px solid red" | Walnuts<br>
<nowiki><td style="border:1px solid red">Pears</td></nowiki><br>
| style="border:1px solid red" | Oats<br>
<nowiki><td style="border:1px solid red">Carrots</td></nowiki><br>
|-<br>
<nowiki><td style="border:1px solid red">Walnuts</td></nowiki><br>
| style="border:1px solid red" | Cherries<br>
<nowiki><td style="border:1px solid red">Oats</td></nowiki><br>
| style="border:1px solid red" | Corn<br>
<nowiki></tr></nowiki><br>
| style="border:1px solid red" | Cashews<br>
<nowiki><tr></nowiki><br>
| style="border:1px solid red" | Barley<br>
<nowiki></tr></nowiki><br>
|-<br>
<nowiki><td style="border:1px solid red">Cherries</td></nowiki><br>
<font color="red">| colspan="3" style="border:1px solid red" | Orange</font color><br>
<nowiki><td style="border:1px solid red">Corn</td></nowiki><br>
| style="border:1px solid red" | Beans<br>
<nowiki><td style="border:1px solid red">Cashews</td></nowiki><br>
|}
<nowiki><td style="border:1px solid red">Barley</td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<font color="red"><nowiki><td colspan="3" </nowiki></font color>style="border:1px solid red">Orange<nowiki></td></nowiki><br>
<nowiki><td style="border:1px solid red">Beans</td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki></table></nowiki>
</div>
</div>
</div>
</div>
Line 1,493: Line 1,470:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Colspans must equal the number of cells in the next row.
*Colspans must equal the number of cells in the next row.
::A. True
:A. True
*If you have a row with four cells you can have in the preceding row one cell with a colspan="3" plus the remaining cell.
*If you have a row with four cells you can have in the preceding row one cell with a colspan="3" plus the remaining cell.
::A. True
:A. True
*If you have a row of seven cells you can have in the preceding row one cell with a colspan="2", the next cell with a colspan="3" and the remaining cell with a colspan="2".
*If you have a row of seven cells you can have in the preceding row one cell with a colspan="2", the next cell with a colspan="3" and the remaining cell with a colspan="2".
::A. True
:A. True
</div>
</div>
[[Help:Wiki University HTML-- Tables - Columns Only|Back to Tables - Column Spans]]
[[Help:Wiki University HTML-- Tables - Columns Only|Back to Tables - Column Spans]]
==Tables - Row Spans==
==Tables - Row Spans==
====Exercises====
====Exercises====
Line 1,505: Line 1,483:
*Merge the cells with Barley and Buckwheat in them.
*Merge the cells with Barley and Buckwheat in them.
*Merge the cells with Peas, Carrots and Corn in them.
*Merge the cells with Peas, Carrots and Corn in them.
<p>Here is what the table should look like:</p>
<span>Here is what the table should look like:</span>
{| style="border:1px solid red; width:100%; "  
{| style="border:1px solid red; width:100%; "  
|+ style="font-size:14pt; text-align:center; " | Healthy Foods
|+ style="font-size:14px; text-align:center; " | Healthy Foods
|-   
|-   
! style="width:25%; text-align:center; border:1px solid red; " | Fruits
! style="width:25%; text-align:center; border:1px solid red; " | Fruits
Line 1,514: Line 1,492:
! style="width:25%; text-align:center; border:1px solid red; " | Grains
! style="width:25%; text-align:center; border:1px solid red; " | Grains
|-
|-
| style="width:25%; border:1px solid red; " | Apples
| style="width:25%; border:1px solid red" | Apples
| rowspan="3" style="border:1px solid red; background-color:wheat" | Peas
| rowspan="3" style="border:1px solid red"| Peas
| style="width:25%; border:1px solid red; " | Peanuts
| style="width:25%; border:1px solid red"| Peanuts
| style="width:25%; border:1px solid red; " | Wheat
| style="width:25%; border:1px solid red" | Wheat
|-
|-
| style="width:25%; border:1px solid red; " | Pears
| style="width:25%; border:1px solid red; " | Pears
Line 1,525: Line 1,503:
| style="width:25%; border:1px solid red; " | Cherries
| style="width:25%; border:1px solid red; " | Cherries
| style="width:25%; border:1px solid red; " | Cashews
| style="width:25%; border:1px solid red; " | Cashews
| rowspan="2" style="width:25%; border:1px solid red; background-color:wheat " | Barley
| rowspan="2" style="width:25%; border:1px solid red " | Barley
|-
|-
| style="width:25%; border:1px solid red; " | Orange
| style="width:25%; border:1px solid red; " | Orange
Line 1,532: Line 1,510:


|}
|}
<p>Here is the coding:</p>
<span>Here is the coding:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<nowiki>{| style="border:1px solid red; width:100%" </nowiki><br>
<nowiki><table style="border:1px solid red; width:100%"></nowiki><br>
|+ style="font-size:14pt; text-align:center" | Healthy Foods<br>
<nowiki><caption style="font-size:14px; text-align:center">Healthy Foods</caption></nowiki><br>
|-  <br>
<nowiki><tr></nowiki><br>
! style="border:1px solid red; text-align:center; width:25%" | Fruits<br>
<nowiki><th style="border:1px solid red; text-align:center; width:25%">Fruits</th></nowiki><br>
! style="border:1px solid red; text-align:center; width:25%" | Vegetable<br>
<nowiki><th style="border:1px solid red; text-align:center; width:25%">Vegetable</th></nowiki><br>
! style="border:1px solid red; text-align:center; width:25%" | Nuts<br>
<nowiki><th style="border:1px solid red; text-align:center; width:25%">Nuts</th></nowiki><br>
! style="border:1px solid red; text-align:center; width:25%" | Grains<br>
<nowiki><th style="border:1px solid red; text-align:center; width:25%">Grains</th></nowiki><br>
|-<br>
<nowiki></tr></nowiki><br>
| style="border:1px solid red" | Apples<br>
<nowiki><tr></nowiki><br>
| <font color="red">rowspan="3" </font color>style="border:1px solid red" | Peas<br>
<nowiki><td style="border:1px solid red"></nowiki>Apples<nowiki></td></nowiki><br>
| style="border:1px solid red" | Peanuts<br>
<nowiki><td </nowiki><font color="red">rowspan="3" </font color><nowiki>style="border:1px solid red">Peas</nowiki><nowiki></td></nowiki><br>
| style="border:1px solid red" | Wheat<br>
<nowiki><td style="border:1px solid red">Peanuts</nowiki><nowiki></td></nowiki><br>
|-<br>
<nowiki><td style="border:1px solid red">Wheat</nowiki><nowiki></td></nowiki><br>
| style="border:1px solid red" | Pears<br>
<nowiki></tr></nowiki><br>
| style="border:1px solid red" | Walnuts<br>
<nowiki><tr></nowiki><br>
| style="border:1px solid red" | Oats<br>
<nowiki><td style="border:1px solid red">Pears</nowiki><nowiki></td></nowiki><br>
|-<br>
<nowiki><td style="border:1px solid red">Walnuts</nowiki><nowiki></td></nowiki><br>
| style="border:1px solid red" | Cherries<br>
<nowiki><td style="border:1px solid red">Oats</nowiki><nowiki></td></nowiki><br>
| style="border:1px solid red" | Cashews<br>
<nowiki></tr></nowiki><br>
| <font color="red">rowspan="2"</font color> style="border:1px solid red" | Barley<br>
<nowiki><tr></nowiki><br>
|-<br>
<nowiki><td style="border:1px solid red">Cherries</nowiki><nowiki></td></nowiki><br>
| style="border:1px solid red" | Orange<br>
<nowiki><td style="border:1px solid red">Cashews</nowiki><nowiki></td></nowiki><br>
| style="border:1px solid red" | Beans<br>
<nowiki><td </nowiki><font color="red">rowspan="2"</font color> style="border:1px solid red">Barley<nowiki></td></nowiki><br>
| style="border:1px solid red" | Almonds<br>
<nowiki></tr></nowiki><br>
|}
<nowiki><tr></nowiki><br>
<nowiki><td style="border:1px solid red">Orange</nowiki><nowiki></td></nowiki><br>
<nowiki><td style="border:1px solid red">Beans</nowiki><nowiki></td></nowiki><br>
<nowiki><td style="border:1px solid red">Almonds</nowiki><nowiki></td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki></table></nowiki>
</div>
</div>
</div>
</div>
Line 1,565: Line 1,548:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*If you are going to merge three cells in a column, you must delete the number of cells in the column under the cell to be marged to equal the number call for in the rowspan code minus one.
*If you are going to merge three cells in a column, you must delete the number of cells in the column under the cell to be marged to equal the number call for in the rowspan code minus one.
::A. True
:A. True
*If you want to merge two cells that are under each other in a column, you delete the cell next it in the row.
*If you want to merge two cells that are under each other in a column, you delete the cell next it in the row.
::B. False
:B. False
</div>
</div>
[[Help:Wiki University HTML-- Tables - Row Spans|Back to Table - Row Spans]]
[[Help:Wiki University HTML-- Tables - Row Spans|Back to Table - Row Spans]]
Line 1,579: Line 1,562:
*Center the name of the organization and the image in their cells.
*Center the name of the organization and the image in their cells.
*Make the items in the right hand cells into parameters.
*Make the items in the right hand cells into parameters.
<p>Your coding should look like this:</p>
<span>Your coding should look like this:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki>{| style="border:1px solid black; width:190px; float:right"</nowiki><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
|-<br>
 
| colspan="2" style="border:1px solid black; text-align:center" | organization<br>
<nowiki><table style="</nowiki><font color="red">border:1px solid black; width:190px; float:right</font color>"><br>
|-<br>
<nowiki><tr></nowiki><br>
| colspan="2" style="border:1px solid black;  text-align:center" | image<br>
<nowiki><td colspan="2" style="</nowiki><font color="red">border:1px solid black; text-align:center</font color>">organization<nowiki></td></nowiki><br>
|-<br>
<nowiki></tr></nowiki><br>
| style="border:1px solid black" | President:<br>
<nowiki><tr></nowiki><br>
| style="border:1px solid black" | {{{president}}}<br>
<nowiki><td colspan="2" style="</nowiki><font color="red">border:1px solid black;  text-align:center</font color>">image<nowiki></td></nowiki><br>
|-<br>
<nowiki></tr></nowiki><br>
| style="border:1px solid black" | Address:<br>
<nowiki><tr></nowiki><br>
| style="border:1px solid black" | {{{address}}}<br>
<nowiki><td style="</nowiki><font color="red">border:1px solid black</font color>">President:<nowiki></td></nowiki><br>
|-<br>
<nowiki><td style="</nowiki><font color="red">border:1px solid black</font color>"><nowiki>{{{president</nowiki><font color="red">|President's name</font color>}}}<nowiki></td></nowiki><br>
| style="border:1px solid black" | Phone:<br>
<nowiki></tr></nowiki><br>
| style="border:1px solid black" | {{{phone}}}<br>
<nowiki><tr></nowiki><br>
|-<br>
<nowiki><td style="</nowiki><font color="red">border:1px solid black</font color>">Address:<nowiki></td></nowiki><br>
| style="border:1px solid black" | Hours Open:<br>
<nowiki><td style="</nowiki><font color="red">border:1px solid black</font color>"><nowiki>{{{address</nowiki><font color="red">|Address</font color>}}}<nowiki></td></nowiki><br>
| style="border:1px solid black" | {{{hours open}}}<br>
<nowiki></tr></nowiki><br>
|}</div>
<nowiki><tr></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid black</font color>">Phone:<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid black</font color>"><nowiki>{{{phone</nowiki><font color="red">|Phone number</font color>}}}<nowiki></td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid black</font color>">Hours Open:<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid black</font color>"><nowiki>{{{hours open</nowiki><font color="red">|Hours open</font color>}}}<nowiki></td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki></table></nowiki></div>
</div>
</div>


Line 1,603: Line 1,594:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Parameters have two opening and closing curly brackets surrounding them.
*Parameters have two opening and closing curly brackets surrounding them.
::A. False
:A. False
*Infoboxes are usually located at the top of the page on the right side.
*Infoboxes are usually located at the top of the page on the right side.
::A. True
:A. True
*Infoboxes are saved just like other templates, but it is good practice to include the word "infobox" in the title.
*Infoboxes are saved just like other templates, but it is good practice to include the word "infobox" in the title.
::A. True
:A. True
</div>
</div>
[[Help:Wiki University HTML--Infobox - Creating|Back to Infobox - Creating]]
[[Help:Wiki University HTML--Infobox - Creating|Back to Infobox - Creating]]
Line 1,616: Line 1,607:


<div style="clear:both"></div>
<div style="clear:both"></div>
<p>Here is the coding:</p>
<span>Here is the coding:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<nowiki>{{Infobox U.S. County</nowiki><br>
<nowiki>{{Infobox U.S. County</nowiki><br>
Line 1,627: Line 1,618:
| seat wl = Independence<br>
| seat wl = Independence<br>
}} </div><br>
}} </div><br>
*<font color="blue"><b>NOTICE</b></font color> the images did not require the brackets as this was built into the infobox.
*<font color="blue"><b>NOTICE</b></font color> the image did not require the brackets as this was built into this particular infobox.
</div>
</div>


Line 1,646: Line 1,637:


<div style="clear:both"></div>
<div style="clear:both"></div>
<p>Here is the coding:</p>
<span>Here is the coding:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<nowiki>{|</nowiki> style="width:190px; border:1px solid black; float:right" <br>
 
<font color="black"><nowiki>{{!}}</nowiki></font color>-<br>
<nowiki><table class="infobox" style="width:200px; "></nowiki><br>
<font color="black"><nowiki>{{!}}</nowiki></font color> colspan="2" style="text-align:center; border:1px solid black"|organization name<br>
<nowiki><tr></nowiki><br>
<font color="black"><nowiki>{{!}}</nowiki></font color>-<br>
<nowiki><td colspan="2">{{{organization}}}</nowiki><br>
<font color="black"><nowiki>{{!}}</nowiki></font color> colspan="2" style="text-align:center; border:1px solid black"|image<br>
<nowiki></td></nowiki><br>
<font color="black"><nowiki>{{!}}</nowiki></font color>-<br>
<nowiki></tr></nowiki><br>
<font color="black"><nowiki>{{!}} style="border:1px solid black"|</nowiki></font color><nowiki>{{#if:{{{president|}}}|President:</nowiki><br>
<nowiki><tr></nowiki><br>
<font color="black"><nowiki>{{!}}</nowiki></font color><nowiki> {{{president}}}}}</nowiki><br>
<font color="red"><nowiki>{{#if:{{{image|}}}|</nowiki></font color><nowiki><td colspan="2">{{{</nowiki>image}}}<font color="red">}}</font color><br>
<font color="black"><nowiki>{{!}}</nowiki></font color>-<br>
<nowiki></td></nowiki><br>
<font color="black"><nowiki>{{!}} style="border:1px solid black"|</nowiki></font color><nowiki>{{#if:{{{address|}}}|Address:</nowiki><br>
<nowiki></tr></nowiki><br>
<font color="black"><nowiki>{{!}}</nowiki></font color><nowiki> {{{address}}}</nowiki><br>
<nowiki><tr></nowiki><br>
<font color="black"><nowiki>{{!}}</nowiki></font color>-<br>
<font color="red"><nowiki>{{#if:{{{president|}}}|</nowiki></font color><nowiki><td>President:</td></nowiki><br>
<font color="black"><nowiki>{{!}} style="border:1px solid black"|</nowiki></font color><nowiki>{{#if:{{{phone|}}}|Phone:</nowiki><br>
<nowiki><td>{{{president}}}</nowiki><font color="red">}}</font color><br><nowiki></td></nowiki><br>
<font color="black"><nowiki>{{!}}</nowiki></font color><nowiki> {{{phone}}}</nowiki><br>
<nowiki></tr></nowiki><br>
<font color="black"><nowiki>{{!}}</nowiki></font color>-<br>
<nowiki><tr></nowiki><br>
<font color="black"><nowiki>{{!}} style="border:1px solid black"|</nowiki></font color><nowiki>{{#if:{{{hours open|}}}|Hours Open:</nowiki><br>
<font color="red"><nowiki>{{#if:{{{address|}}}|</nowiki></font color><nowiki><td>Address:</td></nowiki><br>
<font color="black"><nowiki>{{!}}</nowiki></font color><nowiki> {{{hours open}}}</nowiki><br>
<nowiki><td>{{{address}}}</nowiki><font color="red">}}</font color><br><nowiki></td></nowiki><br>
<nowiki>|}</nowiki>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<font color="red"><nowiki>{{#if:{{{phone|}}}|</nowiki></font color><nowiki><td>Phone:</td></nowiki><br>
<nowiki><td>{{{phone}}}</nowiki><font color="red">}}</font color><br><nowiki></td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<font color="red"><nowiki>{{#if:{{{hours open|}}}|</nowiki></font color><nowiki><td>Hours Open:</td></nowiki><br>
<nowiki><td>{{{hours open}}}</nowiki><font color="red">}}</font color><br><nowiki></td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki></table></nowiki>
</div>
</div>
</div>
</div>
Line 1,686: Line 1,686:


<div style="clear:both"></div>
<div style="clear:both"></div>
<p>Here is the coding:</p>
<span>Here is the coding:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<nowiki>{{Infobox U.S. County</nowiki><br>
<nowiki>{{Infobox U.S. County</nowiki><br>
Line 1,702: Line 1,702:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Once the information after the equal signs is entered and saved, there is no changing the parameters.
*Once the information after the equal signs is entered and saved, there is no changing the parameters.
::B. False
:B. False
*Infoboxes can only be used on county pages.
*Infoboxes can only be used on county pages.
::B. False
:B. False
*Infoboxes are limited just to genealogical organizations.  
*Infoboxes are limited just to genealogical organizations.  
::B. False
:B. False
</div>
</div>
[[Help:Wiki University HTML--Sidebars|Back to Sibebars]]
[[Help:Wiki University HTML--Sidebars|Back to Sibebars]]
Line 1,718: Line 1,718:
*For Counties use the first 5 counties from the [[Anhalt_-_Herzogtum_(duchy)]] navbox at the bottom of the page.
*For Counties use the first 5 counties from the [[Anhalt_-_Herzogtum_(duchy)]] navbox at the bottom of the page.
*Change the parameter to country.
*Change the parameter to country.
<p>Here's what it should look like:</p>
<span>Here's what it should look like:</span>
{| style="width:100%; border:1px solid black; border-collaspe:separate; border-spacing:5px; "
{| style="width:100%; border:1px solid black; border-collaspe:separate; border-spacing:5px; "
|-  
|-  
Line 1,729: Line 1,729:
| style="background-color:lightblue; " | [[Anhalt - Herzogtum (duchy) Genealogy|Anhalt]]{{·}} [[Baden Grossherzogtum (grand duchy) Genealogy|Baden]]{{·}} [[Bayern (Bavaria) – Königreich (kingdom) Genealogy|Bayern]]{{·}} [[Braunschweig (Brunswick) – Herzogtum (duchy) Genealogy|Braunschweig]]{{·}} [[Bremen, Germany Genealogy|Bremen]]
| style="background-color:lightblue; " | [[Anhalt - Herzogtum (duchy) Genealogy|Anhalt]]{{·}} [[Baden Grossherzogtum (grand duchy) Genealogy|Baden]]{{·}} [[Bayern (Bavaria) – Königreich (kingdom) Genealogy|Bayern]]{{·}} [[Braunschweig (Brunswick) – Herzogtum (duchy) Genealogy|Braunschweig]]{{·}} [[Bremen, Germany Genealogy|Bremen]]
|}
|}
<p>Here's what the code should look like:</p>
<span>Here's what the code should look like:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<nowiki>{| style="width:100%; border:1px solid black; border-collaspe:separate; border-spacing:5px; "</nowiki><br>
<nowiki>{| style="width:100%; border:1px solid black; border-collaspe:separate; border-spacing:5px; "</nowiki><br>
Line 1,758: Line 1,758:
*Place a "relative" positioned object that is 300 pixels wide and 100 pixels high between the third and fourth sentence of our Lorem ipsum paragraph.
*Place a "relative" positioned object that is 300 pixels wide and 100 pixels high between the third and fourth sentence of our Lorem ipsum 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.<div style="position:relative; width:300px; height:100px"></div> Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.<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.<div style="position:relative; width:300px; height:100px"></div> Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.<br><br>
<p>Here is the coding:</p>
<span>Here is the coding:</span>
<div style="background-color:wheat; padding:10px; width:97%; font-size:10pt; font-family:Courier New">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.<font color="red"><nowiki><div style="position:relative;</nowiki></font color><font color="red"> width:300px; height:100px"></font color><font color="red"><nowiki></div></nowiki></font color>Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</div>
<div style="border:2px solid crimson; background-color:moccasinpadding:10px; width:97%; font-size:10pt; font-family:Courier New">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.<font color="red"><nowiki><div style="position:relative;</nowiki></font color><font color="red"> width:300px; height:100px"></font color><font color="red"><nowiki></div></nowiki></font color>Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</div>
----
----
*Place a "relative" positioned object after the last sentence that has the following attributes:
*Place a "relative" positioned object after the last sentence that has the following attributes:
Line 1,767: Line 1,767:
**that is 200 pixels high.
**that is 200 pixels high.
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="position:relative; width 100%; height:200px; background-color:blue; border:5px solid red"></div><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.<div style="position:relative; width 100%; height:200px; background-color:blue; border:5px solid red"></div><br>
<p>Here is the coding:</p>
<span>Here is the coding:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
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.<font color="red"><nowiki><div style="position:relative;</nowiki></font color><font color="red"> width:100%; height:200px; background-color:blue; border:5px solid red"></font color><font color="red"><nowiki></div></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.<font color="red"><nowiki><div style="position:relative;</nowiki></font color><font color="red"> width:100%; height:200px; background-color:blue; border:5px solid red"></font color><font color="red"><nowiki></div></nowiki></font color></div>
Line 1,798: Line 1,798:
</div></div><br><br><br><br>
</div></div><br><br><br><br>
Here is the coding:<br>
Here is the coding:<br>
<div style="background-color:#FFD199; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<nowiki><div style="position:relative; </nowiki><font color="red"> left:150px; top:50px;</font color><nowiki>border:1px solid red; width:400px; height:200px;  "></nowiki><br><nowiki><div style="position:absolute; left:0px; top:0px; width:200px; height:75px; border:2px solid green; background-color:orange; "></nowiki>
<nowiki><div style="position:relative; </nowiki><font color="red"> left:150px; top:50px;</font color><nowiki>border:1px solid red; width:400px; height:200px;  "></nowiki><br><nowiki><div style="position:absolute; left:0px; top:0px; width:200px; height:75px; border:2px solid green; background-color:orange; "></nowiki>
<nowiki></div></nowiki><br>
<nowiki></div></nowiki><br>
Line 1,869: Line 1,869:
</div>
</div>
[[Help:Wiki University HTML--Tabs|Back to Tabs]]
[[Help:Wiki University HTML--Tabs|Back to Tabs]]
 
==Misc==
 
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*If I want to copy the name of the article someplace in the article, you would use <nowiki>[[NAMESPACE]]</nowiki>
:A. True
*To recover something you may have deleted accidentally, you would hit the control key and the D key.
:B. False ''(Control + Z)''
*To search for a word in an article, you would hit the control key and the S key.
:B. False ''(Control + F)''
*To highlight an entire page, you would bit the Control and W key
:B. False ''(Control + A)''
*If you want exhibit code in an article, you would use opening and closing noinclude tags.
:B. False ''(<nowiki><nowiki> ..... </nowiki></nowiki>)''
</div>
[[Help:Wiki University HTML-- Misc|Back to Misc]]
[[Category:HTML Lessons]]
[[Category:HTML Lessons]]