Archive for the ‘HTML’ Category

h1

Internet Explorer 8: Changing the text editor

December 7, 2009

In previous versions of Internet Explorer (IE), you could right click on a web page, select View Source and the HTML code etc. would open in Notepad. Not in IE8. The source code opens in a different viewer and you can’t edit the text.

However, you can change that!

  1. Press F12 to open IE8’s Developer Tools (or Tools > Developer Tools).
  2. On the File menu, select Customize Internet Explorer View Source, then select Notepad (or select Other to choose your preferred text editor).
  3. Close the Developer Tools window.

The next time you View Source on an IE8 page, Notepad (or your preferred text editor) will open.

You can buy me a coffee if this tip helped you Has this tip helped you? saved you time? saved your skin? You can thank me by clicking on the cup and buying me a coffee. (An E-Junkie shopping cart page will open where you can pay for my coffee via PayPal.)
h1

Pre-populating email links

October 8, 2009

A client wanted to have an email link, which would open Outlook and populate some of the email with boilerplate text. This was for an intranet, so email address security wasn’t an issue — I knew I could use a simple mailto link. Easy.

Except that I wanted some line breaks between parts of the message body. A bit of Googling and I found a solution that works! Here’s the syntax…

  • Link to email address: mailto:name@company.com (where you substitute ‘name@company.com’ with the real email address)
  • Subject line: ?subject=Subject line (substitute ‘Subject line’ with the real subject)
  • Message: &body=Message (substitute ‘Message’ with the real message)
  • Line breaks in the message body: %0A (that’s a zero, not an ‘O for orange’); use %0A%0A for two line breaks, %0A%0A%0A for three line breaks etc.)

Here’s an example:

Mailto syntax example

Mailto syntax example

And here’s how it looks in Outlook:

How it looks in Outlook

How it looks in Outlook

Please note: You can only have one ? in the string, so if you need to pre-populate the CC field, the Subject field, and the message body then do it like this:

mailto:name@company.com?cc=another.name@company.com&subject=Subject line&body=Message

Also, populating the Message Body will overwrite any automatic signature you have in Outlook. You will have to re-insert your signature manually.

You can buy me a coffee if this tip helped you Has this tip helped you? saved you time? saved your skin? You can thank me by clicking on the cup and buying me a coffee. (An E-Junkie shopping cart page will open where you can pay for my coffee via PayPal.)
h1

HTML tooltips: The easy way

September 30, 2009

Dave Gash, a great friend of mine and a terrific conference presenter on user assistance, has written an article on how to add fading tooltips to HTML links — the sort of thing that’s ideal for presenting little snippets of help (aka user assistance) to users as they are filling in a web form, for example.

His step-by-step article is here: http://www.writersua.com/articles/fadingtooltips/index.html.

fading_tooltip

[Dave has been a technical writer and online Help author for years, but originally comes from the world of programming (though we don't that against him!). So he's really good on all the 'techie' stuff and has a knack for explaining it to novices so they understand. Dave's currently available for hire -- you can contact him at dgash@hypertrain.com.]

[Links last checked September 2009]

h1

Everything you need to know to make accessible documents

July 13, 2009

I came across a great site the other day: WebAIM (Web Accessibility In Mind). They have all sorts of goodies available in the Articles and Resources sections of their website, like checklists for Section 508 compliance etc. And everything I’ve looked at so far on this site is written clearly and laid out in a way that makes the pertinent content easy to find.

I found out about this site because someone mentioned that it had some good stuff on creating accessible PDFs: http://www.webaim.org/techniques/acrobat/

There are also great articles on making accessible Word and PowerPoint documents, and documents and files in other common formats including OpenOffice.

This is a site well worth checking out and bookmarking!

Update 23 July 2009: SitePoint also have an article titled 12 tools to check your site’s accessibility.

[Links last checked July 2009]

h1

Creating a non-scrolling title for a webpage

May 15, 2009

Mike Hamilton, head honcho at Madcap Software, recently shared how to create a non-scrolling region on a web page. For those who remember the old WinHelp days, this was something that happened automatically. Not so in web-based Help.

Mike’s blog post gives instructions on how to do this with a Heading 1 (H1) style in Madcap Flare, but the basics of the settings apply to any HTML/CSS.

You can get the full details here:
http://madcapsoftware2.wordpress.com/2009/04/20/adding-non-scrolling-regions-to-flare-topics/

[Links last checked April 2009]

h1

For the geek girl

January 20, 2009

These made me laugh ;-) You have to be a bit of geek to ‘get it’, but for those of us who are, these are hilarious!

HTML tag earrings

HTML tag earrings

Unfortunately they’d sold out last time I looked, but if you ask nicely maybe the people who made them could make you a pair:
http://www.etsy.com/view_listing.php?listing_id=7363642

[Links last checked January 2009]

h1

HTML email newsletters

March 12, 2008

On occasion, I’ve been asked about creating email newsletters. My investigations to date have lead me down the path of “It’s not worth it”, or “Use one of these paid services”. If asked why I believe it’s not worth it, I usually come up with reasons such as having to hand code the HTML, cannot use CSS etc. Now, while that’s not an issue for me, it is for those who think you can just bung something up in Word and send it out.

Now Mathew Paterson has written a great article on this, and in it he talks about going “back to 1999″ with respect to the coding etc. But he has lots of other interesting things to say in his three page article: http://www.sitepoint.com/article/principles-beautiful-html-email

It’s well worth a read if you’re thinking of going down the ‘email newsletter’ path.

h1

Convert Word to clean HTML

February 8, 2008

Despite the HTML filter option, Word documents saved as HTML are bloated with unnecessary code.

One product I recommend that produces squeaky clean HTML from Word is WordCleaner (available from http://www.zapadoo.com; US$99; free trial version)

WordCleaner does lots of other stuff too, and you can set up your own templates to dictate what HTML to keep from Word, if any.

I was so impressed with my evaluation, I bought my own copy!

Update (29 February 2008): Version 4 has now been released which cleans up RTF and TXT files too, and doesn’t require Word to be installed. It also supports Word 2007 formats.

[This article was first published in the March 2006 CyberText Newsletter; price and links last checked February 2008]

You can buy me a coffee if this tip helped you Has this tip helped you? saved you time? saved your skin? You can thank me by clicking on the cup and buying me a coffee. (An E-Junkie shopping cart page will open where you can pay for my coffee via PayPal.)
h1

Searchable but hidden text in HTML

January 14, 2008

If you have text/content that you want people such as reviewers and developers to find via a search, but you don’t want that text visible to everyone else, then consider setting up a ‘hidden’ paragraph or character style. The content you apply that style to will be invisible to the general reader but those who know about it can search for it and view it.

For example, technical documentation I wrote for a client was very much in the beta stage and the internal staff needed to be able to see which ‘Use Cases’ each topic applied to. However, external clients didn’t need this information—in fact, it was meaningless to them. The internal staff needed the ability to search on a particular use case number in the online help and get those topics listed in the search results.

What I did to meet both needs was:

  1. Create a paragraph style called “Use case” that had white text on a white background in the CSS, and was styled in red for the view that the author sees in Author-it.
  2. Add a new line with “Use Case: #” (where # represents the Use Case number) to the end of each topic related to a particular Use Case.
  3. Apply the “Use case” style to that last line.

In the HTML or CHM output these lines never showed but they were searchable. If a developer wanted to see all user documentation topics related to Use Case 68, they only had to do a search for 68. Or if they dragged their cursor over the last few lines of a topic they’d see the ‘hidden’ text for the Use Case that it related to.

The internal staff were told how to use this, but not the end users. It would only be by chance that an end user would ever come across the Use Case number.

You could do something similar using Author-it’s system variable for the object ID. Add it to the bottom of each topic (perhaps add it to your normal topic template so you don’t have to remember to add it each time), and style it with something that displays as ‘hidden’. Chances are only you and perhaps one or two others will EVER want to know the object ID. It’s still searchable, just not immediately viewable by end users.

You can buy me a coffee if this tip helped you Has this tip helped you? saved you time? saved your skin? You can thank me by clicking on the cup and buying me a coffee. (An E-Junkie shopping cart page will open where you can pay for my coffee via PayPal.)
h1

Making stars

January 8, 2008

Do you need a star symbol like this ★ in your HTML? Can’t find one in the standard lists of HTML entities?

Then use this (remove the spaces in your actual code): & # x2605 ;

You want five stars ★★★★★? Then just run five of these these entities together in your HTML code.

You can buy me a coffee if this tip helped you Has this tip helped you? saved you time? saved your skin? You can thank me by clicking on the cup and buying me a coffee. (An E-Junkie shopping cart page will open where you can pay for my coffee via PayPal.)