User:Wonghk3/Sandbox/WikiTextA4

CH-14: INFOBOX- CREATING
FOLLOW samples on tutorial page... Infobox - Creating

WHAT ARE INFOBOXES


 * A specialized table in the form of a display box placed on a page.
 * The box contains quick references about people, locations, organizations, or administrative divisions.

ADVANTAGES OF INFOBOXES


 * ability to add/change info within them w/o editing the template
 * template can be changed on a particular page using "subst:" procedure
 * are coded to be edited only for the page on which they are embedded

CREATING AN INFOBOX WITH RENAMED PARAMETERS


 * Coding includes: open/close Table-tags, rows, and cells
 * the box is floated to the right side of the page using the attribute "float:right" in the Table-tag
 * first two rows use colspan="2" code to combine two columns in the table
 * parameters are added to accept user-input values by placing opening and closing curly brackets in the table: 
 * rename the parameters by ADDING a pipe after the parameter name, then ADDING an explanatory parameter name



SAVING THE INFOBOX template:Name of Society Infobox
 * Save the template using the word infobox in the title

CH-15: INFOBOX - PLACING
FOLLOW samples on tutorial page... Infobox - Placing

PLACING (EMBEDDING) AN INFOBOX; ADDING PARAMETER VALUES STEP 1: copy this infobox template into sandbox
 * Now that we've created (and presumably saved) an infobox, we need to place or embed that infobox onto a page.
 * I will demonstrate the steps using an infobox named  

STEP 2: add the parameters you used when you created the infobox between the curly brackets (I happened to look it up for this infobox)

STEP 3: add the values for each parameter, then 'show preview'


 * SEE RESULTS on right of page
 * Here's an EXAMPLE of infobox coding with values for Jackson County, Missouri


 * Here's an EXAMPLE of a Wiki Page (use to review coding): Abberley Parish, England

CH-16: IMAGE MAPS
FOLLOW instructions on tutorial page... Image Maps

==== ==== ==== ====

CH-17: SIDEBARS
FOLLOW samples on tutorial page... Sidebars

SIDEBARS vs INFOBOXES
 * FOLLOW Wiki University documentation + NOTE: Sidebars are SPECIALIZED TABLES saved as TEMPLATES
 * copy the sample coding onto my sandbox, show preview
 * NOTE: table tag, row tag, cell tags and a simple list are combined to make a sidebar
 * HOW TO SAVE: save as a template making sure the word "sidebar" is in the title (don't do this without prior approval!)
 * HOW TO EDIT: do an edit source on THIS PAGE, go to the bottom, look for Sidebar template, then click edit
 * EMBEDDING the SIDEBAR: do an edit source on THIS PAGE and note placement of the sidebar template at TOP
 * copy and paste the sidebar template onto my sandbox, show preview
 * do not do exercises

CH-18: NAVBOXES
FOLLOW samples on tutorial page... Navboxes

A NAVBOX is a TABLE and TEMPLATE
 * FOLLOW Wiki University documentation of a TYPICAL NAVBOX + NOTE: Navboxes are SPECIALIZED TABLES saved as TEMPLATES
 * copy the sample coding onto my sandbox, show preview
 * NOTE: it is a table with table tag, row tags, and cell tags ---> go through each line
 * HOW TO SAVE: save as a template making sure the word "navbox" is in the title (don't do this without prior approval!)
 * EMBEDDING the NAVBOX: performed by an Administrator; you will not see in the coding because it is "protected"
 * If do exercise, do not save as a template; just save it in your sandbox

CH-19: POSITION - RELATIVE
FOLLOW samples on tutorial page... Position-Relative


 * the position of text, images, templates, etc. are automatically placed on a page by the browser in the order loaded/coded; e.g. text first then image
 * we can position the items differently than how the browser wants to place it; e.g. INDEPENDENT OF or IN RELATION TO other objects on the page
 * we use position attributes:


 * RELATIVE POSITION (position:relative) = browser default; places objects in relation to where your browser placed it (IN RELATION TO)
 * ABSOLUTE POSITION (position:absolute) = places objects in relation to the entire page and COVERS UP whatever value is in that spot (INDEPENDENT OF)

HOW TO


 * 1. create a container with a width and height in the inline styling and place it on the right side of the page

SAMPLE CODE for a box:


 * 2. Add Lorem Ipsum paragraph to bottom and watch wrapping on the left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae. Morbi sollicitudin blandit sapien, eget congue nisl mollis in. Mauris ultrices porta dui vel hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a quam vulputate, luctus urna eget, molestie nisl. Praesent massa turpis, ullamcorper quis mi ac, faucibus convallis justo. Praesent vulputate lobortis est at facilisis.


 * 3. NOTE: you can use the position:relative attribute OR NOT; it doesn't matter because it is the default placement.


 * 4. RESULTS:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae. Morbi sollicitudin blandit sapien, eget congue nisl mollis in. Mauris ultrices porta dui vel hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a quam vulputate, luctus urna eget, molestie nisl. Praesent massa turpis, ullamcorper quis mi ac, faucibus convallis justo. Praesent vulputate lobortis est at facilisis.

WHAT IS IT'S PURPOSE THEN?


 * Serve as a container for an absolute positioned object
 * Makes possible to position objects absolutely inside a relative position object
 * If you move the relative positioned object, all the absolute position objects inside will move with it

CH-20: POSITION - ABSOLUTE
FOLLOW samples on tutorial page... Position-Absolute


 * Is like relative position, but does not "move" with the rest of the page content
 * Absolute positioned object will cover up anything in that spot, even another absolute positioned object

DEMONSTRATE
 * 1. COPY position:relative div-tag and paragraph and paste below
 * 2. ADD position:absolute attribute to the div-tag on the second PP; note difference
 * 3. INCREASE width and/or height value in both PP; note difference

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae. Morbi sollicitudin blandit sapien, eget congue nisl mollis in. Mauris ultrices porta dui vel hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a quam vulputate, luctus urna eget, molestie nisl. Praesent massa turpis, ullamcorper quis mi ac, faucibus convallis justo. Praesent vulputate lobortis est at facilisis. PLACING AN ABSOLUTE POSITION OBJECT INSIDE A RELATIVE POSITION CONTAINER
 * 1. CREATE another div-tag surrounding the absolute positioned coding
 * 2. CODING should look similar to this >>> show RESULTS >>> NOTE placement of box is left, above paragraph:

       

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae. Morbi sollicitudin blandit sapien, eget congue nisl mollis in. Mauris ultrices porta dui vel hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a quam vulputate, luctus urna eget, molestie nisl. Praesent massa turpis, ullamcorper quis mi ac, faucibus convallis justo. Praesent vulputate lobortis est at facilisis.


 * 3. ADD float:right attribute to first div-tag >>> show RESULTS >>> NOTE Paragraph is wrapping around box placed on the right:

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae. Morbi sollicitudin blandit sapien, eget congue nisl mollis in. Mauris ultrices porta dui vel hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a quam vulputate, luctus urna eget, molestie nisl. Praesent massa turpis, ullamcorper quis mi ac, faucibus convallis justo. Praesent vulputate lobortis est at facilisis.