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!
