Helpful HTML

[Scorpius]

A few little HTML tricks that will help users format their own additions to the WiccaPlus app.

To make a table:

<table> This tag tells your code to put your table here,
</table> and this tag tells your code the table is done. These two tags will wrap around the meat of your table.

<tr> Tells your code to start a new Table Row,
</tr> and to end that row.

<td> This tag will tell your code to put one cell of your table here,
</td> and where that cell ends.

Together they would look like this- ignore the text in parentheses.

<table> (start the table>
<tr> (start a row)
<td> (start a cell)
This text would appear in your first cell of your first row.
</td> (end your cell)
</tr> (end the row)
</table> (end your table)

To make bigger tables you just add more cells and rows, remember that cells go inside rows, so you have to close your tags in the reverse order that you wrote them. Also note you don't have to close each tag on it's own line, it's written that way here for easier comprehension.

To add a header to your table:

<table>
<tr>
<th>
This will be your table Header!
</th>
</tr>
<tr><td>This is the first cell on the first row beneath your header.</td></tr>
</table>

You can change the size of your header by wrapping your text in the <h1> </h1> tags, the number 1 being the largest size, down to 6 <h6> </h6>. By default your header will only be as wide as one of your cells, you can change this! Say your table is four cells wide, and you want your header to stretch all the way across, it would look like this:

<th colspan="4"><h3>Header!</h3></th>

Because "column span" is modifying your table header tag, but isn't a separate tag on its own, you only have to close <th>.

To add a border to separate the cells in your table you modify your table tag.

<table border="1">
(( all your lovely table code))
</table>

This adds a 1 pixel wide border around all of your cells. There's ton of resources online to learn more HTML but I thought a quick crash course in tables would be handy. I'll follow up with how to add a clickable table of contents that will let you quickly navigate a long page.

[Scorpius]

Need to navigate a long page? A table of contents at the top will help you jump down to where you want to go without scrolling.

First you find the spot you want to jump to, say an entry about fire correspondences. Wrap some tags around the first word of your entry to put a sort of bookmark there, like this:

<a name="fire"> Fire</a> is the element associated with....

That tag sets a sort of anchor to the word Fire in your text, and names the anchor "fire". Back at your table of contents near the top of your page, you add a link that goes to your anchor, rather than a webpage.

The Elements:
Earth
Air
<a href="#fire"> Fire</a>

This turns the word Fire in your list into a link that will navigate to your anchor on the same page. Note that even thugh the anchor is named "fire" the link to it requires a # symbol as well.

[Stephanie]

This is awesome, thank you so much Scorpius!

One forum-related tip I'll add is to make posted-code easier to read, there is a formatting-option in the forum itself. It's above the 'Your Message' box, towards the right, and looks like a bold # symbol.

When you use it, the code is formatted like this:

Code:

<table> (start the table>
  <tr> (start a row)
    <td>  (start a cell)
This text would appear in your first cell of your first row.
    </td> (end your cell)
  </tr> (end the row)
</table> (end your table)

Cheers!

[Lezley]

(2014.03.11, 15.27)Scorpius Wrote: Need to navigate a long page? A table of contents at the top will help you jump down to where you want to go without scrolling.

First you find the spot you want to jump to, say an entry about fire correspondences. Wrap some tags around the first word of your entry to put a sort of bookmark there, like this:

<a name="fire"> Fire</a> is the element associated with....

That tag sets a sort of anchor to the word Fire in your text, and names the anchor "fire". Back at your table of contents near the top of your page, you add a link that goes to your anchor, rather than a webpage.

The Elements:
Earth
Air
<a href="#fire"> Fire</a>

This turns the word Fire in your list into a link that will navigate to your anchor on the same page. Note that even thugh the anchor is named "fire" the link to it requires a # symbol as well.

OOH! OOH!! I love jump-to links!!

I have trouble with them showing up where they're supposed to though.
Sometimes the jump will show up way below and I have to place the line destination 4 lines above my target.

Is that normal?