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

From FamilySearch Wiki
Jump to: navigation, search
m
m (Unordered lists)
Line 4: Line 4:
 
====Unordered lists====
 
====Unordered lists====
 
A list of items that are marked with bullets like so:
 
A list of items that are marked with bullets like so:
<ul style="border:1px solid red; ">
+
<ul style="border:1px solid red; list-style-position:inside;">
<li style="margin-left:50px; ">Fruits
+
<li>Fruits
 
<li>Vegetables
 
<li>Vegetables
 
<li>Nuts
 
<li>Nuts

Revision as of 13:50, 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:

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

  • 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