Blog Spring Cleaning: Maintenance and Other Things

I just completed some long over-due work on the blog. Nothing exciting, just stuff that needed doing. It’s getting a little busy on the sidebars so I wanted to take a moment and point out a few things.

1. I joined Twitter. My five latest Tweets are on the left. I know you’re blown away. You can see my full profile/tweet-list by clicking the “I’m a Twit. Follow at Your Own Peril.” link on the left. I told Michy it was a bad idea for the world to be exposed to my unfiltered brain like this.
2. I joined Facebook. I didn’t include any sidebar links though.
3. I added RSS feeds for the blog to the right sidebar. Everyone wants a different option for following so, if you like RSS, there’s your monkey.
4. I changed the graphic for the subscribe feature. To the person who unsubscribed citing “Too many updates,” come on! I only post here 3 or 4 times a week. Compared to 99% of the blogs out there, I’m a pathetic loser. Won’t you come back? I have candy.
5. To my 3 new subscribers, “Welcome!”. You know who you are.
6. The Plagiarism Today link on the right is unchanged, but worth mentioning because it’s a great little blog.
7. The blogroll got a haircut. There were a lot of dead links in it and I added some blogs I found via Twitter. Note the links to John Cleese and Levar Burton. Burton is droning on about giving up smoking. I quit drinking last September and you don’t hear me pissing and moaning about it. Of course, you’ll probably pry my pipe out of my cold, dead, cancerous hands, but still, man up, Levar!
8. I shrank my RSS feed from Associated Content down to the last 5 article just because the blog layout is getting too busy. Still, I appreciate everyone who reads my rantings at AC. Y’all are the best. Rodney recently told me he like my off-the-cuff stuff the better than my polished pieces. When I pumped out Stupidity About Town and saw the comment responses, I had to agree with him.
9. I trimmed the Associated Content blog page down to just the add-on tools list and the tips articles. Give it a look because the new Payment Helper is there and it’s tax time. If you have a good tips article about AC, drop the URL in the comments of the AC page here and I’ll look into adding it to the list.
10. I put my new, cool AC badge on the left sidebar. Everyone at AC is calling this the udder badge, but I’m in the top 1000 again so I put it on the fridge.
11. I’ve noted that my HTML for Dummies series has been well received. Footnotes, Superscripts, and Hard Spaces is getting the lion’s share of the hits. If you have specific questions or would like to see a particular topic covered, just leave it in a comment.
12. For the person who asked about the top-right image and why it says, “Bob Says Slack Off,” You’ll just have to click the blessed head of Bob and explore. The Church of the Subgenius welcomes all. (Not for the faint of heart or anyone under 18.)

Other than adding a few new images, that’s the spring cleaning. Hope all is well on your street.

HTML For Dummies: Lists with a Bullet

HTML lists come in several flavors. The two most useful are the ordered list and the unordered list. Both are easy to create with the <OL> and <UL> tags. Both types of lists use the same secondary tag, <LI>, to define the individual bullet points. One of the nice things about the ordered list is that if you need to add a bullet in the middle of the list, the numbers will update automatically because they are not really there until the file is opened in a browser. Here is how you put it all together.

This is my ordered list. The bullets will be numbers. <ol> <li>One is the loneliest number</li> <li>Two can be as lonely as one</li> <li>Three Dog Night was a good band</li> </ol>	This is my ordered list. The bullets will be numbers. One is the loneliest number Two can be as lonely as one Three Dog Night was a good band
This is my unordered list. The bullets will be dots. <ul> <li>In no particular order</li> <li>Here are the points</li> <li>I'd like to make</li> </ul>	This is my unordered list. The bullets will be dots. In no particular order Here are the points I’d like to make

 
 
You can even nest the list. This allows you to make lists within lists and each indent gets a new style of bullet. Two things to remember. The indentations here are only for your readability. The browser doesn’t care about returns and tabs. Also, if you nest your list, be very careful to close your tags correctly. Otherwise, the browser won’t understand what you’re trying to do. Here are two unordered lists inside an ordered list.

<ol> <li>The Simpsons</li> <ul> <li>Homer</li> <li>Marge</li> <li>Bart</li> <li>Lisa</li> <li>Maggie</li> </ul> <li>The Flintstones</li> <ul> <li>Fred</li> <li>Wilma</li> <li>Pebbles</li> </ul> </ol>

The Simpsons Homer Marge Bart Lisa Maggie The Flintstones Fred Wilma Pebbles

 
 
I hope your read the prequel
To truly not be frustrated by lists, you must understand how a site’s style sheet (CSS) can affect how your list is displayed. Take a minute and read “It’s out of control!” for a brief synopsis of style sheets.

A web master may have defined lists in their CSS to display a non-standard bullet. It could be any character. Sometimes it’s the &rsaquo; (›) character or the &rarr; (→) character. It can be any character the CSS says it will be, but the default (no definition) character is what everyone expects, a bullet dot (·).

A word of caution. Submitting lists to other sites is always a crap shoot. What looks good today can look like garbage in six months if the site decides to change their CSS.

For more about lists and to practice building your own lists go to W3School.

HTML For Dummies: De-Mystifying Line Breaks

To human eyes it all runs together, but to a browser, it’s very distinct

Let’s talk about line breaks and spacing. Most writing sites try to do some sort of text parsing when you submit an article. Their software scans your submission and tries to do some minimal formatting. The most common thing these sites do is look for double returns (you pressed “Enter” twice) and convert those into paragraph breaks. In HTML a paragraph is enclosed in the <p> tag.

You type:

          ... blah, blah, end of paragraph one

          start of paragraph two, blee, blee ...

After parsing the text, if the site translated into strict HTML, it looks like:

     <p>... blah, blah, end of paragraph one</p><p>start of paragraph two, blee, blee ...</p>

Notice that your double return was translated into </p><p> with corresponding open and close tags.

Not all sites will create strict HTML. Some will take advantage of the browser’s built-in correction capabilities. Proper HTML is “<p>text text text</p>”. However, if you just use <p> and never close it, most browsers will fill-in the closing </p> when they encounter another open-paragraph tag (<p>).

At AC, you can see what they did to your article if it’s still in the submission queue or if it’s a display-only submission, by putting it back in edit mode and looking at step two of the submission template. Here’s what my last article looked like when AC got done with it. I’ve added the bold to emphasize all the HTML tags. AC added the <p> and I supplied all the rest.

The best thing about Inauguration Day 2009 is … I went to work. The traffic lights all functioned. The other drivers were courteous. There were no blazing tire fires on the sides of the road. No barricades. Besides work matters, people in the office discussed their holiday weekend and their favorite television shows. And that’s how it should be.<p>The best part about Inauguration Day is seeing a parade of High School bands instead of tanks in the streets of Washington, D.C. It does the soul good to know the people standing on the sidewalks are waving flags and not throwing Molotov cocktails. The best thing about Inauguration Day is it was a peaceful transition of power.<p>Now, I don’t want to detract from those who made the pilgrimage to D.C. to participate in the festivities. Attending the event is a perfectly acceptable choice. Some feel it was a historic event. Some just happened to be near by. Others have been unable to orgasm in the intervening months since election night and needed some release. Who am I to judge? That’s the great thing about Inauguration Day. We can all celebrate in our own, peaceful way.<p>Even now, in the twenty-first century, dictatorships and despots still rule much of our globe. Just yesterday, Taliban <strike>wackjobs</strike> fundamentalist bombed five schools in Pakistan¹ because they think educating girls is a <strike>sin</strike> crime. A peaceful transition of government is almost something rare. One that is mandated by the will of the populous through their uninhibited vote, is something rarer still.<p>Whether you relished Obama’s inauguration speech or took snide pot-shots at it, is unimportant. That you had the freedom to do either or neither is. I had the freedom to work in peace and safety. I didn’t have to take up arms. I didn’t have to hide my family in the basement. I didn’t have to stare down tanks and shoot guerrillas. My most difficult decision was where to have lunch because all the restaurants were open. I chose a burger at my desk so I could listen to the speech on my computer. Then I went back to my daily routine, safe in the knowledge that bombs would not fall on the building. Not because of the speech, but because of our Constitution, every citizen who defends it, and those who participate in the process.<p>Some of the world hates the United States of America, but most of the world just envies the fact that we can sleep in peace tonight. When you climb into bed tonight, think about those poor Canadian children in war-torn Qu&eacute;bec² who are going to bed hungry and frightened. The best part about Inauguration Day 2009 is … this isn’t Canada.<p>¹<a href=”http://www.google.com/hostednews/ap/article/ALeqM5hkiMxbHNH0BqgpWA2ZG6VD6wVTmAD95Q9ULG0″>School bombings in Pakistan, AP</a><br>²Qu&eacute;bec is not really war-torn, it just looks that way to those snobs in Ontario.

It’s very difficult for a human to read that continuous block, but a browser has no trouble seeing all the tags and spacing the text accordingly. You can see the final output & format of the article on the AC site. Notice how the <p> tags tell your browser to display a blank line between the paragraphs? That’s the magic of HTML. If you ever need to edit an article, putting it back with the tags intact will save you a lot of heartburn.

Deconstruction
A concrete example is always worth a thousands words. You have the HTML of the article above and the final results at AC to compare. We’ve discuss here what the <p> tag is doing. Let’s take a look at the other tags. Most of these tags were presented in the first five articles of this series.

Here I used the <strike> tag to make it look like there are leftover edits in the article:
<strike>wackjobs</strike> = wackjobs
<strike>sin</strike> = sin

Here is a footnote that leads to the AP article about the school bombings:
schools in Pakistan¹ = schools in Pakistan¹

Here is the actual footnote at the end of the article:
<a href=”http://www.google.com/hostednews/ap/article/ALeqM5hkiMxbHNH0BqgpWA2ZG6VD6wVTmAD95Q9ULG0″>School bombings in Pakistan, AP</a> = School bombings in Pakistan, AP

Here is a combination of the French é character and 2^nd footnote:
Qu&eacute;bec² = Québec²

And this last one allowed me to control the single spacing between the footnotes:
</a><br><sup> =
Well it doesn’t equal anything by itself, but the <br> caused the browser to make a one line return so the superscript for 2 starts on a new line.

Find and replace
This brings me back to a point I made in this installment. Invest in a decent HTML and/or text editor. It is so easy to mark-up your text with a decent piece of software. It’s also just as easy to unmark the same text. A global find & replace from tags to text or the reverse will change your unreadable HTML into something legible. Another trick is to save your HTML document and open it in your browser (File > Open File). You can then see exactly how it will look on the web. Without a decent find & replace function, I would have spent much more time writing today’s article. I was able to grab the HTML of the AC article, paste it here, and do a global replacement on the < and > characters to their equivalent escape characters so you could read the HTML and not have it translated by your browser.

My momma didn’t raise no fool.

More resources @ W3schools

HTML For Dummies: It’s Out Of Control!

Let’s remember that this series of “HTML for Dummies…” is in the context of submitting articles to other sites. This is not about creating your own web site where you have total control. When you submit articles to writing sites like Associated Content, you have to play by their rules and some things are just our of your hands. How your article is presented is the big one. I’m not talking about all the dressings around the article like advertisements and links. I mean the little things like choice of font, type size, and indents. Those are controlled by the sites overriding Cascading Style Sheet (CSS).

What is a CSS?
A cascading style sheet is a special block of code that contains the definitions for specific attributes of a web page. Huh? I see you’re nonplussed by that definition. OK. What does that mean to you? It means some things are just out of your hands.

Good web masters want their sites to have a consistent look and feel. The best way to do this is with a CSS. There they can define to exacting detail what everything should look like. If they want all the article titles to be 18pt/bold/italics, they define that in the CSS and there is nothing we writers can do to change it. We don’t have access to the CSS on other people’s sites. We just have to live with it.

The CSS even controls things like how hyperlinks are displayed. For example, here at WordPress, if I include a HREF anchor (like in the next paragraph), it shows up as bold, blue text. Another site might display it as underlined, red text. It’s all up to the CSS.

So why do you care?
You care because knowing this, you can avoid futile attempts and useless tagging. Don’t even bother trying to use the <font> tag in your submissions. Most sites will strip it out because they control the font definitions from the CSS. Remember what I said in yesterday’s installment, keep it simple.

Next
Next time, I’ll de-mystify line breaks and paragraph markings so you can give your spacing a polished look.

HTML For Dummies: Know Your Limitations

I hope y’all are enjoying the series of articles, “HTML For Dummies…” I’ve tried to keep to the basics. After all, this series is not meant to be a programmer’s guide to everything HTML. My intent is to provide some basic knowledge that any writer can apply. I’m writing this series because I strongly believe that anyone who submits articles to the many writing sites (e.g. Associated Content, Constant Content, Demand Studios, a blog) should have the right tool for the job. That tool is the hypertext mark-up language, HTML.

Every site is different. And therein lies the true power of formatting your articles with HTML. Each site may have its own funky editor, but 99% of them let you circumvent their editor and submit HTML. Imagine the convenience of submitting the same article to all the sites you write for without having to tweak each submission. Copy once. Paste many times. Done. But, as I said, each site is different so it’s important to keep a few things in mind.

Keep it Simple
There is much, much more to a true HTML document than just the basic formatting tricks I’ve been writing about. A full-blown HTML document is pretty daunting to the non-programmer. You can see for yourself by selecting “View › Source” from your browser’s menu.

It is vital to understand that your article will become a part of a larger HTML document. Once you fill out a site’s submission form, they are going to add all sorts of other HTML around yours to produce the final product. You can concentrate on your writing and a few simple formatting tags. They have to worry with all the details needed to flesh out the page to their standards. This takes a lot of pressure off you, but imposes some restrictions, too.

The best thing you can do is keep to the basics. If you don’t, you run the risk of interfering with the site’s added HTML. It’s not unusual for an unclosed tag in your article’s body to confuse a browser so that it can’t display your article correctly. I’ve seen cases where a simple greater-than sign (>) caused all the text following it to disappear completely.

Know the Site
It may take some trial and error to figure out the nuances of a particular site, but almost all are going to accept the simple bold, italics, underline, superscript, subscript, etc. tags. Most are not going accept the more difficult div, form, input, etc. tags.

If you plan to do anything above and beyond, you should test it first. If the site allows you to remove your submission, you can always post a test document. If the site does not allow you to remove content, you should contact their support before attempting something like a table or image inset.

Got Software?
Though I know everyone has their favorite writing software like MS Word or Google Docs, it makes a lot of sense to get a decent text editor. Text editors like TextPad and UltraEdit were written with programmers in mind, but they have some really nice features that make adding HTML to your article very simple.

First, they color code everything so you won’t get stuck with your tag open. Second, they come with sidebars that add tags with just a double-click. They even spell check. They don’t replace Word for things like grammar check, but they are worth a nominal investment if the destination for your writing is the web.

Next
Next time, we’ll discuss some of the pesky things that are out of our control like cascading style sheets. Happy writing!

HTML For Dummies How to Make a Footnote, Superscript and Hard Spaces

Creating superscripts in HTML is easy with a simple combination of the SUP tag and a few basic codes. If you missed the article on HTML tag basics, read up on them now: Part One of HTML for Dummies, W3Schools Getting Started.

The SUP tag
The SUP tag tells your browser to put the enclosed characters in superscript. It very easy to apply. Simply put the tag around the text you want in superscript. Here are a few examples.

• Basic footnote:  …end of my sentence.¹ = …end of my sentence.¹
• Dagger note:      …more thoughts.^&dagger; = …more thoughts.^†
• Double Dagger note:  …running out.^&Dagger; = …running out.^‡

Let’s stop for a moment and look at the basic construction. You open the superscript tag with ^{and close it with the corresponding}. This is no different than any other HTML tag. Anything between the two will render in superscript. It doesn’t have to be just a simple number. You can put other HTML codes in superscript just as easily. This is handy when you need to label something with a trademark or copyright symbol. As with the daggers above, HTML provides an easy way to type the escape code for common special characters.

• Trademark:   BrandName^TM = BrandName^TM
• Copyright:    Protected Work^&copy; = Protected Work^©
• Registered:   I am registered^&reg; = I am registered^®

Spaces
The space is something we seldom think about, but HTML has a different way of looking at spaces. I’ve seen long forum discussion over the need for two spaces at the end of a sentence. Some line up on the side of “It’s not proper,” and bemoan others for not using two spaces. What these people don’t realize is, in the world of HTML two spaces equal one space. In fact, any number of contiguous spaces equals one space. This includes the TAB and even the RETURN character.

A browser will collapses multiple white-space characters to a single space when the document is rendered for display. There are two ways around this and both are tricky and troublesome. You will not want to try this just to force two spaces at the end of each sentence. It would be laborious and unreadable in its native state.

Forcing a space
HTML has a special escape character that tells the browser, “This is a space and don’t your forget it.” It’s called the non-breaking space character and the code for it is &nbsp;. With the non-breaking space you can force any number of hard spaces into your document. For example, “I want 5 spaces between the dashes – &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; – of this sentence,” yields “I want 5 spaces between the dashes –       – of this sentence.” If I had just pressed my space bar five times, the sentence would look like, “I want 5 spaces between the dashes – – of this sentence.” I really did press the space bar five times, but your browser ignored my feeble attempts and collapsed the five spaces to one.

The non-breaking space is fine for what it’s worth, but you’ll have a difficult time making things line up properly if that is your intent. That’s because fonts come in two flavors: fixed width and variable width. Most browsers default to a variable-width font like Times Roman. This means the number of spaces between letters can vary depending on the surrounding letters’ widths. Fixed-width fonts line up nicely because all the letters take up the same number of pixels. So how can you override the browser’s default?

The PRE tag
PRE is a HTML tag that tells the browser that the enclosed it “pre-formatted” text. Your browser then usually chooses a fixed-width font like Courier to display the enclosed. A word of caution is in order. The PRE tag is still subject to the web site’s style sheet (CSS) and it may display in a way that makes you sad…in your pants. For example:

This block is enclosed in a PRE tag.  WordPress' CSS has rendered it in tee-tiny Courier letters
that are almost impossible to read.  I didn't do this.  The CSS did.  However, I can control
the line returns.  I pressed "Enter" at the end of "letters" and "control" to make the text wrap.

Since I would have to spend about an hour rewriting my own style sheet to replace WordPress’, you’ll just have to use your zoom feature to read the PRE text above. Not all sites will render PRE tags like the above example. You’ll just have to experiment with the site to see how they do it. The PRE tag is good if you want to display something like code snippets or other text where the exact formatting of spaces and returns is important. It’s handy for technical writing, but not something the average writer really wants to use.

Web Writers Learn Your Medium: HTML For Dummies Q and A

One of the comments left in part one, Web Writers Learn Your Medium: HTML For Dummies Will Save Your Life, of the “Know Your Medium” series was:

Okay, okay, I get it! But, I have a question. I use MSWord for spelling and grammar check. I MUST have a spelling and grammar checker. What should I use? Can I just use HTML within MSWord?

The short answer is, “No.” I addressed this in an article entitled Welcome to the Web: Know Your Enemy on 30 May 2008, but it has since been buried in the blog archives. In it I wrote:

Why are word processor so heinous?
Programs installed on your PC have access to the PC’s operating system, font definitions and formatting options. They also use proprietary codes to work their magic. Web servers do not have these nifty attributes. They expect you to provide plain text. When your text contains codes the web form can’t decipher, horrible, nasty things happen.

If you have dodged the bullet until now, chances are you were just keeping it simple when typing in Word. Trust me it will bite you eventually.

This is the perfect time to revisit the topic and expound
Software like Microsoft Word has it’s place. It has many features a writer needs and wants. It does what it does very well. What is does not do well is create web-friendly documents especially if the intended destination of the document is the submission form of a writing site. Word processing programs are great as spell checkers, grammar checkers, and word counters. They are not good at creating web-ready text. Word processing software was originally created to print documents. Microsoft Word does that very well, but it does it within the confines of itself. Once you try to move (copy & paste) the on-screen Word document to a web form, all hell breaks loose.

Some sites try to put in Word converters. Gather.com did it very well. Gather needed to do it because the people contributing there are mostly amateurs. They want to write in Word and post their thoughts immediately. Writers – professionals who are writing for money – should never depend on such a brittle crutch.

My primary argument is you should use the tools (HTML) specifically designed for your trade. The second reason is – software changes. Ask anyone who upgraded to Word 2007 if the web site widget converters kept up. They will tell you no. There was a lag while the web site programmers tried to program a new converter. Their old Word 2003 converters didn’t handle the new software. Some didn’t even bother writing a new translator and I don’t blame them. If I were running a writing site, I’d insist all submission be plain text or HTML. Period. I’d grant no quarter to people who copy & paste directly from MS Word and I’d certainly not waste my time writing some complex translator that would be useless when the new word processing software version was released next year.

In short, there are simply too many word processing software programs out there for a web site to cost-effectively keep up. This is the internet and the internet has its own standards. Standards which, I will add, are much easier to follow than print publisher’s submission standards, but that’s another topic.

Concrete Example
Smart quotes. I hate them. You do too, but you don’t know why. Microsoft Word has this cute feature that creates quotation marks that curl in at the beginning and end of the enclosed quotation. “They look like this.” This slight-of-hand is not done with simple text. It is an illusion of font definitions that only reside inside Microsoft Word. When you copy these creatures and paste them into a web form, they lose their meaning. The web site you submit them to can’t recognize them and you end up with something that looks like «¶Å^TM or some such nonsense.

The Safe Thing To Do
Use Microsoft Word or any software you like to write, grammar & spell check, and word count. Do not copy & paste directly from said software into a web form. I must repeat this as if it were a red-alert klaxon. Do not paste directly from Word. Word’s internal formatting voodoo will not translate especially for fancy stuff like bullets and footnotes. And don’t leave comments like “I never have a problem.” You’ve just been lucky.

The safe thing to do is either save your Word document as text (*.txt) or paste it into a simple text editor like Notepad (Notepad comes with MS Windows and is located in your Accessories folder.). You can then either open the TXT file and copy/paste from Notepad to the web form. This intermediary step reduces the Word voodoo to its basic elements making it safe for the web.

Bonus
That’s the end of the answer, but I wanted to add this for those who like to look under the hood. I typed the simple sentence, “A test text export of a Microsoft Word document.” complete with quotation marks in Microsoft Word 2003. I then chose the File > Web Page Preview menu item. The following is what MS Word hath wrought. Note that 99% of this output is Microsoft trying to maintain its fancy, internal formatting on the web page by using XML and style sheet (CSS) definitions. These things would explode the web form if you tried to submit this to Associated Content or any other site. Here’s what MS Word looks like when the emperor has no clothes:

<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv=Content-Type content="text/html; charset=us-ascii">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 11">
<meta name=Originator content="Microsoft Word 11">
<link rel=File-List href="681D1F4B_files/filelist.xml">
<!--[if gte mso 9]><xml>
 <o:DocumentProperties>
  <o:Author>barefoot</o:Author>
  <o:Revision>1</o:Revision>
  <o:TotalTime>12</o:TotalTime>
  <o:Created>2009-01-19T02:14:00Z</o:Created>
  <o:Pages>1</o:Pages>
  <o:Words>7</o:Words>
  <o:Characters>46</o:Characters>
  <o:Company>barefoot</o:Company>
  <o:Lines>1</o:Lines>
  <o:Paragraphs>1</o:Paragraphs>
  <o:CharactersWithSpaces>52</o:CharactersWithSpaces>
  <o:Version>11.9999</o:Version>
 </o:DocumentProperties>
</xml><![endif]--><!--[if gte mso 9]><xml>
 <w:WordDocument>
  <w:View>Normal</w:View>
  <w:Zoom>0</w:Zoom>
  <w:SpellingState>Clean</w:SpellingState>
  <w:GrammarState>Clean</w:GrammarState>
  <w:PunctuationKerning/>
  <w:ValidateAgainstSchemas/>
  <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
  <w:IgnoreMixedContent>false</w:IgnoreMixedContent>
  <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
  <w:Compatibility>
   <w:BreakWrappedTables/>
   <w:SnapToGridInCell/>
   <w:WrapTextWithPunct/>
   <w:UseAsianBreakRules/>
   <w:DontGrowAutofit/>
  </w:Compatibility>
  <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
 </w:WordDocument>
</xml><![endif]--><!--[if gte mso 9]><xml>
 <w:LatentStyles DefLockedState="false" LatentStyleCount="156">
 </w:LatentStyles>
</xml><![endif]-->
<style>
<!--
 /* Style Definitions */
 p.MsoNormal, li.MsoNormal, div.MsoNormal
	{mso-style-parent:"";
	margin:0in;
	margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:12.0pt;
	font-family:"Times New Roman";
	mso-fareast-font-family:"Times New Roman";}
@page Section1
	{size:8.5in 11.0in;
	margin:1.0in 1.25in 1.0in 1.25in;
	mso-header-margin:.5in;
	mso-footer-margin:.5in;
	mso-paper-source:0;}
div.Section1
	{page:Section1;}
-->
</style>
<!--[if gte mso 10]>
<style>
 /* Style Definitions */
 table.MsoNormalTable
	{mso-style-name:"Table Normal";
	mso-tstyle-rowband-size:0;
	mso-tstyle-colband-size:0;
	mso-style-noshow:yes;
	mso-style-parent:"";
	mso-padding-alt:0in 5.4pt 0in 5.4pt;
	mso-para-margin:0in;
	mso-para-margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:10.0pt;
	font-family:"Times New Roman";
	mso-ansi-language:#0400;
	mso-fareast-language:#0400;
	mso-bidi-language:#0400;}
</style>
<![endif]--><!--[if gte mso 9]><xml>
 <o:shapedefaults v:ext="edit" spidmax="2050"/>
</xml><![endif]--><!--[if gte mso 9]><xml>
 <o:shapelayout v:ext="edit">
  <o:idmap v:ext="edit" data="1"/>
 </o:shapelayout></xml><![endif]-->
</head>

<body lang=EN-US style='tab-interval:.5in'>

<div class=Section1>

<p class=MsoNormal>“A test text export of a Microsoft Word document.”<span
style='mso-spacerun:yes'>  </span></p>

</div>

</body>

</html>

Web Writers Learn Your Medium: HTML For Dummies Special and Foreign Characters

In the last installment HTML For Dummies Will Save Your Life, I hope I made the point that web writers should embrace the basic tools of the trade. Depending on word processing software on on-line widget editors is like driving your car without knowing how to fill the fuel tank. Like a good driver, who knows how to fill up, check their oil, adjust their tire pressure, and pre-set their radio stations, a good web writer needs to know the basic HTML tools to create web-ready documents which work on nearly 100% of web writing sites.

This installment covers how create special characters. There are two situations where special characters come into play. One, you want to create foreign (non-English) characters. Two, you need to use a character which already means something else in HTML.

Both of these situations are addressed with HTML escape characters. They’re called “escape characters” because the symbols you use escape or negate their common HTML meaning. The basic format of a HTML escape character is the ampersand symbol, followed by a code, and closed with a semicolon. For example, &lt; will display as <. &ntilde; shows up as ñ. Some characters us a pound-number combination while other have equivalent word-ish codes like “ntilde.” You could use either the number or the word to create the special character. They mean the same in HTML, but you may have to test the #NN codes to see how they render in specific environments.

Foreign Characters
HTML supports more than just the characters on your keyboard. You can use non-English alphabets by simply typing the HTML character code for the letter. Here is a fairly exhaustive list of the codes for your reference. So how do you use them? Simply type the character code where you would want the letter to appear. Human eyes will find it hard to read, but browsers have no problem translating it. Here are some examples:

You need to use a Greek word. If you need to display the Greek word for “word” (re: John 1:1, “In the beginning was the Word…), the English transliteration is “logos,” but you can display the native Greek by typing “&lambda;&omicron;&gamma;&omicron;&sigmaf;” which displays as “λογος.” Notice the & at the beginning and semicolon at the end of each Greek letter. That is what tells the browser these are special characters.

You want to use correct Spanish and French characters. The Spanish en-yay is probably the most common application of non-English characters. It is an “n” with a tilde over it so in less-than-imaginative HTML the code for it is &ntilde; which displays as ñ. If you need fancy French graves or a German umlaut, you can type things like &eacute;=é and &uuml;=ü. Another common Spanish symbol is the inverted question mark. The code &iquest; renders ¿ in the browser.

You need a scientific or monetary symbol. Ever need to put a degree sign on your numbers? It’s simple with &deg; which display as °. So now you can do things like, “It was -3 C° today” the code for which was “It was -3 C&deg; today.”

Ever wanted to use the cent sign, but noticed there isn’t one on your keyboard? Just type “&cent;” or “&#162″ and you’ll be the envy of your friends because you can display ¢ and they can’t. Now you can type “That’s my 2¢ worth” and your forum posts will read, “That’s my 2¢ worth.”

If you want to write about British pounds or the Euro, use the code &pound; and &euro; to get £ and €.

You can even combine tags and symbols to create things like the dagger (cross) footnote symbol. The SUP tag tells the browser to put the enclosed characters in superscript and &dagger; displays the dagger. Type “^&dagger;” to get ^† as in “…the end of my sentence^&dagger;” and later “^&dagger;Here is the footnote…”. All of that displays as “…the end of my sentence^†” and later “^†Here is the footnote…”.

Special HTML Characters
Sometimes you need to use a character in a normal way which HTML treats as special. The less-than (<) and greater-than (>) symbols are the two most common you will need. If you read part one of this series, you remember that < and > tell the browser that what is between the symbols is a HTML tag. Often just typing < hoses up what follows because the browser is trying to interpret everything that follows as a HTML tag. Anytime you want the symbol to display and not be interpreted, just type the escape characters. For less-than, type &lt; and you get <. For greater-than, type &gt; and you get >.

The ampersand symbol starts the escape sequence so sometimes you need to type the code for the symbol instead of the symbol itself. &amp; is the code that yields &. You say it is silly to type &amp; just to get & but without it, I couldn’t have typed any of these examples. If I had just typed & your browser would have thought the characters that followed were codes.

Why you need to know and use this information
I know some of this seems like going around the barn to get to the door, but these symbols, some in combination with a few tags, will broaden your ability to write for the web. Since your submissions are going to eventually become part of a bigger page, using escaped symbols will prevent accidental mishaps.

The most common problem is the < symbol. Remember that writing sites are going to add all sorts of complex HTML code around your article so the finished page displays the site banner, ads, your article, footers, your byline, links to other articles, etc. If you’ve typed a bare < character, once inside this broader context, the character may fool the browser into thinking a tag follows. Under these conditions, it is not uncommon for everything following your bare < to disappear from the page. If you had typed &lt; the symbol would display and the browser would keeping rendering the rest of the text as if nothing happened.

Web Writers Learn Your Medium: HTML For Dummies Will Save Your Life

Just writing isn’t enough. Writing correct English isn’t enough. Knowing what pool you’re in and learning how to swim is crucial. If you are going to write on the web, you’ll will need to learn some basic hypertext markup language (HTML). Before you run away screaming, “I’m not a programmer!” you’ll need to get that mind-block out of your brain. This isn’t about programming. It’s about using your chosen medium, the web, to it’s fullest extent for maximum impact.

HTML is exactly what it says it is. It’s a markup language. It was created thousands of cyber-years ago so web pages could display common print formatting like bold, italics, underlines and even strike-through. It has unique attributes created specifically for its medium, the web.

If you are going to use the web as your writing medium, you’ll need the basics. You can only coast so long on other people’s widgets. “I’m computer illeterate,” quickly wears thin as an excuse for not being able to communicate your thoughts in your chosen medium. Claiming to be a web writer means you can no longer ignore the need to learn the tools of the trade. The lamest words you can utter are, “Why can’t I just use Microsoft Word.” It’s simple, Microsoft may own many things, but they don’t own the internet. So with the thoughts of “learning to drive a stick shift transmission means you’ll be able to drive any car, any where, any time,” let’s go for a drive.

Knowing a little HTML means you’ll be able to use practically any web site for your writing. Ninty-nine percent of sites accept basic HTML documents. Even if they have some widget editor that offers the basic formatting at the click of a button, being free of such widgets means being able to do things that enhance your reader’s experience and convey your words more effectively. For example, many sites translate two returns as a paragraph break. Knowing a that, you can format your documents to look more professional than the average writer. Which looks better?

This intra-body headline

Followed by the paragraph…

or

This intra-body headline
Followed by the paragraph…

The first is what you get with most on-line widget editors. The second is what you get when you bypass the editor and take matters into your own HTML hands. You’ll have to agree the thight spacing of the second example is more agreeable.

The Basics
Though you can do many fancy things with HTML. I don’t want to overwhelm you with a bunch of jargon. Let’s just stick to the basics for now.

HTML tags: What are they?
Tags are the basis for all the markup you’ll need. Tags consist of an open and closing delimiter that wrap the text you want to change. HTML tags all start with the less-than symbol (<) and end with the greater-than symbol (>). Most, but not all require you to close the tag with a slash (/). The most elemental are the bold, italic, and underline tags. Here’s how you do it:

 "I want the word <b>word</b> in bold" yields, "I want the word word in bold."
You opened the bold with <b> and closed it with </b>. Everything between displays in bold.
You can to the same to create <i>italics</i> = italics and <u>underlines</u> = underlines.

You can explore more tags in depth at W3Schools, but the basic syntax doesn’t vary much. Here is another article from W3Schools that reiterates what I’ve just covered.

Hyperlinks: What paper can’t do
Working on the web means you have access to millions of other web sites and pages which can potentially enhance your message. Being able to connect to those sources adds a new dimension to your writing that paper can’t. The hyperlink is how this is done and it’s so easy to do. You just need to know about the anchor tag.

To create a hyperlink use the anchor tag with the “href” option.

"<a href="http://www.w3schools.com/TAGS/tag_a.asp">W3Schools Anchor Tag Page</a>"
     will display as
"W3Schools Anchor Tag Page".

We all know how hyperlinks work. You simply click the words and the target page loads. This is great for adding depth, references, footnotes and all sorts of cool links to your writing.¹

The important thing to remember about HTML is balance. Every open needs a close. If you use double quotes at the begining of the HREF, you must use double quotes at the end. Single quotes will work just as well, as long as they are balanced.

Thats all for now. Just the most simple things to start. I don’t want anyone throwing up their hands and saying, “I can’t do this.” If you’re going to build with wood, you have to know how to use a hammer and saw. If you’re going to write on the web, you need to learn some basic HTML. No one is asking you to be a programmer, just a better writer.

¹If you’re submitting to Associated Content, please read more about how AC mangles handles hyperlinks AC and Hyperlinks.

Associated Content Overhauls Website

Overnight, Associated Content gave their website a complete overhaul.  You can read their press release here.

Some of the most requested changes, like the deletion of the Top Rated page, were incorporated into the redesign.  Some great new features like “Most Popular Content” were added.

As with any major change, there are lots of little bugs to workout.  The AC tech team will have their hands full for the next week or so addressing all the bugs, but overall the changes are great.  Check it out for yourself.