Start learning with our library of video tutorials taught by experts. Get started

Creating an HTML Email Newsletter

Adding your images to the code


From:

Creating an HTML Email Newsletter

with Tim Slavin

Video: Adding your images to the code

The next step is to add images and other color details to our HTML table structure. In this video we will build out our e-mail. We will add more layers of code. This is where we left off in our last video with our table structures set up. The first thing we'll do is to add a background image. Let's scroll down to our Background table, we will select background equals, we know that our images are in the images folder, which is here, I will click Copy and Ctrl+V or Command+V to paste and then I'll add the file extension.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Creating an HTML Email Newsletter
55m 25s Appropriate for all Dec 07, 2011

Viewers: in countries Watching now:

In this course, author Tim Slavin shows how to design and code an HTML email newsletter, including setting the final dimensions and color palette, placing images and copy in the code structures of the file, and defining the newsletter's parameters with tables within tables. The course demonstrates each step of building an HTML newsletter, up to testing and sending the email.

Topics include:
  • Adjusting margins and padding in the code
  • Setting the look for headers and footers
  • Testing the code with tools like BrowserLab
  • Building a TXT equivalent of an HTML email for simple email readers
Subjects:
Business Online Marketing Email Marketing
Author:
Tim Slavin

Adding your images to the code

The next step is to add images and other color details to our HTML table structure. In this video we will build out our e-mail. We will add more layers of code. This is where we left off in our last video with our table structures set up. The first thing we'll do is to add a background image. Let's scroll down to our Background table, we will select background equals, we know that our images are in the images folder, which is here, I will click Copy and Ctrl+V or Command+V to paste and then I'll add the file extension.

You can see that our background image works. Now let's discuss this code. This is vml code, it's Microsoft proprietary code that shows background images in Outlook 2007 and 2010. However, when I tested for this project, it doesn't work if you wrap this vml code around a table. You can't put an image behind a background. But that's not really a problem in our case, because we have a background color that we are going to add.

So let's add our background color, we do that with a BG color tag. If you recall, we have a worksheet with everything marked out. So we look at our worksheet for this color. On a worksheet, the color for the background was b6b596, so let's add that. Your colors may vary of course, because within your image editing software you might use the Eyedropper tool to extract color from a slightly different area. So don't worry if these colors are not 100% accurate.

You can use the colors I use of course, because they will work as well. To test whether or not this color shows, let's break the Image Reference by adding the number 2 to the image file. So you see we have a color pretty close to our background color, and it will ensure that our e-mail looks nice and clean. Let's go back before we forget and change the file name to the correct image file name.

Next, let's look at each of the rows in our content table. Notice that their backgrounds are transparent. Let's set those background colors to white at least to start, and for copy and for address information in the copyright Facebook lines, we will set it to the darker color. Once again, we will use our worksheet to get these values. To add color backgrounds, we will use the bgcolor tag. In this case the color is white. As we did when we set the width of the content table, we will adjust both the table and the table data cells.

For the copy, we know that the color is different. Looking at our worksheet, the color is e2e7d3. We used the same color value for the olive branch image. For the footer, we will set the color in our worksheet. That's 211b05. Let's save our file and look at the browser. We have now set the background image and the background color of different rows of our tables.

The next step will be to add images, let's start with the logo. We will start with in our CSS prep file; we will copy the image Ctrl+C or Command+C to Copy, Ctrl+V or Command+V to Paste. We know the logo is in our Images' folder, which is here. I will click Copy and then Paste, and then we will add the file extension. We will add the Alt tag value in case the image does not display.

Our worksheet tells us that the height of this image is 200 pixels and the width is 500 pixels. Let's Save and check our work. This look great! Next, we want to add the olive branch image. Our CSS prep code file, Ctrl+C or Command+C to copy the image, and we will replace this text. In the Images folder, Copy and then Paste and add the file extension.

We will also fill out the Alt tag, and our worksheet tells us that this image is 177 pixels high and the width is 500 pixels wide. Let's save and check our work. There we go; the next step will be to add the Facebook item in the bottom right row. If you recall, when we took this email design apart and defined a structure, we decided that the bottom footer row needs to be three table data cells.

Now let's turn that into code. We will scroll down to our copyright facebook row, we need to copy this table data reference and paste it two more times. So this will be the copyright, this will be find us on Facebook and this will be the Facebook icon. To add the icon, we will go to the CSS prep code file, copy our image tag, paste it in here.

Our source file is found in the Images folder, we will copy the file name and to add the file extension. Fill out the Alt tag, our worksheet tells us, this image file is 28 pixels high and 28 pixels wide. So let's Save and let's see what happens. Notice how these two table data cells on the lower right are separate off by themselves.

With HTML tables, we will need to specify that each of these content rows is able to span three columns. The specific tag is called a call span tag. So let's add that to each of these table data rows in our content table. So we will add it here. We will highlight, Copy and Paste. We will Save and check our work.

So now everything fits tightly. Let's finish off the Facebook icon by specifying the width in the alignment of the copy. Specifically, the copyright will need to be aligned to the left, to find us on Facebook copy, we will need to be aligned to the right and the Facebook icon can either be center or right. So we will work first here on copyright, we want the alignment to the left, this alignment to the right and this alignment we will leave alone.

We want to specify the width here as 250, 200 and 50. Remember our image is only 28 pixels wide. Which width you set will depend on the copy, but we'll do that in the next video, and we may refine these values. Let's Save and for now we can see that our copy fits, and we are generally in the ballpark. Our images are now in place. In the next video we will add headings and copy and code them to match the email design.

There are currently no FAQs about Creating an HTML Email Newsletter.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creating an HTML Email Newsletter.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked