m (→Exercise) |
m (Text replacement - "\<p(.*?)\>(.*?)\<\/p>" to "<span$1>$2</span>") |
||
| (97 intermediate revisions by 5 users not shown) | |||
| Line 33: | Line 33: | ||
Here's the coding: | Here's the coding: | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | ||
#<font color="red"><nowiki><h1></nowiki></font color>Kentucky Genealogy<font color="red"><nowiki></h1></nowiki></font color | #<font color="red"><nowiki><h1></nowiki></font color>Kentucky Genealogy<font color="red"><nowiki></h1></nowiki></font color> | ||
#<font color="red"><nowiki>< | #<font color="red"><nowiki><h2></nowiki></font color>History<font color="red"><nowiki></h2></nowiki></font color> | ||
#<font color="red"><nowiki>< | #<font color="red"><nowiki><h2></nowiki></font color>Vital Records<font color="red"><nowiki></h2></nowiki></font color> | ||
#<font color="red"><nowiki>< | #<font color="red"><nowiki><h3></nowiki></font color>Birth Certificates<font color="red"><nowiki></h3></nowiki></font color></div> | ||
</div> | </div> | ||
=====Quick Quiz===== | =====Quick Quiz===== | ||
| Line 155: | Line 155: | ||
**Soybeans | **Soybeans | ||
**Barley | **Barley | ||
</div> | |||
<br><br> | <br><br> | ||
<div style="border:10px solid lightgray; padding:5px; "> | <div style="border:10px solid lightgray; padding:5px; "> | ||
*If you were nesting a list of states in no particular order in a list of countries, which list would you use?: | *If you were nesting a list of states in no particular order in a list of countries, which list would you use?: | ||
:B. Unordered List | |||
*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 | |||
</div> | </div> | ||
[[Help:Wiki University HTML-- Nesting Lists|Back to Nesting Lists]] | [[Help:Wiki University HTML-- Nesting Lists|Back to Nesting Lists]] | ||
| Line 195: | 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 | <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 208: | Line 207: | ||
</nowiki> | </nowiki> | ||
</div> | </div> | ||
[[Help:Wiki University HTML-- Comments|Back to Comments]] | |||
====Quick Quiz==== | ====Quick Quiz==== | ||
<div style="border:10px solid lightgray; padding:5px; "> | <div style="border:10px solid lightgray; padding:5px; "> | ||
| Line 227: | 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>< | *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. | ||
< | <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> | ||
< | <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> | ||
< | <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 237: | 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 | |||
*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 | |||
*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 | |||
</div> | </div> | ||
[[Help:Wiki University HTML-- Paragraphs|Back to Paragraph Page]] | [[Help:Wiki University HTML-- Paragraphs|Back to Paragraph Page]] | ||
| Line 248: | Line 247: | ||
====Exercises==== | ====Exercises==== | ||
<div style="border:10px solid lightgreen; padding:5px; "> | <div style="border:10px solid lightgreen; padding:5px; "> | ||
< | <span style="font-family:papyrus; font-size:14pt; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</span> | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki>< | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><span style="</nowiki><font color="red">font-family:papyrus; font-size:14pt</font color>">Lorem ipsum ... <nowiki></span></nowiki></div> | ||
< | <span style="font-family:mistral; font-size:14pt; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</span> | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki>< | <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 271: | Line 270: | ||
====Exercises==== | ====Exercises==== | ||
<div style="border:10px solid lightgreen; padding:5px; "> | <div style="border:10px solid lightgreen; padding:5px; "> | ||
*Enlarge the lorem ipsum paragraph to | *Enlarge the lorem ipsum paragraph to 20px. | ||
< | <span style="font-size:20px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</span> | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size: | <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 | *Enlarge a header to 36px. | ||
<h1 style="font-size: | <h1 style="font-size:36px; margin:0px; padding:0px">Header</h1> | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size: | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:14px | ||
; font-family:Courier New"><nowiki><h1 style="</nowiki><font color="red">font-size:36px</font color">">Lorem ipsum ... <nowiki></p></nowiki></div> | |||
</div> | </div> | ||
| Line 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>< | <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>< | <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 318: | Line 318: | ||
====Exercises==== | ====Exercises==== | ||
<div style="border:10px solid lightgreen; padding:5px; "> | <div style="border:10px solid lightgreen; padding:5px; "> | ||
*Make the | *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.<br> | |||
< | Here is the coding: | ||
<p style="border:1px solid red; padding:5px"> | |||
<font color="red"><nowiki><span style="font-weight:bold"></nowiki></font>Lorum ipsum dolor sit amet, consectetur adipiscing elit.<font color="red"><nowiki></p></nowiki></font> Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</span> | |||
*Make the next to the last sentence of lorem ipsum italic. | *Make the next to the last sentence of lorem ipsum italic. | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus.''Curabitur eleifend quis ligula ac ullamcorper''. Curabitur eget suscipit turpis. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus.''Curabitur eleifend quis ligula ac ullamcorper''. Curabitur eget suscipit turpis. | ||
< | <span>Here is the coding</span> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. | <p style="border:1px solid red; padding:5px"> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. <font color="red"><nowiki><span style="font-style:etalic"></nowiki></font>Curabitur eleifend quis ligula ac ullamcorper<font color="red"><nowiki></p></nowiki></font>. Curabitur eget suscipit turpis. </span> | |||
*Make the last sentence both bold and italics. | *Make the last sentence both bold and italics. | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. '''''Curabitur eget suscipit turpis'''''. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. '''''Curabitur eget suscipit turpis'''''. | ||
< | <span>Here is the coding</span> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. | <div style="border:1px solid red; padding:5px"> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. <font color="red"><nowiki><span style="font-weight:bold; font-style:etalic"></nowiki></font>Curabitur eget suscipit turpis<font color="red"><nowiki></span></nowiki></font>. </div> | |||
</div> | </div> | ||
====Quick Quiz==== | ====Quick Quiz==== | ||
<div style="border:10px solid lightgray; padding:5px; "> | <div style="border:10px solid lightgray; padding:5px; "> | ||
*To make a sentence in bold text, you | *To make a sentence in bold text, you use the "text-weight:bold" attribute | ||
::B. False | ::B. False | ||
*To make a word italicized, you flank the | *To make a word italicized, you flank the "text-style:italic attribute | ||
::B. False | ::B. False | ||
</div> | </div> | ||
| Line 347: | Line 350: | ||
====Exercises==== | ====Exercises==== | ||
<div style="border:10px solid lightgreen; padding:5px; "> | <div style="border:10px solid lightgreen; padding:5px; "> | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size: | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10px; font-family:Courier New"> | ||
<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 360: | Line 363: | ||
::D. None of the above | ::D. None of the above | ||
*How would you make a word italicized along with the three attribute changes to the paragraph? | *How would you make a word italicized along with the three attribute changes to the paragraph? | ||
::C. | ::C. Flank the work with two apostrophes. | ||
</div> | </div> | ||
[[Help:Wiki University HTML-- Multi-attributes|Back to Multi-attributes]] | [[Help:Wiki University HTML-- Multi-attributes|Back to Multi-attributes]] | ||
| Line 371: | 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>< | <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> | ||
< | <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>< | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><span style="</nowiki><font color="red">background-color:red; color:gold</font color>">lorem ipsum ....<nowiki></span></nowiki></div><br> | ||
< | <span style="background-color:red; color:gold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</span> | ||
</div> | </div> | ||
| Line 385: | Line 388: | ||
====Quick Quiz==== | ====Quick Quiz==== | ||
<div style="border:10px solid lightgray; padding:5px; "> | <div style="border:10px solid lightgray; padding:5px; "> | ||
*How to make text invisible on a page without erasing it. | |||
:C. All of the above. | |||
</div> | </div> | ||
| Line 395: | Line 398: | ||
====Exercises==== | ====Exercises==== | ||
<div style="border:10px solid lightgreen; padding:5px; "> | <div style="border:10px solid lightgreen; padding:5px; "> | ||
1. What is the coding to | 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>< | <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. | 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">< | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><span style="padding-bottom:100px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</span> | ||
< | <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</span></div><br> | ||
*It widens by over 100 pixels. | *It widens by over 100 pixels. | ||
</div> | </div> | ||
| Line 408: | 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 | |||
*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> | |||
[[Help:Wiki University HTML-- Padding|Back to Padding]] | [[Help:Wiki University HTML-- Padding|Back to Padding]] | ||
| Line 416: | Line 419: | ||
====Exercises==== | ====Exercises==== | ||
<div style="border:10px solid lightgreen; padding:5px; "> | <div style="border:10px solid lightgreen; padding:5px; "> | ||
* | *Copy our lorem ipsum paragraphs twice with the first one with a background color of moccasin and the second one with a color crimson, both with a padding of 20 pixels, but using div tags instead of paragraph tags: | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><div style="</nowiki><font color="red">background-color:moccasin; padding:20px</font color>">Lorem ipsum ... <nowiki></div></nowiki></div><br> | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><div style="</nowiki><font color="red">background-color:moccasin; padding:20px</font color>">Lorem ipsum ... <nowiki></div></nowiki></div><br> | ||
| Line 427: | Line 430: | ||
</div> | </div> | ||
[[Help:Wiki University HTML-- Div Tag - Introduction|Back to Div Tag - Introduction]] | |||
====Quick Quiz==== | ====Quick Quiz==== | ||
<div style="border:10px solid lightgray; padding:5px; "> | <div style="border:10px solid lightgray; padding:5px; "> | ||
*The div tag and paragraph tag | *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 | *The attributes work the same way in the div tag as in the paragraph tag | ||
:A. True | |||
*Div tags put spaces between paragraphs | *Div tags put spaces between paragraphs | ||
:B. False</div> | |||
[[Help:Wiki University HTML-- Div Tag - Introduction|Back to Div Tag - Introduction]] | [[Help:Wiki University HTML-- Div Tag - Introduction|Back to Div Tag - Introduction]] | ||
==Margins== | ==Margins== | ||
====Exercises==== | ====Exercises==== | ||
<div style="border:10px solid lightgreen; padding:5px; "> | <div style="border:10px solid lightgreen; padding:5px; "> | ||
1. What is the coding to | 1. What is the coding to change our lorem ipsum paragraph in your sandbox with a background color of light green with Purple text and a margin on the bottom of 40 pixels. | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><div style="</nowiki><font color="red">background-color:lightgreen; color: | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><div style="</nowiki><font color="red">background-color:lightgreen; color:Purple; margin-bottom:40px</font color>">Lorem ipsum ....<nowiki></div></nowiki></div><br> | ||
2. | 2. what is the code to change our lorem Ipsum paragraph in your sandbox with a background color of light blue with white text and a margin on the top of 20 pixels. | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><div style="</nowiki><font color="red">background-color:lightblue; color:white; margin-top:20px</font color>">Lorem ipsum ....<nowiki></div></nowiki></div> | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><div style="</nowiki><font color="red">background-color:lightblue; color:white; margin-top:20px</font color>">Lorem ipsum ....<nowiki></div></nowiki></div> | ||
| Line 452: | 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 | |||
*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 | |||
*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 | |||
</div> | </div> | ||
[[Help:Wiki University HTML-- Margins|Back to Margins]] | [[Help:Wiki University HTML-- Margins|Back to Margins]] | ||
==Borders== | ==Borders== | ||
====Exercises==== | ====Exercises==== | ||
| Line 628: | Line 633: | ||
| Buckwheat | | Buckwheat | ||
|} | |} | ||
< | <span>Here is the coding in the opening table tag:</span> | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><table </nowiki><font color="red"> style="border:15px ridge cornsilk"</font color>></div><br> | <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 653: | Line 658: | ||
| Buckwheat | | Buckwheat | ||
|} | |} | ||
< | <span>Here is the coding:</span> | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><table</nowiki><font color="red"><nowiki> style="border:15px double brown"</nowiki></font color>></div><br> | <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 679: | Line 684: | ||
| Buckwheat | | Buckwheat | ||
|} | |} | ||
< | <span>Here is the coding:</span> | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | ||
| Line 755: | Line 760: | ||
<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="</nowiki><font color="red">border:25px | <nowiki><table style="</nowiki><font color="red">border:25px inset green; width:90%</font color>"><br> | ||
nowiki><tr></nowiki><br> | <nowiki><tr></nowiki><br> | ||
<nowiki><td style="</nowiki><font color="red">border:1px solid green; width:35%</font color">">Apples<nowiki></td></nowiki><br> | <nowiki><td style="</nowiki><font color="red">border:1px solid green; width:35%</font color">">Apples<nowiki></td></nowiki><br> | ||
<nowiki><td style="</nowiki><font color="red">border:1px solid green; width:15%</font color">">Peas<nowiki></td></nowiki><br> | <nowiki><td style="</nowiki><font color="red">border:1px solid green; width:15%</font color">">Peas<nowiki></td></nowiki><br> | ||
| Line 787: | 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 | |||
*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 | |||
*You can set the width of a table in percentages | *You can only set the width of a table in percentages | ||
:B. False</div> | |||
[[Help:Wiki University HTML-- Tables - Widths|Back to Tables - Widths]] | [[Help:Wiki University HTML-- Tables - Widths|Back to Tables - Widths]] | ||
==Tables - Captions== | ==Tables - Captions== | ||
====Exercises==== | ====Exercises==== | ||
| Line 864: | 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 | |||
*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 | |||
*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> | |||
[[Help:Wiki University HTML-- Tables - Captions|Back to Tables - Captions]] | [[Help:Wiki University HTML-- Tables - Captions|Back to Tables - Captions]] | ||
==Tables - Column headings== | ==Tables - Column headings== | ||
====Exercise==== | ====Exercise==== | ||
| Line 920: | Line 927: | ||
<nowiki><tr></nowiki><br> | <nowiki><tr></nowiki><br> | ||
<nowiki></tr></nowiki><br> | <nowiki></tr></nowiki><br> | ||
<nowiki><td> | <nowiki><td>Pears</td></nowiki><br> | ||
<nowiki><td>Carrots</td></nowiki><br> | |||
<nowiki><td>Walnuts</td></nowiki><br> | |||
<nowiki><td>Oats</td></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki></table></nowiki></div> | <nowiki></tr></nowiki><br> | ||
<nowiki><td>Cherries</td></nowiki><br> | |||
<nowiki><td>Corn</td></nowiki><br> | |||
<nowiki><td>Cashews</td></nowiki><br> | |||
<nowiki><td>Barley</td></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><td>Orange</td></nowiki><br> | |||
<nowiki><td>Beans</td></nowiki><br> | |||
<nowiki><td>Almonds</td></nowiki><br> | |||
<nowiki><td>Buckwheat</td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki></table></nowiki></div> | |||
</div> | </div> | ||
| Line 931: | 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 | |||
*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 | |||
*Headers are always in bold type. | *Headers are always in bold type. | ||
: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 976: | Line 995: | ||
| style="border:1px solid blue; "|Buckwheat | | style="border:1px solid blue; "|Buckwheat | ||
|} | |} | ||
< | <span>Here is the coding</span> | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New" | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | ||
====Quick Quiz==== | <nowiki><table style="</nowiki><font color="red">border:5px dotted black; width:600px; border-spacing:5px</font color>"><br> | ||
<nowiki><tr></nowiki><br> | |||
<nowiki><th style="</nowiki>border:1px solid blue; text-align:center; <font color="red">padding:5px; background-color:lightblue</font color>">Fruits<nowiki></th></nowiki><br> | |||
<nowiki><th style="</nowiki>border:1px solid blue; text-align:center; <font color="red">padding:5px; background-color:lightblue</font color>">Vegetable<nowiki></th></nowiki><br> | |||
<nowiki><th style="</nowiki>border:1px solid blue; text-align:center; <font color="red">padding:5px; background-color:lightblue</font color>">Nuts<nowiki></th></nowiki><br> | |||
<nowiki><th style="</nowiki>border:1px solid blue; text-align:center; <font color="red">padding:5px; background-color:lightblue</font color>">Grains<nowiki></th></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Apples<nowiki></td></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Peas<nowiki></td></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Peanuts<nowiki></td></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Wheat<nowiki></td></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Pears<nowiki></td></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Carrots<nowiki></td></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Walnuts<nowiki></td></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Oats<nowiki></td></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Cherries<nowiki></td></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Corn<nowiki></td></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Cashews<nowiki></td></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Barley<nowiki></td></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Orange<nowiki></td></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Beans<nowiki></td></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Almonds<nowiki></td></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid blue</font color>">Buckwheat<nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki></table></nowiki></div> | |||
</div> | |||
====Quick Quiz==== | |||
<div style="border:10px solid lightgray; padding:5px; "> | <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 | |||
*Padding attribute only pads on the left side of the text | *Padding attribute only pads on the left side of the text | ||
:B. False | |||
*The header font cannot be changed | *The header font cannot be changed | ||
:B. False | |||
</div> | </div> | ||
[[Help:Wiki University HTML-- Tables - Cells|Back to Tables - Rows]] | [[Help:Wiki University HTML-- Tables - Cells|Back to Tables - Rows]] | ||
==Tables - Rows== | ==Tables - Rows== | ||
====Exercises==== | ====Exercises==== | ||
| Line 1,054: | Line 1,081: | ||
Here's the coding: | Here's the coding: | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki> | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | ||
<nowiki><table style="</nowiki><font color="red">border:10px groove yellow; width:700px</font color>"><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><th style="</nowiki><font color="red">border:1px solid blue; background-color:lightblue; color:white</font color>">Fruits<nowiki></th></nowiki><br> | |||
<th style="<font color="red">border:1px solid blue; background-color:lightblue; color:white</font color>">Vegetable<nowiki></th></nowiki><br> | |||
<th style="<font color="red">border:1px solid blue; background-color:lightblue; color:white</font color>">Nuts<nowiki></th></nowiki><br> | |||
<th style="<font color="red">border:1px solid blue; background-color:lightblue; color:white</font color>">Grains<nowiki></th></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td>Apples</td></nowiki><br> | |||
<nowiki><td>Peas</td></nowiki><br> | |||
<nowiki><td>Peanuts</td></nowiki><br> | |||
<nowiki><td>Wheat</td></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><td>Pears</td></nowiki><br> | |||
<nowiki><td>Carrots</td></nowiki><br> | |||
<nowiki><td>Walnuts</td></nowiki><br> | |||
<nowiki><td>Oats</td></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><td>Cherries</td></nowiki><br> | |||
<nowiki><td>Corn</td></nowiki><br> | |||
<nowiki><td>Cashews</td></nowiki><br> | |||
<nowiki><td>Barley</td></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
</div> | <nowiki></tr></nowiki><br> | ||
<nowiki><td>Orange</td></nowiki><br> | |||
<nowiki><td>Beans</td></nowiki><br> | |||
<nowiki><td>Almonds</td></nowiki><br> | |||
<nowiki><td>Buckwheat</td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki></table></nowiki></div> | |||
</div> | |||
====Quick Quiz==== | ====Quick Quiz==== | ||
<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 | |||
*Background color cannot be placed in cells through coding in row | *Background color cannot be placed in cells through coding in row | ||
:B. False | |||
*You can change the font-family in the rows | *You can change the font-family in the rows | ||
: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,129: | Line 1,163: | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.<br><br> | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.<br><br> | ||
Here is the coding in the beginning table tag: | Here is the coding in the beginning table tag: | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki> | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | ||
<nowiki><table style="border:1px solid red; width:50%;</nowiki><font color="red"> float:right; margin-left:10px</font color>"></div> | |||
</div> | </div> | ||
| Line 1,135: | 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 | |||
*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 | |||
*You cannot place a table in the middle of the page. | *You cannot place a table in the middle of the page. | ||
:B. False | |||
</div> | </div> | ||
[[Help:Wiki University HTML-- Tables - Placement|Back to Tables - Placement]] | [[Help:Wiki University HTML-- Tables - Placement|Back to Tables - Placement]] | ||
==Tables - Sorting== | ==Tables - Sorting== | ||
====Exercises==== | ====Exercises==== | ||
| Line 1,181: | Line 1,217: | ||
|} | |} | ||
Here is the coding: | Here is the coding: | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New" | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | ||
====Quick Quiz==== | <nowiki><table </nowiki><font color="red">class="sortable" </font color><nowiki>style="border:1px solid red; width:100%</nowiki>"><br> | ||
<div style="border:10px solid lightgray; padding:5px; "> | <nowiki><tr></nowiki><br> | ||
*When you click the sorting icon, the sorting is permanent. | <nowiki><th>Fruits</th></nowiki><br> | ||
<nowiki><th>Vegetable</th></nowiki><br> | |||
<nowiki><th>Nuts</th></nowiki><br> | |||
<nowiki><th>Grains</th></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td>Apples</td></nowiki><br> | |||
<nowiki><td>Peas</td></nowiki><br> | |||
<nowiki><td>Peanuts</td></nowiki><br> | |||
<nowiki><td>Wheat</td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td>Pears</td></nowiki><br> | |||
<nowiki><td>Carrots</td></nowiki><br> | |||
<nowiki><td>Walnuts</td></nowiki><br> | |||
<nowiki><td>Oats</td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td>Cherries</td></nowiki><br> | |||
<nowiki><td>Corn</td></nowiki><br> | |||
<nowiki><td>Cashews</td></nowiki><br> | |||
<nowiki><td>Barley</td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<font color="red"><nowiki><tr></nowiki></font color><br> | |||
<font color="red"><nowiki><td>Orange</td></nowiki></font color><br> | |||
<font color="red"><nowiki><td>Beans</td></nowiki></font color><br> | |||
<font color="red"><nowiki><td>Almonds</td></nowiki></font color><br> | |||
<font color="red"><nowiki><td>Buckwheat</td></nowiki></font color><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki></table></nowiki></div> | |||
</div> | |||
====Quick Quiz==== | |||
<div style="border:10px solid lightgray; padding:5px; "> | |||
*When you click the sorting icon, the sorting is permanent. | |||
:B. False | |||
*When you add items to a table, you need to insert the item in the table where it is supposed to go if you want your table in alphabetical order even with the sorting class applied. | *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. | *Sorting will revert back to the original order if you leave the page the table is on. | ||
:A. True | |||
</div> | </div> | ||
[[Help:Wiki University HTML-- Tables - Sorting|Back to Tables - Sorting]] | [[Help:Wiki University HTML-- Tables - Sorting|Back to Tables - Sorting]] | ||
==Tables - Scrolling== | ==Tables - Scrolling== | ||
====Exercises==== | ====Exercises==== | ||
| Line 1,262: | Line 1,299: | ||
|} | |} | ||
</div><br> | </div><br> | ||
< | <span>Here is the coding:</span> | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><div style="overflow:scroll; width:400px; height:400px; "></nowiki></font color><br> | <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> | <nowiki><table style="border:1px solid red; width:900px; height:900px"></nowiki><br> | ||
<nowiki><tr></nowiki><br> | |||
<nowiki><th></nowiki>Fruits<br> | |||
.<br> | .<br> | ||
.<br> | .<br> | ||
.<br> | .<br> | ||
.<br> | .<br> | ||
<nowiki></table></nowiki><br> | |||
<font color="red"><nowiki></div></nowiki></font color></div> | <font color="red"><nowiki></div></nowiki></font color></div> | ||
</div> | </div> | ||
| Line 1,278: | 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 | |||
*Vertically scroll bars are only useful for very tall tables. | *Vertically scroll bars are only useful for very tall tables. | ||
: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 | |||
</div> | </div> | ||
| Line 1,319: | Line 1,356: | ||
|} | |} | ||
*Here is the coding: | *Here is the coding: | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki> | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | ||
<nowiki><table></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td style="</nowiki>width:20%; background-color:lightblue; padding:5px; border-right:1px solid black"><br> | |||
Adair <nowiki><br></nowiki><br> | Adair <nowiki><br></nowiki><br> | ||
Andrew <nowiki><br></nowiki><br> | Andrew<nowiki><br></nowiki><br> | ||
Atchison <nowiki><br></nowiki><br> | Atchison<nowiki><br></nowiki><br> | ||
Audrain <br> | Audrain <nowiki><br></nowiki><br> | ||
<nowiki></td></nowiki><br> | |||
Barry <nowiki><br></nowiki><br> | <nowiki><td style="</nowiki>width:20%; background-color:lightgray; padding:5px; border-right:1px solid black"><br> | ||
Barry<nowiki><br></nowiki><br> | |||
Barton <nowiki><br></nowiki><br> | Barton <nowiki><br></nowiki><br> | ||
Bates <nowiki><br></nowiki><br> | Bates <nowiki><br></nowiki><br> | ||
Benton <br> | Benton <nowiki><br></nowiki><br> | ||
<nowiki></td></nowiki><br> | |||
<nowiki><td style="</nowiki>width:20%; background-color:lightblue; padding:5px; border-right:1px solid black"><br> | |||
Bollinger <nowiki><br></nowiki><br> | Bollinger <nowiki><br></nowiki><br> | ||
Boone <nowiki><br></nowiki><br> | Boone <nowiki><br></nowiki><br> | ||
Buchanan <nowiki><br></nowiki><br> | Buchanan <nowiki><br></nowiki><br> | ||
Butler <br> | Butler <nowiki><br></nowiki><br> | ||
<nowiki></td></nowiki><br> | |||
<nowiki><td style="</nowiki>width:20%; background-color:lightgray; padding:5px; border-right:1px solid black"><br> | |||
Caldwell <nowiki><br></nowiki><br> | Caldwell <nowiki><br></nowiki><br> | ||
Callaway <nowiki><br></nowiki><br> | Callaway <nowiki><br></nowiki><br> | ||
Camden <nowiki><br></nowiki><br> | Camden <nowiki><br></nowiki><br> | ||
Cape Girardeau <br> | Cape Girardeau <nowiki><br></nowiki><br> | ||
<nowiki></td></nowiki><br> | |||
<nowiki><td style="</nowiki>width:20%; background-color:lightblue; padding:5px"> | |||
Carroll <nowiki><br></nowiki><br> | Carroll <nowiki><br></nowiki><br> | ||
Carter <nowiki><br></nowiki><br> | Carter <nowiki><br></nowiki><br> | ||
Cass <nowiki><br></nowiki><br> | Cass <nowiki><br></nowiki><br> | ||
Cedar <br> | Cedar <nowiki><br></nowiki><br> | ||
<nowiki> | <nowiki></td></nowiki><br> | ||
<nowiki></tr></nowiki><br> | |||
<nowiki></table></nowiki></div> | |||
</div> | </div> | ||
| Line 1,353: | 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 | |||
*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 | |||
*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> | |||
[[Help:Wiki University HTML-- Tables - Columns Only|Back to Tables - Columns Only]] | [[Help:Wiki University HTML-- Tables - Columns Only|Back to Tables - Columns Only]] | ||
== | ==Tables - Column Spans== | ||
====Exercises==== | ====Exercises==== | ||
*Merge all the cells in the second row. | |||
* | *Merge the first three cells in the fourth row. | ||
<div style="border:10px solid lightgreen; padding:5px"> | |||
* | |||
<div style="border: | |||
= | {| style="border:1px solid red; width:100%" | ||
|- | |||
! style="border:1px solid red; width:25%" | Fruits | |||
:: | ! style="border:1px solid red; width:25%" | Vegetable | ||
! style="border:1px solid red; width:25%" | Nuts | |||
:: | ! style="border:1px solid red; width:25%" | Grains | ||
|- | |||
:: | | colspan="4" style="border:1px solid red" | Apples | ||
|- | |||
| style="border:1px solid red" | Pears | |||
| style="border:1px solid red" | Carrots | |||
== | | style="border:1px solid red" | Walnuts | ||
=== | | style="border:1px solid red" | Oats | ||
|- | |||
| style="border:1px solid red" | Cherries | |||
| style="border:1px solid red" | Corn | |||
| style="border:1px solid red" | Cashews | |||
| style="border:1px solid red" | Barley | |||
|- | |||
| colspan="3" style="border:1px solid red" | Orange | |||
| style="border:1px solid red" | Beans | |||
|} | |||
<span>Here is the coding</span> | |||
Here is the coding | |||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | ||
<nowiki><table style="border:1px solid red; width:100%"></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><th style="border:1px solid red; width:25%">Fruits</th></nowiki><br> | |||
<nowiki><th style="border:1px solid red; width:25%">Vegetable</th></nowiki><br> | |||
<nowiki><th style="border:1px solid red; width:25%">Nuts</th></nowiki><br> | |||
<nowiki><th style="border:1px solid red; width:25%">Grains</th></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<font color="red"><nowiki><td colspan="4" </nowiki></font color>style="border:1px solid red">Apples<nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td style="border:1px solid red">Pears</td></nowiki><br> | |||
<nowiki><td style="border:1px solid red">Carrots</td></nowiki><br> | |||
<nowiki><td style="border:1px solid red">Walnuts</td></nowiki><br> | |||
<nowiki><td style="border:1px solid red">Oats</td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><td style="border:1px solid red">Cherries</td></nowiki><br> | |||
<nowiki><td style="border:1px solid red">Corn</td></nowiki><br> | |||
<nowiki><td style="border:1px solid red">Cashews</td></nowiki><br> | |||
<nowiki><td style="border:1px solid red">Barley</td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<font color="red"><nowiki><td colspan="3" </nowiki></font color>style="border:1px solid red">Orange<nowiki></td></nowiki><br> | |||
<nowiki><td style="border:1px solid red">Beans</td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki></table></nowiki> | |||
</div> | </div> | ||
</div> | </div> | ||
====Quick Quiz==== | ====Quick Quiz==== | ||
<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. | ||
: | :A. True | ||
* | *If you have a row with four cells you can have in the preceding row one cell with a colspan="3" plus the remaining cell. | ||
: | :A. True | ||
* | *If you have a row of seven cells you can have in the preceding row one cell with a colspan="2", the next cell with a colspan="3" and the remaining cell with a colspan="2". | ||
: | :A. True | ||
</div> | </div> | ||
[[ | [[Help:Wiki University HTML-- Tables - Columns Only|Back to Tables - Column Spans]] | ||
== | ==Tables - Row Spans== | ||
====Exercises==== | ====Exercises==== | ||
<div style="border:10px solid lightgreen; padding:5px; "> | <div style="border:10px solid lightgreen; padding:5px; "> | ||
* | *Merge the cells with Barley and Buckwheat in them. | ||
< | *Merge the cells with Peas, Carrots and Corn in them. | ||
<span>Here is what the table should look like:</span> | |||
{| style="border:1px solid red; width:100%; " | |||
|+ style="font-size:14px; text-align:center; " | Healthy Foods | |||
|- | |||
! style="width:25%; text-align:center; border:1px solid red; " | Fruits | |||
! style="width:25%; text-align:center; border:1px solid red; " | Vegetable | |||
! style="width:25%; text-align:center; border:1px solid red; " | Nuts | |||
! style="width:25%; text-align:center; border:1px solid red; " | Grains | |||
| | |||
! style=" | |||
! style="border:1px solid red; | |||
! style="border:1px solid red; | |||
|- | |- | ||
| | | style="width:25%; border:1px solid red" | Apples | ||
| rowspan="3" style="border:1px solid red"| Peas | |||
| style="width:25%; border:1px solid red"| Peanuts | |||
| style="width:25%; border:1px solid red" | Wheat | |||
|- | |- | ||
| style="border:1px solid red" | Pears | | style="width:25%; border:1px solid red; " | Pears | ||
| style=" | | style="width:25%; border:1px solid red; " | Walnuts | ||
| style="width:25%; border:1px solid red; " | Oats | |||
| style="border:1px solid red" | Oats | |||
|- | |- | ||
| style="border:1px solid red" | Cherries | | style="width:25%; border:1px solid red; " | Cherries | ||
| style="border:1px solid red" | | | style="width:25%; border:1px solid red; " | Cashews | ||
| | | rowspan="2" style="width:25%; border:1px solid red " | Barley | ||
|- | |- | ||
| | | style="width:25%; border:1px solid red; " | Orange | ||
| style="border:1px solid red" | Beans | | style="border:1px solid red" | Beans | ||
| style="width:25%; border:1px solid red; " | Almonds | |||
|} | |} | ||
<span>Here is the coding:</span> | |||
< | |||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | ||
<nowiki> | <nowiki><table style="border:1px solid red; width:100%"></nowiki><br> | ||
<nowiki><caption style="font-size:14px; text-align:center">Healthy Foods</caption></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><th style="border:1px solid red; text-align:center; width:25%">Fruits</th></nowiki><br> | |||
<nowiki><th style="border:1px solid red; text-align:center; width:25%">Vegetable</th></nowiki><br> | |||
<nowiki><th style="border:1px solid red; text-align:center; width:25%">Nuts</th></nowiki><br> | |||
<nowiki><th style="border:1px solid red; text-align:center; width:25%">Grains</th></nowiki><br> | |||
< | <nowiki></tr></nowiki><br> | ||
<nowiki><tr></nowiki><br> | |||
<nowiki><td style="border:1px solid red"></nowiki>Apples<nowiki></td></nowiki><br> | |||
<nowiki><td </nowiki><font color="red">rowspan="3" </font color><nowiki>style="border:1px solid red">Peas</nowiki><nowiki></td></nowiki><br> | |||
<nowiki><td style="border:1px solid red">Peanuts</nowiki><nowiki></td></nowiki><br> | |||
<nowiki><td style="border:1px solid red">Wheat</nowiki><nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td style="border:1px solid red">Pears</nowiki><nowiki></td></nowiki><br> | |||
<nowiki><td style="border:1px solid red">Walnuts</nowiki><nowiki></td></nowiki><br> | |||
<nowiki><td style="border:1px solid red">Oats</nowiki><nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
< | <nowiki><tr></nowiki><br> | ||
<nowiki><td style="border:1px solid red">Cherries</nowiki><nowiki></td></nowiki><br> | |||
<nowiki><td style="border:1px solid red">Cashews</nowiki><nowiki></td></nowiki><br> | |||
<nowiki><td </nowiki><font color="red">rowspan="2"</font color> style="border:1px solid red">Barley<nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td style="border:1px solid red">Orange</nowiki><nowiki></td></nowiki><br> | |||
<nowiki><td style="border:1px solid red">Beans</nowiki><nowiki></td></nowiki><br> | |||
<nowiki><td style="border:1px solid red">Almonds</nowiki><nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki></table></nowiki> | |||
</div> | </div> | ||
</div> | </div> | ||
| Line 1,514: | Line 1,547: | ||
====Quick Quiz==== | ====Quick Quiz==== | ||
<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. | ||
: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 | |||
*If you | |||
: | |||
</div> | </div> | ||
[[Help:Wiki University HTML-- Tables - | [[Help:Wiki University HTML-- Tables - Row Spans|Back to Table - Row Spans]] | ||
== | |||
==Infobox - Creating== | |||
====Exercises==== | ====Exercises==== | ||
<div style="border:10px solid lightgreen; padding:5px; "> | <div style="border:10px solid lightgreen; padding:5px; "> | ||
* | *Add a border around the infobox, limit the width to 190 pixels and place it on the right side of the page. | ||
* | *Add borders around each of the cells. | ||
< | *Have the cells containing the words organization and image span both columns. | ||
*Center the name of the organization and the image in their cells. | |||
*Make the items in the right hand cells into parameters. | |||
<span>Your coding should look like this:</span> | |||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | |||
<nowiki><table style="</nowiki><font color="red">border:1px solid black; width:190px; float:right</font color>"><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td colspan="2" style="</nowiki><font color="red">border:1px solid black; text-align:center</font color>">organization<nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td colspan="2" style="</nowiki><font color="red">border:1px solid black; text-align:center</font color>">image<nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid black</font color>">President:<nowiki></td></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid black</font color>"><nowiki>{{{president</nowiki><font color="red">|President's name</font color>}}}<nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid black</font color>">Address:<nowiki></td></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid black</font color>"><nowiki>{{{address</nowiki><font color="red">|Address</font color>}}}<nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid black</font color>">Phone:<nowiki></td></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid black</font color>"><nowiki>{{{phone</nowiki><font color="red">|Phone number</font color>}}}<nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid black</font color>">Hours Open:<nowiki></td></nowiki><br> | |||
<nowiki><td style="</nowiki><font color="red">border:1px solid black</font color>"><nowiki>{{{hours open</nowiki><font color="red">|Hours open</font color>}}}<nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki></table></nowiki></div> | |||
</div> | |||
====Quick Quiz==== | |||
<div style="border:10px solid lightgray; padding:5px; "> | |||
*Parameters have two opening and closing curly brackets surrounding them. | |||
:A. False | |||
*Infoboxes are usually located at the top of the page on the right side. | |||
:A. True | |||
*Infoboxes are saved just like other templates, but it is good practice to include the word "infobox" in the title. | |||
:A. True | |||
</div> | </div> | ||
[[Help:Wiki University HTML--Infobox - Creating|Back to Infobox - Creating]] | |||
==Infobox - Placing== | |||
====Exercises==== | |||
<div style="border:10px solid lightgreen; padding:5px; "> | |||
<div style="clear:both"></div> | |||
<span>Here is the coding:</span> | |||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | |||
<nowiki>{{Infobox U.S. County</nowiki><br> | |||
| county = Jackson<br> | |||
| county_map = Missouri Jackson County Map.svg.png<br> | |||
| state = Missouri<br> | |||
| state_map = Missouri.png<br> | |||
| founded year = 1826<br> | |||
| founded date = December 15 <br> | |||
| seat wl = Independence<br> | |||
}} </div><br> | |||
*<font color="blue"><b>NOTICE</b></font color> the image did not require the brackets as this was built into this particular infobox. | |||
</div> | </div> | ||
====Quick Quiz==== | ====Quick Quiz==== | ||
<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. | ||
:: | ::B. False | ||
* | *Infoboxes can only be used on county pages. | ||
::B. False | |||
*Infoboxes are limited just to genealogical organizations. | |||
::B. False | ::B. False | ||
</div> | </div> | ||
[[Help:Wiki University HTML-- | [[Help:Wiki University HTML--Infobox - Placing|Back to Infobox - Placing]] | ||
---- | |||
== | ==If functions== | ||
====Exercises==== | ====Exercises==== | ||
<div style="border:10px solid lightgreen; padding:5px; "> | <div style="border:10px solid lightgreen; padding:5px; "> | ||
<div style="clear:both"></div> | |||
<span>Here is the coding:</span> | |||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | |||
< | <nowiki><table class="infobox" style="width:200px; "></nowiki><br> | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki> | <nowiki><tr></nowiki><br> | ||
<nowiki><td colspan="2">{{{organization}}}</nowiki><br> | |||
<nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
| colspan="2" | <nowiki><tr></nowiki><br> | ||
<font color="red"><nowiki>{{#if:{{{image|}}}|</nowiki></font color><nowiki><td colspan="2">{{{</nowiki>image}}}<font color="red">}}</font color><br> | |||
<nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<font color="red"><nowiki>{{#if:{{{president|}}}|</nowiki></font color><nowiki><td>President:</td></nowiki><br> | |||
<nowiki><td>{{{president}}}</nowiki><font color="red">}}</font color><br><nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<font color="red"><nowiki>{{#if:{{{address|}}}|</nowiki></font color><nowiki><td>Address:</td></nowiki><br> | |||
<nowiki><td>{{{address}}}</nowiki><font color="red">}}</font color><br><nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<font color="red"><nowiki>{{#if:{{{phone|}}}|</nowiki></font color><nowiki><td>Phone:</td></nowiki><br> | |||
</div> | <nowiki><td>{{{phone}}}</nowiki><font color="red">}}</font color><br><nowiki></td></nowiki><br> | ||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<font color="red"><nowiki>{{#if:{{{hours open|}}}|</nowiki></font color><nowiki><td>Hours Open:</td></nowiki><br> | |||
<nowiki><td>{{{hours open}}}</nowiki><font color="red">}}</font color><br><nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki></table></nowiki> | |||
</div> | |||
</div> | |||
====Quick Quiz==== | ====Quick Quiz==== | ||
<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. | ||
:: | ::B. False | ||
* | *The "If function" allows you to create more complete infoboxes, but you do have to worry about them being too large and take up a lot of space if the subject to be posted in the infobox is small. | ||
:: | ::B. False | ||
* | *It does not matter whether you use regular pipes or <nowiki>{{!}}</nowiki> in infoboxes with if functions. | ||
:: | ::B. False | ||
</div> | </div> | ||
[[Help:Wiki University HTML--Infobox - | [[Help:Wiki University HTML--Infobox - If functions|Back to If functions]] | ||
---- | |||
== | ==Sidebars== | ||
====Exercises==== | ====Exercises==== | ||
<div style="border:10px solid lightgreen; padding:5px; "> | <div style="border:10px solid lightgreen; padding:5px; "> | ||
<div style="clear:both"></div> | <div style="clear:both"></div> | ||
< | <span>Here is the coding:</span> | ||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | <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,648: | Line 1,696: | ||
| founded date = December 15 <br> | | founded date = December 15 <br> | ||
| seat wl = Independence<br> | | seat wl = Independence<br> | ||
}} </div | }} </div> | ||
*<font color="blue"><b>NOTICE</b></font color> the images did not require the brackets as this was built into the infobox. | *<font color="blue"><b>NOTICE</b></font color> the images did not require the brackets as this was built into the infobox. | ||
</div> | </div> | ||
====Quick Quiz==== | ====Quick Quiz==== | ||
<div style="border:10px solid lightgray; padding:5px; "> | <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 | |||
*Infoboxes can only be used on county pages. | *Infoboxes can only be used on county pages. | ||
:B. False | |||
*Infoboxes are limited just to genealogical organizations. | *Infoboxes are limited just to genealogical organizations. | ||
:B. False | |||
</div> | </div> | ||
[[Help:Wiki University HTML-- | [[Help:Wiki University HTML--Sidebars|Back to Sibebars]] | ||
---- | ---- | ||
== | |||
==Navboxes== | |||
====Exercises==== | ====Exercises==== | ||
<div style="border:10px solid lightgreen; padding:5px; "> | <div style="border:10px solid lightgreen; padding:5px; "> | ||
*Create a navbox using the above format. | |||
< | *For topics use the first 5 topics from the [[Germany_Genealogy|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. | |||
<span>Here's what it should look like:</span> | |||
{| style="width:100%; border:1px solid black; border-collaspe:separate; border-spacing:5px; " | |||
|- | |||
| colspan="2" style="background-color:lightgray; text-align:center; " | Links to '''Germany''' - 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]] | |||
|} | |||
<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>{| | <nowiki>{| style="width:100%; border:1px solid black; border-collaspe:separate; border-spacing:5px; "</nowiki><br> | ||
|- <br> | |||
| colspan="2" style="background-color:lightgray; text-align:center; " | Links to <nowiki>'''{{{Country}}}'''</nowiki> - related articles<br> | |||
|-<br> | |||
| style="background-color:lightgray; width:20% ; vertical-align:middle; " | Topics<br> | |||
| style="background-color:lightblue; " | <nowiki>[[Germany Archives and Libraries|Archives and Libraries]]{{·}} [[Germany Biography|Biography]]{{·}} [[Germany Cemeteries|Cemeteries]]{{·}} [[Germany Census|Census]]{{·}} [[Germany Church Directories|Church Directories]]</nowiki> <br> | |||
|-<br> | |||
| style="background-color:lightgray; width:20% ; vertical-align:middle; " | Counties<br> | |||
| style="background-color:lightblue; " |<nowiki> [[Anhalt - Herzogtum (duchy) Genealogy|Anhalt]]{{·}} [[Baden Grossherzogtum (grand duchy) Genealogy|Baden]]{{·}} [[Bayern (Bavaria) – Königreich (kingdom) Genealogy|Bayern]]{{·}} [[Braunschweig (Brunswick) – Herzogtum (duchy) Genealogy|Braunschweig]]{{·}} [[Bremen, Germany Genealogy|Bremen]]</nowiki><br> | |||
|}</div> | |||
</div> | |||
</div> | </div> | ||
====Quick Quiz==== | ====Quick Quiz==== | ||
<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. | ||
::A. True | |||
*Navboxes are usually placed at the top of the page. | |||
::B. False | ::B. False | ||
* | *Navboxes are limited to less than 200 pixels in width. | ||
::B. False | ::B. False | ||
</div> | </div> | ||
[[Help:Wiki University HTML-- | [[Help:Wiki University HTML--Navboxes|Back to Navboxes]] | ||
==Position - Relative== | |||
====Exercises==== | |||
<div style="border:10px solid lightgreen; padding:5px;"> | |||
*Place a "relative" positioned object that is 300 pixels wide and 100 pixels high between the third and fourth sentence of our Lorem ipsum paragraph. | |||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<div style="position:relative; width:300px; height:100px"></div> Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.<br><br> | |||
<span>Here is the coding:</span> | |||
<div style="border:2px solid crimson; background-color:moccasinpadding:10px; width:97%; font-size:10pt; font-family:Courier New">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<font color="red"><nowiki><div style="position:relative;</nowiki></font color><font color="red"> width:300px; height:100px"></font color><font color="red"><nowiki></div></nowiki></font color>Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</div> | |||
---- | ---- | ||
*Place a "relative" positioned object after the last sentence that has the following attributes: | |||
**width is 100%. | |||
**background-color:blue. | |||
**border 5 pixels thick and red in color. | |||
**that is 200 pixels high. | |||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.<div style="position:relative; width 100%; height:200px; background-color:blue; border:5px solid red"></div><br> | |||
<span>Here is the coding:</span> | |||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | |||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.<font color="red"><nowiki><div style="position:relative;</nowiki></font color><font color="red"> width:100%; height:200px; background-color:blue; border:5px solid red"></font color><font color="red"><nowiki></div></nowiki></font color></div> | |||
</div> | |||
====Quick Quiz==== | |||
<div style="border:10px solid lightgray; padding:5px; "> | |||
*Relative positioning places objects in relation to the edge and top of the page. | |||
====Quick Quiz==== | |||
<div style="border:10px solid lightgray; padding:5px; "> | |||
* | |||
::B. False | ::B. False | ||
* | *Relative positioning does not cover objects placed before it was. | ||
::B. False | ::B. False | ||
* | *Relative positioning covers up all objects covered after it was placed. | ||
::B. False | ::B. False | ||
</div> | </div> | ||
[[Help:Wiki University HTML-- | [[Help:Wiki University HTML-- Position - Relative|Back to Position - Relative]] | ||
==Position - Absolute== | |||
== | |||
====Exercises==== | ====Exercises==== | ||
<div style="border:10px solid lightgreen; padding:5px; "> | <div style="border:10px solid lightgreen; padding:5px;"> | ||
1. Make this object <font color="red"><nowiki><div style="width:200px; height:75px; border:2px solid green; background-color:orange; "></nowiki></font color> an absolute positioned object 0 pixels from the left and 0 pixels from the top to appear '''inside''' a relative positioned object with width of 300 pixels, height of 200 pixels and a red border one pixel thick. | |||
<div style="position:relative; border:1px solid red; width:400px; height:200px; "><div style="position:absolute; left:0px; top:0px; width:200px; height:75px; border:2px solid green; background-color:orange; "> | |||
</div></div><br> | |||
< | |||
Here is the coding:<br> | |||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><div style="</nowiki></font color>position:relative; border:1px solid red; width:400px; height:200px; "><br><font color="blue"><nowiki><div style="</nowiki></font color>position:absolute; left:0px; top:0px; width:200px; height:75px; border:2px solid green; background-color:orange; "> | |||
<font color="blue"><nowiki></div></nowiki></font color><br><font color="red"><nowiki></div></nowiki></font color></div><br> | |||
2. Take your answer above and move the '''relative''' object with the '''absolute''' object inside 150 pixel to the left and 50 pixel from the top: | |||
<div style="position:relative; left:150px; top:50px; border:1px solid red; width:400px; height:200px; "><div style="width:200px; height:75px; border:2px solid green; background-color:orange; "> | |||
</div></div><br><br><br><br> | |||
Here is the coding:<br> | |||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | |||
<nowiki><div style="position:relative; </nowiki><font color="red"> left:150px; top:50px;</font color><nowiki>border:1px solid red; width:400px; height:200px; "></nowiki><br><nowiki><div style="position:absolute; left:0px; top:0px; width:200px; height:75px; border:2px solid green; background-color:orange; "></nowiki> | |||
< | <nowiki></div></nowiki><br> | ||
<nowiki></div></nowiki> | |||
</div><br> | |||
3. Take your answer from no. 2 and move the '''absolute''' object inside the '''relative''' object 150px to the left and down 25px from the top. | |||
<div style="position:relative; left:150px; top:25px; border:1px solid red; width:400px; height:200px; "><div style="position:absolute; left:150px; top:50px; width:200px; height:75px; border:2px solid green; background-color:orange; "> | |||
</div></div><br><br> | |||
Here is the coding:<br> | |||
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | ||
<nowiki> | <nowiki><div style="position:relative; </nowiki><font color="red"> left:150px; top:50px;</font color><nowiki>border:1px solid red; width:400px; height:200px; "></nowiki><br><nowiki><div style="position:absolute; </nowiki><font color="red">left:150px; top:50px;</font color><nowiki>width:200px; height:75px; border:2px solid green; background-color:orange; "></nowiki> | ||
<nowiki></div></nowiki><br> | |||
<nowiki></div></nowiki> | |||
</div> | |||
</div> | </div> | ||
====Quick Quiz==== | ====Quick Quiz==== | ||
<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. | ||
::A. True | ::A. True | ||
* | *Absolute positioning does not cover objects placed before it was. | ||
::B. False | ::B. False | ||
*Absolute positioning covers up all objects that follow it. | |||
::A. True | |||
</div> | </div> | ||
[[Help:Wiki University HTML-- | [[Help:Wiki University HTML-- Position - Absolute|Back to Position - Absolute]] | ||
== | ==Tabs== | ||
====Exercises==== | ====Exercises==== | ||
<div style="border:10px solid lightgreen; padding:5px;"> | <div style="border:10px solid lightgreen; padding:5px; "> | ||
<ul style="list-style-type:none"> | |||
<li style="float:left; | |||
border:1px solid red; | |||
border-top-left-radius:5px; | |||
---- | border-top-right-radius:5px; | ||
width:130px; | |||
margin-right:10px; | |||
background-color:#ffe6ea;">[[HTML and Wikitext - Lesson One]]</li> | |||
<li style="float:left; | |||
border:1px solid red; | |||
border-top-left-radius:5px; | |||
border-top-right-radius:5px; | |||
< | width:130px; | ||
margin-right:10px; | |||
</ | background-color:#ffe6ea; ">[[HTML and Wikitext - Lesson Two]]</li> | ||
<li style="float:left; | |||
border:1px solid red; | |||
< | border-top-left-radius:5px; | ||
border-top-right-radius:5px; | |||
:: | width:130px; | ||
margin-right:10px; | |||
: | background-color:#ffe6ea;">[[HTML and Wikitext - Lesson Three]]</li> | ||
<li style="float:left; | |||
border:1px solid red; | |||
border-top-left-radius:5px; | |||
border-top-right-radius:5px; | |||
width:130px; | |||
margin-right:10px; | |||
background-color:#ffe6ea;">[[HTML and Wikitext - Lesson Four]]</li> | |||
</ul><br><br> | |||
*Here's the coding for the first tab: | |||
<font color="green"><nowiki><ul</nowiki></font> <font color="blue">style=</font><font color="red">"list-style-type:none"</font><font color="green">></font><br> | |||
<font color="green"><nowiki><li</nowiki></font> <font color="blue">style=</font><font color="red">"float:left;<br> | |||
border:1px solid red;<br> | |||
border-top-left-radius:5px;<br> | |||
border-top-right-radius:5px;<br> | |||
width:130px;<br> | |||
margin-right:10px;<br> | |||
background-color:#ffe6ea;"</font><font color="green">></font>[[HTML and Wikitext - Lesson One]]<font color="green"><nowiki></li></nowiki></font> | |||
</div> | </div> | ||
[[Help:Wiki University HTML-- | [[Help:Wiki University HTML--Tabs|Back to Tabs]] | ||
== | ==Misc== | ||
====Quick Quiz==== | |||
====Quick Quiz==== | |||
<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> | ||
:A. True | |||
* | *To recover something you may have deleted accidentally, you would hit the control key and the D key. | ||
:B. False ''(Control + Z)'' | |||
* | *To search for a word in an article, you would hit the control key and the S key. | ||
: | :B. False ''(Control + F)'' | ||
*To highlight an entire page, you would bit the Control and W key | |||
:B. False ''(Control + A)'' | |||
*If you want exhibit code in an article, you would use opening and closing noinclude tags. | |||
:B. False ''(<nowiki><nowiki> ..... </nowiki></nowiki>)'' | |||
</div> | </div> | ||
[[Help:Wiki University HTML-- | [[Help:Wiki University HTML-- Misc|Back to Misc]] | ||
[[Category:HTML Lessons]] | [[Category:HTML Lessons]] | ||
edits