Tags: email editor

HTML Tips & Tricks #3 – Header Alignment & Breaks

HTML Tips & Tricks #3 – Header Alignment & Breaks

Beyond • December 20, 2010

What Is HTML HTML stands for HyperText Markup Language. Nearly every web page you\'ve ever visited uses it and it is the programming that translates rough formats into the images that you see. It serves numerous purposes, embedding videos and images and scripts, structuring a page\'s content as well as providing the backbone for Benchmark\'s email marketing software. To encode text inside your emails you use HTML elements called tags. These tags are enclosed inside brackets. For instance, <h1> is the start tag for a large header font. At the end of the header we place an end tag, which includes a forward slash </h1>. We used these in our first HTML Tips & Tricks blog and we\'ll be using them again today. The Benchmark Email Editor covers almost all of your HTML needs. But for those of you out there who like to see how the raw code transforms into your lovely newsletters, open up your email editor and let\'s get to it. Today we\'ll handle alignment formatting and line breaks. First, open your Email Editor (Step 4 when creating a new email) and choose a template, preferably one that doesn\'t have too many colors or crazy designs already added. Find the section you want to edit and click on the pencil icon in the top left corner. Delete all of the body text. This is so you\'ll have less code to sift through when you start experimenting with your own HTML. Make two headings and leave a space between them. Like so: Now go to your Insert Additional Elements box and look beneath the social links. Click on the Code View button to access your HTML. This is the HTML. For those of you who work with code, you\'ll notice that the HTML is now color-coded. This is a new feature we\'ll be talking more about next week. For now, study that code and you\'ll notice an important tag. See our two headings? There is no longer a space between them but two <br> tags. The <br> tag functions as a space. Imagine that every time you see a <br> the computer is pressing the Enter key. Often you may see a <p> tag, which designates a new paragraph, but <br> (which designates a line break) works better in the Benchmark Editor. <br> will give you a single space rather than the sometimes open break of the <p> tag. Last week we went over how to center text by using the <center> and </center> tags. While this method will work in many back ends, a more specific tag will allow you to alter the size of your text and function in all HTML editors. Find the <br> tag in front of your first header. After the <br> tag, type in <h? style=\"text-align: center;\"> and put </h?> at the end of the sentence. See below: You\'ll notice I replaced h? with h2. For those of you who didn\'t read our HTML Tips & Tricks #1, the h? tag controls the size of the header (ranging from 1 - 6). I\'ll let you decide what size you want your header. But what about this new code? It functions the same as last week\'s <center> tag except now it gives us the additional adjustment of header size. See the results below: If you don\'t see the same results, make sure you\'re leaving no spaces between the text of your heading and the angle brackets. Also, it is important that the number you place next to the <h> is the same on both sides. If you use <h2 style=> for the start tag you must close the code with </h2> after the header\'s period. For our next header I will use <h3> to indicate the change in size. To make a left-aligned heading, simply replace center with left. Now your page looks like this: Naturally, to make the heading right-justified, simply replace \"left\" with \"right\" after text-align. Now, what about a division to offset the header from the rest of the text? To get something like this: Just open your Code View and type <hr> after your alignment tags. It\'s really that simple. The <hr> tag gives you a horizontal line under your heading. If you placed it after the first <br> tag the line would be one space lower. I hope these basic codes have been helpful so far. Next week we\'ll cover the different kinds of hyperlinks. Until then, happy coding!


Read More
HTML Tips & Tricks #2 – Basic Font Attributes

HTML Tips & Tricks #2 – Basic Font Attributes

Beyond • December 14, 2010

What Is HTML? HTML stands for HyperText Markup Language. Nearly every web page you\'ve ever visited uses it and it is the programming that translates rough formats into the images that you see. It serves numerous purposes, embedding videos and images and scripts, structuring a page\'s content, and keeping SkyNet at bay. To encode text inside your emails you use HTML elements called tags. These tags are enclosed inside brackets. For instance, <h1> is the start tag for a large header font. At the end of the header we place an end tag, which includes a forward slash </h1>. The Benchmark Email Editor covers almost all of your HTML needs. But for those of you out there who like to get inside the machine and see what it makes it tick, today we\'re going to mess with our font attributes. For now we\'ll just cover the basics. First, open your Email Editor (Step 4 when creating a new email) and choose a template, preferably one that doesn\'t have too many colors or crazy designs already added. Find the section you want to edit and click on the pencil icon in the top left corner. As before, let\'s delete the text. All we want to focus on right now is getting the HTML code to do it\'s work. More text will just clutter the picture. Now write a short text headline. Go to your left toolbar to access your Text Formatting Options. At the bottom of the toolbar underneath the social network links is the Code View button. Click on this to get a look at your document\'s source code. And here we have our HTML code (color-coded for your convenience). Our wintry headline is nestled inside the tags like a Shakespearian Christmas present. Let\'s make the sentence a little snazzier shall we? First, let\'s bold the font. To do that, simply place a tag on either end of the sentence, starting with <B> and ending with </B>. Like so: Click Save & Close and you should now see this: It\'s really that simple. To place italics, try placing the sentence between <i> and </i>. To get: These tags are pretty intuitive. For one last tip, can you guess how to center the text? A no brainer! Type <center> at the beginning of the text, then type </center> at the end. Now that you\'re started, try experimenting with other font attributes. With a little perseverance you\'ll find you know more than you thought!


Read More
HTML Tips & Tricks #1 – Resizing Headers

HTML Tips & Tricks #1 – Resizing Headers

Beyond • December 6, 2010

HTML stands for HyperText Markup Language. Nearly every web page you\'ve ever visited uses it and it is the programming that translates rough formats into the images that you see. It serves numerous purposes, embedding videos and images and scripts, structuring a page\'s content, and deciphering The Matrix. To encode text inside your emails you use HTML elements called tags. These tags are enclosed inside brackets. For instance, <h1> is the start tag for a large header font. At the end of the header we place an end tag, which includes a forward slash </h1>. Thankfully, the Benchmark Email Editor takes care of most of this coding for you. What today\'s blog is about is teaching you HTML, one tip at a time, to give you the option of coding yourself. So take a deep breath, Neo, because here we go. Today we\'ll focus on the Headers Script. Using this code you\'ll be able to make a header or headline ranging in size from 1, largest, to 6, smallest. This can make the subtitles for promotional newsletters or key extra items in your emails stand out. First, open your Email Editor (Step 4 when creating a new email) and choose a template. Find the section you want to edit and click on the pencil icon in the top left corner. Start with a blank slate and delete all superfluous text. This will make it easier to find the text you want to edit in HTML. Now write a test header where you want the official header to go. Your left toolbar contains your Text Formatting Options. At the bottom of the toolbar underneath the social network links is the Code View button. Click on this to get a look at your document\'s source code. When you take a look at the daunting jumble of HTML code inside you\'ll understand why most users won\'t even bother with it. Remember, as you add more text this code jumble will become more dense. Our header is in there, though. Now comes the fun part. Let\'s change the header size. This HTML trick is accomplished with the simple addition of <h?> and </h?>. The question marks represent a number from 1-6. 1 is the largest size header and 6 is the smallest. Let\'s start off with 1. Don\'t worry about any of the other code. Just find where your header begins (in my case, it is the \"W\" of \"Welcome to Benchmark Email!\"). This is where your first HTML bracket will go. It should look like this: <h1>Welcome to Benchmark Email! At the end of your phrase (in my case the exclamation point after Email!) enter </h1>. See below: Remember to leave no spaces between the coding. Save & Close the window and check out your text. No sweat, right? This is the largest header setting (1). If that\'s too big, you can scale it down. You can play with the numbers to see what works for you. Just go back into the code view and find your text. You don\'t need to re-enter the brackets, just switch the number after the <h>. The limit is 6, seen below. And there you have it. When we break it down, HTML isn\'t quite as daunting as it first appeared. But of course there are many more tags to cover and we\'ll be back next week with a brand new set of code.


Read More