User:Wonghk3/Sandbox/WikiTextDa5

From FamilySearch Wiki
Jump to navigation Jump to search


WIKITEXT (BASIC): DAY-5[edit | edit source]

CH-26: Width & Height[edit | edit source]

FOLLOW samples on tutorial page... Width_and_Height

WIDTH of a Page[edit | edit source]

  • 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

<div style="font-size:20px; background-color:lightseagreen; color:white">
  • 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

<div style="width:100%; font-size:20px; background-color:lightseagreen; color:white">
  • 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 %

<div style="width:50%; font-size:20px; background-color:lightseagreen; color:white">
  • 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

<div style="width:1677px; font-size:20px; background-color:blue; color:white">
  • 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

<div style="width:800px; font-size:20px; background-color:blue; color:white">
  • 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[edit | edit source]

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

6. ADD HEIGHT=200px, remove width and text color; and change background-color to violet, FULL SCREEN: Copy PP & label "7-Lorem..."

<div style="height:200px; font-size:20px; background-color:violet">
  • 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)[edit | edit source]

  • When a border is added to an element such as a div tag, the area of the div tag if it is called out will remain. If a container is 640 pixels wide and a 50 pixel border is added, the whole element will expand to 740 pixels and expand into the right sidebars. So if you are adding thick borders, you need to assess how it will affect the width of the entire element. Here's a sample:




.....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[edit | edit source]

FOLLOW samples on tutorial page... Alignment

CENTERING TITLES[edit | edit source]

  • Titles default to the left of the page.
  • They can be aligned on the page using the following attribute: (text-align:center)
<div style="font-size:30px">I Love Wikitext</div>
<div style="text-align:center; font-size:30px">I Love Wikitext</div>
<div style="text-align:right; font-size:30px">I Love Wikitext</div>

TO DEMO:

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

VERTICAL ALIGNMENT[edit | edit source]

  • To create a container or box with text in it, we combine two attributes:
<div style="line-height:50px; text-align:center;  font-size:30px; border:1px solid red">This text is in the middle</div>

RESULTS:

This text is in the middle

CENTERING HEADERS (learned in HEADER chapter)[edit | edit source]

  • Centering headers requires use of <h#></h#> tags
  • place attribute within the h# tags
<h2 style="font-size:20px;text-align:center">CENTERING HEADERS</h2>

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

FOLLOW samples on tutorial page... References/Footnotes

Footnotes and References use the Attribute:

<ref>{footnote itself}</ref>

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

==References==
<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[1] dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.[2] Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula[1] ac ullamcorper. Curabitur eget suscipit turpis.[3]


TO DEMO #2:

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

  1. 1.0 1.1 Translated as "pain itself"
  2. Translated as "the ugly need"
  3. Actually this whole paragraph is a complete nonsense

CH-31: SEO[edit | edit source]

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