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?
 * ENTER KEY > press enter key where break is desired; NOTE: using the enter key smaller space between paragraph than linebreak
 * LINE BREAKS
 * PARAGRAPH TAGS: {TEXT}

TO DEMO in Sandbox: 1. copy the Lorem Ipsum paragraph to the sandbox

SHOW ME: using ENTER KEY 2. separate PP by one 'enter' at Class and Morbi, then do a show preview
 * RESULTS: edit box breaks PP but view area shows no break (unless add a second enter is pressed --> SHOW ME)

SHOW ME: using    3. replace enter with   , then do a show preview
 * RESULTS: edit box and view area both show a break as inserted

SHOW ME: using paragraph tags =    4. replace  with PP-tags before and after each paragraph, then show preview
 * RESULTS: view area shows breaks between each PP AND we can now manipulate fonts

Why use the PP tag?
 * preferred method to place PP on a page
 * there is more space around the individual paragraphs
 * allows us to manipulate 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


 * 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
 * What is the difference between Inline Styling and Cascade Style Sheets (CSS) mentioned in Chapter 1?
 * Inline Styling is a subset of CSS; e.g. CSS covers a whole series of codes; Inline is specific to an instance.

TO DEMO:
 * Using Lorem Ipsum paragraph from preceeding lesson,
 * remove first two Lorem Ipsum PP
 * copy style="font-family:times new roman" to first PP-tag break (Lorem...ullamcorper)
 * copy style="font-family:ALGERIAN" to second PP-tag break (Curabitur...in)
 * press show preview and compare


 * Note:
 * all parts of the coding must be precise else results may be strange
 * all three PP-tags on this page constitute CSS, but there are only two instances of Inline style coding

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 PP, 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}  QUESTION: What happens to the [edit source] using the header tag?
 * ANSWER: using the h# style or tag 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 <p style="color:red">{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

<p style="color:red">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)

<p style="color:red">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

<p style="background-color:lightgreen">{TEXT}

<p style="color:red">TO DEMO: Add '; background-color:lightgreen' to Nulla varius... paragraph.