WahmPro Professional Web Designer for the WAHM
 

HTML Basics

HTML stands for HyperText Markup Language.  This is the basic language that browser read to render what a webpage looks like.  It is constructed of tags.  You need to have an opening tag <tag> and a closing tag </tag>.  Notice the back slash, that indicates a closing tag. 

The directions below are for WAHMShoppes clients, so they may have info that will only work with those hosted by WAHMShoppes using the eStore.

Basic Tags

Bold - Make text bold <b></b>

<b>This Makes My Text Bold</b>

Underline - underline your text

<u>This Underlines My Text</u>

Italics - Make text italicized.

<i>This Makes my Text Italicized</i>

Now imagine you want to combine these.  You want your text to be bold, underlined, and italicized.  You would do the following:

<b><u><i>This Makes My Text Bold, Underlined, and Italicized</i></u></b>

***Hint,  your tags need to close in the exact order that they were  opened.  Notice out the <b> is at the front and was the first tag opened,  and it is the last to close.  You can end up with errors if your tags are not opened and closed in the correct order.

Controlling Font Size & Color

Font Size

<font size="1">Your Text Goes Here</font> - Font Size 1

<font size="2">Your Text Goes Here</font> - Font Size 2

<font size="3">Your Text Goes Here</font> - Font Size 3

<font size="4">Your Text Goes Here</font> - Font Size 4

<font size="5">Your Text Goes Here</font>Font Size 5

****font size 3 is best recommended for easiest viewing in most browsers.

Font Color

If you want to change the color of your font it is similar to the above for size but you indicate a color name or number.

<font color="color name here">Your Text Goes Here</font>

or

<font color="#xxxxxx">Your Text Goes Here</font>

xxxxxx = the color number.

For a list of web colors and their numbers you can go here:

Color Table

So for example you want something to be in a red font. Your code would be.

<font color="red">Your Text Goes Here</font> Looks like:

Your Text Goes Here

Or You can use the color number. (This is the better method)

<font color="#FF0000>Your Text Goes Here</font> Looks like:

Your Text Goes Here

Paragraphs and Breaks

Paragraph Tag - <p></p>

<p>This tells the browser where the paragraph starts and stops. This will create a double line space at the end of your paragraph.</p>

Break Tag - <br>  ***Note this tag does not have a closing tag.

You would use the break tag to create formatting where you do not want a double line such as a paragraph tag.<br>
See how this line is started right below without a double space?

Links

There are several ways to link, I will cover the basics.

To Link To Another Page.

<a href="url of link goes here">Text That Tells About Link</a>

To Link To Another Page but have it open in a new window.

<a target="_blank" href="url of link goes here">Text That Tells About Link</a>

***This is good if you will be linking to another site, so your visitor does not leave your site. or if you need to link to a color chart or a reference page while the visitor is at your site.

To Create An Email Link

<a href="mailto:email@address.com">Text For Link Here</a>

replace email@address.com with your email. 

It will work like this:

Text For Link Here

If you want to add a pre-filled subject to it you would use the following cod:

<a href="mailto:email@address.com?subject=subject%20Text%20Here">Text For Link Here</a>

Example:

Text For Link Here

the %20 replaces a space in your subject text.

Add Images To Your Site

Upload the image to your store.  Click on file utilities.  Remember what the file name is.  A file name would be

filename.jpg or filename.gif  (only .jpg or .gif will work in the store)

Then put the following code in your page.

<img src="/fpdb/images/filename.gif">

replacing filename.gift with your actual file name.

Making An Image A Link

This one is a bit more tricky, but we are going to combine the link functionality with your image.  This is good for those that want to link to their ebay listings using the ebay logo.

<a target="_blank" href="url of link goes here"><img src="/fpdb/images/filename.gif"></a>

***Notice I used the target="_blank" this will tell it to open in a new window.

 


 
homelinksfeedbackterms of servicesite map


WahmPro Web Design 2004-07 All Rights Reserved