HTML for dummies

[LadyFlynt]

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]

Colleen,

Go here:

http://www.w3schools.com/

It has excellent tutorials, from very beginner to expert.

 

[LadyFlynt]

thanks

 

[LadyFlynt]

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]

Colleen,

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

 

[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

 

[blhowes]

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]

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]

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]

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]

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

HOW do I alter the image???

 

[daveb]

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]

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]

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]

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]

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

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

 

[blhowes]

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]

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

 

[LadyFlynt]

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

 

[blhowes]

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

Yes

 

[blhowes]

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]

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

 

[LadyFlynt]

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

 

[blhowes]

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]

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]

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]