Welcome to Benchmark!

Pierce Nahigyan

HTML Tips & Tricks #6 - Advanced Font Attributes

Jan 06 2011, 11:22 AM by

What Is HTML?
HTML (HyperText Markup Language) is used by web pages to translate raw computer code into images, text, anything that you see on the internet. It can embed videos and images and scripts and structure a page's content. It is also the backbone of Benchmark's email marketing software.

We use HTML elements called tags to alter the content of web pages or emails. These tags are enclosed with brackets, such as in the case of <h1>, the start tag for a large header font. A start and end tag enclose an image, section of text, etc., to complete the code. The end tag is usually the same as the start tag but includes a forward slash </h1>. To see how we used header tags, check out our first HTML Tips & Tricks blog.

Knowing how to use HTML isn't necessary for the Benchmark Email Editor, but this blog series is for any of the curious users out there who'd like to give coding a try.
Advanced Font Attributes
We covered the simple font attributes (bold, italics, centering) in our second blog, HTML Tips & Tricks #2 - Basic Font Attributes, and today we'll continue with some more advanced HTML font applications.

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 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 way you'll have less code to sift through when you start adding your own HTML. Type a brief salutation at the top to orient yourself. Normally I'd encourage you to type whatever you want for the example. But for this example, copy what I've written below so that you can see how the code works. Take a look:
That's a pretty ridiculous collection of phrases. But what we're going to do is alter each sentence to match its statement. Some of you may notice that bold is our first code up there. For those who remember Basic Font Attributes, this tag is as simple as a <b>. If you want to change it up, though, try writing <strong> instead. Technically, <strong> text isn't necessarily bold text but it achieves the same purpose. The effect may differ over different font styles and editors. Either tag you choose will produce the desired effect.

Before we go further, however, let's get into the code. Click the Code View button under the Insert Additional Elements box.
This brings up the HTML of your document. We've written more than usual in this lesson but the rest should be easy. The <br> tags between sentences are line breaks. We don't need to worry about those.
Here's where the fun part begins. Read these instructions carefully to make sure each tag is where it should be. For each HTML element, leave no space between the tags and the words (I encourage you to double check with the image below). As before, you'll find that these tags are largely intuitive.
Around "bold text," type <b> and </b> tags. (Or <strong> and </strong>.)
Around "BIG TEXT," type <big> and </big> tags.
Around "emphasized text," type <em> and </em> tags.
Around "small text," type <small> and </small> tags.
Around "a subscript," type <sub> and </sub> tags.
Around "super script text," type <sup> and </sup> tags.
Around "This text was inserted." type <ins> and </ins> tags.
Type <del> and </del> tags around the next sentence.
The last sentence, though it stands for "delete," will actually produce a strikethrough effect. When your HTML code looks like this:
it's time to press Save & Close and see how it turned out.
As funny as that looks, these codes are more than just gobbledygook to spackle your emails' content. Putting each tag to use is another blog entirely. In the meantime, these codes will broaden your understanding of your source's versatility. Try to add a few to your next email or newsletter, or read some of our previous coding blogs and try experimenting for yourself. Send us some comments for how you like to apply HTML and until next time, happy coding!

Posted in Tips & Resources

Related Blogs

Post a new comment

POST YOUR COMMENT

Comment With Facebook