Type the following code in your “contact” page or wherever you want your contact information to appear on your website:
Copy the code below, paste it in a text file and edit the content in red:
(You can use any text editor, like the Notepad app in Windows.)
// NOTE: If you use a ‘ add a slash before it like this \’
// NOTE: to turn any code into a comment, type two forward slashes //
in front of the line of code
// NOTE: I left the css code in, but you would need to create it in your own style sheet
document.write(‘Your Name Here‘);
document.write(‘10901 Your Street<br>’);
document.write(‘City, ST 12345<br>’);
document.write(‘PHONE: <span class=”phonetitle”>(555) 555-5555<BR></span>’);
document.write(‘EMAIL: <A HREF=”mailto:email@example.com” class=”link”>firstname.lastname@example.org</a><br>’);
// End –>
Name the text file “phone.js” and save it in the same folder as the file containing the first code.
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 in this post, 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 displays the 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 include the following to your link code:
<span title=”your tooltip language goes here”></span>
For an example of how this was used in the image above, check out the sample “before” and “after” code below. First, here’s the link code withOUT the <span title> code:
<a href=”https://pragmaticcomputing.wordpress.com/2016/08/24/html-add-a-mouse-hover-tooltip-to-a-link/wordpress-post-displaytooltiponhover/”> <img style=’border:1px solid #000000;’ src=”https://pragmaticcomputing.files.wordpress.com/2016/10/wordpress-post-displaytooltiponhover.png?w=474″ width=”474″ height=”700″ class=”alignnone size-large wp-image-685″ /></a>
This is the “after” code, including the tooltip code and text. (I’ve shown the code in red to highlight it here, coloring is not required.)
<a href=”https://pragmaticcomputing.wordpress.com/2016/08/24/html-add-a-mouse-hover-tooltip-to-a-link/wordpress-post-displaytooltiponhover/”> <span title=”free ringtone: wicked witch of the west”><img style=’border:1px solid #000000;’ src=”https://pragmaticcomputing.files.wordpress.com/2016/10/wordpress-post-displaytooltiponhover.png?w=474″ width=”474″ height=”700″ class=”alignnone size-large wp-image-685″ /></span></a>
To add a tooltip to text, it’s even simpler:
<span title=”your tooltip language goes here”>Text to be hovered over.</span>
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:
And 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.
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”
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
And, more importantly, when someone clicked, it actually worked as a link?
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.
Also replace Label Text with whatever text you want the reader to see instead of the actual link.
In this example, the link would look like this:
<a href=”http://www.youtube.com/watch?v=vFLs9RI8mSA” > Small is Tall</a>
(Keep in mind, some websites, forums and blogs restrict the use of html code. For instance, wordpress.com allows this html link code in comments, but blogger only allows simple html code, like bold and italics.)