|
|
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 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 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 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 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 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 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 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 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 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,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,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,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,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,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,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,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,718: |
Line 1,718: |
| *For Counties use the first 5 counties from the [[Anhalt_-_Herzogtum_(duchy)]] navbox at the bottom of the page. | | *For Counties use the first 5 counties from the [[Anhalt_-_Herzogtum_(duchy)]] navbox at the bottom of the page. |
| *Change the parameter to country. | | *Change the parameter to country. |
| <p>Here's what it should look like:</p> | | <span>Here's what it should look like:</span> |
| {| style="width:100%; border:1px solid black; border-collaspe:separate; border-spacing:5px; " | | {| style="width:100%; border:1px solid black; border-collaspe:separate; border-spacing:5px; " |
| |- | | |- |
Line 1,729: |
Line 1,729: |
| | style="background-color:lightblue; " | [[Anhalt - Herzogtum (duchy) Genealogy|Anhalt]]{{·}} [[Baden Grossherzogtum (grand duchy) Genealogy|Baden]]{{·}} [[Bayern (Bavaria) – Königreich (kingdom) Genealogy|Bayern]]{{·}} [[Braunschweig (Brunswick) – Herzogtum (duchy) Genealogy|Braunschweig]]{{·}} [[Bremen, Germany Genealogy|Bremen]] | | | style="background-color:lightblue; " | [[Anhalt - Herzogtum (duchy) Genealogy|Anhalt]]{{·}} [[Baden Grossherzogtum (grand duchy) Genealogy|Baden]]{{·}} [[Bayern (Bavaria) – Königreich (kingdom) Genealogy|Bayern]]{{·}} [[Braunschweig (Brunswick) – Herzogtum (duchy) Genealogy|Braunschweig]]{{·}} [[Bremen, Germany Genealogy|Bremen]] |
| |} | | |} |
| <p>Here's what the code should look like:</p> | | <span>Here's what the code should look like:</span> |
| <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> | | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> |
| <nowiki>{| style="width:100%; border:1px solid black; border-collaspe:separate; border-spacing:5px; "</nowiki><br> | | <nowiki>{| style="width:100%; border:1px solid black; border-collaspe:separate; border-spacing:5px; "</nowiki><br> |
Line 1,758: |
Line 1,758: |
| *Place a "relative" positioned object that is 300 pixels wide and 100 pixels high between the third and fourth sentence of our Lorem ipsum paragraph. | | *Place a "relative" positioned object that is 300 pixels wide and 100 pixels high between the third and fourth sentence of our Lorem ipsum paragraph. |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<div style="position:relative; width:300px; height:100px"></div> Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.<br><br> | | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<div style="position:relative; width:300px; height:100px"></div> Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.<br><br> |
| <p>Here is the coding:</p> | | <span>Here is the coding:</span> |
| <div style="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> |