User:Wonghk3/Sandbox/WikiTextDa3

CH-14: PARAGRAPHS
FOLLOW samples on tutorial page... Paragraphs

How are blocks of text loaded on a page and separated into paragraph blocks?
 * TEXT LOAD > means to copy and past text into an article

How to keep paragraphs separated?
 * SPACE KEY > enter space key where break is desired; NOTE: using the space key may not always give desired result
 * LINE BREAKS
 * PARAGRAPH TAGS: {TEXT}

TO DEMO in Sandbox: 1. copy the Lorem Ipsum paragraph (PP) three times to the sandbox

SHOW ME: using SPACE 2. separate PP by one 'space' at Curabitur and Nulla, then do a show preview 3. RESULTS: edit box breaks PP but view area shows no break (unless add a second space --> SHOW ME)

SHOW ME: using    4. replace space with   , then do a show preview 5. RESULTS: edit box and view area both show a break as inserted

SHOW ME: using paragraph tags =    6. replace  with PP-tags before and after each paragraph, then show preview 7. RESULTS: view area shows breaks between each PP AND we can now manipulate fonts 8. ok to combine commands

Why use PP tag?
 * preferred method to place PP on a page
 * allows us to manipulate the text font,size, colors, etc...which takes us to the next chapter...

CH-15: CHANGING FONTS
FOLLOW samples on tutorial page... Changing_Fonts

CHANGING FONTS using INLINE STYLING

TO DEMO: 1. Using Lorem Ipsum paragraph from preceeding lesson,
 * Wikitext uses fonts similar to what we find in a word processor -> show available fonts from WORD
 * P-tags allow us to change fonts using what is called Inline Styling code -> go thru UNIVERSITY info
 * modify paragraph 2 code to  {Curabitur...ligula.} 

2. Note: all parts of the coding must be precise else results may be incorrect

ATTRIBUTES

1. refer to University 2. note that style type is 'human style' 3. The attribute is composed of the property eyecolor; and, the value which is blue 4. Point out in PP2, the style and attribute
 * The word STYLE refers to page or text layout and includes format elements called ATTRIBUTES
 * An attribute is made up of a PROPERTY and its VALUE
 * There are no limits to the number of attributes you can add

CH-16: FONT SIZE
FOLLOW samples on tutorial page... Sizing_Fonts

ENLARGING FONTS 

TO DEMO: Add semicolon, then add 'font-size:24px' to PP2
 * Attribute is: PROPERTY=font-size and VALUE=desired size in px separated by a COLON
 * Add to existing style code by separating each attribute with a SEMICOLON

{Curabitur...Ligula}

OTHER WAYS TO ENLARGE FONTS -> use EM and VW which are not universally used in Wiki

ENLARGING HEADERS with tags with h# meaning the size of header
 * replace ==HEADER== with  {HEADER} 
 * Note: using h# style will loose [edit source] to the right of the header

CH-17: FONT COLORS
FOLLOW samples on tutorial page... Font_Colors

CHANGING FONT COLOR

Attribute is: PROPERTY=color and VALUE=desired color {Nulla...vitae.}

You can get more colors at W3 colors Can also click on Shades for more color variations, need to use HEX code preceded by # sign

TO DEMO: 1. Copy p-coding from "Curabitur..." and place before "Nulla..." 2. Change font from ALGERIAN to New Times Roman 3. Add  "; color:red" 4. Show preview

CH-18: FONT BOLD and ITALICS
FOLLOW samples on tutorial page... Font_Bold-Italics

TO BOLD Words or Sentences (THREE apostrophes B4 and AFT TEXT)


 * Note: Do NOT make headers bold because it's already bolded; may result in different look with other like headers

TO ITALICIZE Words or Sentences (TWO apostrophes B4 and AFT TEXT)


 * Note: use of quotation marks will NOT work.

TO BOLD AND ITALICIZE Words or Sentences (FIVE apostrophes B4 and AFT TEXT)

TO DEMO: In "Nulla..." paragraph, bold the first sentence and italicize the last sentence.

CH-19: MULTI-ATTRIBUTES
FOLLOW samples on tutorial page... Multi-attributes

MULTIPLE ATTRIBUTES are installed with a 'SEMI-COLON' between each attribute and are unlimited in a tag.

CH-20: BACKGROUNDS
FOLLOW samples on tutorial page... Backgrounds

CHANGING BACKGROUND COLOR

Attribute is: PROPERTY=background-color and VALUE=desired color

{TEXT}

TO DEMO: Add '; background-color:lightgreen' to Nulla varius... paragraph.