Loading
submit to reddit

Bits & Bytes

Posts Tagged ‘browser’

A Simple JavaScript Code Example

By: Michael Hall | 07/25/2012 | Tags: , , , , , , , , | Posted in JavaScript | No Comments » |

To begin, create an HTML file and copy the code from our post A Basic HTML Page Template, and we will paste our JavaScript into it. I have used “SimpleJavascriptExample.html” as the name of my file, and I will paste add this code

<script type="text/javascript">
  document.write("Welcome to XoaX.net!");
</script>

inside the body tags so that the code in my file looks this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>XoaX.net</title>
</head>
<body>

<script type="text/javascript">
  document.write("Welcome to XoaX.net!");
</script>

</body>
</html>

Now, if we open the file with a browser, we will see the message “Welcome to XoaX.net!” printed out. This exact message could be written without JavaScript by just putting the message inside the body tags by itself. However, we are preparing the way to write more complex JavaScript examples.

In this example, we have one line of JavaScript code inside of the script tags. The script tags, along with the type designation “text/javascript,” tell the browser that the enclosed code is JavaScript. The single line of JavaScript code inside the tags tells the browser to call the write() function on the document object with the argument “Welcome to XoaX.net!”. The semicolon at the end of the line signals the end of the command.

A Basic HTML Page Template

By: Michael Hall | 05/27/2012 | Tags: , , , , , , , , , | Posted in HTML | 1 Comment » |

Below, is a template for a basic HTML page or, more truthfully, a basic XHTML page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>XoaX.net</title>
</head>
<body>

</body>
</html>

This is the template that we will use for coding HTML, Cascading Style Sheets (CSS), and Javascript. Between the head tags, we will put things like style specifications and function definitions: generally, things which are not directly visible. On the other hand, we will put the items that are visible between the body tags.

The code above can be copied and pasted, as is, into a blank text document that you can create with any text editor. Then save it out with a .html file extension. Once you save the file, it should open automatically with your default browser when you double-click the file. If it does not, you can right-click and use “Open with” to select a program to set as your default program for opening .html files.

Note that this is a blank HTML page. So, it will not display anything on the page until you add something to it. It is simply a template.

Tips on Making HTML Emails

By: Jenna Hall | 12/11/2010 | Tags: , , , | Posted in HTML | No Comments » |

For email campaigns, people usually like to send out HTML emails because they bring interest and color through their use of images and HTML coding. When done well, the emails look professional and get more click-throughs (clicking on links that you put into the email body text) than plain text emails.

However, for web developers who code HTML to display in IE 8, IE 7, Firefox, Chrome, etc., to take on coding  HTML emails is a painful, annoying, glitchy, and very old-school process. Why? Because there are over 20 mail clients generally in use today, all of which render an HTML email a little, or a lot, differently. And, most mail clients render HTML as if it were 2001. So, the important thing to remember is, code with a few caveats in mind and things will hopefully becomes more understandable and straightforward. The following list is by no means exhaustive, but I’m trying to put forth those fundamental things that helped me make consistently-rendered HTML emails.

A note on design. I admit I’m not a designer, but nevertheless this is important: use a lot of actual text in the HTML, and use the images to display pictures or design, but try to keep as much text as possible rendered as actual HTML text. If a user opens your email, but does not download the images, what will they see? If you put a lot of text into the email body, they will at least be able to read your information and then be more willing or interested to download the images, and then perhaps click through to on of your links. If your entire email is images, then unless the user clicks “download images” in their mail client, your email will greet them as a blank page which they will more likely than not just ignore and delete. And, add a background color that coordinates with the design so that if the user does not download your images, they will see a “lite” version that still has color and textual information.

The first thing to know about creating an HTML email: use tables, tables, and more tables. Years ago, web developers used tables for layout on web pages. Now, it’s a good idea to use divs and other generic containers for maximum control. However, for HTML emails, you will get more consistent renderings across all mail clients by using tables to lay out your images and text.

Second, there are quite a few tags and CSS styles that are not supported. Use as few as possible, and do not do anything too fancy, or some mail client will render the email horribly. For instance, do not use rowspan or colspan attributes in your tables–they are not supported in some clients. Do not specify a width on the <p> or <div> tag; some clients will just ignore it (like Outlook 2007)–use a <br/> tag to put hard breaks in your text.

Beware of Outlook 2007. It will not render anything in the same way as other mail clients. This is because, unlike older and some newer versions of Outlook, this version unfortunately uses the Microsoft Word engine to render the HTML. There are many things that are not supported. See Microsoft’s page on the Outlook 2007 rendering engine capabilities to see what tags and styles are supported, and to what extent.

Fourth, put all of your CSS inline. That means, put the style attribute into each tag, and don’t put styles in the head section of your HTML. Some campaign services, like Campaign Monitor, will inline all of your styles for you. To be on the safe side, inline all styles yourself.

Very importantly, use a campaign service like Campaign Monitor, MailChimp, or iContact. For a small fee, they will help you test your HTML email in many of the mail clients that are in use today, including mobile device clients. Also, they keep you on this side of the law, and usually the email they send out does not get put into the Junk folder of your recipients.

On every block element that you can, specify a height and width. This includes every image, table, tr, td, thead, and th element.

For your tables, specify cellpadding and cellspacing as zero.

For general layout, specify padding, border, and margin as zero or none on everything possible. If you need spacing, you can set it and it will usually work. What I’m referring to here is for all the elements that you do not want any spacing on. Some mail clients have spacing set on some elements by default.

One last note: on images, keep a few things in mind, such as: use the alt attribute on the <img> element, and use these CSS styles to get consistent rendering:

  • display: block;
  • border: none;
  • padding: 0px;
  • margin: 0px

And, a final note: test, test, and keep testing. It’s not good enough always to just use a service’s testing engine to see results. Send emails to yourself and your friends in different mail clients, as many as possible.

Yes, it is possible to create good HTML emails. Though it may seem mind-numbing and glitchy, the product you can get after following these rules is a beautiful, well-designed and good-acting HTML email that will get you more click-throughs.