e A Beginner's Guide to HTML f

---

Colored text:

<font color="blue">type the text you want to color here</font>
produces:
type the text you want to color here

For a list of available colors, go here: HTML Color list. Both the color name and color number work, but only use one or the other in the code I listed up there. I find that using the name of the color works best for me.

---

Text size:

<font size="+2">type the text you want to make larger/smaller here</font>
produces:
type the text you want to make larger/smaller here

The # for size can range from 1 to 7, and must be either + or -, + being larger, - being smaller

---

Fonts:

You can add fonts to your posts by typing the following:

<font face="comic sans ms">type the text you want to show in comic sans ms font here</font>
which produces:
type the text you want to show in comic sans ms font here

It's important to know that whatever font you use will only show up on someone else's computer if it's present on their hard drive. If you want to guarantee that your chosen font shows up in everyone's post, use one of the standard Windows fonts, listed on this page. If you choose to use a non-standard Windows font, post a link to a site where they can download the font you've chosen to use.

There are a number of fun font pages out there. Here are a couple of favorites:

Fonts for Kids
Pearlygates Fonts

---

Color and size can be combined in one html command as follows:

<font color="deeppink" size="+5">deep pink +5 text</font>
which produces:
deep pink +5 text

---

Now I'm going to change the font and bold, italicize and center that same text, by typing this:

<center><b><i><font face="Tempus Sans ITC" color="tomato" size="+5">tomato red +5 text</font></i></b></center>
which produces:
tomato red +5 text

---

To do a marquee (marquees don't work in Crosswalk forums, but may work in other forums), type:

<marquee>type the text you want to marquee here </marquee>
which produces:
type the text you want to marquee here

---

If you want to change the font size and color in the marquee, just do this:

<marquee><center><b><i><font color="darkslateblue" size="+5">dark slate blue +5 text</font></i></b></center></marquee>
Which produces this:
dark slate blue +5 text

---

To insert a single-cell table into your post, type this:

<table border="1"><tr><td>
text goes here
</td></tr></table>

which produces this:

text goes here

The value of the border size ("1") determines the width of the border. "0" produces no border, while "10" produces a very thick border.

---

To color the background of your single-cell table, type this:

<table border="5" bgcolor="steelblue"><tr><td>
text goes here
</td></tr></table>

which produces this:

text goes here

Not assigning a bgcolor (background color) to your table makes the table transparent, so the background of your webpage will show in the table, as in the previous example.

For a list of available colors, go here: HTML Color list. Both the color name and color number work, but only use one or the other in the code I listed up there. I find that using the name of the color works best for me.

---

To color the border of your single-cell table, type this:

<table border="10" bgcolor="steelblue" bordercolor="purple"><tr><td>
text goes here
</td></tr></table>

which produces this:

text goes here

As you can see, not assigning a color to the border produced a transparent or gray (the default border color) border in the previous two examples, while the border is colored purple in this example.

---

Cellpadding adds space between the walls of the cell and the contents. To add cellpadding, type this:

<table border="10" bgcolor="steelblue" bordercolor="purple" cellpadding="5"><tr><td>
text goes here
</td></tr></table>

which produces this:

text goes here

In this example, the cellpadding value is "15":

text goes here

As you can see, the text in the table cell is no longer touched on all sides by the edges of the cell. The cellpadding value can be any number you'd like.

---

To change the type and color of the font in your single-cell table, type this:

<table border="10" bgcolor="steelblue" bordercolor="purple" cellpadding="10"><tr><td>
<font face="comic sans ms" color="lightpink">
text goes here
</font></td></tr></table>

which produces this:

text goes here

As you can see, just about any HTML code that works on a webpage can be inserted into a table. Have fun playing with font types, border colors and table background colors until you find just the right combination!

---

If you're feeling particularly adventurous, you could place a marquee inside a table, like this:

<table border="10" bgcolor="steelblue" bordercolor="purple" cellpadding="10" width="100%"><tr><td>
<font face="Tempus Sans ITC" color="deeppink" size="+5">
<marquee>A pretty pink marquee inside a table </marquee>
</font></td></tr></table>

which produces this:

A pretty pink marquee inside a table

As always, remember that the marquee code doesn't work in Crosswalk forums.

---

To insert a line in your post, type this:
<HR width="100%" align="center">
which produces this:

---

To change the width of the line, change the width percentage, like this:
<HR width="50%" align="center">
which produces this:

---

---

To add a link, type this:

<A HREF="http://anchoredbygrace.com/" target=_new>Anchored by Grace</A>
which produces this:

Anchored by Grace

The part I've typed in pink is the address to the website you want to link, which you can copy from the address bar of your internet browser.

The 'target=_new' part tells your browser to open the link in a new window.

The part typed in blue is the name of the link, which must be included.

---

To add an image, type this:

<IMG SRC="http://anchoredbygrace.com/images/funny.jpg">
which produces this:



The part that's typed in pink is the address of the image on the internet. The image must be uploaded to a site on the internet in order for it to be shared online in forums, message boards, chats or emails.

---

The link and image commands can be combined to create a clickable image that takes the user to another website, and is typed like this:

<A HREF="http://anchoredbygrace.com/" target=_new><IMG SRC="http://anchoredbygrace.com/abg-banner.gif" border="0"></A>
which produces this:



The 'border="0"' command tells the browser not to put an outline around the clickable image. Without the 'border="0", the clickable image would look like this:



which some people prefer, but I don't.

---

Have fun using your new HTML knowledge on message boards, forums, websites and emails!

---

ef