HTML and Wikitext - Lesson OneEdit This Page

From FamilySearch Wiki

Learn HTML by small steps and homework to practice what you have learned.

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

Attributes
Attributes go inside Element tags
Elements

This is the HTML code

FamilySearch Wiki


Contents

What is HTML program language?

HTML.jpg
  • HTML stands for Hyper Text Markup Language.
  • It is the language of the internet. All programs such as JavaScript, CSS, jQuery and Java, are just different ways to manipulate the html code.
  • Wikitext – it is HTML "lite" or a lite weight version of HTML. It was developed for patrons of the wikis so they would not have to learn HTML.
  • HTML creates only static pages. A page that is programmed with HTML only produces pages of black print on a white background such as this paragraph. To add some color or any kind of character to HTML, you need CSS programming, which we will teach during these lessons. To add any dramatics to the page you need programs such as JavaScript and jQuery which, unfortunately, are not allowed in the wiki.
  • We will learn HTML first. As we progress, we will show the HTML side-by-side with the equivalent codes in Wikitext. In this way you will learn how to program the internet as well as FamilySearch Wiki. FamilySearch Wiki recognizes either programming language.

What you will learn in the lesson

  • How to create a table.
  • How to create borders on table.
  • How to control the width and height of a table.
  • How to give borders color.
  • How to give text color.
  • Where to find the codes for colors.
  • Where to find the different kinds of borders.
  • How to position text in a cell of a table.

Elements

Html2.jpg
  • The first piece of code we will learn about are Elements.
  • Elements are selectors enclosed by < > brackets. A selector is a item on a page such as a header, paragraph, table, etc.
  • Elements tells your browser (Chrome[1], Firefox, Internet Explorer, etc ) what it is to process next.
  • Elements are processed by the browser in the order that they appear in the code.
  • Since we are going to talk about tables first, here is an example of an Element used to create a table: <table>.
  • <table> is an opening tag in that it tells the browser that you are now want to open a table.
  • Whenever you have an opening tag you usually, but not always, need a closing tag which tells the browser that the coding for the element, in this case table, is finished.
  • The closing tag for tables looks like this: </table>.
  • Notice the / forward slash before the word table in this closing tag.

Html7.jpg

Because FamilySearch Wiki is a wiki, you may see your code automatically convert from HTML to Wikitext when you save it. It does not do this every time you save your work, but it could do so. In light of this, the equivalent Wikitext codes will be shown as we progress in these lessons. Keep entering HTML code but be ready to see your code in Wikitext. The matching codes will be in red boxes next to the HTML coding.

First Project - Creating a Table

The first project is how to create tables.

  • Before we continue, create a sandbox page called html or some other name where you can practice and do homework.
  • First step is to type the opening and closing tags for the table element:
<table></table>
  • It is always a good practice to type both opening and closing tags at the same time so you won't forget the closing tag. One of the major errors encountered in fixing pages that are all messed up is that a closing tag was missing.
  • Put two or three line returns between them.
  • Your sandbox page should look something like this:
HTML Wikitext

<table>

</table>

{|

|}
Html9.jpg You have just create your first HTML codes

Rows and Cells Inside Tables

Html5.png
  • In a table there are usually many rows.
  • Each row usually has many cells which contain the actual data.
  • The cells line up to form columns.
  • Rows are created with the <tr> </tr> (table row) tags.
  • Cells are created with the <td> </td> (table data) tags.
  • The cell tags are placed between the row tags.
  • For a row with four cells, the coding will look like this:
HTML Wikitext

<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

</table>

{|
|-
|
|
|
|

|}

Html9.jpg You have just created your first table.

Html7.jpg

Notice that the wikitext does not require a closing tag for the |- (<tr>) or the | (<td>) tags. When the browser sees a | tag, it knows that there is no more data to put in the previous cell and the new data is to be installed in the next cell. The only wikitext tags we have covered so far that require a closing tag are the table tags {| |}.


Tables usually have many rows

  • To create more rows, you need another set of <tr> elements and <td> elements for each cell in each new row.
  • To install more rows, just copy and paste after the last closing row tag </td> all the stuff between the first set of row tags.
  • Your coding for a table with two rows with four cells in each row should look like this:
HTML Wikitext

<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

</table>

{|
|-
|
|
|
|


|-
|
|
|
|

|}
  • To see what your table will look in in the Wiki, click the “Save page” button below the edit box.
  • Now what do you see?

Put Data in the Cells

  • You should see nothing because there is nothing in the cells. If you do see something, you have typed something wrong.
  • For you to see the table, you have to put something between the <td> </td> tags in each cell. Let's put capital letters in each cell.

Your HTML along with the Wikitext coding should look like this:

HTML Wikitext

<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>

<tr>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>

</table>

{|
|-
|A
|B
|C
|D


|-
|E
|F
|G
|H

|}

Save the table, it should look like this:

A B C D
E F G H
  • Our little creation doesn't look much like a table. The letters are arranged in rows like a table, but at the moment it just looks like a couple of sentences made up of capital letters. How can we make it look like a table? What is missing?
  • It needs borders

Borders - Tables

Most tables you see have a border around them and the cells as well. Let's see how we can do that with our little table.

  • If we want to put a border around our little table, we install a border attribute which looks like this:
border:1px solid black
  • This border attribute is placed inside the < > symbols right after the name of the opening tag, like so:
<table style="border:1px solid black">
  • Notice that the border attribute is introduced by style= and enclosed with quotation marks " " on either end of the border "attribute". This is called a "inline style attribute."

HINT:

For some unknown reason, sometimes the quotation marks causes problems. If you are finding that your code will not execute, try retyping the quotation marks. If you have copied your coding from someplace else, look to the quotation marks to see that they match the quotation marks created in Wikitext.
  • Now install the border attribute as shown above in your opening <table> tag.
HTML Wikitext

<table style="border:1px solid black">

{| style="border:1px solid black"

  • Save the table.
  • You should see this:
A B C D
E F G H
  • We now have a table with a border that is a solid black line and 1 pixel thick.


Html7.jpg

You can now see how HTML differs from Wikitext. It is in the tags. However, the coding of the attributes is the same regardless of whether you program with HTML or Wikitext.


Attributes

Let's take a minute to explain attributes.

  • Attributes give character to elements.
  • If we want to change how an element looks on the page, we install an attribute.
  • Attributes are made up of two parts: property and value separated by a colon.
property:value
  • Property gives the name of the attribute we want to install.
  • Value states what the attribute will look like such as bold, large, color, etc.

To perhaps to make the concept of attributes with their properties and values more clear, let's use more familiar terms. To describe a person we might state their physical attributes in the property:value form like so:

eyecolor:blue or hair:none or height:six feet

If these three attributes were put in a <description> tag our element would look like this:

<description style="eyecolor:blue; hair:none; height:six feet"></description>
  • Referring back to the border we created for our table, notice that the value in our border attribute has three parts:
  • 1px this tells the thickness of the line.
  • solid this tells the character of the line. It could be dashed, dotted, doubled, etc.
  • black this tells the color of the border.
  • There is no punctuation between these values, only spaces.

  • For the attribute border to be visible, you must give the property a color value. There is no default color value. If your line is invisible, you may have left out the name of the color or mistyped it.

Again the coding for the border around our table is:

<table style=”border:1px solid black”>

Tip Post it Pin.png Be sure all these symbols and parts of the coding are present. Your code will not execute even if one itty bitty, tinie wheenie little item is missing. There is no forgiveness in this life or the next one to a computer! They do not read minds and only process what they see. Leaving out a colon, a parenthesis, a semi-colon or misspelling a word will cause the computer to give you who knows what.

Borders - Cells

We can put borders around cells but not rows.

  • To put borders around the cells, you have to put the border attribute into each of the beginning <td> tags, just as you did for the table border.
  • The border coding for a cell <td> will be:
<td style=”border:1px solid black”>
  • Install this attribute into each of the beginning <td> tags.
  • Our coding now looks like this:
HTML Wikitext

<table style=”border:1px solid black”>
<tr>
<td style=”border:1px solid black”>A </td>
<td style=”border:1px solid black”>B </td>
<td style=”border:1px solid black”>C </td>
<td style=”border:1px solid black”>D </td>
</tr>

<tr>
<td style=”border:1px solid black”>E </td>
<td style=”border:1px solid black”>F </td>
<td style=”border:1px solid black”>G </td>
<td style=”border:1px solid black”>H </td>
</tr>

</table>

{| style=”border:1px solid black”|
|-
| style=”border:1px solid black”|A
| style=”border:1px solid black”|B
| style=”border:1px solid black”|C
| style=”border:1px solid black”|D


|-
| style=”border:1px solid black”|E
| style=”border:1px solid black”|F
| style=”border:1px solid black”|G
| style=”border:1px solid black”|H

|}

Html7.jpg

Notice in the Wikitext that a pipe | separates the attribute from the data. The pipe | is equivalent to a > in HTML.

  • Save and what do you see? Each cell has a border or is in a box.
A B C D
E F G H



Width

Our little table is looking more like a table, but it's not very big. How about making it larger?

  • To widen the table, we use the width attribute in the table tag.
  • We can give it an exact width in pixels or in percentages.
  • To make the table go all the way across the page, type for the property:value: width:100% in the beginning table tag.
  • The two attributes in the table tag will look like this:
HTML Wikitext

<table style=
border:1px solid black;
width:100%”
>

{| style=
border:1px solid black;
width:100%”

  • Notice the semi-colon between the attributes. All attributes have to be separated by semi-colons.
  • The order of attributes does not matter as long as they are separated by semi-colons.
  • Here's our expanded table:
A B C D
E F G H
  • Now the table spans the page. Again, you can use other percentages or you can state an exact number in pixels such as 300px.

Height

  • Normally the height of a table is controlled by what data is in the cells and you don't have to do anything.
  • If, however, you want to control the height of the table, use the height attribute: height:100px.
  • Please install the height attribute of 100px as it will be part of your homework assignment.

The table tag with the addition of the height attribute looks like so:

HTML Wikitext

<table style=
border:1px solid black;
width:100%;
height:100px”
>

{| style=
border:1px solid black;
width:100%;
height:100px”

  • Our table tag now has three attributes: border, width and height.
  • Our cell tags have one attribute so far: border.
  • Percentage on height attributes do not work. You have to use an amount in pixels.
  • Here's our table so far:
A B C D
E F G H
  • Now the table is a 100 pixels high and takes up 100% of the page width.

Colors - Borders

Html1.gif
The color of the borders of our table is black. How about some other color?
  • To give our borders a different color, all you have to do is change the color in the border attribute. You notice that black was called out: border:1px solid black.
  • Now just change the word black to some other color.
  • However, the names of colors have to match what HTML has as a standard for color names. Again you have to refer to the list of standard color names as we discussed above: HTML colors
  • HEX color codes - You will notice on the list of colors a HEX code. Most folks use the HEX code rather than the name of the color as it often shorter.
  • If you click on Shades you can see an even larger selection of colors, but without names.
  • The HEX coding is a combination of numbers and letters.
  • To use these color codes you have to put the pound sign before the color code. Example: Orange is #ff9900. No color will show if you leave off the # sign.
  • There are about 256 HEX named colors.
  • RGB colors - If a selection of 256 colors is not enough for you, you can get 16,000,000 colors in the RGB system. For example: green is rgb(000,255,000). To see some of the 16,000,000 colors (not all of them!) in the RGB system, go to: http://www.tayloredmktg.com/rgb/
  • Let's change the color of the border to blue using the HEX codes which is #0000ff.
HTML Wikitext

<table style=
border:1px solid #0000ff;
width:100%;
height:100px”
>

{| style=
border:1px solid #0000ff;
width:100%;
height:100px”

Here is the complete coding for our table up to this point:

HTML Wikitext

<table style=”border:1px solid #0000ff”>
<tr>
<td style=”border:1px solid #0000ff”>A </td>
<td style=”border:1px solid #0000ff”>B </td>
<td style=”border:1px solid #0000ff”>C</td>
<td style=”border:1px solid #0000ff”>D </td>
</tr>

<tr>
<td style=”border:1px solid #0000ff”>E </td>
<td style=”border:1px solid #0000ff”>F </td>
<td style=”border:1px solid #0000ff”>G </td>
<td style=”border:1px solid #0000ff”>H </td>
</tr>

</table>

{|style=”border:1px solid #000000”
|-
| style=”border:1px solid #0000ff”|A
| style=”border:1px solid #0000ff”|B
| style=”border:1px solid #0000ff”|C
| style=”border:1px solid #0000ff”|D


|-
| style=”border:1px solid #0000ff”|E
| style=”border:1px solid #0000ff”|F
| style=”border:1px solid #0000ff”|G
| style=”border:1px solid #0000ff”|H

|}

Html7.jpg

  • No closing tag for |-. When the next |- appears, the browser knows another row is to appear.
  • No closing tag for |. When another | appears, the browser knows another cell is to appear.
  • IMPORTANT: Notice the separation of the attribute from the data with a pipe |.
  • Here's what the table looks like with a blue border using HEX color codes:
A B C D
E F G H

Text Color

  • What if we want to give the text some color?
  • We use the color attribute
  • To give text a red color you type the following attribute with its property and value: color:#ff000. Again we are using the HEX codes for colors.
  • Notice, we do not have an attribute called: text-color. The word color by itself tells the browser that we are wanting to give color to some text.
  • To change the color of the text you need to add this attribute with its property and value in each beginning <td> tag.
  • Remember to separated this attribute from any other attributes with a semi-colon.
  • Our code up to this point will look like thisin each cell coloring the text red using the HEX color code:
HTML Wikitext

<td style=
border:1px solid #008000;
color:#008000”
>

| style=
border:1px solid black;
color:#008000”

Note: Using the rgb color coding requires more typing. The HEX system with its 256 colors is probably sufficient for your needs in the wiki.

Text-align

  • Where are the letters in the cells?
  • They are in the upper left hand corner in each of the cells.
  • That is the default position of text in cells.
  • The default color for text is black.
  • To change horizontal location, not the vertical position, of text in a cell use the text-align attribute.
  • You have three positions to chose from:
  • left
  • center
  • right
  • The attributes with their properties and values look like this:
  • text-align:left
  • text-align:center
  • text-align:right
  • On the top row, let’s put the text in the center of each cell and make the letters red. The code will look like this using HEX color code:
HTML Wikitext

<td style=
border:1px solid #0000ff;
color#ff0000;
text-align:center”
>

| style=
border:1px solid #0000ff;
color#ff0000;
text-align:center”

  • Here's what the table looks like now:
A B C D
E F G H

Vertical-align

  • If we want the text to be at the bottom of the cell, we use the vertical-align attribute. You have three choices: top, middle and bottom.
  • Put the letters on the second row on the bottom and on the right side of each cell. And lets make the letters blue for practice. The coding will be in each cell on the bottom row:
HTML Wikitext

<td style=
border:1px solid #000000;
text-align:right;
vertical-align:bottom;
color:#0000ff”
>

| style=
border:1px solid #000000;
text-align:right;
vertical-align:bottom;
color:#0000ff”

  • Notice that there are four attributes in the cells on the bottom row <td> element:
  • border:1px solid #000000 - give us a border, 1 pixel thick and the color black.
  • text-align:right- positions the text horizontally at the right side of the cell.
  • vertical-align:bottom - positions the text vertically at the bottom in the cell.
  • color:#0000ff - text is now blue.
  • The table will now look like this:
A B C D
E F G H

What Have We Learned So Far?

  • You know how to create a table.
  • You know how to create rows in a table.
  • You know how to install cells in rows.
  • You know how to create borders on table.
  • You know how to control the width and height of a table.
  • You know how to give borders color.
  • You know how to give text color.
  • You know where to find the codes for colors.
  • You know where to find the different kinds of borders.
  • You now know how to position text in a cell of a table.

With these skills you can apply these attributes of other things like images, paragraphs, boxes, etc. We will cover these concepts in the following lessons.


  • If you to see additional instructions on HTML, see "YouTube". Just type the letters HTML for a list of videos on HTML. Many are very good and there are lessons on many other programming languages, most of which are free.

What is coming up in Lesson Two

  • More on tables.
  • How to affect fonts, add background colors, and move text around on a page.

HOMEWORK

  • The only way to become a good programmer is to practice. Here are a couple of assignments to give you some experience.

Problem One

  • Design a table with three rows and two cells in each row.
  • Make the table cover ¾ of the width of the page.
  • Make the table 250 pixels high.
  • Make the border around the table to be a solid black line 5 pixels thick using the HEX code for colors.
  • Put the name of a color in each of the cells.
  • Install a solid border 1 pixel thick around each cell and the color of this border is to match the name of the color you put in the cell. Do this using the HEX color coding system.
  • Put the position of the words in the top row of the table to the top and right side of each cell.
  • Put the position of the words in the middle row of the table to the bottom and left side of each cell.
  • Put the position of the words on the bottom row of the table to the middle and center of each cell.

Click Here to see if you got problem one correct.

Problem Two

  • Design a table with four rows and four cells in each row.
  • Make it 450 pixels wide
  • In the first column of cells put in the name of a fruit in each cell.
  • Second column of cells, put in the name of a vegetable in each cell.
  • Third column cells, put in the name of a nut in each cell.
  • Fourth column cells, put in the name of a grain in each cell.
  • Give the table a orange solid line border 2 pixels thick.
  • All cells to have a solid black border 2 pixels thick.

Html10.png

If you enter all fruits, for example, as in the first illustration below, you are actually putting items in a row. It may look like a column but the fruits will line up as a row across the table and not as a column. Remember when putting data between <tr> </tr> or |- tags, you are putting data in a row.

<table>
<tr>
<td>Oranges</td>
<td>Apples</td>
<td>Pears</td>
<td>Cherries</td>
</tr>


  • Here's how to enter your choices for the first two columns so your categories end up in columns:

<table>
<tr>
<td>Apples</td>
<td>Peas</td>
<td>Walnuts</td>
<td>Oats</td>
</tr>

<tr>
<td>Oranges</td>
<td>Carrots</td>
<td>Almonds</td>
<td>Barley</td>
</tr>
</table>

  • You see that each row has Fruits, Vegetables, Nuts and Grains in them, not just fruits for example.
  • In the next row, be sure the order of the classifications of foods are in the same order as in the first row otherwise the columns will have different foods in them.
  • This assignment will be our basis for the next lesson as we continue learning about tables.

Click Here to see if you got problem two correct.


Top of Page

Go to Lesson Two

  1. We all hope you are using Chrome as your primary browser. The wiki seems to have fewer problems in editing in Chrome than with all the other browers, especially with Internet Explorer. For those of you who do not use Chrome, it is a free download and has many more advantages than any of the others.

 

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 14 August 2015, at 17:22.
  • This page has been accessed 11,499 times.