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. NO CHANGES, FULL SCREEN: Copy Lorem Ipsum PP & label "1-Lorem..." 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.


 * NOTE: default font size and PP wraps when you max/shrink screen
 * EXPLAIN: paragraph wraps as you max/shrink screen is "browser-controlled"

2. ADD DIV TAG, FULL SCREEN: Copy PP & label "2-Lorem...", then add div-tag


 * NOTE: although font is bigger, PP still wraps when you max/shrink screen
 * EXPLAIN: still under browser control

3. ADD WIDTH @100%, FULL SCREEN: Copy PP & label "3-Lorem...", then add width attribute 
 * NOTE: no change in font, PP still wraps when you max/shrink screen
 * EXPLAIN: still under browser control

4. CHANGE WIDTH @50%, FULL SCREEN: Copy PP & label "4-Lorem...", then change width attribute % 
 * NOTE: no change in font, PP wraps to 50% of page
 * EXPLAIN: still under browser control

5. CHANGE WIDTH to 1677px and Background-color to blue, FULL SCREEN: Copy PP & label "5-Lorem...", then change width attribute px 
 * NOTE: no change in font, PP wrap is likened to width:100% at FULL SCREEN; however,
 * NOTE-2: when the screen is shrunken, the paragraph is "truncated" ---> meaning cut off
 * EXPLAIN: px is NOT under browser control

6. CHANGE WIDTH to 800px and Background-color to blue, FULL SCREEN: Copy PP & label "6-Lorem...", then change width attribute px 
 * NOTE: no change in font, PP text is wrapping at FULL SCREEN; however,
 * NOTE-2: when the screen is shrunken below the PP, the paragraph is again "truncated"
 * EXPLAIN: again, px is NOT under browser control

HEIGHT of a Page
height:300px
 * The height of a page can also be controlled
 * Value can only be px, not % because there is no page end.

6. ADD HEIGHT=200px, remove width and text color; and change background-color to violet, FULL SCREEN: Copy PP & label "7-Lorem..." 
 * NOTE: no change in font, PP text width is wrapping at FULL SCREEN, and there is additional space below; however,
 * NOTE-2: when the screen is shrunken, wrapping of the text takes up the addtl height space
 * NOTE-3: You can use height attribute, like the margin-bottom attribute to separate images instead of using line breaks.

EFFECT OF BORDERS ON PAGE (width of element)
.....Go back to Chapter 23 - Borders and reiterate the following:


 * CAUTION: When a border attribute is added to a div tag, must watch out that the content + border width does not exceed actual page width.

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

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

RESULTS: Note that because this is HTML coding and not wikitext coding, we loose the [edit source] option after we save. 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