Helpful HTML Tips

Hopefully this page will help people who are not HTML savvy
to work some basic HTML on the Windstone Forums. Confused?
Need more instructions? Send me (Hannah) a message!


Posting Images
Change an Image's Size
Posting Links
Posting Image Links
Making Text Bold
Making Text Italic
Making Text Underlined
Changing Text Color
Click Here for a Tutorial on uploading images to Photobucket!



Click here for a quick reference list!














Posting Images

Directions:

In order to post an image, you must use the following HTML code:


 Example:

<img src="http://www.deadbunny.org/star.gif"> The code above tells your browser where the image is located and that you want it to show as an image using HTML. The above code will show the following image on a webpage or on the Windstone forums:


Key things to know:
  • The picture's URL address must go in between the quotation marks.
  • The picture's URL address MUST include the http:// in it.

    To locate an image's URL address:
  • IN INTERNET EXPLORER: Right click on the image and select "properties". The image's address will be on this page.
  • IN FIREFOX: Right click on the image and select "Copy Image Location". This will copy the URL to your clipboard.

    Try it out with the star image above!







 Changing an Image's Size

Directions:

In order to post a resized image, you must use the following HTML code:
(Please note that the number in this code is the number of pixels ACROSS you'd like your image to be.)


 Example:

<img src="http://www.deadbunny.org/star.gif" width="100"> The added value of width="100" tells your browser that regardless of the default size of the image you are displaying, that the width will be 100 pixels wide. The above code will show the following image on a webpage or on the Windstone forums:



You can change this numerical value to any width that you would like! However, keep in mind that the Windstone forums will not accommodate images larger than 700 pixels wide.


Key things to know:
  • Changing only the width of an image will automatically change the height of the image to scale.
  • The Windstone Forums will not accommodate images larger than 700 pixels wide, so you should not size your images to be larger than 700 pixels wide.









Posting Links

Directions:

In order to post a link, you must use the following HTML code:


 Example:

<a href="http://www.deadbunny.org">It's Hannah's Webpage!</a> The code above tells your browser two things:

1. Where you want the link to take you
2. What you want the link to look like

For the above code, I've made the link my homepage at http://www.deadbunny.org, and I've told it that I want the link to read "It's Hannah's Webpage!"
The above code will look like this on a webpage or on the Windstone forums:

It's Hannah's Webpage!


Key things to know:
  • The link's URL address must go in between the quotation marks.
  • The link's URL address MUST include the http:// in it.









Posting Image Links

Directions:

In order to post an image link, you must use the following HTML code:


 Example:

<a href="http://www.deadbunny.org"> <img src="http://www.deadbunny.org/star.gif" border="0"></a> The code above tells your browser several things:

1. Where you want the link to take you
2. The address of the image that you'd like to make the link into 3. How large of a border you want the image link to have (this is optional! I like it to have no border, so I have defaulted the setting to "0")

For the above code, I've made the link my homepage at http://www.deadbunny.org, and I've told it that I want the link to be the same star image that I used before.
The above code will look like this on a webpage or on the Windstone forums (mouse over it!):


Key things to know:
  • The same tips I've given in the previous sections still apply here
  • The "border" setting is completely optional! You can replace the "0" with "1" or any number - this is the number of pixels you would like the border to be.
  • The color of the border will correspond to the colors that the website uses for their links. If the webpage does not have any specified link colors, the default for most web browsers is blue for a link you have not yet visited, and purple for a link you have visited.
  • An easy way to think of a picture link is that you are simply putting the Image Code within the Link Code - the only other difference in the code I have provided is that it has a border value of zero.








Changing Your Text
There are many different ways to customize and change the way text looks in HTML!
I will go over the basics of changing your text's color as well as making your text
Bold, Italic, and Underlined.

Directions:

Use the following code to make your text Bold:


 Example:

<b>This text is bold!</b> The code above tells your browser two things:

1. Where to begin making the text bold
2. Where to end making the text bold

For the above code as well as all of the rest of the codes on this page, it is important to close the tag! The tag begins by telling your browser that all of the text after it will be bold, and it also tells your browser when the text should stop being bold. It's important to note that the text in your post will continue to be bold unless you include the closing tag! You can tell which is the closing tag by the / included with it. The above code will look like this on a webpage or on the Windstone forums:

This text is bold!


Directions:

Use the following code to make your text Italic:


 Example:

<i>This text is italic!</i> The code above tells your browser two things:

1. Where to begin making the text italic
2. Where to end making the text italic

The above code will look like this on a webpage or on the Windstone forums:

This text is italic!


Directions:

Use the following code to make your text Underlined:


 Example:

<u>This text is underlined!</u> The code above tells your browser two things:

1. Where to begin making the text underlined
2. Where to end making the text underlined

The above code will look like this on a webpage or on the Windstone forums:

This text is underlined!








Changing Your Text Color

Directions:

Use the following code to change your text to the color yellow:


 Example:

<font color="#FFFF00">This text is yellow!</font color> The code above tells your browser two things:

1. Where to begin changing the color of your text
2. Where to end changing the color of your text

It's important to note that when using hexidecimal codes (the FFFF00 up there), that you need to put a pound sign (#) in front of the code for it to work. You can use a variation of many different numbers and letters to create different colors, but the # sign must always be in front of the code (and within the quotation marks) for it to work. The above code will look like this on a webpage or on the Windstone forums:

This text is yellow!


Color Picker
This color picker will allow you to pick and choose any color that you can think of!
Simply follow the directions below.


Instructions
1.) Click on the color box below.
2.) Select the color you'd like to use.
3.) Copy the color code.
4.) Use this code to change the color of your text!
*** Remember that the # sign needs to be at the beginning of the color code to work! ***
(eg: #FFFFFF)

#