User:R2d2love7/sandbox1b

=Wiki Text Lessons 21-34 Text and Tables=

Padding
This paragraph has no space between the text and the border.

Padding Attribute
This paragraph has space between the text and the border. The style code used: "padding:10px" inside a p-tag. Padding can be limited to top, bottom, right, and left by using such code: padding-left:20px

Divisions are containers
The text in this division has a lightgreen background. The text in this division has a lightgraybackground. The style code used: "background-color:lightgreen" inside div-tag.

Margins are like padding with spacing taking place outside the boundaries
The text in this division has a lightgreen background with a margin. The text in this division has a lightgraybackground with a margin. The style code used: "background-color:lightgreen; margin:10px" inside div-tags. Margins overlap if side by side and are on all sides. Margins can be limited just like padding.

Borders
The text in this division has a lightgreen background and a narrow red border. The style code used: "background-color:lightgreen; border:1px solid red" inside div-tags. There is no space between the text and the border. The border is spread all across the page. We can place borders on one, two, three, or on all four sides just like padding and margins. The text in this division has a lightgreen background and a narrow red border only at the bottom. The style code used: "background-color:lightgreen; border-bottom:1px solid red" inside div-tags. This is useful in separating paragraphs, etc. Padding and Margins work the same way with borders.

Border Radius
The text in this division has a lightgreen background and a narrow red border with rounded corners. The style code is: "background-color:lightgreen; border:1px solid red; border-radius:5px" inside div-tags. The rounding of corners can be limited by using -top-left, -top-right, -bottom-left, and -bottom-right.

Border Shadow
The text in this division has a lightgreen background and a narrow red border and a shadow. The code for this style is: "background-color:lightgreen; border:1px solid red; box-shadow:10px 10px 5px #888888" inside div-tags. The first 10 pixels is from bottom down; The second 10 pixels is from right edge to right; The 5 pixels is the distance above the page; The #888888 is HEX for dark gray.

Width and Height
The text in this division has a lightgreen background and a narrow red border with width limited to 100 pixels and height limited to 50 pixels. The style code used: "width:200px; height:100px;" inside div-tags.

Centering Titles
This title is centered The style code used: "text-align:center" inside div-tags. Also text-align:right, or text-align:left This title is on the right This title is on the left The style code used: "text-align:left" inside div-tags.

Vertical Alignment
When we place some text in a div tag that is taller than the text we are placing, the text will appear at the top of the container. To place the text in the middle of the container, we use a combination of text-align and line-height attributes. This text is in the middle The style code used: "line-height:50px; text-align:center" inside div-tags.

Tables
Tables have opening tags {| and closing tags |}. Tables have Rows which are created with |- followed by cells created with |. Tables consist of many rows of cells.

We Add Rows and Cells by adding row tags followed by cell tags.

Tables - Borders
The style code used: "border:1px solid red" in table opening. The style code used: "border:15px ridge cornsilk" in table opening.

Tables - Widths
The style code used: "border:1px solid red; width:160px" | Apples in first row cells The style code used: "border:25px inset green" in table opening. The style code used: "border:1px solid green; width:224px" | Apples in first row cells

Tables - Captions
The style code used: "border:1px solid red" in table opening. The style code used: "font-size:24pt; text-align:center; margin-bottom:15px; font-family: new times roman" | Healthy Foods following a pipe plus. The style code used: "border:25px outset orange" in table opening.

Tables - Column Labels
The style code used: " border:1px solid red; text-align:center; width:160px; background-color:lightgreen " |Fruits creates first column heading following ! symbol.

Tables - Cells
The style code used: "border:1px solid red; width:640" in table opening. The style code used: "border:1px solid red; text-align:center; width:160px; background-color:lightgreen " |Fruits following ! symbol.

Tables - Rows
Rows are cells strung together.

Tables - Placement
When a table is placed, it shows up on the left side of the page. If other items are added after the table, they will appear below it.

Text Wrapping
Text can be floated around the right or left side of a table. A margin can be specified. Or text wrapping can be cleared. A table can be auto-matically centered with no text wrapping.

Tables - Sorting
The items in the rows stay with the item in the column that you have alphabetically rearranged when we use a "class" called sorting in the beginning table tag. The page must be saved in order for the sorting icon to show (not just Show Preview). The style code used: "border:1px solid red; width:640" in table opening following the words class = in quotes sortable close quotes.

Tables - Scrolling
The vertical scroll bar enables you to scroll the content of the page up and down. The horizontal scroll bar enables you to scroll the content of the page right and left. The style code used: "overflow:scroll; width:400px; height:100px" inside div-tags. The style code used: "border:1px solid red; width:900px" in table opening following the words class equalsign open quotes sortable close quotes.

Tables - Columns Only
We can use only one row to contain all choices, in this case, as links. The cells are composed of code: asterisk followed by internal link.

Templates
A Template is a container that you want to easily add to several pages.

Creating Templates
To save it as a template you type "Template:templatename"

Embedding A Template
To Embed a template, you type Click on "Edit This Page" to see a list of all templates on the page.

Editing Only One Embedded Template
If you think you will be making changes to a template and don't want to affect the others, use this coding to embed the template:

Editing Templates
Go to the template by typing "template:templatename" then edit as normal.

Limiting Size Template
Templates are limited in size in the code of the template.

Breadcrumb Trails
They are internal links strung together separated by an arrow. Example: Country => State => County

Why Breadcrumb Trails?
They are used to help the user find his way back.

Where Breadcrumb Trails?
They are located at the top of the page.

Creating Breadcrumb Trails
United States Missouri  Adair County

References/Footnotes
Two Internal Links are used to take the user to the reference and back as he clicks.

Creating References
Reference tags are placed after the word you want to reference. They will show in the text as a small blue number in brackets. Clicking on the number will take the user to the link. Clicking on the reference returns the user to the original location.

Placing the References on the page
They are placed wherever you place the reflist template.

SEOs
Search Engine Optimization is a "25 words or less" statement of what the site has to offer. This appears right under the name of the site in your browser. It should contain the terms genealogy, ancestry, or family history, and the geographic location, all in bold.