FamilySearch HTML Tutorial Answers: Difference between revisions

From FamilySearch Wiki
VisualWikitext
m (Text replacement - "\<p(.*?)\>(.*?)\<\/p>" to "<span$1>$2</span>")
mNo edit summary
(183 intermediate revisions by 6 users not shown)
Line 1: Line 1:
__NOTOC__
==HOME==
==Home==
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*What is CSS?
:D. All of the above
*What is HTML?
:B. Language for all of the Internet
*What is the left sidebar for?
:D. All of the above.
</div>
[[Help:Wiki University HTML-- Tutorial|Back to Home Page]]
----
 
==Introduction==
<div style="border:10px solid lightgray; padding:5px; ">
*The forward slash / is used in
:A. Closing header tags.
*Tags are easy to see on pages in the Wiki
:False
*Two monitors are always better than one
:True
</div>
[[Help:Wiki University HTML-- Introduction|Back to Introduction]]
----
 
==Headers==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgreen; padding:5px; ">
=Kentucky=
*Since these categories will show up in red, what does that mean?
===History===
::C. All of the above.
===Vital Records===
*Categories are external links surrounded by single square brackets.
===Birth Certificates===
::False
Here's the coding:
*Categories are always placed at the top of the page.
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
::False
#<font color="red"><nowiki><h1></nowiki></font color>Kentucky Genealogy<font color="red"><nowiki></h1></nowiki></font color>
*One should always check to see if a category has been created rather than make up a new one.
#<font color="red"><nowiki><h2></nowiki></font color>History<font color="red"><nowiki></h2></nowiki></font color>
::True
#<font color="red"><nowiki><h2></nowiki></font color>Vital Records<font color="red"><nowiki></h2></nowiki></font color>
#<font color="red"><nowiki><h3></nowiki></font color>Birth Certificates<font color="red"><nowiki></h3></nowiki></font color></div>
</div>
</div>
=====Quick Quiz=====
[[FamilySearch Wikitext Categories|Back to Categories]]
<div style="border:10px solid lightgray; padding:5px; ">
*We don't use Header Ones in FamilySearch Wiki articles
:True
*Header Five and Six are rairly used
:True
*Header Two work well in FamilySearch WIki
:False
*Avoid using Header Three and Header Four in articles
:False
</div>
[[Help:Wiki University HTML-- Headers|Back to Headers]]
----
----
==Lists==
====Exercises====
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Coding for unordered list:
The categories together should look like this:
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<font color="red"><nowiki><ul></nowiki></font color><br>
<font color="red"><nowiki><li></nowiki></font color>Birth Certificates<font color="red"><nowiki></li></nowiki></font color><br>
<font color="red"><nowiki><li></nowiki></font color>Land Records<font color="red"><nowiki></li></nowiki></font color><br>
<font color="red"><nowiki><li></nowiki></font color>Probate Records<font color="red"><nowiki></li></nowiki></font color><br>
<font color="red"><nowiki><li></nowiki></font color>Census<font color="red"><nowiki></li></nowiki></font color><br>
<font color="red"><nowiki><li></nowiki></font color>Vital Records<font color="red"><nowiki></li></nowiki></font color><br>
<font color="red"><nowiki></ul></nowiki></font color></div><br>


*This is how the unordered lists will appear:
<font color="red"><nowiki>Categories: Wikitext lessons | Wikitext education</nowiki></font color>
::*Birth Certificates
::*Land Records
::*Probate Records
::*Census
::*Vital Records
*Coding for ordered list:
 
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<font color="red"><nowiki><ol></nowiki></font color><br>
<font color="red"><nowiki><li></nowiki></font color>World<font color="red"><nowiki></li></nowiki></font color><br>
<font color="red"><nowiki><li></nowiki></font color>North America<font color="red"><nowiki></li></nowiki></font color><br>
<font color="red"><nowiki><li></nowiki></font color>United States of America<font color="red"><nowiki></li></nowiki></font color><br>
<font color="red"><nowiki><li></nowiki></font color>State of Missouri<font color="red"><nowiki></li></nowiki></font color><br>
<font color="red"><nowiki><li></nowiki></font color>Jackson County<font color="red"><nowiki></li></nowiki></font color><br>
<font color="red"><nowiki><li></nowiki></font color>Independence<font color="red"><nowiki></li></nowiki></font color><br>
<font color="red"><nowiki></ol></nowiki></font color></div><br>
*This is how the ordered list will appear:
#World
#North America
#United States of America
#State of Missouri
#Jackson County
#Independence
</div>
</div>
====Quick Quiz====
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*If you have a cooking recipe, which list would you use to show the steps?
::A. Ordered List
*If you were listing your favorite foods in order of preference, which lists would you use?
::A. Ordered List
*If you were listing the contents of your pockets, which list would you use?
::B. Unordered List
</div>
[[Help:Wiki University HTML-- Lists|Back to Lists]]
----
==Nested Lists==
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgreen; padding:5px; ">
To practice nesting unordered lists, in your sandbox create an list with the following items: Fruits, Vegetables, Nuts and Grains. In between each item list three varieties.<br>
*Since these categories will show up in red, what does that mean?
Here is the coding you should have entered:
::C. All of the above.
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
*Categories are external links surrounded by single square brackets.
 
::False
<font color="red"><nowiki><ul></nowiki></font color>
*Categories are always placed at the top of the page.
:<font color="green"><nowiki><li></nowiki></font color>Fruits<br>
::False
::<font color="blue"><nowiki><ul></nowiki></font color><br>
*One should always check to see if a category has been created rather than make up a new one.
:::<nowiki><li>Apples</li></nowiki><br>
::True
:::<nowiki><li>Pears</li></nowiki><br>
:::<nowiki><li>Oranges</li></nowiki><br>
::<font color="blue"><nowiki></ul></nowiki></font color><br>
:<font color="green"><nowiki></li></nowiki></font color><br>
:<font color="green"><nowiki><li></nowiki></font color>Vegetables<br>
::<font color="blue"><nowiki><ul></nowiki></font color><br>
:::<nowiki><li>Peas</li></nowiki><br>
:::<nowiki><li>Carrots</li></nowiki><br>
:::<nowiki><li>Corn</li></nowiki><br>
::<font color="blue"><nowiki></ul></nowiki></font color><br>
:<font color="green"><nowiki></li></nowiki></font color><br>
:<font color="green"><nowiki><li></nowiki></font color>Nuts<br>
::<font color="blue"><nowiki><ul></nowiki></font color><br>
:::<nowiki><li>Walnuts</li></nowiki><br>
:::<nowiki><li>Peanuts</li></nowiki><br>
:::<nowiki><li>Almonds</li></nowiki><br>
::<font color="blue"><nowiki></ul></nowiki></font color><br>
:<font color="green"><nowiki><li></nowiki></font color>Grains<br>
::<font color="blue"><nowiki><ul></nowiki></font color><br>
:::<nowiki><li>Wheat</li></nowiki><br>
:::<nowiki><li>Soybeans</li></nowiki><br>
:::<nowiki><li>Barley</li></nowiki><br>
::<font color="blue"><nowiki></ul></nowiki></font color><br>
:<font color="green"><nowiki></li></nowiki></font color><br>
<font color="red"><nowiki></ul></nowiki></font color></div><br><br>
Here's how the links would look on a page:
*Fruits
**Apples
**Pears
**Oranges
*Vegetables
**Peas
**Carrots
**Corn
*Nuts
**Walnuts
**Peanuts
**Almonds
*Grains
**Wheat
**Soybeans
**Barley
</div>
 
<br><br>
<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?:
: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?
:A. Ordered List
</div>
</div>
[[Help:Wiki University HTML-- Nesting Lists|Back to Nesting Lists]]
[[FamilySearch Wikitext Categories|Back to Categories]]
----
----
==Comments==
====Exercises====
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px;  ">
*Your wording of the comments is as good as anyone else's.  Whatever makes sense to you is ok.
The categories together should look like this:
<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>*[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>
 
<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>[http://www.atsu.edu/atsmlib/ A T Still Memorial Library]</nowiki><br>
<nowiki>600 W Jefferson St. Kirksville, MO</nowiki><br>
<nowiki>(660) 626-2345</nowiki><br><br>
<nowiki>[http://library.truman.edu/ Pickler Memorial Library - Turman State University]</nowiki><br>
<nowiki>100 E Normal St. Kirksville, MO</nowiki><br>
<nowiki>(660) 785-4000</nowiki><br><br>
<nowiki>Adair County Public Library</nowiki><br>
<nowiki>1 Library Ln. Kirksville, MO</nowiki><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><!--</nowiki></font color>List of historical societies<font color="red">----------------></font color></div><br>
 
<nowiki>=== Societies ===</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>*[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><!--</nowiki></font color>Link to town clerk<font color="red">----------------></font color></div><br>
 
<nowiki>==== Town Clerk  ====</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><!--</nowiki></font color>Location of city directory for Kirksville, Missouri<font color="red">----------------></font color></div><br>


<nowiki>=== City Directories  ===</nowiki><br>
<font color="red"><nowiki>Categories: Wikitext lessons | Wikitext education</nowiki></font color>
<nowiki>[http://library.truman.edu/books/eBook%20Collections.asp Truman State University]
</nowiki>
</div>
</div>
[[Help:Wiki University HTML-- Comments|Back to Comments]]
====Quick Quiz====
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*How many comments can you insert on page?
::C. As many as you like.
*How many words can you put in a comment?
::C. As many words as you want.
*Where can you insert comments?
::C. Anywhere you want.</div>
[[Help:Wiki University HTML-- Comments|Back to Comments]]
----
==Paragraphs==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgreen; padding:5px; ">
*Grab a paragraph from a page in the Wiki and paste it three times in your sandbox.  Separate the paragraphs with two <font color="red"><nowiki><br></nowiki></font color> between each one.
*Since these categories will show up in red, what does that mean?
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>
::C. All of the above.
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>
*Categories are external links surrounded by single square brackets.
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.
::False
*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.
*Categories are always placed at the top of the page.
<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>
::False
<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>
*One should always check to see if a category has been created rather than make up a new one.
<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>
::True
*<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>
 
[[FamilySearch Wikitext Categories|Back to Categories]]
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*When you load paragraphs, using the enter button will automatically put spaces between them.
: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.
: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>
:B. False
</div>
[[Help:Wiki University HTML-- Paragraphs|Back to Paragraph Page]]
 
==Changing Fonts==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
<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><span style="</nowiki><font color="red">font-family:papyrus; font-size:14pt</font color>">Lorem ipsum ... <nowiki></span></nowiki></div>
 
<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><span style="</nowiki><font color="red">font-family:mistral; font-size:14pt</font color>">Lorem ipsum ... <nowiki></span></nowiki></div>
 
</div>
 
====Quick Quiz====
<div style="border:10px solid lightgray; ">
*How many attributes can you put in the paragraph tag?
::D. None of the above (It is unlimited)
*What symbol do you use to separate a property from a value?
::A. Colon
</div>
[[Help:Wiki University HTML-- Changing Fonts|Back to Changing Fonts]]
----
 
==Font Size==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
*Enlarge the lorem ipsum paragraph to 20px.
<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:14px; font-family:Courier New"><nowiki><span style="</nowiki><font color="red">font-size:20px</font color>">Lorem ipsum ... <nowiki></span></nowiki></div><br>
*Enlarge a header to 36px.
<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>
 
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">*You cannot enlarge headers
::B. False
*You can add the "font-size" attribute between the = sign and the words of the header
::B. False</div>
[[Help:Wiki University HTML-- Sizing Fonts|Back to Sizing Fonts]]
----
----
==Font Colors==
====Exercises====
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Change the lorem ipsum paragraph text to a color on this [http://www.w3schools.com/html/html_colornames.asp list].
The categories together should look like this:
*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><span style="</nowiki><font color="red">color:Cornflowerblue</font color>">Lorem ipsum ... <nowiki></span></nowiki></div><br><br>
<font color="red"><nowiki>Categories: Wikitext lessons | Wikitext education</nowiki></font color>
 
<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="</nowiki><font color="red">color:red</font color">>Header<nowiki></h1></nowiki></div>
</div>
</div>
====Quick Quiz====
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*You can use any name that is common to everyone for a color.
::B. False
*If the HEX number does not work in the code you may have:
::c. All of the above
*You have to use the header tags to color headers
::A. True
</div>
[[Help:Wiki University HTML-- Font Colors|Back to Font Colors]]
----
==Font Bold-Italics==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgreen; padding:5px; ">
*Make the first sentence bold.
*Since these categories will show up in red, what does that mean?
'''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>
::C. All of the above.
Here is the coding:
*Categories are external links surrounded by single square brackets.
<p style="border:1px solid red; padding:5px">
::False
<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>
*Categories are always placed at the top of the page.
 
::False
*Make the next to the last sentence of lorem ipsum italic.
*One should always check to see if a category has been created rather than make up a new one.
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.
::True
<span>Here is the coding</span>
<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.
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>Here is the coding</span>
<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>
 
[[FamilySearch Wikitext Categories|Back to Categories]]
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*To make a sentence in bold text, you use the "text-weight:bold" attribute
::B. False
*To make a word italicized, you flank the "text-style:italic attribute
::B. False
</div>
[[Help:Wiki University HTML-- Font Bold-Italics|Back to Font Bold-Italics]]
----
----
==Multi-attributes==
====Exercises====
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10px; font-family:Courier New">
The categories together should look like this:


<nowiki><span style="</nowiki><font color="red">font-family:arial; font-size:12px; color:red</font color>">Lorem ipsum ....<nowiki></span></nowiki>
<font color="red"><nowiki>Categories: Wikitext lessons | Wikitext education</nowiki></font color>
</div>
</div>
</div>
====Quick Quiz====
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*Attributes are separated with?
::C. Semi-colon
*How many attributes can you put in the paragraph tag?
::D. None of the above
*How would you make a word italicized along with the three attribute changes to the paragraph?
::C. Flank the work with two apostrophes.
</div>
[[Help:Wiki University HTML-- Multi-attributes|Back to Multi-attributes]]
----
==Backgrounds==
====Exercises====
<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.
*Since these categories will show up in red, what does that mean?
 
::C. All of the above.
<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>
*Categories are external links surrounded by single square brackets.
 
::False
<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>
*Categories are always placed at the top of the page.
 
::False
*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.
*One should always check to see if a category has been created rather than make up a new one.
 
::True
<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>
 
[[FamilySearch Wikitext Categories|Back to Categories]]
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*How to make text invisible on a page without erasing it.
:C. All of the above.
 
</div>
[[Help:Wiki University HTML-- Backgrounds|Back to Backgrounds]]
----
----
==Padding==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
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>
<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. 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"><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>
<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.
</div>
====Quick Quiz====
<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?
:C. padding-left:20px
*To have the background 50px from all side of the text, what attribute do you use?
:C. None of the above</div>
[[Help:Wiki University HTML-- Padding|Back to Padding]]
==Div Tag - Introduction==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
*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="</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="</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:crimson; 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>
</div>
[[Help:Wiki University HTML-- Div Tag - Introduction|Back to Div Tag - Introduction]]
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*The div tag and paragraph tag are both have built in margins.
:A. False
*The attributes work the same way in the div tag as in the paragraph tag
:A. True
*Div tags put spaces between paragraphs
:B. False</div>
[[Help:Wiki University HTML-- Div Tag - Introduction|Back to Div Tag - Introduction]]
==Margins==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
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"><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 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"><nowiki><div style="</nowiki><font color="red">background-color:lightblue; color:white; margin-top:20px</font color>">Lorem ipsum ....<nowiki></div></nowiki></div>
</div>
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*Margin-top only affects top of paragraph
:A. True
*Margin-left moves the paragraph to the right of the left side of the page
:A. True
*Margin-right moves the paragraph to the right of the right side of the of the page
:B. False
</div>
[[Help:Wiki University HTML-- Margins|Back to Margins]]
==Borders==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
*Using a div tag put a border around our lorem ipsum paragraph of a "groove" type that is 10 pixels thick with whatever color you like.
<div style="border:10px groove lightgreen; ">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:
<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:
<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>
*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><div style="</nowiki><font color="red">border:15px ridge lightgreen</font color>">Lorem ipsum ...<nowiki></div>  </nowiki></div>
</div>
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*You can only put borders on all sides.
::B. False
*There is a default space between text and borders
::B. False
*Solid lines are all that is allowed in borders
::B. False
</div>
[[Help:Wiki University HTML-- Borders|Back to Borders]]
==Width and Height==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
In your sandbox put the lorem ipsum in a div tag container with a width of 200 pixels and a height of 400 pixels.<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:
<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>
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">*You can't use both width and height in a div tag
::B. False
*You can't use both width and height in a paragraph tag
::B. False
*You can use percentages in height attributes
::B. False</div>
[[Help:Wiki University HTML-- Width and Height|Back to Width and Height]]
==Alignment==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
*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"><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>
<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>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki>No attributes need, the left side is the default position.</nowiki></font color></div>
</div>
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*Text-align only works in header tags
::B. False
*Text-align cannot put a title to the left because that is the default position.
::B. False
*Text-align will work in header, paragraph and div tags
::A. True
</div>
[[Help:Wiki University HTML-- Alignment|Back to Alignment]]
==Tables==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
*Create a table with four rows and four cells in each row. 
**In the first column list four fruits. 
**In the second column, four vegetables. 
**In the third column, four nuts. 
**In the fourth colomn, four grains. 
**This table will be the basis for all future exercises on tables.  (Be careful we are talking about columns not rows.  This exercise will teach you how to arrange items in columns.)<br>
Here is the table with its columns:<br>
{|
|-
| Apples
| Peas
| Peanuts
| Wheat
|-
| Pears
| Carrots
| Walnuts
| Oats
|-
| Cherries
| Corn
| Cashews
| Barley
|-
| Oranges
| Beans
| Almonds
| Buckwheat
|}
Here is the coding:<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><table></nowiki></font color><br>
<font color="red"><nowiki><tr></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></nowiki></font color>Peas<font color="red"><nowiki></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></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><td></nowiki></font color>Pears<font color="red"><nowiki></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></nowiki></font color>Walnuts<font color="red"><nowiki></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><td></nowiki></font color>Cherries<font color="red"><nowiki></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></nowiki></font color>Cashews<font color="red"><nowiki></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><td></nowiki></font color>Oranges<font color="red"><nowiki></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></nowiki></font color>Almonds<font color="red"><nowiki></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></table></nowiki></font color></div>
</div>
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*Tables do not need a closing tag
:B. False
*Rows must have a closing tag
:A. True
*Cells must have something in them for the table to be visible.
:A. True
</div>
[[Help:Wiki University HTML-- Tables|Back to Tables]]
==Tables - Borders==
====Exercise====
<div style="border:10px solid lightgreen; padding:5px; ">
*With your table from the previous exercise, put a 15 pixel "ridge" border with a border color of "cornsilk."
{| style="border:15px ridge cornsilk"
|-
| Apples
| Peas
| Peanuts
| Wheat
|-
| Pears
| Carrots
| Walnuts
| Oats
|-
| Cherries
| Corn
| Cashews
| Barley
|-
| Oranges
| Beans
| Almonds
| Buckwheat
|}
<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><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.
{| style="border:15px double brown"
|-
| Apples
| Peas
| Peanuts
| Wheat
|-
| Pears
| Carrots
| Walnuts
| Oats
|-
| Cherries
| Corn
| Cashews
| Barley
|-
| Oranges
| Beans
| Almonds
| Buckwheat
|}
<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><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.
*<font color="blue"><b>NOTICE</b></font color> no pipe after the attribute.
{| style="border:15px double brown"
|-
| style="border:1px solid blue" | Apples
| Peas
| Peanuts
| Wheat
|-
| style="border:1px solid blue" | Pears
| Carrots
| Walnuts
| Oats
|-
| style="border:1px solid blue" | Cherries
| Corn
| Cashews
| Barley
|-
| style="border:1px solid blue" | Oranges
| Beans
| Almonds
| Buckwheat
|}
<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><table </nowiki><font color="red">style="border:15px double brown"</font color>><br>
<nowiki><tr></nowiki><br>
<nowiki><td </nowiki><font color="red">style="border:1px solid blue"</font color>>Apples<nowiki></td></nowiki><br>
<nowiki><td></nowiki>Peas<nowiki></td></nowiki><br>
<nowiki><td></nowiki>Peanuts<nowiki></td></nowiki><br>
<nowiki><td></nowiki>Wheat<nowiki></td></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><td </nowiki><font color="red">style="border:1px solid blue"</font color>>Pears<nowiki></td></nowiki><br>
<nowiki><td></nowiki>Carrots<nowiki></td></nowiki><br>
<nowiki><td></nowiki>Walnuts<nowiki></td></nowiki><br>
<nowiki><td></nowiki>Oats<nowiki></td></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><td </nowiki><font color="red">style="border:1px solid blue"</font color>>Cherries<nowiki></td></nowiki><br>
<nowiki><td></nowiki>Corn<nowiki></td></nowiki><br>
<nowiki><td></nowiki>Cashews<nowiki></td></nowiki><br>
<nowiki><td></nowiki>Barley<nowiki></td></nowiki><br>
<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>
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*Borders can only be on the outside of a table.
:B. False
*You can put borders around rows
:B. False
*You can put borders on columns
:A. True
</div>
[[Help:Wiki University HTML-- Tables - Borders|Back to Tables - Borders]]
==Tables - Widths==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
*With our above table place a green border, "inset" style and 25 pixels wide.
*Make the table 90% in width.
*Next place a 1 pixel green border around the cells in the first row.
*Make the first column 35 percent width, the second 15%, the third 25% and let the last column determine its own width.
{| style="border:25px inset green; width:90%"
|-
| style="border:1px solid green; width:35%" | Apples
| style="border:1px solid green; width:15%" | Peas
| style="border:1px solid green; width:25%" | Peanuts
| style="border:1px solid green; " | Wheat
|-
| Pears
| Carrots
| Walnuts
| Oats
|-
| Cherries
| Corn
| Cashews
| Barley
|-
| Oranges
| Beans
| Almonds
| Buckwheat
|}
*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><table style="</nowiki><font color="red">border:25px inset green; width:90%</font color>"><br>
<nowiki><tr></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid green; width:35%</font color">">Apples<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid green; width:15%</font color">">Peas<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid green; width:25%</font color">">Peanuts<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid green</font color>">Wheat<nowiki></td></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><td>Pears</td></nowiki><br>
<nowiki><td>Carrots</td></nowiki><br>
<nowiki><td>Walnuts</td></nowiki><br>
<nowiki><td>Oats</td></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><td>Cherries</td></nowiki><br>
<nowiki><td>Corn</td></nowiki><br>
<nowiki><td>Cashews</td></nowiki><br>
<nowiki><td>Barley</td></nowiki><br>
<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>
====Quick Quiz====
<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
:A. True
*The width of a table will be determined by the material in the cells, if you do not set the widths
:A. True
*You can only set the width of a table in percentages
:B. False</div>
[[Help:Wiki University HTML-- Tables - Widths|Back to Tables - Widths]]
==Tables - Captions==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
*With our above table place a orange border, "outset" style and 25 pixels thick.
*Make the table 85% in width.
*Next place a orange border around the cells in the first column.
*Make the columns the same width.
*Install our Healthy Foods caption;
**Font - Curlz MT
**Font - 28pt
**Center caption
**20 pixel space between caption and top of table
Here is what it should look like:
{| style="border:25px outset orange; width:85%; "
|+ style="font-size:28pt; text-align:center; margin-bottom:20px; font-family:Curlz MT" | Healthy Foods
|-
| style="border:1px solid orange; width:25%; "| Apples
| style="width:25%; "| Peas
| style="width:25%; "| Peanuts
| style="width:25%; "| Wheat
|-
| style="border:1px solid orange; width:25%; "| Pears
| Carrots
| Walnuts
| Oats
|-
| style="border:1px solid orange; width:25%; "| Cherries
| Corn
| Cashews
| Barley
|-
| style="border:1px solid orange; width:25%; "| Orange
| Beans
| Almonds
| Buckwheat
|}
*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><table style="</nowiki><font color="red">border:25px outset orange; width:85%</font color>"><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><tr></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid orange; width:25%</font color">">Apples<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki><font color="red">width:25%</font color">">Peas<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki><font color="red">width:25%</font color">">Peanuts<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki><font color="red">width:25%</font color>">Wheat<nowiki></td></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid orange; width:25%</font color">">Pears<nowiki></td></nowiki><br>
<nowiki><td> Carrots</td></nowiki><br>
<nowiki><td> Walnuts</td></nowiki><br>
<nowiki><td> Oats</td></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid orange; width:25%</font color">">Cherries<nowiki></td></nowiki><br>
<nowiki><td> Corn</td></nowiki><br>
<nowiki><td> Cashews</td></nowiki><br>
<nowiki><td> Barley</td></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki></tr></nowiki><br>
<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>
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*The order of attributes is critical.
:B. False
*The caption can only be on the left side of the page
:B. False
*Only margin-bottom of the caption will cause a separation between the caption and the table
:B. False</div>
[[Help:Wiki University HTML-- Tables - Captions|Back to Tables - Captions]]
==Tables - Column headings==
====Exercise====
<div style="border:10px solid lightgreen; padding:5px; ">
*With our above table place a orange border, "dashed" style and 10 pixels thick.
*Make the table 500 pixels wide.
*Next place a blue border around the headers.
*Install our Healthy Foods caption with any font;
*Install the headers for each of the columns.
*Install a lightblue background color for the headers.
Should look like this:<br><br>
{| 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="border:1px solid blue; text-align:center; width:25%; background-color:lightblue; " |Fruits
! style="border:1px solid blue; text-align:center; width:25%; background-color:lightblue; " |Vegetable
! style="border:1px solid blue; text-align:center; width:25%; background-color:lightblue; " |Nuts
! style="border:1px solid blue; text-align:center; width:25%; background-color:lightblue; " |Grains
|-
| Apples
| Peas
| Peanuts
| Wheat
|-
| Pears
| Carrots
| Walnuts
| Oats
|-
| Cherries
| Corn
| Cashews
| Barley
|-
| Oranges
| Beans
| Almonds
| Buckwheat
|}
*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">
<nowiki><table style="</nowiki><font color="red">border:10px dashed orange; width:500px</font color>"><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><tr></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><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><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><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><tr></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><td>Pears</td></nowiki><br>
<nowiki><td>Carrots</td></nowiki><br>
<nowiki><td>Walnuts</td></nowiki><br>
<nowiki><td>Oats</td></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><td>Cherries</td></nowiki><br>
<nowiki><td>Corn</td></nowiki><br>
<nowiki><td>Cashews</td></nowiki><br>
<nowiki><td>Barley</td></nowiki><br>
<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>
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*The headers are always centered on the column.
:B. False
*You have to use the text-align to put the header on the left side
:B. False
*Headers are always in bold type.
:A. True
</div>
[[Help:Wiki University HTML-- Tables - Column headings|Back to Tables - Column headings]]
==Tables - Cells==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
*With our above table place a black border, "dotted" style and 5 pixels thick.
*Make the table 600 pixels wide.
*Next place a blue border around all the cells.
*Place 5 pixels of padding in the header row of cells
*Separate all the cells with 5 pixels.
*Place a lightblue background on the column headers.
{| style="border:5px dotted black; width:600px; border-spacing:5px "
|-
! style="border:1px solid blue; text-align:center; padding:5px; background-color:lightblue; " | Fruits
! style="border:1px solid blue; text-align:center; padding:5px; background-color:lightblue; " | Vegetable
! style="border:1px solid blue; text-align:center; padding:5px; background-color:lightblue; " | Nuts
! style="border:1px solid blue; text-align:center; padding:5px; background-color:lightblue; " | Grains
|-
| style="border:1px solid blue; "|Apples
| style="border:1px solid blue; "|Peas
| style="border:1px solid blue; "|Peanuts
| style="border:1px solid blue; "|Wheat
|-<br>
| style="border:1px solid blue; "|Pears
| style="border:1px solid blue; "|Carrots
| style="border:1px solid blue; "|Walnuts
| style="border:1px solid blue; "|Oats
|-
| style="border:1px solid blue; "|Cherries
| style="border:1px solid blue; "|Corn
| style="border:1px solid blue; "|Cashews
| style="border:1px solid blue; "|Barley
|-
| style="border:1px solid blue; "|Orange
| style="border:1px solid blue; "|Beans
| style="border:1px solid blue; "|Almonds
| style="border:1px solid blue; "|Buckwheat
|}
<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><table style="</nowiki><font color="red">border:5px dotted black; width:600px; border-spacing:5px</font color>"><br>
<nowiki><tr></nowiki><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>
<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>
<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>
<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>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Apples<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Peas<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Peanuts<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Wheat<nowiki></td></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Pears<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Carrots<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Walnuts<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Oats<nowiki></td></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Cherries<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Corn<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Cashews<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Barley<nowiki></td></nowiki><br>
<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>
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*Only the border-collaspe attribute is required to separate cell borders.
:B. False
*Padding attribute only pads on the left side of the text
:B. False
*The header font cannot be changed
:B. False
</div>
[[Help:Wiki University HTML-- Tables - Cells|Back to Tables - Rows]]
==Tables - Rows==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
*With our above table place a yellow border, "groove" style and 10 pixels thick.
*Make the table 700 pixels wide.
*Next place a blue border around the headers.
*Give the header cells a light blue background.
*Change the color of the font to white.
{| style="border:10px groove yellow; width:700px; "
|- 
! style="border:1px solid blue; background-color:lightblue; color:white; " | Fruits
! style="border:1px solid blue; background-color:lightblue; color:white; " |Vegetable
! style="border:1px solid blue; background-color:lightblue; color:white; " |Nuts
! style="border:1px solid blue; background-color:lightblue; color:white; " |Grains
|-
| Apples
| Peas
| Peanuts
| Wheat
|-
| Pears
| Carrots
| Walnuts
| Oats
|-
| Cherries
| Corn
| Cashews
| Barley
|-
| Orange
| Beans
| Almonds
| Buckwheat
|}
*<font color="blue"><b>NOTICE</b></font color> the left edge of the table went beyond the edge of the field.  The field is only 640 pixels wide so if you go over that you will intrude on the right side of the field.
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><table style="</nowiki><font color="red">border:10px groove yellow; width:700px</font color>"><br>
<nowiki><tr></nowiki><br>
<nowiki><th style="</nowiki><font color="red">border:1px solid blue; background-color:lightblue; color:white</font color>">Fruits<nowiki></th></nowiki><br>
<th style="<font color="red">border:1px solid blue; background-color:lightblue; color:white</font color>">Vegetable<nowiki></th></nowiki><br>
<th style="<font color="red">border:1px solid blue; background-color:lightblue; color:white</font color>">Nuts<nowiki></th></nowiki><br>
<th style="<font color="red">border:1px solid blue; background-color:lightblue; color:white</font color>">Grains<nowiki></th></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><td>Apples</td></nowiki><br>
<nowiki><td>Peas</td></nowiki><br>
<nowiki><td>Peanuts</td></nowiki><br>
<nowiki><td>Wheat</td></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><td>Pears</td></nowiki><br>
<nowiki><td>Carrots</td></nowiki><br>
<nowiki><td>Walnuts</td></nowiki><br>
<nowiki><td>Oats</td></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><td>Cherries</td></nowiki><br>
<nowiki><td>Corn</td></nowiki><br>
<nowiki><td>Cashews</td></nowiki><br>
<nowiki><td>Barley</td></nowiki><br>
<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>
====Quick Quiz====
<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
:B. False
*Background color cannot be placed in cells through coding in row
:B. False
*You can change the font-family in the rows
:A. True
</div>
[[Help:Wiki University HTML-- Tables - Rows|Back to Tables - Rows]]
==Tables - Placement==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
*Place our demonstration table on the right side of the page.
*Place our lorem ipsum paragraph under the table.
*Place a 10 pixel space between the table and the text.
{| style="border:1px solid red; width:50%; float:right; margin-left:10px; "
|- 
! Fruits
! Vegetable
! Nuts
! Grains
|-
| Apples
| Peas
| Peanuts
| Wheat
|-
| Pears
| Carrots
| Walnuts
| Oats
|-
| Cherries
| Corn
| Cashews
| Barley
|-
| Orange
| Beans
| Almonds
| Buckwheat
|}
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:
<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>
====Quick Quiz====
<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.
:B. False
*Text will float when you place a table on the right side of a page.
:A. True
*You cannot place a table in the middle of the page.
:B. False
</div>
[[Help:Wiki University HTML-- Tables - Placement|Back to Tables - Placement]]
==Tables - Sorting==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
*Take our Heathy Foods table and add another row.
*Now make the table sortable.<br>
{| class="sortable" style="border:1px solid red; width:100%"
|- 
! Fruits
! Vegetable
! Nuts
! Grains
|-
| Apples
| Peas
| Peanuts
| Wheat
|-
| Pears
| Carrots
| Walnuts
| Oats
|-
| Cherries
| Corn
| Cashews
| Barley
|-
| Orange
| Beans
| Almonds
| Buckwheat
|-
| Apricots
| Broccoli
| Brazil Nuts
| Soy Beans
|}
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><table </nowiki><font color="red">class="sortable" </font color><nowiki>style="border:1px solid red; width:100%</nowiki>"><br>
<nowiki><tr></nowiki><br>
<nowiki><th>Fruits</th></nowiki><br>
<nowiki><th>Vegetable</th></nowiki><br>
<nowiki><th>Nuts</th></nowiki><br>
<nowiki><th>Grains</th></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><td>Apples</td></nowiki><br>
<nowiki><td>Peas</td></nowiki><br>
<nowiki><td>Peanuts</td></nowiki><br>
<nowiki><td>Wheat</td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><td>Pears</td></nowiki><br>
<nowiki><td>Carrots</td></nowiki><br>
<nowiki><td>Walnuts</td></nowiki><br>
<nowiki><td>Oats</td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><td>Cherries</td></nowiki><br>
<nowiki><td>Corn</td></nowiki><br>
<nowiki><td>Cashews</td></nowiki><br>
<nowiki><td>Barley</td></nowiki><br>
<nowiki></tr></nowiki><br>
<font color="red"><nowiki><tr></nowiki></font color><br>
<font color="red"><nowiki><td>Orange</td></nowiki></font color><br>
<font color="red"><nowiki><td>Beans</td></nowiki></font color><br>
<font color="red"><nowiki><td>Almonds</td></nowiki></font color><br>
<font color="red"><nowiki><td>Buckwheat</td></nowiki></font color><br>
<nowiki></tr></nowiki><br>
<nowiki></table></nowiki></div>
</div>
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*When you click the sorting icon, the sorting is permanent.
: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.
:B. False
*Sorting will revert back to the original order if you leave the page the table is on.
:A. True
</div>
[[Help:Wiki University HTML-- Tables - Sorting|Back to Tables - Sorting]]
==Tables - Scrolling==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
*Take our demonstration table and make it 900 pixels wide and tall.
*Then make the table scrollable both horizontally and vertically with a finish width and height of 400 pixels.<br>
Here is the final product:<br><br>
<div style="overflow:scroll; width:400px; height:400px; ">
{| style="border:1px solid red; width:900px; height:900px; "
|- 
! Fruits
! Vegetable
! Nuts
! Grains
|-
| Apples
| Peas
| Peanuts
| Wheat
|-
| Pears
| Carrots
| Walnuts
| Oats
|-
| Cherries
| Corn
| Cashews
| Barley
|-
| Orange
| Beans
| Almonds
| Buckwheat
|}
</div><br>
<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>
<nowiki><table style="border:1px solid red; width:900px; height:900px"></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><th></nowiki>Fruits<br>
.<br>
.<br>
.<br>
.<br>
<nowiki></table></nowiki><br>
<font color="red"><nowiki></div></nowiki></font color></div>
</div>
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*When creating the horizontal scroll bar, you do not have to set the width.
:B. False
*Vertically scroll bars are only useful for very tall tables.
:A. True
*You cannot have horizontal and vertical scroll bars at the same time.
:B. False
</div>
[[Help:Wiki University HTML-- Tables - Scrolling|Back to Tables - Scrolling]]
==Tables - Columns Only==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px;">
{|
|-
| style="width:20%; background-color:lightblue; padding:5px; border-right:1px solid black; "|
Adair <br>
Andrew <br>
Atchison <br>
Audrain
| style="width:20%; background-color:lightgray; padding:5px; border-right:1px solid black; "|
Barry <br>
Barton <br>
Bates <br>
Benton
| style="width:20%; background-color:lightblue; padding:5px; border-right:1px solid black; "|
Bollinger <br>
Boone <br>
Buchanan <br>
Butler
| style="width:20%; background-color:lightgray; padding:5px; border-right:1px solid black; "|
Caldwell <br>
Callaway <br>
Camden <br>
Cape Girardeau
| style="width:20%; background-color:lightblue; padding:5px; "|
Carroll <br>
Carter <br>
Cass <br>
Cedar
|}
*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><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>
Andrew<nowiki><br></nowiki><br>
Atchison<nowiki><br></nowiki><br>
Audrain <nowiki><br></nowiki><br>
<nowiki></td></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>
Bates <nowiki><br></nowiki><br>
Benton <nowiki><br></nowiki><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>
Boone <nowiki><br></nowiki><br>
Buchanan <nowiki><br></nowiki><br>
Butler <nowiki><br></nowiki><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>
Callaway <nowiki><br></nowiki><br>
Camden <nowiki><br></nowiki><br>
Cape Girardeau <nowiki><br></nowiki><br>
<nowiki></td></nowiki><br>
<nowiki><td style="</nowiki>width:20%; background-color:lightblue; padding:5px">
Carroll <nowiki><br></nowiki><br>
Carter <nowiki><br></nowiki><br>
Cass <nowiki><br></nowiki><br>
Cedar <nowiki><br></nowiki><br>
<nowiki></td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki></table></nowiki></div>
</div>
====Quick Quiz====
<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.
:B. True
*A one row table looks better if the columns are of equal length.
:A. True
*To make the items on separate lines, you use <nowiki><p></nowiki> tags only.
:B. False</div>
[[Help:Wiki University HTML-- Tables - Columns Only|Back to Tables - Columns Only]]
==Tables - Column Spans==
====Exercises====
====Exercises====
*Merge all the cells in the second row.
<div style="border:10px solid lightgray; padding:5px;  ">
*Merge the first three cells in the fourth row.
The categories together should look like this:
<div style="border:10px solid lightgreen; padding:5px">


{| style="border:1px solid red; width:100%"
<font color="red"><nowiki>Categories: Wikitext lessons | Wikitext education</nowiki></font color>
|-
! style="border:1px solid red; width:25%" | Fruits
! style="border:1px solid red; width:25%" | Vegetable
! style="border:1px solid red; width:25%" | Nuts
! style="border:1px solid red; width:25%" | Grains
|-
| colspan="4" style="border:1px solid red" | Apples
|-
| style="border:1px solid red" | Pears
| style="border:1px solid red" | Carrots
| style="border:1px solid red" | Walnuts
| style="border:1px solid red" | Oats
|-
| style="border:1px solid red" | Cherries
| style="border:1px solid red" | Corn
| style="border:1px solid red" | Cashews
| style="border:1px solid red" | Barley
|-
| colspan="3" style="border:1px solid red" | Orange
| style="border:1px solid red" | Beans
|}
 
<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><table style="border:1px solid red; width:100%"></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><th style="border:1px solid red; width:25%">Fruits</th></nowiki><br>
<nowiki><th style="border:1px solid red; width:25%">Vegetable</th></nowiki><br>
<nowiki><th style="border:1px solid red; width:25%">Nuts</th></nowiki><br>
<nowiki><th style="border:1px solid red; width:25%">Grains</th></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<font color="red"><nowiki><td colspan="4" </nowiki></font color>style="border:1px solid red">Apples<nowiki></td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><td style="border:1px solid red">Pears</td></nowiki><br>
<nowiki><td style="border:1px solid red">Carrots</td></nowiki><br>
<nowiki><td style="border:1px solid red">Walnuts</td></nowiki><br>
<nowiki><td style="border:1px solid red">Oats</td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><td style="border:1px solid red">Cherries</td></nowiki><br>
<nowiki><td style="border:1px solid red">Corn</td></nowiki><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>
====Quick Quiz====
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*Colspans must equal the number of cells in the next row.
: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.
: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".
:A. True
</div>
[[Help:Wiki University HTML-- Tables - Columns Only|Back to Tables - Column Spans]]
==Tables - Row Spans==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgreen; padding:5px; ">
*Merge the cells with Barley and Buckwheat in them.
*Since these categories will show up in red, what does that mean?
*Merge the cells with Peas, Carrots and Corn in them.
::C. All of the above.
<span>Here is what the table should look like:</span>
*Categories are external links surrounded by single square brackets.
{| style="border:1px solid red; width:100%; "
::False
|+ style="font-size:14px; text-align:center; " | Healthy Foods
*Categories are always placed at the top of the page.
|- 
::False
! style="width:25%; text-align:center; border:1px solid red; " | Fruits
*One should always check to see if a category has been created rather than make up a new one.
! style="width:25%; text-align:center; border:1px solid red; " | Vegetable
::True
! style="width:25%; text-align:center; border:1px solid red; " | Nuts
! style="width:25%; text-align:center; border:1px solid red; " | Grains
|-
| style="width:25%; border:1px solid red" | Apples
| rowspan="3" style="border:1px solid red"| Peas
| style="width:25%; border:1px solid red"| Peanuts
| style="width:25%; border:1px solid red" | Wheat
|-
| style="width:25%; border:1px solid red; " | Pears
| style="width:25%; border:1px solid red; " | Walnuts
| style="width:25%; border:1px solid red; " | Oats
|-
| style="width:25%; border:1px solid red; " | Cherries
| style="width:25%; border:1px solid red; " | Cashews
| rowspan="2" style="width:25%; border:1px solid red " | Barley
|-
| style="width:25%; border:1px solid red; " | Orange
| style="border:1px solid red" | Beans
| style="width:25%; border:1px solid red; " | Almonds
 
|}
<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><table style="border:1px solid red; width:100%"></nowiki><br>
<nowiki><caption style="font-size:14px; text-align:center">Healthy Foods</caption></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><th style="border:1px solid red; text-align:center; width:25%">Fruits</th></nowiki><br>
<nowiki><th style="border:1px solid red; text-align:center; width:25%">Vegetable</th></nowiki><br>
<nowiki><th style="border:1px solid red; text-align:center; width:25%">Nuts</th></nowiki><br>
<nowiki><th style="border:1px solid red; text-align:center; width:25%">Grains</th></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><td style="border:1px solid red"></nowiki>Apples<nowiki></td></nowiki><br>
<nowiki><td </nowiki><font color="red">rowspan="3" </font color><nowiki>style="border:1px solid red">Peas</nowiki><nowiki></td></nowiki><br>
<nowiki><td style="border:1px solid red">Peanuts</nowiki><nowiki></td></nowiki><br>
<nowiki><td style="border:1px solid red">Wheat</nowiki><nowiki></td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><td style="border:1px solid red">Pears</nowiki><nowiki></td></nowiki><br>
<nowiki><td style="border:1px solid red">Walnuts</nowiki><nowiki></td></nowiki><br>
<nowiki><td style="border:1px solid red">Oats</nowiki><nowiki></td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><td style="border:1px solid red">Cherries</nowiki><nowiki></td></nowiki><br>
<nowiki><td style="border:1px solid red">Cashews</nowiki><nowiki></td></nowiki><br>
<nowiki><td </nowiki><font color="red">rowspan="2"</font color> style="border:1px solid red">Barley<nowiki></td></nowiki><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>
[[FamilySearch Wikitext Categories|Back to Categories]]
 
====Quick Quiz====
<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.
: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.
:B. False
</div>
[[Help:Wiki University HTML-- Tables - Row Spans|Back to Table - Row Spans]]
 
==Infobox - Creating==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
*Add a border around the infobox, limit the width to 190 pixels and place it on the right side of the page.
*Add borders around each of the cells.
*Have the cells containing the words organization and image span both columns.
*Center the name of the organization and the image in their cells.
*Make the items in the right hand cells into parameters.
<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><table style="</nowiki><font color="red">border:1px solid black; width:190px; float:right</font color>"><br>
<nowiki><tr></nowiki><br>
<nowiki><td colspan="2" style="</nowiki><font color="red">border:1px solid black; text-align:center</font color>">organization<nowiki></td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><td colspan="2" style="</nowiki><font color="red">border:1px solid black;  text-align:center</font color>">image<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>">President:<nowiki></td></nowiki><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>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><td style="</nowiki><font color="red">border:1px solid black</font color>">Address:<nowiki></td></nowiki><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>
<nowiki></tr></nowiki><br>
<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>
 
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*Parameters have two opening and closing curly brackets surrounding them.
:A. False
*Infoboxes are usually located at the top of the page on the right side.
:A. True
*Infoboxes are saved just like other templates, but it is good practice to include the word "infobox" in the title.
:A. True
</div>
[[Help:Wiki University HTML--Infobox - Creating|Back to Infobox - Creating]]
 
==Infobox - Placing==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
 
<div style="clear:both"></div>
<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>{{Infobox U.S. County</nowiki><br>
| county = Jackson<br>
| county_map =  Missouri Jackson County Map.svg.png<br>
| state = Missouri<br>
| state_map = Missouri.png<br>
| founded year = 1826<br>
| founded date = December 15 <br>
| seat wl = Independence<br>
}} </div><br>
*<font color="blue"><b>NOTICE</b></font color> the image did not require the brackets as this was built into this particular infobox.
</div>
 
====Quick Quiz====
<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.
::B. False
*Infoboxes can only be used on county pages.
::B. False
*Infoboxes are limited just to genealogical organizations.
::B. False
</div>
[[Help:Wiki University HTML--Infobox - Placing|Back to Infobox - Placing]]
----
----
==If functions==
====Exercises====
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
 
The categories together should look like this:
<div style="clear:both"></div>
<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><table class="infobox" style="width:200px; "></nowiki><br>
<font color="red"><nowiki>Categories: Wikitext lessons | Wikitext education</nowiki></font color>
<nowiki><tr></nowiki><br>
<nowiki><td colspan="2">{{{organization}}}</nowiki><br>
<nowiki></td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<font color="red"><nowiki>{{#if:{{{image|}}}|</nowiki></font color><nowiki><td colspan="2">{{{</nowiki>image}}}<font color="red">}}</font color><br>
<nowiki></td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<font color="red"><nowiki>{{#if:{{{president|}}}|</nowiki></font color><nowiki><td>President:</td></nowiki><br>
<nowiki><td>{{{president}}}</nowiki><font color="red">}}</font color><br><nowiki></td></nowiki><br>
<nowiki></tr></nowiki><br>
<nowiki><tr></nowiki><br>
<font color="red"><nowiki>{{#if:{{{address|}}}|</nowiki></font color><nowiki><td>Address:</td></nowiki><br>
<nowiki><td>{{{address}}}</nowiki><font color="red">}}</font color><br><nowiki></td></nowiki><br>
<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>
 
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*If nothing is entered for a parameter, there will still be a space where the parameter would normally appear.
::B. False
*The "If function" allows you to create more complete infoboxes, but you do have to worry about them being too large and take up a lot of space if the subject to be posted in the infobox is small.
::B. False
*It does not matter whether you use regular pipes or <nowiki>{{!}}</nowiki> in infoboxes with if functions.
::B. False
</div>
[[Help:Wiki University HTML--Infobox - If functions|Back to If functions]]
----
 
==Sidebars==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
 
<div style="clear:both"></div>
<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>{{Infobox U.S. County</nowiki><br>
| county = Jackson<br>
| county_map =  Missouri Jackson County Map.svg.png<br>
| state = Missouri<br>
| state_map = Missouri.png<br>
| founded year = 1826<br>
| founded date = December 15 <br>
| seat wl = Independence<br>
}} </div>
*<font color="blue"><b>NOTICE</b></font color> the images did not require the brackets as this was built into the infobox.
</div>
</div>
====Quick Quiz====
====Quick Quiz====
<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.
:B. False
*Infoboxes can only be used on county pages.
:B. False
*Infoboxes are limited just to genealogical organizations.
:B. False
</div>
[[Help:Wiki University HTML--Sidebars|Back to Sibebars]]
----
==Navboxes==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgreen; padding:5px; ">
*Create a navbox using the above format.
*Since these categories will show up in red, what does that mean?
*For topics use the first 5 topics from the [[Germany_Genealogy|Germany Genealogy]] page.
::C. All of the above.
*For Counties use the first 5 counties from the [[Anhalt_-_Herzogtum_(duchy)]] navbox at the bottom of the page.
*Categories are external links surrounded by single square brackets.
*Change the parameter to country.
::False
<span>Here's what it should look like:</span>
*Categories are always placed at the top of the page.
{| style="width:100%; border:1px solid black; border-collaspe:separate; border-spacing:5px; "
::False
|-
*One should always check to see if a category has been created rather than make up a new one.
| colspan="2" style="background-color:lightgray; text-align:center; " | Links to '''Germany''' - related articles
::True
|-
| style="background-color:lightgray; width:20% ; vertical-align:middle; " | Topics
| style="background-color:lightblue; " | [[Germany Archives and Libraries|Archives and Libraries]]{{·}} [[Germany Biography|Biography]]{{·}} [[Germany Cemeteries|Cemeteries]]{{·}} [[Germany Census|Census]]{{·}} [[Germany Church Directories|Church Directories]]
|-
| style="background-color:lightgray; width:20% ; vertical-align:middle; " | Counties
| 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]]
|}
<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">
<nowiki>{| style="width:100%; border:1px solid black; border-collaspe:separate; border-spacing:5px; "</nowiki><br>
|- <br>
| colspan="2" style="background-color:lightgray; text-align:center; " | Links to <nowiki>'''{{{Country}}}'''</nowiki> - related articles<br>
|-<br>
| style="background-color:lightgray; width:20% ; vertical-align:middle; " | Topics<br>
| style="background-color:lightblue; " | <nowiki>[[Germany Archives and Libraries|Archives and Libraries]]{{·}} [[Germany Biography|Biography]]{{·}} [[Germany Cemeteries|Cemeteries]]{{·}} [[Germany Census|Census]]{{·}} [[Germany Church Directories|Church Directories]]</nowiki> <br>
|-<br>
| style="background-color:lightgray; width:20% ; vertical-align:middle; " | Counties<br>
| style="background-color:lightblue; " |<nowiki> [[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]]</nowiki><br>
|}</div>
</div>
</div>
 
[[FamilySearch Wikitext Categories|Back to Categories]]
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*Navboxes should not include items that could be in a sidebar.
::A. True
*Navboxes are usually placed at the top of the page.
::B. False
*Navboxes are limited to less than 200 pixels in width.
::B. False
</div>
[[Help:Wiki University HTML--Navboxes|Back to Navboxes]]
==Position - Relative==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px;">
*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>
<span>Here is the coding:</span>
<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:
**width is 100%.
**background-color:blue.
**border 5 pixels thick and red in color.
**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>
<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">
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>
</div>
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*Relative positioning places objects in relation to the edge and top of the page.
::B. False
*Relative positioning does not cover objects placed before it was.
::B. False
*Relative positioning covers up all objects covered after it was placed.
::B. False
</div>
[[Help:Wiki University HTML-- Position - Relative|Back to Position - Relative]]
==Position - Absolute==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px;">
1. Make this object <font color="red"><nowiki><div style="width:200px; height:75px; border:2px solid green; background-color:orange; "></nowiki></font color> an absolute positioned object 0 pixels from the left and 0 pixels from the top  to appear '''inside''' a relative positioned object with width of 300 pixels, height of 200 pixels and a red border one pixel thick.
<div style="position:relative; border:1px solid red; width:400px; height:200px;  "><div style="position:absolute; left:0px; top:0px; width:200px; height:75px; border:2px solid green; background-color:orange; ">
</div></div><br>
Here is the coding:<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="</nowiki></font color>position:relative; border:1px solid red; width:400px; height:200px;  "><br><font color="blue"><nowiki><div style="</nowiki></font color>position:absolute; left:0px; top:0px; width:200px; height:75px; border:2px solid green; background-color:orange; ">
<font color="blue"><nowiki></div></nowiki></font color><br><font color="red"><nowiki></div></nowiki></font color></div><br>
2. Take your answer above and move the '''relative''' object with the '''absolute''' object inside 150 pixel to the left and 50 pixel from the top:
<div style="position:relative; left:150px; top:50px; border:1px solid red; width:400px; height:200px;  "><div style="width:200px; height:75px; border:2px solid green; background-color:orange; ">
</div></div><br><br><br><br>
Here is the coding:<br>
<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></nowiki><br>
<nowiki></div></nowiki>
</div><br>
3. Take your answer from no. 2 and move the '''absolute''' object inside the '''relative''' object 150px to the left and down 25px from the top.
<div style="position:relative; left:150px; top:25px; border:1px solid red; width:400px; height:200px;  "><div style="position:absolute; left:150px; top:50px; width:200px; height:75px; border:2px solid green; background-color:orange; ">
</div></div><br><br>
Here is the coding:<br>
<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; </nowiki><font color="red">left:150px; top:50px;</font color><nowiki>width:200px; height:75px; border:2px solid green; background-color:orange; "></nowiki>
<nowiki></div></nowiki><br>
<nowiki></div></nowiki>
</div>
</div>
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">
*Absolute positioning places objects in relation to the edge and top of the page.
::A. True
*Absolute positioning does not cover objects placed before it was.
::B. False
*Absolute positioning covers up all objects that follow it.
::A. True
</div>
[[Help:Wiki University HTML-- Position - Absolute|Back to Position - Absolute]]
==Tabs==
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
<ul style="list-style-type:none">
<li style="float:left;
border:1px solid red;
border-top-left-radius:5px;
border-top-right-radius:5px;
width:130px;
margin-right:10px;
background-color:#ffe6ea;">[[HTML and Wikitext - Lesson One]]</li>
<li style="float:left;
border:1px solid red;
border-top-left-radius:5px;
border-top-right-radius:5px;
width:130px;
margin-right:10px;
background-color:#ffe6ea; ">[[HTML and Wikitext - Lesson Two]]</li>
<li style="float:left;
border:1px solid red;
border-top-left-radius:5px;
border-top-right-radius:5px;
width:130px;
margin-right:10px;
background-color:#ffe6ea;">[[HTML and Wikitext - Lesson Three]]</li>
<li style="float:left;
border:1px solid red;
border-top-left-radius:5px;
border-top-right-radius:5px;
width:130px;
margin-right:10px;
background-color:#ffe6ea;">[[HTML and Wikitext - Lesson Four]]</li>
</ul><br><br>
*Here's the coding for the first tab:
<font color="green"><nowiki><ul</nowiki></font> <font color="blue">style=</font><font color="red">"list-style-type:none"</font><font color="green">></font><br>
<font color="green"><nowiki><li</nowiki></font> <font color="blue">style=</font><font color="red">"float:left;<br>
border:1px solid red;<br>
border-top-left-radius:5px;<br>
border-top-right-radius:5px;<br>
width:130px;<br>
margin-right:10px;<br>
background-color:#ffe6ea;"</font><font color="green">></font>[[HTML and Wikitext - Lesson One]]<font color="green"><nowiki></li></nowiki></font>
</div>
[[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]]

Revision as of 10:01, 20 August 2015

HOME[edit | edit source]

Quick Quiz[edit | edit source]

  • Since these categories will show up in red, what does that mean?
C. All of the above.
  • Categories are external links surrounded by single square brackets.
False
  • Categories are always placed at the top of the page.
False
  • One should always check to see if a category has been created rather than make up a new one.
True

Back to Categories

Exercises[edit | edit source]

The categories together should look like this:

Categories: Wikitext lessons | Wikitext education

Quick Quiz[edit | edit source]

  • Since these categories will show up in red, what does that mean?
C. All of the above.
  • Categories are external links surrounded by single square brackets.
False
  • Categories are always placed at the top of the page.
False
  • One should always check to see if a category has been created rather than make up a new one.
True

Back to Categories

Exercises[edit | edit source]

The categories together should look like this:

Categories: Wikitext lessons | Wikitext education

Quick Quiz[edit | edit source]

  • Since these categories will show up in red, what does that mean?
C. All of the above.
  • Categories are external links surrounded by single square brackets.
False
  • Categories are always placed at the top of the page.
False
  • One should always check to see if a category has been created rather than make up a new one.
True

Back to Categories

Exercises[edit | edit source]

The categories together should look like this:

Categories: Wikitext lessons | Wikitext education

Quick Quiz[edit | edit source]

  • Since these categories will show up in red, what does that mean?
C. All of the above.
  • Categories are external links surrounded by single square brackets.
False
  • Categories are always placed at the top of the page.
False
  • One should always check to see if a category has been created rather than make up a new one.
True

Back to Categories

Exercises[edit | edit source]

The categories together should look like this:

Categories: Wikitext lessons | Wikitext education

Quick Quiz[edit | edit source]

  • Since these categories will show up in red, what does that mean?
C. All of the above.
  • Categories are external links surrounded by single square brackets.
False
  • Categories are always placed at the top of the page.
False
  • One should always check to see if a category has been created rather than make up a new one.
True

Back to Categories

Exercises[edit | edit source]

The categories together should look like this:

Categories: Wikitext lessons | Wikitext education

Quick Quiz[edit | edit source]

  • Since these categories will show up in red, what does that mean?
C. All of the above.
  • Categories are external links surrounded by single square brackets.
False
  • Categories are always placed at the top of the page.
False
  • One should always check to see if a category has been created rather than make up a new one.
True

Back to Categories

Exercises[edit | edit source]

The categories together should look like this:

Categories: Wikitext lessons | Wikitext education

Quick Quiz[edit | edit source]

  • Since these categories will show up in red, what does that mean?
C. All of the above.
  • Categories are external links surrounded by single square brackets.
False
  • Categories are always placed at the top of the page.
False
  • One should always check to see if a category has been created rather than make up a new one.
True

Back to Categories

Retrieved from "https://integration-ru.familysearch.org/en/wiki/index.php?title=FamilySearch_HTML_Tutorial_Answers&oldid=2267729"