User:Wonghk3/Sandbox/WikiTextDa2

CH-10: IMAGE EMBEDDING
FOLLOW samples on tutorial page... Images


 * Images makes articles more interesting to read and may be used to illustrate concepts.
 * ALL images must be approved before uploading them into the Wiki: see CH-8 Wiki Missionary
 * Image must be uploaded into Wiki to its own page
 * AN IMAGE is embedded onto a page as an INTERNAL LINK
 * It's okay to replace word File with the word Image
 * If you see an image on a wiki page and want to know its file name: right click on the image and send the link to a tab.
 * FOLLOW samples on tutorial page... Images

DO YOU RECALL how you embedded a picture of yourself onto your profile page? SHOW ME: Previously, we learned how to (1)Embed an image; (2) change its size; and (3) place it on a page  


 * 1) EMBED image onto the page --->copy copy image as is, then surround it with two square brackets then add the word "file:" or "image:"
 * 2) SIZE the image  ->add change the size using pipe followed by size, eg. 200px  (NOTE:defaults to uploaded file size)
 * 3) PLACE image on the page ->add the word right (NOTE:defaults left)

Tooltips
What are Tooltips? (a little box that appears when you hover your mouse over the image) SHOW ME:

Abbreviation Tooltip
What is an Abbreviation Tooltip? ''(a word or phrase that serves as an abbreviation for the given title) SHOW ME:

Adding a border around the image with a centered caption
SHOW ME:
 * 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 & TEXT; Embedding PDF
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 (Handcart pioneers.jpg|300px) 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

EMBEDDING A PDF FILE

Here are the abbreviated steps to Embed a PDF File: 
 * File:Beginning Research Techniques.pdf
 * Media :Beginning Research Techniques.pdf
 * Media:Beginning Research Techniques.pdf
 * Beginning Research Techniques
 * Don't forget the pipe | symbol between the link and the name you give it.

CH-14: SNIPPING TOOL and PAINT
A. Snipping Tool


 * 1)  To Find:  Click on "O" to the right of the "windows' icon, then search for: Snipping Tool
 * 2)  right click and pin to TASKBAR for future use

B. Paint


 * 1)  To Find:  Click on "O" to the right of the "windows' icon, then search for: Paint
 * 2)  right click and pin to TASKBAR for future use

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 15-21 Paragraphs, Fonts, Attributes, & Backgrounds