Open main menu

Help:Wiki University Wikitext--Tutorial Answers

HomeEdit

  • What is CSS?
D. All of the above
  • What is WIkitext?
A. Simplified form of HTML
  • What is HTML?
B. Language for all the Internet

Back to Home Page


IntroductionEdit

  • Where are square brackets used?
C. Used in links
  • Where are pipes used?
B. Internal links
  • What are <> used for?
C. Div tags

Back to Introduction


HeadersEdit

ExercisesEdit

  • Here is the wikitext coding:

==History==
===Vital Records===
====Birth Certificates====

  • Here is the result after saving the wikitext coding:

HistoryEdit

Vital RecordsEdit

Birth CertificatesEdit

Quick QuizEdit
  • We don't use Header One in FamilySearch Wiki articles
True
  • Header Five and Six are rarely used
True
  • Header Two works well in FamilySearch Wiki
True
  • Avoid using Header Three and Header Four in articles
False

Back to Headers


ListsEdit

ExercisesEdit

  • Coding for unordered list:

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

  • This is how the unordered lists will appear:
  • Birth Certificates
  • Land Records
  • Probate Records
  • Census
  • Vital Records
  • Coding for ordered list:

#World
#North America
#United States of America
#State of Missouri
#Jackson County
#Independence

  • 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 QuizEdit

  • 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 ListsEdit

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:

*Fruits
**Apples
**Pears
**Oranges
*Vegetables
**Peas
**Carrots
**Corn
*Nuts
**Walnuts
**Peanuts
**Almonds
*Grains
**Wheat
**Soybeans

**Barley


Here's how the nested unordered list would look on a page:

  • Fruits
    • Apples
    • Pears
    • Oranges
  • Vegetables
    • Peas
    • Carrots
    • Corn
  • Nuts
    • Walnuts
    • Peanuts
    • Almonds
  • Grains
    • Wheat
    • Soybeans
    • Barley



  • If you were nesting a list of states 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


LinksEdit

ExercisesEdit

  • Here is the coding for the links:

[http://www.wikipedia.org/ Wikipedia]
[https://familysearch.org/ FamilySearch]
[[Kentucky Genealogy|Kentucky]]
[[California Genealogy|California]]
[[Missouri, United States Genealogy#Additional Resources|Missouri Additional Resources]]
[[Glamorgan#Topics|Glamorgan Topics]]
[http://home.ancestry.com/ Ancestry.com]



  • This is how they appear on the page: Try them out.

Wikipedia
FamilySearch
Kentucky
California
Missouri Additional Resources
Glamorgan Topics
Ancestry.com

Quick QuizEdit

  • How many square brackets for Internal Links?
B. Two
  • How many square brackets are necessary for external links?
A. One
  • How do you separate the name of an Internal link from the page name?
B. Put a pipe between them.
  • How do you link to a section of a page?
B. Put a pound sign between the page name and the section.

Back to Links


Broken LinksEdit

  • [https://en.wikipedia.org/wiki/Main_PageWikipedia]
  • ERROR: A space is missing between URL and name of link.
  • CORRECTED LINK: [https://en.wikipedia.org/wiki/Main_Page Wikipedia]

  • [Missouri Genealogy|Missouri]
  • ERROR: Single square brackets were used instead of double square brackets.
  • CORRECTED LINK: [[Missouri Genealogy|Missouri]]

  • <a ref="https://en.wikipedia.org/wiki/Main_Page">Wikipedia</a>
  • ERROR: HTML coding was used instead of Wikitext coding.
  • CORRECTED LINK: [https://en.wikipedia.org/wiki/Main_Page Wikipedia]

  • [[Missouri GenealogyMissouri]] .
  • ERROR: Pipe missing between page name and link name.
  • CORRECTED LINK: [[Missouri Genealogy|Missouri]]

  • [[https://en.wikipedia.org/wiki/Main_Page Wikipedia]]
  • ERROR: Too many square brackets. Only one set as this is an external link.
  • CORRECTED LINK: [https://en.wikipedia.org/wiki/Main_Page Wikipedia]

  • [[Missouri, United States Genealogy Missouri]].
  • ERROR: Used a space in this internal link rather than a pipe.
  • CORRECTED LINK: [[Missouri, United States Genealogy|Missouri]]



  • How can links be broken?
G. All of the above. (And then some)

Back to Broken Links


CommentsEdit

ExercisesEdit

  • Your wording of the comments is as good as anyone else's. Whatever makes sense to you is ok.
<!--List of newspapers published in Kirksville, Missouri---------------->

=== Newspapers ===
*[http://www.kirksvilledailyexpress.com/ Kirksville Daily Express]
*[http://chroniclingamerica.loc.gov/lccn/sn89066097/ click here to see past issues of Kirksville, Missouri Newspaper Archives]

<!--List of libraries, addresses and phone numbers---------------->

=== Libraries and Museums ===
[http://www.atsu.edu/atsmlib/ A T Still Memorial Library]
600 W Jefferson St. Kirksville, MO
(660) 626-2345

[http://library.truman.edu/ 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

<!--List of historical societies------------------------->

=== Societies ===
*[http://www.adairchs.org/ Adair County Historical Society]
*[http://www.adairchs.org/FAMILY_HISTORY_ADAIR.pdf Search Your Family History in Adair Co. MO]
*[https://familysearch.org/wiki/en/Special:Search?
fulltext=true&search=Kirksville+Missouri+Family+History+Center Family History Center]</nowiki>

<!--Link to town clerk----------------------------->

==== Town Clerk ====
*[http://www.kirksvillecity.com/ Kirksville City Website]

<!--Location of city directory for Kirksville, Missouri----------->

=== City Directories ===
[http://library.truman.edu/books/eBook%20Collections.asp Truman State University]

Quick QuizEdit

  • 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


CategoriesEdit

ExercisesEdit

The coding used should be as follows:

[[Category:Sandbox]]


The categories section at the bottom of your page should look like this after you save your sandbox page:

Category: Sandbox

Quick QuizEdit

  • What does it mean when these categories show up in a red color?
C. All of the above.
  • Categories are external links surrounded by single square brackets.
False
  • Categories are always placed at the top of the page.
False
  • You should check to see if a category has been created rather than make up a new one?
True

Back to Categories


ImagesEdit

ExercisesEdit

  • Place this [[File:Ireland Map.gif]] image on your sandbox page and limit the width to 200 pixels.
  • Place this [[File:Ireland Countryside.jpg]] image on your sandbox page on top of the one above and limit the width to 250 pixels.
  • Place this [[File:Ireland Rebuilding of Tuam Cathedral 1865.jpg]] image between the two above and limit the width to 600 pixels.

Heres how the images look on the page:
Ireland Countryside.jpg

[[File:Ireland Countryside.jpg|250px]]

Ireland Rebuilding of Tuam Cathedral 1865.jpg

[[File:Ireland Rebuilding of Tuam Cathedral 1865.jpg|600px]]

Ireland Map.gif

[[File:Ireland Map.gif|200px]]


Quick QuizEdit

  • What size are images stored in the Wiki?
B. Full size as submitted
  • What side of the page is the default position for an image?
A. Left side
  • How many images can we put on a page
A. Unlimited

Back to Images


Images (cont.)Edit

ExercisesEdit

  1. Place this [[File:Ireland Countryside.jpg]] image on the right side of your sandbox page limiting the size to 300 pixels and adding the tooltip "Irish Countryside".
  2. Place this [[File:Ireland Map.gif]] image on the left side of your sandbox page, limit the size to 200 pixels, and put a border around it.
  3. Place this [[File:Ireland Rebuilding of Tuam Cathedral 1865.jpg]] in your sandbox, limit the size to 250 pixels, and center the caption "Tuam Cathedral".



Irish Countryside
[[File:Ireland Countryside.jpg|300px|right|Irish Countryside]]
Ireland Map.gif
[[File:Ireland Map.gif|200px|thumb|left]]
Tuam Cathedral
[[File:Ireland Rebuilding of Tuam Cathedral 1865.jpg|250px|thumb|<center>Tuam Cathedral</center>]]

Quick QuizEdit

  • The default position of any image is on the right side of the page.
B. False
  • To place an image on the right side of the page, use |right.
A. True
  • You can place a caption on an image without the thumb code
B. False

Back to Images (cont.)


Image LinksEdit

ExercisesEdit

  • Place this [[File:Ireland Map.gif]] image in your sandbox page and limit the width to 100 pixels and make it a link to a website that is about Ireland.

[[File:Ireland Map.gif|100px|link=http://wikitravel.org/en/Ireland|Wikitravel]]


  • Place this [[File:Ireland Countryside.jpg]] image in your sandbox page and limit the width to 100 pixels and make it a internal link to a favorite article in FamilySearch Wiki about Ireland.


[[File:Ireland Countryside.jpg|100px|link=Counties of Ireland|Irish Counties ]]

Quick QuizEdit

  • The separator between the URL and the name of the website in an external image links is:
B. Pipe.
  • The separator between the page name and the name of the link in an internal image link is:
A. Pipe, the word link and = sign.
  • In external links, the "tooltip" only appears when you give your external links a name?
A. True.
  • In internal links, the "tooltip" appears with the name of the page if you do not give it a different name.
A. True.

Back to Image Links


Images and TextEdit

ExercisesEdit

Ireland Map.gif
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.

Here is the coding:

[[File:Ireland Map.gif|200px|left]]

Ireland Map.gif
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.

Here is the coding:

[[File:Ireland Map.gif|200px|thumb]]

Quick QuizEdit

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

Back to Images and Text


ParagraphsEdit

ExercisesEdit

  • Copy and paste this 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. Paste it three times in your sandbox. Separate the paragraphs with two <br> between each one. To check if your answers are correct click the edit source to see the correct coding as it doesn't show in the Exercise answer.

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.

  • Then copy and paste the same paragraph three more times put <p> and </p> between each one. Check your homework after you clicked the edit source to see the actual 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.

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.

  • 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 <br> will not and which we will cover in the next chapter.

Quick QuizEdit

  • When you hit the enter button once it will automatically put a space between the paragraphs.
B. False
  • It is better to use <br> than <p> in separating paragraphs.
B. False
  • A <p> does not require an ending tag?
B. False

Back to Paragraph Page

Inline StylingEdit

ExercisesEdit

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<p style="font-size:20px">

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<p style="font-size:48px">

Quick QuizEdit

  • 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 Inline Styling


Changing FontsEdit

ExercisesEdit

  • Enlarge the lorem ipsum paragraph to 20px.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<p style="font-size:20px">Lorem ipsum ...</p>

  • Change the font to "New Times Roman."

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<p style="font-family:new times roman">Lorem ipsum ...</p>

Please note that different fonts vary in size in default. You can see that the new times roman font is smaller than the default font of the Wiki. You will have to include "font-size" to enlarge the new times roman font to be the same size as the default font.


Quick QuizEdit

  • To enlarge a font, you use the attribute font-family?
B. False
  • You can add the "font-size" attribute before the = sign?
B. False

Back to Changing Fonts


Font ColorsEdit

ExercisesEdit

  • Change the lorem ipsum paragraph text to a color on this list.


<p style="color:Cornflowerblue">


Quick QuizEdit

  • You can use any common name 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


Font Bold-ItalicsEdit

ExercisesEdit

  • 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 second to the last sentence of lorem ipsum paragraph 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 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.

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

Quick QuizEdit

  • To make a sentence in bold text, you put two apostrophes on both sides?
B. False
  • To make a word italicized, you put quotation marks on each side of the word?
B. False

Back to Font Bold-Italics


Multi-attributesEdit

ExercisesEdit

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

Quick QuizEdit

  • Attributes are separated with?
C. Semi-colon
  • How many attributes can you put in the paragraph tag?
D. None of the above

Back to Multi-attributes


BackgroundsEdit

ExercisesEdit

  • What is the coding to change the color of the background of the lorem ipsum paragraph to green and the text to orange.
<p style="background-color:green; color:orange">lorem ipsum ....</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 style="background-color:red; color:gold">lorem ipsum ....</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.

Quick QuizEdit

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

Back to Backgrounds


PaddingEdit

ExercisesEdit

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.

<p style="background-color:lightgreen; color:white; padding-top:20px; padding-bottom:20px">Lorem ipsum .....</p>


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?

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.


  • The space between the paragraphs widens to 100 pixels.

Quick QuizEdit

  • 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 sides of the text, what attribute do you use?
C. None of the above

Back to Padding

Div Tag - IntroductionEdit

ExercisesEdit

  • 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:moccasin; padding:20px; ">Lorem ipsum...</div>
<div style="background-color:crimson; padding:20px; ">Lorem ipsum...</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.
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 QuizEdit

  • 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

MarginsEdit

ExercisesEdit

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:lightgreen; color:white; margin-bottom:40px">Lorem ipsum ....</div>

2. What is the coding to install our lorem Ipsum paragraph to your sandbox with a background color of light blue with white text and a margin on the top of 20 pixels.

<div style="background-color:lightblue; color:white; margin-top:20px">Lorem ipsum ....</div>

Quick QuizEdit

  • 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

BordersEdit

ExercisesEdit

  • 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.
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:10px groove lightgreen">Lorem ipsum ...</div>

  • 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:
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:15px ridge lightblue">Lorem ipsum ...</div>

Quick QuizEdit

  • 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

Width and HeightEdit

ExercisesEdit

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:1px solid red; width:200px; height:400px; ">Lorem ipsum ....</div>

Quick QuizEdit

  • 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

AlignmentEdit

ExercisesEdit

  • Take this title: "I Love Wikitext" and put it on the center of the page.
<div style="text-align:center">I Love Wikitext</div>

  • Take this title: "I Love Wikitext" and put it on the right side of the page.
<div style="text-align:right">I Love Wikitext</div>

  • Take this title: "I Love Wikitext" and put it on the left of the page.
No attributes needed, the left side is the default position.

Quick QuizEdit

  • 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

TablesEdit

ExercisesEdit

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

Here is the table with its columns:

Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat

Here is the coding:

{|

|-
| Apples
| Peas
| Peanuts
| Wheat
|-
| Pears
| Carrots
| Walnuts
| Oats
|-
| Cherries
| Corn
| Cashews
| Barley
|-
| Oranges
| Beans
| Almonds
| Buckwheat

|}

Quick QuizEdit

  • Tables do not need a closing tag
B. False
  • Rows must have a closing tag
b. False
  • Cells must have something in them for the table to be visible.
A. True

Back to Tables

Tables - BordersEdit

ExerciseEdit

  • Copy the table coding displayed directly above into your sandbox, then place a 15 pixel "ridge" border around it with a border color of "cornsilk".
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat

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.
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat

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.
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat

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

|}

Quick QuizEdit

  • Attributes must be separated with a pipe from the contents of the cell
A. True
  • You can put borders around rows
B. False
  • You can put borders on columns
A. False

Individual cells can have a border around it

A. True

Back to Tables - Borders

Tables - WidthsEdit

ExercisesEdit

  • Copy the table coding displayed directly above to your sandbox, then modify it to display 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.
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat
  • Here is the coding:
{| style="border:25px inset green; width:90%"

|-
| style="border:1px solid green; width:35%" | Apples
| style="border:1px solid green; width:15%" | Peas
| style="border:1px solid green; width:25%" | Peanuts
| style="border:1px solid green; " | Wheat
|-
| Pears
| Carrots
| Walnuts
| Oats
|-
| Cherries
| Corn
| Cashews
| Barley
|-
| Oranges
| Beans
| Almonds
| Buckwheat

|}

Quick QuizEdit

  • 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

Tables - CaptionsEdit

ExercisesEdit

  • Copy the table coding displayed directly above to your sandbox, then place an orange border around it in the "outset" style and with a thickness of 25 pixels.
  • 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
    • 20 pixel space between caption and top of table

Here is what it should look like:

Healthy Foods
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat
  • Here is the coding:
{| style="border:25px outset orange; width:85%"

|+ style="font-size:28pt; 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

|}

Quick QuizEdit

  • 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

Tables - Column headingsEdit

ExerciseEdit

  • Copy the table coding displayed directly above to your sandbox, then place a yellow border around it in the "dashed" style and with a thickness of 10 pixels.
  • Make the table 500 pixels wide.
  • Next place a blue border around the headers.
  • Change our Healthy Foods caption with any font;
  • Change the background color for the headers.

depending on choice of color and fonts your table might look like this:

Healthy Foods
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat


  • Here is the coding:

{| style="border:10px dashed yellow; width:500px"
|+ style="font-size:28pt; margin-bottom:20px; font-family:times new roman" | Healthy Foods
|-
! style="border:1px solid blue; width:25%; background-color:lightblue; " |Fruits
! style="border:1px solid blue; width:25%; background-color:lightblue; " |Vegetable
! style="border:1px solid blue; width:25%; background-color:lightblue; " |Nuts
! style="border:1px solid blue; width:25%; background-color:lightblue; " |Grains
|-
| Apples
| Peas
| Peanuts
| Wheat
|-
| Pears
| Carrots
| Walnuts
| Oats
|-
| Cherries
| Corn
| Cashews
| Barley
|-
| Oranges
| Beans
| Almonds
| Buckwheat

|}

Quick QuizEdit

  • The headers are always centered on the column.
A. True
  • You can put borders in the headers column
A. True
  • Headers are always in bold type.
A. True

Back to Tables - Column headings

Tables - CellsEdit

ExercisesEdit

  • 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.
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat

Here is the coding

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

|}

Quick QuizEdit

  • 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 - Cells

Tables - RowsEdit

ExercisesEdit

  • 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.
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat
  • 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:

{| style="border:10px groove yellow; width:700px; "

|-style="background-color:lightblue; color:white; "
! style="border:1px solid blue; " | Fruits
! style="border:1px solid blue; " |Vegetable
! style="border:1px solid blue; " |Nuts
! style="border:1px solid blue; " |Grains
|-
| Apples
| Peas
| Peanuts
| Wheat
|-
| Pears
| Carrots
| Walnuts
| Oats
|-
| Cherries
| Corn
| Cashews
| Barley
|-
| Orange
| Beans
| Almonds
| Buckwheat

|}

Quick QuizEdit

  • You cannot change the font color in a row.
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

Tables - PlacementEdit

ExercisesEdit

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

Here is the coding in the beginning table tag:

{| style="border:1px solid red; width:50%; float:right; margin-left:10px"

Here is the coding to move the Lorem ipsum paragraph below the table:

<p style="clear:both">Lorem ipsum...turpis.</p>


Here is the results:

Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat

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 QuizEdit

  • 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

Tables - SortingEdit

ExercisesEdit

  • Take our Heathy Foods table and add another row.
  • Now make the table sortable.
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat
Apricots Broccoli Brazil Nuts Soy Beans

Here is the coding:

{| class="sortable" style="border:1px solid red; width:100% "

|-
! Fruits
! Vegetable
! Nuts
! Grains
|-
| Apples
| Peas
| Peanuts
| Wheat
|-
| Pears
| Carrots
| Walnuts
| Oats
|-
| Cherries
| Corn
| Cashews
| Barley
|-
| Orange
| Beans
| Almonds
| Buckwheat
|-
| Apricots
| Broccoli
| Brazil Nuts
| Soy Beans

|}

Quick QuizEdit

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

Tables - ScrollingEdit

ExercisesEdit

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

Here is the final product:

Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat

Here is the coding:

<div style="overflow:scroll; width:400px; height:400px; ">

{| style="border:1px solid red; width:900px; height:900px; "
|-
! Fruits
.
.
.
.
|}

</div>

Quick QuizEdit

  • When creating the horizontal scroll bar, you do not have to set the width.
B. False
  • Vertical 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

Tables - Columns OnlyEdit

ExercisesEdit

  • Adair
  • Andrew
  • Atchison
  • Audrain
  • Barry
  • Barton
  • Bates
  • Benton
  • Bollinger
  • Boone
  • Buchanan
  • Butler
  • Caldwell
  • Callaway
  • Camden
  • Cape Girardeau
  • Carroll
  • Carter
  • Here is the coding:
{|

|-
| style="padding-right:1em; background-color:lightblue"|

  • Adair
  • Andrew
  • Atchison
  • Audrain
  • Barry

| style="padding-right:1em; background-color:lightgray"|

  • Barton
  • Bates
  • Benton
  • Bollinger
  • Boone

| style="padding-right:1em; background-color:lightblue"|

  • Buchanan
  • Butler
  • Caldwell
  • Callaway
  • Camden

| style="padding-right:1em; background-color:lightgray; vertical-align:top"|

  • Cape Girardeau
  • Carroll
  • Carter
|}

Quick QuizEdit

  • 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
    • What coding do you use to bring items to the top of a cell?
B. vertical-align:top

Back to Tables - Columns Only

Breadcrumb TrailsEdit

ExercisesEdit

Here is the coding:

{{breadcrumb
| link1=[[United States Genealogy|United States]]
| link2=[[California, United States Genealogy|California]]
| link3=
| link4=
| link5=[[Contra Costa County, California Genealogy|Contra Costa County]]}}


This is what the breadcrumb should look like:

Quick QuizEdit

  • 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

References/FootnotesEdit

ExercisesEdit

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

Lorem ipsum dolor sit amet[1], consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi[2] tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget[3] suscipit turpis.


  1. This reference one
  2. This is reference two
  3. This is reference three

Here is the coding:

Lorem ipsum dolor sit amet<ref>This reference one</ref>, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi<ref>This is reference two</ref> tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget<ref>This is reference three</ref> suscipit turpis.





Quick QuizEdit

  • References can only be 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

SEOEdit

ExercisesEdit

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 QuizEdit

  • 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

TemplatesEdit

ExercisesEdit

  • How do you save a template?
template:Lorem ipsum

  • How do you embed a template?
{{Lorem ipsum}}

  • How do you embed a template that you might want to edit someday?
Template loop detected: Template:Lorem ipsum

Quick QuizEdit

  • 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

Tables - Column SpansEdit

ExercisesEdit

  • Merge all the cells in the second row.
  • Merge the first three cells in the fourth row.
Fruits Vegetable Nuts Grains
Apples
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans

Here is the coding

{| style="border:1px solid red; width:100%"
|-
! style="border:1px solid red; width:25%" | Fruits
! style="border:1px solid red; width:25%" | Vegetable
! style="border:1px solid red; width:25%" | Nuts
! style="border:1px solid red; width:25%" | Grains
|-
| colspan="4" style="border:1px solid red" | Apples
|-
| style="border:1px solid red" | Pears
| style="border:1px solid red" | Carrots
| style="border:1px solid red" | Walnuts
| style="border:1px solid red" | Oats
|-
| style="border:1px solid red" | Cherries
| style="border:1px solid red" | Corn
| style="border:1px solid red" | Cashews
| style="border:1px solid red" | Barley
|-
| colspan="3" style="border:1px solid red" | Orange
| style="border:1px solid red" | Beans
|}

Quick QuizEdit

  • 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

Tables - Row SpansEdit

ExercisesEdit

  • Merge the cells with Barley and Buckwheat in them.
  • Merge the cells with Peas, Carrots and Corn in them.

Here is what the table should look like:

Healthy Foods
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Walnuts Oats
Cherries Cashews Barley
Orange Beans Almonds

Here is the coding:

{| style="border:1px solid red; width:100%"
|+ style="font-size:14pt; text-align:center" | Healthy Foods
|-
! style="border:1px solid red; text-align:center; width:25%" | Fruits
! style="border:1px solid red; text-align:center; width:25%" | Vegetable
! style="border:1px solid red; text-align:center; width:25%" | Nuts
! style="border:1px solid red; text-align:center; width:25%" | Grains
|-
| style="border:1px solid red" | Apples
| rowspan="3" style="border:1px solid red" | Peas
| style="border:1px solid red" | Peanuts
| style="border:1px solid red" | Wheat
|-
| style="border:1px solid red" | Pears
| style="border:1px solid red" | Walnuts
| style="border:1px solid red" | Oats
|-
| style="border:1px solid red" | Cherries
| style="border:1px solid red" | Cashews
| rowspan="2" style="border:1px solid red" | Barley
|-
| style="border:1px solid red" | Orange
| style="border:1px solid red" | Beans
| style="border:1px solid red" | Almonds
|}

Quick QuizEdit

  • 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 merged 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 to it in the row.
B. False

Back to Table - Row Spans

Infobox - CreatingEdit

ExercisesEdit

  1. Add a border around the infobox, limit the width to 240 pixels and place it on the right side of the page.
  2. Add borders around each of the cells.
  3. Have the cells containing the words organization and image span both columns.
  4. Center the name of the organization and the image in their cells.
  5. Make the items in the right hand cells into parameters.
  6. Rename the parameters to make them more understandable.

Your coding should look like this:

{| style="border:1px solid black; width:240px; float:right"
|-
| 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" | {{{president|President's name}}}
|-
| style="border:1px solid black" | Address:
| style="border:1px solid black" | {{{address|Address}}}
|-
| style="border:1px solid black" | Phone:
| style="border:1px solid black" | {{{phone|Phone number}}}
|-
| style="border:1px solid black" | Hours Open:
| style="border:1px solid black" | {{{hours open|Hours open}}}

|}

Quick QuizEdit

  • 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

Infobox - PlacingEdit

ExercisesEdit

Here is the coding:

{{Infobox U.S. County
| county = Jackson
| county_map = Missouri Jackson County Map.svg.png
| state = Missouri
| state_map = Missouri.png
| founded year = 1826
| founded date = December 15
| seat wl = Independence

}}

  • NOTICE the images did not require the brackets as this was built into the infobox.

Quick QuizEdit

  • 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


If functionsEdit

ExercisesEdit

Here is the coding:

{| style="width:190px; border:1px solid black; float:right"
{{!}}-
{{!}} colspan="2" style="text-align:center; border:1px solid black"|organization name
{{!}}-
{{!}} colspan="2" style="text-align:center; border:1px solid black"|image
{{!}}-
{{!}} style="border:1px solid black"|{{#if:{{{president|}}}|President:
{{!}} {{{president}}}}}
{{!}}-
{{!}} style="border:1px solid black"|{{#if:{{{address|}}}|Address:
{{!}} {{{address}}}
{{!}}-
{{!}} style="border:1px solid black"|{{#if:{{{phone|}}}|Phone:
{{!}} {{{phone}}}
{{!}}-
{{!}} style="border:1px solid black"|{{#if:{{{hours open|}}}|Hours Open:
{{!}} {{{hours open}}}
|}

Quick QuizEdit

  • 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


SidebarsEdit

ExercisesEdit

Here is the coding:

{{Infobox U.S. County
| county = Jackson
| county_map = Missouri Jackson County Map.svg.png
| state = Missouri
| state_map = Missouri.png
| founded year = 1826
| founded date = December 15
| seat wl = Independence

}}
  • NOTICE the images did not require the brackets as this was built into the infobox.

Quick QuizEdit

  • 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


NavboxesEdit

ExercisesEdit

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

Here's what it should look like:

Links to Germany - related articles
Topics Archives and Libraries · Biography · Cemeteries · Census · Church Directories
Counties Anhalt · Baden · Bayern · Braunschweig · Bremen

Here's what the code should look like:

{| style="width:100%; border:1px solid black; border-collaspe:separate; border-spacing:5px; "
|-
| colspan="2" style="background-color:lightgray; text-align:center; " | Links to '''{{{Country}}}''' - related articles
|-
| style="background-color:lightgray; width:20% ; vertical-align:middle; " | Topics
| style="background-color:lightblue; " | [[Germany Archives and Libraries|Archives and Libraries]]{{·}} [[Germany Biography|Biography]]{{·}} [[Germany Cemeteries|Cemeteries]]{{·}} [[Germany Census|Census]]{{·}} [[Germany Church Directories|Church Directories]]
|-
| style="background-color:lightgray; width:20% ; vertical-align:middle; " | Counties
| style="background-color:lightblue; " | [[Anhalt - Herzogtum (duchy) Genealogy|Anhalt]]{{·}} [[Baden Grossherzogtum (grand duchy) Genealogy|Baden]]{{·}} [[Bayern (Bavaria) – Königreich (kingdom) Genealogy|Bayern]]{{·}} [[Braunschweig (Brunswick) – Herzogtum (duchy) Genealogy|Braunschweig]]{{·}} [[Bremen, Germany Genealogy|Bremen]]

|}

Quick QuizEdit

  • Navboxes may 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

Position - RelativeEdit

ExercisesEdit

  • 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:

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.

  • Place a "relative" positioned object after the last sentence that has the following attributes:
    • width is 100%.
    • background-color:blue.
    • border 5 pixels thick and red in color.
    • that is 200 pixels high.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

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.<div style="position:relative; width:100%; height:200px; background-color:blue; border:5px solid red"></div>

Quick QuizEdit

  • 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. True
  • Relative positioning covers up all objects covered after it was placed.
B. False

Back to Position - Relative

Position - AbsoluteEdit

ExercisesEdit

1. Make this object <div style="width:200px; height:75px; border:2px solid green; background-color:orange; "> 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.


Here is the coding:

<div style="position:relative; border:1px solid red; width:400px; height:200px; ">
<div style="position:absolute; left:0px; top:0px; width:200px; height:75px; border:2px solid green; background-color:orange; "> </div>
</div>

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; "> </div>
</div>


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.



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:150px; top:50px;width:200px; height:75px; border:2px solid green; background-color:orange; "> </div>
</div>

Quick QuizEdit

  • 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

Image MapsEdit

Quick QuizEdit

  • Image maps are templates.
A. True
  • You can use the URL in the from the tool bar for you image.
B. False
  • "Standard imagemap" from the Output menu is ok.
B. False
  • The http:// link for the image is ok.
B. False
  • It is ok to edit the image map in Rich Editor
B. False
  • Placing an image map on a page is just like placing a template on a page.
A. True

Back to Image Maps

ExercisesEdit

  • Create an image map using the Delaware image or any other of your choice.

See the coding on this lesson.

Back to Image Maps