FamilySearch HTML Tutorial Answers

Home

 * What is CSS?
 * D. All of the above


 * What is HTML?
 * B. Language for all of the Internet


 * What is the left sidebar for?
 * D. All of the above.

Back to Home Page

Introduction

 * The forward slash / is used in
 * A. Closing header tags.


 * Tags are easy to see on pages in the Wiki
 * False


 * Two monitors are always better than one
 * True

Back to Introduction

Exercises
=Kentucky=

Birth Certificates
Here's the coding: 
 * 1)  Kentucky Genealogy
 * 2)  History
 * 3)  Vital Records
 * 4)  Birth Certificates

Quick Quiz

 * We don't use Header Ones in FamilySearch Wiki articles
 * True


 * Header Five and Six are rairly used
 * True


 * Header Two work well in FamilySearch WIki
 * False


 * Avoid using Header Three and Header Four in articles
 * False

Back to Headers

Exercises
   Birth Certificates   Land Records   Probate Records   Census   Vital Records  
 * Coding for unordered list:


 * This is how the unordered lists will appear:
 * Birth Certificates
 * Land Records
 * Probate Records
 * Census
 * Vital Records


 * Coding for ordered list:

   World </li>  North America </li>  United States of America </li>  State of Missouri </li>  Jackson County </li>  Independence </li> </ol>
 * This is how the ordered list will appear:
 * 1) World
 * 2) North America
 * 3) United States of America
 * 4) State of Missouri
 * 5) Jackson County
 * 6) Independence

Quick Quiz

 * If you have a cooking recipe, which list would you use to show the steps?
 * A. Ordered List


 * If you were listing your favorite foods in order of preference, which lists would you use?
 * A. Ordered List


 * If you were listing the contents of your pockets, which list would you use?
 * B. Unordered List

Back to Lists

Nested Lists
To practice nesting unordered lists, in your sandbox create an list with the following items: Fruits, Vegetables, Nuts and Grains. In between each item list three varieties. Here is the coding you should have entered: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">


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

</ul> Here's how the links would look on a page:
 * Fruits
 * Apples
 * Pears
 * Oranges
 * Vegetables
 * Peas
 * Carrots
 * Corn
 * Nuts
 * Walnuts
 * Peanuts
 * Almonds
 * Grains
 * Wheat
 * Soybeans
 * Barley

To practice nesting ordered list, in your sandbox create an ordered list with the following items: North American, United States of America, State of Missouri and Jackson County. In between each item list three items that apply.


 * If you were nesting a list of states in no particular order in a list of countries, which list would you use?:
 * B. Unordered List


 * If you were nesting a list of states by size in a list of countries by size, which lists would you use?
 * A. Ordered List

Back to Nesting Lists

Exercises
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> === Newspapers === *Kirksville Daily Express *click here to see past issues of Kirksville, Missouri Newspaper Archives
 * Your wording of the comments is as good as anyone else's. Whatever makes sense to you is ok.

<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">

=== Libraries and Museums === A T Still Memorial Library 600 W Jefferson St. Kirksville, MO  (660) 626-2345 Pickler Memorial Library - Turman State University 100 E Normal St. Kirksville, MO  (660) 785-4000 Adair County Public Library 1 Library Ln. Kirksville, MO  (660) 785-4051

<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">

=== Societies === *Adair County Historical Society *Search Your Family History in Adair Co. MO *[https://familysearch.org/learn/wiki/en/Special:Search? fulltext=true&search=Kirksville+Missouri+Family+History+Center Family History Center]

<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">

==== Town Clerk ==== *Kirksville City Website

<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">

=== City Directories === Truman State University

Quick Quiz

 * How many comments can you insert on page?
 * C. As many as you like.


 * How many words can you put in a comment?
 * C. As many words as you want.


 * Where can you insert comments?
 * C. Anywhere you want.

Back to Comments

Exercises
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.
 * Grab a paragraph from a page in the Wiki and paste it three times in your sandbox. Separate the paragraphs with two   between each one.
 * Then with the same paragraph put  and   between each one.
 * 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   will not and which we will cover in the next chapter.

Quick Quiz

 * When you load paragraphs, using the enter button will automatically put spaces between them.
 * B. False


 * It is better to use  than   in separating paragraphs.
 * B. False


 * A  does not require an ending tag for the paragraphs to separate like the
 * B. False

Back to Paragraph Page

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

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

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

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

Quick Quiz

 * How many attributes can you put in the paragraph tag?
 * D. None of the above (It is unlimited)


 * What symbol do you use to separate a property from a value?
 * A. Colon

Back to Changing Fonts

Exercises
<p style="font-size:20pt">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.
 * Enlarge the lorem ipsum paragraph to 20pt.

<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> <p style=" font-size:20pt ">Lorem ipsum ...    <h1 style="font-size:36pt; margin:0px; padding:0px">Header <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> <h1 style=" font-size:36pt ">Lorem ipsum ...
 * Enlarge a header to 36pt.

Quick Quiz
*You cannot enlarge headers
 * B. False


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

Back to Sizing Fonts

Exercises

 * Change the lorem ipsum paragraph text to a color on this list.
 * 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"> <p style=" color:Cornflowerblue ">Lorem ipsum ...

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

<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> <h1 style=" color:red >Header

Quick Quiz

 * You can use any name that is common to everyone for a color.
 * B. False


 * If the HEX number does not work in the code you may have:
 * c. All of the above


 * You have to use the header tags to color headers
 * A. True

Back to Font Colors

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

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

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

Quick Quiz

 * To make a sentence in bold text, you flank the sentence with two apostrophes
 * B. False


 * To make a word italicized, you flank the word with two quotation marks
 * B. False

Back to Font Bold-Italics

Exercises
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">

<p style=" font-family:arial; font-size:12pt; color:red ">Lorem ipsum ....

Quick Quiz

 * Attributes are separated with?
 * C. Semi-colon


 * How many attributes can you put in the paragraph tag?
 * D. None of the above


 * How would you make a word italicized along with the three attribute changes to the paragraph?
 * C. All of the above

Back to Multi-attributes

Exercises

 * 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"> <p style=" background-color:green; color:orange ">lorem ipsum ....

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


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

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

Quick Quiz

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

Back to Backgrounds

Exercises
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. <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> <p style=" background-color:lightgreen; color:white; padding-top:20px; padding-bottom:20px ">Lorem ipsum .....

2. Load our lorem ipsum paragraph twice with no background color and no text color but with a padding-bottom of the first paragraph of 100px. What happens to the space between the paragraphs? <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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.
 * It widens by over 100 pixels.

Quick Quiz

 * To have the text 20px from the left edge of the background what attribute do you use?
 * C. padding-left:20px


 * To have the background 50px from all side of the text, what attribute do you use?
 * C. None of the above

Back to Padding

Exercises

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

<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> <div style=" background-color:crimson; padding:20px ">Lorem ipsum ...     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.

Quick Quiz

 * The div tag and paragraph tag function the same way.
 * A. True


 * The attributes work the same way in the div tag as in the paragraph tag
 * A. True


 * Div tags put spaces between paragraphs
 * B. False

Back to Div Tag - Introduction

Exercises
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="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> <div style=" background-color:lightgreen; color:white; margin-bottom:40px ">Lorem ipsum ....

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="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> <div style=" background-color:lightblue; color:white; margin-top:20px ">Lorem ipsum ....

Quick Quiz

 * Margin-top only affects top of paragraph
 * A. True


 * Margin-left moves the paragraph to the right of the left side of the page
 * A. True


 * Margin-right moves the paragraph to the right of the right side of the of the page
 * B. False

Back to Margins

Exercises
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:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> <div style=" border:10px groove lightgreen ">Lorem ipsum ...      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:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> <div style=" border:15px ridge lightgreen ">Lorem ipsum ...
 * Using a div tag put a border around our lorem ipsum paragraph of a "groove" type that is 10 pixels thick with whatever color you like.
 * Here is the coding:
 * 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:
 * Here is the coding:

Quick Quiz

 * You can only put borders on all sides.
 * B. False


 * There is a default space between text and borders
 * B. False


 * Solid lines are all that is allowed in borders
 * B. False

Back to Borders

Exercises
In your sandbox put the lorem ipsum in a div tag container with a width of 200 pixels and a height of 400 pixels. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Here is the coding: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> <div style=" border:1px solid red; width:200px; height:400px ">Lorem ipsum ....

Quick Quiz
*You can't use both width and height in a div tag
 * B. False


 * You can't use both width and height in a paragraph tag
 * B. False


 * You can use percentages in height attributes
 * B. False

Back to Width and Height

Exercises

 * Take this title: "I Love Wikitext" and put it on the center of the page.

<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> <div style=" text-align:center ">I Love Wikitext

<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> <div style=" text-align:right ">I Love Wikitext
 * Take this title: "I Love Wikitext" and put it on the right side of the page.

<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> No attributes need, the left side is the default position.
 * Take this title: "I Love Wikitext" and put it on the left of the page.

Quick Quiz

 * Text-align only works in header tags
 * B. False


 * Text-align cannot put a title to the left because that is the default position.
 * B. False


 * Text-align will work in header, paragraph and div tags
 * A. True

Back to Alignment

Exercises
Here is the table with its columns: Here is the coding: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
 * Create a table with four rows and four cells in each row.
 * In the first column list four fruits.
 * In the second column, four vegetables.
 * In the third column, four nuts.
 * In the fourth colomn, four grains.
 * This table will be the basis for all future exercises on tables. (Be careful we are talking about columns not rows.  This exercise will teach you how to arrange items in columns.)

Quick Quiz

 * Tables do not need a closing tag
 * B. False


 * Rows must have a closing tag
 * A. True


 * Cells must have something in them for the table to be visible.
 * A. True

Back to Tables

Exercise
Here is the coding in the opening table tag: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
 * With your table from the previous exercise, put a 15 pixel "ridge" border with a border color of "cornsilk."

Quick Quiz

 * Borders can only be on the outside of a table.
 * B. False


 * You can put borders around rows
 * B. False


 * You can put borders on columns
 * A. True

Back to Tables - Borders

Exercises
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> <table style=" border:25px inset green; width:90% "> <td style=" border:1px solid green; width:35% ">Apples <td style=" border:1px solid green; width:15% ">Peas <td style=" border:1px solid green; width:25% ">Peanuts <td style=" border:1px solid green"> Wheat Pears Carrots Walnuts Oats Cherries Corn Cashews Barley Oranges Beans Almonds Buckwheat |}
 * With our above table place a green border, "inset" style and 25 pixels wide.
 * Make the table 90% in width.
 * Next place a 1 pixel green border around the cells in the first row.
 * Make the first column 35 percent width, the second 15%, the third 25% and let the last column determine its own width.
 * Here is the coding:

Quick Quiz

 * Putting the width in the first cell of a row determines the width of the first column in the table
 * A. True


 * The width of a table will be determined by the material in the cells, if you do not set the widths
 * A. True


 * You can set the width of a table in percentages only
 * B. False

Back to Tables - Widths

Exercises
Here is what it should look like: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> {| style="border:25px outset orange; width:85%" |+ style="font-size:28pt; text-align:center; margin-bottom:20px; font-family:Curlz MT" | Healthy Foods |-  | style="border:1px solid orange; width:25%" | Apples | style="width:25%; "|Peas | style="width:25%; "|Peanuts | style="width:25%; "|Wheat |-  | style="border:1px solid orange" | Pears | Carrots | Walnuts | Oats |-  | style="border:1px solid orange" | Cherries | Corn | Cashews | Barley |-  | style="border:1px solid orange" | Oranges | Beans | Almonds | Buckwheat |}
 * With our above table place a orange border, "outset" style and 25 pixels thick.
 * Make the table 85% in width.
 * Next place a orange border around the cells in the first column.
 * Make the columns the same width.
 * Install our Healthy Foods caption;
 * Font - Curlz MT
 * Font - 28pt
 * Center caption
 * 20 pixel space between caption and top of table
 * Here is the coding:

Quick Quiz

 * The order of attributes is critical.
 * B. False


 * The caption can only be on the left side of the page
 * B. False


 * Only margin-bottom of the caption will cause a separation between the caption and the table
 * B. False

Back to Tables - Captions

Exercise
Should look like this:
 * With our above table place a yellow border, "dashed" style and 10 pixels thick.
 * Make the table 500 pixels wide.
 * Next place a blue border around the headers.
 * Install our Healthy Foods caption with any font;
 * Install the headers for each of the columns.
 * Install a lightblue background color for the headers.

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

Quick Quiz

 * The headers are always centered on the column.
 * B. False


 * You have to use the text-align to put the header on the left side
 * B. False


 * Headers are always in bold type.
 * A. True

Back to Tables - Column headings

Exercises

 * With our above table place a black border, "dotted" style and 5 pixels thick.
 * Make the table 600 pixels wide.
 * Next place a blue border around all the cells.
 * Place 5 pixels of padding in the header row of cells
 * Separate all the cells with 5 pixels.
 * Place a lightblue background on the column headers.

Here is the coding <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> {| style=" border:5px dotted black; width:600px; border-spacing:5px " ! style="border:1px solid blue; text-align:center; padding:5px; background-color:lightblue ; " | Fruits ! style="border:1px solid blue; text-align:center; padding:5px; background-color:lightblue ; " | Vegetable ! style="border:1px solid blue; text-align:center; padding:5px; background-color:lightblue ; " | Nuts ! style="border:1px solid blue; text-align:center; padding:5px; background-color:lightblue ; " | Grains
 * style="border:1px solid blue; "|Apples
 * style="border:1px solid blue; "|Peas
 * style="border:1px solid blue; "|Peanuts
 * style="border:1px solid blue; "|Wheat
 * style="border:1px solid blue; "|Pears
 * style="border:1px solid blue; "|Carrots
 * style="border:1px solid blue; "|Walnuts
 * style="border:1px solid blue; "|Oats
 * style="border:1px solid blue; "|Cherries
 * style="border:1px solid blue; "|Corn
 * style="border:1px solid blue; "|Cashews
 * style="border:1px solid blue; "|Barley
 * style="border:1px solid blue; "|Orange
 * style="border:1px solid blue; "|Beans
 * style="border:1px solid blue; "|Almonds
 * style="border:1px solid blue; "|Buckwheat
 * }
 * style="border:1px solid blue; "|Beans
 * style="border:1px solid blue; "|Almonds
 * style="border:1px solid blue; "|Buckwheat
 * }

Quick Quiz

 * Only the border-collaspe attribute is required to separate cell borders.
 * B. False


 * Padding attribute only pads on the left side of the text
 * B. False


 * The header font cannot be changed
 * B. False

Back to Tables - Rows

Exercises

 * With our above table place a yellow border, "groove" style and 10 pixels thick.
 * Make the table 700 pixels wide.
 * Next place a blue border around the headers.
 * Give the header cells a light blue background.
 * Change the color of the font to white.
 * NOTICE the left edge of the table went beyond the edge of the field. The field is only 640 pixels wide so if you go over that you will intrude on the right side of the field.

Here's the coding: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> {| style=" border:10px groove yellow; width:700px ; " ! style=" border:1px solid blue; background-color:lightblue; color:white ; " | Fruits ! style=" border:1px solid blue; background-color:lightblue; color:white ; " |Vegetable ! style=" border:1px solid blue; background-color:lightblue; color:white ; " |Nuts ! style=" border:1px solid blue; background-color:lightblue; color:white ; " |Grains
 * Apples
 * Peas
 * Peanuts
 * Wheat
 * Pears
 * Carrots
 * Walnuts
 * Oats
 * Cherries
 * Corn
 * Cashews
 * Barley
 * Orange
 * Beans
 * Almonds
 * Buckwheat
 * }
 * Beans
 * Almonds
 * Buckwheat
 * }

Quick Quiz

 * To make all the cells in column the same you need only put the code in the top cell
 * B. False


 * Background color cannot be placed in cells through coding in row
 * B. False


 * You can change the font-family in the rows
 * A. True

Back to Tables - Rows

Exercises
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Here is the coding in the beginning table tag: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> {| style="border:1px solid red; width:50%; float:right; margin-left:10px "
 * Place our demonstration table on the right side of the page.
 * Place our lorem ipsum paragraph under the table.
 * Place a 10 pixel space between the table and the text.

Quick Quiz

 * Text will always float up to the right side of a table when placing a table on the page.
 * B. False


 * Text will float when you place a table on the right side of a page.
 * A. True


 * You cannot place a table in the middle of the page.
 * B. False

Back to Tables - Placement

Exercises
Here is the coding: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> {| class="sortable" style="border:1px solid red; width:100% " ! Fruits ! Vegetable ! Nuts ! Grains
 * Take our Heathy Foods table and add another row.
 * Now make the table sortable.
 * Apples
 * Peas
 * Peanuts
 * Wheat
 * Pears
 * Carrots
 * Walnuts
 * Oats
 * Cherries
 * Corn
 * Cashews
 * Barley
 * Orange
 * Beans
 * Almonds
 * Buckwheat
 * Orange
 * Beans
 * Almonds
 * Buckwheat
 * Apricots
 * Broccoli
 * Brazil Nuts
 * Soy Beans
 * Soy Beans
 * }

Quick Quiz

 * When you click the sorting icon, the sorting is permanent.
 * B. False


 * When you add items to a table, you need to insert the item in the table where it is supposed to go if you want your table in alphabetical order even with the sorting class applied.
 * B. False


 * Sorting will revert back to the original order if you leave the page the table is on.
 * A. True

Back to Tables - Sorting

Exercises
Here is the final product: Here is the coding: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
 * Take our demonstration table and make it 900 pixels wide and tall.
 * Then make the table scrollable both horizontally and vertically with a finish width and height of 400 pixels.

Quick Quiz

 * When creating the horizontal scroll bar, you do not have to set the width.
 * B. False


 * Vertically scroll bars are only useful for very tall tables.
 * A. True


 * You cannot have horizontal and vertical scroll bars at the same time.
 * B. False

Back to Tables - Scrolling

Exercises
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> {| Adair Andrew Atchison Audrain Barry Barton Bates Benton Bollinger Boone Buchanan Butler Caldwell Callaway Camden Cape Girardeau Carroll Carter Cass Cedar |}
 * Here is the coding:
 * style="width:20%; background-color:lightblue; padding:5px; border-right:1px solid black; "|
 * style="width:20%; background-color:lightblue; padding:5px; border-right:1px solid black; "|
 * style="width:20%; background-color:lightgray; padding:5px; border-right:1px solid black; "|
 * style="width:20%; background-color:lightblue; padding:5px; border-right:1px solid black; "|
 * style="width:20%; background-color:lightgray; padding:5px; border-right:1px solid black; "|
 * style="width:20%; background-color:lightblue; padding:5px; "|

Quick Quiz

 * To have a list of items in six columns you need to create a table with one row and six cells.
 * B. True


 * A one row table looks better if the columns are of equal length.
 * A. True


 * To make the items on separate lines, you use  tags only.
 * B. False

Back to Tables - Columns Only

Exercises
Here is the coding: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> United States Genealogy > California Genealogy > Contra Costa County, California Genealogy
 * Take these three pages in FamilySearch Wiki and link them together with a breadcrumb trail:
 * United States
 * California
 * Contra Costa County
 * Use a > as the pointer to the next page.

Quick Quiz

 * Breadcrumb trails are usually placed at the bottom of the page.
 * B. False


 * Breadcrumb trails are external links placed in order of size.
 * B. False


 * Breadcrumb trails are not to be used to go back to preceding pages that you came from.
 * B. False

Back to Breadcrumb Trails

Exercises
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.
 * Take our Lorem ipsum paragraph and place three made up references on it: 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.
 * Place the references at the bottom of this paragraph.

Here is the coding: <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.

Quick Quiz

 * References can only so long.
 * B. False


 * References will only show up at the bottom of the page.
 * B. False


 * References are only for book and page numbers
 * B. False

Back to References/Footnotes

Exercises
Your SEO is probably as good as what anyone else can come up with. But here is an example of one for the state of Missouri: Guide to Missouri ancestry, genealogy and family history birth records, marriage records, death records, census records, family history, and military records.

Quick Quiz

 * SEO's can be as long as you want.
 * B. False


 * SEO's can be anywhere on a page.
 * B. False


 * SEO's are not looked at by your browser.
 * B. False

Back to SEO

Exercises
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">template:Lorem ipsum <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">
 * How do you save a template?
 * How do you embed a template?
 * How do you embed a template that you might want to edit someday?

Quick Quiz

 * Templates are easy to change.
 * A. True


 * Change the template and wherever it is embedded is changed as well.
 * A. True


 * There is no way to change a template without changing it wherever it is embedded.
 * B. False

Back to Templates

Exercises

 * Merge all the cells in the second row.
 * Merge the first three cells in the fourth row.

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

Quick Quiz

 * Colspans must equal the number of cells in the next row.
 * A. True


 * If you have a row with four cells you can have in the preceding row one cell with a colspan="3" plus the remaining cell.
 * A. True


 * If you have a row of seven cells you can have in the preceding row one cell with a colspan="2", the next cell with a colspan="3" and the remaining cell with a colspan="2".
 * A. True

Back to Tables - Column Spans

Exercises
Here is what the table should look like: Here is the coding: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
 * Merge the cells with Barley and Buckwheat in them.
 * Merge the cells with Peas, Carrots and Corn in them.

Quick Quiz

 * If you are going to merge three cells in a column, you must delete the number of cells in the column under the cell to be marged to equal the number call for in the rowspan code minus one.
 * A. True


 * If you want to merge two cells that are under each other in a column, you delete the cell next it in the row.
 * B. False

Back to Table - Row Spans

Exercises
Your coding should look like this: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> {| style="border:1px solid black; width:190px; float:right"
 * 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.
 * colspan="2" style="border:1px solid black; text-align:center" | organization
 * colspan="2" style="border:1px solid black; text-align:center" | image
 * style="border:1px solid black" | President:
 * style="border:1px solid black" |
 * style="border:1px solid black" | Address:
 * style="border:1px solid black" |
 * style="border:1px solid black" | Phone:
 * style="border:1px solid black" |
 * style="border:1px solid black" | Hours Open:
 * style="border:1px solid black" |
 * }
 * style="border:1px solid black" | Phone:
 * style="border:1px solid black" |
 * style="border:1px solid black" | Hours Open:
 * style="border:1px solid black" |
 * }
 * }

Quick Quiz

 * Parameters have two opening and closing curly brackets surrounding them.
 * A. False


 * Infoboxes are usually located at the top of the page on the right side.
 * A. True


 * Infoboxes are saved just like other templates, but it is good practice to include the word "infobox" in the title.
 * A. True

Back to Infobox - Creating

Exercises
Here is the coding: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
 * NOTICE the images did not require the brackets as this was built into the infobox.

Quick Quiz

 * Once the information after the equal signs is entered and saved, there is no changing the parameters.
 * B. False


 * Infoboxes can only be used on county pages.
 * B. False


 * Infoboxes are limited just to genealogical organizations.
 * B. False

Back to Infobox - Placing

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

Quick Quiz

 * If nothing is entered for a parameter, there will still be a space where the parameter would normally appear.
 * B. False


 * The "If function" allows you to create more complete infoboxes, but you do have to worry about them being too large and take up a lot of space if the subject to be posted in the infobox is small.
 * B. False


 * It does not matter whether you use regular pipes or | in infoboxes with if functions.
 * B. False

Back to If functions

Exercises
Here is the coding: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
 * NOTICE the images did not require the brackets as this was built into the infobox.

Quick Quiz

 * Once the information after the equal signs is entered and saved, there is no changing the parameters.
 * B. False


 * Infoboxes can only be used on county pages.
 * B. False


 * Infoboxes are limited just to genealogical organizations.
 * B. False

Back to Sibebars

Exercises
Here's what it should look like: Here's what the code should look like: <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New">
 * Create a navbox using the above format.
 * For topics use the first 5 topics from the Germany Genealogy page.
 * For Counties use the first 5 counties from the Anhalt_-_Herzogtum_(duchy) navbox at the bottom of the page.
 * Change the parameter to country.

Quick Quiz

 * Navboxes should not include items that could be in a sidebar.
 * A. True


 * Navboxes are usually placed at the top of the page.
 * B. False


 * Navboxes are limited to less than 200 pixels in width.
 * B. False

Back to Navboxes

Exercises
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Here is the coding: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <div style="position:relative; width:300px; height:100px">    Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.
 * Place a "relative" positioned object that is 300 pixels wide and 100 pixels high between the third and fourth sentence of our Lorem ipsum paragraph.

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

Quick Quiz

 * Relative positioning places objects in relation to the edge and top of the page.
 * B. False


 * Relative positioning does not cover objects placed before it was.
 * B. False


 * Relative positioning covers up all objects covered after it was placed.
 * B. False

Back to Position - Relative

Exercises
1. Make this object 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:absolute; left:0px; top:0px; width:200px; height:75px; border:2px solid green; background-color:orange; ">

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=" 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; ">

2. Take your answer above and move the relative object with the absolute object inside 150 pixel to the left and 50 pixel from the top: Here is the coding: <div style="position:relative; left:150px; top:50px; border:1px solid red; width:400px; height:200px; ">   <div style="position:absolute; left:0px; top:0px; width:200px; height:75px; border:2px solid green; background-color:orange; "> 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:absolute; left:150px; top:50px; width:200px; height:75px; border:2px solid green; background-color:orange; "> 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="position:relative; left:150px; top:50px; border:1px solid red; width:400px; height:200px; ">   <div style="position:absolute; left:150px; top:50px; width:200px; height:75px; border:2px solid green; background-color:orange; ">

Quick Quiz

 * Absolute positioning places objects in relation to the edge and top of the page.
 * A. True


 * Absolute positioning does not cover objects placed before it was.
 * B. False


 * Absolute positioning covers up all objects that follow it.
 * A. True

Back to Position - Absolute

Exercises
<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> <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>
 * Here's the coding for the first tab:

Back to Tabs