23 July 2012

Part1: basics of html5 (part7)


The basic structure of a page HTML5

Returning to our text editor (in my case Notepad + +). I invite you to write or copy and paste the source code below in Notepad + +. This code corresponds to the base of a web page in HTML5:

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

    </ Body>
</ Html>

I put spaces at the beginning of some lines to "shift" tags. It is not mandatory and this has no impact on the display of the page, but it makes the source code more readable. This is called indentation. In your editor, just press the Tab key to get the same result.

Copied to Notepad + +, it should look like this

HTML5 minimal code in Notepad + +

You'll notice that the tags are opened and closed in a specific order. For example, the <html> is the first that is opened and this is also the last that is closed (at the very end of the code with </ html>). The tags must be closed in the opposite direction of opening. An example:
-<html> <body> </ body> </ html>: Correct. A tag which is open to the inside another must also be closed on the inside.
-<html> <body> </ html> </ body>: incorrect tags intermingle.

Uh, there could be an explanation of all the tags that you just copied into the editor, sir?

Of course, you asked so nicely.
Do not be scared seeing all these tags at once, I will explain their role!

The doctype

<! DOCTYPE html>

The very first line is called the doctype. It is essential because it is indicating that it is a HTML web page.
It's not really a tag like any other (it begins with an exclamation point), you can consider that this is sort of the exception that proves the rule.

This line was once the doctype incredibly complex. It was impossible to detain her head. For 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">.
As part of HTML5, it was decided to simplify it, to the delight of webmasters. When you see a tag short doctype (<! DOCTYPE html>), it means the page is written in HTML5.

The </ html>


</ Html>

This is the main tag code. It embraces the entire content of your page. As you can see, the closing </ html> is located at the end of code!

The header <head> and body <body>

A web page consists of two parts:

-The header <head>: this section provides some general information about the page like its title, the encoding (for the management of special characters), etc.. This section is usually quite short. The information in the header are not displayed on the page, these are just general information for the computer. However, they are very important!
-The body <body>: this is where lies the main part of the page. Everything we write here will be displayed on the screen. This is inside the body that we will write most of our code.
For now, an empty body (discussed below). Consider for cons to both tags in the header ...

The encoding (charset)

<meta charset="utf-8" />

This tag specifies the encoding used in your. Html.

Without going into details, as this can quickly become complicated, encoding indicates how the file is saved. It is he who determines how the special characters will be displayed (accents, Chinese ideograms, Japanese, Arabic, etc..).

There are several encoding techniques with weird names and language used according to ISO-8859-1, 775 OEM, Windows-1253 ... One should however be used today as much as possible: UTF-8. This encoding method is used to display without any problems virtually all symbols of all the languages ​​of our planet! This is why I indicated utf-8 in this tag.

It also requires that your file is properly saved in UTF-8. This is the case most often default on Linux but on Windows, you must tell the software generally.

In Notepad + +, go to the menu encoding> Encode in UTF-8 (without BOM) for your file to be saved in UTF-8 from the beginning. This applies only to currently open file.
For failing to do so for each new file, I suggest you go into the Setup menu> Preferences New Document tab / folder. Select UTF-8 without BOM in the list.

If you have a display problem accents later on your web page, is there a problem with encoding. Make sure the tag indicates good UTF-8 and that your file is saved in UTF-8 (your editor is able to tell you, Notepad + + does in the Encoding menu).

The main title of the page


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

The title does not appear in your page but on top of it (often in the browser tab). Save your webpage and open it in your browser. You will see that the title appears in the tab.

You should know that the title also appears in search results.

20 July 2012

Part1: basics of html5 (part6)


Tags and their attributes

Well, it was all too easy. Obviously, it took those pesky computer get involved and complicate things. It is not enough to write "just" text in the editor, you also give instructions to the computer. In HTML, this is done using tags.


HTML pages are filled with what are called tags. These are invisible on the screen to your visitors, but they allow the computer to understand what to display.

The tags are easy to spot. They are surrounded by "chevrons", that is to say, <and> symbols, like this: <tag>

What do they serve? They indicate the nature of the text they enclose. They mean, for example: "This is the page title", "This is an image", "This is a paragraph of text", etc..

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

Tags in pairs

They open, contain text, and close later. Here's what they look like:

<title> This is a title </ title>

We distinguish an opening tag (<title>) and a closing tag (</ title>) indicating that the title ends. This means that the computer for anything that is not between these two tags ... is not a title.

This is not a title <title> This is a title </ title> This is not a title

Orphan tags

These are tags that are most often used to insert an item at a specific location (eg an image). It is not necessary to delimit the beginning and end of the image, it just means the computer to "Insert a picture here."

An orphan tag is written like this:

<image />

Note that the / end is not mandatory. One could write only <image>. Nevertheless, not to be confused with the first type of tag, webmasters recommend this add / (slash) at the end of orphan tags. You'll see me put an / tags to orphan and I recommend you do the same, it's a good practice.


Attributes are a few options tags. They are supplemented to provide additional information. The attribute is placed after the name of the tag and has the most value, like this:

<tag attribut="valeur">

What good is it? Take the tag <image /> we have just seen. Only, it is not used much. We could add an attribute that specifies the name of the image to display:

<image nom="photo.jpg/>

The computer then understand that it should display the image contained in the file picture.jpg.

In the case of a running tag "pairs", one does not put the attributes in the tag and not in the closing tag. For example, this code indicates that the quote is from Neil Armstrong and she dated July 21, 1969:

<Quote auteur="Neil Armstrongdate="21/07/1969">
This is one small step for man, one giant leap for mankind.
</ Quote>

All the tags that we have just seen are fictitious. The real tags have names in English (yes!), we will discover later in this course.

Part1: basics of html5 (part5)



Create a web page with the editor

Come on, let's get into position! As I have told you, we will create our site in a text editor. You had to install one following my advice in the first chapter: it is called Notepad + +, PSPad, jedit, vim, TextWrangler ... whatever. The software has a simple goal: to enable you to write text!

In following this course, I will work with Notepad + +. I will open (Figure below).

Opening Notepad + +

Well, what do we do now? What is written on that blank sheet?
We'll do a little test. I invite you to write what comes into your head, like me in the following figure.

Text in Notepad + +
You can write the same sentence as me or what you want, the goal is to write something.

Now, record the file. For this, it is very simple: as in all programs, you have a File menu> Save. A dialog box asks you where to save the file and under what name. Save it wherever you want. Give the file name you want, ending with. Html, for example test.html, as shown in the following figure.

I recommend you create a new folder in your documents that contain the files of your site. For myself I created a test folder where I put my test.html file.

Now open the file explorer in the folder where you saved your page. You will see the file you just created (Figure below).

The file in Explorer
The icon that represents the file depends on your default web browser. Here, the icon is that of Google Chrome my default browser, but the file may have another icon you. Here for example the icons that appear when your primary browser is Firefox or Internet Explorer (figure below).

Firefox icon file

File icon Internet Explorer

Simply double-click on this file ... and your browser will open and, as the following figure, displays the text you wrote.

The web page displayed

It does not work well, it seems! All text is displayed on the same line when we had written two different lines of text!?

Indeed, well done!
The text appears on the same line when we asked to write on two different lines. What's going on?

In fact, to create a web page it is not enough to just type the text as it has done. In addition to this text, you also write what are called tags, which will give instructions to the computer as "go to line", "display an image", etc..

Part 1: The basics of HTML5(Summary of chapter 1)

-The Web was invented by Tim Berners-Lee in the early 1990s.

-To create websites, we use two computer languages​​:
    -HTML: You can write and organize the page content (paragraphs, headings ...);
    -CSS allows you to format the page (color, size ...).

-There have been several versions of HTML and CSS. The latest versions are HTML5 and CSS3.

-The web browser is a program that displays Web sites. It reads HTML and CSS to know what to display.

-There are many different web browsers: Google Chrome, Mozilla Firefox, Internet Explorer, Safari, Opera ... Each displays a website slightly differently from other browsers.

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

Part1: basics of html5 (part4)



Why are web browsers important?

The browser is the program that allows us to see the websites. As I have explained earlier, the work of the browser is to read the HTML and CSS to display a video output on the screen. If your CSS says "The titles are in red," then the browser will display the titles in red. The role of the browser is essential!

One would not, but a browser is an extremely complex program. Indeed, understanding the HTML and CSS is not an easy task. The main problem, you quickly realize is that different browsers do not display the same site in exactly the same way! It will take you there and do make a habit to regularly check that your site works correctly on most browsers.

Browsers on PC

It is advisable to install multiple browsers on your computer to ensure that its site to work on each one. In general, I recommend to test its website regularly at least on Google Chrome, Mozilla Firefox and Internet Explorer.
Note that Safari and Google Chrome display websites in much the same way. It may not be necessary to test your site on Google Chrome and Safari, although it is always safer.

The figure below shows an overview of the result produced by some of the major browsers on the homepage of Google.

Overview of some browsers

Understand the differences between browsers

As I said earlier, browsers do not always display the same website 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 long lagged behind some CSS features (and paradoxically it was also ahead of some others).

To complicate matters, multiple browser versions co-exist:

-Firefox 2, Firefox 3.5, Firefox 3.6, Firefox 4;
-Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Internet Explorer 9;
-Chrome 8, 9 Chrome, Chrome 10;

Each version supports new features, but if users do not update their (s) browser (s), it becomes a problem for webmasters like you who create websites.
Chrome has largely resolved the problem by setting up automatic updates without user intervention. Firefox users do not always think to upgrade their browsers as Internet Explorer, users are even less incentive to update their browser to the latest versions also require switching to a recent version of Windows (Internet Explorer 9 was not available for Windows XP, for example).

Features managed by different browsers

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

Most of the concerns most often come from older versions of Internet Explorer (IE6, IE7, IE8). You should check how the site appears as the older versions ... Expect the unexpected! Check especially that your site is displayed without error, without trying to get exactly the same rendering on older versions of these browsers.

There is a Windows program called IETester. He can check his site rendering in different versions of Internet Explorer. Note that this program is relatively unstable (it crashes often) but it has the merit to exist.

Browsers on mobile

In most browsers that I have presented, we must know that there are variants of these browsers designed for mobile phones, especially smartphones.
More and more people today consult websites on their mobile phones, we must know a minimum operation of mobile browsers.

In fact, you will not be disoriented: most browsers on smartphones are the same as on computer, in a lighter version suitable for mobile. It depends on the type of phone.

-iPhone :on Apple's iPhone, the Safari Mobile browser is used. This is a light version and yet very complete Safari for PC.
-Android: Android laptops benefit from the Chrome Mobile. Again, this is a mobile friendly version.
-Windows Phone: Windows Phone, there is ... Internet Explorer Mobile! The principle is the same as for previous browsers: it is dedicated to the mobile version.
-Blackberry: Blackberry are exceptions because they have their own browser (there is no equivalent on computer). However, the most recent versions of this browser is based on a common core in Safari and Chrome (this is the Webkit rendering engine). Therefore, the display is generally similar to that proposed by Safari and Chrome.

And mobile browsers support most of the latest features of HTML and CSS. In addition, the system update automated mobile guarantees that users will most often the latest versions.

Please understand that differences exist between these different mobile browsers and it is advisable to test these devices on its site too! In particular, the screen is much narrower, it will verify that your site displays correctly.

The tablets are equipped with the same browser, the screen is just larger. Thus, the iPad comes with Safari Mobile.

Part1: basics of html5 (part3)


The text editor

What software will I need to create my website?
Will I have to break my piggy bank to buy a very complex software that I will take months to understand?

There are actually many software dedicated to creating websites. But, I assure you, you will not have to pay a single penny. Why go for a paid software and complicated, then you already have everything you need at home?

Yes, hang in there because you just need ... Notepad (Figure below)!

Yes this thing can make html pages

Strange but true: one can quite create a website only with Notepad, the text editing software integrated by default in Windows. Besides, I admit, this is how I started myself a few years ago.

However, there are now more powerful software and no one really uses Notepad. We can classify these design software website into two categories:
-The WYSIWYG (What You See Is What You Get - What You See Is What You Get): these are programs that want very easy to use, they can create websites without learning particular language. Among the best known of them: Mozilla Composer, Microsoft Expression Web, Dreamweaver ... and even Word! Their main drawback is often quite poor quality HTML and CSS that is automatically generated by these tools. A good website designer must sooner or later know HTML and CSS, so I do not recommend the use of these tools.
-Text editors: these are programs dedicated to writing code. One can usually use them for multiple languages, not just HTML and CSS. They are proving to be powerful allies for web designers!

You will understand, I will invite you to use a text editor in this course. Here are some tips, whether you're on Windows, Mac OS X or Linux.

On Windows

There are plenty of text editors, I can not present them to you all. However, I invite you to look at Notepad + +, one of the most used among those available for Windows. This software is simple, free and in French.

Notepad + + when you start it (figure below).


I suggest you do the following operation: go to the Language menu> H> HTML. This will allow the software to know that we will enter the HTML.
When you use the software, it will color your code (following figure), which will allow you to more easily identify.

For now, do not worry about what all this gibberish means that you can see. I just wanted to give you a taste of the software.

There are other editors available for Windows. If Notepad + + does not suit you, you can try:
-And many more ... if you search for "Text Editor" on the Web.

Mac OS X

You can try one of the following software:


Text editors are legion Linux. Some of them are installed by default, others can be easily downloaded via the download center (Ubuntu in particular) or by using commands like apt-get and aptitude. Here are some software that you can test:

Part1: basics of html5 (part2)


HTML and CSS: two languages ​​for creating a website

To create a website, you must give instructions to the computer. It is not enough simply to type the text that will appear in the site (as you would in a word processor Word, for example), we must also show where the text, insert images, create links between pages , etc..

The roles of HTML and CSS

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

Why create two languages? One would have sufficed, no?

You must handle two languages ​​that will be twice as complex and twice as long to learn ... but it's not the case! I assure you, if there are two languages ​​is, instead, to make things easier. We will be dealing with two languages ​​that are complementary because they have different roles:

HTML (HyperText Markup Language): it first appeared in 1991 at the launch of the Web. Its role is to manage and organize content. So in HTML you write what needs to be displayed on the page: text, links, images ... You might say: "This is my title, this is my menu, here is the main text of the page , here's an image to display, etc.. ".

CSS (Cascading Style Sheets, also known as Style Sheets): CSS's role is to manage the look of the website (layout, positioning, design, colors, text size ...). This language has complemented the HTML in 1996.

You may have also heard of XHTML. This is a variant of HTML that is more rigorous and that is a little trickier to handle.
Simply put, HTML became the first in 1991. In early 2000, the W3C launched the XHTML indicating that it would be the future ... but did not pierce XHTML as hoped. Back to Basics in 2009: W3C XHTML abandoned and decides to return the HTML to make it evolve.
There is much confusion around these languages, as they are very similar. None is really better than another, it's two ways of doing things. In this course we will work on the latest version of HTML (HTML5) is now the language of the future that everyone is encouraged to use.

You can very well create a website only to HTML, but it will not be very beautiful: the information will appear "rough". This is why the CSS is always complete.

To give you an idea, the following figure shows how looks the same page without CSS and the CSS.

with and without css

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

As you can imagine, the CSS needs an HTML page to run. This is why we will first learn the basics of HTML before you take care of the decoration in CSS.
Your first pages will not be the most aesthetically pleasing, but who cares! This will not last long.

The different versions of HTML and CSS

Over time, HTML and CSS have evolved. In the first version of HTML (HTML 1.0) it was not even possible to display images!

Here is a very brief history of these languages ​​for your general knowledge.

Versions of HTML

-HTML 1: this is the first version created by Tim Berners-Lee in 1991.
-HTML 2: the second version of HTML will appear in 1994 and ended in 1996 with the appearance of -HTML 3.0. This is the version that will lay the groundwork done in the following versions of HTML. The rules and operation of this version are given by the W3C (while the first version was created by one man).
-HTML 3: appeared in 1996, this new version of HTML adds many possibilities to language as tables, applets, scripts, text flow around images, etc..
-HTML 4: This is the most common version of HTML (specifically, it is HTML 4.01). It appears for the first time in 1998 and proposes the use of frames (which cut a web page into multiple parts), more complex tables, improvements on the forms, etc.. More importantly, this version allows for the first time to use style sheets, our famous CSS!
-HTML 5: it is THE latest version. Still not very widespread, it makes a lot of attention because it brings many improvements like the ability to easily include videos, a better layout of content, new features for forms, etc.. This is the version that we will discover together.

Versions of CSS

-CSS a: in 1996, it has the first version of CSS. It lays the foundations of this language which allows to present his web page, such as colors, margins, fonts, etc..
-CSS 2: appeared in 1999 and completed by CSS 2.1, this new version of CSS adds numerous options. We can now use very precise positioning techniques that allow us to display items where desired on the page.
-CSS 3: this is the latest version, which adds features eagerly awaited as the rounded borders, gradients, shadows, etc..

Note that HTML5 and CSS3 are not yet completely finalized versions of the W3C. However, even though there may be minor changes in these languages, I highly recommend you start today with these new versions. Their contributions are numerous and worth every penny. Moreover, many professional web sites today are built on recent versions.

Part 1: The basics of HTML5(part 1)

You've never heard of HTML, or only very loosely?
Do not panic, the explanations come from the first chapter ... practice follows right after!

We begin by presenting how websites work, then we will download all programs (free) to work well.
At the end of this section, you will know already how to insert text, links and images!

Chapter 1

The operation of websites

How do websites work?

No, do not be afraid to ask questions even if you think they are "beasts". It is very important that we talked a little before we get fully into the site design!

I'm sure you check websites daily. To do this, you run a program called the web browser by clicking one of the icons shown in the following figure.

Les icônes des navigateurs web les plus répandus
most common web browsers

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

the website wikipedia

I'm sure you have the habit of using a web browser! Today, everyone knows to go on the Web ... but who really knows how the Web works? How to create websites like this?

I have heard of HTML, CSS, does this have to do with how a website works?


These are computer languages ​​that allow you to create websites. All websites are based on these languages, they are unavoidable and universal today. They are the foundation of the Web. HTML was invented by a certain Tim Berners-Lee in 1991 ...

Tim Berners-Lee still follows closely the evolution of the Web. He created the World Wide Web Consortium (W3C) that defines the new versions of Web-related languages. He also created more recently the World Wide Web Foundation, which analyzes and tracks the Web.

Many people confuse (wrongly) Internet and the Web. You should know that the Web is part of the Internet.
Internet is a great package that includes, among others: the Web, emails, instant messaging, etc..
Tim Berners-Lee is not the inventor of the Internet, he's "only" the inventor of the web.

HTML and CSS are the basis of the functioning of all websites. When you visit a site with your browser, you must know that, behind the scenes, the wheels are activated to allow the website to be displayed. The computer is based on what he said in HTML and CSS to know what to display.

HTML and CSS are two "languages" need to know to talk about making websites. This is the web browser that will make the translation between programming languages ​​and what you will see on the screen.

You're probably wondering why you need to know two languages ​​to create websites? I answer you without in the next post