User:Wonghk3/Sandbox/WikiTextDa2

CH-10 and 11: IMAGES
FOLLOW samples on tutorial page... Images
 * Placing an image on a page makes a page more interesting a read
 * Images are used to illustrate concepts in our articles
 * ALL images must be approved before placing it into an article; see policy

CODING OPTIONS

 * EMBED to PAGE (ref WikiMiss Ch-8)
 * Image must be uploaded into Wiki
 * Okay to replace 'File' with 'Image'


 * IMAGE SIZE: Embedded with original uploaded file size
 * IMAGE PLACEMENT: DEFAULT is Left; ALT: 'right' or 'center'
 * TOOLTIPS: the little box that appears when mouse hovers over image


 * 1) copy image as is
 * 2) add size (various to show diff ending with 200px)
 * 3) add placement  (right/center ending with right)
 * 4) add name, then bring attention to tooltip


 * ABBREVIATION of TOOLTIP NAME uses an abbr div tag:


 * IMAGE BORDERS, CAPTION, CAPTION POSITION
 * IMAGE BORDERS places a border around the image
 * REPLACE 'right' or 'center' with 'thumb'
 * Image DEFAULTS to the left; to place on right, must enter '|right' after thumb
 * Caption also DEFAULTS to the left
 * Position Caption using placement div tags

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

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


 * EXTERNAL LINKS (uses URL):
 * INTERNAL LINKS (uses Article Name):
 * TOOLTIP - takes you to URL for external links and article for internal links.
 * All must use pipe to separate name because external link is inside internal link.

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. Text/images appear 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' with image: Place the image on the LEFT, then note the text wraps on the right 5. make the image smaller by adding '|200px' 6. add '|left' after the size, then show preview

C. Text 'floats' with image: Place image on the RIGHT, then note the text wraps on the left 7. replace '|left' with '|right', then show preview D. Impact of floating text when image has a border 8. replace '|right' with '|thumb', then show preview

E. How to add captions within the border 9. append the code with the caption, then show preview