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).
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.
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 a
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 example
test.html, as shown in the next figure.
Now open the file explorer in the folder where you saved your page. You'll see the file you just created (next figure).
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).
Simply double-click on this file and... your browser opens and, as shown in the next figure, displays the text you wrote.
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.
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
>, like this:
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
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:
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:
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
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>
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>
The result when copied into Notepad++ is shown in the next figure.
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!
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 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!
<head>and the body
A web page consists of two parts:
<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!
<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 (
<meta charset="utf-8" />
This tag indicates the encoding used in your
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 indicated
utf-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.
The main title of the page
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.
You should know that the title also appears in search results, such as with Google (next figure).
So choosing your title is important!
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.
A 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 page once 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.
The source code then appears (next figure).
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!
A text editor (Notepad++, jEdit, vim, etc.) is used to create a file with the extension
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 (
The source code of any web page can be displayed by right-clicking and selecting
View source code of web page.