Associated Content Tip of the Day: Web Writing Ground Rules

Here’s today’s web writing tip/article. Web Writing: The Ground Rules that Make a Good Web Article
This is what makes a good web article be it for AC, Mashable, or even C-Net magazine.

Web content has rules. Let’s get right to this. The primary rules of web writing are:

Titles must be search-engine friendly
A well-constructed article title in cyberspace means the difference between 10 people stumbling on it and 10,000 people actively finding it. Good titles include key words and key phrases. They have low competition, but still use common terms that the average information seeker would type into a search engine. Don’t use Oryctolagus cuniculus when you can use “rabbit.”

This and at least five more rules for web articles. These are the rules. There are no exceptions. Give it a read.

Associated Content Officially Announces Daily Page View Updates

We enter a new epoch of the Associated Content page view beta era. Over the last two years, AC has steadily decreased the time between page view updates until it is now happening daily. Technically, it’s been happening daily for a couple of weeks now, but in a move very unlike AC, they waited to make the official announcement until they we’re sure they could pull it off.

Here is the message AC sent out Thursday, 5 March 2009:

Associated Content now updates every Content Producer’s estimated page views on a daily basis. This means you’ll have consistently up-to-date information about how your content is performing. This is something our Community has been requesting for a long time, and we’re thrilled to be able to offer it to you.

Keep in mind that these numbers are only estimations until we’ve had a chance to verify them. We verify all page views at the end of the month before processing Performance Payments, and adjust the numbers when necessary. If you have questions about changes made to your page views, please send a message to admin@associatedcontent.com. And if there is an issue that prevents page views from updating daily, we will resolve it as quickly as possible.

We hope you’ll enjoy receiving daily insight into the popularity of the content you publish on AC!

Now you can watch your article’s progress in near-real time. What will you do with this information? Make a graph? Put it in a spreadsheet? (You’d do that with the PV Report Converter, by the way.) Twitter it?

Honestly, I think it’s a nice feature/service. It shows that AC listened and responded to their CP community. I just don’t obsess over page view counts as much as some, I guess. I like that when I do check, I can be confident that I’m seeing yesterday’s numbers. I don’t have to look around for “date of last update” and do math in my head. That’s cool, but it doesn’t make a difference in what or when I’m paid for those views.

So, whether you’re a compulsive count checker or a slacker like me, we can both enjoy the new daily updates. Now if, after two years of having the page view program, AC could just stop calling it a beta, I’d be even happier.

Associated Content Tip of the Day 26 Feb 2000: Promotion Techniques

Carol Bengle Gilbert dropped a great resource today with her Tutorial: Guide to the Basics of Content Promotion. Not only are the contents of the article spot on, the construction of the article is a template for effective web writing. You could read just the first paragraph and walk away with important knowledge.

Content promotion starts with the first strike of the computer key. Write content that facilitates promotion, and it will promote itself. The guide will show you how to make sure your content is doing its own self-promotion as well as introduce you to some helpful content promotion
tools to give your article a boost.

You’ll have to click the link to read the rest of all her great tips. My recommendation is read it, bookmark it, and read it about once a month. This is the kind of advice that never gets old.

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 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.