HTML and Wikitext - Lesson SevenEdit This Page

From FamilySearch Wiki

Lesson One > Lesson Two > Lesson Three > Lesson Four > Lesson Five > Lesson Six > HTML and Wikitext - Lesson Seven > Lesson Eight

Attributes
Attributes go inside Element tags
Elements

This is the HTML code

FamilySearch Wiki


Contents

What will you learn in Lesson Seven?

  • How to create Unordered Lists
  • How to create Ordered Lists
  • How to "nest" lists
  • How to create Tabs
  • How to create Links
  • When to use spacing or padding?
  • How to create columns of text

Lists

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

  • Unordered - List of items that don't need to be in any particular order with a bullet before each item.

  • Ordered - List items that might need to be listed in order of importance or a procedure that must be done in a particular sequence of steps. A number appears instead of a bullet 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 two other kinds of bullets: circle and disc.
  • The code for the circle and disc are placed in the <ul> element.:
<ul style="list-style-type:circle" >
<ul style="list-style-type:disc" >
  • Here's the coding for a unordered lists in HTML and Wikitext:
HTML Wikitext

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


*Fruits
*Vegetables
*Nuts
*Grains

Html7.jpg

  • As you can see, Wikitext has a simpler way to create unordered lists, but you are limited to the default square bullet. 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
  • There are four types of numbering available in ordered lists, unfortunately only the default is available in Wikitext even with coding in HTML.
  • Do not place any objects or other codes on an ordered list between the items on the list or the numbering will start over.
  • Here's the coding for ordered list in HTML and Wikitext:
HTML Wikitext

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


#Fruits
#Vegetables
#Nuts
#Grains

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
  • Notice that the list of fruits, Apples, Oranges and Pears, is nested below the word Fruits.
  • Notice that the list of apples, Red Delicious, Golden Delicious and Granny Smith, is nested below the word Apples.
  • The default bullet is a square.
  • The default bullet for nested lists is also the square.
  • Indentation is automatic.

  • It gets a bit tricky keeping track of the nested lists so let's build this nested list from scratch so you can see the process:

First step is to install the <ul> and </ul> elements which tells the browser that it is to now process a list.

HTML Wikitext
<ul>
</ul>

 

  • Remember there is no wikitext equivilant for these two elements
  • Let's install the list of foods
HTML Wikitext
<ul>
<li>Fruits</li>
<li>Vegetables</li>
<li>Nuts</li>
<li>Grains</li>
</ul>


*Fruits
*Vegetables
*Nuts
*Grains


  • The elements have been indented to help you keep track of the coding. This does not happen naturally. You normally will see all the elements lined up vertically in HTML editor.

  • Put your curser between the word Fruits and the </li> and hit the enter key a couple of times. Should look like this:
HTML Wikitext
<ul>
<li>Fruits


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


*Fruits



*Vegetables
*Nuts
*Grains


  • Notice the </li> is down the page a couple of lines.
  • Let's install the list of fruits in the gap between Fruits and the </li> element.
HTML Wikitext
<ul>
<li>Fruits
<ul style="list-style-type:circle" >
<li>Apples</li>
<li>Oranges</li>
<li>Pears</li>
</ul>
</li>
<li>Vegetables</li>
<li>Nuts</li>
<li>Grains </li>
</ul>


*Fruits

**Apples
**Oranges
**Pears



*Vegetables
*Nuts
*Grains


  • Notice that the bullet attribute was installed in the <ul style="list-style-type:circle" >.

  • Now for the list of the different kinds of Apples.
  • Put a couple of lines between the word Apple and </li> like so:
HTML Wikitext
<ul>
<li>Fruits
<ul style="list-style-type:circle" >
<li>Apples


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


*Fruits

**Apples



**Oranges
**Pears



*Vegetables
*Nuts
*Grains


  • Notice that the disc bullets was installed in the <ul> element.
  • Now let's install the kinds of apples lists.
HTML Wikitext
<ul>
<li>Fruits
<ul style="list-style-type:circle" >
<li>Apples
<ul style="list-style-type:disc" >
<li>Red Delicious</li>
<li>Golden Delicious</li>
<li>Granny Smith</li>
</ul>
</li>
<li>Oranges</li>
<li>Pears</li>
</ul>
</li>
<li>Vegetables</li>
<li>Nuts</li>
<li>Grains</li>
</ul>


*Fruits

**Apples

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




**Oranges
**Pears



*Vegetables
*Nuts
*Grains


  • Here's the completed list with all the nested lists.
  • Fruits
    • Apples
      • Red Delicious
      • Golden Delicious
      • Granny Smith
    • Oranges
    • Pears
  • Vegetables
  • Nuts
  • Grains
  • Notice that the disc bullets were installed in the <ul> element for types of Apples.
  • For ordered lists the only difference is ol is used instead of ul.
  • In the Wikitext for ordered lists, you use the # sign instead of the *.
  • You can nest ordered lists, but they are all numbered, (no letters), just like the parent list.
  • There is no way to use other kinds of numbers or letters for the nested ordered lists.
  1. Fruits
    1. Apples
      1. Red Delicious
      2. Golden Delicious
      3. Granny Smith
    2. Oranges
    3. Pears
  2. Vegetables
  3. Nuts
  4. Grains

Tabs

Believe it or not, tabs can be created from lists. Here is how you do it.

  • We will use our Healthy Foods Lists.
  • Fruits
  • Vegetables
  • Nuts
  • Grains
  • First thing to do is remove the bullets with the list-style-type:none attribute in the <ul> element like so:
<ul style="list-style-type:none; ">
  • Here's our list without the bullets:

Fruits
Vegetables
Nuts
Grains

  • then In each of the <li> tags we will can add the following attributes:


border:1px solid red;
width:130px;
text-align:center;
float:left;
margin-right:3px;
border-radius:5px;
background-color:#ffe6ea;


Here is the coding for just the first tab:

<ul style="list-style-type:none; ">
<li style="
float:left;
border:1px solid red;
border-radius:5px;
width:130px;
text-align:center;
margin-right:3px;
background-color:#ffe6ea; "
>Fruits </li>


  1. Float:left was installed which caused the <li> tags to line up across the page.
  2. Installed a red border
  3. Installed rounded corners of 5px.
  4. Gave tabs a 130px width
  5. Centered the text in the tabs.
  6. Put a space between tabs of 3px.
  7. Gave tabs a background color.
  • Here's the final product with all the tabs:
  • Fruits
  • Vegetables
  • Nuts
  • Grains


  • If you want only to round the corners on just the top for example, substitute these two codes for border-radius:5px.
  • border-top-right-radius:5px
  • border-top-left-radius:5px
  • The other corners are:
  • border-bottom-right-radius:5px
  • border-bottom-left-radius:5px


  • Here are the tabs with only the top corners rounded:


  • Fruits
  • Vegetables
  • Nuts
  • Grains



Tabs - Uses for tabs

  • Just to reiterate, you can put images, text, etc in these inline tabs.
  • This is another way to create a gallery.
  • Tabs can link to sections of the article they are on.
  • Tabs can link to other articles or sections of other articles.
  • Tabs can link to other sites on the internet.

Links

In FamilySearch Wiki and on the Internet there are two kinds of links.

  • Internal Links - Linking to another article within the Wiki or to another page on your own Internet site
  • External Links - Linking to an altogether different site on the internet.
  • And like other subjects the HTML codes for links is different than Wikitext.

External

HTML Wikitext

<a href="https://familysearch.org/learn/ wiki/en/Main_Page">Main Page</a>

  • <a href="
  • ">
  • </a>

[https://familysearch.org/learn/wiki/en/ Main_Page Main Page]

  • [
  • space
  • ]
  • As illustrated above, here is another HTML link:

<a href="https://familysearch.org/learn/wiki/en/Help:Links">Help:Links</a>.

  • The HTML link will take you to the page, but as you can see, the coding is exposed and sometimes it will go beyond the right side of the page if it is long enough.
  • This is how this link looks in Wikitext coding:

Help:Links

  • As you can see the Wikitext link is shorter and neater.
  • If you see a HTML external link, change the HTML coding to the Wikitext coding.
  • Please Note: If the space is missing between the URL and the name of the link, you will see an external link in blue all right, but it will lead to an non-existent site.

Internal

HTML Wikitext

<a href="Main_Page.html">Main Page</a>

  • <a href="
  • ">
  • </a>

[[Main_Page|Main Page]]

  • [[
  • |
  • ]]
  • If you see a HTML internal link, change the HTML coding to the Wikitext coding for the same reason that you should change external HTML links to Wikitext links.
  • Please Note: If the pipe is left out, you will get a link in red.

Image Links - External

HTML Wikitext

<a href="http://en.wikipedia.org/wiki/Ireland"><img src="Beehive.jpg" width="50px>Main Page</a>

[[File:Beehive.jpg|50px|link=https:// familysearch.org/learn/wiki/en/Main_Page FamilySearch Wiki]]

  • Notice, that even though it is an external link it still uses double [[ ]]. This is because the image is from the Wiki data base and not from an outside source. The external link is then part of the internal image.
  • Here is an example of an image with an imbedded external link:

link=http://en.wikipedia.org/wiki/ Church_of_Ireland

  • Mouse over the image and the cursor will appear. Click on the image and you will be taken to the page it is linked too.
  • If you see HTML coding change it to Wikitext coding.
  • FamilySearch Wiki does not allow personal or public images without approval.

Image Links - Internal

HTML Wikitext

<a href="Main_Page"><img src="Beehive.jpg" width="50px">Utah</a>

[[File:Beehive.jpg|50px|link=Utah Genealogy]]

  • Here is an example of an Internal Image Link:

Beehive.jpg

  • Mouse over the image and the cursor will appear along with a small box, called a tooltip with the name of the page the image is linked to.
  • Click on the image and you will be taken to the page the image is linked to.
  • FamilySearch Wiki does not allow HTML coding for images. If you see it change it to Wikitext coding.
  • FamilySearch Wiki does not allow personal or public images without approval.

Linking to a Section of a Page

  • Each heading create by wikitext, in other words, using the = signs in the Wiki is an anchor.
  • What are Anchors?
  • It is a section of an article that can be directly link too.
  • Rather than an internal link going to the top of an article and then having to scroll down to the section you are looking for, you link right to that section.
  • Let's say you want to send a reader to the subject of "floating" in these HTML lessons. It is in lesson three, but rather than sending the patron to lesson three and then scrolling down to the section on floating, you can links right to it.
Floating Objects

Here is the coding for this section in lesson three:

[[HTML and Wikitext - Lesson Three#Float|Floating Objects]]

  • Notice the pound sign # before the name of the header "Float".
  • The # sign tells the browser to look for a header by the name of "Float" and stop there.

E-Mails

HTML Wikitext

<a href="mailto:othersite@browser.com>link name</a>

  • <a href="
  • ">
  • </a>

[mailto:othersite@browser.com link name]

  • [
  • space
  • ]
  • As in all external links, you need a space between the URL and the name of the link or you will be a link that is in blue but does not exist.

Padding or Margins?

Spacing and Padding seem to give the same effect, that is, a space or gap between text, images, etc. When should one use spacing or when should one use padding?

  • Remember padding gives space between data and its container.
  • Margins give space around the outside or between containers.
  • Some programmers prefer padding to margins. Experiment to see which you like.

Let's illustrate the effect of both. Here are two containers with text. They have the float:left attribute.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


  • A background color is applied to see the effect of spacing and padding.
  • Notice there is no space between the text and the edge of the container.
  • There is no space between the containers either.
  • The net effect is that the text in each container are right next to each other without any spacing between the text.

Let's see the effect with padding and then margins:

Padding - effects

Let's put 20px of padding in place:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


  • Notice that 20px of padding gives 20 pixel of space all round the text.
  • Does not effect the space between the containers.


Margin - effects (no padding)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


  • Notice that the margin attribute gives the 20 pixel space between the edges of the two containers.
  • Does not effect the space between the text and the container.

So when do you use padding and margins

  • If you have text inside of a container with borders and you want some space between the text and the borders, you use padding.
  • If you want to put space between container elements, use margins.
  • If there are NO borders, then it does not matter which you use. The affect is the same, that is, space between text.

Columns without tables

Sometimes you will see large chunks of text in an article. Text going all the way cross a wide page can make it hard for you to find the continuation of a sentence on the next line.

  • Putting large amount of text in columns solves this problem.
  • The use of columns is the standard format in newspapers and newsletters.
  • Putting text in columns can be done with the column attribute.
  • The column attribute allows you to install the text in columns without having to use either, tables, positioning or div tags.
  • This is two columns of text using the column attribute:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.


  • Notice how the length of each column is about the same.

Here is the coding for the above two columns. There is no Wikitext equivalent.

<div style=
"column-count:2;
-moz-column-count:2;
-webkit-column-count:2; " >

  • You can set up any number of columns but make sure it looks good. Three or less is about right for the width of articles in FamilySearch Wiki.
  • If you're wonder about the "-moz-column" or the "-webkit-column," it is to tell Firefox, Chrome and Safari to pay attention to this attribute. Sometime you have to put this kind of coding in because these browsers will not see it unless it is pointed out to them.

Column Gap

  • If you want to increase the gap between the columns you add a column-gap attribute.
  • Here is a three column format with 20px gap between the columns.

<div style=
"column-count:3;
column-gap:20px;
-moz-column-count:3;
-moz-column-gap:20px;
-webkit-column-count:3;
-webkit-column-gap:20px;
"
>

  • Here's what the columns look like with a gap of 20px:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

Lines Between Columns

  • If you want to have a line between the columns, you use the column-rule attribute:

<div style=


"column-count:3;
column-gap:20px;
"column-rule: 2px outset #000000;


-moz-column-count:3;
-moz-column-gap:20px;
-moz-column-rule: 2px outset #000000;


-webkit-column-count:3;
-webkit-column-gap:20px;
-webkit-column-rule: 2px outset #000000; "
>

Here's what the columns look like with a line between the columns:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.



Html7.jpg

  • When editing aticles if you should find an large amount of text, consider using column attribute to make the reading of the material a bit easier.

What you have learned in Lesson FIve?

  • How to create Unordered Lists
  • How to create Ordered Lists
  • How to "nest" lists
  • How to create Tabs
  • How to create Links
  • When to use spacing or padding
  • How to create columns of text

Homework

Problem One - Lesson 5

Create a nested list

  • First set of bullets - Three of your favorite authors.
  • Inside the three favorite authors nest two books from each author. Make bullets circles.
  • Inside the two books, nest two of the main characters. Make bullets discs.

Answer to Problem One - Lesson 5

Problem Two - Lesson 5

Create a set of four tabs with links to the first four HTML - Wikitext lessons.

  • Rounded only on the top two corners.
  • 150px wide.
  • 10px between each tab.

Answer to Problem Two - Lesson 5

Problem Three - Lesson 5

  • Create an internal link an article of the state or country in the wiki from where an ancestor came from.
  • Create an internal link to section on that state or country page.
  • Create an external link to your favorite genealogical internet site.
  • Create an external link to the w3school.com/default.asp.
  • Create an internal link to a section of an article from an image. Keep image to 100px wide. (you pick one)
  • Create an external link from an image. Keep the image to 75px wide. (you pick one)

Answer to Problem Three - Lesson 5

Problem Four - Lesson 5

  • Create two columns from the text below.
  • Place a gap of 15px between the columns.
  • Place a red 2px line between the columns.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Answer to Problem Four - Lesson 5

On to Lesson 6


 

Need wiki, indexing, or website help? Contact our product teams.


Did you find this article helpful?

You're invited to explain your rating on the discussion page (you must be signed in).

  • This page was last modified on 13 May 2015, at 18:02.
  • This page has been accessed 3,938 times.