Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding your images to the code

From: Creating an HTML Email Newsletter

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.

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.

Show transcript

This video is part of

Image for Creating an HTML Email Newsletter
Creating an HTML Email Newsletter

14 video lessons · 18552 viewers

Tim Slavin
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.


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.

Join now "Already a member? Log in

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
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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.