A Quick HTML Course

OK, this will not make you a web designer, but it will help you understand how to make your "Share Your Gifts" comments postings prettier, easier to read,  and a little bit more functional. I'm staying to the simple basics for now but I may add more later.

Everything in red in the examples below would be considered an HTML "tag" and everything in yellow would be considered textual content that is being formatted by the HTML tag.

Most HTML tags have an "opening" tag and a "closing" tag (there are a few exceptions). The starting tag comes before the text it is formatting, and the closing tag comes after it. An HTML tag always begins with a < character and ends with a > character.

The opening tag also has all the information in it to tell the browser what kind of tag it is and any additional properties or attributes that you want associated with that tag.

This sounds complicated, I know, but it will make more sense when you see how it works below in the specific examples and it is actually pretty easy once you understand how it works.

Creating a Clickable Hyperlink:

If your link is http://www.cosmicnexus.org, and you want the text "My Link" to be the hyperlinked text, then your clickable hyperlink would need to look like this:

Example:

<a href="http://www.cosmicnexus.org" target="_blank">My Link</a>

This results in a link/text that will look like this: My Link.

NOTE: the opening tag is everything in red BEFORE the text in yellow. The closing tag is everything in red AFTER the text in yellow. 

In the opening tag we have the href attribute which tells the browser where to send us when we click the link it is going to make for us. We also have the target attribute which in this case is telling the broswer to open the link in a new tab or window so the person does not lose the page where they were by clicking the link.

Making Text Bold:

<strong>My Text</strong>

This will result in text that looks like this: My Text

Making Text Italic:

 <em>My Text</em>

This will result in text that looks like this: My Text

Underlining Text:

<u>My Text</u>

This will result in text that looks like this: My Text

Making Colored Text:

This is a little bit more complicated because you need to know the code for the color you want, either that, or the name of a "Web Only" color. 

Have a look at this convenient list of both the color names and the color "hex codes" for web safe colors and try to keep in mind what will and won't look good with the site design on Cosmic Nexus.

Once you have the color name or hex code you can use the following to color your text:

Using Color Names:

 <font color="Fuschia">My Text</font>

Using Color Hex Codes:

<font color="#FF00FF">My Text</font>

 Both of these result in text that looks like this: My Text

Combining Text Formatting Tags:

You can use the tags above in combination as well. The main rule to follow is that the tags should be nested properly. In other words if you place a an opening tag just inside of another opening tag, that tag's closing tag should also be right inside the closing tag of the other tag. Confused? Look at the examples below and it will become clear:

Combining Bold and Italic:

<strong><em>My Text</em></strong>

This results in text that looks like this: My Text

NOTE: how the <em></em> tags are "nested" inside the <strong></strong> tags. They could have been nested in reverse also, it would not have mattered. It only matters that they are nested properly as shown above.

Here is an example of INcorrect nesting, or acutally, partial nesting.

<strong><em>My Text</strong></em>

 NOTE: how in this example the opening <em> tag is INSIDE the <strong> tag, but the closing </em> tag is OUTSIDE the </strong> closing tag. This should be avoided.

This may actually still work in some browsers on some web pages, but it is not correct HTML and can have problems in some situaions as well. The only reason it works is because browsers are smart enough to look for bad code and try and interpret what it is supposed to look like.

You can do this combining with almost all of the HTML tags to get different effects!

NOTE: when combining tags with the tags for a hyperlink, it is generally best to place all other tags so they are nested inside the tag for the hyper link like this:

<a href="http://www.cosmicnexus.org" target="_blank"><strong><em>My Link</em></strong></a>

This results in a link/text that will look like this: My Link.

That is it for now! If you have specific things you would like to know how to do you can either let me know through my contact page or by posting a request in the Share Your Gifts Global Community Board!

Breathe deeply, be at peace, then give it a go,
Simeon Chi'Ra