HTML – Hyper Text Markup Language
WYSIWYG – What You See Is What You Get editor
For some of my clients who are using a content management application or WordPress, there are times when you will need to use HTML rather than the visual mode of a WYSIWYG.
Some common challenges that need to be considered are the following:
1. Copying and pasting document content from Word or PowerPoint or Adobe PDF, Excel
a. Challenge: spacing or font formatting that seems to have been brought over from source document.
b. Solution: always copy and paste source material into NOTEPAD and then re-copy and paste into your WYSIWYG editor.
2. When either copying source material in, or writing directly into the editor
a. Challenge: Sometimes extra line spacing occurs when you don’t want it to.
b. Solution: You may need to look at the HTML source to see if an extra <p> or <br> was added. Please note, a full carriage return [enter], it will give you a <p> paragraph break, whereas, if you hold down the [shift key] and [enter] it will give you a <br> line break.
3. Bullets – ordered and unordered
a. Challenge: When putting in ordered bullets, sometimes the numbers won’t line up properly especially when there are 2, 3, level of bullets.
b. Solution: Add all the text before putting in the bullets, make sure where there are supposed to be bullets, you have a full carriage return between each one, then highlight this list, and then apply the bullet icon.
All HTML tags need an open and close tag, for example <tag>information goes here</tag>
| Tag | Purpose | Examples |
| <p></p> | paragraph | |
| <br> or </br> | Line break | |
| <ol> </ol> | Ordered List (1, 2, 3, I, ii, iii) | <OL > or <OL> or <OL > or <OL > |
| <ul> </ul> | Unordered List (bullet formats) | Or <UL > for square bullet |
| <li> </li> | bullet | |
| <i> </i> | Italic | |
| <em> </em> | emphasized | |
| <table> </table> | Insert a table | |
| <strong> </strong> | Bold | |
| <b> </b> | Bold | |
| <tr> </tr> | Insert a table row | |
| <td> </td> | Insert a table cell | |
| <span> </span> | Attribute, formatting style |
<span> |
| <div> </div> | container | <div> |
| <tr align=”center”></tr> | Align table row center | |
| <tr align=”left”></tr> | Align table row left | |
| <tr align=”right”></tr> | Align table row right | |
| <a href=””> </a> | link | <a href=”/membership-benefits” title=””>Benefits</a> |
| <img src=””> | image | <img src=”http://www.ydomain.ca/images/89/newlogo.jpg” alt=”keyword” title=”keyword phrase” width=”280″ height=”210″ /> |
| <h1> </h1> | Header 1 | Largest heading |
| <h2> </h2> | Header 2 | |
| <h3> </h3> | Header 3 | |
| <h4> </h4> | Header 4 | |
| <h5> </h5> | Header 5 | |
| <h6> </h6> | Header 6 | Smallest heading |
| | Non-breaking space | Good for indenting |
| Copyright Trademark Registered Less Than Greater Than Ampersand Quote Apostrophe Cent Euro One quarter One half Three quarters Degrees Larger middle dot |
© ™ ® < > & ” ‘ ¢ € ¼ ½ ¾ ° • |
© ™ ® or ® < > & " ' ¢ € or € ¼ ½ ¾ ° • |
| <title> </title> | title | |
An element that has an opening and closing tag is referred to as a container element because anything contained between these tags are affected by the element.
Closing Tags cannot be placed just anywhere. Use the “Last In = First Out” principle or “LIFO”. That is, the “Last” tag “In” must be the “First” tag “Out”. Another way of stating this is that the last tag activated must be the first tag terminated. An example of a correct sequence of tags is:
<tag1><tag2> statements </tag2></tag1>
So when you look at the code, you don’t have to get too scared off, just reference this table to see what those tags mean. When in doubt, just give Jemma a call, 416-451-2063
