User:Terriethomas/sandbox/wikitext lessons

Headers
= Kentucky Genealogy =

Lists

 * Birth Certificates
 * Land Records
 * Probate Records
 * Census
 * Vital Records


 * 1) World
 * 2) North American
 * 3) United States of America
 * 4) State of Missouri
 * 5) Jackson County
 * 6) Independence


 * Fruits
 * Apple
 * Pear
 * Banana
 * Vegetables
 * Broccoli
 * Celery
 * Peas
 * Nuts
 * Pecan
 * Walnuts
 * Peanuts
 * Grains
 * Wheat
 * Barley
 * Quinoa


 * 1) North American
 * 2) Continent
 * 3) USA
 * 4) States
 * 5) United States of America
 * 6) States
 * 7) Counties
 * 8) Cities
 * 9) State of Missouri
 * 10) Counties
 * 11) Cities
 * 12) Towns
 * 13) Jackson County
 * 14) Cities
 * 15) Towns
 * 16) Neighborhoods

Internal Links
Kentucky

California

Nevada Genealogy

Nevada Research Tools

Glamorganshire Topics

Ancestry.com

HTML lessons

Corrected Broken Links
Missouri

Missouri

Missouri

Missouri

Missouri

Newspapers

 * Kirksville Daily Express
 * click here to see past issues of Kirksville, Missouri Newspaper Archives

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

Societies

 * Adair County Historical Society
 * Search Your Family History in Adair Co. MO
 * Family History Center

Town Clerk

 * Kirksville City Website

City Directories
Truman State University

Placing images on pages






My tests of this coding








Exercises






Test of code






Testing
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. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae. 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. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae.

Examples
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. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae.

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. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae.

Quick Quiz

 * To float the text to the right of an image, you need to:


 * B. Place |left in the image code.


 * To float the text to the left side of an image, you can only use |right coding


 * A. True.

Paragraphs
Searching for ancestors in medieval England can be fascinating. Extensive collections survive in English archives dating back to the Domesday Book (1086 A.D.). Medieval records most often record activities of nobility and the landed class. They are typically written in Latin or Old French, but modern English translations are available for many record groups. Searching for ancestors in medieval England can be fascinating. Extensive collections survive in English archives dating back to the Domesday Book (1086 A.D.). Medieval records most often record activities of nobility and the landed class. They are typically written in Latin or Old French, but modern English translations are available for many record groups. Searching for ancestors in medieval England can be fascinating. Extensive collections survive in English archives dating back to the Domesday Book (1086 A.D.). Medieval records most often record activities of nobility and the landed class. They are typically written in Latin or Old French, but modern English translations are available for many record groups.

Searching for ancestors in medieval England can be fascinating. Extensive collections survive in English archives dating back to the Domesday Book (1086 A.D.). Medieval records most often record activities of nobility and the landed class. They are typically written in Latin or Old French, but modern English translations are available for many record groups. Searching for ancestors in medieval England can be fascinating. Extensive collections survive in English archives dating back to the Domesday Book (1086 A.D.). Medieval records most often record activities of nobility and the landed class. They are typically written in Latin or Old French, but modern English translations are available for many record groups. Searching for ancestors in medieval England can be fascinating. Extensive collections survive in English archives dating back to the Domesday Book (1086 A.D.). Medieval records most often record activities of nobility and the landed class. They are typically written in Latin or Old French, but modern English translations are available for many record groups.

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

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

My Header

= Font Size =

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.

Not only can we enlarge paragraphs, but we can enlarge headers as well. However to do that we need to substitute the equal signs for the header tag like so:

<h1 style= "font-size:20pt; "&gt;Enlarging Headers

Normal size of the default font is 10pt or 10 points. Let's say we want to increase the font to 12 points. To make the font larger you insert the attribute "font-size:12pt; " in the paragraph tag coding like so:

&lt;p style="font-size:12pt" &gt;.

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

Lorem ipsum....

= Font Colors =

= Font Colors =

Testing code
Lorem ipsum....

Lorem ipsum....

= Header =

Lorem ipsum....


 * &lt;p style= "#5f9EA0" &gt;

Using only the #number for the font color in the code, as in the example above, does not work. You must use "color:#number" in order for the code to work. The correct code would be:


 * &lt;p style= "color:#8A2BE2" &gt;

Font Bold-Italics

 * Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Do not confuse the apostrophes with quotation marks. and

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.

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

Multi-attributes
Lorem ipsum...

With space added after semi colons, there is no difference for purposes of coding:

Lorem ipsum...

Lorem ipsum ....

Lorem ipsum ....

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

I switched attributes: Lorem ipsum... to see if it made a difference. It does not.

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

Testing
Here is our paragraph with 10 pixel padding on all four sides:

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 our paragraph with 10 pixel padding on the left side:

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 our paragraph with 10 pixel padding on the top and the right sides:

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.

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.

Div Tag Introduction
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.

Testing
 Exercises Check your answers  Exercises Check your answers
 * 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:

Margins
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. Lorem ipsum ....

<div style= "background-color:lightgreen” ;color:white;margin-bottom:40px" &gt;Lorem ipsum...

Testing
Let's apply the attribute to our two Lorem ipsum paragraphs in the previous chapter and space them 10 pixels apart using div tags: 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.
 * Here is the coding:

<div style= "background-color:lightgreen ;margin:10px" &gt;

<div style= "background-color:lightgray ;margin:10px" &gt;


 * NOTICE that the paragraphs are separated by 20 pixels which is the sum of the 10 plus 10 pixels in the margins.
 * NOTICE that the paragraphs are also 10 pixels from both the left and right side of the page.

If you wanted only to have a space between paragraphs, you would use "margin-bottom for the first paragraph and/or margin-top for the second paragraph.

Borders
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:10px groove aqua" &gt; 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 aquamarine" &gt;

Width and Height
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:1px solid red;width:200px;height:400px" &gt;

Alignment
"I Love Wikitext "I Love Wikitext "I Love Wikitext"

Tables
Coding for the table: {| |-  | Apples  | Broccoli  | Pecans  | Wheat  |-  | Pears  | Peas  | Walnuts  | Quinoa  |-  | Bananas  | Corn  | Peanuts  | Barley  |-  | Cherries  | Celery  | Cashews  | Whey  |}

Testing

 * With your table from the previous exercise, put a 15 pixel "ridge" border with a border color of "cornsilk."

Here is the coding in the opening table tag:


 * {| style="border:15px ridge cornsilk"


 * Put a border for the whole table that is 15 pixels wide, "double" border with a border color of brown.

Here is the coding:


 * {| style="border:15px double brown"


 * Put a blue border around the cells in the first column 1 pixel thick.
 * NOTICE no pipe after the attribute.

Here is the coding:

{| style="border:15px double brown" |-  | style="border:1px solid blue" | Apples  | Peas   | Peanuts   | Wheat   |-  | style="border:1px solid blue" | Pears  | Carrots   | Walnuts   | Oats   |-  | style="border:1px solid blue" | Cherries  | Corn   | Cashews   | Barley   |-  | style="border:1px solid blue" | Oranges  | Beans   | Almonds   | Buckwheat   |}

Tables - Captions
Here's the coding for the caption:


 * |+ style="font-size:24pt"|Healthy Foods

Here's the coding for the caption:


 * |+ style="font-size:28pt;font-family:curlz mt;text-align:center;margin-bottom:20px"|Healthy Foods

Here's the coding for the caption:


 * |+ style="font-size:28pt; text-align:center; margin-bottom:20px; font-family:hobo std" | Healthy Foods

Tables - Cells
Here is the coding for the table and an example of the headers coding: {| style=" border:5px dotted black; width:600px; border-collaspe:separate; border-spacing:5px " ! style=" border:1px solid blue; text-align:center; padding:5px;background-color:lightblue "|Fruits

Testing
I removed the attribute:border-collapse:separate. The table appears the same.

Tables - Rows
Here's my coding for the headers: {| style=" border:10px groove yellow; width:700px " ! style=" border:1px solid blue "|Fruits ! style=" border:1px solid blue; " |Vegetable ! style=" border:1px solid blue; " |Nuts ! style=" border:1px solid blue; " |Grains
 * - style=" background-color:lightblue;color:white "

Here's Charles coding for the headers: {| 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

Tables - Placements
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:
 * {| style="border:1px solid red; width:50%; float:right; margin-left:10px "

Testing
I could not get the "border:1px solid red; width:100%" attributes to work when placing the class="sortable" coding after the inline style code as shown in the table above: {| style= "class="sortable" "border:1px solid red; width:100%" I also tried other combinations and could not find the answer yet.

Exercises
Here is the coding: {| class="sortable" style="border:1px solid red;width:100%"

Tables - Scrolling
Here is the coding:

Tables - Columns Only
Check your answers