BLOG

Simple HTML Tips for the Non Technical Marketer

Marketing is not about the products you sell, but about the stories you tell there are plenty of great email marketing tools out there, but how easy is it for a non technical person to put out a great (read fantastic) newsletter?  Its a question I get asked a lot, and well the simple answer is, having basic HTML knowledge can take you a long way.

Learning the fundamentals of HTML can free you from relying on your webmaster or a third-party program for simple updates, and it will enable you to update your website, email newsletters, or in some cases add links and graphics to forums and social media sites. And of course, it’s always a great skill to include on your resume!

So here we go with some basics tips  & tricks that could be invaluable to you.

HTML Basics

1. Aligning Images and Text Wrapping

By default, when you place an image on a page, any other elements around it (such as text) move down underneath it. Oftentimes, this might not look desirable. If you’d instead like to wrap text around an image, all you need is the align attribute.

Code Before (No Alignment):

<img src=”screen-create.png”>
Your text here…

Code After (Left Aligned):

<img src=”screen-create.png” align=”left”>
Your text here…

Depending upon your layout, you can use the following options:

align=”left”
align=”right”
align=”top”
align=”middle”
align=”bottom”
align=”baseline”
align=”texttop”
align=”absmiddle”
align=”absbottom”

You can also add extra space around the image if you don’t want text to be too close. You can do this by adding vspace (vertical) and hspace (horizontal) to your image tag. The higher the number, the more space there will be around the image:

<img src=”screen-create.png” align=”left” vspace=”20″ hspace=”40″>
Your text here…

2. Changing Font Styles

Yes, a lot of website editors do come with a rich-text option to change the styles of your fonts. However, there have been many times I can recall still needing to know basic HTML font tags so that I could have more control over my font styles. Here are some easy ones to use:

A. Bold Text

Code:

<b>This is bold Text</b>
or
<strong>
This is bold Text</strong>

Output:

This is bold text

B. Underlined Text

Code:

<u>This text is underlined</u>

Output:

This text is underlined

C. Italicized Text

Code:

<i>This text is italicized</i>

Output:

This text is italicized

D. Font Size

Code:

<font size=”2”>This font is size 2</font>

Output:

This font is size 2

E. Font Color

Font colors can use written colors or HEX codes. Click here for a HEX color generator.

Code:

<font color=”black”>This font is black</font>

Output:
This font is red

F. Font Type

Change the type of the font.

Code:

<font face=”verdana”>This font is Verdana</font>
or
<font face=”trebuchet ms”>This font is Trebuchet MS</font>

Output:

This font is Verdana
This font is Trebuchet MS

The following are considered web-safe fonts:

Arial, Arial Black, Comic Sans MS, Courier, Courier New, Georgia, Helvetica, Impact, Palatino, Times New Roman, Trebuchet MS, Verdana

G. Combine Multiple Properties

Here is a way you can combine multiple elements in your content:

Code:

<font face=”comic sans ms” size=”2” color=”green”><strong><u>This font is Comic Sans MS, Size 2, Bold, Underlined and is the color Green</u></strong></font>

Output:

This font is Comis Sans MS, Size 2, Bold, Underlined and is the color Green


3. Blockquotes

Blockquotes are great way to pull a quote out of a paragraph and make it an indentation. Here is an example (Note: you will need CSS to style the actual quote, which we’ll cover in a later lesson!)  :) :)

Code:

<blockquote>”If you want to be happy, be.” – Leo Tolstoy </blockquote>

Output:

“If you want to be happy, be.” – Leo Tolstoy

4. Horizontal Lines

This tag will draw a line horizontally across your page or a section of the page, depending upon where you put it. All you need is the <hr> tag, which stands for ‘horizontal rule.’

Code:

<hr>

Output:


You can also control the length (width) of the line and thickness (size).

Code:

<hr size=”10” width=”50%”>

Output:


To make the line solid, use the attribute noshade:

Code:

<hr size=”10” width=”50%” noshade>


5. BONUS: Comments Tag

love this trick and use it a lot. Sometimes, you need to make notes in your markup but don’t want them to show publically on the page. I also use this to save HTML in a page that I don’t necessarily want to delete, but I don’t want it show on the page either. This way, if I ever need the code, it’s still there, hidden in the background.

All you need to do is put the notes or HTML you want to hide by surrounding it with the start comments tag <!– and the end comments tag –>

Code:

<!– Here are my notes and HTML I want to hide –>


Now that you have your starter’s kit, give it a shot and let us know if this article was useful for you.

Happy HTMLing!