FamilySearch HTML Tutorial Answers: Difference between revisions

From FamilySearch Wiki
VisualWikitext
m (Text replacement - "/learn/wiki" to "/wiki")
(Changed "Rating" to "Content".)
 
(2 intermediate revisions by one other user not shown)
Line 3: Line 3:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*What is CSS?
*What is CSS?
:D. All of the above
{{Block indent|D. All of the above}}
*What is HTML?
*What is HTML?
:B. Language for all of the Internet  
{{Block indent|B. Language for all of the Internet }}
*What is the left sidebar for?
*What is the left sidebar for?
:D. All of the above.
{{Block indent|D. All of the above.}}
</div>
</div>
[[Help:Wiki University HTML-- Tutorial|Back to Home Page]]
[[Help:Wiki University HTML-- Tutorial|Back to Home Page]]
Line 15: Line 15:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*The forward slash / is used in
*The forward slash / is used in
:A. Closing header tags.
{{Block indent|A. Closing header tags.}}
*Tags are easy to see on pages in the Wiki
*Tags are easy to see on pages in the Wiki
:False
{{Block indent|False}}
*Two monitors are always better than one
*Two monitors are always better than one
:True
{{Block indent|True}}
</div>
</div>
[[Help:Wiki University HTML-- Introduction|Back to Introduction]]
[[Help:Wiki University HTML-- Introduction|Back to Introduction]]
Line 41: Line 41:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*We don't use Header Ones in FamilySearch Wiki articles
*We don't use Header Ones in FamilySearch Wiki articles
:True
{{Block indent|True}}
*Header Five and Six are rairly used
*Header Five and Six are rairly used
:True
{{Block indent|True}}
*Header Two work well in FamilySearch WIki
*Header Two work well in FamilySearch WIki
:False
{{Block indent|False}}
*Avoid using Header Three and Header Four in articles
*Avoid using Header Three and Header Four in articles
:False
{{Block indent|False}}
</div>
</div>
[[Help:Wiki University HTML-- Headers|Back to Headers]]
[[Help:Wiki University HTML-- Headers|Back to Headers]]
Line 66: Line 66:


*This is how the unordered lists will appear:
*This is how the unordered lists will appear:
::*Birth Certificates
{{Block indent|*Birth Certificates|2}}
::*Land Records
{{Block indent|*Land Records|2}}
::*Probate Records
{{Block indent|*Probate Records|2}}
::*Census
{{Block indent|*Census|2}}
::*Vital Records
{{Block indent|*Vital Records|2}}
*Coding for ordered list:
*Coding for ordered list:


Line 94: Line 94:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*If you have a cooking recipe, which list would you use to show the steps?
*If you have a cooking recipe, which list would you use to show the steps?
::A. Ordered List
{{Block indent|A. Ordered List|2}}
*If you were listing your favorite foods in order of preference, which lists would you use?
*If you were listing your favorite foods in order of preference, which lists would you use?
::A. Ordered List
{{Block indent|A. Ordered List|2}}
*If you were listing the contents of your pockets, which list would you use?
*If you were listing the contents of your pockets, which list would you use?
::B. Unordered List
{{Block indent|B. Unordered List|2}}


</div>
</div>
Line 110: Line 110:


<font color="red"><nowiki><ul></nowiki></font color>
<font color="red"><nowiki><ul></nowiki></font color>
:<font color="green"><nowiki><li></nowiki></font color>Fruits<br>
{{Block indent|1=<font color="green"><nowiki><li></nowiki></font color>Fruits<br>|2=1}}
::<font color="blue"><nowiki><ul></nowiki></font color><br>
{{Block indent|1=<font color="blue"><nowiki><ul></nowiki></font color><br>|2=2}}
:::<nowiki><li>Apples</li></nowiki><br>
{{Block indent|<nowiki><li>Apples</li></nowiki><br>|3}}
:::<nowiki><li>Pears</li></nowiki><br>
{{Block indent|<nowiki><li>Pears</li></nowiki><br>|3}}
:::<nowiki><li>Oranges</li></nowiki><br>
{{Block indent|<nowiki><li>Oranges</li></nowiki><br>|3}}
::<font color="blue"><nowiki></ul></nowiki></font color><br>
{{Block indent|1=<font color="blue"><nowiki></ul></nowiki></font color><br>|2=2}}
:<font color="green"><nowiki></li></nowiki></font color><br>
{{Block indent|1=<font color="green"><nowiki></li></nowiki></font color><br>|2=1}}
:<font color="green"><nowiki><li></nowiki></font color>Vegetables<br>
{{Block indent|1=<font color="green"><nowiki><li></nowiki></font color>Vegetables<br>|2=1}}
::<font color="blue"><nowiki><ul></nowiki></font color><br>
{{Block indent|1=<font color="blue"><nowiki><ul></nowiki></font color><br>|2=2}}
:::<nowiki><li>Peas</li></nowiki><br>
{{Block indent|<nowiki><li>Peas</li></nowiki><br>|3}}
:::<nowiki><li>Carrots</li></nowiki><br>
{{Block indent|<nowiki><li>Carrots</li></nowiki><br>|3}}
:::<nowiki><li>Corn</li></nowiki><br>
{{Block indent|<nowiki><li>Corn</li></nowiki><br>|3}}
::<font color="blue"><nowiki></ul></nowiki></font color><br>
{{Block indent|1=<font color="blue"><nowiki></ul></nowiki></font color><br>|2=2}}
:<font color="green"><nowiki></li></nowiki></font color><br>
{{Block indent|1=<font color="green"><nowiki></li></nowiki></font color><br>|2=1}}
:<font color="green"><nowiki><li></nowiki></font color>Nuts<br>
{{Block indent|1=<font color="green"><nowiki><li></nowiki></font color>Nuts<br>|2=1}}
::<font color="blue"><nowiki><ul></nowiki></font color><br>
{{Block indent|1=<font color="blue"><nowiki><ul></nowiki></font color><br>|2=2}}
:::<nowiki><li>Walnuts</li></nowiki><br>
{{Block indent|<nowiki><li>Walnuts</li></nowiki><br>|3}}
:::<nowiki><li>Peanuts</li></nowiki><br>
{{Block indent|<nowiki><li>Peanuts</li></nowiki><br>|3}}
:::<nowiki><li>Almonds</li></nowiki><br>
{{Block indent|<nowiki><li>Almonds</li></nowiki><br>|3}}
::<font color="blue"><nowiki></ul></nowiki></font color><br>
{{Block indent|1=<font color="blue"><nowiki></ul></nowiki></font color><br>|2=2}}
:<font color="green"><nowiki><li></nowiki></font color>Grains<br>
{{Block indent|1=<font color="green"><nowiki><li></nowiki></font color>Grains<br>|2=1}}
::<font color="blue"><nowiki><ul></nowiki></font color><br>
{{Block indent|1=<font color="blue"><nowiki><ul></nowiki></font color><br>|2=2}}
:::<nowiki><li>Wheat</li></nowiki><br>
{{Block indent|<nowiki><li>Wheat</li></nowiki><br>|3}}
:::<nowiki><li>Soybeans</li></nowiki><br>
{{Block indent|<nowiki><li>Soybeans</li></nowiki><br>|3}}
:::<nowiki><li>Barley</li></nowiki><br>
{{Block indent|<nowiki><li>Barley</li></nowiki><br>|3}}
::<font color="blue"><nowiki></ul></nowiki></font color><br>
{{Block indent|1=<font color="blue"><nowiki></ul></nowiki></font color><br>|2=2}}
:<font color="green"><nowiki></li></nowiki></font color><br>
{{Block indent|1=<font color="green"><nowiki></li></nowiki></font color><br>|2=1}}
<font color="red"><nowiki></ul></nowiki></font color></div><br><br>
<font color="red"><nowiki></ul></nowiki></font color></div><br><br>
Here's how the links would look on a page:
Here's how the links would look on a page:
Line 160: Line 160:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*If you were nesting a list of states in no particular order in a list of countries, which list would you use?:
*If you were nesting a list of states in no particular order in a list of countries, which list would you use?:
:B. Unordered List
{{Block indent|B. Unordered List}}
*If you were nesting a list of states by size in a list of countries by size, which lists would you use?
*If you were nesting a list of states by size in a list of countries by size, which lists would you use?
:A. Ordered List
{{Block indent|A. Ordered List}}
</div>
</div>
[[Help:Wiki University HTML-- Nesting Lists|Back to Nesting Lists]]
[[Help:Wiki University HTML-- Nesting Lists|Back to Nesting Lists]]
Line 194: Line 194:
<nowiki>*[http://www.adairchs.org/ Adair County Historical Society]</nowiki><br>
<nowiki>*[http://www.adairchs.org/ Adair County Historical Society]</nowiki><br>
<nowiki>*[http://www.adairchs.org/FAMILY_HISTORY_ADAIR.pdf Search Your Family History in Adair Co. MO]</nowiki><br>
<nowiki>*[http://www.adairchs.org/FAMILY_HISTORY_ADAIR.pdf Search Your Family History in Adair Co. MO]</nowiki><br>
<nowiki>*[https://familysearch.org/wiki/en/Special:Search?</nowiki><br>fulltext=true&search=Kirksville+Missouri+Family+History+Center Family History Center]</nowiki><br>
<nowiki>*[https://familysearch.org/wiki/en/Special:Search?</nowiki><br>fulltext=true&search=Kirksville+Missouri+Family+History+Center FamilySearch Center]</nowiki><br>


<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><!--</nowiki></font color>Link to town clerk<font color="red">----------------></font color></div><br>  
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><!--</nowiki></font color>Link to town clerk<font color="red">----------------></font color></div><br>  
Line 211: Line 211:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*How many comments can you insert on page?
*How many comments can you insert on page?
::C. As many as you like.
{{Block indent|C. As many as you like.|2}}
*How many words can you put in a comment?
*How many words can you put in a comment?
::C. As many words as you want.
{{Block indent|C. As many words as you want.|2}}
*Where can you insert comments?
*Where can you insert comments?
::C. Anywhere you want.</div>
{{Block indent|C. Anywhere you want.</div>|2}}
[[Help:Wiki University HTML-- Comments|Back to Comments]]
[[Help:Wiki University HTML-- Comments|Back to Comments]]
----
----
Line 226: Line 226:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.  
*Then with the same paragraph put <font color="red"><nowiki><p></nowiki></font color> and <font color="red"><nowiki></p></nowiki></font color> between each one.
*Then with the same paragraph put <font color="red"><nowiki><span></nowiki></font color> and <font color="red"><nowiki></span></nowiki></font color> between each one.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. </p>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. </span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. </p>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. </span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. </p>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. </span>
*<i>Notice the spacing between the paragraphs is almost the same in both problems.  However, the paragraph tag allows you to make changes to the paragraph whereas the <font color="red"><nowiki><br></nowiki></font color> will not and which we will cover in the next chapter</i>.
*<i>Notice the spacing between the paragraphs is almost the same in both problems.  However, the paragraph tag allows you to make changes to the paragraph whereas the <font color="red"><nowiki><br></nowiki></font color> will not and which we will cover in the next chapter</i>.
</div>
</div>
Line 236: Line 236:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*When you load paragraphs, using the enter button will automatically put spaces between them.
*When you load paragraphs, using the enter button will automatically put spaces between them.
:B. False
{{Block indent|B. False}}
*It is better to use <font color="red"><nowiki><br></nowiki></font color> than <font color="red"><nowiki><p></nowiki></font color> in separating paragraphs.
*It is better to use <font color="red"><nowiki><br></nowiki></font color> than <font color="red"><nowiki><p></nowiki></font color> in separating paragraphs.
:B. False
{{Block indent|B. False}}
*A <font color="red"><nowiki><p></nowiki></font color> does not require an ending tag for the paragraphs to separate like the <font color="red"><nowiki><br></nowiki></font color>
*A <font color="red"><nowiki><p></nowiki></font color> does not require an ending tag for the paragraphs to separate like the <font color="red"><nowiki><br></nowiki></font color>
:B. False
{{Block indent|B. False}}
</div>
</div>
[[Help:Wiki University HTML-- Paragraphs|Back to Paragraph Page]]
[[Help:Wiki University HTML-- Paragraphs|Back to Paragraph Page]]
Line 247: Line 247:
====Exercises====
====Exercises====
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgreen; padding:5px; ">
<p style="font-family:papyrus; font-size:14pt; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</p>
<span style="font-family:papyrus; font-size:14pt; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</span>


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


<p style="font-family:mistral; font-size:14pt; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</p>
<span style="font-family:mistral; font-size:14pt; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</span>


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


</div>
</div>
Line 260: Line 260:
<div style="border:10px solid lightgray; ">
<div style="border:10px solid lightgray; ">
*How many attributes can you put in the paragraph tag?
*How many attributes can you put in the paragraph tag?
::D. None of the above (It is unlimited)
{{Block indent|D. None of the above (It is unlimited)|2}}
*What symbol do you use to separate a property from a value?
*What symbol do you use to separate a property from a value?
::A. Colon
{{Block indent|A. Colon|2}}
</div>
</div>
[[Help:Wiki University HTML-- Changing Fonts|Back to Changing Fonts]]
[[Help:Wiki University HTML-- Changing Fonts|Back to Changing Fonts]]
Line 271: Line 271:
<div style="border:10px solid lightgreen; padding:5px; ">
<div style="border:10px solid lightgreen; padding:5px; ">
*Enlarge the lorem ipsum paragraph to 20px.
*Enlarge the lorem ipsum paragraph to 20px.
<p 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.</p>
<span style="font-size:20px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</span>


<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:14px; font-family:Courier New"><nowiki><p style="</nowiki><font color="red">font-size:20px</font color>">Lorem ipsum ... <nowiki></p></nowiki></div><br>
<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.
*Enlarge a header to 36px.
<h1 style="font-size:36px; margin:0px; padding:0px">Header</h1>
<h1 style="font-size:36px; margin:0px; padding:0px">Header</h1>
Line 283: Line 283:
====Quick Quiz====
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">*You cannot enlarge headers
<div style="border:10px solid lightgray; padding:5px; ">*You cannot enlarge headers
::B. False
{{Block indent|B. False|2}}
*You can add the "font-size" attribute between the = sign and the words of the header
*You can add the "font-size" attribute between the = sign and the words of the header
::B. False</div>
{{Block indent|B. False</div>|2}}
[[Help:Wiki University HTML-- Sizing Fonts|Back to Sizing Fonts]]
[[Help:Wiki University HTML-- Sizing Fonts|Back to Sizing Fonts]]
----
----
Line 295: Line 295:
*Change the color of a header.
*Change the color of a header.


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


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


<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><h1 style="</nowiki><font color="red">color:red</font color">>Header<nowiki></h1></nowiki></div>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><h1 style="</nowiki><font color="red">color:red</font color">>Header<nowiki></h1></nowiki></div>
Line 305: Line 305:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*You can use any name that is common to everyone for a color.
*You can use any name that is common to everyone for a color.
::B. False
{{Block indent|B. False|2}}
*If the HEX number does not work in the code you may have:
*If the HEX number does not work in the code you may have:
::c. All of the above
{{Block indent|c. All of the above|2}}
*You have to use the header tags to color headers
*You have to use the header tags to color headers
::A. True
{{Block indent|A. True|2}}
</div>
</div>
[[Help:Wiki University HTML-- Font Colors|Back to Font Colors]]
[[Help:Wiki University HTML-- Font Colors|Back to Font Colors]]
Line 322: Line 322:
Here is the coding:
Here is the coding:
<p style="border:1px solid red; padding:5px">
<p style="border:1px solid red; padding:5px">
<font color="red"><nowiki><p 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.</p>
<font color="red"><nowiki><span style="font-weight:bold"></nowiki></font>Lorum ipsum dolor sit amet, consectetur adipiscing elit.<font color="red"><nowiki></p></nowiki></font> Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</span>


*Make the next to the last sentence of lorem ipsum italic.
*Make the next to the last sentence of lorem ipsum italic.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus.''Curabitur eleifend quis ligula ac ullamcorper''. Curabitur eget suscipit turpis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus.''Curabitur eleifend quis ligula ac ullamcorper''. Curabitur eget suscipit turpis.
<p>Here is the coding</p>
<span>Here is the coding</span>
<p style="border:1px solid red; padding:5px">
<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><p style="font-style:etalic"></nowiki></font>Curabitur eleifend quis ligula ac ullamcorper<font color="red"><nowiki></p></nowiki></font>. Curabitur eget suscipit turpis.  </p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. <font color="red"><nowiki><span style="font-style:etalic"></nowiki></font>Curabitur eleifend quis ligula ac ullamcorper<font color="red"><nowiki></p></nowiki></font>. Curabitur eget suscipit turpis.  </span>


*Make the last sentence both bold and italics.
*Make the last sentence both bold and italics.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. '''''Curabitur eget suscipit turpis'''''.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. '''''Curabitur eget suscipit turpis'''''.
<p>Here is the coding</p>
<span>Here is the coding</span>
<div style="border:1px solid red; padding:5px">
<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><p style="font-weight:bold; font-style:etalic"></nowiki></font>Curabitur eget suscipit turpis<font color="red"><nowiki></p></nowiki></font>. </div>     
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. <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>


Line 340: Line 340:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*To make a sentence in bold text, you use the "text-weight:bold" attribute
*To make a sentence in bold text, you use the "text-weight:bold" attribute
::B. False
{{Block indent|B. False|2}}
*To make a word italicized, you flank the "text-style:italic attribute
*To make a word italicized, you flank the "text-style:italic attribute
::B. False
{{Block indent|B. False|2}}
</div>
</div>
[[Help:Wiki University HTML-- Font Bold-Italics|Back to Font Bold-Italics]]
[[Help:Wiki University HTML-- Font Bold-Italics|Back to Font Bold-Italics]]
Line 352: Line 352:
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10px; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10px; font-family:Courier New">


<nowiki><p style="</nowiki><font color="red">font-family:arial; font-size:12px; color:red</font color>">Lorem ipsum ....<nowiki></p></nowiki>
<nowiki><span style="</nowiki><font color="red">font-family:arial; font-size:12px; color:red</font color>">Lorem ipsum ....<nowiki></span></nowiki>
</div>
</div>
</div>
</div>
Line 359: Line 359:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Attributes are separated with?
*Attributes are separated with?
::C. Semi-colon
{{Block indent|C. Semi-colon|2}}
*How many attributes can you put in the paragraph tag?
*How many attributes can you put in the paragraph tag?
::D. None of the above
{{Block indent|D. None of the above|2}}
*How would you make a word italicized along with the three attribute changes to the paragraph?
*How would you make a word italicized along with the three attribute changes to the paragraph?
::C. Flank the work with two apostrophes.
{{Block indent|C. Flank the work with two apostrophes.|2}}
</div>
</div>
[[Help:Wiki University HTML-- Multi-attributes|Back to Multi-attributes]]
[[Help:Wiki University HTML-- Multi-attributes|Back to Multi-attributes]]
Line 374: Line 374:
*What is the coding to change the color of the  background  of the lorem ipsum paragraph to green and the text to orange.
*What is the coding to change the color of the  background  of the lorem ipsum paragraph to green and the text to orange.


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


<p style="background-color:green; color:orange">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</p><br>
<span style="background-color:green; color:orange">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</span><br>


*Create a paragraph of your favorite color for the background of the lorem ipsum paragraph and another color for the text from the list of colors.
*Create a paragraph of your favorite color for the background of the lorem ipsum paragraph and another color for the text from the list of colors.


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


<p style="background-color:red; color:gold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</p>
<span style="background-color:red; color:gold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</span>


</div>
</div>
Line 389: Line 389:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*How to make text invisible on a page without erasing it.
*How to make text invisible on a page without erasing it.
:C. All of the above.
{{Block indent|C. All of the above.}}


</div>
</div>
Line 400: Line 400:
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.
1. What is the coding to change the background color to light green with blue text and padding on the top and bottom of 20 pixels.
<br>
<br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><p style="</nowiki><font color="red">background-color:lightgreen; color:blue; padding-top:20px; padding-bottom:20px</font color>">Lorem ipsum .....<nowiki></p></nowiki></div><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><span style="</nowiki><font color="red">background-color:lightgreen; color:blue; padding-top:20px; padding-bottom:20px</font color>">Lorem ipsum .....<nowiki></span></nowiki></div><br>
----
----
2. 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>
2. Copy our lorem ipsum paragraph twice with no background color and no text color but with a <font color="red">padding-bottom</font color> of the first paragraph of 100px.  What happens to the space between the paragraphs?<br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><p style="padding-bottom:100px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</p>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><span style="padding-bottom:100px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</p></div><br>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</span></div><br>
*It widens by over 100 pixels.
*It widens by over 100 pixels.
</div>
</div>
Line 411: Line 411:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*To have the text 20px from the left edge of the background what attribute do you use?
*To have the text 20px from the left edge of the background what attribute do you use?
:C. padding-left:20px
{{Block indent|C. padding-left:20px}}
*To have the background 50px from all side of the text, what attribute do you use?
*To have the background 50px from all side of the text, what attribute do you use?
:C. None of the above</div>
{{Block indent|C. None of the above</div>}}
[[Help:Wiki University HTML-- Padding|Back to Padding]]
[[Help:Wiki University HTML-- Padding|Back to Padding]]


Line 434: Line 434:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*The div tag and paragraph tag are both have built in margins.
*The div tag and paragraph tag are both have built in margins.
:A. False
{{Block indent|A. False}}
*The attributes work the same way in the div tag as in the paragraph tag
*The attributes work the same way in the div tag as in the paragraph tag
:A. True
{{Block indent|A. True}}
*Div tags put spaces between paragraphs
*Div tags put spaces between paragraphs
:B. False</div>
{{Block indent|B. False</div>}}
[[Help:Wiki University HTML-- Div Tag - Introduction|Back to Div Tag - Introduction]]
[[Help:Wiki University HTML-- Div Tag - Introduction|Back to Div Tag - Introduction]]


Line 456: Line 456:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Margin-top only affects top of paragraph
*Margin-top only affects top of paragraph
:A. True
{{Block indent|A. True}}
*Margin-left moves the paragraph to the right of the left side of the page
*Margin-left moves the paragraph to the right of the left side of the page
:A. True
{{Block indent|A. True}}
*Margin-right moves the paragraph to the right of the right side of the of the page
*Margin-right moves the paragraph to the right of the right side of the of the page
:B. False
{{Block indent|B. False}}
</div>
</div>
[[Help:Wiki University HTML-- Margins|Back to Margins]]
[[Help:Wiki University HTML-- Margins|Back to Margins]]
Line 482: Line 482:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*You can only put borders on all sides.
*You can only put borders on all sides.
::B. False
{{Block indent|B. False|2}}
*There is a default space between text and borders
*There is a default space between text and borders
::B. False
{{Block indent|B. False|2}}
*Solid lines are all that is allowed in borders
*Solid lines are all that is allowed in borders
::B. False
{{Block indent|B. False|2}}
</div>
</div>
[[Help:Wiki University HTML-- Borders|Back to Borders]]
[[Help:Wiki University HTML-- Borders|Back to Borders]]
Line 501: Line 501:
====Quick Quiz====
====Quick Quiz====
<div style="border:10px solid lightgray; padding:5px; ">*You can't use both width and height in a div tag
<div style="border:10px solid lightgray; padding:5px; ">*You can't use both width and height in a div tag
::B. False
{{Block indent|B. False|2}}
*You can't use both width and height in a paragraph tag
*You can't use both width and height in a paragraph tag
::B. False
{{Block indent|B. False|2}}
*You can use percentages in height attributes
*You can use percentages in height attributes
::B. False</div>
{{Block indent|B. False</div>|2}}
[[Help:Wiki University HTML-- Width and Height|Back to Width and Height]]
[[Help:Wiki University HTML-- Width and Height|Back to Width and Height]]


Line 526: Line 526:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Text-align only works in header tags
*Text-align only works in header tags
::B. False
{{Block indent|B. False|2}}
*Text-align cannot put a title to the left because that is the default position.
*Text-align cannot put a title to the left because that is the default position.
::B. False
{{Block indent|B. False|2}}
*Text-align will work in header, paragraph and div tags
*Text-align will work in header, paragraph and div tags
::A. True
{{Block indent|A. True|2}}
</div>
</div>
[[Help:Wiki University HTML-- Alignment|Back to Alignment]]
[[Help:Wiki University HTML-- Alignment|Back to Alignment]]
Line 598: Line 598:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Tables do not need a closing tag
*Tables do not need a closing tag
:B. False
{{Block indent|B. False}}
*Rows must have a closing tag
*Rows must have a closing tag
:A. True
{{Block indent|A. True}}
*Cells must have something in them for the table to be visible.
*Cells must have something in them for the table to be visible.
:A. True
{{Block indent|A. True}}
</div>
</div>
[[Help:Wiki University HTML-- Tables|Back to Tables]]
[[Help:Wiki University HTML-- Tables|Back to Tables]]
Line 633: Line 633:
| Buckwheat
| Buckwheat
|}
|}
<p>Here is the coding in the opening table tag:</p>
<span>Here is the coding in the opening table tag:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><table </nowiki><font color="red"> style="border:15px ridge cornsilk"</font color>></div><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><table </nowiki><font color="red"> style="border:15px ridge cornsilk"</font color>></div><br>
*Put a border for the whole table that is 15 pixels wide, "double" border with a border color of brown.  
*Put a border for the whole table that is 15 pixels wide, "double" border with a border color of brown.  
Line 658: Line 658:
| Buckwheat
| Buckwheat
|}
|}
<p>Here is the coding:</p>
<span>Here is the coding:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><table</nowiki><font color="red"><nowiki> style="border:15px double brown"</nowiki></font color>></div><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><table</nowiki><font color="red"><nowiki> style="border:15px double brown"</nowiki></font color>></div><br>
*Put a blue border around the cells in the first column 1 pixel thick.
*Put a blue border around the cells in the first column 1 pixel thick.
Line 684: Line 684:
| Buckwheat
| Buckwheat
|}
|}
<p>Here is the coding:</p>
<span>Here is the coding:</span>


<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
Line 720: Line 720:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Borders can only be on the outside of a table.
*Borders can only be on the outside of a table.
:B. False
{{Block indent|B. False}}
*You can put borders around rows
*You can put borders around rows
:B. False
{{Block indent|B. False}}
*You can put borders on columns
*You can put borders on columns
:A. True
{{Block indent|A. True}}
</div>
</div>
[[Help:Wiki University HTML-- Tables - Borders|Back to Tables - Borders]]
[[Help:Wiki University HTML-- Tables - Borders|Back to Tables - Borders]]
Line 792: Line 792:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Putting the width in the first cell of a row determines the width of the first column in the table
*Putting the width in the first cell of a row determines the width of the first column in the table
:A. True
{{Block indent|A. True}}
*The width of a table will be determined by the material in the cells, if you do not set the widths
*The width of a table will be determined by the material in the cells, if you do not set the widths
:A. True
{{Block indent|A. True}}
*You can only set the width of a table in percentages
*You can only set the width of a table in percentages
:B. False</div>
{{Block indent|B. False</div>}}
[[Help:Wiki University HTML-- Tables - Widths|Back to Tables - Widths]]
[[Help:Wiki University HTML-- Tables - Widths|Back to Tables - Widths]]


Line 870: Line 870:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*The order of attributes is critical.
*The order of attributes is critical.
:B. False
{{Block indent|B. False}}
*The caption can only be on the left side of the page
*The caption can only be on the left side of the page
:B. False
{{Block indent|B. False}}
*Only margin-bottom of the caption will cause a separation between the caption and the table
*Only margin-bottom of the caption will cause a separation between the caption and the table
:B. False</div>
{{Block indent|B. False</div>}}
[[Help:Wiki University HTML-- Tables - Captions|Back to Tables - Captions]]
[[Help:Wiki University HTML-- Tables - Captions|Back to Tables - Captions]]


Line 950: Line 950:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*The headers are always centered on the column.
*The headers are always centered on the column.
:B. False
{{Block indent|B. False}}
*You have to use the text-align to put the header on the left side
*You have to use the text-align to put the header on the left side
:B. False
{{Block indent|B. False}}
*Headers are always in bold type.
*Headers are always in bold type.
:A. True
{{Block indent|A. True}}
</div>
</div>
[[Help:Wiki University HTML-- Tables - Column headings|Back to Tables - Column headings]]
[[Help:Wiki University HTML-- Tables - Column headings|Back to Tables - Column headings]]
Line 995: Line 995:
| style="border:1px solid blue; "|Buckwheat
| style="border:1px solid blue; "|Buckwheat
|}
|}
<p>Here is the coding</p>
<span>Here is the coding</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">


Line 1,035: Line 1,035:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Only the border-collaspe attribute is required to separate cell borders.
*Only the border-collaspe attribute is required to separate cell borders.
:B. False
{{Block indent|B. False}}
*Padding attribute only pads on the left side of the text
*Padding attribute only pads on the left side of the text
:B. False
{{Block indent|B. False}}
*The header font cannot be changed
*The header font cannot be changed
:B. False
{{Block indent|B. False}}
</div>
</div>
[[Help:Wiki University HTML-- Tables - Cells|Back to Tables - Rows]]
[[Help:Wiki University HTML-- Tables - Cells|Back to Tables - Rows]]
Line 1,120: Line 1,120:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*To make all the cells in column the same you need only put the code in the top cell
*To make all the cells in column the same you need only put the code in the top cell
:B. False
{{Block indent|B. False}}
*Background color cannot be placed in cells through coding in row
*Background color cannot be placed in cells through coding in row
:B. False
{{Block indent|B. False}}
*You can change the font-family in the rows
*You can change the font-family in the rows
:A. True
{{Block indent|A. True}}
</div>
</div>
[[Help:Wiki University HTML-- Tables - Rows|Back to Tables - Rows]]
[[Help:Wiki University HTML-- Tables - Rows|Back to Tables - Rows]]
Line 1,170: Line 1,170:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Text will always float up to the right side of a table when placing a table on the page.
*Text will always float up to the right side of a table when placing a table on the page.
:B. False
{{Block indent|B. False}}
*Text will float when you place a table on the right side of a page.
*Text will float when you place a table on the right side of a page.
:A. True
{{Block indent|A. True}}
*You cannot place a table in the middle of the page.
*You cannot place a table in the middle of the page.
:B. False
{{Block indent|B. False}}
</div>
</div>
[[Help:Wiki University HTML-- Tables - Placement|Back to Tables - Placement]]
[[Help:Wiki University HTML-- Tables - Placement|Back to Tables - Placement]]
Line 1,256: Line 1,256:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*When you click the sorting icon, the sorting is permanent.  
*When you click the sorting icon, the sorting is permanent.  
:B. False
{{Block indent|B. False}}
*When you add items to a table, you need to insert the item in the table where it is supposed to go if you want your table in alphabetical order even with the sorting class applied.
*When you add items to a table, you need to insert the item in the table where it is supposed to go if you want your table in alphabetical order even with the sorting class applied.
:B. False
{{Block indent|B. False}}
*Sorting will revert back to the original order if you leave the page the table is on.
*Sorting will revert back to the original order if you leave the page the table is on.
:A. True
{{Block indent|A. True}}
</div>
</div>
[[Help:Wiki University HTML-- Tables - Sorting|Back to Tables - Sorting]]
[[Help:Wiki University HTML-- Tables - Sorting|Back to Tables - Sorting]]
Line 1,299: Line 1,299:
|}
|}
</div><br>
</div><br>
<p>Here is the coding:</p>
<span>Here is the coding:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><div style="overflow:scroll; width:400px; height:400px; "></nowiki></font color><br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><div style="overflow:scroll; width:400px; height:400px; "></nowiki></font color><br>
<nowiki><table style="border:1px solid red; width:900px; height:900px"></nowiki><br>  
<nowiki><table style="border:1px solid red; width:900px; height:900px"></nowiki><br>  
Line 1,315: Line 1,315:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*When creating the horizontal scroll bar, you do not have to set the width.
*When creating the horizontal scroll bar, you do not have to set the width.
:B. False
{{Block indent|B. False}}
*Vertically scroll bars are only useful for very tall tables.
*Vertically scroll bars are only useful for very tall tables.
:A. True
{{Block indent|A. True}}
*You cannot have horizontal and vertical scroll bars at the same time.
*You cannot have horizontal and vertical scroll bars at the same time.
:B. False
{{Block indent|B. False}}


</div>
</div>
Line 1,398: Line 1,398:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*To have a list of items in six columns you need to create a table with one row and six cells.
*To have a list of items in six columns you need to create a table with one row and six cells.
:B. True
{{Block indent|B. True}}
*A one row table looks better if the columns are of equal length.
*A one row table looks better if the columns are of equal length.
:A. True
{{Block indent|A. True}}
*To make the items on separate lines, you use <nowiki><p></nowiki> tags only.
*To make the items on separate lines, you use <nowiki><p></nowiki> tags only.
:B. False</div>
{{Block indent|B. False</div>}}
[[Help:Wiki University HTML-- Tables - Columns Only|Back to Tables - Columns Only]]
[[Help:Wiki University HTML-- Tables - Columns Only|Back to Tables - Columns Only]]


Line 1,434: Line 1,434:
|}
|}


<p>Here is the coding</p>
<span>Here is the coding</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<nowiki><table style="border:1px solid red; width:100%"></nowiki><br>
<nowiki><table style="border:1px solid red; width:100%"></nowiki><br>
Line 1,470: Line 1,470:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Colspans must equal the number of cells in the next row.
*Colspans must equal the number of cells in the next row.
:A. True
{{Block indent|A. True}}
*If you have a row with four cells you can have in the preceding row one cell with a colspan="3" plus the remaining cell.
*If you have a row with four cells you can have in the preceding row one cell with a colspan="3" plus the remaining cell.
:A. True
{{Block indent|A. True}}
*If you have a row of seven cells you can have in the preceding row one cell with a colspan="2", the next cell with a colspan="3" and the remaining cell with a colspan="2".
*If you have a row of seven cells you can have in the preceding row one cell with a colspan="2", the next cell with a colspan="3" and the remaining cell with a colspan="2".
:A. True
{{Block indent|A. True}}
</div>
</div>
[[Help:Wiki University HTML-- Tables - Columns Only|Back to Tables - Column Spans]]
[[Help:Wiki University HTML-- Tables - Columns Only|Back to Tables - Column Spans]]
Line 1,483: Line 1,483:
*Merge the cells with Barley and Buckwheat in them.
*Merge the cells with Barley and Buckwheat in them.
*Merge the cells with Peas, Carrots and Corn in them.
*Merge the cells with Peas, Carrots and Corn in them.
<p>Here is what the table should look like:</p>
<span>Here is what the table should look like:</span>
{| style="border:1px solid red; width:100%; "  
{| style="border:1px solid red; width:100%; "  
|+ style="font-size:14px; text-align:center; " | Healthy Foods
|+ style="font-size:14px; text-align:center; " | Healthy Foods
Line 1,510: Line 1,510:


|}
|}
<p>Here is the coding:</p>
<span>Here is the coding:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<nowiki><table style="border:1px solid red; width:100%"></nowiki><br>
<nowiki><table style="border:1px solid red; width:100%"></nowiki><br>
Line 1,548: Line 1,548:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*If you are going to merge three cells in a column, you must delete the number of cells in the column under the cell to be marged to equal the number call for in the rowspan code minus one.
*If you are going to merge three cells in a column, you must delete the number of cells in the column under the cell to be marged to equal the number call for in the rowspan code minus one.
:A. True
{{Block indent|A. True}}
*If you want to merge two cells that are under each other in a column, you delete the cell next it in the row.
*If you want to merge two cells that are under each other in a column, you delete the cell next it in the row.
:B. False
{{Block indent|B. False}}
</div>
</div>
[[Help:Wiki University HTML-- Tables - Row Spans|Back to Table - Row Spans]]
[[Help:Wiki University HTML-- Tables - Row Spans|Back to Table - Row Spans]]
Line 1,562: Line 1,562:
*Center the name of the organization and the image in their cells.
*Center the name of the organization and the image in their cells.
*Make the items in the right hand cells into parameters.
*Make the items in the right hand cells into parameters.
<p>Your coding should look like this:</p>
<span>Your coding should look like this:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">


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


<div style="clear:both"></div>
<div style="clear:both"></div>
<p>Here is the coding:</p>
<span>Here is the coding:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<nowiki>{{Infobox U.S. County</nowiki><br>
<nowiki>{{Infobox U.S. County</nowiki><br>
Line 1,624: Line 1,624:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Once the information after the equal signs is entered and saved, there is no changing the parameters.
*Once the information after the equal signs is entered and saved, there is no changing the parameters.
::B. False
{{Block indent|B. False|2}}
*Infoboxes can only be used on county pages.
*Infoboxes can only be used on county pages.
::B. False
{{Block indent|B. False|2}}
*Infoboxes are limited just to genealogical organizations.  
*Infoboxes are limited just to genealogical organizations.  
::B. False
{{Block indent|B. False|2}}
</div>
</div>
[[Help:Wiki University HTML--Infobox - Placing|Back to Infobox - Placing]]
[[Help:Wiki University HTML--Infobox - Placing|Back to Infobox - Placing]]
Line 1,637: Line 1,637:


<div style="clear:both"></div>
<div style="clear:both"></div>
<p>Here is the coding:</p>
<span>Here is the coding:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">


Line 1,672: Line 1,672:
<div style="border:10px solid lightgray; padding:5px; ">
<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.
*If nothing is entered for a parameter, there will still be a space where the parameter would normally appear.
::B. False
{{Block indent|B. False|2}}
*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.
*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
{{Block indent|B. False|2}}
*It does not matter whether you use regular pipes or <nowiki>{{!}}</nowiki> in infoboxes with if functions.
*It does not matter whether you use regular pipes or <nowiki>{{!}}</nowiki> in infoboxes with if functions.
::B. False
{{Block indent|B. False|2}}
</div>
</div>
[[Help:Wiki University HTML--Infobox - If functions|Back to If functions]]
[[Help:Wiki University HTML--Infobox - If functions|Back to If functions]]
Line 1,686: Line 1,686:


<div style="clear:both"></div>
<div style="clear:both"></div>
<p>Here is the coding:</p>
<span>Here is the coding:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<nowiki>{{Infobox U.S. County</nowiki><br>
<nowiki>{{Infobox U.S. County</nowiki><br>
Line 1,702: Line 1,702:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Once the information after the equal signs is entered and saved, there is no changing the parameters.
*Once the information after the equal signs is entered and saved, there is no changing the parameters.
:B. False
{{Block indent|B. False}}
*Infoboxes can only be used on county pages.
*Infoboxes can only be used on county pages.
:B. False
{{Block indent|B. False}}
*Infoboxes are limited just to genealogical organizations.  
*Infoboxes are limited just to genealogical organizations.  
:B. False
{{Block indent|B. False}}
</div>
</div>
[[Help:Wiki University HTML--Sidebars|Back to Sibebars]]
[[Help:Wiki University HTML--Sidebars|Back to Sibebars]]
Line 1,718: Line 1,718:
*For Counties use the first 5 counties from the [[Anhalt_-_Herzogtum_(duchy)]] navbox at the bottom of the page.
*For Counties use the first 5 counties from the [[Anhalt_-_Herzogtum_(duchy)]] navbox at the bottom of the page.
*Change the parameter to country.
*Change the parameter to country.
<p>Here's what it should look like:</p>
<span>Here's what it should look like:</span>
{| style="width:100%; border:1px solid black; border-collaspe:separate; border-spacing:5px; "
{| style="width:100%; border:1px solid black; border-collaspe:separate; border-spacing:5px; "
|-  
|-  
Line 1,729: Line 1,729:
| style="background-color:lightblue; " | [[Anhalt - Herzogtum (duchy) Genealogy|Anhalt]]{{·}} [[Baden Grossherzogtum (grand duchy) Genealogy|Baden]]{{·}} [[Bayern (Bavaria) – Königreich (kingdom) Genealogy|Bayern]]{{·}} [[Braunschweig (Brunswick) – Herzogtum (duchy) Genealogy|Braunschweig]]{{·}} [[Bremen, Germany Genealogy|Bremen]]
| style="background-color:lightblue; " | [[Anhalt - Herzogtum (duchy) Genealogy|Anhalt]]{{·}} [[Baden Grossherzogtum (grand duchy) Genealogy|Baden]]{{·}} [[Bayern (Bavaria) – Königreich (kingdom) Genealogy|Bayern]]{{·}} [[Braunschweig (Brunswick) – Herzogtum (duchy) Genealogy|Braunschweig]]{{·}} [[Bremen, Germany Genealogy|Bremen]]
|}
|}
<p>Here's what the code should look like:</p>
<span>Here's what the code should look like:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<nowiki>{| style="width:100%; border:1px solid black; border-collaspe:separate; border-spacing:5px; "</nowiki><br>
<nowiki>{| style="width:100%; border:1px solid black; border-collaspe:separate; border-spacing:5px; "</nowiki><br>
Line 1,746: Line 1,746:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Navboxes should not include items that could be in a sidebar.
*Navboxes should not include items that could be in a sidebar.
::A. True
{{Block indent|A. True|2}}
*Navboxes are usually placed at the top of the page.
*Navboxes are usually placed at the top of the page.
::B. False
{{Block indent|B. False|2}}
*Navboxes are limited to less than 200 pixels in width.  
*Navboxes are limited to less than 200 pixels in width.  
::B. False
{{Block indent|B. False|2}}
</div>
</div>
[[Help:Wiki University HTML--Navboxes|Back to Navboxes]]
[[Help:Wiki University HTML--Navboxes|Back to Navboxes]]
Line 1,758: Line 1,758:
*Place a "relative" positioned object that is 300 pixels wide and 100 pixels high between the third and fourth sentence of our Lorem ipsum paragraph.
*Place a "relative" positioned object that is 300 pixels wide and 100 pixels high between the third and fourth sentence of our Lorem ipsum paragraph.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<div style="position:relative; width:300px; height:100px"></div> Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<div style="position:relative; width:300px; height:100px"></div> Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.<br><br>
<p>Here is the coding:</p>
<span>Here is the coding:</span>
<div style="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>
<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>
----
----
Line 1,767: Line 1,767:
**that is 200 pixels high.
**that is 200 pixels high.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.<div style="position:relative; width 100%; height:200px; background-color:blue; border:5px solid red"></div><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.<div style="position:relative; width 100%; height:200px; background-color:blue; border:5px solid red"></div><br>
<p>Here is the coding:</p>
<span>Here is the coding:</span>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.<font color="red"><nowiki><div style="position:relative;</nowiki></font color><font color="red"> width:100%; height:200px; background-color:blue; border:5px solid red"></font color><font color="red"><nowiki></div></nowiki></font color></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.<font color="red"><nowiki><div style="position:relative;</nowiki></font color><font color="red"> width:100%; height:200px; background-color:blue; border:5px solid red"></font color><font color="red"><nowiki></div></nowiki></font color></div>
Line 1,775: Line 1,775:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Relative positioning places objects in relation to the edge and top of the page.
*Relative positioning places objects in relation to the edge and top of the page.
::B. False
{{Block indent|B. False|2}}
*Relative positioning does not cover objects placed before it was.
*Relative positioning does not cover objects placed before it was.
::B. False
{{Block indent|B. False|2}}
*Relative positioning covers up all objects covered after it was placed.
*Relative positioning covers up all objects covered after it was placed.
::B. False
{{Block indent|B. False|2}}
</div>
</div>
[[Help:Wiki University HTML-- Position - Relative|Back to Position - Relative]]
[[Help:Wiki University HTML-- Position - Relative|Back to Position - Relative]]
Line 1,817: Line 1,817:
<div style="border:10px solid lightgray; padding:5px; ">
<div style="border:10px solid lightgray; padding:5px; ">
*Absolute positioning places objects in relation to the edge and top of the page.
*Absolute positioning places objects in relation to the edge and top of the page.
::A. True
{{Block indent|A. True|2}}
*Absolute positioning does not cover objects placed before it was.
*Absolute positioning does not cover objects placed before it was.
::B. False
{{Block indent|B. False|2}}
*Absolute positioning covers up all objects that follow it.
*Absolute positioning covers up all objects that follow it.
::A. True
{{Block indent|A. True|2}}
</div>
</div>
[[Help:Wiki University HTML-- Position - Absolute|Back to Position - Absolute]]
[[Help:Wiki University HTML-- Position - Absolute|Back to Position - Absolute]]
Line 1,873: Line 1,873:
<div style="border:10px solid lightgray; padding:5px; ">
<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>
*If I want to copy the name of the article someplace in the article, you would use <nowiki>[[NAMESPACE]]</nowiki>
:A. True
{{Block indent|A. True}}
*To recover something you may have deleted accidentally, you would hit the control key and the D key.
*To recover something you may have deleted accidentally, you would hit the control key and the D key.
:B. False ''(Control + Z)''
{{Block indent|B. False ''(Control + Z)''}}
*To search for a word in an article, you would hit the control key and the S key.
*To search for a word in an article, you would hit the control key and the S key.
:B. False ''(Control + F)''
{{Block indent|B. False ''(Control + F)''}}
*To highlight an entire page, you would bit the Control and W key
*To highlight an entire page, you would bit the Control and W key
:B. False ''(Control + A)''
{{Block indent|B. False ''(Control + A)''}}
*If you want exhibit code in an article, you would use opening and closing noinclude tags.
*If you want exhibit code in an article, you would use opening and closing noinclude tags.
:B. False ''(<nowiki><nowiki> ..... </nowiki></nowiki>)''
{{Block indent|B. False ''(<nowiki><nowiki> ..... </nowiki></nowiki>)''}}
</div>
</div>
[[Help:Wiki University HTML-- Misc|Back to Misc]]
[[Help:Wiki University HTML-- Misc|Back to Misc]]
[[Category:HTML Lessons]]
[[Category:HTML Lessons]]

Latest revision as of 12:52, 19 August 2025

Home[edit | edit source]

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

Back to Home Page

Introduction[edit | edit source]

  • 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

Back to Introduction

Headers[edit | edit source]

Exercises[edit | edit source]

Kentucky[edit | edit source]

History[edit | edit source]

Vital Records[edit | edit source]

Birth Certificates[edit | edit source]

Here's the coding:

  1. <h1>Kentucky Genealogy</h1>
  2. <h2>History</h2>
  3. <h2>Vital Records</h2>
  4. <h3>Birth Certificates</h3>
Quick Quiz[edit | edit source]
  • 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

Back to Headers

Lists[edit | edit source]

Exercises[edit | edit source]

  • Coding for unordered list:

<ul>
<li>Birth Certificates</li>
<li>Land Records</li>
<li>Probate Records</li>
<li>Census</li>
<li>Vital Records</li>

</ul>

  • This is how the unordered lists will appear:
*Birth Certificates
*Land Records
*Probate Records
*Census
*Vital Records
  • Coding for ordered list:

<ol>
<li>World</li>
<li>North America</li>
<li>United States of America</li>
<li>State of Missouri</li>
<li>Jackson County</li>
<li>Independence</li>

</ol>

  • This is how the ordered list will appear:
  1. World
  2. North America
  3. United States of America
  4. State of Missouri
  5. Jackson County
  6. Independence

Quick Quiz[edit | edit source]

  • 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

Back to Lists

Nested Lists[edit | edit source]

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.
Here is the coding you should have entered:

<ul>

<li>Fruits
<ul>
<li>Apples</li>
<li>Pears</li>
<li>Oranges</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Peas</li>
<li>Carrots</li>
<li>Corn</li>
</ul>
</li>
<li>Nuts
<ul>
<li>Walnuts</li>
<li>Peanuts</li>
<li>Almonds</li>
</ul>
<li>Grains
<ul>
<li>Wheat</li>
<li>Soybeans</li>
<li>Barley</li>
</ul>
</li>
</ul>


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



  • 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

Back to Nesting Lists

Comments[edit | edit source]

Exercises[edit | edit source]

  • Your wording of the comments is as good as anyone else's. Whatever makes sense to you is ok.
<!--List of newspapers published in Kirksville, Missouri---------------->

=== Newspapers ===
*[http://www.kirksvilledailyexpress.com/ Kirksville Daily Express]
*[http://chroniclingamerica.loc.gov/lccn/sn89066097/ click here to see past issues of Kirksville, Missouri Newspaper Archives]

<!--List of libraries, addresses and phone numbers---------------->

=== Libraries and Museums ===
[http://www.atsu.edu/atsmlib/ A T Still Memorial Library]
600 W Jefferson St. Kirksville, MO
(660) 626-2345

[http://library.truman.edu/ Pickler Memorial Library - Turman State University]
100 E Normal St. Kirksville, MO
(660) 785-4000

Adair County Public Library
1 Library Ln. Kirksville, MO
(660) 785-4051

<!--List of historical societies---------------->

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

<!--Link to town clerk---------------->

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

<!--Location of city directory for Kirksville, Missouri---------------->

=== City Directories ===
[http://library.truman.edu/books/eBook%20Collections.asp Truman State University]

Back to Comments

Quick Quiz[edit | edit source]

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

Back to Comments

Paragraphs[edit | edit source]

Exercises[edit | edit source]

  • Grab a paragraph from a page in the Wiki and paste it three times in your sandbox. Separate the paragraphs with two <br> between each one.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

  • Then with the same paragraph put <span> and </span> between each 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

  • Notice 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 <br> will not and which we will cover in the next chapter.

Quick Quiz[edit | edit source]

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

Back to Paragraph Page

Changing Fonts[edit | edit source]

Exercises[edit | edit source]

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 style="font-family:papyrus; font-size:14pt">Lorem ipsum ... </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 style="font-family:mistral; font-size:14pt">Lorem ipsum ... </span>

Quick Quiz[edit | edit source]

  • 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

Back to Changing Fonts

Font Size[edit | edit source]

Exercises[edit | edit source]

  • Enlarge the lorem ipsum paragraph to 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 style="font-size:20px">Lorem ipsum ... </span>

  • Enlarge a header to 36px.

Header

<h1 style="font-size:36px">Lorem ipsum ... </p>

Quick Quiz[edit | edit source]

*You cannot enlarge headers
B. False
  • You can add the "font-size" attribute between the = sign and the words of the header
B. False

Back to Sizing Fonts

Font Colors[edit | edit source]

Exercises[edit | edit source]

  • Change the lorem ipsum paragraph text to a color on this list.
  • Change the color of a header.
<span style="color:Cornflowerblue">Lorem ipsum ... </span>


<span style="color:#5f9ea0">Lorem ipsum ... </span>


<h1 style="color:red>Header</h1>

Quick Quiz[edit | edit source]

  • 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

Back to Font Colors

Font Bold-Italics[edit | edit source]

Exercises[edit | edit source]

  • Make the first sentence bold.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.
Here is the coding:

<span style="font-weight:bold">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</p> 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.

  • Make the next to the last sentence of lorem ipsum italic.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus.Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Here is the coding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. <span style="font-style:etalic">Curabitur eleifend quis ligula ac ullamcorper</p>. Curabitur eget suscipit turpis.

  • 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. Here is the coding
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. <span style="font-weight:bold; font-style:etalic">Curabitur eget suscipit turpis</span>.

Quick Quiz[edit | edit source]

  • 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

Back to Font Bold-Italics

Multi-attributes[edit | edit source]

Exercises[edit | edit source]

<span style="font-family:arial; font-size:12px; color:red">Lorem ipsum ....</span>

Quick Quiz[edit | edit source]

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

Back to Multi-attributes

Backgrounds[edit | edit source]

Exercises[edit | edit source]

  • What is the coding to change the color of the background of the lorem ipsum paragraph to green and the text to orange.
<span style="background-color:green; color:orange">lorem ipsum ....</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.

  • 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.
<span style="background-color:red; color:gold">lorem ipsum ....</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.

Quick Quiz[edit | edit source]

  • How to make text invisible on a page without erasing it.
C. All of the above.

Back to Backgrounds

Padding[edit | edit source]

Exercises[edit | edit source]

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.

<span style="background-color:lightgreen; color:blue; padding-top:20px; padding-bottom:20px">Lorem ipsum .....</span>

2. Copy our lorem ipsum paragraph twice with no background color and no text color but with a padding-bottom of the first paragraph of 100px. What happens to the space between the paragraphs?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

  • It widens by over 100 pixels.

Quick Quiz[edit | edit source]

  • 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

Back to Padding

Div Tag - Introduction[edit | edit source]

Exercises[edit | edit source]

  • 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="background-color:moccasin; padding:20px">Lorem ipsum ... </div>

<div style="background-color:crimson; padding:20px">Lorem ipsum ... </div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Back to Div Tag - Introduction

Quick Quiz[edit | edit source]

  • 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

Back to Div Tag - Introduction

Margins[edit | edit source]

Exercises[edit | edit source]

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="background-color:lightgreen; color:Purple; margin-bottom:40px">Lorem ipsum ....</div>

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="background-color:lightblue; color:white; margin-top:20px">Lorem ipsum ....</div>

Quick Quiz[edit | edit source]

  • 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

Back to Margins

Borders[edit | edit source]

Exercises[edit | edit source]

  • 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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

  • Here is the coding:
<div style="border:10px groove lightgreen">Lorem ipsum ...</div>

  • 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:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

  • Here is the coding:
<div style="border:15px ridge lightgreen">Lorem ipsum ...</div>

Quick Quiz[edit | edit source]

  • 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

Back to Borders

Width and Height[edit | edit source]

Exercises[edit | edit source]

In your sandbox put the lorem ipsum in a div tag container with a width of 200 pixels and a height of 400 pixels.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Here is the coding:

<div style="border:1px solid red; width:200px; height:400px">Lorem ipsum ....</div>

Quick Quiz[edit | edit source]

*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

Back to Width and Height

Alignment[edit | edit source]

Exercises[edit | edit source]

  • Take this title: "I Love Wikitext" and put it on the center of the page.
<div style="text-align:center">I Love Wikitext</div>

  • Take this title: "I Love Wikitext" and put it on the right side of the page.
<div style="text-align:right">I Love Wikitext</nowiki></div>

  • Take this title: "I Love Wikitext" and put it on the left of the page.
No attributes need, the left side is the default position.

Quick Quiz[edit | edit source]

  • 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

Back to Alignment

Tables[edit | edit source]

Exercises[edit | edit source]

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

Here is the table with its columns:

Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat

Here is the coding:

<table>
<tr>
<td>Apples</td>
<td>Peas</td>
<td>Peanuts</td>
<td>Wheat</td>
<tr>
</tr>
<td>Pears</td>
<td>Carrots</td>
<td>Walnuts</td>
<td>Oats</td>
<tr>
</tr>
<td>Cherries</td>
<td>Corn</td>
<td>Cashews</td>
<td>Barley</td>
<tr>
</tr>
<td>Oranges</td>
<td>Beans</td>
<td>Almonds</td>
<td>Buckwheat</td>
</tr>

</table>

Quick Quiz[edit | edit source]

  • 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

Back to Tables

Tables - Borders[edit | edit source]

Exercise[edit | edit source]

  • With your table from the previous exercise, put a 15 pixel "ridge" border with a border color of "cornsilk."
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat

Here is the coding in the opening table tag:

<table style="border:15px ridge cornsilk">

  • Put a border for the whole table that is 15 pixels wide, "double" border with a border color of brown.
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat

Here is the coding:

<table style="border:15px double brown">

  • Put a blue border around the cells in the first column 1 pixel thick.
  • NOTICE no pipe after the attribute.
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat

Here is the coding:

<table style="border:15px double brown">
<tr>
<td style="border:1px solid blue">Apples</td>
<td>Peas</td>
<td>Peanuts</td>
<td>Wheat</td>
<tr>
</tr>
<td style="border:1px solid blue">Pears</td>
<td>Carrots</td>
<td>Walnuts</td>
<td>Oats</td>
<tr>
</tr>
<td style="border:1px solid blue">Cherries</td>
<td>Corn</td>
<td>Cashews</td>
<td>Barley</td>
<tr>
</tr>
<td style="border:1px solid blue">Oranges</td>
<td>Beans</td>
<td>Almonds</td>
<td>Buckwheat</td>
</tr>

</table>

Quick Quiz[edit | edit source]

  • 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

Back to Tables - Borders

Tables - Widths[edit | edit source]

Exercises[edit | edit source]

  • 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.
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat
  • Here is the coding:

<table style="border:25px inset green; width:90%">
<tr>
<td style="border:1px solid green; width:35%">Apples</td>
<td style="border:1px solid green; width:15%">Peas</td>
<td style="border:1px solid green; width:25%">Peanuts</td>
<td style="border:1px solid green">Wheat</td>
<tr>
</tr>
<td>Pears</td>
<td>Carrots</td>
<td>Walnuts</td>
<td>Oats</td>
<tr>
</tr>
<td>Cherries</td>
<td>Corn</td>
<td>Cashews</td>
<td>Barley</td>
<tr>
</tr>
<td>Orange</td>
<td>Beans</td>
<td>Almonds</td>
<td>Buckwheat</td>
</tr>
</table>

Quick Quiz[edit | edit source]

  • 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

Back to Tables - Widths

Tables - Captions[edit | edit source]

Exercises[edit | edit source]

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

Healthy Foods
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat
  • Here is the coding:

<table style="border:25px outset orange; width:85%">
<caption style="font-size:28pt; text-align:center; margin-bottom:20px; font-family:Curlz MT">Healthy Foods</caption>
<tr>
<td style="border:1px solid orange; width:25%">Apples</td>
<td style="width:25%">Peas</td>
<td style="width:25%">Peanuts</td>
<td style="width:25%">Wheat</td>
<tr>
</tr>
<td style="border:1px solid orange; width:25%">Pears</td>
<td> Carrots</td>
<td> Walnuts</td>
<td> Oats</td>
<tr>
</tr>
<td style="border:1px solid orange; width:25%">Cherries</td>
<td> Corn</td>
<td> Cashews</td>
<td> Barley</td>
<tr>
</tr>
<td style="border:1px solid orange; width:25%">Orange</td>
<td> Beans</td>
<td> Almonds</td>
<td> Buckwheat</td>
</tr>

</table>

Quick Quiz[edit | edit source]

  • 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

Back to Tables - Captions

Tables - Column headings[edit | edit source]

Exercise[edit | edit source]

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

Healthy Foods
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat
  • Here is the coding:

<table style="border:10px dashed orange; width:500px">
<caption style="font-size:28pt; text-align:center; margin-bottom:20px; font-family:times new roman">Healthy Foods</td>
<tr>
<th style="border:1px solid blue; text-align:center; width:25%; background-color:lightblue">Fruits</td>
<th style="border:1px solid blue; text-align:center; width:25%; background-color:lightblue">Vegetable</td>
<th style="border:1px solid blue; text-align:center; width:25%; background-color:lightblue">Nuts</td>
<th style="border:1px solid blue; text-align:center; width:25%; background-color:lightblue">Grains</td>
<tr>
</tr>
<td>Pears</td>
<td>Carrots</td>
<td>Walnuts</td>
<td>Oats</td>
<tr>
</tr>
<td>Cherries</td>
<td>Corn</td>
<td>Cashews</td>
<td>Barley</td>
<tr>
</tr>
<td>Orange</td>
<td>Beans</td>
<td>Almonds</td>
<td>Buckwheat</td>
</tr>

</table>

Quick Quiz[edit | edit source]

  • 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

Back to Tables - Column headings

Tables - Cells[edit | edit source]

Exercises[edit | edit source]

  • 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.
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat

Here is the coding

<table style="border:5px dotted black; width:600px; border-spacing:5px">
<tr>
<th style="border:1px solid blue; text-align:center; padding:5px; background-color:lightblue">Fruits</th>
<th style="border:1px solid blue; text-align:center; padding:5px; background-color:lightblue">Vegetable</th>
<th style="border:1px solid blue; text-align:center; padding:5px; background-color:lightblue">Nuts</th>
<th style="border:1px solid blue; text-align:center; padding:5px; background-color:lightblue">Grains</th>
</tr>
<tr>
<td style="border:1px solid blue">Apples</td>
<td style="border:1px solid blue">Peas</td>
<td style="border:1px solid blue">Peanuts</td>
<td style="border:1px solid blue">Wheat</td>
<tr>
</tr>
<td style="border:1px solid blue">Pears</td>
<td style="border:1px solid blue">Carrots</td>
<td style="border:1px solid blue">Walnuts</td>
<td style="border:1px solid blue">Oats</td>
<tr>
</tr>
<td style="border:1px solid blue">Cherries</td>
<td style="border:1px solid blue">Corn</td>
<td style="border:1px solid blue">Cashews</td>
<td style="border:1px solid blue">Barley</td>
<tr>
</tr>
<td style="border:1px solid blue">Orange</td>
<td style="border:1px solid blue">Beans</td>
<td style="border:1px solid blue">Almonds</td>
<td style="border:1px solid blue">Buckwheat</td>
</tr>

</table>

Quick Quiz[edit | edit source]

  • 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

Back to Tables - Rows

Tables - Rows[edit | edit source]

Exercises[edit | edit source]

  • 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.
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat
  • NOTICE 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:

<table style="border:10px groove yellow; width:700px">
<tr>
<th style="border:1px solid blue; background-color:lightblue; color:white">Fruits</th>
<th style="border:1px solid blue; background-color:lightblue; color:white">Vegetable</th>
<th style="border:1px solid blue; background-color:lightblue; color:white">Nuts</th>
<th style="border:1px solid blue; background-color:lightblue; color:white">Grains</th>
</tr>
<tr>
<td>Apples</td>
<td>Peas</td>
<td>Peanuts</td>
<td>Wheat</td>
<tr>
</tr>
<td>Pears</td>
<td>Carrots</td>
<td>Walnuts</td>
<td>Oats</td>
<tr>
</tr>
<td>Cherries</td>
<td>Corn</td>
<td>Cashews</td>
<td>Barley</td>
<tr>
</tr>
<td>Orange</td>
<td>Beans</td>
<td>Almonds</td>
<td>Buckwheat</td>
</tr>

</table>

Quick Quiz[edit | edit source]

  • 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

Back to Tables - Rows

Tables - Placement[edit | edit source]

Exercises[edit | edit source]

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

Here is the coding in the beginning table tag:

<table style="border:1px solid red; width:50%; float:right; margin-left:10px">

Quick Quiz[edit | edit source]

  • 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

Back to Tables - Placement

Tables - Sorting[edit | edit source]

Exercises[edit | edit source]

  • Take our Heathy Foods table and add another row.
  • Now make the table sortable.
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:

<table class="sortable" style="border:1px solid red; width:100%">
<tr>
<th>Fruits</th>
<th>Vegetable</th>
<th>Nuts</th>
<th>Grains</th>
</tr>
<tr>
<td>Apples</td>
<td>Peas</td>
<td>Peanuts</td>
<td>Wheat</td>
</tr>
<tr>
<td>Pears</td>
<td>Carrots</td>
<td>Walnuts</td>
<td>Oats</td>
</tr>
<tr>
<td>Cherries</td>
<td>Corn</td>
<td>Cashews</td>
<td>Barley</td>
</tr>
<tr>
<td>Orange</td>
<td>Beans</td>
<td>Almonds</td>
<td>Buckwheat</td>
</tr>

</table>

Quick Quiz[edit | edit source]

  • 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

Back to Tables - Sorting

Tables - Scrolling[edit | edit source]

Exercises[edit | edit source]

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

Here is the final product:

Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat

Here is the coding:

<div style="overflow:scroll; width:400px; height:400px; ">

<table style="border:1px solid red; width:900px; height:900px">
<tr>
<th>Fruits
.
.
.
.
</table>

</div>

Quick Quiz[edit | edit source]

  • 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

Back to Tables - Scrolling

Tables - Columns Only[edit | edit source]

Exercises[edit | edit source]

Adair
Andrew
Atchison
Audrain

Barry
Barton
Bates
Benton

Bollinger
Boone
Buchanan
Butler

Caldwell
Callaway
Camden
Cape Girardeau

Carroll
Carter
Cass
Cedar

  • Here is the coding:

<table>
<tr>
<td style="width:20%; background-color:lightblue; padding:5px; border-right:1px solid black">
Adair <br>
Andrew<br>
Atchison<br>
Audrain <br>
</td>
<td style="width:20%; background-color:lightgray; padding:5px; border-right:1px solid black">
Barry<br>
Barton <br>
Bates <br>
Benton <br>
</td>
<td style="width:20%; background-color:lightblue; padding:5px; border-right:1px solid black">
Bollinger <br>
Boone <br>
Buchanan <br>
Butler <br>
</td>
<td style="width:20%; background-color:lightgray; padding:5px; border-right:1px solid black">
Caldwell <br>
Callaway <br>
Camden <br>
Cape Girardeau <br>
</td>
<td style="width:20%; background-color:lightblue; padding:5px"> Carroll <br>
Carter <br>
Cass <br>
Cedar <br>
</td>
</tr>

</table>

Quick Quiz[edit | edit source]

  • 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 <p> tags only.
B. False

Back to Tables - Columns Only

Tables - Column Spans[edit | edit source]

Exercises[edit | edit source]

  • Merge all the cells in the second row.
  • Merge the first three cells in the fourth row.
Fruits Vegetable Nuts Grains
Apples
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans

Here is the coding

<table style="border:1px solid red; width:100%">
<tr>
<th style="border:1px solid red; width:25%">Fruits</th>
<th style="border:1px solid red; width:25%">Vegetable</th>
<th style="border:1px solid red; width:25%">Nuts</th>
<th style="border:1px solid red; width:25%">Grains</th>
</tr>
<tr>
<td colspan="4" style="border:1px solid red">Apples</td>
</tr>
<tr>
<td style="border:1px solid red">Pears</td>
<td style="border:1px solid red">Carrots</td>
<td style="border:1px solid red">Walnuts</td>
<td style="border:1px solid red">Oats</td>
</tr>
<tr>
</tr>
<td style="border:1px solid red">Cherries</td>
<td style="border:1px solid red">Corn</td>
<td style="border:1px solid red">Cashews</td>
<td style="border:1px solid red">Barley</td>
</tr>
<tr>
<td colspan="3" style="border:1px solid red">Orange</td>
<td style="border:1px solid red">Beans</td>
</tr>
</table>

Quick Quiz[edit | edit source]

  • 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

Back to Tables - Column Spans

Tables - Row Spans[edit | edit source]

Exercises[edit | edit source]

  • Merge the cells with Barley and Buckwheat in them.
  • Merge the cells with Peas, Carrots and Corn in them.

Here is what the table should look like:

Healthy Foods
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Walnuts Oats
Cherries Cashews Barley
Orange Beans Almonds

Here is the coding:

<table style="border:1px solid red; width:100%">
<caption style="font-size:14px; text-align:center">Healthy Foods</caption>
<tr>
<th style="border:1px solid red; text-align:center; width:25%">Fruits</th>
<th style="border:1px solid red; text-align:center; width:25%">Vegetable</th>
<th style="border:1px solid red; text-align:center; width:25%">Nuts</th>
<th style="border:1px solid red; text-align:center; width:25%">Grains</th>
</tr>
<tr>
<td style="border:1px solid red">Apples</td>
<td rowspan="3" style="border:1px solid red">Peas</td>
<td style="border:1px solid red">Peanuts</td>
<td style="border:1px solid red">Wheat</td>
</tr>
<tr>
<td style="border:1px solid red">Pears</td>
<td style="border:1px solid red">Walnuts</td>
<td style="border:1px solid red">Oats</td>
</tr>
<tr>
<td style="border:1px solid red">Cherries</td>
<td style="border:1px solid red">Cashews</td>
<td rowspan="2" style="border:1px solid red">Barley</td>
</tr>
<tr>
<td style="border:1px solid red">Orange</td>
<td style="border:1px solid red">Beans</td>
<td style="border:1px solid red">Almonds</td>
</tr>
</table>

Quick Quiz[edit | edit source]

  • 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

Back to Table - Row Spans

Infobox - Creating[edit | edit source]

Exercises[edit | edit source]

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

Your coding should look like this:

<table style="border:1px solid black; width:190px; float:right">
<tr>
<td colspan="2" style="border:1px solid black; text-align:center">organization</td>
</tr>
<tr>
<td colspan="2" style="border:1px solid black; text-align:center">image</td>
</tr>
<tr>
<td style="border:1px solid black">President:</td>
<td style="border:1px solid black">{{{president|President's name}}}</td>
</tr>
<tr>
<td style="border:1px solid black">Address:</td>
<td style="border:1px solid black">{{{address|Address}}}</td>
</tr>
<tr>
<td style="border:1px solid black">Phone:</td>
<td style="border:1px solid black">{{{phone|Phone number}}}</td>
</tr>
<tr>
<td style="border:1px solid black">Hours Open:</td>
<td style="border:1px solid black">{{{hours open|Hours open}}}</td>
</tr>

</table>

Quick Quiz[edit | edit source]

  • 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

Back to Infobox - Creating

Infobox - Placing[edit | edit source]

Exercises[edit | edit source]

Here is the coding:

{{Infobox U.S. County
| county = Jackson
| county_map = Missouri Jackson County Map.svg.png
| state = Missouri
| state_map = Missouri.png
| founded year = 1826
| founded date = December 15
| seat wl = Independence

}}

  • NOTICE the image did not require the brackets as this was built into this particular infobox.

Quick Quiz[edit | edit source]

  • 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

Back to Infobox - Placing

If functions[edit | edit source]

Exercises[edit | edit source]

Here is the coding:

<table class="infobox" style="width:200px; ">
<tr>
<td colspan="2">{{{organization}}}
</td>
</tr>
<tr>
{{#if:{{{image|}}}|<td colspan="2">{{{image}}}}}
</td>
</tr>
<tr>
{{#if:{{{president|}}}|<td>President:</td>
<td>{{{president}}}}}
</td>
</tr>
<tr>
{{#if:{{{address|}}}|<td>Address:</td>
<td>{{{address}}}}}
</td>
</tr>
<tr>
{{#if:{{{phone|}}}|<td>Phone:</td>
<td>{{{phone}}}}}
</td>
</tr>
<tr>
{{#if:{{{hours open|}}}|<td>Hours Open:</td>
<td>{{{hours open}}}}}
</td>
</tr>
</table>

Quick Quiz[edit | edit source]

  • 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 {{!}} in infoboxes with if functions.
B. False

Back to If functions

Sidebars[edit | edit source]

Exercises[edit | edit source]

Here is the coding:

{{Infobox U.S. County
| county = Jackson
| county_map = Missouri Jackson County Map.svg.png
| state = Missouri
| state_map = Missouri.png
| founded year = 1826
| founded date = December 15
| seat wl = Independence

}}
  • NOTICE the images did not require the brackets as this was built into the infobox.

Quick Quiz[edit | edit source]

  • 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

Back to Sibebars

Navboxes[edit | edit source]

Exercises[edit | edit source]

  • Create a navbox using the above format.
  • For topics use the first 5 topics from the Germany Genealogy page.
  • For Counties use the first 5 counties from the Anhalt_-_Herzogtum_(duchy) navbox at the bottom of the page.
  • Change the parameter to country.

Here's what it should look like:

Links to Germany - related articles
Topics Archives and Libraries · Biography · Cemeteries · Census · Church Directories
Counties Anhalt · Baden · Bayern · Braunschweig · Bremen

Here's what the code should look like:

{| style="width:100%; border:1px solid black; border-collaspe:separate; border-spacing:5px; "
|-
| colspan="2" style="background-color:lightgray; text-align:center; " | Links to '''{{{Country}}}''' - related articles
|-
| 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]]

|}

Quick Quiz[edit | edit source]

  • 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

Back to Navboxes

Position - Relative[edit | edit source]

Exercises[edit | edit source]

  • 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.
Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Here is the coding:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<div style="position:relative; width:300px; height:100px"></div>Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.
  • 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.

Here is the coding:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.<div style="position:relative; width:100%; height:200px; background-color:blue; border:5px solid red"></div>

Quick Quiz[edit | edit source]

  • 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

Back to Position - Relative

Position - Absolute[edit | edit source]

Exercises[edit | edit source]

1. Make this object <div style="width:200px; height:75px; border:2px solid green; background-color:orange; "> 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.


Here is the coding:

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

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:





Here is the coding:

<div style="position:relative; left:150px; top:50px;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>


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.



Here is the coding:

<div style="position:relative; left:150px; top:50px;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>

Quick Quiz[edit | edit source]

  • 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

Back to Position - Absolute

Tabs[edit | edit source]

Exercises[edit | edit source]



  • Here's the coding for the first tab:

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

Back to Tabs

Misc[edit | edit source]

Quick Quiz[edit | edit source]

  • If I want to copy the name of the article someplace in the article, you would use [[NAMESPACE]]
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>)

Back to Misc

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