This HTML guide is designed to cover the HTML basics you will/may want to use here at the Tsali Lodge Forums and for other purposes. There are two ways to post: Using the Design Editor (The "Design" tab, and using the HTML Editor (The "HTML" Tab). However, when creating a bio for your profile or arranging your signature (Sig for short), html is the only way to edit it.
HTML stands for Hyper Text Markup Language. It is to tell web browsers what to display and how to display it.
HTML comes in a variety of tags. A tag is recognized by its brackets [< and >] which enclose some form of letter/combination of letters, such as <strong> or <hr>. Tags are the main part of HTML, they make up most (or all) of the HTML code. Most tags come in pairs; opening tags and closing tags. Opening tags define when the browser should begin doing something with an object, like bold or italic text. Closing tags tell the browser when to stop doing what the opening tag told it to do.
An opening tag looks like this
<b>
A closing tag looks like this </b>
Closing tags are always opening tags with a forward slash after the "<" bracket.
It is very easy and simple to use a tag. First find the tag you want to use. You then set the opening tag before the place you want to format and then a closing tag where you want to stop the formatting action. View below for more information on how to use specific tags.
Here is a list of the HTML you can use here at Tsali Forums:
Break Tag
<br>
This tag is used to insert a single line break.
Bold Text
<b>Insert Bold Text Here</b>
Bold Text looks like this
You can also use the <strong></strong> tag for bold text.
Italic Text
<i>Insert Italic Text Here</i>
Italic Text looks like this
You can also use the <em></em> tag for italic text.
Underlined Text
<u>Insert Underlined Text Here</u>
Underlined Text looks like this
Strikethrough Text
<strike>Insert Strikethrough Text Here</strike>
Strikethrough Text looks like this
Superscript Text
Regular Text Here<sup>Insert Superscript Text Here</sup>
Regular Text Superscript Text looks like this
Subscript Text
Regular Text Here<sub>Insert Superscript Text Here</sub>
Regular Text Subscript Text looks like this
Font
<font face="Insert Font Name">Insert Text Here</font>
Use this tag to change the font you are using. Example:
<font face="Courier New">This is Courier New</font> will look like this:
This is Courier New
Font Color
<font color="Insert Color Info">Insert Text Here</font>
Use this tag to change the color of the text. You can insert several different forms of color into the tag, one of them being your normal writing ("black" "white" "blue" "red") or entering a "#" sign and a six digit code of letters and numbers that will match a color.
(Example: "<font color="#ff0000">Red</font> would produce: Red
Adobe Photoshop can give you the exact code for any given color. A few other basic color codes are:
Blue:"#3333ff"
Green: "#00bb00"
Orange: "#ff7634"
Yellow: "#ffcc00"
If you don't have the technology to get the code for a specific color that you
want, just play around with codes until you get what you are looking for, or
you can drop me a PM and I can get it for you.
Font Size
<font size="Insert Font Size # Here"></font>
This tag defines the size of the text. Enter numbers to enter the size of the text (1 being the smallest, 7 the largest). Example of this tag in use:
<font size="4">This Font is Size 4</font> would look like this:
Font Sizes: Size 1 2 3 4 5 6 7
Linking
<a href="Insert URL">Text to be linked goes here</a>
Example of A link:
<a href=" http://www.tsalilodge.org">Tsali!</a> would look like this:
Tsali!
Images: Posting
<img src="Insert Image URL Here">
Example:
<img src=" http://www.tsalilodge.org/Portals/0/OA_Logo.gif">
would look like this:
Images: LinkingTo link an image, you need to combine the <a href> tag with the <img src> tag. It is done like this: <a href="URL to link to"><img src="Image URL"></a> Example: <a href="www.tsalilodge.org"><img src=" http://www.tsalilodge.org/Portals/0/OA_Logo.gif" border="0"></a> Would look like this: Note: The border="0" part is used to remove the border that appears around an image when it is linked.
Images: Pop-Up Text
To make text appear when you leave your mouse over the image, use the following code:
<img src="URL of Image" alt="Text to Appear">
Example:
<img src=" http://www.tsalilodge.org/Portals/0/OA_Logo.gif" alt="Pop-Up Text!"> Would look like this:
Images: Pop-Up and Linking
To have text pop up and link an image at the same time, all you do is combine the two codes above:
<a href="URL TO LINK"><img src="URL OF IMAGE" ALT="TEXT TO SHOW UP" border="0"></a>
Paragraphs
<p></p>
The <p> tag is used to create spaces between whatever piece of text has this tag, to create something like a paragraph.
For example, normal text would look like this:
text texttext texttext texttext texttext texttext texttext texttext text
text texttext texttext texttext texttext texttext texttext texttext text
text texttext texttext texttext texttext texttext texttext texttext text
text texttext texttext texttext texttext texttext texttext texttext text.
See that? There is no space whatsoever from the paragraph and other pieces of text.
Now let's add the <p> tag and you will see the difference.
<p>text texttext texttext texttext texttext texttext texttext texttext text
text texttext texttext texttext texttext texttext texttext texttext text
text texttext texttext texttext texttext texttext
texttext texttext text
text texttext texttext texttext texttext texttext texttext texttext text.</p>
Now the real tags in use:
text texttext texttext texttext texttext texttext texttext texttext text
text texttext texttext texttext texttext texttext texttext texttext text
text texttext texttext texttext texttext texttext texttext texttext text
text texttext texttext texttext texttext texttext texttext texttext text.
See how spaces formed from the paragraph? That's how this tag works.
Making Lists
There are two types of lists, Ordered and Un Ordered lists.
To make an ordered List use the following tag:
<OL>
<LI>List entry</LI>
<LI>List entry</LI>
<LI>List entry</LI>
</OL>
That would look like this:
- List entry
- List entry
- List entry
An unordered list uses the <UL> tag.
<UL>
<LI>List entry</LI>
<LI>List entry</LI>
<LI>List entry</LI>
</UL>
That looks like this:
- List entry
- List entry
- List entry
Horizontal Line
<hr>
This tag inserts a horizontal line, like this:
Aligning
There are 3 aligning possibilities:
Left, Center and Right.
To align text to the left:
<div align=left>Text here</div>
To align text in the center:
<center>Text here</center>
To align text to the right:
<div align=right>Text here</div>
Quotes
<blockquote></blockquote>
This tag is used for larger quotes. Example:
This is the blockquote tag in use.This is the blockquote tag in use.This is the blockquote tag in use.This is the blockquote tag in use.This is the blockquote tag in use.
These should be all tags that you would need to use here at Tsali
Forums. Of course there are other, more advanced tags and methods to do
more advanced things. If you have any questions about advanced HTML, general
questions, comments, or suggestions, you can post them here or PM them to me.
Please don't use this thread to test out your html. To do that, use your
bio editor and see what it looks like. |