Hints and Tips - Cutting and Pasting into HTML

The ability to 'cut and paste' is one of the most wonderful elements of electronic word processing.  Not having to re-type everything is a huge time saver and I can't imagine filling an entire Web site without doing at least a little cut and paste from somewhere.  However, when doing this for the first time, you may discover that what you've pasted doesn't always look like what you started with.  This article will explain how to cut and paste, why re-formatting can happen and what you can do to increase your chances of your 'cut and paste' process being smooth and seamless.

Keyboard shortcuts
Before we get started, let me share a trick that will help get you cut and pasting like a pro.  Many basic functions of Windows have what are called 'keyboard shortcuts' which are a combination of keys pressed at the same time to produce results that normally you'd have to use your mouse and the interface of the software to create.  Cut, copy, and paste are three of these functions.  Their keyboard shortcuts look like this:

CTRL+X = Cut
CTRL+C = Copy
CTRL+V = Paste

What You Get is More Than What You See
Most times when you cut and paste text, you will do so from a word processor, such as MS Word, MS Works, or perhaps MS Publisher.  These word processors do a wonderful job of making our lives easier by spellchecking and formatting our text.   They frequently have many other functions as well that serve to make our printed material look clean, crisp, and professional.  Most people use them so regularly, that they never stop to think about how these word processors do all this.  The answer is complicated programming that is invisible to the user (assuming your software is working correctly).   All these programs use personalized coding that is attached to every keystroke you make.  This personalized computer code and formatting allows the word processors to give you a finished product that looks very nice.

When this sentence is typed directly into HTML (as it would be if you typed it directly into your WebMedley editing window) the HTML code for it looks like this:

<P>"The quick brown fox jumped over the lazy dog."</P>

(The <P> and </P> are HTML code for the beginning and end of a paragraph.)

Here's what the same sentence looks like when copied out of MS Word, using a Verdana font set to a font point size of 10:

Looks the same on the surface, doesn't it?  That's why we have to look deeper.  Its HTML code ends up looking like this when cut and pasted into WebMedley:

<P><SPAN style="FONT-SIZE: 10pt; COLOR: #333333; FONT-FAMILY: Verdana; mso-bidi-font-size: 8.5pt; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA">"The quick brown fox jumped over the lazy dog."</SPAN></P>

As you can see, there is a very radical difference.  Multiply this difference over many, many paragraphs and formatting elements in the document you cut and paste from and you can see why HTML sometimes has trouble interpreting this 'simple' cut and paste.

So, while you thought you were only cut and pasting a single sentence from your word processor, you were actually cut and pasting much, much more.  It is all this extra code that will also sometimes keep your text from responding to your input using the WebMedley editing toolbar since the commands that the toolbar adds just gets lost in the middle of all the other unnecessary code that the word processor has brought in.

Cleaning Your Copy
Don't despair, there is hope for cut and paste.  It's a simple little program called 'Notepad' and it is included in all Windows operating systems.  You probably have passed it before on your way to 'solitaire'.  The order to find it is START > PROGRAMS > ACCESSORIES > NOTEPAD:

Notepad is a raw text editor with no bells or whistles.  It will not hold word processing formatting code.  Therefore, if you cut and paste text from your word processor into it, all you will be left with is the raw text.  Things such as italics, bold, underline, tabs, etc. will all dissapear since all these elements are contained in the formatting code of the text you just copied.  Once you paste it into notepad, then cut and paste it into WebMedley.  By doing this, your text comes in free of all the extra formatting code that tends to just make a mess in HTML anyway. 

By doing this, you will end up with code that looks much cleaner and is more likely to respond to your input when using the toolbar to edit your text.

Cleaning Your Copy Even Better
If you don't mind downloading some software, we have designed a tool that will even remove/replace some of the handful of non-HTML-friendly charcter codes that notepad misses.  Check it out.  We call it the 'lean green anti-formatting machine'.

"X" Marks the Spot
Another thing you may run into when using cut and paste is the 'x-box', and no, I'm not talking about Microsoft's home gaming system, I am talking about one of these:

These red x's appear when there is an image referred to in the HTML code that your Web page can't find.  This will happen when you cut and paste in a picture instead of first uploading it to your media library and inserting it using the 'Insert Media' button on your toolbar.  For more information on how to upload and insert pictures, please refer to our training refresher or our online manual.