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 · 18799 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

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 preferences from 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:

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