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

From FamilySearch Wiki
Jump to: navigation, search
m (Lists - Nesting)
m (Lists - Nesting)
Line 145: Line 145:
 
<font color="green"><nowiki>**</nowiki></font>Oranges<br>
 
<font color="green"><nowiki>**</nowiki></font>Oranges<br>
 
<font color="green"><nowiki>**</nowiki></font>Pears<br>
 
<font color="green"><nowiki>**</nowiki></font>Pears<br>
<br>
+
<br><br><br>
 
<font color="green"><nowiki>*</nowiki></font>Vegetables<br>
 
<font color="green"><nowiki>*</nowiki></font>Vegetables<br>
 
<font color="green"><nowiki>*</nowiki></font>Nuts<br>
 
<font color="green"><nowiki>*</nowiki></font>Nuts<br>

Revision as of 21:20, 10 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:

Unordered lists

A list of items that are marked with bullets like so:

  • Fruits
  • Vegetables
  • Nuts
  • Grains

There are many kinds of "bullets" that can be used in unordered lists. See Unordered lists

Here is the comparison coding for unordered lists:

HTML Wikitext

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


*
*
*
*

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>


#
#
#
#

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. Use indentation with colons to help you keep track.
  • 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


  • On numbered lists be sure that are is nothing between the items on the list or the numbering will start over.

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

Tabs

Abbr

Clickable Maps