Interface administrators, smwadministrator, smwcurator, smweditor
82,369
edits
FamilySearch HTML Tutorial Answers: Difference between revisions
FamilySearch HTML Tutorial Answers (view source)
Revision as of 12:29, 2 September 2015
, 2 September 2015no edit summary
m (→Exercises) |
mNo edit summary |
||
| Line 291: | Line 291: | ||
*Change the color of a header. | *Change the color of a header. | ||
<div style="background-color: | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><p style="color:Cornflowerblue"></nowiki></div><br><br> | ||
<div style="background-color: | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><p style="color:#5f9ea0"></nowiki></div><br><br> | ||
<div style="background-color: | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><h1 style="color:red">Header</h1></nowiki></div> | ||
</div> | </div> | ||
| Line 365: | Line 365: | ||
<div style="border:10px solid lightgreen; padding:5px; "> | <div style="border:10px solid lightgreen; padding:5px; "> | ||
*What is the coding to change the color of the background of the lorem ipsum paragraph to green and the text to orange. | *What is the coding to change the color of the background of the lorem ipsum paragraph to green and the text to orange. | ||
<div style="background-color: | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><p style="background-color:green; color:orange">lorem ipsum ....</p></nowiki></font color></div><br> | ||
<p style="background-color:green; color:orange">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</p><br> | <p style="background-color:green; color:orange">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</p><br> | ||
<div style="background-color: | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><p style="background-color:red; color:gold">lorem ipsum ....</p></nowiki></font color></div><br> | ||
<p style="background-color:red; color:gold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</p> | <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> | ||
| Line 386: | Line 386: | ||
1. What is the coding to install our lorem ipsum paragraph in your sandbox with a background color of light green with white text and padding on the top and bottom of 20 pixels. | 1. What is the coding to install our lorem ipsum paragraph in your sandbox with a background color of light green with white text and padding on the top and bottom of 20 pixels. | ||
<br> | <br> | ||
<div style="background-color: | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><p style="background-color:lightgreen; color:white; padding-top:20px; padding-bottom:20px">Lorem ipsum .....</p></nowiki></font color></div><br> | ||
---- | ---- | ||
2. Load our lorem ipsum paragraph twice with no background color and no text color but with a <font color="red">padding-bottom</font color> of the first paragraph of 100px. What happens to the space between the paragraphs?<br> | 2. Load our lorem ipsum paragraph twice with no background color and no text color but with a <font color="red">padding-bottom</font color> of the first paragraph of 100px. What happens to the space between the paragraphs?<br> | ||
<div style="background-color: | <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> | ||
<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> | <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> | ||
*It widens by over 100 pixels. | *It widens by over 100 pixels. | ||
| Line 407: | Line 407: | ||
*Load our lorem ipsum paragraphs twice with the first one with a background color of cornsilk and the second one with a color crimson, both with a padding of 20 pixels, but using div tags instead of paragraph tags: | *Load our lorem ipsum paragraphs twice with the first one with a background color of cornsilk and the second one with a color crimson, both with a padding of 20 pixels, but using div tags instead of paragraph tags: | ||
<div style="background-color: | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><div style="background-color:moccasin; padding:20px; "></nowiki></div> | ||
<div style="background-color: | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki><div style="background-color:crimson; padding:20px; "></nowiki></div><br> | ||
<div style="background-color:moccasin; padding:20px; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</div><br> | <div style="background-color:moccasin; padding:20px; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</div><br> | ||
| Line 429: | Line 429: | ||
<div style="border:10px solid lightgreen; padding:5px; "> | <div style="border:10px solid lightgreen; padding:5px; "> | ||
1. What is the coding to install our lorem ipsum paragraph in your sandbox with a background color of light green with white text and a margin on the bottom of 40 pixels. | 1. What is the coding to install our lorem ipsum paragraph in your sandbox with a background color of light green with white text and a margin on the bottom of 40 pixels. | ||
<div style="background-color: | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><div style="background-color:lightgreen; color:white; margin-bottom:40px">Lorem ipsum ....</div> </nowiki></font color></div><br> | ||
2. What is the coding to install our lorem Ipsum paragraph to you sandbox with a background color of light blue with white lext and a margin on the top of 20 pixels. | 2. What is the coding to install our lorem Ipsum paragraph to you sandbox with a background color of light blue with white lext and a margin on the top of 20 pixels. | ||
<div style="background-color: | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><div style="background-color:lightblue; color:white; margin-top:20px">Lorem ipsum ....</div> </nowiki></font color></div> | ||
</div> | </div> | ||
| Line 452: | Line 452: | ||
</div><br> | </div><br> | ||
*Here is the coding: | *Here is the coding: | ||
<div style="background-color: | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><div style="border:10px groove lightgreen">Lorem ipsum ...</div> </nowiki></font color></div><br> | ||
*Using a div tag put a border around our lorem ipsum paragraph of a "ridge" type that is 15 pixels thick with whatever color you like: | *Using a div tag put a border around our lorem ipsum paragraph of a "ridge" type that is 15 pixels thick with whatever color you like: | ||
<div style="border:15px ridge lightblue; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. | <div style="border:15px ridge lightblue; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. | ||
</div><br> | </div><br> | ||
*Here is the coding: | *Here is the coding: | ||
<div style="background-color: | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><div style="border:15px ridge lightgreen">Lorem ipsum ...</div> </nowiki></font color></div> | ||
</div> | </div> | ||
| Line 477: | Line 477: | ||
<div style="border:1px solid red; width:200px; height:400px; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</div><br> | <div style="border:1px solid red; width:200px; height:400px; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.</div><br> | ||
Here is the coding: | Here is the coding: | ||
<div style="background-color: | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><div style="border:1px solid red; width:200px; height:400px; "></nowiki></font color>Lorem ipsum ....<font color="red"><nowiki></div> </nowiki></font color></div> | ||
</div> | </div> | ||
| Line 493: | Line 493: | ||
<div style="border:10px solid lightgreen; padding:5px; "> | <div style="border:10px solid lightgreen; padding:5px; "> | ||
*Take this title: "I Love Wikitext" and put it on the center of the page.<br> | *Take this title: "I Love Wikitext" and put it on the center of the page.<br> | ||
<div style="background-color: | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><div style="text-align:center">I Love Wikitext</nowiki></font color><font color="red"><nowiki></div></nowiki></font color></div><br> | ||
*Take this title: "I Love Wikitext" and put it on the right side of the page.<br> | *Take this title: "I Love Wikitext" and put it on the right side of the page.<br> | ||
<div style="background-color: | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki><div style="text-align:right">I Love Wikitext</nowiki></font color><font color="red"><nowiki></div></nowiki></font color></div><br> | ||
*Take this title: "I Love Wikitext" and put it on the left of the page.<br> | *Take this title: "I Love Wikitext" and put it on the left of the page.<br> | ||
<div style="background-color: | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><font color="red"><nowiki>No attributes need, the left side is the default position.</nowiki></font color></div> | ||
</div> | </div> | ||
| Line 546: | Line 546: | ||
|} | |} | ||
Here is the coding:<br> | Here is the coding:<br> | ||
<div style="background-color: | <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><br> | ||
<font color="red"><nowiki>|-</nowiki></font color><br> | <font color="red"><nowiki>|-</nowiki></font color><br> | ||
<font color="red"><nowiki>| Apples</nowiki></font color><br> | <font color="red"><nowiki>| Apples</nowiki></font color><br> | ||
| Line 608: | Line 608: | ||
|} | |} | ||
<p>Here is the coding in the opening table tag:</p> | <p>Here is the coding in the opening table tag:</p> | ||
<div style="background-color: | <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"><nowiki>{| </nowiki><font color="red"> style="border:15px ridge cornsilk"</font color></div><br> | ||
*Put a border for the whole table that is 15 pixels wide, "double" border with a border color of brown. | *Put a border for the whole table that is 15 pixels wide, "double" border with a border color of brown. | ||
{| style="border:15px double brown" | {| style="border:15px double brown" | ||