Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this video, we'll code a one-column HTML email. Typically, this design is used to send an announcement or advertise a single product. Here's the email, in JPEG format, that we'll code. Now, as we did in earlier videos, let's convert this design to a grid and call out the design elements: the logo, header, content area, and footer. The first step is to focus our eyes an inch or two off the screen, so we can begin to see this design not as a design, but as a set of blocks.
Then what we'll do is put a grid around the most common elements, and we have a set of boxes. So, let's look first at this large box that goes around all of the email itself. You'll also notice that the plum color is a box in itself, so the email is a box and the plum color is a box. So let's look at these boxes in HTML code. We'll start there. I'm using Notepad++, and I'm using it to highlight different tables.
So here we have the pseudo body table, which represents the plum-color area that is around the email box. The next table that gets nested inside is a wrapper table that contains the email itself, and this represents this box that goes around the footer and around the News area. Now let's look at the News area and the footer as they sit within this box that contains the HTML email. In Notepad++, let's unclick this table, and you'll see that we have a table here that represents the start of the actual email.
Above it, we have generic information, a link to a newsletter version if one exists, and a brief note about how people became readers of your email and how they can unsubscribe. So at the start of the email, you'll notice that we have HTML tables and table data cells. This first table data cell contains a background image, so that's the entire design that we have attached to this larger box. So instead of cutting up the image into many images, we've created a single background image to make it simple.
Now let's focus on the News box. Here's the News table, and it's nestled within that larger HTML email. And you can see that it's very straightforward. It has a width, just whatever is needed. You'll see here in this design, we don't need the width to be the full length. It only needs to go across perhaps halfway. And then the other point to mention here is that we've started HTML tags, in this case the paragraph or P tag, on one line, we put the content on the second line, and we've closed the paragraph tag on a third line.
This is simply good coding practice, as you'll discover, because this allows non-technical people to update code in your HTML email without getting tripped up with the HTML. They can focus simply on typing content here. So let's look at the last element of this design, which is the footer. Here in our design we created four boxes within a larger footer table. In fact, however, we only need three. We need one area for the links on the left, we need a middle table to give us some space over this image of the bottles, and then we need a third area, which are the links off to the right, that are wider.
So let's see what that'd look like in code. Let's scroll down, and here's the footer table. This is the first area where we have the links that go here in the lower-left corner of the footer for Tours, Find a Store, et cetera. The next area, we've created a blank space, and we've put in the HTML code for that, the ASCII character code, and we've forced it to be a width of 70 pixels, and that represents this middle space with the bottle images, so we're basically layering our table over the images in the footer.
Finally, we have a wider area here in our table that has a pixel width of 200, so that we have plenty of room for our links. Now, it's not expected that you know HTML brilliantly to understand all of this HTML. There are other courses on lynda.com that can help you learn basic HTML. At this point, however, we've created a very basic table structure that corresponds to our design as a grid. In the next lesson, we will take this basic HTML table code and we will begin to add content.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98401 Viewers
80 Video lessons · 141480 Viewers
59 Video lessons · 59837 Viewers
52 Video lessons · 73032 Viewers
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.