First copy this image if you need one to practice with.

Now I will show you how to add an image in place of those little dots and squares that are always in front of lists in HTML. First take a look at the code below. You must place it inside the <UL> Tag!! (See the bottom for an example.) This will change those boring little black things to an image. Put your image where it says dot.gif below. Here is the code:

style="list-style-image: url(dot.gif);"

Now let's put it inside the <UL> tag like so:

<ul style="list-style-image: url(dot.gif)">

Then add your list items. And you write the entire code like this:

<ul style="list-style-image: url(dot.gif)">
<li>Can you see the image?</LI>
<LI>Hey, I can see it!</LI>
</ul>

It should look like this:

• Can you see the image?
• Hey, I can see it!
• Hey you! This one is different. How'd you do that?

Well, you see, I simply stuck that same bit of code inside the <LI> tag. AND I changed the image in it. And just to be sure that I am not confusing you all, this is how the code is written for the list above:

<ul style="list-style-image: url(dot.gif)">
<li>Can you see the image?</LI>
<LI>Hey, I can see it!</LI>
<LI style="list-style-image: url(starani.gif)">Hey you! This one is different. How'd you do that?</LI>
</ul>

Not bad, huh? Now, you go try it! I have placed a few small images here for you to work with. Feel free to use them as you please.

Next trick has to do with those little red buttons at the top of the page. I'm going to teach you how to make them using strictly HTML -- No Graphics! So stick around. More coming soon. Gotta sleep sometime.

First the code:

<BUTTON STYLE="background-color: red;" "width: 135px; height: 35px;"
onClick="window.location='http://www.shadowfiregraphics.com'">
Home</BUTTON>

Now the explanation: This code is fairly new and will not show up in Netscape but does fine in Microsoft IE 4 or above. You've probably noticed the opening and closing tags already and yes, it's a button tag. Also as you can see it has several attributes. I am writing these tips with the assumption that either you already know HTML or are taking the tutorial and know enough to follow the tips in this section. If not, then you can learn HTML here! Now for the attributes: STYLE has width, height, background color, plus a place for a URL. You simply change each one to the desired width, height, or color, and then type in the URL that you want this button to lead to. The words in between the tags will be what is imprinted on the button. Unlike what is written above, you need to keep the code all together with no line breaks. It is done this way here so that you can see it without it scrolling off the page. Okay, here we go. This is what the above code does on a web page:

And if you want it in BOLD type, just do as you normally would and stick the <B>HOME</B> tags in front of the words that you plan to have on your button. As you can see, mine says HOME and the URL is "http://www.shadowfiregraphics.com". I like RED or can't you tell, so I made the button background color RED and the writing black. You can change the font the same way, by inserting it in front of the words you name your button. (If you'll hold your mouse over the HOME button, you will see that it changes colors. You can find scripts to do this at DynamicDrive.com) Making buttons? Easy, huh? Okay, let's make some buttons! (This next one is in BOLD with a blue background and I inserted the font tags to make the word E-mail red. The URL had been changed to a MAILTO:.)

And just so you can see the changes, this is the code:

<BUTTON STYLE="background-color: blue;" "width: 200px; height: 75px;" onClick="window.location='mailto:debi@shadowfiregraphics.com'"><font color="#FF0000"><B>E-mail me today!</B></font></BUTTON>

Back to Tips & Tricks Index

Click on Texas to E-mail me!