Now that marketeers earn more and more control over ‘their’ content using all sorts of content management systems (CMS) going from simple blogs to complicated website maintenance tools, they also get confronted more often with the technical side of things. And although the solution builders are trying their best to shield you from all that using fancy what-you-see-is-what-you-get (WYSIWYG) editors, there will be a point where you will have to get your hands dirty and write some basic HTML code in order to make your content look exactly like you had it in mind.
So here it goes… the 5 minute guide to HTML for marketeers.
First things first: What is HTML?
HTML is short for HyperText Markup Language : it’s a language in which you can define the markup of your content on the web. It’s the basic language every page on every website is build upon. To take the test: go select ‘view source’ from your browser’s ‘view’ menu now, and you will see the HTML code of this page.
The nice thing of HTML is that it is human readable! It’s all just plain text! If you scroll down a bit in the source code of this page, you will find that all this text can be found in the code! The difference is however that the code contains more than just the visible text of the webpage: it also contains how this text should be displayed. This is done using tags. A tag tells something about how a piece of text should be rendered on the page. There will always be an opening tag, indicating the beginning of the piece of text, and a closing tag indicating the end of the piece of text, and they look like this : <my_tag>my piece of text</my_tag>, with <my_tag> being the opening tag, and </my_tag> being the closing tag (the ‘/’ character indicates that it’s a closing tag).
Of course, if you would just make up a name for a tag like I just did with the ‘my_tag’ tag, the browser wouldn’t know what it would have to do with it. So there are a whole lot of pre-defined tags to obtain specific layout effects.
some examples :
– The ‘b’ tag puts my text in bold. So if I would like to put some text in bold using HTML, I would have to type following code : <b>this is some text in bold</b>. On your page this would look like this : this is some text in bold
– the ‘i’ tag puts my text in italic, resulting in code like this : <i>this is some text in italic</i>. On your page this would look like this : this is some text in italic
Pretty neat, hey?
So what else is there? Well every HTML page has a specific structure which is defined by…tags, and looks like this:
<html>
<head>
</head>
<body>
</body>
</html>
That is what the code of an empty webpage would look like. The head tag is used to hold some additional information on your web page (for search engines etc.), and the body tag is used to mark the beginning and end of the visible content of the page. And around all of this, there is the html tag.
Interesting in this basic structure is that tags can be nested: you can put tags inside other tags, just like the ‘head’ and ‘body’ tags are between the opening and closing ‘html’ tags. Keep this in mind, we’ll be needing this further on. Also, when you’re editing just a part of a webpage (eg inside a content management system), you don’t need to include these tags, because they always encapsulate the whole page, and never just a part of it.
So go ahead: create your first webpage! Open up Notepad, copy/paste the basic structure from above and add some text between the <body> and </body> tags. Put parts of it in bold and other parts in italic, and save the document as myfirstpage.html (note that every HTML page should have the extention .html or .htm!). Just double-click it and your page will open in your web browser!
Some tags may require a bit of additional information. This is done by adding attributes to the opening tag. Example: the tag for making a text clickable to another page or website is the ‘a’ tag. So by what we learned before, we could make a text clickable by writing something like this: <a>this is a link</a>, right? But to what page will the browser take us after we clicked the link? In our code we didn’t give any information about that. So that’s why we should add this to our tag using the ‘href’ attribute like this: <a href=”http://www.luon.com”>this is a link</a>. Now, when we click the link, our browser will know it will have to redirect to the http://www.luon.com website (check it out: this is a link). So open up your webpage again in Notepad (or another text editor), and go add some links!
Some tags make an exception on the opening/closing tag rule: If there will never be any text between the opening and closing tags, the two tags are combined into one!
Line breaks for instance: by default, all text will apear without line breaks, even if you put a line break in the code!
So if you put this text into the body of your code:
this is line 1
this is line 2
this is line 3
It will show like this in your browser:
this is line 1this is line 2this is line 3
To avoid this, you have to use the ‘br’ tag to generate a break. But instead of using <br></br>, the opening and closing tags have been melted together into <br/>, because there will never be any text between the opening and the closing tags of a break.
So if we put this into our code:
this is line 1<br/>
this is line 2<br/>
this is line 3
we get the result we were looking for:
this is line 1
this is line 2
this is line 3
Two other commonly used tags having an integrated opening and closing tag are the ‘hr’ tag which generates a horizontal line across your webpage and which is always used like this : <hr />, and the ‘img’ tag for images: eg: <img src=”http://www.luon.com/images/lo_luon.gif” />
I promised to return to the issue of using tags inside other tags: Suppose you would like to make an image clickable so that if the user clicks on it, he would be directed to your website. How would you do this?
First our image:
<img src=”http://www.luon.com/images/lo_luon.gif” />
Second : to create a link, we need the ‘a’ tag like in the example above :
<a href=”http://www.luon.com”>this is a link</a>.
So to link the image instead of the ‘this is a link’ text, we would have to put the ‘a’ tag around the image tag like this:
<a href=”http://www.luon.com”><img src=”http://www.luon.com/images/lo_luon.gif” /></a>
That’s all there is to it!
This technique is also used to create tables. Tables can be handy if you would like to present structured data in columns and rows, but also to create for instance a 3 column layout for your webpage as is the case on this website.
You can build tables using three tags:
– the ‘table‘ tag marks the beginning and the end of a table
– the ‘tr‘ (table row) tag marks the beginning and the end of a table row
– the ‘td‘ (table data) tag marks the beginning and the end of a table cell holding data
Unless you use some advanced HTML, all rows should contain an equal number of cells!
an example:
<table>
<tr>
<td>this is cell 1 on row 1</td>
<td>this is cell 2 on row 1</td>
</tr>
<tr>
<td>this is cell 1 on row 2</td>
<td>this is cell 2 on row 2</td>
</tr>
</table>
would give you following result:
| this is cell 1 on row 1 |
this is cell 2 on row 1 |
| this is cell 1 on row 2 |
this is cell 2 on row 2 |
Now that you basically know how HTML works, all you have to do is get yourself familiar with the most commonly used tags. This is my list of need-to-know HTML tags and attributes for marketeers:
enjoy!
Two days after the Internet TV platform Joost went public, The Wall Street Journal publishes an article on two of the Internet’s pioneers, calling the technology powering the Internet ‘outdated’. 69 Year old Larry Roberts, project owner of ARPAnet (which was the very first version of the Internet), and Len Bosack, 55 and founder of the networking giant CISCO are both looking for a solution.
For many businesses, summer holidays are a period of slightly less stress and slightly more time to spare. Time to for example think about redesigning the old website. Traditionally, one would start with a good brainstorm, unleashing (hopefully) everybody’s wildest fantasies and ideas. But soon after, the difficult task of making these dreams reality will soon pop up and somebody will have to create a first sketch of the website.
Since a couple of months I’m systematically unsubscribing myself from email newsletters and subscribing to the 
the markITeer 
