> Le Site du Zéro - Informatique > Cours > Tutoriels > Site Web > HTML / CSS > Apprenez à créer votre site web avec HTML5 et CSS3 > Les bases de HTML5 > Comment fait-on pour créer des sites web ? > Lecture du tutoriel

Comment fait-on pour créer des sites web ?

Par

Mathieu Nebra (M@teo21)

Mise à jour : 01/11/2011

Difficulté : Facile Facile

Durée d'étude : 15 minutes

311 502 visites depuis 7 jours, dont 17 401 sur ce chapitre, classé 1/795

Bonjour et bienvenue à toutes et à tous !
Voici donc le premier chapitre de ce cours pour débutants, qui va vous apprendre à créer votre site web !

Nous allons passer quelques temps ensemble, tout dépendra de la vitesse à laquelle vous apprendrez. Si vous lisez ce cours régulièrement et à une bonne vitesse, vous l'aurez terminé en une à deux semaines. Mais si vous avez besoin d'un peu plus de temps, ne vous inquiétez pas : le principal est que vous y alliez à votre rythme, en prenant du bon temps de préférence.

Je me doute que vous vous posez mille questions :

Quels logiciels faut-il pour créer des sites web ?
Que signifient les langages HTML5 et CSS3 ?
Est-ce que tout cela n'est pas trop compliqué et plutôt fait pour les programmeurs ?

Je vous propose de commencer par la question la plus simple mais aussi la plus importante : comment fonctionnent les sites web ?

Retour en haut

Sommaire du chapitre :

Comment fonctionnent les sites web ?
HTML et CSS : deux langages pour créer un site web
L'éditeur de texte
Les navigateurs
Q.C.M.

Retour en haut

Comment fonctionnent les sites web ?

Non, n'ayez pas peur de poser des questions même si vous pensez qu'elles sont "bêtes". Il est très important que nous en parlions un peu avant de nous lancer à fond dans la création de sites !

Je suis certain que vous consultez des sites web tous les jours. Pour cela, vous lancez un programme appelé le navigateur web en cliquant sur l'une de ces icônes :

Les navigateurs web, des programmes qui permettent d'afficher des sites web

Avec le navigateur, vous pouvez consulter n'importe quel site web. Voici par exemple un navigateur affichant le célèbre site web Wikipédia :

Un site web : Wikipédia

Je suis sûr que vous avez l'habitude d'utiliser un navigateur web ! Aujourd'hui, tout le monde sait aller sur le Web... mais qui sait vraiment comment le Web fonctionne ? Comment créer des sites web comme celui-ci ?

J'ai entendu parler de HTML, de CSS, est-ce que ça a un rapport avec le fonctionnement des sites web ?

Tout à fait !

Il s'agit de langages informatiques qui permettent de créer des sites web. Tous les sites web sont basés sur ces langages, ils sont incontournables et universels aujourd'hui. Ils sont à la base même du Web. Le langage HTML a été inventé le premier par un certain Tim Berners-Lee en 1991...

Tim Berners-Lee suit encore aujourd'hui avec attention l'évolution du Web. Il a créé le World Wide Web Consortium (W3C) qui définit les nouvelles versions des langages. Il a par ailleurs créé plus récemment la World Wide Web Foundation, qui analyse et suit l'évolution du Web.

Tim Berners-Lee, inventeur du Web

De nombreuses personnes confondent (à tort) Internet et le Web. Il faut savoir que le Web fait partie d'Internet.
Internet est donc un grand ensemble qui comprend, entre autres : le Web, les e-mails, la messagerie instantanée, etc.
Tim Berners-Lee n'est donc pas l'inventeur d'Internet, c'est "seulement" l'inventeur du Web.

Les langages HTML et CSS sont à la base du fonctionnement de tous les sites web. Quand vous visitez un site avec votre navigateur, il faut savoir que derrière des rouages s'activent pour permettre au site web de s'afficher. L'ordinateur se base sur ce qu'on lui a expliqué en HTML et CSS pour savoir ce qu'il doit afficher :

HTML et CSS sont deux "langues" qu'il faut savoir parler pour créer des sites web. C'est le navigateur web qui fera la traduction entre ces langages informatiques et ce que vous verrez s'afficher à l'écran.
Vous vous demandez sûrement pourquoi il faut connaître 2 langages pour créer des sites web ? Je vous réponds sans plus tarder !

Retour en haut

HTML et CSS : deux langages pour créer un site web

Pour créer un site web, on doit donner des instructions à l'ordinateur. Il ne suffit pas simplement de taper le texte qu'il y aura dans son site (comme on le ferait dans un traitement de texte Word par exemple), il faut aussi indiquer où placer ce texte, insérer des images, faire des liens entre les pages, etc.

Le rôle de HTML et CSS

Pour expliquer à l'ordinateur ce que vous voulez faire, il va falloir utiliser un langage qu'il comprend. Et c'est là que les choses se corsent, parce qu'il va falloir apprendre deux langages !

Pourquoi avoir créé deux langages ? Un seul aurait suffi non ? :euh:

Vous devez vous dire que manipuler deux langages va être deux fois plus complexe et deux fois plus long à apprendre... mais non ! Je vous rassure, s'il y a deux langages c'est au contraire pour faciliter les choses. Nous allons avoir affaire à deux langages qui se complètent car ils ont des rôles différents :

HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce que vous souhaitez que la page affiche : du texte, des liens, des images... Vous direz par exemple : "Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image à afficher, etc.".
CSS (Cascading Style Sheets, aussi appelées Feuilles de style) : le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleur, taille du texte...). Ce langage est venu compléter le HTML en 1996.

Vous avez peut-être aussi entendu parler du langage XHTML. Il s'agit d'une variante du HTML qui se veut plus rigoureuse et qui est donc un peu plus délicate à manipuler.
Pour faire simple, le HTML est apparu le premier en 1991. Début 2000, le W3C a lancé le XHTML en indiquant que ce serait l'avenir... mais le XHTML n'a pas percé comme on l'espérait. Retour aux sources en 2009 : le W3C abandonne le XHTML et décide de revenir au HTML pour le faire évoluer.
Il y a beaucoup de confusion autour de ces langages, alors qu'ils se ressemblent beaucoup. Aucun n'est vraiment meilleur que l'autre, il s'agit de deux façons de faire différentes. Dans ce cours, nous allons travailler sur la dernière version de HTML (HTML5) qui est aujourd'hui le langage d'avenir que tout le monde est incité à utiliser.

Vous pouvez très bien créer un site web uniquement en HTML, mais celui-ci ne sera pas très beau : l'information apparaîtra "brute". C'est pour cela que le langage CSS vient toujours le compléter.

Pour vous donner une idée, voici ce que donne la même page sans CSS puis avec le CSS :

La même page sans CSS et avec CSS

Le HTML définit le contenu (comme vous pouvez le voir, c'est brut de décoffrage !). Le CSS permet, lui, d'arranger le contenu et de définir la présentation : couleur, image de fond, marges, taille du texte...

Comme vous vous en doutez, le CSS a besoin d'une page HTML pour fonctionner. C'est pour cela que nous allons d'abord apprendre les bases du HTML avant de nous occuper de la décoration en CSS.

Vos premières pages ne seront donc pas les plus esthétiques, mais qu'importe ! Ca ne durera pas longtemps.

Les différentes versions de HTML et CSS

Au fil du temps, les langages HTML et CSS ont beaucoup évolué. Dans la toute première version de HTML (HTML 1.0) il n'était même pas possible d'afficher des images !

Voici un très bref historique des langages pour votre culture générale.

Les versions de HTML

HTML 1 : c'est la toute première version créée par Tim Berners-Lee en 1991.
HTML 2 : la deuxième version du HTML apparaît en 1994 et se finira en 1996 avec l'apparition du HTML 3.0. C'est cette version qui posera en fait les bases des prochaines versions du HTML. Les règles et le fonctionnement de cette version sont donnés par le W3C (tandis que la première version a été créée par un seul homme).
HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute de nombreuses possibilités au langage comme les tableaux, les applets, les scripts, le positionnement du texte autour des images etc...
HTML 4 : il s'agit de la version la plus répandue de HTML (plus précisément il s'agit de HTML 4.01). Elle apparaît pour la première fois en 1998, et propose l'utilisation de frames (qui découpent une page web en plusieurs parties), des tableaux plus complexes, des améliorations sur les formulaires etc... Mais surtout, cette version permet pour la première fois l'utilisation de feuilles de style, notre fameux CSS !
HTML 5 : c'est LA dernière version. Encore assez peu répandue, elle fait beaucoup parler d'elle car elle apporte de nombreuses améliorations comme la possibilité d'inclure facilement des vidéos, un meilleur agencement du contenu, de nouvelles fonctionnalités pour les formulaires, etc. C'est cette version que nous allons découvrir ensemble.

Les versions de CSS

CSS 1 : dès 1996, la première version du CSS est utilisable. Elle pose les bases de ce langage qui permet de présenter sa page web, comme les couleurs, les marges, les polices de caractères etc...
CSS 2 : apparue en 1999 puis complétée ensuite par CSS 2.1, cette nouvelle version de CSS rajoute de nombreuses options. On peut désormais utiliser des techniques de positionnement très précises qui nous permettent d'afficher des éléments où on le souhaite sur la page.
CSS 3 : c'est la dernière version, qui apporte des fonctionnalités particulièrement attendues comme les bordures arrondies, les dégradés, les ombres, etc.

Notez que HTML5 et CSS3 ne sont pas des versions encore totalement finalisées par le W3C. Cependant, même s'il peut y avoir des changements mineurs dans ces langages, je vous recommande chaudement de commencer dès aujourd'hui avec ces nouvelles versions. Leurs apports sont nombreux et valent vraiment le coup. D'ailleurs, de nombreux sites web professionnels se construisent aujourd'hui sur ces dernières versions.

Retour en haut

L'éditeur de texte

De quel logiciel je vais avoir besoin pour créer mon site web ?
Vais-je devoir casser ma tirelire pour acheter un logiciel très complexe que je vais mettre des mois à comprendre ?

Il existe effectivement de nombreux logiciels dédiés à la création de sites web. Mais, je vous rassure, vous n'aurez pas à débourser un seul centime. Pourquoi aller chercher un logiciel payant et compliqué, alors que vous avez déjà tout ce qu'il faut chez vous ?

Eh oui, accrochez-vous bien parce qu'il suffit de... Bloc-Notes !

Le logiciel Bloc-Notes

Incroyable mais vrai : on peut tout à fait créer un site web juste avec Bloc-Notes, le logiciel d'édition de texte intégré par défaut sur Windows. D'ailleurs, j'avoue, c'est comme cela que j'ai commencé moi-même il y a quelques années. :honte:

Il y a cependant des logiciels plus puissants aujourd'hui et personne n'utilise vraiment Bloc-Notes. On peut classer ces logiciels de création de site web en deux catégories :

Les WYSIWYG (What You See Is What You Get - Ce Que Vous Voyez Est Ce Que Vous Obtenez) : ce sont des programmes qui se veulent très faciles d'emploi, ils permettent de créer des sites web sans apprendre de langage particulier. Parmi les plus connus d'entre eux : Nvu, Microsoft Expression Web, Dreamweaver... et même Word ! Leur principal défaut est la qualité du code HTML et CSS qui est automatiquement généré par ces outils, souvent d'assez mauvaise qualité. Un bon créateur de site web doit tôt ou tard connaître HTML et CSS, c'est pourquoi je ne recommande pas l'usage de ces outils.
Les éditeurs de texte : ce sont des programmes dédiés à l'écriture de code. On peut en général les utiliser pour de multiples langages, pas seulement HTML et CSS. Ils se révèlent être de puissants alliés pour les créateurs de sites web !

Vous l'aurez compris, je vais vous inviter à utiliser un éditeur de texte dans ce cours. Voici quelques conseils, selon que vous êtes sous Windows, Mac OS X ou Linux.

Sous Windows

Il existe une grande quantité d'éditeurs de texte, je ne pourrai pas tous vous les présenter. Néanmoins, je vous invite à vous pencher sur Notepad++, l'un des plus utilisés d'entre eux sous Windows. Ce logiciel est simple, en français et gratuit.

Site web de Notepad++
Prenez la version Installer et non le Zip

Voici à quoi ressemble Notepad++ lorsque vous le lancez :

Je vous conseille de faire la manipulation suivante : allez dans le menu "Langage" / "H" / "HTML". Cela permettra au logiciel de savoir que l'on va taper du HTML.
Lorsque vous utiliserez le logiciel, il colorera votre code ce qui vous permettra de vous repérer plus facilement :

Pour l'instant, ne vous préoccupez pas de savoir ce que signifie tout ce charabia que vous pouvez voir. Je souhaitais simplement vous donner un aperçu des possibilités du logiciel.

D'autres éditeurs disponibles sous Windows existent. Si Notepad++ ne vous convient pas, vous pouvez essayer :

jEdit
PSpad
ConTEXT
... et bien d'autres si vous recherchez "Editeur de texte" sur le Web.

Sous Mac OS X

Vous pouvez essayer l'un des logiciels suivants :

Sous Linux

Les éditeurs de texte sont légion sous Linux. Certains d'entre eux sont installés par défaut, d'autres peuvent être téléchargés facilement avec le centre de téléchargement (sous Ubuntu notamment) ou via des commandes comme apt-get et aptitude. Voici quelques logiciels que vous pouvez tester :

gEdit
Kate
vim
Emacs
jEdit

Retour en haut

Les navigateurs

Pourquoi le navigateur est important

Le navigateur est le programme qui nous permet de voir les sites web. Si vous lisez ces lignes, c'est donc que votre navigateur est ouvert et que vous l'avez sous les yeux.

Comme je vous l'ai expliqué plus tôt, le travail du navigateur est de lire le code HTML et CSS pour afficher un résultat visuel à l'écran. Si votre code CSS dit "Les titres sont en rouge", alors le navigateur affichera les titres en rouge. Le rôle du navigateur est donc essentiel !

On ne dirait pas, mais un navigateur est un programme extrêmement complexe. Comprendre le code HTML et CSS n'est en effet pas une mince affaire. Le principal problème, vous vous en rendrez vite compte, c'est que les navigateurs n'affichent pas tous les sites exactement de la même façon ! Il faudra vous y faire et prendre l'habitude de vérifier régulièrement que votre site fonctionne correctement sur la plupart des navigateurs.

Les navigateurs sur ordinateur

Téléchargez les navigateurs

Il existe de nombreux navigateurs différents. Voici les principaux à connaître :

Navigateur	OS	Téléchargement	Commentaires
Google Chrome	Windows Mac Linux	Téléchargement	Le navigateur de Google, simple d'emploi et très rapide. C'est le navigateur que j'utilise au quotidien.
Mozilla Firefox	Windows Mac Linux	Téléchargement	Le navigateur de la fondation Mozilla, célèbre et réputé. Je l'utilise fréquemment pour tester mes sites web.
Internet Explorer	Windows	Téléchargement (Déjà installé sur Windows)	Le navigateur de Microsoft, qui équipe tous les PC Windows. Je l'utilise fréquemment pour tester mes sites web.
Safari	Windows Mac	Téléchargement (Déjà installé sur Mac OS X)	Le navigateur d'Apple, qui équipe tous les Mac.
Opera	Windows Mac Linux	Téléchargement	L'éternel outsider. Il est moins utilisé mais propose de nombreuses fonctionnalités.

Il est conseillé d'installer plusieurs navigateurs sur son ordinateur pour s'assurer que son site fonctionne correctement sur chacun d'eux. De manière générale, je conseille de tester son site web régulièrement au moins sur Google Chrome, Mozilla Firefox et Internet Explorer.
Notez que Safari et Google Chrome affichent les sites web quasiment de la même façon. Il n'est pas forcément nécessaire de tester son site sur Safari et Google Chrome, même si c'est toujours plus sûr.

Voici un aperçu de quelques-uns de ces principaux navigateurs sur la page d'accueil de Google :

Télécharger Google Chrome
(Windows, Mac OS X et Linux)

Télécharger Firefox
(Windows, Mac OS X et Linux)

Télécharger Internet Explorer
(Windows uniquement, mise à jour vers la dernière version)

Vous remarquerez qu'ils se ressemblent tous étrangement ! En revanche, sous le capot, des différences (parfois importantes) subsistent dans ces navigateurs...

Comprendre les différences entre navigateurs

Comme je vous le disais plus tôt, les navigateurs n'affichent pas toujours les sites web exactement de la même façon. Pourquoi ? Cela est dû au fait que les navigateurs ne connaissent pas toujours les dernières fonctionnalités de HTML et CSS. Par exemple, Internet Explorer a longtemps été en retard sur certaines fonctionnalités CSS (et paradoxalement, il a aussi été en avance sur quelques autres).

Pour compliquer les choses, plusieurs versions des navigateurs co-existent :

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

Chaque version prend en charge de nouvelles fonctionnalités, mais si les utilisateurs ne mettent pas à jour leurs navigateurs cela devient un problème pour les webmasters comme vous qui créez des sites web.
Chrome a résolu en grande partie le problème en mettant en place des mises à jour automatiques, sans intervention de l'utilisateur. Firefox a des utilisateurs qui ne pensent pas à se mettre à jour, et Internet Explorer a du mal à inciter à se mettre à jour car les dernières versions nécessitent aussi de mettre à jour Windows (Internet Explorer 9 n'est pas disponible pour Windows XP par exemple).

Des sites comme normansblog.de et caniuse.com tiennent notamment à jour une liste des fonctionnalités CSS supportées par les différentes versions de chaque navigateur :

Liste des fonctionnalités supportées par les navigateurs

Comme vous le voyez, c'est... compliqué.

Le plus gros des soucis viendra le plus souvent des anciennes versions d'Internet Explorer (IE6, IE7, IE8). Il faudra vérifier sous ces anciennes versions comment son site s'affiche... Attendez-vous à des surprises ! Vérifiez surtout que votre site s'affiche sans erreurs, sans chercher à obtenir exactement le même rendu sur les vieilles versions de ces navigateurs.

Il existe un programme appelé IETester sous Windows. Il permet de tester son site sous différentes versions d'Internet Explorer. A noter que ce programme est relativement instable (il plante souvent) mais il a le mérite d'exister.

Les navigateurs sur mobile

En plus des navigateurs que je vous ai présentés, il faut savoir qu'il existe des variantes de ces navigateurs que l'on retrouve sur les téléphones portables, en particulier les smartphones.
De plus en plus de personnes consultent aujourd'hui des sites web sur leur portable, il faut donc connaître un minimum le fonctionnement des navigateurs des téléphones.

Safari Mobile sur iPhone

En fait, vous n'allez pas être dépaysés : la plupart des navigateurs sur smartphones sont les mêmes que sur ordinateur, dans une version plus légère adaptée aux mobiles. Tout dépend du type de téléphone.

iPhone : sur l'iPhone d'Apple, le navigateur utilisé est Safari Mobile. Il s'agit d'une version light mais néanmoins très complète de Safari pour ordinateur.
Android : les portables sous Android bénéficient du navigateur Chrome Mobile. Là encore, il s'agit d'une version adaptée aux mobiles.
Windows Phone : sous Windows Phone, on retrouve... Internet Explorer Mobile ! Le principe est le même que pour les précédents navigateurs : il s'agit d'une version dédiée aux mobiles.
Blackberry : les Blackberry font exception, car ils ont leur propre navigateur (il n'existe pas d'équivalent sur ordinateur). Néanmoins, les versions les plus récentes de ce navigateur se basent sur un noyau commun à Safari et Chrome (il s'agit du moteur de rendu Webkit). Par conséquent, l'affichage est en général proche de Safari et Chrome.

Les navigateurs pour mobiles supportent la plupart des dernières fonctionnalités de HTML et CSS. De plus, le système de mise à jour automatisé des mobiles nous garantit que les utilisateurs auront le plus souvent les dernières versions.

Sachez néanmoins que des différences existent entre ces différents navigateurs mobiles et qu'il est conseillé de tester son site aussi sur ces appareils ! En particulier, l'écran étant beaucoup moins large, il faudra vérifier que votre site s'affiche correctement.

Les tablettes tactiles sont équipées des mêmes navigateurs, l'écran étant simplement plus large. Ainsi, l'iPad est équipé de Safari Mobile par exemple.

Retour en haut

Ainsi se termine notre premier chapitre

Nous avons fait tous les préparatifs nécessaires : nous sommes maintenant prêts à rédiger notre première page en HTML dans le prochain chapitre !

Retour en haut

	Aller plus loin
	Apprenez à créer votre site web avec HTML5 et CSS3
	TP : création d'un site pas à pas
	Des techniques modernes pour l'agencement en colonnes

Pseudo	Commentaire
jimi92	# Posté le 25/12/2011 à 17:41:48
	bonjour j'aimerais savoir une chose je travail sur le tutoriel présenté sur le fait de pouvoir créer des liens sur ma première page web. le soucie c'est que quand j'affiche la première page sur internet c'est bon mais quand je veux afficher la page 2 j'ai un message de firefox qui s'affiche vu que j'utilise firefox Fichier introuvable Firefox ne peut trouver le fichier à l'adresse /C:/Users/jedidja973/test/page2.html. vérifiez la syntaxe du nom de fichier (dont le respect des minuscules/majuscules) ; Vérifiez si le fichier n'a pas été déplacé, renommé ou supprimé. quelqu'un pourrait t-il m'aider????
pfdp	# Posté le 26/12/2011 à 19:11:14
	Salut, si ton fichier se trouve dans: ""/C:/Users/jedidja973/test/page2.html"" ET que ta page 1 se trouve dans: ""/C:/Users/jedidja973/test/page1.html"" Alors, tu ne dois mettre que ""<a href="page 2 .php">page 2?</a>"" Si ce n'est pas ton problème, explique mieux et j'essayerai de t'expliquer
novetrine	# Posté le 08/01/2012 à 12:57:36
"peace and love"	sympa le tutos Jouers de World of Warcraft Sur millenium. apprenti programmeur
Vivouille10	# Posté le 13/01/2012 à 15:09:07
	bonjour code blocks marche pour coder en HTML ?
ToXiC_FM7	# Posté le 28/01/2012 à 22:00:54
Cogito Ergo Sum Avis : Très bon	Voilà qui conclut ce premier chapitre pour ma part. Un très bon départ, j'espère continuer ainsi. Note : 20/20 ToXiC_FM7

Les cours phares

Tous les cours par catégories

Autres

Programmation (259 Cours)

Graphisme (29 Cours)

Infographie 3D (15 Cours)

Multimédia (19 Cours)

Réseaux (16 Cours)

Dernières annonces

Annonces à la une

Recrutement à Bac / Bac +1

Recrutement à Bac +2

Recrutement à Bac +3 / Bac +4

Recrutement à Bac +5

Débutez dans la 3D avec Blender

Réalisez votre site web avec HTML5 et CSS3

Cours

Comment fait-on pour créer des sites web ?

Le rôle de HTML et CSS

Les différentes versions de HTML et CSS

Les versions de HTML

Les versions de CSS

Sous Windows

Sous Mac OS X

Sous Linux

Pourquoi le navigateur est important

Les navigateurs sur ordinateur

Téléchargez les navigateurs

Comprendre les différences entre navigateurs

Les navigateurs sur mobile

Partager

Lire aussi