User:Wonghk3/Sandbox/WikiTextDa2

CH-10 and 11: IMAGES
FOLLOW samples on tutorial page... Images
 * Images makes article more interesting a read and may be used to illustrate concepts
 * ALL images must be approved: see CH-8 Wiki Missionary
 * Image must be uploaded into Wiki
 * AN IMAGE is embedded onto a page as an INTERNAL LINK
 * Okay to replace File with Image

SHOW ME: How to Embed/Customize Image:


 * 1) EMBED IMAGE ->copy image only as is
 * 2) IMAGE SIZE ->add diff sizes ending with 200px  (NOTE:defaults to uploaded file size)
 * 3) IMAGE PLACEMENT -->add center, then right  (NOTE:defaults left)

SHOW ME: Tooltip and Image Caption
 * 1) TOOLTIPS >add "Going to Zion"; (NOTE:little box name when mouse hovers over image)
 * 2) ABBREVIATE TOOLTIP NAME--->add abbr div tags below:

 SHOW ME: Borders around Image and Caption Position within Border
 * 1) ADD BORDER ->change image placement to thumb  (NOTE: THUMB DEFAULTS defaults IMAGE to the RIGHT and adds border)
 * 2) after thumb add code |left     (NOTE:moves image LEFT)
 * 3) POSITION CAPTION using placement div tags   (EXPLAIN:Caption defaults to the left; desired is center)
 * 4) NOTE small icon inside of border --> right click to get detailed info on file/image

CH-12: IMAGE LINKS
FOLLOW samples on tutorial page... Image Links

We are adding links to an image, so when you click/right click on the image, it takes you to the new link.

Important to note:
 * Recall: Images are embedded using double square brackets [[file:Handcart pioneers.jpg]], therefore it is an internal link
 * When we make an image go to an external link, we use internal link coding, meaning use of pipes and not spaces
 * External links still need NAME for tooltip to show where link is going to
 * Internal links still an option; can add NAME or not


 * EXTERNAL LINKS (uses URL):


 * INTERNAL LINKS (uses Article Name):

CH-13: IMAGES and TEXT
FOLLOW samples on tutorial page... Images and Text

How text behaves around images: We will be using the Handcart pioneer image and a Lorem ipsum paragraph, a 'fake' text paragraph. Students tend to focus on reading the text and not on what is being taught. This 'fake' paragraph keeps our focus on the lesson.



A. DEFAULT: Text/image appears in the ORDER it is placed inside your edit box 1. place image (.jpg) ONLY onto screen and space down one 2. copy LOREM IPSUM paragraph (3x) under image, then show preview 3. move image below text, then show preview 4. move image back to top

B. Text 'floats' RIGHT when image is moved LEFT   (note: text wraps around image) 5. make the image smaller by adding '|200px' 6. add '|left' after the size, then show preview

C. Text 'floats' LEFT when image is moved RIGHT 7. replace '|left' with '|right', then show preview D. What happens to the text when the image has a border? 8. replace '|right' with '|thumb', then show preview

E. What happens when we add caption inside the border? 9. append the code with the caption, then show preview

THIS IS AN EXAMPLE OF CSS!

 Go to Wikitext Chapter 1 - HOME

Scroll down to CSS - Cascading Style Sheets

Bring attention to: how we are adding image size, placement, borders & captions on one command line...THIS IS CSS!

We'll learn more about using this feature and In-Line Styling in tomorrow's lessons: WikiText Ch 14-20 Paragraphs, Fonts, Attributes, & Backgrounds