HTML5

What Is HTML5?

HTML5 is the newest hyper text markup language for websites from the World Wide Web Consortium (W3C). The first draft was made public in 2008, but not much happened until 2011. In 2011, HTML5 was released and people started writing about it and using it, but the support in different browsers was still poor. Today all major browsers (Chrome, Safari, Firefox, Opera, IE) offer HTML5 support, therefore the newest HTML technology can be used at its best today.

The official logo of HTML5

HTML5 works with CSS3 and is still in development. W3C plans to release a stable version next year, but it still looks like this is a long shot. Since its release, HTML5 has been in continuous development, with the W3C adding more and more impressive features, therefore it seems quite unlikely that HTML5′s development will end soon, which is not necessarily a bad thing.

HTML5 is the successor of HTML 4.01, released for the first time in 1999. The internet has changed significantly since 1999 and it seemed like the creation of HTML5 was necessary. The new markup language was developed based on pre-set standards:

• New features should be based on HTML, CSS, DOM, and JavaScript.
• The need for external plugins (like Flash) needs to be reduced.
• Error handling should be easier than in previous versions.
• Scripting has to be replaced by more markup.
• HTML5 should be device-independent.
• The development process should be visible to the public.

What’s new?

HTML5 was created to make the coding process easier and more logical. You will see a bit later that many syntaxes are now deprecated and soon to be kicked out through the back door. The unique and impressive features HTML5 comes with are in the multimedia department. Many of the features it comes with have been created with the consideration that users should be able to run heavy content on low-powered devices. The syntactic features include the new There are a bunchload of new syntaxes added, but below I will name and describe the most important. The rest of them can always be found in W3C’s HTML5 section.

•  – this tag defines an article, a user comment or a post, so an independent item of content
•  – the aside tag marks content aside from the page content, which for example could be a lateral sidebar 
•  – you won’t need to manually name IDs for headers and footers, as now you have a pre-defined tag for them
•  – the navigation can now be placed in the markup in between the navtags, which will automatically make your lists act like navigation
•  – this is another important new syntax, as it can define any kind of sections in your document. It works pretty much like a div which separates different sections.
• ,  – these two obviously mark sound or video content, which will now be easier to run by devices.
•  – this new tag defines a container for interactive content (plugin) or external application – the canvas tag is quite exciting, as it allows drawing graphics via scripting (mostly JavaScript, but some others can be employed as well)

Start HTML5:

Unlike say C++, the core concepts of HTML5 are simple. The difficulty for beginners is not HTML's complexity but that it usually comes cloaked in an all but impenetrable fog of jargon, acronyms and just plain bad writing.

Most think of computers as logical – and indeed they are perfectly logical to other computers. The problem is that computer logic is different from human logic. Unfortunately many of those that do understand computer logic are also different – nice enough I'm sure, and no doubt well meaning – but different.

That difference is no small part of what makes them good at computers – but bad at explaining computers to the rest of us. They just don't get what we don't get.

A guy from some technical support desk once told me I should "migrate" a site....migrate? It's not a Whooping Crane. I had no idea what this fool was talking about. Eventually I figured out that he wanted me to change servers; that I should transfer the site to a differenthosting service.

I'm no genius, but I graduated in good standing from a respected university. I've owned I don't know how many computers over the years and I've designed a lot of web sites. I am not new at this, but still some twit in dirty glasses can make me feel like an idiot. Worse yet, "migrating" the site did in fact fix the problem.

Then there are the error messages: "Please ask the system admin to check their resolv.conf and their dns trust relationship. Ignore any messages of success, this can only result in failure!" *

...what? Aren't I the system admin? I had never heard of a "resolv.conf" any more than I had a "dns trust relationship". Besides, even if I had checked the resolv.conf what trust relationship they might once have enjoyed was clearly long gone.

You too will have such frustrations. When you do, remember that it's not you; it's them – from the twit in dirty glasses all the way up to Bill Gates.** It's their fault, not yours. Even when you do do something really dumb (and you will) blame them. It may be wrong, but copping that attitude has carried me through many, many a rough patch.

So steel yourself against the forces of chaos and confusion. Never lose faith that there will come a time when order and logic shine like the sun on a clear new day.

What is HTML5  (again):

The first web browser, Mosaic, was introduced in 1993. A year later Netscape, based on Mosaic, was introduced and the net began to become popular. HTMLwas used in both browsers, but there was no "standard" HTML until the introduction of HTML 2.0.

HTML 2.0 was first published in 1995.* HTML 3.0 was published two years later and 4.01 two years after that. HTML 4.01 has been the work horse of the net ever since.

Netscape wikipedia

The first "working draft" of HTML5 came out in January of 2008 and it already has surprisingly broad browser support. However HTML5 is not yet fully implemented and won't be for some years yet. There are any number of planning committees that have plans to make it a "Recommendation", but such plans are still in the planning phase – and don't plan on that changing anytime soon. **

Two groups, the W3C and the WHATWG, are in charge of developing HTML5. Why two groups? "The WHATWG was formed in response to the slow development of web standards monitored by the W3C." wikipedia – In other words they got in a fight and parted ways.

They say they have since kissed and made up. Both groups agree that it's going to take years to fully implement HTML5, though it will be in wide use long before then – assuming that, like eColi, they don't divide and multiply again.

Many on the boards of W3C and WHATWG work for competing browser companies. Inevitably conflicts of interest (for example MS's brutal attempt in the late 1990s to control it all - wikipedia), have provoked problems, but I will admit – albeit begrudgingly, that on the whole they have done a reasonably good job.

In many ways HTML5 is not all that different that 4.01. Certain tags, such as the  tag, that were "deprecated" (but worked) in HTML 4.01, don't work in HTML5. There are a number of other odds and ends that have been changed, but they tidy up old messes rather than introduce fundamental changes.

Fundamental changes are coming with the development of APIs that will run in HTML5 – exciting and powerful new tools that will take the internet places we can't begin to imagine. Also new elements such as theandhave been introduced which will help search engines analyze web pages better.

The internet will absorb television the way it has telephone technology. Now if you want to add video to your page you either have to add a complicated script to your page, embed a YouTube video or have to open it in a separate application such as Windows Media Player. The former is not easy and the latter two lack professional polish. HTML5's new  tag will solve that problem. At the moment no one can agree on what video format to use. Eventually they will work that out and when they do making and distributing television programs will be within the reach of everyone who can make videos and write HTML.

If you want to see an example of what will be first sign up for YouTube's HTML5 betahttp://www.youtube.com/html5, select "Join the HTML5 Trial". Then close that window, clickhttp://www.youtube.com/embed/3NjXs_nXB5U and listen to Howlin Wolf ask "How Many More Years?" In theory there should be no problem but it is still in beta so who knows. ***

With the introduction of IE9 even Microsoft is getting on board with most of HTML's newer elements. Chrome, Firefox, Opera and Safari have complied to most HTML5 standards for some time.

HTML5 is not just the future of web design, it's the present.

The doctype declaration:

Take a look at this page's "Source Code". The source code is the HTML that generates a page.

On a PC in Chrome or FireFox right click anywhere on the page (except the ads) and select "View page source", or even easier just click "Ctrl-U". In IE "Ctrl-U" doesn't work; you have to right click the page and select "View Source". Select it all, copy it and paste it into Notepad or some text editor. If you have any problems or are in a different browser search "source code" in help.

At the very top of the page you will see the doctype declaration:

doctype html

Like any language, HTML5 has a grammar and a vocabulary.

Grammar

!DOCTYPE html  goes at the top of every HTML5 page.

Vocabulary

The HTML5 word  means !DOCTYPE html "this page is written in HTML5" as opposed to, say HTML 4.01.

Why, you ask, don't they just write  or even a zesty <!HTML5>? I have absolutely no idea. Still it's better than what they had before. Here's an example of one common type of XHTML:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

Hopefully the doctype declaration in HTML5 won't turn into the crazy mess it did with XHTML and previous versions of HTML. Those in charge of such things say it won't, but time will tell.

So now you learned three things:

1. How to view the source code of a page, an important tool.
2. You know one word in HTML5:!DOCTYPE html  = "HTML5"
3. and one grammar rule:!DOCTYPE html  goes at the top of every page.

The html tag:

Now we go to our first "tag". *

With a couple of important exceptions (which we will get into later) all tags have to be opened and closed. Take a look at the code to the right. The opening tag is:<html>. The closing tag is </html> – the difference being the "/" in the closing tag.

Tags are containers. The html tag indicates that everything between  and

 is code that conforms to the standards of the type of HTML dictated by the doctype declaration – in this case HTML5.

Everything between the opening tag and closing tag are inside that tag and therefore have the attributes that tag gives them. Those attributes can be modified. For example in this site I have changed the default color (black) for the </html>tag to dark blue.

Inside the  tag are two other important tags:

the  tag

the  tag

First let's take a look at the  tag.

The head tag:

Web sites have two audiences:

The first is human

The other "spiders", "bots" or "web crawlers"

While the contents of the head tag displays little to human viewers it's important to the bots. Search engines have crawlers (e.g. Google's is called "Googlebot") that constantly surf the net following links from one site to another collecting and indexing everything they find. Google has an algorithm that then decides which pages are most relevant to search terms.

Web sites that read well to spiders are most likely to appear high in search engine results. This is what is called SEO or Search Engine Optimization. Books – big thick books – have been written on SEO. We don't have the time to go into it in great depth, but I will repeatedly touch on it as you proceed through the tutorial.

The single most important thing you can do for SEO is write a good title tag. My title tag for this page is:. It doesn't appear on the page itself but does show in the bar across the top of the browser and in the button in the taskbar, usually found at the bottom of the monitor on a PC.

The title also appears in Google's search results. For example:

Try to make it keyword heavy, but don't forget that people will also be reading it. Ideally the title should be less than 64 characters in length.

The second most important thing you can do is be realistic. At this point it's all but impossible to get high ranking on popular search words. Jimmy's Flower Shop isn't going to show up when someone searches "Flowers". However google "Jimmy's Flower Shop" or "Ogden Florist" and up comes www.jimmysflowers.com. If some guy's wife in Ogden is really ticked off, Jimmy just made a sale.

Jimmy's web site makes Jimmy money in part because whoever made Jimmy's site took the time to carefully chose the proper keywords and to write a good title. It is astonishing how few web designers take these two simple but crucial steps.

Meta tags also go in the head tag. Two in particular are important; both of which you can see in this page's source code.

The charset meta tag:

The description meta tag:

.

The former tells the browser what type of letters the page is written in. If your web site is in a language other than English be careful to use the correct charset. If your page is in plain old vanilla English just copy and paste just above the title*, and with any luck you'll never have to think about it again.

The latter sometimes shows up in search results and it can help in SEO.

There is also a "keyword" meta tag originally created to help in SEO but has become essentially worthless because so many web designers cheated. In the late '90s searching "dentist in Denver" might lead you to "porno in Portland". If you weren't careful you never would get your teeth fixed.

The body tag:

The body tag contains the code that generates what is seen in a browser.

This is what you see on your computer screen when you go to a web page, and most of the work you do is on code found between the opening and closing body tag.

In other words, now the fun begins – as does the aggravation, so I want to take a moment to help you get started right.

I have found that in general there are two kinds of web designers. Those with a background in computer science and those interested in design.

It's difficult to imagine two disciplines less alike, yet good web design takes some expertise in both. That will come in time – especially if you are careful to follow one simple, but crucial rule: Keep it simple!

That applies to both writing code and design. Indeed writing good clean simple code tends to result in good clean simple design* and visa versa.

Convoluted, messy code is difficult to debug and tweak – and even under the best of circumstances one spends a lot of time doing both.

There are a lot of wonderful things one can do on web pages. It's easy to get into the "wouldn't that be cool!" mode. I do it all the time – and yes, it might be very cool, but especially as a beginner it will probably drive you nuts getting it to work. That said, it's a gas when it finally does!

Remember, tags are containers. Sometimes they contain text, sometimes images. Often they contain more tags that in turn, contain text, images and more tags. (e.g. This sentence is inside five different tags.) Even doing everything you can to keep it simple, things can get complicated in a hurry.

The heading Tag:

The internet was originally used in universities and initially the style of anything published on the net tended to look more like an outline rather than an article one would read in a magazine.

Titles were placed in 

 tags which displayed larger on the page. Subtitles went in 

 through 

 tags and lesser tags shrank both in font size and implicit relative importance.

h1 tag

h2 tag

h3 tag

h4 tag

h5 tag

h6 tag

For years I rarely used heading tags. Now I use them all the time. First and foremost Google likes them – and what Google wants Google gets.

Google rules. It's just that simple. As a web site designer your goal is to get people on your site and keep them there. Google gets them there.

A valid argument can be made that no private institution should wield that much power – but say what you will, Google's stated goal is to "return highly relevant results for every query" and they deliver. I use them all the time and you probably do too.

Google ranks "relevancy" in a number of ways. Heading tags are one of a number of things taken into consideration when Google indexes your site. Google assumes the contents of 

 tags are more important than 

 tags and so on.

So, you ask, won't filling a page with 

 tags make your page rank higher? No! Such tricks are called "Spamdexing". Don't even try. Google doesn't like it. You will get caught and penalized. Let's be real. If you or I were able to outsmart the very bright people that work at Google – the highest and holiest in all Geekdom – I wouldn't be writing a beginner's tutorial and you wouldn't be taking it.

Google wants relevant content. Give it to them. As you design your site put the most important stuff in an tag. Less important information goes in etc. heading tags. Do this and you will soon not only improve your ranking but you'll find it helps you design better sites. Visitors quickly find what they are looking for and having priorities clearly defined both in your head and in your code makes your work easier.

Remember that heading tags are just one criteria Google follows. What's in the title tag is most important and there are other factors that we will get into later, but don't underestimate how complicated websites can become. Heading tags can help keep things simple and orderly.

The paragraph tag:

This sentence is the contents of a  tag.

So is this,

...and this.

The  tag is probably the handiest and most commonly used of all tags.

While it's been around since HTML was introduced, many of you who have worked in web design may not have ever used it. This is because it replaces the previously ubiquitous  tag that was "deprecated" in HTML4, but still worked. It does not work in HTML5.

Web designers who haven't kept up with the development of HTML standards (tut-tut) will find this to be the biggest difference between HTML5 and earlier versions of HTML.

Take a look at this page's source code. *

There you will see <p&gt;. < displays the "less than" symbol and > the "greater than" symbol. If I didn't use them the browser would think  was an actual tag.

These symbols are part of the Universal Character Set. While it's good to know it exists, if at all possible avoid this stuff like the plague – especially as a beginner. It's just awful – geek jargon on steroids.

No doubt you saw all kinds of things in the source code that made no sense. Don't worry; it will only get worse – at least for a while and then slowly but surely it will start coming together.

Now you are ready to make your first page. Take a deep breath and

...copy this:

    My first webpage

  

...and paste it into a text editor.**

The code above is indented solely to make it more legible and easier to debug. Indenting does not effect the functioning of the elements in any way. Get in the habit of indenting. It may not seem like it now, but you will save yourself a lot of trouble down the line.

While there are any number of good (even free) text editors available, for now I recommend using Notepad on Windows machines and Text Wrangler on Macs **. Do not use MS Word! Word is a "word processor" that adds formatting to the code.

Save the file to your desktop as my-first-webpage.html. On a PC go to your desktop and double click my-first-webpage.html which, in a perfect world, will open in your favorite browser.

Didn't work?

Did you use MS Word?

Don't use Word or a word processor, use a text editor.

Did you save it as my-first-webpage.html?

Text editors save text files as .txt unless explicitly instructed otherwise. Go back to your text editor and click "File", "Save As" and type my-first-webpage.html. I don't know how to do this on a Mac but it can't be all that different from a PC.

Did you save it to your desktop?

Actually you can save it anywhere you want as long as you can find it later.

Still doesn't work?

Welcome to my world.

The thing not to do is get frustrated. Take a break or better yet, sleep on it. I can't tell you how many times I have woken up fresh and resolved issues in a matter of minutes that I spent hours messing with the night before.

Assuming it did work, you have successfully made your first page. Now change the contents of the  tag, add a new  and some heading tags. Remember that each time you make a change you need to save the file and refresh the browser.

You now know a couple of "words" in HTML5. Now you need to learn an important grammar rule:

• Tags can be nested, however they must be opened and closed in order.

Example 1:    Cool:

  Correct

Example 2:

  

Cool:

    Correct

  

Example 3:

  

Not Cool:

  Incorrect

Example 4:

  

Not Cool:

  Incorrect

The 

 tag (which we will get into later) can be closed either before you open the  tag (Example 1), or after the  tag is closed (Example 2), but not while the  tag is open (Example 3) nor after the  tag has been closed (Example 4).

Take a moment to make sure you understand nesting. Remember that a tag is a container that often contains other tags. Like a Russian doll, everything opens and closes in order. Unfortunately, unlike Russian dolls, it's not always easy to keep track of what goes where, but with practice you'll get the hang of it.

The ul and ol tag:

There are three types of lists. The first two are bulleted and numbered lists. Needless to say, those on high who name such things couldn't simply call them "Bulleted" or "Numbered", but "Unordered" and "Ordered". Whatever – I guess it could be worse.

UL – Unordered lists:

Example:

• Apples
• Oranges
• Bananas

UL Code:

  

List item 1

  

List item 2

OL – Ordered Lists:

Example:

1. Breakfast
2. Lunch
3. Dinner

OL Code:

  

List item 1

  

List item 2

Lists can be "nested" or put inside one another.

• Fruit
  • Oranges
  • Bananas
• Vegetables:
  1. Peas
  2. Corn

Be careful to close tags in the reverse order they were opened, and with lists it can get confusing. The trick is to indent your code. Take a look at this page's source code and you will see what I mean.

The dl list Tag:

DL – Definition List:

Example:

Wheeple

To whistle feebly

Tyrotoxism

To be poisoned by cheese

DL Code:

 

Term 1

 

Definition of term 1

Term 2

Definition of term 2

The definition list is a bit more complicated than the ul or ol tags. Rather than having bullets or numbers it indents like this:

DT

The term being "defined"

DD

The "definition" of the term

It's called a "definition list", but it's rather handy for any number of things.

John Doe

123 Main St.

It's a good to organize FAQ pages.

Question?

Answer

Remember, visitors tend to first scan pages and then, if interested, go on to read them. Lists are one way to quickly tell your audience whether your content is relevant to what they want. If you will; "does it scratch their itch?" It may not (indeed it often doesn't), but if it does that needs to be obvious at a glance!

So let's make your second page. You will find what to copy in this page's source code.

Open up a new page in Notepad or whatever text editor you are using and paste what you just copied into the page and save it as my-second-webpage.html wherever you saved my-first-webpage.html (probably your desktop).

Try changing the code to include a nested list. Move some things around and see what happens. Always remember to close tags in the order they are opened and when you make changes be sure to save the file before you open it in your browser.

Next we are going to link your two pages to each other.

The a or anchor Tag:

Hyperlinks, or links, are how you move around the web. An a or anchor tag is how you make hyperlinks in HTML.

The a or anchor tag is an elegantly simple and powerful tool – with an utterly counterintuitive name.

No doubt someone somewhere along the line had some reason to name it "anchor" but I can't imagine why. Dictionary.com defines anchor as a "device for holding fast or checking motion". The anchor tag does anything but.

While he could have done with a dictionary, whoever thought it up was brilliant. He made the internet possible.

When you click on a link your computer (the client) asks another computer (the server) to send it a file. When all is said and done that's all that is really going on. How all that works is complicated, but what happens – what is actually going on – is not.

Always keep in mind the fact that everything on the net is stored as files on computers connected to the internet. There are "local" files, or files on your computer, and then there are billions of files on servers all over the planet.

For you to get to this page you clicked a link on some other page and sent out a request to go to a computer (my server) named "html-5-tutorial.com" * to send you the file named "a-tag.htm".

Your computer knows that the file "a-tag.htm" is a webpage because it has an ".htm" extension (.html works the same) and opens it in your browser for your viewing pleasure.

The code for the link (a-tag) to this page looks like this:

a tag

It includes the unique URL** of this page:

http://www.html-5-tutorial.com/a-tag.htm

Which is what you see in the address bar at the top of this page.

As you are not changing domains (ie. changing servers) you can shorten the link to just include the file name***:

a tag

If no file name is included in the URL it is assumed to be the index or home page.

XYZ

Any text or image (we'll get into that later), can go where I wrote "XYZ". The "XYZ" – what is inside the a tag – has no effect on where the link will take you. It does however tell visitors where they will go if they click the link.

It also affects SEO as search engines want pertinent content. If you are selling doohickies make a page named "doohickies.htm" and links that look like:

We sell doohickies!

Now we are going to put your newfound skills into action.

At this point you have made two pages: my-first-webpage.html and my-second-webpage.html. Ideally you have saved them both in same place and somewhere you will be able to find them again. If not, you can find them in this page's source code.

Go to your desktop and create a folder named "my-webpages" then move both of your webpages to that folder.

Now open up my-first-webpage.html in a text editor (not MS Word) and after My first webpage

 add:

My Second Webpage

While you are at it change My first webpage

 to 

My first webpage.

Save my-first-webpage.html and open it in your browser. To do that on a PC go to your desktop, click on the folder "my-webpages" and click on the file "my-first-webpage.html". Click on the link "My Second Webpage" and it should open in your browser.

Now open "my-second-webpage.html" and add a link to "my-first-webpage.html". Open (or refresh) my-second-webpage.html in your browser and now you can toggle back and forth between your two pages. 

I have added a bit of code: target="_blank" to have the page open in a separate tab. Close that tab to get back here.

If you are having problems make sure you saved them as .html (not .txt or something else), make sure they are in the same folder and last but not least use a text editor – NOT MS Word.

You will notice I have all the links on this site in an unordered list. As an exercise change your links to be in

tags rather than tags as they are right now.

Finally make a third page with links to the previous two pages. Add links from all three pages to all three andVoila!, you have the beginnings of your first web site. Basic they may be, but you are definitely on your way!

The table and related tags:

The table tag displays information in rows and columns.

I have spent more hours than I care to think about messing with tables. While not hard to understand, it can be a bit tricky to getting everything opening and closing in the right order.

The following code:


 
   Row 1 - Col 1

  Row 1 - Col 2

 
   Row 2 - Col 1
  Row 2 - Col 2

Produces a table that looks like:

Row 1 - Col 1	Row 1 - Col 2
Row 2 - Col 1	Row 2 - Col 2

Inside the   tag are   or table row tags which in turn contain  or table cell tags.

Data goes in the  cell. That data can be text, other tags or whatever. Remember that first comes  , then  , then , then and only then, data.

Copy the table above and paste it into one of the pages you made before. If you skipped that lesson (tut-tut) take a look at http://www.html-5-tutorial.com/p-tag.htm.

Below I added some CSS and the border attribute (border="1") to better display the rows and columns.

Row 1 - Col 1	Row 1 - Col 2
Row 2 - Col 1	Row 2 - Col 2

Here's the rub. There has to be the same number of cells in each row unless you indicate a table cell spans multiple columns and/or rows.

Multiple columns:

Row 1 - Col 1 & Col 2

 
   Row 2 - Col 1
  Row 2 - Col 2

Row 1 - Col 1 & Col 2
Row 2 - Col 1	Row 2 - Col 2

Multiple rows:
   Row 1 - Col 1

  Row 1 & Row 2 - Col 2

 
   Row 2 - Col 1

Row 1 - Col 1	Row 1 & Row 2 - Col 2
Row 2 - Col 1

Or a combination of both:
   Row 1 - Col 1

  Row 1 - Col 2
  Row 1 - Col 3
  Row 1, 2, 3 & 4 - Col 4

 
   Row 2 - Col 1
  Row 2, 3 & 4 - Col 2 & 3

 
   Row 3 - Col 1

 
   Row 4 - Col 1

 
   Row 5 - Col 1 & 2
  Row 5 - Col 3 & 4

   Row 6 - Col 1, 2, 3 & 4

Row 1 - Col 1	Row 1 - Col 2	Row 1 - Col 3	Row 1, 2, 3 & 4 - Col 4
Row 2 - Col 1	Row 2, 3 & 4 - Col 2 & 3
Row 3 - Col 1
Row 4 - Col 1
Row 5 - Col 1 & 2		Row 5 - Col 3 & 4
Row 6 - Col 1, 2, 3 & 4

As I said, tables can get tricky – and I'm not done. In addition to the   and  tags there are:

•  - Table header
•  - Column Group
•  - Table head
•  - Table body
•  - Table foot

The day may come when you want to make a table with all the bells and whistles so it's good to know they exist, but as a beginner you don't need them.

Also, you should know that in HTML 4.01 tables could have various attributes. The opening table tag looked something like this:

cellpadding="5" cellspacing="5" border="1"

>

In HTML5 most attributes (eg. cellpadding="5") have been eliminated. Use CSS instead. This of course assumes you know CSS (which you probably don't) but take my word for it, web design is better off without them. I'll introduce CSS in the div tag page.

As I said above, getting tables right can be a pain in the neck. One attribute that was going to be eliminated but wasn't is the border attribute. I often add the border attribute ( ) to get the table debugged and then remove it ( ) when ready to publish. Normally I use CSS to add borders to tables as I don't like the look of the border that the border attribute gives, but I use them on this page so you can see it work.

Take some time and play with tables. Copy and paste the tables above into your webpage, then edit them and see what happens.

As web pages are usually designed in columns and rows it's tempting to use tables for a page's layout. Don't – that's not their purpose.

1. Spiders don't always read tables well so they can negatively affect SEO.
2. Tables need to be completely downloaded before they are displayed and that can leave visitors staring at a blank screen – the kiss of death.
3. A big complicated table can be a nightmare to debug, especially if you haven't looked at it for a while.

Tables are a great way to lay data out. People are used to seeing information in rows and columns. They are an essential and powerful tool – but don't try to do too much. Keep it simple.

The strong and b Elements:

Here I introduce semantic HTML – a major advancement over HTML 4.01.

Take the following:

This bold text is in strong tags.

This bold text is in b tags.

This bold text is in strong tags.

This bold text is in b tags.

They both make text bold. In terms of presentation they are identical. So why have two elements that do the same thing?

They may look the same to humans, but the web crawlers or bots – that crucial second audience – see something quite different. When a search engine spiders and analyzes a page, text in  tags is considered important. Text in  tags is not. *

Say you are making a page on "Digitigradient". I can't imagine why you would want to, but if you did you might include the following:

Digitigradient

verb – To walk on your toes like a dog or cat.

By putting "Digitigradient" is in  tags you are telling the crawlers that "Digitigradient" is important to themeaning of the page while "verb", in  tags, is not. Placing "Digitigradient" in strong tags gives it "strong"semantic weight.

The dictionary defines semantics as "the study of meaning". On the web semantics puts meaning into HTML – meaning search engines can use to evaluate a page's SEO.

Semantics is not new to HTML5. Web designers have always had a degree of control of what the bots did and didn't judge significant. For example, anything in 

 tags has been considered more important than something in say 

 tags, but HTML5 takes semantics to a whole new level.

One of the biggest changes in HTML5 over previous versions is the addition of the new "section" elements:header, nav, article, footer, aside and section. To site visitors they work the same as 

 tags (which we study next, followed by the section elements), but, like , 

 is semantically neutral. The new section elements give meaning to their content.

Unfortunately just what that meaning is not all that clear – at least not yet. I think we can assume something in the header carries more weight than something in the footer, but I have yet to find any rule where that is stated explicitly. **

My guess is that with time, usage will establish what means what. Incorporating semantics into HTML5 is a good idea – an idea that needs to mature and develop, but a very good idea nonetheless.

There is no need to wait to take advantage of HTML5 semantics, even if it is a bit vague. You can use thestrong and b elements (in strong tags) as I suggest and adopting the new section elements now will make your sites forward compatible for years to come. With one small caveat (see below ***), the new section elements are compatible with all modern browsers.

Welcome to the murky waters of web semantics. Keep in mind that you are learning HTML5 while it is still in the design phase – and now is the time to do so, but any software "in beta" has kinks in the works.

At any rate, you can make text bold with all the confidence in the world.

The div tag:

All the elements we have looked at so far have had a specific purpose. The  tag is for paragraphs, 

 through 

 set priorities, the  tag is for links, etc. The

 tag, as W3C puts it, is a "generic container for flow content that by itself does not represent anything".

It sounds useless – not to mention dull, but it has developed into a real workhorse. The 

 tag has been the principle tool used to put pages together.

Pages have parts – sections that serve particular functions – and as a rule those parts have been set with 

 tags. On the top of most pages is a header. Likewise most pages have a nav div and on the bottom a footer. These are divs that tend stay the same throughout a website. Then there are divs (or a div) with content that is unique to each page.

In HTML5 there is a 

 element, as well as a 

, 

 and a couple other new elements that replace these div tags.

Why study an element whose primary function has been superseded by new elements?

• First of all in terms of layout the new elements work essentially the same as divs. What you learn here is applicable to the new elements.
• Secondly the 
   tag is still a handy tool. It can do a lot more than just page layout.
• Third, as you surf the web and view the source codes of other sites you will rarely see these new tags in use – at least for the time being. With the introduction of IE9 they now have broad browser support. They have worked in Chrome and FireFox for years. However at this point few web designers know they exist, much less use them. My guess is that div tags will be used for page layout for years to come. I hope I'm wrong – the new elements really are a good idea – but at least you'll know better.

Getting back to the 

 tag...

All elements have various properties and all properties have default values. Those default values can be reset by the web designer. How that is done is through the use of Cascading Style Sheets or CSS.

While a full understanding of CSS is beyond the scope of a beginning HTML tutorial, to learn basic HTML you need to know what CSS is and have a general idea of how it works.

Just as adjectives modify nouns, "styles" modify elements.

Take the sentence: "It was a dark and stormy night".

The noun night is modified by two adjectives, dark and stormy.

Were this CSS one would say that night has had its property for illumination set to dark and weather set tostormy. Each property and its corresponding value make a "style". Multiple styles can be grouped as a set, named, and saved as a "class".

The following:	..produces:
This div tag contains this div tag.

This div tag

contains this div tag

In 

     and 

 each div tag's styles are "modified" according to the styles I set on lines 21 through 24 of the source code. Amongst other things in the outer div I reset the style for the background color (the default value of which is white) to a light grey and darker grey in the inner div. Both have a black border (default is none), but of different thicknesses. There are many styles that can be set to all kinds of different options.

Hopefully you aren't completely lost. Keep in mind that while CSS is a powerful tool, it isn't easy. To make matters worse different browsers do not handle all elements or CSS styles the same way. Over the years Microsoft's Internet Explorer has been particularly problematic.

The good news is that it looks like IE9 is better behaved than previous versions. Better yet, IE usage has dropped from 85% in 2002 to less than 25% now**. FireFox and Chrome have taken the lion's share of the market.*** They're better browsers. With Microsoft no longer the big bully on the block cross-browsercompatibility issues should become less problematic. One can only hope.

Add an HTML5 counter

A counter lets you track any action in a creative, for example, how many times a user clicked a button or moused over an object. You must code counters using the DoubleClick API.

To add an HTML5 counter:

1. Create a button element in your creative using a
   tag. Create the element in the HTML file and style it in the CSS file. Then assign the ID tab-one to your element.
   

   Sample object,
   

   tag in your HTML file:

   
   

   TAB ONE

   Sample styling, ID selector in your CSS file:

   #tab-one {
       position: absolute;
       width: 75px;
       height: 20px;
       top: 10px;
       left: 25px;
       cursor: pointer;
   }

2. Add counter functionality to the JavaScript by calling this method:Enabler.counter(eventId:String, opt_isCumulative:Boolean);
   • eventId is the counter's name in DoubleClick Studio. You can rename this in the DoubleClick Studio Web UI or in DFA Trafficking to change what shows up in the final report.
   • isCumulative determines whether this counter can fire multiple times for a single user.
     • If this is set to false (the default), the counter tracks a maximum of one count per impression. This is called a capped counter.
     • If this is set to true, the counter tallies every time the counter is called.  This is called an uncapped counter.

Code snippet

function tabOneClickHandler(e) {
    Enabler.counter(‘Click on Tab 1’);
}
document.getElementById(‘tab-one’).addEventListener(‘click’,
tabOneClickHandler, false);

HTML 5 nav Tag

The HTML 

 tag is used for declaring a navigational section of the HTML document.

Websites typically have sections dedicated to navigational links - links that enable the user to navigate the site. These links should be placed inside a 

 tag.

Note that links in the footer section should be marked up inside footer tags as opposed to nav tags.

The nav tag was introduced in HTML 5.

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

Attribute	Description
None

Global Attributes

The following attributes are standard across all HTML 5 tags.

accesskey	hidden	itemtype
class	id	lang
contenteditable	inert	spellcheck
contextmenu	itemid	style
dir	itemprop	tabindex
draggable	itemref	title
dropzone	itemscope	translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Here are the standard HTML 5 event handler content attributes.

onabort	onerror*	onmousewheel
onblur*	onfocus*	onpause
oncanplay	onformchange	onplay
oncanplaythrough	onforminput	onplaying
onchange	oninput	onprogress
onclick	oninvalid	onratechange
oncontextmenu	onkeydown	onreadystatechange
ondblclick	onkeypress	onscroll
ondrag	onkeyup	onseeked
ondragend	onload*	onseeking
ondragenter	onloadeddata	onselect
ondragleave	onloadedmetadata	onshow
ondragover	onloadstart	onstalled
ondragstart	onmousedown	onsubmit
ondrop	onmousemove	onsuspend
ondurationchange	onmouseout	ontimeupdate
onemptied	onmouseover	onvolumechange
onended	onmouseup	onwaiting

HTML 5 article Tag:

The HTML 

 tag is used to represent an article. More specifically, the content within the 

 tag is independent from the other content on the site (even though it could be related). By "independent" I mean that its contents could stand alone, for example in syndication.

Examples of article content could include a forum post, a newspaper article, a blog entry, or a user-submitted comment.

The 

 tag was introduced in HTML 5.

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

Attribute	Description
None

Global Attributes

The following attributes are standard across all HTML 5 tags.

accesskey	hidden	itemtype
class	id	lang
contenteditable	inert	spellcheck
contextmenu	itemid	style
dir	itemprop	tabindex
draggable	itemref	title
dropzone	itemscope	translate

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Here are the standard HTML 5 event handler content attributes.

onabort	onerror*	onmousewheel
onblur*	onfocus*	onpause
oncanplay	onformchange	onplay
oncanplaythrough	onforminput	onplaying
onchange	oninput	onprogress
onclick	oninvalid	onratechange
oncontextmenu	onkeydown	onreadystatechange
ondblclick	onkeypress	onscroll
ondrag	onkeyup	onseeked
ondragend	onload*	onseeking
ondragenter	onloadeddata	onselect
ondragleave	onloadedmetadata	onshow
ondragover	onloadstart	onstalled
ondragstart	onmousedown	onsubmit
ondrop	onmousemove	onsuspend
ondurationchange	onmouseout	ontimeupdate
onemptied	onmouseover	onvolumechange
onended	onmouseup	onwaiting

    Footer Element:

The footer element is the last of what I consider the essential section elements.

Most pages should have header, nav, article and footer tags. While not required anymore than a house is required to have a bedroom or kitchen, but it wouldn't be much of a house without them. Likewise these four elements serve distinct functions the vast majority of web pages need filled.

The header, nav and footer tend to stay the same on every page. Once they are set you can copy and paste them into new pages then add the article. Keeping a consistent look throughout a site means visitors can focus on what brought them there in the first place.

The footer can be used to do any number of things that include (but are not limited to) the following:

Use it to complete what was left undone in the header and nav.

A well made header and nav section should be simple and straightforward, but simplicity can come at the cost of details – often important details. "Hana's Hotel" might be enough for a header as long as the footer has "Hana's Holiday Hotel. Your home away from home in the heart of Honolulu".

Often larger sites have links in the footer that don't fit in the nav or if they did fit would distract visitors from more important pages.

Unlike books, websites are seldom read from beginning to end.

Visitors often land on pages other than the home page and proceed through a site in no particular order. This means that in addition to text (that on a web page would go in the article tag) each page has to have the equivalent of a book's title page (the header), a table of contents (the nav section), and a footer that does pretty much everything else.

Visitors like to know not just what a site is about but who is behind it. It's a question of trust.

The web, like any media, is a mode of communication. A website is nothing more than you (or whoever hired you) saying something to anyone who wants to listen. The footer should include information on who "you" are – especially when money might change hands. People want to know all they can about who they are giving their money to.

Include enough information in the footer so visitors have at least a general idea of what's going on.

Many visitors to a site know absolutely nothing about the subject at hand. I once saw a beautiful Bed & Breakfast online that didn't have their location in the footer. It could as easily been in the mountains of New Zealand or Scotland as it could the Rocky Mountains of North America. No one is going to waste their time searching for information that should have been clear from the beginning.

What is in the footer effects SEO.

Information that isn't readily available to people, isn't readily available to the bots. Googlebot can't properly index the Bed & Breakfast site mentioned above without a location.

Writing a good title is the most important thing you can do for SEO but a good title alone is not enough. The contents of the page, including content in the footer, should have information related to what's in the title and description meta tag.

People choose to go to a particular site for a reason and if that site doesn't resolve their issue – doesn't, if you will, "scratch their itch" – they can easily go somewhere else. A good footer can do a lot towards keeping visitors from looking for greener pastures.

Before we go on to the next page let's update the template. Open your copy of new-template-article.htm and try to add the footer. The footer I have in mind is just like the header except that it goes on the bottom of the page. Try to add the CSS as well.

You can see what I did in new-template-footer.htm. There is nothing saying you have to do the same. In fact if you asked ten experienced web designers to write new-template-footer.htm from scratch, odds are that you would see ten different source codes. In particular the CSS would be different. There is no "right" way – which I personally think that is one of the great strengths of HTML and CSS.

The aside element

My definition of the aside element would be "information either unrelated or loosely related to the main content of a page should go in aside tags" – however, that is not W3C's definition. They write: "The aside element represents content that is tangentially related to the content that forms the main textual flow of a document." *

That confuses me. Anyone who speaks English knows what the word "aside" means. Anyone should be able to more or less understand what the aside element does without having read a word on the subject. After trying to penetrate W3C's definition I'm not so sure. It bewilders more than it enlightens – frankly, it's pedantic nonsense.

The OED defines aside as "to one side; out of the way". ** That I get.

W3C goes on to say: "The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page." *

That's a little better. I don't remember ever using "pull quotes", "sidebars" or "groups of nav elements" and I doubt I ever will. You never know, but I doubt it. On the other hand where to put advertising is a real, everyday problem I and tens of thousands of other web designers do have.

For better SEO I want to be able to separate ads from content – to, if you will, "put them aside". The search engines should know what I think is and isn't significant. The aside element gives me the means to include something in a page that is not important to the meaning of the page. Ads are not related – tangentially or otherwise – to anything more than me needing to pay the rent. They go in aside tags.

The section element

The 

 element and the elements we have covered in the last five pages are examples of what are known as semantic HTML. These elements add meaning to content the search engines can use to better understand a page. This page has more on web semantics.

The W3C says: "The section element represents a generic section of a document or application."

It goes on to say: "The section element is not a generic container element."

I too was confused; however there is a difference.

1. If all you want to do is have something look different use a div tag (a genericcontainer) and CSS styles.
2. If you want a particular part of a page separated from the rest of the page due to the information in it - its "content", use section elements (a generic section). Use the section element if there is what W3C calls a "semantic" distinction.

I am still not clear why one is a "container" and the other a "section" – but whatever. Ours is not to wonder why...What's important is that you know when to use one or the other.

You can apply CSS to the section element just as you would a div, however the search engines ignore div tags – they are semantically neutral.

The section element shouldn't be used save as a last resort and then usually it should have a header (h1 to h6). It's like that extra room in the house you never use except when you can't think of any place better. Some working with W3C in the development of HTML5 thought the section element wasn't necessary – they thought it better to just use article tags and at first I was inclined to agree. Then I found the perfect use for it.

On the bottom of this page I have a definition of "Semantic HTML". If you look in the source code (line 111) you will see I have it in section tags. I don't want to lose SEO weight with the aside element, but nor do I want it to detract from what is in the main article tags. The section element fits the bill perfectly.

All these new tags: header, nav, article, footer, aside and section are as a group called section elements. This does not mean the the section element is anything more than just one of them, though you can be excused for assuming otherwise. It took me a while to figure that one out.

Throughout this tutorial I have repeatedly mentioned that you should always be designing for two audiences, one human the other bots. The header, nav, article, footer, aside and section elements are for that latter audience.

These elements give meaning to content the search engines could not ascertain without them. At this point (April 2012) few web designers use them, but they should. They have broad browser support and they make good sense. The better the search engines can "see" and analyze a site the better.

The img element

The  element, like most elements, is a container. It is not an image in and of itself, but a receptacle for one.

Just as the p element holds a paragraph, the img element holds an image. However, it does so in a entirely different way. Most notably, the image is a separate file that loads into the space created by the img element.

There are three types of image files used in HTML, indicated by different filename extensions: .jpg, .gif and .png (also know as JPEGs, GIFs and PINGs); which we will look at next.

Let's first take a look at what I used to display the image below. Note that there is no closing tag. It's one of the few elements that doesn't use them.

img src="images/atitlan.jpg" class="flr" alt="Lake Atitlan, Guatemala" width="300" height="240"

Lake Atitlan, Guatemala C.A.*

The img element has a number of what are called attributes: **

The "src" or source attribute tells the browser what image (ie. image file) goes in the tag and where to find it. It is required.

The browser sends instructions to the server to go to the folder named images, get atitlan.jpg and send it back to the client (ie. your computer) and show it in the space reserved by the image tag.

The img element can have a "class" attribute just like most elements.

You can position images, add borders, margins and much more with CSS.

The "alt" attribute refers to alternative text or text that the W3C calls "fallback content". This too is required.

If for some reason visitors can't see an image the alt attribute explains what the image is. The principal visitors that can't "see" images are the web crawlers sent out by the search engines. As I have said repeatedly throughout the tutorial, sites have two audiences – the crawlers being the second. The alt attributes plays a role in SEO.

While the "height" and "width" are not required, they are highly recommended.

Pages don't load all at once. When a new page opens a browser will start to load what it can, when it can and often images finish downloading last. With the height and width attributes set the browser can position (with CSS) and size the img tag before the image file loads.

In the source attribute there are two ways to show what is known as the "path" to the image file:

The "absolute path":

img src="http://www.html-5-tutorial.com/images/atitlan.jpg" ...

The "relative path":

img src="images/atitlan.jpg" ...

The latter being "relative" in the sense that its location on the server is relative to the location of the html file requesting it, which in this case is: image-element.htm – in other words, this page.

On my server is a folder (also called a "directory") named "html-5-tutorial.com" – the "root directory". In the root directory is the file image-element.htmand a folder named images, which in turn holdsatitlan.jpg.

The file system on a server works just like the file system on your computer save for the fact that it can be accessed from internet. Your computer has a firewall (or at least it should) that blocks anything from the outside getting in.

It is essential that you understand how paths work as it applies to all files used on any site. CSS, javascript, PHP – what have you – are all stored in files and to access a file of any type you have to follow a path.

It was the first time I made a page with photos that I really got hooked on web design. All of a sudden my fledgling efforts actually produced something I could show the world.

The img element cont.

As you no doubt know there are many kinds of image files. Images edited in PhotoShop are saved as ".psd" by default, Microsoft's Paint saves images as ".bmp" and so on.

Images on the web are one of three types: JPEGs, GIFs and PINGs – each of which we will look at in turn.

JPEGs (.jpg), GIFs (.gif) and PINGs (.png) files are much smaller than others as they are compressed (or "zipped") by sophisticated algorithms.

How the  element works is unaffected by the filename extension (ie. .jpg, .gif or .png). It simply downloads whatever file you tell it to. However the extension does matter to the browser as it tells the browser which algorithm to apply to decompress ("unzip") the file – the reverse algorithm the images editor employed to compress the file in the first place.

Lake Atitlan, Guatemala (atitlan.jpg – 10.2kB)

To compress an image you just save it as a JPEG, GIF or a PING. Your image editor implements the compression algorithm when saving the file. JPEG applies lossy compression, GIF and PING apply lossless compression.

"Atitlan.jpg", the photograph to the right, is 5% the size it would be were it saved in PhotoShop, "atitlan.psd" (211kB) or in MS Paint, "atitlan.bmp" (210kB).

This is important because "atitlan.jpg" takes 5% the time to download than it would saved as .psd. One of the biggest mistakes web designers make is creating pages that take too long to download. People do not want to wait. Bore them for an instant and they're gone.

An overly compressed version of atitlan.jpg. (atitlan-resized.jpg 5.5kB)

JPEG

Lossy compression works best for photographs. At 10.2kB, atitlan.jpg (above) loads quickly while still looking good.

There is always be some loss of detail (hence "lossy"), but don't apply too much compression or you end up with an image like what you see here. You do save 4.7kB in file size, but the tiny gain in page load speed is not worth the loss in quality.

However, apply too little compression and the image file is unnecessarily large. You are wasting server bandwidth, not to mention your visitor's time.

With the correct amount of compression you end up with a photo that for all practical purposes is identical to the image before it was zipped.

GIF & PING

In general, use lossless compression on anything other than photos. Logos are almost always GIFs or PINGs.

An example of a GIF. (html5-badge.gif – 1.2kB)

To the right you can see the HTML5 badge saved both as a GIF and a JPEG. While I over-compressed the JPEG version to make a point, there is always a degree of distortion that comes with JPEGs, while GIFs and PINGs are clean and sharp.

The same image saved as a JPEG.
(html5-badge.jpg – 1.1kB)

The photo of Lake Atitlan saved
as a GIF. (atitlan.gif – 17kB)

On the other hand, GIFs tend not to be good for photos. When I save the lake photo as a GIF it looks like this. JPEGs can utilize millions of colors while GIFs are limited to a maximum of 256.

As for GIFs versus PINGs, I use GIFs more – but I'll admit to being old school. GIFs were around well before PINGs and I got used to working with them way back when.

In theory PINGs are better than GIFs. In practise browsers (in particular IE – no surprise there) and image editors have been slow to fully support PINGs. Many competent web designers might disagree, but I recommend learning GIFs first.

A transparent GIF on top of a JPEG.

There is one other important advantage to GIFs and PINGs in that areas in the image can be set to be transparent.

To the right you see atitlan-front.gif on top of atitlan.jpg. When I saved atitlan-front.gif in my image editor I made all of it transparent except for the text in dark blue. Then with CSS I set atitlan.jpg as the background image. You can see the CSS I used to do this in the source code of this page.

In image editors the use of the word "resize" has confused many – myself included. When you want to "resize" an image you would logically think you were changing an image's dimensions, its height and width; not so – at least not in PhotoShop, CorelDraw and a number (but not all) of other image editors. Changing height and width is what they call "resampling". * They call "resizing" compressing the file with one of the compression algorithms (ie. saving it as a JPEG, GIF or a PING).

Here I "resampled" atitlan.jpg down from 300 pixels
wide by 240 pixels high to 150px by 120px. (6.2kB)

"Resample" seems an odd word to use, but it's better than using "resize" in the same context with two different meanings. I don't have a better word, so "resample" it is ...except in those image editors that do use "resize" in the same context with two different meanings.

This is not the place to go into great details about how to edit images. I had a friend once tell me all you had to do to get a photo web ready was resample it and bump up the contrast. He's a nice guy, but not much of a photographer. I also have friends who spend hours agonizing over every pixel. They are great photographers, but don't get much work done. Find an image editor you like and put the time into learning how to use it properly – but efficiently.

There are those that swear PhotoShop is the only way to go – and with some reason. It truly is a powerful program, but it's expensive and difficult to learn. If you know PhotoShop you are way ahead of the game – but if you don't there are all kinds of options, not the least of which are some quite good editors you can download and install for free.

Windows:

PhotoScape – This editor has a weird interface (for example the save button is on the lower right) but once you figure it out it's quite powerful.

IrfanView – As an image editor IrfanView is limited. However, it may well be the handiest little program ever written. I can't imagine owning a computer without it.

GIMP for Windows – I got an email from someone recommending it and I liked it. It's quite powerful.

Mac:

GIMP for Mac – I am not a Mac guy (if for no other reason than that there is no Mac version of IrfanView) but I read some reviews online and GIMP seemed to be the most popular free Mac editor. .

Images are an essential part of any website. A good working knowledge of a competent image editor is important, but there is a lot to learn – just as there is with HTML and CSS. Get the basics down and with time your skills will improve. For now, let's get back to some HTML.

The map and area elements & image maps

If you click the logo at the top of this page you go to my home page. To do that I simply put an image tag inside anchor tags.

  

The whole image is a link, but there is also a way to assign different links to distinct areas of an image through the use of a client side image map. *

It sounds geeky – alright, it is a little geeky – but nothing you can't handle. Besides, if you have gotten this far into the tutorial there is a bit of the geek in you. Admit it. It's not so bad. I've lived with it for years.

Below is an image 100px wide by 50px high. Below that is the image tag that displays it.

Here is the process I go through to make that image an image map:

First I add usemap="#on-off" to the image tag.

usemap="#on-off">

Second I open the map element with the name attribute.

">

Third I setup the two areas I want to be "hot":

Lastly I close the map element.

There are a few things you need to remember:

• The map name must match what is in usemap.
• Usemap has a hashmark (#) – usemap="#on-off", but name doesn't – name="on-off".
• There can be multiple image maps on a page, but each must have a unique name.
• The area element doesn't have a closing tag.
• If the area tag has an href="" attribute it should also have an alt="" attribute.

All that looks relatively straightforward except the coords part, which I will admit, is not all that straightforward – but don't panic. Take a moment to close your eyes, take a deep breath and embrace your inner geek.

The x,y co-ordinates of the upper left hand corner of the image is 0,0. Starting there, x counts from left to right and y from the top down.

When the shape is set to rect, coords creates a rectangle. In coords="x1,y1, x2,y2" the first two digits are the x,y co-ordinates of the upper left corner of the box and the second two are the co-ordinates of the lower right corner.

U L    L R  coords="x1,y1, x2,y2" coords=" 0, 0, 50,50"	U L    L R  coords="x2,y1, x3,y2" coords="50, 0,100,50"

Below you can see the code in action. Rather that take you to another page I set it so that clicking "1" or "0" below will simply reopen this page, but I could have linked to any page on this site or, for that matter, anywhere on the net.

Here's the area tags:

Many sites use image maps for navigation.

This is just one simple example of something that can get quite complex. The areas you select as "hot" can be anywhere on the image. You don't have to start in the upper left. The order of the area tags is unimportant.

The shape can also be a circle:

x,y,radius

" title="..">

or a polygon:

x1,y1,x2,y2,..,xn,yn

" title="..">

There are any number of tools that can help you layout image maps. The image editor GIMP (recommended on the previous page) has a handy tool that does the hard work for you. Polygons in particular can be a real chore without such a tool.

Image maps are not limited to just links. Clicking on an image map button can also trigger a program or script to run. Below I use some basic javascript to open alert windows – however the possibilities are truly unlimited.

Learning javascript (not to mention PHP, jQuery, Python, ...name your program) is down the road. For now let's not push our luck – you only just discovered your inner geek.