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.

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.

How to get help from Associated Content or Any Where For That Matter

I’ve had a draft article about how to get good customer service lying around for months. I did write something similar back in Aug 2006 about calling 800 numbers, but I keep thinking I should rewrite it to include how to write an effective email.

You ask, “Why?” The easy answer is, I’m on the receiving end of many similar emails. Additionally, I see so many rants in the AC forum about Associated Content being unresponsive. I can honestly say, Associated Content has never been unresponsive when I emailed a concern. Does AC love me more than you? No. AC gives priority to clear, concise emails with enough details to address the problem. That’s the kind of email that gets a response.

You don’t have to take my word for it. The following block is straight from the man who handles all of AC’s incoming emails.

1. BE SPECIFIC. If there is one specific article you’re having trouble with, tell us the title. If it’s already published, having a URL of the live content will help IMMENSELY, and will let us fix the issue faster for you. It will also help EVERYONE on the site, as we will be able to move more quickly between issues.

2. Don’t just rant. You would be shocked at how many emails I get on a daily basis that are just rants, which really don’t give any information. “YOU NEED TO PAY ME FOR THIS ARTICLE” does not describe the problem you’re having. We want you to have a positive experience at AC, but if there is an issue that’s keeping you from getting paid, once again, we need specifics.

3. Be nice. Ultimately, we’re all on the same team here. Every day, I remind myself that what’s best for the CP’s is best for AC. We’re not on different teams, we’re not playing against each other. AC is really not trying to “pull one over” on you. Also, the people reviewing your content are educated, they are smart, and they are good at their jobs. Insulting them isn’t going to help anyone do anything. At the end of the day, we are all in this together.

4. One email will do it. If you’re having an issue, you email, and you don’t hear back in 20 minutes, that’s normal. I get more than 200 emails per day, all of which need to be read and answered. Sending multiple emails about the same issue on the same content really slows the process for everyone.

I feel his pain, so let me expound on this just a bit.

5. Include Details. Dates, URLs, and article titles are very important. If needed, use dates to build a time-line of the events. In describing the problem, include the steps that you took which lead there. For example, “I was using the General template to submit an article on May 6th. I pressed buttons 1, 2, 3 and then got a blank page.”

6. Be Concise. Don’t address more than one concern in the email. Get to the point and stay on track. A bullet-point list is easier for the email recipient to scan than a 500-word ranting paragraph.

7. Use the Subject Field. In the subject field of your email, include something that gives a clue about the email’s contents. For example, are you reporting a technical bug with the web site? The subject line should read something like, “Technical Bug With Web Site. Broken URL.”

8. Include Your System Info. If your problem appears technical in any way, include you operating system (OS) and browser specifics. Don’t know what those are? It’s simple. For Microsoft Windows, right-click the My Computer icon and choose Properties. There’s your OS. “MS Windows” isn’t good enough. Include the version number. To get your browser information, select the Help > About menu.

9. Don’t assume things are FUBAR unless they are repeatable. Stuff happens. It doesn’t mean it’s AC’s problem 100% of the time. Try to replicate the problem before firing off an email. It may have just been a temporary network drop. It may have been something you did. Slow down, try it again, and make notes of what you’re doing. This will help if you do end up sending an email.

These are the things to which AC or any site responds. I’ll go out on a limb and say those forum posts about AC’s unresponsiveness are probably the result of failure to adhere to rule number 2 and 4. When you read those, between the lines is, “I fired off an mindless rant with no details and didn’t hear back so I fired off 5 more emails.” I guarantee you, those emails went straight to the trash folder.

These are the tips from the guys who get emails everyday about problems with web sites. You don’t have to take them to heart, but then you don’t have to have your problem resolved either.

Associate Content Tip of the Day 17 Mar 2008: Dealing with Plagiarism

Here is Associated Content’s official policy on pursuing plagiarism:

Here’s some clarification that we hope will help any CP who finds their content has been posted/published/reprinted/etc. on a third-party site that isn’t a partner site of AC’s:FACT: If we grant reprint permission for a piece of content to ANY other site, AC will always notify the CP.

For EXCLUSIVE content:
Associated Content is the copyright owner of all exclusive content. While a CP may be the original author, Associated Content is the only entity that can act legally on behalf of the content in question. If you find an exclusive article on an inappropriate site, please contact AC’s Designated Agent at designated_agent@associatedcontent.com. Include the link to the offending website, as well as a link to your content on AC. Only Associated Content has the legal right to send an effective DMCA takedown notice to an offending company/website. We handle these types of cases multiple times every week, so the Designated Agent will be your best step. Any DMCA complaint that you send to a third-party will be defective, as you are no longer the copyright owner.

For NON-EXCLUSIVE content:
Unfortunately, because the content in question was licensed to AC on a non-exclusive basis, we have no way of knowing whether the offending site published the content before or after it was published on AC. Accordingly, we will not necessarily take any action against the site. (At our discretion, AC may send a Cease and Desist order, but we are not required to.) However, since you [the CP] retained the rights to the content, you are free to enforce your rights against the inappropriate third-party for copyright infringement. Depending on where you find your content reprinted, there should always be a contact or link that every company supplies for copyright infringement complaints that looks similar to our “Copyright Infringement?” link at the bottom of each page.

What I get from this is if you submitted your article as an AC exclusive, AC owns the rights and will pursue the matter for you. You only need to report it to their Designated Agent and they’ll take if from there. If you submitted the article as non-exclusive, you still own the rights and AC is under no obligation to help you. You should take action to rectify the situation.

Doing this yourself can be difficult especially if the thief is a blogger. My recent experience is pretty typical when a blogger steals your article. With no other way to contact them, I was reduced to leaving comments on their blog. After receiving no response for a couple of days, I resorted to reporting them to their host. The host, which happened to be WordPress, took swift action to suspend the blog.

It is important to note, I used all the magic DMCA words when I contacted WordPress. If you are going to pursue copyright infringement on your own, you will need to be very specific with URLs, publishing dates, and use the right language. Under the law, if you follow the DMCA legalese, the responsible party must follow up.

Because of my recent saga, I found a great resource, Plagiarism Today. It has lots of information on how to deal with plagiarists. There is also a very helpful Stock Letter section. Simply fill in the blanks and you have an officially worded DMCA cease and desist letter.

The really hard part about enforcing your copyright is finding out that you’ve been plagiarized. You could pay for a service like Copyscape if that is worth your money, but there is a cheesy free way to follow your work. Set up a Google alert for a key phrase or two from your article. This will notify you if the phrase shows up elsewhere on the web.

The goal is to find wholesale plagiarism. Finding just a except falls under the fair use rules. Don’t freak out if you find one paragraph which cites you as the source or links back to your original article. That’s a good thing. However, if you do find a paragraph or two which someone incorporated into their own work and they didn’t cite you, that is plagiarism.

Good Luck and happy hunting.