HTML and Wikitext - Lesson ThreeEdit This Page

From FamilySearch Wiki

Lesson One > Lesson Two > HTML and Wikitext - 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

Here's what you will learn in this lesson

  • How to change the font in your table.
  • How to Bold text.
  • How to Italics text.
  • How to put a space between cells.
  • How to control the size of the cells in a table.
  • How to round corners on a table or other object.
  • How to get text to wrap around objects with float attribute.
  • How to install an image from FamilySearch Wiki files.

Font Families

  • What if we want to change the font of our title or in the cells?
  • We use the <font-family> attribute.
  • The code for this attribute looks like this: <font-family:name of font>
  • You can get a list of fonts in your word processing program or look on line under fonts.

How to Bold Font

  • To bold text, place the opening and closing <strong> tags around the word or words you want to appear bold like so: <strong>word or words to be bold</strong>.
  • In wikitext, the same affect is accomplish by putting three apostrophies on either side of the word or words you want to appear bold like so: '''word or words to be bold'''
  • Note: If you do not place the closing bold tag, the rest of the article will be bold.

How to Italicize Font

  • To italicized your text, place opening and closing <em> tags around the word or words you want to appear italicized like so: <em>word or words</em>
  • In wikitext, the same affect is accomplish by putting two apostrophes on either side of the word or words you want to appear Italicized like so: ''word or words to be italicized''
  • If you do not place the closing italic tag, the rest of the article will be italicized.

Font Application

  • Entire Table - If you want to change the fonts throughout your table including the title and what is in all the cells to a different font, put the font-family attribute in the table element.
  • Caption title - If you only want to change the title, put it in the caption element.
  • Column heading - If you only want to change the headings, put it in the font-family attribute <tr> row tag that comes before the <th> header tags.
  • Row of cells - If you want to change the font in a particular or all the rows of cells, put it in the font-family attribute in the <tr> row tag that comes before the <td> cell tags.
  • Individual Cells - If you only want to change the font in a particluar cell, put it in each cell you want to change fonts.
  • Let's change the font of our title to "graphite std wide."
Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Oranges Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat
HTML Wikitext

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

<caption style="
text-align:center;
font-size:36px;
margin-bottom:20px;
font-family:Graphite Std Wide"
>
Healthy Foods
</caption>

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

|+ style="
text-align:center;
font-size:36px;
margin-bottom:20px;
font-family:Graphite Std Wide
"
|Healthy Foods


More about tables

Let's play around with tables some more.

Cell separation

  • What if you want to put some space between the cell borders?
  • Install these two attributes together separated by a semi-colon, of course: border-collaspe:separate; border-spacing; in the table element.
  • Here's our table with the cells separated by 5 pixels:
Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Oranges Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat
HTML Wikitext

<table
class=”sortable”
style=
border:1px solid #000000;
width:100%;
background-color:#808080;
border-collaspe:separate;
border-spacing:5px
>

{|
class= ”sortable”
style=
border:1px solid #000000;
width:100%;
background-color:#808080;
border-collaspe:separate;
border-spacing:5px

Cell Width

You may have noticed that the columns in our little table are not all the same width. Their width depends on what is in the cells. Since "Vegetables" is the largest word in the headers it gets the most space. So on from the next largest word to the smallest.

  • What if we want the columns to all be the same size. What do we do?
  • We can either make width of each cell a percentage of the total width or a set figure in pixels.
  • There are four cells to a row in our table, so we could make each cell width 25% of the total width of the table.
  • Let's make the cell in the header row width:25%. The coding in the <th> tag will look like this:
HTML Wikitext

<th style=
border:1px solid #008000;
color:#008000
width:25%
>

|+ style=
border:1px solid black;
color:#008000
width:25%

Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Oranges Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat
  • The cells are now all the same size. Looks better.
  • You don't have to put the width:25% in every cell.
  • It works out that if you put it in the top cell of a column, the cells below it will conform.
  • You only have to put the width code in the header row for our table.
  • This tip will save you some work.

Rounded Corners

If you like rounded corners on elements use the border-radius attribute.

  • Here's what the table will look like with rounded corners of 5 pixels:
Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Oranges Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat
HTML Wikitext

<table
class=”sortable”
style=
border:1px solid #000000;
width:100%;
background-color:#808080;
border-collaspe:separate;
border-spacing:5px:
border-radius:5px
>

{|
class=”sortable”
style=
border:1px solid #000000;
width:100%;
background-color:#808080;
border-collaspe:separate;
border-spacing:5px:
border-radius:5px

  • You can use the border-radius on cells, and other elements such as paragraphs that have a border installed around them.
  • To learn more about border-radius, click here.

Box Shadows

  • A nice affect is to add a shadow to a table or image.
  • Gives a 3-D appearance to the object like so:
Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Oranges Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat
  • The affect is created by adding the following attribute to the div tag:

box-shadow:10px 10px 5px #808080;

  • The first 10px is the shadow on the right.
  • The second 10px is the shadow on the bottom.
  • The 5px is the character of the shadow. The smaller the number the sharper the edge of the shadow. The larger the number the fuzzier the edge of the shadow.
  • The #808080 is the color of the shadow which is a light gray in the case. You can give it any color you wish however.

Float

A common problem you will see in the Wiki is the failure of text to wrap around tables, images, etc. To keep from having a sometimes large amount of white space next to a table or image and get the text to wrap around these object, we use the float attribute.

  • You have three values:
  • float:right
  • float:left
  • float:none
  • In either case the text will wrap around the object opposite of the where you are telling the object to float on the page.
  • If you float an image on the right side of the page, the text will wrap around on the left side of the object.
  • Float none means not to float at all. The text will not wrap around a table or image.

Let's make our table smaller and try to wrap some text around it.

  • Here is an example of text not wrapping around the table:

Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Oranges Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat

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.

  • Do you see the white space to the right of the table. We should try to avoid this.
  • This increases the need for scrolling.

Here's an example of wrapping using the float attribute:

Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Oranges Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat

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.

  • In the above, the table was "floated" to the left side of the page by using the float:left attribute.
  • You can see the text wrap around the table on the right side.
  • Here is our code:
HTML Wikitext

<table
class=”sortable”
style=
border:1px solid #000000;
width:100%;
background-color:#808080;
border-collaspe:separate;
border-spacing:5px:
border-radius:5px;
float:left
>

{|
class=”sortable”
style=
border:1px solid #000000;
width:100%;
background-color:#808080;
border-collaspe:separate;
border-spacing:5px:
border-radius:5px:
float:left


  • However, there is problem. The text is right up against the table. How do we put a space between the table and the text?
  • Use our margin attribute.
  • Let's install a margin-right attribute of 15 pixels to create a space between the text and the right edge of the table.
  • We will add this to the opening table tag; margin-right:15px.
Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Walnuts Oats
Oranges Carrots Almonds Barley
Pears Corn Peanuts Wheat
Cherries Beans Cashews Buckwheat

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.

That looks better.

  • Here is our code:
HTML Wikitext

<table
class=”sortable”
style=
border:1px solid #000000;
width:100%;
background-color:#808080;
border-collaspe:separate;
border-spacing:5px:
border-radius:5px;
float:left;
margin-right:15px
>

{|
class=”sortable”
style=
border:1px solid #000000;
width:100%;
background-color:#808080;
border-collaspe:separate;
border-spacing:5px:
border-radius:5px:
float:left;
margin-right:15px

  • If you want the text to wrap around on the right side of the table, substitute "right" for left in the table tag.

Floating Images in FamilySearch Wiki

  • Floating text, tables, etc can be done with the HTML float attribute in FamilySearch Wiki just fine.
  • Floating images, on the other hand, in FamilySearch Wiki is another matter.
  • To float an image requires a different procedure than our normal HTML coding.
  • The link in FamilySearch, for an approved image, looks like this:
[[File:Ireland image map.png]]
  • All images are from a file of accepted images.
  • To find an image, type the word File: plus the topic in the search box, for example File:Ireland or sometimes just typing the word will find what you are looking for.
  • Just be aware you can only use images accepted by FamilySearch.

How to Modify and Place Images

  • Images are place in the same manner as tables.
  • Pick where you want to place the image and paste in the FamilySearch Wiki link to the image.
  • Often the size of the images submitted are much to large for our use so you will have to shrink the image by putting the width attribute in the FamilySearch link like so:
[[File:Ireland image map.png|300px]]
  • Notice we added 300px inside the [[ ]] brackets separated by a pipe.
  • When the browser sees the "px" after the numbers it knows we are referring to width. We don't have to put the word width with a colon in front of it.
  • To get the image to float to the left or right, we use the float attribute like so:
[[File:Ireland image map.png|300px|right]]
  • In the case we used "right" and again separated from the rest of the code with a pipe.
  • When the computer sees right or left, it knows right or left refers to floating. We don't need to put the word float: with a colon in front of it.
  • It does not matter in order of the width or float attributes in this image links.
  • To put a little border around a FamilySearch image, you can type the word thumb just after the first pipe, like so:
[[File:Ireland image map.png|thumb|300px|right]]
  • Here what the image looks like with a border:
Ireland image map.png
  • A benefit of using "thumb" is that any text around the image will float the side opposite of where you float the image. If you float the image to the left the text will fill in on the right as you see here.

Image Approval

  • Again, you can't take images from the internet or your personal photos and paste them on pages in FamilySearch. All images must be reviewed and approved first.
  • If you can't find an image you want, you can submit a new one by following the approval procedure.
  • To learn how to get images approved click here.
  • Tables are good for placing material on a page in some kind of order or structure, but there are better ways which will be covered in the next lesson.

What is coming up in Lesson Four

  • In lesson Four we will talk about <div> tags and the ability to position elements on pages without tables. Here you will really get to see some fun things.

What you have learned in this lesson

  • How to change the font in your table.
  • How to bold text.
  • How to italics text.
  • How to put a space between cells.
  • How to control the size of the cells in a table.
  • How to round corners of a table or other object.
  • How to get text to wrap around objects with float attribute.
  • How to install an image from FamilySearch Wiki.

Lesson 3 - Homework

Problem One

  • Create a table of your great-grand parents.
  • Width of table 75%.
  • Title the table Great-Grand Parents and center it.
  • Do not use the default font for the title. Use another.
  • Make text 36px high.
  • Give it a border of double lines 5 pixels thick.
  • First column - Last Name (Maiden Names for females)
  • Second column - First name
  • Third column - Year of birth
  • State or Country of birth
  • Put the name of the wife under her husband's name.
  • Make column one width 15%
  • Make column two width 20%
  • Make column three width 15%
  • Make table sortable
  • Color row of female ancestors with light pink.
  • Color row of male ancestors with light blue.
  • Your rows should alternate from light blue to light pink.
  • Background color of header row light gray.
  • Always using HEX color codes.
  • Header font white.
  • Float table to right side of page.
  • Insert some text and make it wrap your table. You can get the same text that was used above at: lorem ipsum.
  • Leave a 15px gap between the text and your table.

Click here to check your answer

Problem two

Ireland image map.png

  • Use the above image [[File:Ireland image map.png]]
  • Float it on the right side of the page.
  • Make the image 400px wide
  • Get the text you used above to float around it on the left side.

Click here for answer to Problem two

Go to Lesson 4


 

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 28 January 2015, at 15:45.
  • This page has been accessed 3,121 times.