share your email address, but hide it from spammers




<!– Begin

in front of the line of code


document.write(‘Your Name Here‘);


document.write(‘10901 Your Street<br>’);





//  End –>




(code snippet credit

html: prevent line break after text link

preventlinebreakafterlinkwith_inlineThe problem:
Creating a text link seemingly inserts a line break and causes the text following the link to wrap to the next line. Notice the second paragraph is not a link – and it doesn’t wrap.

This is what the original code looks like:

To prevent the text from wrapping/inserting a line break, add an inline property to your anchor tag.

Here’s what the inline property looks like:

preventlinebreakafterlinkwith_inline_finalAnd here’s the result:
I know the font size of the link is slightly larger than the paragraph text. I’ll be fixing that next.

html lists: indent spacing and change bullet styles

Working on my website recently and created a multi-level unordered list. The spacing of the second level indent was much more than I needed and I wasn’t loving the fact that the bullets were the same for both levels.

I found code to solve both those problems, so as usual, I’m posting it here for my future reference and, hopefully, to help someone else looking to solve the same problems.

I changed the second level bullet style to square and reduced the second level indent to 15px. Here’s a screen shot of my final list, followed by the code snippets I used:

Continue reading “html lists: indent spacing and change bullet styles”

html: add a mouse hover “tooltip” to a link.

Here’s a little code snippet you can add to a link so that when someone hovers their mouse over the link, a “tooltip” is displayed, giving them more information. In the example shown below, the image of Dorothy looking out her window is a link to download an audio clip of the theme of the Wicked Witch. The tooltip I added displays the target post’s title “free ringtone: wicked witch of the west” when the mouse hovers over the image.

A simple way to add a tooltip to an image link is to add the following code immediately following the link target:

<span title=”your tooltip language goes here”></span>

For an example of how this was used in the image above, check out the sample code below.
The tooltip code appears highlighted on line 4:

<a href="
<span title="free ringtone: wicked witch of the west">
<img class="alignnone size-large wp-image-685" 
style="border: 1px solid #000000;" 
w=474" width="474" height="700" /></span></a>

As you might expect, the tooltip code isn’t limited for use with an image link. It can also be used with a text link, again, just by adding it immediately following the link target and before the </a>
(hover over the following text to view the tooltip)

Wicked Witch of the West Theme Song

Here’s what the code from the above text link looks like:

<a href="
<span title="free ringtone: wicked witch of the west">Wicked Witch of the West Theme Song

To add a tooltip to plain text, it’s even simpler:

<span title=”your tooltip language goes here”>Text to be hovered over.</span>

html links

Ever want to post a link to a web page but don’t want it to look like a bunch of code?
Maybe you don’t understand the code in the first place. (I won’t tell.)

Let’s say you want to post the following link:

Not attractive. And, depending on where you paste it, sometimes it won’t even function as a link.

What if you could create a link that looks like this:

Small is Tall


Let’s keep it extremely simple. Type or copy the text below:

<a href=”page.html”>Label Text</a>

Then replace page.html with the URL of the destination web page.


In this example, the link would look like this:

<a href=”; > Small is Tall</a>

That’s it!
