# HTML for dummies



## LadyFlynt (Mar 22, 2005)

Quite honestly...no matter what I read on HTML, I just can't seem to understand it. I can do little things...but I am trying to build a website for our curriculum. I can't seem to figure it out. I plan to use a free graphics set. However in the tutorial of my host it says I need to state what KIND of HTML I am using. How do I know?! What is transitional HTML and all that???? I know what I want, but don't know how to do it.


----------



## fredtgreco (Mar 22, 2005)

Colleen,

Go here:

http://www.w3schools.com/

It has excellent tutorials, from very beginner to expert.


----------



## LadyFlynt (Mar 22, 2005)

thanks


----------



## LadyFlynt (Mar 23, 2005)

Okay, question...I've been doing good so far....but

how do I add words on top of these buttons??? I've tried several things and am apparently not problem solving well.

<p><img border="0" src="images31/buttonblank.jpg" width="139" height="30"<br>
<img border="0" src="images31/buttonblank.jpg" width="139" height="30"><br>
<img border="0" src="images31/buttonblank.jpg" width="139" height="30"><br>
<img border="0" src="images31/buttonblank.jpg" width="139" height="30"><br>
<img border="0" src="images31/buttonblank.jpg" width="139" height="30"><br>
<img border="0" src="images31/buttonblank.jpg" width="139" height="30"><br>
<img border="0" src="images31/buttonblank.jpg" width="139" height="30"><br>
<img border="0" src="images31/buttonblank.jpg" width="139" height="30"> </p>


----------



## daveb (Mar 23, 2005)

Colleen,

Looks like you're wanting to use images for buttons, so the words would have to be in the image itself.


----------



## LadyFlynt (Mar 23, 2005)

It was part of the template...I'm supposed to add the words and links...but where to I put it in the script and how


----------



## blhowes (Mar 23, 2005)

> _Originally posted by LadyFlynt_
> It was part of the template...I'm supposed to add the words and links...but where to I put it in the script and how


Its been a while since I've used HTML, but are you referring to words that appear while you're waiting for the image to load? If so, you might try using alt in your command line. For example, 

<p><img border="0" src="images31/buttonblank.jpg" width="139" height="30" *alt="text"*<br>

[Edited on 3-23-2005 by blhowes]


----------



## LadyFlynt (Mar 23, 2005)

no, the buttons are blank. I need to add the words that will tell the person what each button is for and links to take them to that page.


----------



## LadyFlynt (Mar 23, 2005)

kinda like the "profile" "find" and "U2U" buttons at the bottom of each post...only they are blank and I have to add "profile" and the link that will take you to the profile.


----------



## blhowes (Mar 23, 2005)

> _Originally posted by LadyFlynt_
> kinda like the "profile" "find" and "U2U" buttons at the bottom of each post...only they are blank and I have to add "profile" and the link that will take you to the profile.


It sounds like you need to do what Dave suggested - modify the image so that it has the word in it you want. To add a link, you'd add <a>/</a> tag around the image tag.

*<a href="http://linklocation...">* <img border="0" src="images31/buttonblank.jpg" width="139" height="30"><br>*</a>*


----------



## LadyFlynt (Mar 23, 2005)

nope....showing ABOVE the button not on it.

HOW do I alter the image???


----------



## daveb (Mar 23, 2005)

> _Originally posted by LadyFlynt_
> nope....showing ABOVE the button not on it.
> 
> HOW do I alter the image???



You can open it in a graphic program (even paint) and use a type tool to put whatever text you want on it, and then save it. Might be a bit tricky to make it look right.


----------



## LadyFlynt (Mar 23, 2005)

that just doesn't make sense....and here is why

the "Volume 1" (what would go on the first button) would be part of the image and not an anchor to link to another page. With the "Volume 1" as part of the image instead of as an anchor then clicking on the image will do nothing.

The "Volume 1" and link needs to sit on top of the button image.....


----------



## blhowes (Mar 23, 2005)

> _Originally posted by LadyFlynt_
> nope....showing ABOVE the button not on it.


How about:

<a href="http://linklocation..."><center>Button Label<br><img border="0" src="images31/buttonblank.jpg" width="139" height="30"><br></center></a>



> _Originally posted by LadyFlynt_
> HOW do I alter the image???


You'll need image editing software that lets you open and edit jpg files. For example, Canvas, Photoshop, etc. I use to use a free program called paintshop pro, which was very good.


----------



## Covenant Joel (Mar 23, 2005)

Can't you just make a new button and put whatever text you want on it, and then put that in the code, and then that new button will link to Volume I or whatever you want it to?

Joel


----------



## LadyFlynt (Mar 23, 2005)

Bob, it's there, centered....BUT not on the button...it's above it still.

http://puritanhome.bravehost.com/science.html


----------



## blhowes (Mar 23, 2005)

> _Originally posted by LadyFlynt_
> Bob, it's there, centered....BUT not on the button...it's above it still.
> 
> http://puritanhome.bravehost.com/science.html


OK. You'll need to modify the image. I've never tried it, but you can probably use the Windows Paint program to modify your image and add your text. Paintshop Pro is free for 30 days and gives you a little more flexibility/capability. You can download it from http://www.uv.tietgen.dk/staff/mlha/Download/WIN/#JASC.


----------



## daveb (Mar 23, 2005)

Paintshop Pro is worth downloading for this, hope this is not too frustrating for you!


----------



## LadyFlynt (Mar 23, 2005)

yes, but will I be able to instill the link on the button also, rather than above it?


----------



## blhowes (Mar 23, 2005)

> _Originally posted by LadyFlynt_
> yes, but will I be able to instill the link on the button also, rather than above it?


Yes


----------



## blhowes (Mar 23, 2005)

Colleen,
I'm glad you started this thread. I've been looking for a place, like Bravehost, so I could have my own web site. Ya can't beat free!

I took one of your jpgs and put it onto my new web site. Is this what you're trying to do on your web site?


----------



## LadyFlynt (Mar 23, 2005)

YAY!!!! That's it!!!!


----------



## LadyFlynt (Mar 23, 2005)

So how did you do that? Is it a code that I could alter for the other buttons?


----------



## blhowes (Mar 23, 2005)

> _Originally posted by LadyFlynt_
> So how did you do that? Is it a code that I could alter for the other buttons?


I used Canvas (similar to paintshop pro, etc.) to add text to your image and then saved it as a jpg file.

If you like, I'd be glad to do the same thing for the other buttons and then email the files to you. If so, U2U me your email address and I'll get them to you. If not, its real easy to do with Paintshop pro or whatever and I'm sure you'd have no problem with it.

Bob

[Edited on 3-23-2005 by blhowes]


----------



## Presbyrino (Mar 23, 2005)

> _Originally posted by LadyFlynt_
> So how did you do that? Is it a code that I could alter for the other buttons?



Hi Collen,

You can also edit your button images with Microsoft Paint, which comes standard with all windows pc's. 

*Add the text you want on your buttons in microsoft paint program or paint shop pro program.
*Save your new button images.
*Upload your new button images to your website
*link your new buttons in your html page like such:
<a href="http://linklocation..."><img border="0" src="yourbuttonimage.jpg" width="139" height="30"></a>


----------



## larryjf (May 10, 2005)

LadyFlynt,

You can also just add text straight to the button from you html code. I did this with your button here...

http://lbray.prohosting.com/test/test1.html

You will notice that when the mouse goes over the button, the link is underlined. That helps a little with user perception of an active page.

To get the text into the button I set both the button and the text to an absolute position.

Here's how i referenced your button:
<p><a href="http://lbray.prohosting.com/"><img src="http://puritanhome.bravehost.com/images31/buttonblank.jpg" style="LEFT:0px; POSITION: absolute; TOP:96px;" Width="140" Height="33" border="0"></a></p>

Here's how i put in the text:
<P><a style="font-family:Arial; color:#000084; Font-Size: 16px; POSITION: absolute; LEFT:35px; TOP:97px; Width:47px; Height:19px;" href="http://lbray.prohosting.com/">
<B>Home</B>
</a>

Here's how i created the underline effect. This must go in between <head> and </head> ...

<style type="text/css">
<!--
BODY {
scrollbar-base-color:#ADDBE7;
}
a{text-decoration:none;}
a:hover {text-decoration: underline;}
-->
</style>


[Edited on 5-10-2005 by larryjf]


----------

