Start learning with our library of video tutorials taught by experts. Get started
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.
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.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.