Construire sa Première Page Web
Introduction
Vous voulez créer un site web mais vous n'avez jamais cotoyé le langage html ? Or c'est grâce à celui-ci que vous pourrez parvenir à vos fins et nous allons apprendre ici à l'utiliser. Je pars donc du principe que vous ne connaissez rien de la façon dont on crée une page web.
Principe du langage HTML
Présentation du fonctionnement du navigateur
Une page web est avant tout un fichier dont l'extension peut être ".htm" ou ".html". Ainsi lorsque vous tapez l'adresse d'un site, par exemple www.google.fr, le serveur (c'est comme un ordinateur) qui est à l'adresse www.google.fr va envoyer à votre pc la page web qui se nommera "index.html" du site www.google.fr.
Pourquoi la page web s'appelle-t'elle ainsi d'ailleurs ?
C'est un standard, la page d'accueil de n'importe quel site doit en principe s'appeller "index.html" (ou bien "index.htm" c'est la même chose).
Reprenons, une fois cette page envoyée par le serveur sur votre pc, votre navigateur ( = logiciel qui vous permet de naviguer sur internet, ça peut-être Internet Explorer, Firefox, Mozilla ou bien d'autres) va afficher cette page à l'écran.
Que se passe-t'il à cet instant ?
Si la page contenait seulement du texte, par exemple, il serait retranscrit tel quel à l'écran. Dans l'exemple suivant on aurait :
Contenu du fichier "index.html" :
Bonjour tout le monde !
Ce qui apparaît à l'écran :
Bonjour tout le monde
Ici, c'est tout simple, le navigateur ne fait qu'afficher le texte contenu dans le fichier. Mais un site ça n'est pas que du texte non ?
C'est là où le langage HTML intervient. En effet, c'est lui qui va nous permettre de rajouter les images, les liens, l'apparence du texte, les menus, etc...
Comment ?
Grâce à des balises. Voici un exemple de balises :
Ouverture : <b>
Fermeture : </b> Celles-ci permettent de mettre du texte en gras.
D'accord c'est bien joli vous allez me dire, mais j'en fais quoi ?
Pas compliqué du tout, regardez l'exemple :
Contenu du fichier "index.html" :
Bonjour <b>tout le</b> monde !
Ce qui apparaît à l'écran :
Bonjour tout le monde !
Vous avez saisi ?
Tout le texte qui se trouve entre les balises <b> et </b> est en gras à l'écran.
C'était votre premier code HTML, maintenant, il vous faut savoir qu'il vous manque encore quelques trucs à savoir mais ça ne va pas durer.
Structure d'une page web
Avant de se lancer à corps perdus dans la création d'une page avec des balises toutes plus utiles les unes que les autres, il faut savoir qu'une page web, c'est structuré.
Créons notre page
C'est parti, pour créer votre page, vous avez à votre disposition toutes une collection de logiciels spécialisés, mais nous on va y aller tranquillement. Alors ouvrez l'éditeur de texte que vous avez sous la main : Notepad ou Bloc-Notes sur Microsoft Windows, Simpletext ou Textedit sur Mac OS, Gedit ou Glimmer sur Linux.
Enregistrons le (oui le fichier est vide mais peut importe) dans le dossier de votre choix avec le nom : "index.html" (souvenez-vous c'est le standard).
Déclarons notre document
Non, pas de coup de fil à passer ou de lettre à envoyer, déclarer notre document c'est de préciser que c'est une page HTML qu'il y'aura dans le fichier. Cette étape est primordiale, mais à notre niveau de super débutant ça n'est pas nécéssaire de trop s'y attarder.
Tapons donc en toute première ligne du fichier :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Petites explications : cette ligne, c'est la première que le navigateur va lire quand il va traîter la page web, et elle va donc lui préciser qu'il s'agit d'une page web, et que la version du langage HTML est la version 4.01 (c'est la plus récente). On peut utiliser d'autre versions d'HTML (par exemple les versions 2.0 ou 3.2 etc...) mais autant utiliser la dernière.
Les balises
Clarifions tout d'abord l'idée que l'on se fait des balises.
- Il en existe 2 catégories : des balises d'ouvertures et d'autres de fermeture.
- Certaines balises ne nécessitent pas de balise de fermeture, exemple : <br>.
- Elles sont comprises entre un "<" et un ">", exemple : <b>.
- Elle peuvent posseder des attributs, par exemple : <html lang="fr">, ici l'attribut est lang et la valeur de l'attribut est fr (toujours compris entre guillemets).
- Les attributs sont uniquements situés dans les balises d'ouverture, et les balises de fermeture possèdent un "/" (slash) juste après "<", exemple : </b>.
- Les attributs sont en quelque sorte des options de la balise que l'on peut modifier
Toutefois il est très important lorsque l'on utilise des balises à respecter l'ordre d'ouverture et de fermeture. En effet les balises doivent être imbriquées les unes dans les autres, comme ceci :
<balise1>
<balise2>
</balise2>
</balise1>
Mais surtout pas comme cela :
<balise1>
<balise2>
</balise1>
</balise2>
Les balises HTML
Maintenant on va ajouter 2 balises (une d'ouverture et une de fermeture) comme ceci :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
</html>
Vous l'aurez peut-être compris, cela sert uniquement à préciser que le texte situé entre les balises est du langage HTML, et c'est donc à cet endroit qu'on y mettra toute notre page. Plus rien ne sera écrit en dehors de ces balises. L'attribut lang précise la langue dans laquelle est rédigée la page web, ici sa valeur est fr car nous rédigeons la page en français.
Les balises Head et Body
Head et Body sont des mots anglais qui signifient Tête et Corps. Ajoutons ces balises ainsi : (l'ordre et l'organisation sont strictes et ne peuvent être modifiés).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
C'est quoi ces balises ?
Les balises <head> </head> encadrent toutes les "propriétés" de la page web, on peut l'assimiler à un en-tête. On entend par "propriétés" les informations qui concernent la page dans son ensemble, on l'approfondira plus loin.
Tout ce qui est entre ces balises n'apparaît pas à l'écran. On y précisera par exemple le titre de la page grâce aux balises <title> </title> (c'est le titre qui apparaîtra dans la barre de titre du navigateur).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titre de votre page</title>
</head>
<body>
</body>
</html>
Attention, il y a un point très important à ne pas négliger qui est d'annoncer le jeu de caractères utilisés. Rien de bien chinois la dedans, cela est indispensable pour afficher les caractères accentués, car sans cela ils pourraient ne pas être affichés. Nous, les européens, avec nos accents, nous allons utiliser l'encodage ISO-8859-1, ce qui conviendra parfaitement.
Voilà ce que nous allons insérer entre les balises :
<head>
<title>Titre de votre page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
C'est entre les balises <body> </body> que l'on mettera tout le contenu de notre page. Donc si on reprend l'exemple précédent avec "Bonjour tout le monde", la page web "correcte" serait donc :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titre de votre page</title>
</head>
<body>
Bonjour tout le monde !
</body>
</html>
Ce qui nous donne à l'écran :
Yahoo notre première page web !
En espérant que ça vous aura servi !
MadMatt