How To Format an HTML Email Part 3

Incase you missed it Here is Part 1 and Part 2

How To Format an HTML Email Part 3

 

In part 2 we discussed editing the background color and the header image using our text editor! 

Editing the Sidebar

Today in Part we’re going to edit the left sidebar of the email!

Lets start by finding out where we in our HTML Code. 

Look for this part of the code right after the header image that we previously edited!

Code:

 

<tr>

               <td>

                  <table width=”580″ height=”130″ border=”0″ cellspacing=”16″ cellpadding=”0″ class=”content”>

                     <tr>

                        <td class=”sidebar” align=”left” valign=”top” width=”192″>

                           <h3>In This Issue</h3>

                           <ul>

                              <li><a href=”#”>Nullam egestas feugiat felis</a></li>

                              <li><a href=”#”>Lorem ipsum dolor sit amet</a></li>

                              <li><a href=”#”>Donec porttitor ligula eu dolor</a></li>

                           </ul>

                           <img src=”hr-small.gif” alt=”Small hr” width=”192″ height=”28″ />

 

Oops! Remember we added width to the header image in part 2? So we need to make this opening table that contains the side bar and the body content the same width as the header! Its very simple just replace change this line of code.

Code:

  <table width=”580″ height=”130″ border=”0″ cellspacing=”16″ cellpadding=”0″ class=”content”>

Replace with:

  <table width=”780” height=”130″ border=”0″ cellspacing=”16″ cellpadding=”0″ class=”content”>

Very simple right?

Ok onto editing the content of the sidebar. Let’s examine this line part of the code and break it down so you know which part goes where:

Code:

      <td class=”sidebar” align=”left” valign=”top” width=”192″>

                           <h3>In This Issue</h3>

                           <ul>

                              <li><a href=”#”>Nullam egestas feugiat felis</a></li>

                              <li><a href=”#”>Lorem ipsum dolor sit amet</a></li>

                              <li><a href=”#”>Donec porttitor ligula eu dolor</a></li>

                           </ul>

Notice the <td class=sidebar. This references the class in the CSS stylesheet this attached to this page it controls how the page is displayed on your browser. After that line we have align= left which aligns the text left you can change to ‘center’ or ‘right’  then we have valign which stands for vertical align which brings the text to the top of the table as opposed to the middle or bottom. Then we have the width, this is very important! We can change the width of this table but just remember that whenever you change it whether increasing or decreasing you need to change the width of the table that contains the body content as well. However 192 should be more than enough width for this sidebar.

Next we have the <h3> tag, this is the ‘header’ tag it is used to emphasis on whatever is in between the tags. This happens to be the title of this block of content that says ‘In This Issue’. 

Next we have an <ul> or unordered list. A <ul> displays as bullet points where as a <ol> ordered list displays as numbers.

Code:

 

<li><a href=”#”>Nullam egestas feugiat felis</a></li>

                              <li><a href=”#”>Donec porttitor ligula eu dolor</a></li>

                              <li><a href=”#”>Lorem ipsum dolor sit amet</a></li>

The <li> tag tells you what is actually listed in the list. Confusing right? The weird looking words are just latin filler words used by designers to show example text. Here is what it might look like for your newsletter!

Code:

<li><a href=”#”>This Month’s List of Stuff Not To Do</a></li>

                              <li><a href=”#”>Gary’s Newest Article to Save the World</a></li>

                              <li><a href=”#”>Check Out These Sweet New Sites!</a></li>

You get the picture right?

Now you may be wondering what the <a href> tags are. These are the tags that let you link other files or sites on the web. They stand for a= anchor and href = hypertext reference… Don’t believe me do you? Ok check it out at yourhtmlsource.com

So why is it linked to the ‘#’ this is called an ‘anchored text’ tag. It doesn’t link to another page or website it links to someplace in the body of the content on the same page.

So lets edit these links right now.

Code:

 

<li><a href=”stuff”>This Month’s List of Stuff Not To Do</a></li>

                              <li><a href=”gary”>Gary’s Newest Article to Save the World</a></li>

                              <li><a href=”sweet”>Check Out These Sweet New Sites!</a></li>

 

Now we will have to finish the anchor tag in another lesson but just remember what you put in here for the anchor tags.

Ok well that is enough for today… My head is about to explode explaining all of this HTML stuff to you! 

If you have any questions please feel free to comment on the post!