User:Stais/Sandbox/Alignment Practise

Width and Height, Alignment-Horizontal, Tables, Breadcrumbs, Ref/Footnotes, SEO

Lesson 26 Width and Height

Using either paragraph or div tags you are able to control the width on the page.

Use pixels for the height coding, percentages will not work in height.

Exercise:

In your sandbox put the lorem ipsum in a div tag container with your choice of border and 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.

Lesson 27 Alignment-Horizontal (center, right, and left)

Note: the alignment by default is to the left

Exercies:

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

I Love Wikitext

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

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

Lesson 28 Tables Table

This is the opening table tag: {|

This is the closing table tag: |}

Rows

Tables consist of rows with cells. However rows have NO CLOSING tag. Rows are created with a |-

Cells Rows are made up of cells where the actual information is displayed. Cells have NO CLOSING tag. Cells are created with just a |

Tables have many cells and rows If we were to load this, we would see nothing because the individual cells must have something in them in order to display To add another row of cells, just repeat the row tag and cell tags

Borders and background colors

Tables usually have borders and sometimes background colors. A simplistic way to add borders to our table is to add the following code to the opening table tag: class="wikitable"

Adding rows and cells

To add rows and cells, add your row tags followed by your cell tags. You can add as many as you like.

Exercises

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

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

Lesson 29 Breadcrumbs

get us back to the main article we left to get to the page we are now on

internal links strung together separated by an arrow

breadcrumb code is set up as a template.

Exercise:

Take these three pages in FamilySearch Wiki and link them together with a breadcrumb trail: United States California Contra Costa County

Lesson 30 Ref/Footnotes


 * References are a very useful way to reference sources of information on a page.


 * Necessary if you are copying and pasting information from Wikipedia or other sources.
 * Necessary if you are even paraphrasing from another source and it is obvious that you got the information from somewhere else.
 * References to other sites that would give additional information.
 * Useful for adding information that might give additional insights but not necessary to display in the article itself.

They are included within an opening and closing reference tag These tags are placed after the word or item on the page you want to reference Abraham Lincoln

Here is a sample of coding citing Wikipedia as a source.


 * 1) NOTICE - subject of your search in Wikipedia is between the quotation marks: "Waterloo, Ontario."
 * 2) NOTICE - "Wikipedia: the Free Encyclopedia" is in italics.
 * 3) NOTICE - the external link to the article in Wikipedia where the information was accessed.
 * 4) NOTICE - the date the information was placed in the FamilySearch Wiki.

Be sure to create a header ==References== if there is not one there already.

They will be displayed wherever you place this tag: