Skip to main content
Back To Top
Got Questions?
Get in touch with us!

How to Use a WYSIWYG Editor and HTML Basics

by: Carol Morse Client Support

The WYSIWYG: What You See Isn’t Always What You Get

So often I talk to clients who are trying to update their website and are frustrated that the WYSIWYG editor is in fact a total misnomer. And it’s true. The WYSIWYG does not often stand up to its acronymic name – What You See Is What You Get. But no worries, there’s a simple solution… the HTML view!

*Dramatic pause for the initial reaction of everyone the first time they look at the HTML view**

It’s not as bad as you think. Don’t raise your eyebrow… it’s not! I am not a software engineer. I can’t tell jQuery from jay walking, but I did learn how to negotiate the dangerous world of HTML (psst…I may have had some help from the awesome developers at SilverTech). You too can learn enough to empower yourself to update your website content with confidence and ease AND impress all your friends at parties with some nerdy lingo.

Always Paste From a Text Editor

Don’t waste your time making it look right in a Word document. Your friendly neighborhood web developer already created a cascading style sheet (CSS) for your website so that the fonts, colors and margins appear consistently. When you copy and paste from an existing word processing document, you carry over all of the formatting code. Even if you can’t see it, it’s there, and it will make a mess.

Most people have Notepad on their computers already, which works fine, but I recommend you download a text editor that has syntax highlighting, such as Notepad++. This makes it so much easier to read with the numbered lines and color coded categories. And if you ever need to edit an existing page, you can copy the HTML into Notepad++, easily find and make your edits, and paste back into HTML view without consequence.

Learn a Couple of Basic HTML Tags

No one is expecting you to write the code for an entire website, but you should understand how tags work. The tags mark the beginning and ending of a command or style. An open tag <> marks the beginning and an end tag </> signifies to stop applying that formatting. Throw in the ‘code’ for the formatting you want to apply and, BOOM, you’re writing HTML.

For example: <b>make this bold.</b> when viewed on the web, it will look like this: make this bold.

There’s a number of websites with HTML cheatsheets where you can learn how to italicize, make a header, create a hyperlink, add a space between paragraphs, etc. The key is to recognize what is causing certain styles to happen (or not work) so you apply the tags and let the CSS do the work for you. This ensures that your site stays clean and consistent.

The Find Feature is Your Friend

That’s great, but what about updating that monster table of part numbers and prices? Tables and lists in HTML view are intimidating at first. It’s a lot of code wrapped around a little content. But don’t waste your time looking for part #2309B, have the computer show you the way. Hit CTRL+F, type the part number into the find window and let the computer lead you to the needle in the haystack of nonsense. Once you have your bearings on the page, locating minutia you need to update is much easier.

Look for Patterns

How come the picture I just inserted doesn’t have the padding around it that it does on the other page? Well, take a look! Don’t be afraid of looking at the HTML view of the pages that are already done that you want to replicate. Finding the code on the page that looks right and comparing it to the code on the page doesn’t look right will help you quickly locate and identify the problem. It’s also the best way to learn the more complicated HTML codes for images, padding, tables, numbered lists, etc.

The good news is it’s the web. It’s not permanent. You can always undo any oops or save the original in a text file so you can paste it back in and start over. So don’t be afraid to try. And worst case scenario, if you can’t seem to uncross your end tags or your eyes, we’re always here to walk you through.

</html> (HTML humor for ‘the end’)