Trang chủ‎ > ‎IT‎ > ‎WEB PROGRAMMING‎ > ‎01 - HTML‎ > ‎

Tutorial - HTML5 and CSS3 - Introduction

How do you create websites?

Log in or subscribe for free to enjoy all this course has to offer!

Hello everyone and welcome!

So here's the first chapter of this course for beginners that is going to show you how to design your own website!

We are going to spend a while together. Everything will depend on how quickly you learn. If you read this course regularly at a reasonable speed, you should finish it in one to two weeks. But if you need a little more time, don't worry: the main thing is for you to go at your own pace, preferably enjoying yourself.

I suggest you start with the simplest, but also the most important, question: how do websites work?

How do websites work?

How do websites work?

No, don't be afraid to ask questions even if you think they are "dumb". It's very important for us to talk about it a little before going fully into website design!

I'm sure you visit websites on a daily basis. To do this, you run a program called the web browser by clicking on one of these icons shown in the next figure.

Web browsers are programs that display websitesWeb browsers are programs that display websites

With a browser, you can visit any website. Here, for example, is a browser displaying the famous Wikipedia website (see next figure).

A website: WikipediaA website: Wikipedia

I'm sure you're used to using a web browser! Everyone now knows how to surf on the Web... but who really knows how the Web works? How to design websites like this one?

I've heard of HTML and CSS. Do they have something to do with how websites work?

Absolutely!
They are computer languages for creating websites. All websites are based on these languages, which are now essential and used everywhere. They are the very foundation of the Web. HTML was first invented by Tim Berners-Lee in 1991...

Tim Berners-Lee still closely follows Web developments. He created the World Wide Web Consortium (W3C) that defines new versions of these languages. More recently, he also created the World Wide Web Foundation, which analyses and tracks Web developments.

Many people wrongly confuse the Internet and the Web. You should know that the Web is part of the Internet.
The Internet is thus a large system that includes, among other things: the Web, e-mails, instant messaging, etc.
Tim Berners-Lee thus did not invent the Internet, but "only" the Web.

The HTML and CSS languages are the basis of how all websites work. When you visit a website with your browser, you should know that behind the scenes wheels are turning to allow the website to be displayed. The computer bases itself on what was explained to it in HTML and CSS to know what to display (see next figure).

From HTML to the screenFrom HTML to the screen

HTML and CSS are two "languages" you have to know how to speak to create websites. The web browser does the translation between these programming languages and what you see on the screen.
You're probably wondering why you need to know two languages to create websites? I'll answer that straight away!

HTML and CSS: two languages for creating a website

To create a website, you have to give instructions to the computer. It's not enough to simply type the text you want to put in your website (as you would in a word processor such as Word, for example). You also have to show it where to put text, insert images, create links between pages, etc.

The role of HTML and CSS

To explain to the computer what you want to do, you have to use a language it understands. And that's when things get tough, because you have to learn two languages!

Why were two languages created? Wouldn't just one have been enough?

You are probably thinking that handling two languages is going to be twice as complex and take twice as long to learn... but this is not so! I can assure you, if there are two languages, this was designed to make things easier. We'll be dealing with two languages that complement each other as they have different roles:

  • HTML (HyperText Markup Language): first appeared in 1991 when the Web was launched. Its role is to manage and organize content. You thus use HTML to write what you want the page to display: text, links, images, etc. You might say for example: "This is my title, this is my menu, here's the main text of the page, here's an image to be displayed, etc.".

  • CSS(Cascading Style Sheets): the role of CSS is to manage the look of the website (layout, positioning, design, color, text size, etc.). This language was introduced to complement HTML in 1996.

You may also have heard of the XHTML language. This is a variant of HTML that is more rigorous and thus a bit trickier to handle.
Simply put, HTML appeared first in 1991. At the start of 2000, the W3C launched XHTML indicating that it represented the future... but XHTML was not as successful as hoped. So it was back to basics in 2009: the W3C abandoned XHTML and decided to return to, and upgrade, HTML.
There is much confusion about these languages, as they are very similar. Neither one is really better than the other. It's just two different ways of doing things. In this course, we are going to work with the latest version of HTML (HTML5) which is now the language of the future that everyone is encouraged to use.

You can quite well create a website in HTML only, but it won't look very nice: the information will be displayed "granularly". This is why the CSS language is always used to complete it.

To give you an idea of this, the next figure shows how the same page looks without CSS and then with CSS.

With or without CSSWith or without CSS

HTML defines the content (as you can see, it's rough around the edges!). CSS is used to arrange the content and define the presentation: color, background image, margins, text size, etc.

As you can imagine, CSS needs an HTML page to work. This is why we are first going to learn the basics of HTML before going on to deal with the decoration aspect in CSS.
As a result, your first pages won't be very nice to look at, but who cares! This won't last very long.

The various versions of HTML and CSS

Over time, the HTML and CSS languages have been significantly changed. In the first version of HTML (HTML 1.0), you couldn't even display images!

Here's a very brief background of the languages for your general knowledge…

HTML versions
  • HTML 1: this was the very first version created by Tim Berners-Lee in 1991.

  • HTML 2: the second version of HTML appeared in 1994 and ended in 1996 with the publishing of HTML 3.0. This was the version that was to lay the groundwork for the future versions of HTML. The rules and operation of this version are given by the W3C (whereas the first version was created by one man).

  • HTML 3: appeared in 1996, and this new version of HTML added many possibilities to the language such as tables, applets, scripts, positioning of text around images etc.

  • HTML 4: this is the most common version of HTML (more specifically it's HTML 4.01). It appeared for the first time in 1998, and proposed the use of frames (which cut a web page into several parts), more complex tables, improvements in forms etc. More importantly, this version for the first time allowed the use of style sheets, our famous CSS!

  • HTML 5: this is THE latest version. Still not very widespread, it attracts a lot of attention as it provides many improvements such as the ability to include videos easily, a better layout of content, new features for forms, etc. This is the version that we are going to find out about together.

CSS versions
  • CSS 1: from 1996, the first version of CSS was used. It laid the foundations of this language which allows you to display your web page, with colors, margins, fonts, etc.

  • CSS 2: appeared in 1999 and was then completed by CSS 2.1. This new version of CSS added numerous options. We can now use very accurate positioning techniques to display items where we want them on the page.

  • CSS 3: this is the latest version, which added eagerly awaited features such as rounded edges, gradients, shadows, etc.

Note that HTML5 and CSS3 are not versions that have been fully finalized by the W3C. However, even though there may be minor changes to these languages, I highly recommend that you start with these new versions today. They make many contributions and are worth while. Also, many professional websites are now built using these latest versions.

The text editor

What software am I going to need to create my website?
Am I going to have to break my piggy bank to buy a very complex piece of software that I'm going to take months to understand?

There are indeed a large number of software programs for designing websites. But I can assure you that you won't have to pay a single penny for them. Why go for a paid and complicated software program when you already have everything you need at home?

Yes, brace yourself because all you need is... Notepad (see next figure)!

The Notepad softwareThe Notepad software

Strange but true: you can quite well design a website just using Notepad, the text editing software included as default in Windows. I have to admit that this is how I started myself a few years ago.

However, more powerful software is now available and no one really uses Notepad any more. These website design programs can be classified as two categories:

  • WYSIWYG (What You See Is What You Get): these are programs that are very easy to use and allow you to create websites without learning any particular language. The best known of them include: Nvu, Microsoft Expression Web, Dreamweaver... and even Word! Their main drawback is the quality of the HTML and CSS code that is automatically generated by these tools, and which is often of rather poor quality. A good website designer will sooner or later have to know HTML and CSS, and this is why I do not recommend the use of these tools.

  • Text editors: these are programs for writing code. They can generally be used for other languages, not just HTML and CSS. They are proving to be powerful allies for website designers!

As you've gathered, I'm going to get you to use a text editor in this course. Here are a few tips, according to whether you're running Windows, Mac OS X or Linux.

In Windows

There are plenty of text editors and I don't intend to mention them all. However, do have a look at Notepad++, one of the most widely used text editors in Windows. This program is simple to use and free.

Notepad++ website

Here is what Notepad++ looks like when you launch it (see next image).

Notepad++Notepad++

I suggest you follow these steps: choose the Language > H > HTML. This will tell the software that HTML language is about to be typed.
When you use the software, it will color your code to allow you to identify it more easily:

Colors in Notepad++Colors in Notepad++

For the time being, do not worry about what all this gibberish means. I just wanted to give you an overview of what the software can do.

Other publishers are available in Windows. If you don't like Notepad++, you can try:

  • jEdit;

  • PSpad;

  • ConTEXT;

  • ... and many others by just searching for "Text editor" on the Web.

In Mac OS X

You can try one of the following programs:

In Linux

There are many Text editors in Linux. Some of them are installed as default, while others can be easily downloaded from the Download Center (in Ubuntu in particular) or via commands like apt-get and aptitude. Here are some programs that you can test:

  • gEdit;

  • Kate;

  • vim;

  • Emacs;

  • jEdit.

Browsers

Why a browser is important

A browser is a program that lets you see websites. If you can read this, it means that your browser is open and you are displaying it. As I explained earlier, a browser's job is to read the HTML and CSS code to display a visual result on the screen. If your CSS code says "The titles are in red," the browser will display the titles in red. The browser's role is thus essential!

You wouldn't think so, but a browser is an extremely complex program. Understanding HTML and CSS code is indeed no small matter. The main problem, as you will quickly realize, is that browsers do not display all websites in exactly the same way! You'll have to get used to this and get into the habit of regularly checking that your website works properly on most browsers.

Browsers on computers

Downloading browsers

There are many different browsers. The main ones you should know are shown in the next figure.

Browser

OS

Download

Comments

Google Chrome

Google ChromeGoogle Chrome

Windows
Mac
Linux

Download

Google's browser, which is easy to use and very fast.
It's the browser I use on a daily basis.

Mozilla Firefox

Firefox LogoFirefox Logo

Windows
Mac
Linux

Download

The Mozilla Foundation's famous, renowned browser. 
I use it frequently to test my websites.

Internet Explorer

IE9IE9

Windows

Download
(Pre-installed in Windows)

Microsoft's browser, which is installed on all Windows PCs.
I use it frequently to test my websites.

Safari

Safari LogoSafari Logo

Windows
Mac

Download
(Pre-installed in Mac OS X)

Apple's browser, which is installed on all Macs.

Opera

Opera LogoOpera Logo

Windows
Mac
Linux

Download

The eternal outsider.
Less used but provides many features.

It is advisable to install several browsers on your computer to make sure that your website works properly on each one. In general, I recommend you test your website regularly on Google Chrome, Mozilla Firefox and Internet Explorer at least.
Note that Safari and Google Chrome display websites in much the same way. You do not necessarily need to test your website on both Safari and Google Chrome, although it is always safer.

In the next figure, you can see a preview of some of these main browsers on the Google homepage.

Preview of some browsersPreview of some browsers
Understanding the differences between browsers

As I said earlier, browsers do not always display web sites in exactly the same way. Why? This is because browsers do not always know the latest features of HTML and CSS. For example, Internet Explorer has for a long time lagged behind as regards some CSS features (and paradoxically has also been ahead in others).

To complicate matters, there are several co-existing versions of browsers:

  • Firefox 2, Firefox 3.5, Firefox 3.6 and Firefox 4;

  • Internet Explorer 6, Internet Explorer 7, Internet Explorer 8 and Internet Explorer 9;

  • Chrome 8, Chrome 9 and Chrome 10;

  • ...

Although each version supports new features, this becomes a problem for webmasters like you who create websites, if users do not update their browsers. 
Chrome has largely resolved this problem by setting up automatic updates without requiring user action. Many Firefox users forget to update, and Internet Explorer struggles to get users to update as the latest versions also require an update of Windows (Internet Explorer 9 is not available for Windows XP for example).

Sites like normansblog.de and caniuse.com provide an updated list of CSS features supported by the various versions of each browser (see next figure).

List of features supported by browsersList of features supported by browsers

As you can see, it's... complicated.

The biggest concern most often lies in older versions of Internet Explorer (IE6, IE7 and IE8). You should check how your website looks in these older versions... Expect the unexpected! In particular, make sure that your website is displayed without errors, without trying to obtain exactly the same result in the old versions of these browsers.

There's a program called IETester in Windows which allows you to test your website in various versions of Internet Explorer. Note that while this program is relatively unstable (it often crashes), at least it exists.

Browsers on mobile phones

In addition to the browsers that I have presented, variants of these browsers are found on mobile phones, especially smartphones
As more and more people now visit websites on their mobile phones, we should at least have some idea of how browsers work on mobile phones.

In fact, you won't be lost: most browsers on smartphones are the same as the ones on computers, in a lighter version suitable for mobile phones. Everything depends on the phone type.

  • iPhone: on Apple's iPhone, the Safari Mobile browser is used. This is a light but nevertheless very complete version of Safari for computers.

  • Android: Android mobile phones use the Chrome Mobile browser. There again, this is a version for mobile phones.

  • Windows Phone: Windows Phone includes... Internet Explorer Mobile! The principle is the same as for the above browsers: it is a version dedicated to mobile phones.

  • Blackberry: Blackberries are an exception to the rule as they have their own browser (there is no equivalent on computers). However, the most recent versions of this browser are based on a core common to Safari and Chrome (the Webkit rendering engine). As a result, the display is generally similar to that of Safari and Chrome.

Browsers for mobile phones support most of the latest features of HTML and CSS. In addition, the automated updating system of mobile phones ensures that users will most often have the latest versions.

You should, however, be aware that there are differences between these mobile phone browsers and it is advisable to also test your website on these devices! In particular, as the screen is much narrower, you should make sure that your website is displayed properly.

Touch pads are provided with the same browsers, but the screen is just wider. Thus, the iPad is provided with Safari Mobile for example.

Summing up

  • The Web was invented by Tim Berners-Lee in the early 90's.

  • To create websites we use two computer languages:

    • HTML, which lets you write and organise the content of your page (paragraphs, titles...);

    • CSS, which lets you format the page (color, size...).

  • There has been multiple versions of HTML and CSS. The last ones are HTML5 and CSS3

  • A web browser is a software which displays websites. It reads HTML and CSS languages to know what it must display.

  • Lots of different web browsers exist: Google Chrome, Mozilla Firefox, Internet Explorer, Safari, Opera... Each one will display websites slightly diffrently than the others.

  • In this course, we will learn how to use HTML and CSS languages. We will work in a software called a "text editor" (Notepad++, jEdit, vim...).

Your first web page in HTML

Log in or subscribe for free to enjoy all this course has to offer!

So you've installed all the software? You should now have a text editor to create your website (such as Notepad++) and several browsers to test it (Mozilla Firefox, Google Chrome, Internet Explorer, etc.).

In this chapter, we are going to get started! We are going to discover the basics of HTML and save our very first web page!
Of course, you won't be expecting to produce an exceptional web page from the second chapter only, but wait and see... it will come!

Creating a web page with the editor

So, let's get going! As I just said, we're going to create our website in a text editor. You should have installed one as I advised in the first chapter: it doesn't matter whether it's called Notepad++, PSPad, jEdit, vim, TextWrangler... or whatever. These programs have a very simple purpose: to allow you to type text!

Later on in this course, I'm going to work with Notepad++. I'm thus going to open it (see next figure).

Opening Notepad++Opening Notepad++

OK, so what do we do now? What are we going to write on this blank page?

Let's do a little test. Just type whatever comes into your head, like me in the next figure.

Text in Notepad++Text in Notepad++

You can type the same sentences as me or anything you want; the aim is just to type something.

Let's now save this file. This is very simple to do: as in all programs, you have aFile>Savemenu. A dialog box asks you where to save the file and as what name. Save it wherever you want. Give the file any name you want, ending with.html, for exampletest.html, as shown in the next figure.

Save a file in Notepad++Save a file in Notepad++

I recommend you create a new folder in your documents containing the files for your site. I've created atestfolder in which I've saved mytest.html file.

Now open the file explorer in the folder where you saved your page. You'll see the file you just created (next figure).

The file in ExplorerThe file in Explorer

The icon representing the file depends on your default web browser. The icon shown here is the icon for Google Chrome, which is my default browser, but the file may have another icon on your computer. For example, here are the icons that appear when your primary browser is Firefox or Internet Explorer (see next figure).

Firefox file iconFirefox file iconInternet Explorer file iconInternet Explorer file icon

Simply double-click on this file and... your browser opens and, as shown in the next figure, displays the text you wrote.

The web page displayedThe web page displayed

It doesn't work very well, it seems! All the text is displayed on the same line whereas we wrote two different lines of text!?

Indeed, well spotted!
The text is displayed on the same line whereas we asked it to be typed on two different lines. What's going on?

In fact, to create a web page it's not enough to just type the text as we've just done. In addition to this text, you need to also type what is known as tags, which will give instructions to the computer such as "go to next line", "display an image", etc.

Tags and their attributes

Well, all that was too easy. Obviously, those pesky computer specialists just had to interfere and complicate things. It's not enough "just" to type text in the editor, you also need to give instructions to the computer. To do this in HTML, you use tags.

Tags

HTML pages are filled with so-called tags. Although these tags cannot be seen on the screen by those visiting your site, they allow the computer to understand what it has to display. 
Tags are easy to spot. They are surrounded by "angle brackets", in other words symbols<and>, like this:<tag>

What purpose do they serve? They indicate the type of text they surround. They mean, for example: "This is the page title", "This is a picture", "This is a text paragraph", etc.

There are two types of tags: tags in pairs and orphan tags.

Tags in pairs

They are opened, contain text, and are closed later. Here's what they look like:

<paragraph>This is a paragraph</paragraph>

You can see an opening tag (<paragraph>) and a closing tag (</paragraph>) which indicates the end of the paragraph. For the computer, this means that everything that is not between these two tags is not a paragraph.

This is not a paragraph <paragraph>This is a paragraph</paragraph> This is not a paragraph
Orphan tags

These are tags that are most often used to insert an element at a given point (for example, an image). There is no need to define the start and the end of the image. You just want to tell the computer to "Insert an image here".

An orphan tag is written like this:

<image />

Note that the ending/is not compulsory. You could just type<image>. To avoid confusing them with the first type of tag, however, webmasters recommend that this/(slash) should be added at the end of orphan tags. So you'll see me adding a/to orphan tags and I recommend you do the same; it's good practice.

Attributes

Attributes are a bit like tag options. They supplement them to provide additional information. The attribute is placed after the name of the opening tag and is most often a value, like this:

<tag attribute="value">

What purpose does it serve? Let's take the<image />tag we've just seen. By itself, it is not much use. We could add an attribute that indicates the name of the image to be displayed:

<image name="picture.jpg" />

The computer then understands that it has to display the image contained in the file photo.jpg.

In the case of a tag working as a "pair", the attributes are only placed in the opening tag and not in the closing tag. For example, this code indicates that the quotation was made by Neil Armstrong and dates from July 21, 1969:

<quote author="Neil Armstrong" date="07/21/1969">
That's one small step for man, one giant leap for mankind.
</quote>

All the tags that we have just seen are fictitious. We'll find out about real tags in a few moments.

Basic structure of an HTML5 page

Let's go back to our text editor (in my case Notepad++). Just type or copy and paste the source code below into Notepad++. This code corresponds to the basis of a web page in HTML5:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
</head>
<body>
</body>
</html>

I've added spaces at the start of some lines to "shift" the tags. Although this is not compulsory and has no effect on how the page is displayed, it makes the source code more readable. This is called indentation. In your editor, just press the Tab key to get the same result.

The result when copied into Notepad++ is shown in the next figure.

Minimum HTML5 code in Notepad++Minimum HTML5 code in Notepad++

You'll notice that the tags are opened and closed in a specific order. For example, the<html>tag is the first one that is opened and is also the last one that is closed (at the very end of the code, with</html>). The tags must be closed in the reverse order they are opened. For example:

  • <html><body></body></html>correct. A tag which is opened inside another tag must also be closed inside it.

  • <html><body></html></body>incorrect, the tags are intertwined.

Uh, could you explain all the tags that we've just copied into the editor, sir?

Of course, as you asked so nicely.
Don't take fright seeing all these tags at once, I'm going explain what they do!

doctype

<!DOCTYPE html>

The very first line is called the doctype. It is essential as it is it indicates that it is effectively an HTML web page.
It's not really a tag like the others (it starts with an exclamation mark), and can be considered to be an exception that proves the rule.

This doctype line was once incredibly complex. It was impossible to keep it in your head. In XHTML 1.0, you had to write:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.
To the delight of webmasters, it was decided to simplify it in HTML5. When you see a short doctype tag (<!DOCTYPE html>), this means that the page is written in HTML5.

The</html>tag

<html>
</html>

This is the code's main tag. It includes the whole content of your page. As you can see, the</html>closing tag is located right at the end of the code!

The header<head>and the body<body>

A web page consists of two parts:

  • The header<head>: this section provides some general information on the page such as its title, the encoding (for managing special characters), etc. This section is usually fairly short. The information contained in the header is not displayed on the page and is simply general information intended for the computer. It is, however, very important!

  • The body<body>: this is where the main part of the page is located. Everything we type here will be displayed on the screen. Most of our code will be typed within the body.

For the time being, the body is empty (we'll come back to this later). But let's have a look at the two tags contained in the header...

The encoding (charset)
<meta charset="utf-8" />

This tag indicates the encoding used in your.htmlfile.

Without going into details as it could quickly become complicated, encoding specifies how the file is saved. It is what determines how special characters will be displayed (accents, Chinese and Japanese characters, Arabic characters, etc.).

There are several encoding techniques with weird names that are used depending on the language: ISO-8859-1, OEM 775, Windows-1253, etc. Wherever, however, only one should now be used: UTF-8. This encoding method allows virtually all the symbols in all the world's languages to be displayed with no problem! That is why I indicatedutf-8in this tag.

Your file must also effectively be saved in UTF-8. This is most often the default case in Linux, but the software generally has to be told this in Windows.

In Notepad++, choose theEncoding>Encode in UTF-8 (without BOM)menu for your file to be saved in UTF-8 from the start. This only applies to the currently open file.
To avoid having to do this for each new file, I suggest you choose theSettings>Preferencesmenu,New Document/Foldertab. SelectUTF-8 without BOMin the list.

If you have a problem displaying accents later on in your web page, this means that there is an encoding problem. Make sure that the tag effectively indicates UTF-8 and your file is saved in UTF-8 (your text editor can tell you; Notepad++ does it in theEncodingmenu).

The main title of the page
<title>

This is the title of your page, which is probably the most important item! Every page must have a title that describes what it contains.
It is advisable to keep the title fairly short (less than 100 characters in general).

The title is not displayed in your page but at the top of it (usually in the browser tab). Save your web page and open it in your browser. You will see that the title is displayed in the tab, as shown in the next figure.

The page title appears at the top of the browserThe page title appears at the top of the browser

You should know that the title also appears in search results, such as with Google (next figure).

The page title appears in Google searchesThe page title appears in Google searches

So choosing your title is important!

Comments

In this chapter, we learned how to create our first real HTML page. Before concluding, I'd like to say a word or two on comments.

comment in HTML is a text that is simply a memo. It is not displayed, is not read by the computer and does not change the display of the page.

In short, it serves no purpose?

Well of course it does!
It is used by you and those who read your page's source code. You can use comments to leave indications on how your page works.

What is the point of this? It will help you remember how your page works if you return to your source code after not seeing it for some time. No kidding, this happens to all webmasters.

Inserting a comment

A comment is an HTML tag with a very special form:

<!-- This is a comment -->

You can put it wherever you want in your source code: it has no effect on your page, but you can use it to help you find your way round source code (especially if it's long).

<!DOCTYPE html>
<html>
<head>
<!-- Page header -->
<meta charset="utf-8" />
<title>Title</title>
</head>
<body>
<!-- Page body -->
</body>
</html>

Everyone can see your comments... and all your HTML code!

I'll conclude with an important remark: everyone can see the HTML code of your pageonce it has been placed on line on the Web. Simply right click on the page and select "View page source" (the exact text may vary according to your browser), as shown in the next figure.

View page source menuView page source menu

The source code then appears (next figure).

Source code displaySource code display

You can test this on any website, it works! 100% guaranteed. This can be easily explained: the browser needs the HTML code to know what to display. The HTML code for all sites is thus public.

The moral of the story? Everyone can see your HTML code and you can do nothing about it. As a consequence, don't include sensitive information such as passwords in comments... and take over your source code, because I'll be able to come and check whether you've followed my course to the letter!

When you look at the code of some websites, don't be put off if it seems long or doesn't follow the same rules as those that I have set out in this book. All websites are not written in HTML5 (far from it), and the poor code written by some webmasters is not always a good example to follow!

Summing up

  • A text editor (Notepad++, jEdit, vim, etc.) is used to create a file with the extension.html(e.g.test.html). This will be our web page.

  • This file can be opened in the web browser simply by double-clicking it.

  • Inside the file, we type the content of our page, together with HTML tags.

  • Tags can have several forms:

    • <tag> </tag>: they open and close to delimit the content (start and end of a title, for example).

    • <tag />: orphan tags (only one tag is inserted) are used to insert an item at a specific point (an image, for example).

  • Tags are sometimes accompanied by attributes to provide additional information (e.g.<image name="photo.jpg" />).

  • A web page consists of two main sections: a header (<head>) and a body (<body>).

  • The source code of any web page can be displayed by right-clicking and selectingView source code of web page.

Organizing your text

Log in or subscribe for free to enjoy all this course has to offer!

Well, the blank page is nice but if you leave it like that your website isn't likely to be very successful.

In this chapter, we're going to find out about quite a few HTML tags. Some tags have been around since the very first version of HTML, while others have been introduced more recently in HTML5.

In this chapter, we're going to successively see:

  • how to type paragraphs;

  • how to organize the page with titles;

  • how to highlight certain words in your text;

  • how to organize information in the form of lists.

Are you ready? Then let's go. You'll see, it's not complicated.

Paragraphs

The text in a web page is usually typed in paragraphs. In the HTML language, the<p>tag is used to delimit paragraphs.

<p>Hello and welcome to my site!</p>
  • <p>means "Start of paragraph";

  • </p>means "End of paragraph";

As I told you in the previous chapter, we type the website content between the<body></body>tags. We thus just have to put our paragraph between these two tags and we'll finally have our first real web page with text!

I'll thus take exactly the same code as in the previous chapter and add it to my paragraph:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Paragraphs</title>
</head>
<body>
<p>Hello and welcome to my site!</p>
</body>
</html>

Try it, you'll see the result!
Ok, it's not yet Nirvana but it's a good start.

But let's not stop while things are going so well. We're now going to see something that is a bit special in HTML: the line feed. It sounds simple, yet it doesn't really work like in an ordinary word processor...

Creating a new line

In HTML, if you press the Enter key, a new line is not created in the way you're used to. So try this code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Line break tests</title>
</head>
<body>
<p>Hello and welcome to my website!
This is my first test so please make allowances; I'm gradually learning how it works.
For the time being it's a bit empty, but come back in 2 or 3 days once I've learned a few more things and I can assure you that you'll be surprised!</p>
</body>
</html>

All the text is displayed on the same line even though there's a line break in the code!! Hitting the Enter key frantically in the text editor thus services strictly no purpose.

As you'd expect, however, there is indeed a way to start a new line HTML.

In fact, if you want to type a second paragraph, you just use a second<p>tag. In the end, your HTML code should thus be filled with paragraph tags!

An example:

<html>
<head>
<meta charset="utf-8" />
<title>Paragraphs</title>
</head>
<body>
<p>Hello and welcome to my site!
This is my first test so please make allowances; I'm gradually learning how it works.</p>
<p>For the time being it's a bit empty, but come back in 2 or 3 days once I've learned a few more things and I can assure you that you'll be surprised!</p>
</body>
</html>

The result is shown in the next figure.

Two paragraphs with 2 <p> tagsTwo paragraphs with 2 <p> tags

Yes, but what if I just want to go to the next line in a paragraph starting a new line?

Well, guess what? There is a tag called "Line break"!
It's an orphan tag that is just used to indicate a line break:<br />. You have to place it within a paragraph.

Here's how to use it in a code:

<html>
<head>
<meta charset="utf-8" />
<title>Line breaks</title>
</head>
<body>
<p>Hello and welcome to my website!<br />
This is my first test so please make allowances; I'm gradually learning how it works.</p>
<p>For the time being it's a bit empty, but come back in 2 or 3 days once I've learned a few more things and I can assure you that you'll be surprised!</p>
</body>
</html>

You can theoretically put several<br />tags in succession to make several line breaks but this is considered as bad practice that makes the code difficult to maintain. To shift a text more accurately, CSS is used, which is a language that supplements HTML and which I'm going to tell you about a bit later on.

So have you understood?

  • <p> </p>: to organize your text into paragraphs;

  • <br />: to make a line break.

Now we know how to type paragraphs, let's see how to create titles.

Titles

Once the content of your page includes several paragraphs, it's going to be difficult for your visitors to find their way round. This is where titles become useful.

In HTML, you're spoilt for choice, you can use six different levels of titles. By that, I mean you can say "This is a very important title", "This is a title somewhat less important," "This is a title even less important", etc. You thus have six different title tags:

  • <h1> </h1>: means "very important title". In general, it is used to display the page title at the start of the page.

  • <h2> </h2>: means "important title".

  • <h3> </h3>: likewise, this means a title somewhat less important (you can say "sub-title" if you want).

  • <h4> </h4>: title even less important.

  • <h5> </h5>: title that is not important.

  • <h6> </h6>: title really not very important at all.

Caution: don't mix this up with the tag<title>! The<title>tag displays the page title in the browser title bar as we have seen. The titles<h1>and similar are used to create titles that will be displayed in the web page.

Do not be taken aback by all these tags. Indeed, six levels of titles is a lot. In practice, I personally only use the<h1>,<h2>and<h3>tags, and very rarely the others (I don't often need six different levels of titles). Your browser displays the very important title in very large characters, the somewhat less import title in somewhat less large characters, etc.

Don't choose your title tag according to the size it applies to the text! It is essential to structure your page properly starting with a level 1 title(<h1>), then a level 2 title (<h2>), etc. There must be no sub-title without a main title!
If you want to change the text size, we're going to learn how to do that in CSS later.

Try to create a web page with titles to see what how it looks:

<html>
<head>
<meta charset="utf-8" />
<title>Title levels</title>
</head>
<body>
<h1>Very important title</h1>
<h2>Important title</h2>
<h3>Somewhat less important title (sub-title)</h3>
<h4>Not very important title</h4>
<h5>Not important title</h5>
<h6>Title that is really not important at all</h6>
</body>
</html>

OK, I'll give you an example of how to use titles in a web page (you'll see that I don't use all the tags):

<html>
<head>
<meta charset="utf-8" />
<title>Presentation of my website</title>
</head>
<body>
<h1>Welcome to the my website!</h1>
<p>Hello and welcome to my website: SdZ.<br /> What is the SdZ website?</p>
<h2>Training courses for beginners</h2>
<p>The SdZ website provides training courses (tutorials) for beginners: no knowledge is required to read these courses!</p>
<p>You can thus learn, without knowing anything about it before, how to create a website, and program and build 3D environments!</p>
<h2>An active community</h2>
<p>You have a problem or something in the course you don't understand? You need help in creating your website?<br /> Visit the forums! You'll find that you're not alone in this and you'll certainly find someone who will kindly help solve your problem.</p>
</body>
</html>

Here's is a web page that's taking shape!

Yes, but I want to center my title, write it in red and underline it!

We'll do all that when we learn CSS (in the second part of the course). I'd point out that<h1>does not mean "Times New Roman, size 16 pt", but "Important title".

Using the CSS language, you can say "I want my important titles to be centered, in red and underlined". For the time being, we're just structuring our page in HTML. We're writing the content before enjoying ourselves formatting it.

Highlighting

Some words in your paragraphs are sometimes more important than others and you want to make them stand out. HTML provides various ways of highlighting the text of your page.

Emphasizing

To emphasize your text, you have to use the<em> </em>tag.
It is very simple to use: all you need to do is enclose the words to be emphasized between these tags! I'll reuse the example of a little while ago and emphasize a few words:

<html>
<head>
<meta charset="utf-8" />
<title>Emphasizing</title>
</head>
<body>
<p>Hello and welcome to my website!<br />
This is my first test so please <em>make allowances</em>,I'm gradually learning how it works.</p>
</body>
</html>

As you can see, using the<em>tag has the effect of placing the text in italics. In fact, it's the browser that chooses how to display the words. We tell it that the words are fairly important and, to emphasize this information, it changes the text appearance by using italics.

Strongly emphasizing

To strongly emphasize a text, you use the<strong>tag meaning "strong emphasis" or "important" if you prefer. It is used in exactly the same way as<em>:

<html>
<head>
<meta charset="utf-8" />
<title>Forte emphase</title>
</head>
<body>
<p>Hello and welcome to my website!<br />
This is my first test so please <strong>make allowances</strong>, I'm gradually learning how it works.</p>
</body>
</html>

You'll no doubt see the text appear in bold. There again, bold is a only a consequence. The browser has chosen to display the important words in bold to make them stand out more.

The<strong>tag does not mean "bold" but "important." You can decide later, in CSS, to display the "important" words in a way other than bold if you want.

Marking text

The<mark>tag is used to visually highlight a portion of text. The extract is not necessarily considered to be important but you want to make it stand out from the rest of the text. This can be useful to highlight relevant text after searching on your website for example.

<html>
<head>
<meta charset="utf-8" />
<title>Marking text</title>
</head>
<body>
<p>Hello and welcome to my website!<br />
This is my first test so please <mark>make allowances</mark>, I'm gradually learning how it works.</p>
</body>
</html>

As default,<mark>has the effect of highlighting the text. We can change the display in CSS (decide to highlight in another colour, box the text, etc.). It's the same principle as what I told you about for the previous tags: they indicate the meaning of words and not how they should be displayed.

Don't forget: HTML for the content, CSS for the style

It may sound like I'm labouring the point but it is very important to understand this properly as beginners often make the same big mistake at this stage. They see<em>,<strong>,<mark>tags… and say to themselves: "Great, I now know how to italicize, bolden and underline text in HTML!".

And yet... this is not that what these tags are used for! I know, I know, you're going to say to me "Yes, but when I use<strong>, the text appears in bold, so they must be used to bolden". Even so, it's a mistake to believe that this tag is used to do that.

The purpose of the tags is to indicate the meaning of the text. Thus,<strong>tells the computer "This text is important." That's all.
And to show that the text is important, the computer decides put it in bold (but it could equally well write it in red!). Although most browsers display important text in bold, nothing requires them to do so.

I don't understand. What's the point of the computer knowing that a text is important? 
It's not smart enough to understand!

Think again! Many programs analyze the source code of web pages, and not the least search engine robots. These robots trawl the Web reading the HTML code of all sites. This is the case of the Google and Bing robots, for example. As they see it, "important" key words tend to have more value so if someone does a search on these words, they are more likely to come across your website.
This, of course is only a rough explanation and you shouldn't run away with the idea that unrestrained use of the<strong>tag is somehow going improve your search ranking. You just need to trust computers: they understand what an "important" text means and can use this information.

So how do you specifically bolden a text, or write it in red, and everything?

All that is done in CSS. Remember:

  • HTML defines the content (logic content of items);

  • CSS defines the style (appearance).

We'll see the CSS later; for the time being, we'll focus on HTML and its tags, which each have a special meaning.

Lists

Lists often allow us to better organize our text and order our information. 
We are going to find out about two types of lists here:

  • unordered lists or bullet lists;

  • ordered lists or numbered lists.

Unordered list

An unordered list looks like this:

  • Strawberries

  • Raspberries

  • Cherries

It is a system that allows us to create a list of items without any notion of order (there's no "first" or "last"). Creating an unordered list is very simple. Just use the<ul>tag closed a bit further on with</ul>.
So start by entering this:

<ul></ul>

And now, here's what we're going to do: we're going to write each item in the list between two tags<li></li>. Each of these tags must be located<ul>and</ul>. You'll understand this straight away with this example:

<ul>
<li>Strawberries</li>
<li>Raspberries</li>
<li>Cherries</li>
</ul>

The result is shown in the next figure.

An unordered listAn unordered list

Note that the list has to be placed inside<body></body>. To keep the page code readable, I won't include all of it from now on.

So remember these two tags:

  • <ul></ul>delimits the whole list;

  • <li></li>defines an item in the list (a bullet).

You can include as many items as you want in the bulleted list, not just three.

So now you know how to create a bulleted list! Not that hard once you understand how to nest tags.

For those who need to create complex lists, remember that you can nestbulleted lists (create a bulleted list within a bulleted list). If you want to do this, open a second tag<ul>inside an item<li></li>.
If you close the tags in the right order, you won't have any problems. Take care, however, as it is not easy to become proficient in this technique.

Ordered list

An ordered list works the same way; only one tag changes: you have to replace<ul></ul>by<ol></ol>..
Within the list, you don't change anything: you always used<li></li>tags to delimit the items.

The order in which you place items in the list is important. The first<li></li>will be item No 1, the second will be item No 2, etc.

As it is particularly intuitive, I'll let you admire the simplicity of this example (result shown in the figure below):

<h1>My day</h1>
<ol>
<li>I get up.</li>
<li>I eat and drink.</li>
<li>I go back to bed.</li>
</ol>
An ordered listAn ordered list

Compared to the previous example, all we had to change is thus the tag<ol>.

For information, there is a third, much rarer, type of list: the list of definitions. It involves the<dl>tags (to delimit the list),<dt>(to delimit a term) and<dd>(to delimit the definition of this term).

Summing up

  • HTML has many tags that allow us to organize the text of our page. These tags provide indications such as "This is a paragraph", "This is a title", etc.

  • Paragraphs are defined by the<p> </p>tag and line breaks by the<br />tag.

  • There are six levels of titles, from<h1> </h1>to<h6> </h6>, which are used according to the title importance.

  • You can highlight certain words with the<strong>,<em>and<mark>tags.

  • To create lists, you have to use the<ul>tag (unordered bulleted list) or the<ol>tag (ordered list). Inside the list, items are inserted using a<li>tag for each item.

Creating links

Log in or subscribe for free to enjoy all this course has to offer!

In the previous chapter, you learned how to create a simple HTML page. Okay, it wasn't really up to much, but it was a real HTML page all the same.

As you know, a website consists of several pages. How do you go from one page to another? Using links of course! So how to create links between our pages is what we are going to learn to do this chapter.

I guess you all know what a link is: it's a text that you can click to go to another page.
You can make a link from a pagea.htmlto a pageb.html, but you can also make a link to another website (for example,http://www.google.com). We'll see that both cases work in the same way.

A link to another website

It's easy to recognize the links on a page: they're written in a different way (as default, in blue underlined) and a cursor which looks like a hand appears when you point to it.

I suggest you try to encode a link that takes you to Google, as shown in the next figure.

Link to GoogleLink to Google

To insert a link, the tag that we're going to use is very easy to remember: <a>. However, an attribute, href, to it to indicate the page the link should lead to.

For example, the code below is a link that leads to Google, located at the address http://www.google.com:

<a href="http://www.google.com">Google</a>

We're going to include this link in a paragraph. So here's how you reproduce the example in the next figure:

<p>Hello. Do you want to visit the website <a href="http://www.google.com">Google</a>?<br />
It's a good website! ;-)</p>

By default, the link is highlighted in blue. If you've already opened the page, the link is displayed in purple. 
We'll see how to change this appearance when we study CSS.

If you want to make a link to another site, you can just copy its address (called a URL) inhttp://. Note that some links sometimes start withhttps://(secure websites) or other prefixes (ftp://, etc.).

If you make a link to a website that has an address that is a little strange with occurrences of '&', as in: http://www.site.com/?data=15&name=mateo21, you will have to replace every "&" by "&amp;" in your link as follows: http://www.site.com/?data=15&amp;name=mateo21  .

You will notice no difference, yet this is necessary if you want your web page to be correctly constructed in HTML5.

The links that we have seen are called absolute links since the full address is shown. We are now going to see that we can write the links in a somewhat different way which will be useful for making links between the pages of our website.

A link to another page of your website

We have just learned how to create links to existing websites. But I'm sure you'd like to make links between the pages of your website, right?

Yes, how exactly do I make a link to another page on my website? I don't know itshttp://…… address as I've only just started to create my website here! I don't have an address.

Indeed, for the time being, you're creating your website on your computer. You're the only one who can see it and it doesn't yet have a "web address" starting withhttp://like most websites. Fortunately, this won't prevent us from working.

Two pages located in the same folder

To begin with, we're going to create two files corresponding to two different HTML pages. As I'm very inspired, I propose to call thempage1.htmlandpage2.html. We'll thus have these two files on our hard disk in the same folder (see next figure).

Several HTML files in the same folderSeveral HTML files in the same folder

How do you make a link from page 1 to page 2 without having an address inhttp://? In fact, it's easy: if both files are located in the same folder, just write the name of the file you want to move to as the target link. For example:<a href="page2.html">. This is said to be a relative link.

Here's the code that we're going to use in our filespage1.htmlandpage2.html.

page1.html
<p>Hello. Do you want to view <a href="page2.html">page 2</a> ?</p>
page2.html

Page 2 (arrival page) will simply display a message to indicate that you've effectively reached page 2:

<h1>Welcome to page 2 !</h1>

Two pages located in different folders

Things get a bit more difficult if the pages are located in different folders. Ideally, they shouldn't be too far away from each other (in a subfolder, for example).

Let's imagine thatpage2.htmlis located in a subfolder calledcontent, as in the next figure.

The page2.html file is located in the content folderThe page2.html file is located in the content folder

In this case, the link should be written like this:

<a href="content/page2.html">

If there are several subfolders, you'd write this:

<a href="content/autredossier/page2.html">

And what if the file is not located in a subfolder but in a "parent" folder? What do you do then?

If your target file is placed in a folder that is located "higher" in the tree structure, you have to write two dots like this:

<a href="../page2.html">

Pictorial overview

Relative links are not very complicated to use once you've understand the principle. To know how to write your link, just look at the "folder level" in which your target file is located. The next figure summarizes the various possible relative links.

Relative linksRelative links

A link to an anchor

An anchor is a sort of reference point that you can put in your HTML pages when they are very long. 
Indeed, it may be then be useful to create a link to a point further down the same page to allow visitors to jump directly to the part they are interested in.

To create a new anchor, just add theidattribute a tag which will then act as a reference point. It can be any tag, such as a title, for example.
Use theidattribute to give a name to the anchor. We will then be able to use it to make a link to this anchor. For example:

<h2 id="my_anchor">Title</h2>

Then just create a link as usual, but this time thehrefattribute will contain a hash character (#) followed by the anchor name. Example:

<a href="#my_anchor">Go to the anchor</a>

Normally, if you click the link, it will take you further down the same page (provided the page has enough text for the scroll bars to move automatically). 
Here's an example of a page with lots of text and which uses anchors (I've used any old text just to fill up the page):

<h1>>My big page</h1>
<p>
Go straight to the part dealing with:<br />
<a href="#kitchen">The kitchen</a><br />
<a href="#rollers">Rollers</a><br />
<a href="#archery">Archery</a><br />
</p>
<h2 id="kitchen">The kitchen</h2>
<p>... (lots of text) ...</p>
<h2 id="rollers">Rollers</h2>
<p>... (lots of text) ...</p>
<h2 id="archery">Archery</h2>
<p>... (lots of text) ...</p>

If nothing happens when you click on the links, this means that there is not enough text. In this case, you can either add any old text to the page so that it has (even) more text or reduce the size of your browser window to display the scroll bars on the side.

Theidattribute is used to give a "unique" name to a tag, to use it as a reference. And believe me, you haven't heard the last of this attribute. Here, it is used to link to an anchor, but in CSS, it will be very useful to us to "mark" a specific tag, as you'll see. 
However, avoid creating ids with spaces or special characters. Wherever possible, simply use letters and numbers so that the value is recognized by all browsers.

Link to an anchor located in another page

OK, be warned. This is really going to be a megamix!

The idea is to make a link that opens another page AND that takes you directly to an anchor located further down on this page. 
In practice it's fairly simple to do: just type the page name, followed by a hash character (#), followed by the anchor name.

For example:<a href="anchors.html#rollers">

... will take you to the pageanchors.html, directly to the anchor calledrollers.

Here's a page that contains three links, each leading to one of the anchors of the page in the previous example:

<h1>Megamix</h1>
<p>
Reference somewhere on another page:<br />
<a href="anchors.html#kitchen">The kitchen</a><br />
<a href="anchors.html#rollers">Rollers</a><br />
<a href="anchors.html#arc">Archery</a><br />
</p>

Practical examples of using links

Here, I'm going try to show you a few practical examples of using links. For example, did you know that it's very easy to make links that start a download? That create a new e-mail? That open a new window?

No? Well, we're going to have a look at all that here.

A link that displays a hover tooltip

You can use thetitleattribute which displays a tooltip when you point to the link. This attribute is optional.

You should obtain a result similar to the next figure.

A tooltipA tooltip

The tooltip can be useful in providing visitors with information even before they have clicked the link.
Here's how to reproduce this result:

<p>Hello. Do you want to visit <a href="http://www.google.com" title="Some say it's a search engine">Google</a> ?</p>

A link that opens a new window

A link can be "forced" to open a link in a new window. To do this, you addtarget="_blank"to the to<a>tag:

<p>Hello. Do you want to visit <a href="http://www.google.com" target="_blank">Google</a> ?<br />
The website will be displayed in another window.</p>

Depending on the browser configuration, the page will open in a new window or a new tab. You can't choose between opening a new window or a new tab.

Note, however, that it is not recommended to overuse this technique as it disrupts browsing. Visitors can decide for themselves whether they want to open the link in a new window. They can press Shift + Click on the link to open it in a new window or Ctrl + Click to open it in a new tab.

A link to send an email

If you want your visitors to be able to send you an email, you can use links of themailtotype. Nothing changes at the level of the tag. You simply change the value of thehrefattribute like this:

<p><a href="mailto:yourname@yourisp.com">Send me an email!</a></p>

So you just need to start the link bymailto:and enter the email address at which you can be contacted. If you click the link, a new blank message opens, ready to be sent to your email address.

A link to download a file

Many of you must be wondering how this works for downloading a file... In fact, the procedures is exactly the same as for linking to a web page, but this time indicating the name of the file to be downloaded.

For example, suppose you want to downloadmyfile.zip. Simply place this file in the same folder as your web page (or in a subfolder) and make a link to this file:

<p><a href="myfile.zip">Download the file</a></p>

That's all! As the browser sees that there is no web page to be displayed, it will start the download process when user clicks on the link.

Summing up

  • Links are used to move from one page to another and are as default in blue underlined text.

  • To insert a link, use the<a>tag with thehrefattribute to indicate the address of the target page. Example:<a href="http://www.google.com">.

  • You can make a link to another page in your website simply by writing the file name:<a href="page2.html">.

  • Links can also be used to jump to other places on the same page. You have to create an anchor with the id attribute to "mark" a place on the page and then make a link to the anchor like this: <a href="#anchor">.

Images

Log in or subscribe for free to enjoy all this course has to offer!

Inserting an image into a web page? You'll see, it's surprisingly easy... Well, almost. Several different image formats can be used in websites and they should not be chosen at random. Indeed, images are sometimes large to download, which slows down the page loading time (much more so than the text!).

So to make sure that your pages remain readable and quick to download, follow my advice actively!

Image formats

Do you know what an image format is?

When you have "access" to an image, you can save it in several different "formats". The image size (in KB or even MB) will vary according to the selected format and the image quality will change.

For example, the Paint drawing program (even though it is far from being the best one) lets you to choose between different formats when you save an image (next figure).

Image formats provided by PaintImage formats provided by Paint

Some formats are more suitable than others according to the image (photo, drawing, motion picture, etc.). Our aim here is to review the formats used on the Web to give you an idea of them so you know how to choose the one best suited to your image. Don't worry, there aren't many different formats so it won't take very long.

All the images posted on the Internet have a common point: they are compressed. This means that the computer does calculations to make them bulky and thus faster to load.

JPEG

Images in JPEG (Joint Photographic Expert Group) format are very common on the Web. This format is designed to reduce the storage size of photos (in other words, the size of the associated file), which can contain more than 16 million different colours. The figure below is a picture saved in JPEG format.

A mountain photo in JPEGA mountain photo in JPEG

JPEG images are saved with the extension.jpgor.jpeg.

Note that the JPEG format reduces the image quality slightly, in a way which is generally imperceptible. This is what makes it so effective in reducing the storage size of photos.
When it comes to a photo, you usually can't detect the loss in quality. If it is not a photo, however, the image may appear to be slightly "blurry". In this case, it's better to use PNG format.

PNG

PNG (Portable Network Graphics) is the newest format of all. This format is suitable for most graphics (I'm tempted to say "everything that's not a photo"). PNG has two big advantages: it can be made transparent and does not affect the image quality.

PNG was invented to compete with another format, GIF, at a time when you had to pay royalties for the use of GIF. Since then, PNG has changed significantly and has become the most powerful format for saving most images.

PNG is available in two versions, depending on the number of colors to be included in the image:

  • 8-bit PNG: 256 colors;

  • 24-bit PNG: 16 million colors (as many as a JPEG image).

The next figure is a 24-bit PNG image, representing our famous mascot Zozor.

Zozor in PNG formatZozor in PNG format

An old version of Internet Explorer (IE6) cannot correctly display transparent 24-bit PNG images. Although this browser is now used less and less, this information should be borne in mind.

In fact, if 24-bit PNG can display as many colors as a JPEG image, and can also be made more transparent without affecting the quality of the image... what's the point of JPEG?

The compression of photos is more powerful with JPEG. A photo saved in JPEG will always load much faster than if it was saved in PNG. I thus advise you to always keep the JPEG format for photos.

GIF

Although this format is quite old, it has been widely used (and is still widely used out of habit). PNG is now much better than GIF overall: images generally have a much smaller storage size and their transparency is of better quality. I would thus recommend you use PNG as much as possible.

GIF is limited to 256 colors (while PNG can go up to several million colors).

GIF does, however, have one advantage that PNG does not have: it can be animated (see next figure).

An animated GIF imageAn animated GIF image

There is a suitable format for each image

To sum up, the format to be adopted according to the image you have is indicated below:

  • A photo: use a JPEG.

  • Any graphic with not many colors (fewer than 256): use an 8-bit PNG or possibly a GIF.

  • Any graphic with lots of colors: use a 24-bit PNG format.

  • A animated image: use an animated GIF.

Mistakes to be avoided

Banish other formats

Other formats not listed here, such as the BITMAP format (*.bmp) should be banned as they are often not compressed, and so too big. They are not at all suitable for the Web. Although you can include them in your website, they will take an extremely long time to load!

Choose the name of your image well

If you want to avoid problems, get into the habit of saving your files with lower case names, and without spaces or accents, for example:my_image.png.

You can replace spaces by the underscore character ("_") as I have done here.

Inserting an image

Let's now go back to HTML code to find out how to place images in our web pages!

Inserting an image

What is the famous tag that we use to insert an image? It is…<img />!

It's an orphan type tag (such as<br />). This means that you don't need to enter two tags as in the case of most other tags that we have seen so far. Indeed, we don't need to define a portion of text; we just want to place an image at a specific point.

The tag must be accompanied by two mandatory attributes:

  • src: which indicates the location at which you want to insert the image. You can either include an absolute path (e.g.http://www.website.com/flower.png) or a relative path (which is what is usually done). So if your image is in animagessubfolder, you have to enter:src="images/flower.png"

  • alt: which means "alternative text." An alternative text to the image, in other words, a short text describing what is the image contains, must always be indicated. This text will be displayed in place of the image if the latter cannot be downloaded (this does happen), or in the browsers of disabled (blind) people who unfortunately cannot "see" the image. It also helps search engine robots to search for images. For the flower, for example the following would be included:alt="A flower"..

Images must necessarily be located within a paragraph (<p></p>). Here's an example of an inserted image:

<p>
Here's is a photo I took during my last holiday in the mountains:<br />
<img src="images/mountain.jpg" alt="Mountain picture" />
</p>

In short, it is very easy to insert an image as long as you can indicate where it is located, as we learned to do with links. 
The biggest "difficulty" (if you can call it a difficulty) is to select the right image format. In this case, it's a photo so obviously the JPEG format is used.

I'll say again: capital letters and spaces in your file names and folder names should be avoided at all cost. Here's a path that is going to cause problems: 
"Website images/My super image.jpg".
Spaces should be deleted (or replaced by the symbol "_") and everything put in lower case like this: 
"website_images/my_super_image.jpg".
Make no mistake about it, if your image isn't displayed, it's almost certainly because the path is incorrect! Keep your file names and folder names as simple as possible, and all will be well.

Adding a tooltip

The attribute used to display a tooltip is the same as the one for links: namely,title. This attribute is optional (unlikealt).

Here's an example:

<p>
Here's is a photo I took during my last holiday in the mountains:<br />
<img src="images/moutain.jpg" alt="Moutain picture" title="I like snow!" />
</p>

Hover the mouse pointer over the photo to see the tooltip appear.

Clickable thumbnail

If your image is very large, it is advisable to display its thumbnail on your website. Then add a link to the thumbnail to allow your visitors to view the image in its original size.

There are millions of programs for creating thumbnails of images. I personally use Easy Thumbnails. I'll thus have two versions of my photo, as shown the next figure): the thumbnail and the original image.

A thumbnail and the original imageA thumbnail and the original image

I put them both in a folder called, for example,img. I display the versionmountain_small.jpgon my page and I make a link tomountain.jpgso that the enlarged image is displayed when you click on the thumbnail.

Here's the HTML code that I use for this:

<p>
Do you want to see the image in its original size? Click on it!<br />
<a href="img/moutain.jpg"><img src="img/moutain_small.jpg" alt="Moutain picture" title="Click to enlarge" /></a>
</p>

Some browsers sometimes choose to display a rather unattractive blue (or purple) frame around your clickable image. 
Fortunately, we can quickly remove this frame through CSS.

Figures

In reading this book, you have already come across several examples of figures. These are items that enhance the text to supplement the information on the page.

Figures can be of several different types:

  • images;

  • source code;

  • quotations;

  • ...

In short, anything that illustrates the text is a figure. Although we're using images in this case, figures are not, contrary to what one might think, necessarily images: a source code also illustrates the text.

Creating a figure

Let's, for example, take the case again of the screenshot we saw in the first chapter, as shown in the next figure.

The Notepad softwareThe Notepad software

In HTML5, the tag used is<figure>. Here's how you might use it:

<figure>
<img src="images/notepad.png" alt="Notepad" />
</figure>

A figure is most often accompanied by a caption. To add a caption, use the<figcaption>tag inside the<figure>tag, like this:

<figure>
<img src="images/notepad.png" alt="Notepad" />
<figcaption>The Notepad software</figcaption>
</figure>

Properly understanding the purpose of figures

A bit earlier on in this chapter, I told you that the images had to be located in paragraphs (placed inside a tag<p></p>). This is not quite true.

If you make a figure of your image, the image can be located outside a paragraph.

<p>Do you know the Notepad software? You can make websites with it!</p>
<figure>
<img src="images/notepad.png" alt="Notepad" />
<figcaption>The Notepad software</figcaption>
</figure>

I don't really see the difference. When should I put my image in a paragraph and when should I put it in a figure?

Good question! It all depends on what your image provides to the text:

  • If it provides no information (it's just an illustration for decorative purposes): put the image in a paragraph.

  • If it provides information: put the image in a figure.

The<figure>tag has a role that is primarily semantic. This means that it tells the computer that the image has a meaning and that it is important for the understanding of the text. This can allow a program to retrieve all the figures in the text and reference them in a table of figures, for example.

Finally, note that a figure may well have several images. Here's a case where this is justified:

<figure>
<img src="images/internetexplorer.png" alt="Internet Explorer Logo" />
<img src="images/firefox.png" alt="Mozilla Firefox Logo" />
<img src="images/chrome.png" alt="Google Chrome Logo" />
<figcaption>Logos of various browsers</figcaption>
</figure>

Summing up

  • There are several image formats suitable for Web use:

    • JPEG: for photos;

    • PNG: for all other illustrations;

    • GIF: similar to PNG, with more limited number of colors, but can be animated.

  • An image is inserted with the<img />tag. It must include at least two attributes:src(image name) andalt(short description of the image).

  • If an image illustrates the text (and is not just decorative), it is best to place it inside a<figure>tag. The<figcaption>tag is used to enter the image caption.

Congrats, you made it to the end of the first part of this course! Don't forget to complete your exercises before moving on to the next part. You will find the links to the quizz and the assessment of this first part in the course outline. Good luck!

Comments