Difference between revisions of "HTML and Wikitext - Lesson Five"

From FamilySearch Wiki
Jump to: navigation, search
m (Unordered lists)
m (Unordered lists)
Line 14: Line 14:
 
<li>Grains
 
<li>Grains
 
</ul>
 
</ul>
 
+
<table><tr><td>
::*The default bullet is the square.
+
*The default bullet is the square.
 
*There are three kinds of bullets in unordered list: square, circle and round disk.
 
*There are three kinds of bullets in unordered list: square, circle and round disk.
 
*To use the the circle or disk bullet, you have to code with HTML using the <font color="red">list-style-type</font> attribute in the <font color="green"><nowiki><ul></nowiki></font> element  like so.
 
*To use the the circle or disk bullet, you have to code with HTML using the <font color="red">list-style-type</font> attribute in the <font color="green"><nowiki><ul></nowiki></font> element  like so.
 
::<font color="green"><nowiki><ul</nowiki></font> <font color="blue">style=</font><font color="red">"list-style-type:circle; "</font><font color="green">></font>
 
::<font color="green"><nowiki><ul</nowiki></font> <font color="blue">style=</font><font color="red">"list-style-type:circle; "</font><font color="green">></font>
 
*Learn more about unordered lists see w3school's [http://www.w3schools.com/html/html_lists.asp Unordered lists]
 
*Learn more about unordered lists see w3school's [http://www.w3schools.com/html/html_lists.asp Unordered lists]
 
+
</td></tr></table>
 
Here is the comparison coding for unordered lists:
 
Here is the comparison coding for unordered lists:
  

Revision as of 15:02, 11 January 2014

Attributes
Attributes go inside Element tags
Elements

This is the HTML code

FamilySearch Wiki


Lists

Let's start a whole new topic - lists. There are two kinds of lists:

  • The Unordered List with a bullet before each item on the list.
  • The Ordered List with a number before each item on the list.

Unordered lists

Here's an example of an unordered list:

  • Fruits
  • Vegetables
  • Nuts
  • Grains
  • The default bullet is the square.
  • There are three kinds of bullets in unordered list: square, circle and round disk.
  • To use the the circle or disk bullet, you have to code with HTML using the list-style-type attribute in the <ul> element like so.
<ul style="list-style-type:circle; ">

Here is the comparison coding for unordered lists:

HTML Wikitext

<ul>
<li>Fruits
<li>Vegetables
<li>Nuts
<li>Grains
</ul>


*
*
*
*

Html7.jpg

  • As you can see, Wikitext has a simpler way to create unordered lists, but when nesting another list, the bullets of the nested list will be the default square. If you want to use different bullets you have to use HTML coding.

Ordered Lists

A list of items by number like so:

  1. Fruits
  2. Vegetables
  3. Nuts
  4. Grains
HTML Wikitext

<ol>
<li>Fruits
<li>Vegetables
<li>Nuts
<li>Grains
</ol>


#
#
#
#

Html7.jpg

  • The ordered list in Wikitext is simple in coding as well as the unordered list. However, design of numbers, orders, etc are very limited. You have to code with HTML to get fancy with the format.

Lists - Nesting

You can put lists inside of lists inside of lists like so:

  • Fruits
    • Apples
      • Red Delicious
      • Golden Delicious
      • Granny Smith
    • Oranges
    • Pears
  • Vegetables
  • Nuts
  • Grains
  • It gets a bit tricky keeping track of the nested lists so pay close attention.
  • The default bullet is a square. The other styles have to be installed in the opening <ul> tag like so:
<ul style="list-style-type:circle" >Fruit
  • No closing </li> is required. One of the few elements that does not require one.
  • You will notice that the bullets are not the same on the nested lists. You use a style code to dictate what style of bullet you want to use.
  • The indenting is automatic.

Here is the coding for nested lists:

HTML Wikitext

<ul>
<li>Fruits

<ul>
<li>Apples
<ul>
<li>Red Delicious
<li>Golden Delicious
<li>Granny Smith
<ul>
<li>Oranges
<li>Pears
</ul>

<li>Vegetables
<li>Nuts
<li>Grains
</ul>


*Fruits


**Apples


***Red Delicious
***Golden Delicious
***Granny Smith


**Oranges
**Pears



*Vegetables
*Nuts
*Grains

  • Notice you have no way to customize your bullets.
  • On unordered lists, you are only allowed the square, regardless if you are installing other lists or not. To customize the bullets you have to use HTML code as shown above.
  • For numbered list you use multiple # signs just like *.
  • Here again on ordered lists, you only allowed a regular number regardless if you are installing other lists or not. To customize the numbers you have to use HTML codes.
  • On numbered lists do not place any objects or other codes between the items on the list or the numbering will start over.

Tabs

Believe it or not, tabs are create from lists. Here is how you do it.

  • Fruits
    • Apples
      • Red Delicious
      • Golden Delicious
      • Granny Smith
    • Oranges
    • Pears
  • Vegetables
  • Nuts
  • Grains

display

  • block
  • inline - use for putting images in galleries?

Headers

Links

Internal

  • headers are anchors.

External

Links to a place on a page

Categories

Sidebars

iframes

see if you can see what is wrong

  • create some broken items and see if anyone can see what the problem is from what has been taught so far.

can students build with seeing only a picture

Padding or Margins?

Misc html codes and their match in wikitext

  • indent - :
  • bold -
  • italics -

Columns without tables

references

categories

Abbr

Clickable Maps