User:Wonghk3/Sandbox/WikiTextDa3

From FamilySearch Wiki
Jump to navigation Jump to search


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

CH-15: PARAGRAPHS[edit | edit source]

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 <br>
  • PARAGRAPH TAGS: <p>{TEXT}</p>

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 <br> 

3. replace enter with <br>, then do a show preview

RESULTS: edit box and view area both show a break as inserted
SHOW ME: using paragraph tags = <p></p>

4. replace <br> 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-16: INLINE STYLING[edit | edit source]

  • CSS - Cascading Style Sheets
  • Format for Inline Styling
  • Attributes = property:value
  • W3schools.com





CH-17: CHANGING FONTS[edit | edit source]

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,
  1. remove first two Lorem Ipsum PP
  2. copy style="font-family:times new roman" to first PP-tag break (Lorem...ullamcorper)
  3. copy style="font-family:ALGERIAN" to second PP-tag break (Curabitur...in)
  4. press show preview and compare
  • Note:
  1. all parts of the coding must be precise else results may be strange
  2. all three PP-tags on this page constitute CSS, but there are only two instances of Inline style coding

ATTRIBUTES

  • 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

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


ENLARGING FONTS

<p style="font-size:24px">
  • 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

TO DEMO:

Add semicolon, then add 'font-size:24px' to PP2

<p style="font-family:ALGERIAN;font-size:24px">{Curabitur...Ligula}</p>

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


ENLARGING HEADERS with <h#>tags with h# meaning the size of header

Replace ==HEADER== with <h2 style="font-size:50px">{HEADER}</h2>

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-18: FONT COLORS[edit | edit source]

FOLLOW samples on tutorial page... Font_Colors

CHANGING FONT COLOR

Attribute is: PROPERTY=color and VALUE=desired color

<p style="color:red">{Nulla...vitae.}</p>

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-19: FONT BOLD and ITALICS[edit | edit source]

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-20: MULTI-ATTRIBUTES[edit | edit source]

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

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>

TO DEMO:

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