User:Wonghk3/Sandbox/WikiTextDa5

CH-26: Width & Height
FOLLOW samples on tutorial page... Width_and_Height

WIDTH of a Page

 * We can control the width of a page using a paragraph or div tag
 * Two types of attribute coding can be used:

width:500px (for pixels) width:50%  (as a percent of the page)

TO DEMO: 1. Copy Lorem Ipsum PP to sandbox 2. Copy the following with closing div tag 3. Note: background color is lightseagreen and font color is white; and,
 * with width at 500px, the PP occupies over half of the page

4. Note also the words are wrapping...

{Lorem ipsum...} 5. Copy the first PP further down the page 6. Change from pixel to percent (50%) 7. Note again the word wrapping but this time only half of the page is used for the paragraph

HEIGHT of a Page
height:300px 8. Add height attribute to second paragraph 9. Note also, you can add multiple attributes using semicolon NOTE: You can use height attribute to separate images cleanly instead of using breaks.
 * The height of a page can also be controlled
 * It uses the attribute code:
 * Note: You can NOT use percent to control height

CH-27: Alignment
FOLLOW samples on tutorial page... Alignment

CENTERING TITLES

 * Titles default to the left of the page.
 * They can be aligned on the page using the following attribute: (text-align:center)

I Love Wikitext

I Love Wikitext

I Love Wikitext

TO DEMO: 1. copy the first example into sandbox 2. change the value to show diff placing of Title

VERTICAL ALIGNMENT

 * To create a container or box with text in it, we combine two attributes:

This text is in the middle

CENTERING HEADERS (learned in HEADER chapter)

 * Centering headers requires use of  tags
 * place attribute within the h# tags

CENTERING HEADERS

CH-28: Tables
FOLLOW samples on tutorial page... Tables


 * OPENING and CLOSING TAGS Use curly bracket and a pipe: {| and |}


 * ROWS Use a pipe and a dash (no closing tag): |-


 * CELLS Use a pipe only (no closing tag): |


 * ADD BORDERS and BACKGROUND COLORS Shortcut to an actual table, add a class: {| class="wikitable"


 * ADDING ADDITIONAL ROWS AND CELLS Just add more rows and cells.


 * HOW TO STRUCTURE A LIST USING TABLES See sample coding in Univ,paying attn to NOTICE...

CH-29: Breadcrumb Trails
FOLLOW samples on tutorial page... Breadcrumb_Trails

EXAMPLES:

NOTE: red link. Go back to Counties, find Dublin, and change PAGENAME to County_Dublin,_Ireland_Genealogy

NOTE: must keep the diacritical marks

Attica, New York NOTE: go to this page and note multiple breadcrumbs & why so

CH-30: Ref/Footnotes
FOLLOW samples on tutorial page... References/Footnotes

Footnotes and References use the Attribute:

To place the list of footnotes on the bottom of the page, find or add the heading References, then enter: ==References==

TO DEMO: 1. Copy the Lorem ipsum PP to sandbox 2. add the stated references (three of them), then show preview 3. at bottom of the page type the references header and ending tag 4. NOTE: don't need beginning tag 5. demonstrate by switching between the two by clicking on the footnote number

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.

TO DEMO #2: To assign the same footnote twice in your text, you need to use HTML coding:

CH-31: SEO
FOLLOW samples on tutorial page... SEO


 * SEO is acronym for Search Engine Optimization
 * appears at top of page --> to VIEW: go to Adair County, Missouri genealogy in search
 * 25 words or less statement
 * must contain article geographic location and the terms: genealogy, ancestry, or family history to be first or second page find