The Basics of HTML
By Rebecca Farris
More Simple Than You Might Think
It can seem a little overwhelming to create an email within the html language. However, it’s really much more simple than you might think. Here are a few easy steps to creating your first email, from understanding the code and learning how to host the image to selecting the correct colors for your design.
A note: In the sample template, we have included CSS, a second language used in an html email. This is the styling part of your email. It controls the colors, font sizes, width or height of an image, line-heights, font boldness, etc. For this tutorial, we will focus on the html with the exception of coloring headers, subtitles, and buttons. In the next tutorial I’ll cover styling in more depth.
HTML Basic
HTML is a pretty simple language, and there are only a few elements that you will need to know in order to create an email. When writing this code, each element must have a beginning and an ending. It will look like this:
Beginning of a paragraph
Ending of a paragraph
The most important elements to learn for html emails are as follows:
TABLES
One way to manage your content in an email is using a table. This is the frame of your email, and all of your content will sit within these elements. Tables work incredibly well with Home Educating Family’s eblast system:
This is the start of a table
This represents the table body
This is a row of a table
This is where you place the image or text
When we put this together, it looks like this:
your content (text, image, or hyperlinks) here
CONTENT
Now that the frame is set, you’ll need to add content. In the most basic emails, there are 3 different types of content:
Images
To add images to your email, you will need to design the image, host the image, and then add the image url to the email. The image code will look like this:
<img src=”enter your image url” alt=”enter your image description” width=”700“>
Once your image is designed, hosting your image on your website server is best.
If you’re using a wordpress site, simply click Media → Add new → and select the file to upload. Once it’s uploaded, click edit, and copy the File URL. This is called your image url and is placed in the red section above entitled “enter your image url”
If you’re using Amazon AWS to host, be sure to set permissions to public when you upload your image so that it is readable to the public.
Be sure to enter your alt information. This is the description of your image.
Filled Out Example:
<img src=”http://cdn.homeeducatingfamily.com/wp-content/upload/2021/06/mailtookit.jpg” alt=”Email Awareness Sequence Article” width=”700“>
PARAGRAPH
(header, subtitles, paragraphs)
In the sample template, there are three types of text that have been styled for you. Since the goal of this simple tutorial is to get you going quickly, it’s most important for you to learn where text goes, and how to color it.
The paragraph element is used to place text. Within the paragraph, you can add the style to make the font size larger, bold, italic, and select a color. To keep things simple we will focus on just the text and the color. The sample template has already styled the rest for you.
To select a color, you will need to use a color code called HEX. (A HEX is a 6-character code – a combination of letters and numbers – preceded by a #.) There are a variety of online image uploaders to find the colors that match the image, my favorite is Image Color Picker
By uploading your image, it will tell you the best HEX colors to use for your header, subtitle, and call to action buttons. Upload your image and then click on the color below the image that you want to use. The HEX code will appear under the Colors box.
Now that you have the best color choices for your image, take some time to go look at the sample template. You’ll notice that there are places within the template that have an existing color (such as #3c7e81). You can replace any of these with your preferred color.
Next, review the red color-coded spaces within the template. These will give clear indication of where you should place the header, subtitle, paragraph text, and button text for your e-mail.
HYPERLINKS
(linking images and buttons)
Finally, you’ll want to link your images and buttons so that your readers are directed to the correct website landing page. Link elements WRAP the element they are linking. For example, using the image example above, let’s wrap it with a link.
First, here’s the image code itself:
<img src=”http://cdn.homeeducatingfamily.com/wp-content/upload/2021/06/mailtookit.jpg” alt=”Email Awareness Sequence Article” width=”700“>
Here’s that same code wrapped with a link:
<a href=”enter your website here”><img src=”http://cdn.homeeducatingfamily.com/wp-content/upload/2021/06/mailtookit.jpg” alt=”Email Awareness Sequence Article” width=”700“></a>
A link element stands for: anchored (a) hypertext reference (href). But for everyday use, we call this the link. Here’s a sample of this linked image completed with the link:
<a href=”https://homeeducatingfamily.com/top-10-2-email-awareness/“><img src=”http://cdn.homeeducatingfamily.com/wp-content/upload/2021/06/mailtookit.jpg” alt=”Email Awareness Sequence Article” width=”700“></a>
Now, when the reader clicks on the image, they will be directed to the referenced link.
And that is it! That’s the simplicity of creating the html email. If you have any questions, feel free to reach out to Shawn at 716.867.6600 or shawno@hedua.com.
Home Educating Family Association
P.O. Box 431
Columbia, TN 38402
423.438.3085
About Us
With over 35 years experience in the home education industry, Home Educating Family staff are continually innovating products and services for the homeschooling family.
Advertise
The homeschool industry is a unique niche market which continues to grow each year. At Home Educating Family, we assist clients in creating and developing marketing strategies.
Copyright 2024 by Home Educating Family. All Right Reserved.