New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

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

Placing your copy in the code

From: Creating an HTML Email Newsletter

Video: Placing your copy in the code

In this video will I copy to our email and go to work on spacing that surrounds our content. This is where we left off in the prior video. Now let's get to work on copy. We will go to our email copy text file, typically, when I code an HTML e-mail I will extract all the content out into a separate file, so that I don't actually have to type in the code. Most in my coding then is simply Copy+Paste. We will start at the top of the email. Ctrl+C or Command+C to copy, Ctrl+V or Command+V to Paste.

Placing your copy in the code

In this video will I copy to our email and go to work on spacing that surrounds our content. This is where we left off in the prior video. Now let's get to work on copy. We will go to our email copy text file, typically, when I code an HTML e-mail I will extract all the content out into a separate file, so that I don't actually have to type in the code. Most in my coding then is simply Copy+Paste. We will start at the top of the email. Ctrl+C or Command+C to copy, Ctrl+V or Command+V to Paste.

I'll bring it up a line, and we will go to our copy table data cell. Select this, and our copy extents from here, down to here. So we will Copy and Paste. For our address information, we need this line of copy.

Our copyright is a little bit different; we have it here, Copy and Paste. Just make sure I copy this, maybe the same, but I just want to be sure, because I was careful to copy the text correctly the first time. We will save our work and check our display. What we will do next, is we will add paragraph tags and we will begin formatting some of these bits of copy.

Start again at the top. For this small table, I want to add the font styling information at the table data level, and the reason is to reduce the amount of code. We are going to add a link here, and therefore, I don't want to have to code the paragraph tag and then code the link, so I will separate the two chunks of style information. I will close it off, and I will go to my CSS prep file, I will select, Ctrl+C or Command+C to Copy. Ctrl+V or Command+V to Paste.

I will add the link at this point. Notice that I set a target ="_ blank" value that is for webmail. We don't want any link to open up in your email client. You wanted to open a new browser window, and because these top and bottom links will be mouse print effectively, we will set the font size to 10. We will keep the line-height is fine, and we will go back and style the link layer.

Next, we scroll down to our copy. This line is our heading, so let's set it with the H1 tag. We also could use spans or divs, but I try to avoid them in HTML email code, because older email software isn't guaranteed to acknowledge a span or div. For our subheading, I will set it at H2 and down here, I will set p or paragraph tags and I will create a close p tag, highlight, Copy and then Paste.

This chuck of copy is a single block, so we need break tags. For older email software, we need the old HTML break tag, not XHTML. We'll Save and then scroll down. Here let's do the same thing we did up above. We will set the style for the font at the table data cell level, and that will allow us to set the style for the link separately, and it will save us a little bit of code, make it easier to read. We will scroll up here, and we will start with this for now.

We can always change it later layer. We will go back to our address information, and for now we will set it at 10 pixels, and we will set the anchor tag links later. We will take the same strategy here; we will set the font information at the table data level. We don't need to set the font for the Facebook image however, so let's save our work for now and see what we have. All right, several things, first of all we need to change the color of our heading and our subheading, and we need to define the font information for them a little bit better.

Let's also take a quick look at the original design. You'll notice that the phrase Private Tours & Tastings in October is bold, and you will notice that the line that beings To RSVP please reply also is bold. So let's remember to add those values as well. In addition, we can also set the color for the footer copy. So we will start at the top, we will begin with this font information, we will scroll back down, Ctrl+V or Command+V to Paste.

We probably want the font size for our heading to be around 16 pixels, we want the font weight to be bold, and we want a Serif font, we will start with Georgia, Times and Serif. This allows older email software to degrade. If it doesn't have Georgia, it will select Times, if it doesn't have Times, it will select Serif, and because this whole copy block uses Serif fonts, we will simply copy it for our subheading as well.

We will go to our worksheet and we will figure out what our colors are for the headings, subheading and copy. For our heading we have our color as 35411d in hexadecimal. For our subheading, we have as a color 9b9d9a. Now we can copy the style information for the heading into the paragraph tags. We will of course adjust the font size and the line-height.

Up here I notice that the line- height is actually set incorrectly. It should be at least equal to the font-size. We will set it at 16. The addition if you remember, the subheading is Italicized. So we will set that as for emphasis and we will close it off here. If you recall Private Tours & Tastings also was Bold, so we will set that in Bold. And this To RSVP line also was set in Bold.

I forgot to reset the font-size. Let's go back and set this. It's 12, 12 and 12. We also can increase the line-height to 16, 16, and 16. So let's save our work and see what we have. Let's close, let's look at our original design. I see that actually in our original design our font is San-serif for the actual body copy.

So we will make that change, and I see that we have more space in between the lines; it's a little bit bigger. So let's go back and make those changes. So we will make the leading 18 pixels, 18 pixels, 18 pixels. So I will scroll down to the paragraph tags, and I will change this definition to Arial, Helvetica, and San-serif. Then I will copy this change to the other paragraph tags, not the heading or subheading.

I also need to set this line- height to 18 to make everything equal. Let's go back and change our paragraph definitions to make the font-weight normal. We are only updating the paragraph tags at this point. That's much better. Now that we have our content figured out, let's work on issues of margins and padding.

Show transcript

This video is part of

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

14 video lessons · 18408 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

Are you sure you want to delete this note?

No

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:

  • new course releases
  • newsletter
  • general communications
  • special notices

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:

  • new course releases
  • newsletter
  • general communications
  • special notices

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.