now with added Masterweb and IB Geek Girl

spider web Ecanus•net :: Tutorials

Tutorials

These aren't really full blown tutorials – more quick 'n' dirty guides to doing stuff that might save you some time. Click the links below to see them.

HTML

This one's actually HTML and CSS, as are most of them really:

Adding dotted underline and tooltip to abbreviations and acronymns

HTML: <abbr title="eXtensible HyperText Markup Language"XHTML</abbr>

The abbreviation we want to expand upon is given the <abbr> tag which signifies that the text between the opening and closing tag is an abbreviation. The 'title' attribute provides the tooltip text.

CSS: abbr, acronym { cursor: help; border-bottom: 1px dotted #444; }

The style rule added simply tells the browser that when an <abbr> abbreviation tag, or an <acronym> is encountered, the text should be given a dotted bottom border (necessary as it's not possible to have a dotted underline, and as underlines traditionally signify a hyperlink, this could be confusing for users anyway), and that on mousing over or focus on this area, the cursor should change to the question mark 'help' cursor. The title attribute in the HTML provides the tooltip text.

Result: HTML

Getting back to the top

Probably one of the most useful HTML code snippets ever invented. Got a long web page? To save endless scrolling it can be so much easier for visitors to get back to the top of the page (or anywhere else on the page for that matter), if there's a simple way to click and get there. All this requires is an anchor and a link. We don't need this link to be visible, so nothing needs to go between the <a> tags.

The anchor

Up at the top of the page (or wherever on the page you want visitors to be able to return to) you need an anchor. It's the anchor that the link we'll be creating in a moment points to.

Your anchor needs an 'id' and a 'name'. In this example I've used "toplink", but you can use anything you want, though something that identifies what the anchor's for can be helpful a few months down the line when you look back at the code.

The anchor: <a name="toplink" id="toplink"></a>

Next, we need the link. You can add as many links as you want pointing back up to the top of the page – useful if you've got a very long page!

The Link

The link points back to the anchor we've just created.

HTML: <p class="toplink">&uarr; <a href="#contentlink">Top of page</a></p>

Result: ↑ Top of page