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

From FamilySearch Wiki
Jump to: navigation, search
m (Go to Lesson 4)
m (added category)
Line 1: Line 1:
[[HTML and Wikitext - Lesson One| Lesson One]] > [[HTML and Wikitext - Lesson Two|Lesson Two]] > [[{{PAGENAME}}]] > [[HTML and Wikitext - Lesson Four| Lesson Four]] > [[HTML and Wikitext - Lesson Five| Lesson Five]]
+
[[HTML and Wikitext - Lesson One|Lesson One]] > [[HTML and Wikitext - Lesson Two|Lesson Two]] > [[{{PAGENAME}}]] > [[HTML and Wikitext - Lesson Four|Lesson Four]] > [[HTML and Wikitext - Lesson Five|Lesson Five]] {{HTMLsidebar}}  
{{HTMLsidebar}}  
+
 
===Here's what you will learn in this lesson===
+
=== Here's what you will learn in this lesson ===
*How to change the font in your table.
+
 
*How to put a space between cells.
+
*How to change the font in your table.  
*How to control the size of the cells in a table.
+
*How to put a space between cells.  
*How to round corners of a table or other object.
+
*How to control the size of the cells in a table.  
*How to get text to wrap around objects with float attribute.
+
*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 files.
 
*How to install an image from FamilySearch Wiki files.
  
===Font Families===
+
=== Font Families ===
*What if we want to change the font of our title or in the cells?
+
 
*We use the <font color="red"><nowiki><font-family></nowiki></font> attribute.
+
*What if we want to change the font of our title or in the cells?  
*The code for this attribute looks like this: <font color="red"><nowiki><font-family:name of font></nowiki></font>
+
*We use the <font color="red"><nowiki><font-family></nowiki></font> attribute.  
 +
*The code for this attribute looks like this: <font color="red"><nowiki><font-family:name of font></nowiki></font>  
 
*You can get a list of fonts in your word processing program or look on line under fonts.
 
*You can get a list of fonts in your word processing program or look on line under fonts.
====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'''.
+
==== Font Application ====
:*'''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 <font color="green"><nowiki><tr></nowiki></font> '''row''' tag that comes '''before the <font color="green"><nowiki><th></nowiki></font> header''' tags.
+
:*'''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'''.  
:*'''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 <font color="green"><nowiki><tr></nowiki></font> '''row''' tag that comes '''before the <font color="green"><nowiki><td></nowiki></font> cell''' tags.
+
:*'''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 <font color="green"><nowiki><tr></nowiki></font> '''row''' tag that comes '''before the <font color="green"><nowiki><th></nowiki></font> 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 <font color="green"><nowiki><tr></nowiki></font> '''row''' tag that comes '''before the <font color="green"><nowiki><td></nowiki></font> 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.
 
:*'''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."
 
*Let's change the font of our title to "graphite std wide."
<table class="sortable" style="width:470px; border:1px solid black; background-color:#d9d9d9">
 
<caption style="text-align:center; font-size:36px; margin-bottom:20px; font-family:Graphite Std Wide">Healthy Foods</caption>
 
<tr>
 
<th style="text-align:center; border:1px solid black; padding:5px">Fruits</th>
 
<th style="text-align:center; border:1px solid black; padding:5px">Vegetables</th>
 
<th style="text-align:center; border:1px solid black; padding:5px">Nuts</th>
 
<th style="text-align:center; border:1px solid black; padding:5px">Grains</td>
 
</tr>
 
  
<tr>
+
{| style="width:470px; border:1px solid black; background-color:#d9d9d9" class="sortable"
<td style="border:1px solid black; padding:5px">Apples</td>
+
|+ Healthy Foods
<td style="border:1px solid black; padding:5px">Peas</td>
+
|-
<td style="border:1px solid black; padding:5px">Walnuts</td>
+
! style="text-align:center; border:1px solid black; padding:5px" | Fruits
<td style="border:1px solid black; padding:5px">Oats</td>
+
! style="text-align:center; border:1px solid black; padding:5px" | Vegetables
</tr>
+
! style="text-align:center; border:1px solid black; padding:5px" | Nuts
 +
! style="text-align:center; border:1px solid black; padding:5px" | Grains
 +
|-
 +
| style="border:1px solid black; padding:5px" | Apples
 +
| style="border:1px solid black; padding:5px" | Peas
 +
| style="border:1px solid black; padding:5px" | Walnuts
 +
| style="border:1px solid black; padding:5px" | Oats
 +
|-
 +
| style="border:1px solid black; padding:5px" | Oranges
 +
| style="border:1px solid black; padding:5px" | Carrots
 +
| style="border:1px solid black; padding:5px" | Almonds
 +
| style="border:1px solid black; padding:5px" | Barley
 +
|-
 +
| style="border:1px solid black; padding:5px" | Pears
 +
| style="border:1px solid black; padding:5px" | Corn
 +
| style="border:1px solid black; padding:5px" | Peanuts
 +
| style="border:1px solid black; padding:5px" | Wheat
 +
|-
 +
| style="border:1px solid black; padding:5px" | Cherries
 +
| style="border:1px solid black; padding:5px" | Beans
 +
| style="border:1px solid black; padding:5px" | Cashews
 +
| style="border:1px solid black; padding:5px" | Buckwheat
 +
|}
  
<tr>
+
{| style="width:470px"
<td style="border:1px solid black; padding:5px">Oranges</td>
+
|-
<td style="border:1px solid black; padding:5px">Carrots</td>
+
! style="color:blue" | HTML
<td style="border:1px solid black; padding:5px">Almonds</td>
+
! style="color:blue" | Wikitext
<td style="border:1px solid black; padding:5px">Barley</td>
+
|-
</tr>
+
| style="width:50%" | <div style="border:1px solid black; padding:5px;">
<tr>
+
<font color="green"><nowiki><table</nowiki></font> <font color="blue">style=</font><font color="red">”border:1px solid black; width:100%”</font><font color="green">&gt;</font> <br><br> <font color="green"><nowiki><caption</nowiki></font> <font color="blue">style=</font><font color="red">"<br>text-align:center; <br>font-size:36px; <br>margin-bottom:20px; <br>'''font-family:Graphite Std Wide'''"</font><font color="green">&gt;<br></font>Healthy Foods<br> <font color="green"><nowiki></caption></nowiki></font>  
<td style="border:1px solid black; padding:5px">Pears</td>
+
</div>  
<td style="border:1px solid black; padding:5px">Corn</td>
+
| style="width:50%" | <div style="border:1px solid red; padding:5px">
<td style="border:1px solid black; padding:5px">Peanuts</td>
+
<font color="green"><nowiki>{|</nowiki></font> <font color="blue">style=</font><font color="red">”border:1px solid black; width:100%”</font><br> <br> <font color="green"><nowiki>|+</nowiki></font> <font color="blue">style=</font><font color="red">"<br>text-align:center; <br>font-size:36px; <br>margin-bottom:20px; <br>'''font-family:Graphite Std Wide'''<br>"</font><font color="green">&#124;</font>Healthy Foods<br><br><br>  
<td style="border:1px solid black; padding:5px">Wheat</td>
+
</div>  
</tr>
+
|}
  
<tr>
+
----
<td style="border:1px solid black; padding:5px">Cherries</td>
 
<td style="border:1px solid black; padding:5px">Beans</td>
 
<td style="border:1px solid black; padding:5px">Cashews</td>
 
<td style="border:1px solid black; padding:5px">Buckwheat</td>
 
</tr>
 
</table>
 
  
<table style="width:470px ">
+
=== More about tables ===
<tr>
 
<th style="color:blue ">HTML</th>
 
<th style="color:blue ">Wikitext</th>
 
</tr>
 
<td style="width:50% ">
 
<div style="border:1px solid black; padding:5px;">
 
<font color="green"><nowiki><table</nowiki></font> <font color="blue">style=</font><font color="red">”border:1px solid black; width:100%”</font><font color="green">></font>
 
<br><br>
 
<font color="green"><nowiki><caption</nowiki></font> <font color="blue">style=</font><font color="red">"<br>text-align:center; <br>font-size:36px; <br>margin-bottom:20px; <br>'''font-family:Graphite Std Wide'''"</font><font color="green">><br></font>Healthy Foods<br>
 
<font color="green"><nowiki></caption></nowiki></font>
 
</div>
 
</td>
 
<td style="width:50% ">
 
<div style="border:1px solid red; padding:5px ">
 
<font color="green"><nowiki>{|</nowiki></font> <font color="blue">style=</font><font color="red">”border:1px solid black; width:100%”</font><br>
 
<br>
 
<font color="green"><nowiki>|+</nowiki></font> <font color="blue">style=</font><font color="red">"<br>text-align:center; <br>font-size:36px; <br>margin-bottom:20px; <br>'''font-family:Graphite Std Wide'''<br>"</font><font color="green">|</font>Healthy Foods<br><br><br>
 
</div>
 
</td>
 
</tr>
 
</table>
 
  
----
+
Let play around with tables some more.
  
===More about tables===
+
=== Cell separation ===
Let play around with tables some more.
 
  
===Cell separation===
+
*What if you want to put some space between the cell borders?  
*What if you want to put some space between the cell borders?
+
*Install these two attributes together separated by a semi-colon, of course: <font color="red">border-collaspe:separate; border-spacing;</font> in the table element.  
*Install these two attributes together separated by a semi-colon, of course: <font color="red">border-collaspe:separate; border-spacing;</font> in the table element.
 
 
*Here's our table with the cells separated by 5 pixels:
 
*Here's our table with the cells separated by 5 pixels:
  
<table class="sortable" style="width:470px; border:1px solid black; background-color:#d9d9d9; border-collaspe:separate; border-spacing:5px">
+
{| style="width:470px; border:1px solid black; background-color:#d9d9d9; border-collaspe:separate; border-spacing:5px" class="sortable"
<caption style="text-align:center; font-size:36px; margin-bottom:20px; font-family:Graphite Std Wide">Healthy Foods</caption>
+
|+ Healthy Foods
<tr>
+
|-
<th style="text-align:center; border:1px solid black; padding:5px">Fruits</th>
+
! style="text-align:center; border:1px solid black; padding:5px" | Fruits
<th style="text-align:center; border:1px solid black; padding:5px">Vegetables</th>
+
! style="text-align:center; border:1px solid black; padding:5px" | Vegetables
<th style="text-align:center; border:1px solid black; padding:5px">Nuts</th>
+
! style="text-align:center; border:1px solid black; padding:5px" | Nuts
<th style="text-align:center; border:1px solid black; padding:5px">Grains</td>
+
! style="text-align:center; border:1px solid black; padding:5px" | Grains
</tr>
+
|-
 
+
| style="border:1px solid black; padding:5px" | Apples
<tr>
+
| style="border:1px solid black; padding:5px" | Peas
<td style="border:1px solid black; padding:5px">Apples</td>
+
| style="border:1px solid black; padding:5px" | Walnuts
<td style="border:1px solid black; padding:5px">Peas</td>
+
| style="border:1px solid black; padding:5px" | Oats
<td style="border:1px solid black; padding:5px">Walnuts</td>
+
|-
<td style="border:1px solid black; padding:5px">Oats</td>
+
| style="border:1px solid black; padding:5px" | Oranges
</tr>
+
| style="border:1px solid black; padding:5px" | Carrots
 
+
| style="border:1px solid black; padding:5px" | Almonds
<tr>
+
| style="border:1px solid black; padding:5px" | Barley
<td style="border:1px solid black; padding:5px">Oranges</td>
+
|-
<td style="border:1px solid black; padding:5px">Carrots</td>
+
| style="border:1px solid black; padding:5px" | Pears
<td style="border:1px solid black; padding:5px">Almonds</td>
+
| style="border:1px solid black; padding:5px" | Corn
<td style="border:1px solid black; padding:5px">Barley</td>
+
| style="border:1px solid black; padding:5px" | Peanuts
</tr>
+
| style="border:1px solid black; padding:5px" | Wheat
<tr>
+
|-
<td style="border:1px solid black; padding:5px">Pears</td>
+
| style="border:1px solid black; padding:5px" | Cherries
<td style="border:1px solid black; padding:5px">Corn</td>
+
| style="border:1px solid black; padding:5px" | Beans
<td style="border:1px solid black; padding:5px">Peanuts</td>
+
| style="border:1px solid black; padding:5px" | Cashews
<td style="border:1px solid black; padding:5px">Wheat</td>
+
| style="border:1px solid black; padding:5px" | Buckwheat
</tr>
+
|}
  
<tr>
+
{| style="width:470px"
<td style="border:1px solid black; padding:5px">Cherries</td>
+
|-
<td style="border:1px solid black; padding:5px">Beans</td>
+
! style="color:blue" | HTML
<td style="border:1px solid black; padding:5px">Cashews</td>
+
! style="color:blue" | Wikitext
<td style="border:1px solid black; padding:5px">Buckwheat</td>
+
|-
</tr>
+
| style="50%" | <div style="border:1px solid black; padding:5px;">
</table>
+
<font color="green">&lt;table <br><font color="blue">class=</font><font color="orange">”sortable”</font> <br><font color="blue">style=</font><font color="red">” <br>border:1px solid #000000; <br>width:100%; <br>background-color:#808080; <br>'''border-collaspe:separate'''; <br>'''border-spacing:5px'''”</font><font color="green">&gt;</font> <br></font>
<table style="width:470px ">
+
<font color="green"></font></div><font color="green"></font>
<tr>
+
| style="50%" | <div style="border:1px solid red; padding:5px">
<th style="color:blue ">HTML</th>
+
<font color="green">{&#124; <br></font><font color="blue">class= </font><font color="orange">”sortable”</font> <br><font color="blue">style=</font><font color="red">” <br>border:1px solid #000000; <br>width:100%; <br>background-color:#808080; <br>'''border-collaspe:separate'''; <br>'''border-spacing:5px'''”</font>  
<th style="color:blue ">Wikitext</th>
+
</div>  
</tr>
+
|}
<td style="50%">
 
<div style="border:1px solid black; padding:5px;">
 
<font color="green"><table
 
<br><font color="blue">class=</font><font color="orange">”sortable”</font>  
 
<br><font color="blue">style=</font><font color="red">”
 
<br>border:1px solid #000000;  
 
<br>width:100%;  
 
<br>background-color:#808080;
 
<br>'''border-collaspe:separate''';  
 
<br>'''border-spacing:5px'''”</font><font color="green">></font>
 
<br>
 
  
</div>
+
=== Cell Width ===
</td>
 
<td style="50%">
 
<div style="border:1px solid red; padding:5px ">
 
<font color="green">{|
 
<br></font><font color="blue">class= </font><font color="orange">”sortable”</font>
 
<br><font color="blue">style=</font><font color="red">”
 
<br>border:1px solid #000000;
 
<br>width:100%;
 
<br>background-color:#808080;
 
<br>'''border-collaspe:separate''';
 
<br>'''border-spacing:5px'''”</font>
 
</div>
 
</td>
 
</tr>
 
</table>
 
  
===Cell Width===
+
You may have notice 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.  
You may have notice 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 <font color="red">width:25%</font>.  The coding in the <font color="green"><nowiki><th></nowiki></font> tag will look like this:
 
<table style="width:470px ">
 
<tr>
 
<th style="color:blue ">HTML</th>
 
<th style="color:blue ">Wikitext</th>
 
</tr>
 
<td style="width:50%">
 
<div style="border:1px solid black; padding:5px;">
 
<font color="green"><nowiki><th</nowiki></font> <font color="blue">style=</font><font color="red">”
 
<br>border:1px solid #008000;
 
<br>color:#008000
 
<br>'''width:25%'''”</font><font color="green">></font>
 
<br>
 
  
</div>
+
*What if we want the columns to all be the same size. What do we do?
</td>
+
*We can either make width of each cell a percentage of the total width or a set figure in pixels.
<td style="width:50% ">
+
*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.
<div style="border:1px solid red; padding:5px ">
+
*Let's make the cell in the header row <font color="red">width:25%</font>. The coding in the <font color="green"><nowiki><th></nowiki></font> tag will look like this:
<font color="green"><nowiki>|+</nowiki></font> <font color="blue">style=</font><font color="red">
 
<br>border:1px solid black;
 
<br>color:#008000
 
<br>'''width:25%'''”</font><br>
 
</div>
 
</td>
 
</tr>
 
</table>
 
<table class="sortable" style="width:470px; border:1px solid black; background-color:#d9d9d9; border-collaspe:separate; border-spacing:5px">
 
<caption style="text-align:center; font-size:36px; margin-bottom:20px; font-family:Graphite Std Wide">Healthy Foods</caption>
 
<tr>
 
<th style="text-align:center; border:1px solid black; padding:5px; width:25%">Fruits</th>
 
<th style="text-align:center; border:1px solid black; padding:5px; width:25%">Vegetables</th>
 
<th style="text-align:center; border:1px solid black; padding:5px; width:25%">Nuts</th>
 
<th style="text-align:center; border:1px solid black; padding:5px; width:25%">Grains</td>
 
</tr>
 
  
<tr>
+
{| style="width:470px"
<td style="border:1px solid black; padding:5px">Apples</td>
+
|-
<td style="border:1px solid black; padding:5px">Peas</td>
+
! style="color:blue" | HTML
<td style="border:1px solid black; padding:5px">Walnuts</td>
+
! style="color:blue" | Wikitext
<td style="border:1px solid black; padding:5px">Oats</td>
+
|-
</tr>
+
| style="width:50%" | <div style="border:1px solid black; padding:5px;">
 +
<font color="green"><nowiki><th</nowiki></font> <font color="blue">style=</font><font color="red">” <br>border:1px solid #008000; <br>color:#008000 <br>'''width:25%'''”</font><font color="green">&gt;</font> <br>  
 +
</div>
 +
| style="width:50%" | <div style="border:1px solid red; padding:5px">
 +
<font color="green"><nowiki>|+</nowiki></font> <font color="blue">style=</font><font color="red">” <br>border:1px solid black; <br>color:#008000 <br>'''width:25%'''”</font><br>  
 +
</div>  
 +
|}
  
<tr>
+
{| style="width:470px; border:1px solid black; background-color:#d9d9d9; border-collaspe:separate; border-spacing:5px" class="sortable"
<td style="border:1px solid black; padding:5px">Oranges</td>
+
|+ Healthy Foods
<td style="border:1px solid black; padding:5px">Carrots</td>
+
|-
<td style="border:1px solid black; padding:5px">Almonds</td>
+
! style="text-align:center; border:1px solid black; padding:5px; width:25%" | Fruits
<td style="border:1px solid black; padding:5px">Barley</td>
+
! style="text-align:center; border:1px solid black; padding:5px; width:25%" | Vegetables
</tr>
+
! style="text-align:center; border:1px solid black; padding:5px; width:25%" | Nuts
<tr>
+
! style="text-align:center; border:1px solid black; padding:5px; width:25%" | Grains
<td style="border:1px solid black; padding:5px">Pears</td>
+
|-
<td style="border:1px solid black; padding:5px">Corn</td>
+
| style="border:1px solid black; padding:5px" | Apples
<td style="border:1px solid black; padding:5px">Peanuts</td>
+
| style="border:1px solid black; padding:5px" | Peas
<td style="border:1px solid black; padding:5px">Wheat</td>
+
| style="border:1px solid black; padding:5px" | Walnuts
</tr>
+
| style="border:1px solid black; padding:5px" | Oats
 +
|-
 +
| style="border:1px solid black; padding:5px" | Oranges
 +
| style="border:1px solid black; padding:5px" | Carrots
 +
| style="border:1px solid black; padding:5px" | Almonds
 +
| style="border:1px solid black; padding:5px" | Barley
 +
|-
 +
| style="border:1px solid black; padding:5px" | Pears
 +
| style="border:1px solid black; padding:5px" | Corn
 +
| style="border:1px solid black; padding:5px" | Peanuts
 +
| style="border:1px solid black; padding:5px" | Wheat
 +
|-
 +
| style="border:1px solid black; padding:5px" | Cherries
 +
| style="border:1px solid black; padding:5px" | Beans
 +
| style="border:1px solid black; padding:5px" | Cashews
 +
| style="border:1px solid black; padding:5px" | Buckwheat
 +
|}
  
<tr>
+
*The cells are now all the same size. Looks better.  
<td style="border:1px solid black; padding:5px">Cherries</td>
 
<td style="border:1px solid black; padding:5px">Beans</td>
 
<td style="border:1px solid black; padding:5px">Cashews</td>
 
<td style="border:1px solid black; padding:5px">Buckwheat</td>
 
</tr>
 
</table>
 
*The cells are now all the same size. Looks better.
 
 
*You '''don't have to put the <font color="red">width:25%</font> in every cell'''.  
 
*You '''don't have to put the <font color="red">width:25%</font> in every cell'''.  
*It works out that if you put it in the top cell of a column, the cells below it will conform.
+
*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.
+
*You only have to put the width code in the header row for our table.  
 
*This tip will save you some work.
 
*This tip will save you some work.
  
===Rounded Corners===
+
=== Rounded Corners ===
  
 
If you like rounded corners on elements use the <font color="red">border-radius</font> attribute.  
 
If you like rounded corners on elements use the <font color="red">border-radius</font> attribute.  
 +
 
*Here's what the table will look like with rounded corners of 5 pixels:
 
*Here's what the table will look like with rounded corners of 5 pixels:
<table class="sortable" style="width:470px; border:1px solid black; background-color:#d9d9d9; border-collaspe:separate; border-spacing:5px; border-radius:5px">
 
<caption style="text-align:center; font-size:36px; margin-bottom:20px; font-family:Graphite Std Wide">Healthy Foods</caption>
 
<tr>
 
<th style="text-align:center; border:1px solid black; padding:5px; width:25%">Fruits</th>
 
<th style="text-align:center; border:1px solid black; padding:5px; width:25%">Vegetables</th>
 
<th style="text-align:center; border:1px solid black; padding:5px; width:25%">Nuts</th>
 
<th style="text-align:center; border:1px solid black; padding:5px; width:25%">Grains</td>
 
</tr>
 
  
<tr>
+
{| style="width:470px; border:1px solid black; background-color:#d9d9d9; border-collaspe:separate; border-spacing:5px; border-radius:5px" class="sortable"
<td style="border:1px solid black; padding:5px">Apples</td>
+
|+ Healthy Foods
<td style="border:1px solid black; padding:5px">Peas</td>
+
|-
<td style="border:1px solid black; padding:5px">Walnuts</td>
+
! style="text-align:center; border:1px solid black; padding:5px; width:25%" | Fruits
<td style="border:1px solid black; padding:5px">Oats</td>
+
! style="text-align:center; border:1px solid black; padding:5px; width:25%" | Vegetables
</tr>
+
! style="text-align:center; border:1px solid black; padding:5px; width:25%" | Nuts
 +
! style="text-align:center; border:1px solid black; padding:5px; width:25%" | Grains
 +
|-
 +
| style="border:1px solid black; padding:5px" | Apples
 +
| style="border:1px solid black; padding:5px" | Peas
 +
| style="border:1px solid black; padding:5px" | Walnuts
 +
| style="border:1px solid black; padding:5px" | Oats
 +
|-
 +
| style="border:1px solid black; padding:5px" | Oranges
 +
| style="border:1px solid black; padding:5px" | Carrots
 +
| style="border:1px solid black; padding:5px" | Almonds
 +
| style="border:1px solid black; padding:5px" | Barley
 +
|-
 +
| style="border:1px solid black; padding:5px" | Pears
 +
| style="border:1px solid black; padding:5px" | Corn
 +
| style="border:1px solid black; padding:5px" | Peanuts
 +
| style="border:1px solid black; padding:5px" | Wheat
 +
|-
 +
| style="border:1px solid black; padding:5px" | Cherries
 +
| style="border:1px solid black; padding:5px" | Beans
 +
| style="border:1px solid black; padding:5px" | Cashews
 +
| style="border:1px solid black; padding:5px" | Buckwheat
 +
|}
  
<tr>
+
{| style="width:470px"
<td style="border:1px solid black; padding:5px">Oranges</td>
+
|-
<td style="border:1px solid black; padding:5px">Carrots</td>
+
! style="color:blue" | HTML
<td style="border:1px solid black; padding:5px">Almonds</td>
+
! style="color:blue" | Wikitext
<td style="border:1px solid black; padding:5px">Barley</td>
+
|-
</tr>
+
| style="width:50%" | <div style="border:1px solid black; padding:5px;">
<tr>
+
<font color="green">&lt;table<br> <font color="blue">class=</font><font color="orange">”sortable”</font> <br> <font color="blue">style=</font><font color="red">”<br> border:1px solid #000000; <br> width:100%; <br> background-color:#808080;<br> border-collaspe:separate; <br> border-spacing:5px:<br> '''border-radius:5px'''”</font><font color="green">&gt;</font> <br></font>
<td style="border:1px solid black; padding:5px">Pears</td>
+
<font color="green"></font></div><font color="green"></font>
<td style="border:1px solid black; padding:5px">Corn</td>
+
| style="width:50%" | <div style="border:1px solid red; padding:5px">
<td style="border:1px solid black; padding:5px">Peanuts</td>
+
<font color="green">{&#124; <br> </font><font color="blue">class=</font><font color="orange">”sortable”</font> <br><font color="blue">style=</font><font color="red">” <br>border:1px solid #000000; <br>width:100%; <br>background-color:#808080; <br>border-collaspe:separate; <br>border-spacing:5px: <br>'''border-radius:5px'''”</font>  
<td style="border:1px solid black; padding:5px">Wheat</td>
+
</div>  
</tr>
+
|}
  
<tr>
+
*You can use the <font color="red">border-radius</font> on cells, and other elements such as paragraphs that have a border installed around them.  
<td style="border:1px solid black; padding:5px">Cherries</td>
 
<td style="border:1px solid black; padding:5px">Beans</td>
 
<td style="border:1px solid black; padding:5px">Cashews</td>
 
<td style="border:1px solid black; padding:5px">Buckwheat</td>
 
</tr>
 
</table>
 
<table style="width:470px">
 
<tr>
 
<th style="color:blue ">HTML</th>
 
<th style="color:blue ">Wikitext</th>
 
</tr>
 
<td style="width:50%">
 
<div style="border:1px solid black; padding:5px;">
 
<font color="green"><table<br>
 
<font color="blue">class=</font><font color="orange">”sortable”</font> <br>
 
<font color="blue">style=</font><font color="red">”<br>
 
border:1px solid #000000; <br>
 
width:100%; <br>
 
background-color:#808080;<br>
 
border-collaspe:separate; <br>
 
border-spacing:5px:<br>
 
'''border-radius:5px'''”</font><font color="green">></font>
 
<br>
 
 
 
</div>
 
</td>
 
<td style="width:50%">
 
<div style="border:1px solid red; padding:5px ">
 
<font color="green">{| <br>
 
</font><font color="blue">class=</font><font color="orange">”sortable”</font>
 
<br><font color="blue">style=</font><font color="red">”
 
<br>border:1px solid #000000;
 
<br>width:100%;
 
<br>background-color:#808080;
 
<br>border-collaspe:separate;
 
<br>border-spacing:5px:
 
<br>'''border-radius:5px'''”</font>
 
</div>
 
</td>
 
</tr>
 
</table>
 
*You can use the <font color="red">border-radius</font> on cells, and other elements such as paragraphs that have a border installed around them.
 
 
*To learn more about <font color="red">border-radius</font>, click [http://www.w3schools.com/cssref/css3_pr_border-radius.asp here].
 
*To learn more about <font color="red">border-radius</font>, click [http://www.w3schools.com/cssref/css3_pr_border-radius.asp here].
  
 
----
 
----
  
===Float===
+
=== 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 <font color="red">float</font> attribute.
+
 
 +
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 <font color="red">float</font> attribute.  
 +
 
 
*You have three values:
 
*You have three values:
:*<font color="red">float:right</font>
+
 
:*<font color="red">float:left</font>
+
:*<font color="red">float:right</font>  
 +
:*<font color="red">float:left</font>  
 
:*<font color="red">float:none</font>
 
:*<font color="red">float:none</font>
 +
 
*In either case the text will wrap around the object opposite of the where you are telling the object to float on the page.  
 
*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.
+
*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.
+
*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.  
 
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:<br><br>
 
*Here is an example of text '''not wrapping''' around the table:<br><br>
  
<table class="sortable" style="width:65%; border:1px solid black; background-color:#d9d9d9; border-collaspe:separate; border-spacing:5px; border-radius:5px">
+
{| style="width:65%; border:1px solid black; background-color:#d9d9d9; border-collaspe:separate; border-spacing:5px; border-radius:5px" class="sortable"
<caption style="text-align:center; font-size:36px; margin-bottom:20px; font-family:Graphite Std Wide">Healthy Foods</caption>
+
|+ Healthy Foods
<tr>
+
|-
<th style="text-align:center; border:1px solid black; padding:5px; width:25%">Fruits</th>
+
! style="text-align:center; border:1px solid black; padding:5px; width:25%" | Fruits
<th style="text-align:center; border:1px solid black; padding:5px; width:25%">Vegetables</th>
+
! style="text-align:center; border:1px solid black; padding:5px; width:25%" | Vegetables
<th style="text-align:center; border:1px solid black; padding:5px; width:25%">Nuts</th>
+
! style="text-align:center; border:1px solid black; padding:5px; width:25%" | Nuts
<th style="text-align:center; border:1px solid black; padding:5px; width:25%">Grains</td>
+
! style="text-align:center; border:1px solid black; padding:5px; width:25%" | Grains
</tr>
+
|-
 +
| style="border:1px solid black; padding:5px" | Apples
 +
| style="border:1px solid black; padding:5px" | Peas
 +
| style="border:1px solid black; padding:5px" | Walnuts
 +
| style="border:1px solid black; padding:5px" | Oats
 +
|-
 +
| style="border:1px solid black; padding:5px" | Oranges
 +
| style="border:1px solid black; padding:5px" | Carrots
 +
| style="border:1px solid black; padding:5px" | Almonds
 +
| style="border:1px solid black; padding:5px" | Barley
 +
|-
 +
| style="border:1px solid black; padding:5px" | Pears
 +
| style="border:1px solid black; padding:5px" | Corn
 +
| style="border:1px solid black; padding:5px" | Peanuts
 +
| style="border:1px solid black; padding:5px" | Wheat
 +
|-
 +
| style="border:1px solid black; padding:5px" | Cherries
 +
| style="border:1px solid black; padding:5px" | Beans
 +
| style="border:1px solid black; padding:5px" | Cashews
 +
| style="border:1px solid black; padding:5px" | Buckwheat
 +
|}
  
<tr>
+
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. <br>
<td style="border:1px solid black; padding:5px">Apples</td>
 
<td style="border:1px solid black; padding:5px">Peas</td>
 
<td style="border:1px solid black; padding:5px">Walnuts</td>
 
<td style="border:1px solid black; padding:5px">Oats</td>
 
</tr>
 
  
<tr>
+
*Do you see the white space to the right of the table. We should try to avoid this.
<td style="border:1px solid black; padding:5px">Oranges</td>
+
*Cuts down on scrolling.
<td style="border:1px solid black; padding:5px">Carrots</td>
 
<td style="border:1px solid black; padding:5px">Almonds</td>
 
<td style="border:1px solid black; padding:5px">Barley</td>
 
</tr>
 
<tr>
 
<td style="border:1px solid black; padding:5px">Pears</td>
 
<td style="border:1px solid black; padding:5px">Corn</td>
 
<td style="border:1px solid black; padding:5px">Peanuts</td>
 
<td style="border:1px solid black; padding:5px">Wheat</td>
 
</tr>
 
  
<tr>
 
<td style="border:1px solid black; padding:5px">Cherries</td>
 
<td style="border:1px solid black; padding:5px">Beans</td>
 
<td style="border:1px solid black; padding:5px">Cashews</td>
 
<td style="border:1px solid black; padding:5px">Buckwheat</td>
 
</tr>
 
</table>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. <br><br>
 
 
*Do you see the white space to the right of the table.  We should try to avoid this.
 
*Cuts down on scrolling.
 
 
----
 
----
  
Here's an example of wrapping using the <font color="red">float</font> attribute:<br><br>
+
Here's an example of wrapping using the <font color="red">float</font> attribute:<br><br>  
<table class="sortable" style="width:65%; border:1px solid black; background-color:#d9d9d9; border-collaspe:separate; border-spacing:5px; border-radius:5px; float:left">
 
<caption style="text-align:center; font-size:36px; margin-bottom:20px; font-family:Graphite Std Wide">Healthy Foods</caption>
 
<tr>
 
<th style="text-align:center; border:1px solid black; padding:5px; width:25%">Fruits</th>
 
<th style="text-align:center; border:1px solid black; padding:5px; width:25%">Vegetables</th>
 
<th style="text-align:center; border:1px solid black; padding:5px; width:25%">Nuts</th>
 
<th style="text-align:center; border:1px solid black; padding:5px; width:25%">Grains</td>
 
</tr>
 
  
<tr>
+
{| style="width:65%; border:1px solid black; background-color:#d9d9d9; border-collaspe:separate; border-spacing:5px; border-radius:5px; float:left" class="sortable"
<td style="border:1px solid black; padding:5px">Apples</td>
+
|+ Healthy Foods
<td style="border:1px solid black; padding:5px">Peas</td>
+
|-
<td style="border:1px solid black; padding:5px">Walnuts</td>
+
! style="text-align:center; border:1px solid black; padding:5px; width:25%" | Fruits
<td style="border:1px solid black; padding:5px">Oats</td>
+
! style="text-align:center; border:1px solid black; padding:5px; width:25%" | Vegetables
</tr>
+
! style="text-align:center; border:1px solid black; padding:5px; width:25%" | Nuts
 +
! style="text-align:center; border:1px solid black; padding:5px; width:25%" | Grains
 +
|-
 +
| style="border:1px solid black; padding:5px" | Apples
 +
| style="border:1px solid black; padding:5px" | Peas
 +
| style="border:1px solid black; padding:5px" | Walnuts
 +
| style="border:1px solid black; padding:5px" | Oats
 +
|-
 +
| style="border:1px solid black; padding:5px" | Oranges
 +
| style="border:1px solid black; padding:5px" | Carrots
 +
| style="border:1px solid black; padding:5px" | Almonds
 +
| style="border:1px solid black; padding:5px" | Barley
 +
|-
 +
| style="border:1px solid black; padding:5px" | Pears
 +
| style="border:1px solid black; padding:5px" | Corn
 +
| style="border:1px solid black; padding:5px" | Peanuts
 +
| style="border:1px solid black; padding:5px" | Wheat
 +
|-
 +
| style="border:1px solid black; padding:5px" | Cherries
 +
| style="border:1px solid black; padding:5px" | Beans
 +
| style="border:1px solid black; padding:5px" | Cashews
 +
| style="border:1px solid black; padding:5px" | Buckwheat
 +
|}
  
<tr>
+
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. <br>
<td style="border:1px solid black; padding:5px">Oranges</td>
 
<td style="border:1px solid black; padding:5px">Carrots</td>
 
<td style="border:1px solid black; padding:5px">Almonds</td>
 
<td style="border:1px solid black; padding:5px">Barley</td>
 
</tr>
 
<tr>
 
<td style="border:1px solid black; padding:5px">Pears</td>
 
<td style="border:1px solid black; padding:5px">Corn</td>
 
<td style="border:1px solid black; padding:5px">Peanuts</td>
 
<td style="border:1px solid black; padding:5px">Wheat</td>
 
</tr>
 
  
<tr>
+
*In the above, the table was "floated" to the left side of the page by using the <font color="red">float:left</font> attribute.  
<td style="border:1px solid black; padding:5px">Cherries</td>
+
*You can see the text wrap around the table on the right side.
<td style="border:1px solid black; padding:5px">Beans</td>
 
<td style="border:1px solid black; padding:5px">Cashews</td>
 
<td style="border:1px solid black; padding:5px">Buckwheat</td>
 
</tr>
 
</table>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. <br><br>
 
*In the above, the table was "floated" to the left side of the page by using the <font color="red">float:left</font> attribute.
 
*You can see the text wrap around the table on the right side.  
 
  
 
*Here is our code:
 
*Here is our code:
<table style="width:470px ">
 
<tr>
 
<th style="color:blue ">HTML</th>
 
<th style="color:blue ">Wikitext</th>
 
</tr>
 
<td style="width:50% ">
 
<div style="border:1px solid black; padding:5px;">
 
<font color="green"><table<br>
 
<font color="blue">class=</font><font color="orange">”sortable”</font> <br>
 
<font color="blue">style=</font><font color="red">”<br>
 
border:1px solid #000000; <br>
 
width:100%; <br>
 
background-color:#808080;<br>
 
border-collaspe:separate; <br>
 
border-spacing:5px:<br>
 
border-radius:5px;<br>
 
'''float:left'''”</font><font color="green">></font>
 
<br>
 
  
</div>
+
{| style="width:470px"
</td>
+
|-
<td style="width:50% ">
+
! style="color:blue" | HTML
<div style="border:1px solid red; padding:5px ">
+
! style="color:blue" | Wikitext
<font color="green">{| <br>
+
|-
</font><font color="blue">class=</font><font color="orange">”sortable”</font>
+
| style="width:50%" | <div style="border:1px solid black; padding:5px;">
<br><font color="blue">style=</font><font color="red">”
+
<font color="green">&lt;table<br> <font color="blue">class=</font><font color="orange">”sortable”</font> <br> <font color="blue">style=</font><font color="red">”<br> border:1px solid #000000; <br> width:100%; <br> background-color:#808080;<br> border-collaspe:separate; <br> border-spacing:5px:<br> border-radius:5px;<br> '''float:left'''”</font><font color="green">&gt;</font> <br></font>
<br>border:1px solid #000000;  
+
<font color="green"></font></div><font color="green"></font>
<br>width:100%;  
+
| style="width:50%" | <div style="border:1px solid red; padding:5px">
<br>background-color:#808080;  
+
<font color="green">{&#124; <br> </font><font color="blue">class=</font><font color="orange">”sortable”</font> <br><font color="blue">style=</font><font color="red">” <br>border:1px solid #000000; <br>width:100%; <br>background-color:#808080; <br>border-collaspe:separate; <br>border-spacing:5px: <br>border-radius:5px: <br>'''float:left'''”</font>  
<br>border-collaspe:separate;  
+
</div>  
<br>border-spacing:5px:
+
|}
<br>border-radius:5px:
+
 
<br>'''float:left'''”</font>
 
</div>
 
</td>
 
</tr>
 
</table>
 
 
----
 
----
*However, there is another problem. The text is right up against the table. How do we put a space between the table and the text?
+
 
*Use our <font color="red">margin</font> attribute.
+
*However, there is another problem. The text is right up against the table. How do we put a space between the table and the text?  
 +
*Use our <font color="red">margin</font> attribute.  
 
*Let's install a <font color="red">margin-right</font> attribute of 10 pixels to create a space between the text and the right edge of the table.  
 
*Let's install a <font color="red">margin-right</font> attribute of 10 pixels to create a space between the text and the right edge of the table.  
 
*We will add this to the opening table tag; <font color="red">margin-right:15px</font>.
 
*We will add this to the opening table tag; <font color="red">margin-right:15px</font>.
  
<table class="sortable" style="width:65%; border:1px solid black; background-color:#d9d9d9; border-collaspe:separate; border-spacing:5px; border-radius:5px; margin-right:15px; float:left">
+
{| style="width:65%; border:1px solid black; background-color:#d9d9d9; border-collaspe:separate; border-spacing:5px; border-radius:5px; margin-right:15px; float:left" class="sortable"
<caption style="text-align:center; font-size:36px; margin-bottom:20px; font-family:Graphite Std Wide">Healthy Foods</caption>
+
|+ Healthy Foods
<tr>
+
|-
<th style="text-align:center; border:1px solid black; padding:5px; width:25%">Fruits</th>
+
! style="text-align:center; border:1px solid black; padding:5px; width:25%" | Fruits
<th style="text-align:center; border:1px solid black; padding:5px; width:25%">Vegetables</th>
+
! style="text-align:center; border:1px solid black; padding:5px; width:25%" | Vegetables
<th style="text-align:center; border:1px solid black; padding:5px; width:25%">Nuts</th>
+
! style="text-align:center; border:1px solid black; padding:5px; width:25%" | Nuts
<th style="text-align:center; border:1px solid black; padding:5px; width:25%">Grains</td>
+
! style="text-align:center; border:1px solid black; padding:5px; width:25%" | Grains
</tr>
+
|-
 +
| style="border:1px solid black; padding:5px" | Apples
 +
| style="border:1px solid black; padding:5px" | Peas
 +
| style="border:1px solid black; padding:5px" | Walnuts
 +
| style="border:1px solid black; padding:5px" | Oats
 +
|-
 +
| style="border:1px solid black; padding:5px" | Oranges
 +
| style="border:1px solid black; padding:5px" | Carrots
 +
| style="border:1px solid black; padding:5px" | Almonds
 +
| style="border:1px solid black; padding:5px" | Barley
 +
|-
 +
| style="border:1px solid black; padding:5px" | Pears
 +
| style="border:1px solid black; padding:5px" | Corn
 +
| style="border:1px solid black; padding:5px" | Peanuts
 +
| style="border:1px solid black; padding:5px" | Wheat
 +
|-
 +
| style="border:1px solid black; padding:5px" | Cherries
 +
| style="border:1px solid black; padding:5px" | Beans
 +
| style="border:1px solid black; padding:5px" | Cashews
 +
| style="border:1px solid black; padding:5px" | Buckwheat
 +
|}
  
<tr>
+
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. <br>
<td style="border:1px solid black; padding:5px">Apples</td>
 
<td style="border:1px solid black; padding:5px">Peas</td>
 
<td style="border:1px solid black; padding:5px">Walnuts</td>
 
<td style="border:1px solid black; padding:5px">Oats</td>
 
</tr>
 
  
<tr>
+
That looks better.
<td style="border:1px solid black; padding:5px">Oranges</td>
 
<td style="border:1px solid black; padding:5px">Carrots</td>
 
<td style="border:1px solid black; padding:5px">Almonds</td>
 
<td style="border:1px solid black; padding:5px">Barley</td>
 
</tr>
 
<tr>
 
<td style="border:1px solid black; padding:5px">Pears</td>
 
<td style="border:1px solid black; padding:5px">Corn</td>
 
<td style="border:1px solid black; padding:5px">Peanuts</td>
 
<td style="border:1px solid black; padding:5px">Wheat</td>
 
</tr>
 
  
<tr>
+
*Here is our code:
<td style="border:1px solid black; padding:5px">Cherries</td>
 
<td style="border:1px solid black; padding:5px">Beans</td>
 
<td style="border:1px solid black; padding:5px">Cashews</td>
 
<td style="border:1px solid black; padding:5px">Buckwheat</td>
 
</tr>
 
</table>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. <br><br>
 
  
That looks better.
+
{| style="width:470px"
*Here is our code:
+
|-
<table style="width:470px ">
+
! style="color:blue" | HTML
<tr>
+
! style="color:blue" | Wikitext
<th style="color:blue ">HTML</th>
+
|-
<th style="color:blue ">Wikitext</th>
+
| style="width:50%" | <div style="border:1px solid black; padding:5px;">
</tr>
+
<font color="green">&lt;table<br> <font color="blue">class=</font><font color="orange">”sortable”</font> <br> <font color="blue">style=</font><font color="red">”<br> border:1px solid #000000; <br> width:100%; <br> background-color:#808080;<br> border-collaspe:separate; <br> border-spacing:5px:<br> border-radius:5px;<br> float:left;<br> '''margin-left:15px'''”</font><font color="green">&gt;</font> <br></font>
<td style="width:50% ">
+
<font color="green"></font></div><font color="green"></font>
<div style="border:1px solid black; padding:5px;">
+
| style="width:50%" | <div style="border:1px solid red; padding:5px">
<font color="green"><table<br>
+
<font color="green">{&#124; <br> </font><font color="blue">class=</font><font color="orange">”sortable”</font> <br><font color="blue">style=</font><font color="red">” <br>border:1px solid #000000; <br>width:100%; <br>background-color:#808080; <br>border-collaspe:separate; <br>border-spacing:5px: <br>border-radius:5px: <br>float:left; <br>'''margin-left:15px'''”</font>
<font color="blue">class=</font><font color="orange">”sortable”</font> <br>
+
</div>
<font color="blue">style=</font><font color="red">”<br>
+
|}
border:1px solid #000000; <br>
 
width:100%; <br>
 
background-color:#808080;<br>
 
border-collaspe:separate; <br>
 
border-spacing:5px:<br>
 
border-radius:5px;<br>
 
float:left;<br>
 
'''margin-left:15px'''”</font><font color="green">></font>
 
<br>
 
  
</div>
 
</td>
 
<td style="width:50% ">
 
<div style="border:1px solid red; padding:5px ">
 
<font color="green">{| <br>
 
</font><font color="blue">class=</font><font color="orange">”sortable”</font>
 
<br><font color="blue">style=</font><font color="red">”
 
<br>border:1px solid #000000;
 
<br>width:100%;
 
<br>background-color:#808080;
 
<br>border-collaspe:separate;
 
<br>border-spacing:5px:
 
<br>border-radius:5px:
 
<br>float:left;
 
<br>'''margin-left:15px'''”</font>
 
</div>
 
</td>
 
</tr>
 
</table>
 
 
*If you want the text to wrap around on the right side of the table, substitute "right" for left in the table tag.
 
*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 Images in FamilySearch Wiki ===
*Floating text, tables, etc can be done with the HTML <font color="red">float</font> attribute in FamilySearch Wiki just fine.
+
 
*Floating images, on the other hand, in FamilySearch Wiki is another matter.
+
*Floating text, tables, etc can be done with the HTML <font color="red">float</font> attribute in FamilySearch Wiki just fine.  
*To float an image requires a different procedure than our normal HTML coding.
+
*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 to for an approved image looks like this:
 
*The link in FamilySearch to for an approved image looks like this:
 +
 
:'''<font color="red"><nowiki>[[File:Ireland image map.png]]</nowiki></font>'''
 
:'''<font color="red"><nowiki>[[File:Ireland image map.png]]</nowiki></font>'''
*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.
+
*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.
 
*Just be aware you can only use images accepted by FamilySearch.
  
===How to Modify and Place Images===
+
=== 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.
+
*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 <font color="red">width</font> attribute in the FamilySearch link like so:
 
*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 <font color="red">width</font> attribute in the FamilySearch link like so:
 +
 
:<nowiki>[[File:Ireland image map.png</nowiki><font color="red">|'''300px'''</font>]]
 
:<nowiki>[[File:Ireland image map.png</nowiki><font color="red">|'''300px'''</font>]]
*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.
+
*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 <font color="red">float</font> to the left or right, we use the float attribute like so:
 
*To get the image to <font color="red">float</font> to the left or right, we use the float attribute like so:
 +
 
:<nowiki>[[File:Ireland image map.png|300px</nowiki><font color="red">|'''right'''</font>]]
 
:<nowiki>[[File:Ireland image map.png|300px</nowiki><font color="red">|'''right'''</font>]]
*In the case we used "right" and again separated from the rest of the code with a pipe.
+
 
*When the computer see <font color="red">right</font> or <font color="red">left</font> it knows right or left refers to floating. We don't have to put the word <font color="red">float:</font> with a colon in front of it.
+
*In the case we used "right" and again separated from the rest of the code with a pipe.  
*It does not matter in order of the width or float attributes in this image links.
+
*When the computer see <font color="red">right</font> or <font color="red">left</font> it knows right or left refers to floating. We don't have to put the word <font color="red">float:</font> 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:
 
*To put a little border around a FamilySearch image, you can type the word '''thumb''' just after the first pipe like so:
 +
 
:<nowiki>[[File:Ireland image map.png|</nowiki><font color="red">'''thumb'''</font>|300px|right]]
 
:<nowiki>[[File:Ireland image map.png|</nowiki><font color="red">'''thumb'''</font>|300px|right]]
 +
 
*Here what the image looks like with a border:
 
*Here what the image looks like with a border:
[[File:Ireland image map.png|thumb|150px|left]]
+
 
*Again, you can't take images from the internet or your personal photos and paste them on pages in FamilySearch. You have to get them approved first.
+
[[Image:Ireland image map.png|thumb|left|150px|Ireland image map.png]]  
*If you can't find an image you want, you can submit a new one by following the approval procedure.
+
 
 +
*Again, you can't take images from the internet or your personal photos and paste them on pages in FamilySearch. You have to get them 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 [[Help:Submitting images for approval|click here]].
 
*To learn how to get images approved [[Help:Submitting images for approval|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.
 
*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.
  
===<font color="blue">What is coming up in Lesson Four</font>===
+
=== <font color="blue">What is coming up in Lesson Four</font> ===
*In lesson Four we will talk about <font color="green"><nowiki><div></nowiki></font> tags and the ability to position elements on pages without tables. Here you will really get to see some fun things.
+
 
 +
*In lesson Four we will talk about <font color="green"><nowiki><div></nowiki></font> 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===
+
=== What you have learned in this lesson ===
*How to change the font in your table.
+
 
*How to put a space between cells.
+
*How to change the font in your table.  
*How to control the size of the cells in a table.
+
*How to put a space between cells.  
*How to round corners of a table or other object.
+
*How to control the size of the cells in a table.  
*How to get text to wrap around objects with float attribute.
+
*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.
 
*How to install an image from FamilySearch Wiki.
  
===Lesson 3 - Homework===
+
=== Lesson 3 - Homework ===
====Problem One====
+
 
*Create a table of your great-grand parents.
+
==== Problem One ====
*Width of table 75%.
+
 
*Title the table Great-Grand Parents and center it.
+
*Create a table of your great-grand parents.  
*Do not use the default font for the title. Use another.
+
*Width of table 75%.  
*Make text 36px high.
+
*Title the table Great-Grand Parents and center it.  
*First column - Last Name (Maiden Names for females)
+
*Do not use the default font for the title. Use another.  
*Second column - First name
+
*Make text 36px high.  
*Third column - Year of birth
+
*First column - Last Name (Maiden Names for females)  
*State or Country of birth
+
*Second column - First name  
*Put the name of the wife under her husband's name. Your rows should alternate from light blue to light pink.
+
*Third column - Year of birth  
*Make column one width 15%
+
*State or Country of birth  
*Make column two width 20%
+
*Put the name of the wife under her husband's name. Your rows should alternate from light blue to light pink.  
*Make column three width 15%
+
*Make column one width 15%  
*Make table sortable
+
*Make column two width 20%  
*Color row of female ancestors with light pink.
+
*Make column three width 15%  
*Color row of male ancestors with light blue.
+
*Make table sortable  
*Background color of header row light gray.
+
*Color row of female ancestors with light pink.  
*Always using HEX color codes.
+
*Color row of male ancestors with light blue.  
*Header font white.
+
*Background color of header row light gray.  
*Float table to right side of page.
+
*Always using HEX color codes.  
*Insert some text and make it wrap your table. You can get the same text that was used above at: [http://loremipsum.net/ lorem ipsum].
+
*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: [http://loremipsum.net/ lorem ipsum].  
 
*Leave a 15px gap between the text and your table.
 
*Leave a 15px gap between the text and your table.
[[HTML and Wikitext Lessons - Problem Answers#Lesson 3 - Problem 1|Clich here to check your answer]]
 
  
====Problem two====
+
[[HTML and Wikitext Lessons - Problem Answers#Lesson_3_-_Problem_1|Clich here to check your answer]]
[[File:Ireland image map.png|300px]]
+
 
*Use the above image <nowiki>[[File:Ireland image map.png|300px]]</nowiki>
+
==== Problem two ====
*Float it on the right side of the page.
+
 
*Make the image 400px wide
+
[[Image:Ireland image map.png|300px|Ireland image map.png]]  
 +
 
 +
*Use the above image <nowiki>[[File:Ireland image map.png|300px]]</nowiki>  
 +
*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.
 
*Get the text you used above to float around it on the left side.
  
[[HTML and Wikitext Lessons - Problem Answers#Lesson 3 - Problem 2|Click here for answer to Problem two]]
+
[[HTML and Wikitext Lessons - Problem Answers#Lesson_3_-_Problem_2|Click here for answer to Problem two]]  
 +
 
 +
=== [[HTML and Wikitext - Lesson Four|Go to Lesson 4]] ===
  
===[[HTML and Wikitext - Lesson Four|Go to Lesson 4]]===
+
[[Category:Help]]

Revision as of 19:05, 1 February 2014

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

Attributes
Attributes go inside Element tags
Elements

This is the HTML code

FamilySearch Wiki


Here's what you will learn in this lesson

  • How to change the font in your table.
  • 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 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.

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 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 notice 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.

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.
  • Cuts down on 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 another 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 10 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-left: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-left: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 to 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 see right or left it knows right or left refers to floating. We don't have 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
  • Again, you can't take images from the internet or your personal photos and paste them on pages in FamilySearch. You have to get them 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 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.
  • 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. Your rows should alternate from light blue to light pink.
  • 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.
  • 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.

Clich here to check your answer

Problem two

Ireland image map.png

  • Use the above image [[File:Ireland image map.png|300px]]
  • 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