Note préliminaire importante : à partir de cette étape vous aurez de temps à autre des bouts de code à copier-coller. Ces bouts de code sont joliment présentés mais peuvent « piéger » les débutants. N’utilisez pas la sélection à la souris, choisissez plutôt le lien copier vers le presse-papier, il ne vous restera qu’à classiquement utiliser la commande « coller » là où vous en aurez besoin.

Bien que nous aurons peu ou pas l’occasion par la suite de devoir créer une page de toutes pièces puisque Dotclear s’en occupera pour nous, nous allons le faire aujourd’hui, à la fois pour comprendre comment les pages web sont structurées, vérifier que nous avons bien tous les paramètres d’envoi des fichiers en ligne, tester l’utilisation du client FTP et… s’amuser !

Etape 1 - Création de la page

Version ultra-feignasse

A la fin de cet article vous trouverez en pièce jointe le fichier test.txt[1] ; sans l’ouvrir remplacez txt par html, il sera prêt à être envoyé sur votre hébergement. Je ne vous félicite pas de choisir cette option mais entre feignasses je suis prête à quelque indulgence. Puis passez directement à l’étape numéro 2.

Version : le cambouis ne m’intéresse pas !

Lancez le logiciel d’édition de texte que vous avez installé dans le pas à pas numéro 3, créez un nouveau fichier et inscrivez-y ces lignes :

yash html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
     <title>Ma page de test</title>
     <meta name="description" content="Ceci est mon premier essai de page web." />
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta http-equiv="Content-Language" content="fr" />
</head>
<body>
     <h1>Bientôt mon blog ici !</h1>
     <p>Je suis vraiment trop balèze…</p>
     <p>J'ai réussi à :</p>
     <ul>
          <li>Créer un dossier sur mon ordinateur.</li>
          <li>Installer des logiciels.</li>
          <li>Ouvrir un compte chez un hébergeur.</li>
          <li>M'abonner au <a href="http://abc.dotaddict.org" title="un bon blog pour débuter">blog de l'abc dotclear</a>.</li>
          <li>Créer la page que vous lisez et la mettre au bon endroit.</li>
    </ul>
</body>
</html>

Vérifier que le choix de codage des caractères est bien réglé sur UTF-8 :

  • Avec Smultron c’est dans le menu Texte > Encodage des caractères
  • Sous Linux c’est dans le menu déroulant de la fenêtre Fichier -> Enregistrer sous…
  • Sous Notepad++ c’est dans le menu Format (Encoder en UTF-8 (sans BOM) si document encore vierge, Convertir en UTF-8 (sans BOM) si document déjà garni et enregistré dans un autre format.

Enregistrez ce nouveau fichier dans le répertoire mon_blog créé au premier pas à pas en le nommant test.html. Puis passez directement à l’étape 2.

Version : j’aime bien comprendre ce que je fais !

Lancez le logiciel d’édition de texte que vous avez installé dans le pas à pas numéro 3, créez un nouveau fichier et inscrivez-y ces trois lignes :

yash html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
</html>

Vérifier que le choix de codage des caractères est bien réglé sur UTF-8 :

  • Avec Smultron c’est dans le menu Texte > Encodage des caractères
  • Sous Linux c’est dans le menu déroulant de la fenêtre Fichier -> Enregistrer sous…
  • Sous Notepad++

Enregistrez-le sous le nom test.html et placez-le dans le dossier mon_blog créé au premier pas à pas. Vous venez de créer la carcasse générale de votre page, les portions entre chevrons s’appellent des balises.

La première (qui fait toute la première ligne) indique le type de document et annonce que c’est la syntaxe dite xhtml strict qui sera utilisée.

Les deux suivantes créent la boîte html dans laquelle tout le reste va venir se placer. Notez le slash qui marque la différence entre une balise ouvrante : <html> et la fermante : </html>. Si la première est plus longue que la deuxième c’est simplement qu’elle comporte des précisions[2]. Ce système d’ouverture et de fermeture est commun à toutes les balises html ; certaines d’entre elles sont toutefois dites « auto-fermantes », c’est à dire qu’on les ouvre et qu’on les ferme dans le même espace entre deux chevrons. (Je sens que certains décrochent, voici donc un exemple : <hr /> est une balise auto-fermante).

Dans cette boîte html nous allons glisser deux autres boîtes, ce qui donne :

yash html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
  </head>

  <body>
  </body>
</html>

La première (le head) ne sera pas affichée publiquement : elle contiendra des informations indispensables pour les navigateurs et servira aussi à donner des informations aux robots qui visitent votre site.

La seconde (le body) est la partie qui s’affiche dans les navigateurs, c’est là que vous placerez le contenu de la page.

Le head en détail

On peut mettre des tas de choses dans cette partie (consultez par exemple la source du présent billet que vous êtes en train de lire). Ici on se contente d’un petit minimum en garnissant la partie comprise entre <head> et </head> de cette façon :

yash html
<head>
     <title>Ma page de test</title>
     <meta name="description" content="Ceci est mon premier essai de page web." />
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta http-equiv="Content-Language" content="fr" />
</head>
  • title : le titre de la fenêtre du navigateur (regardez tout en haut) ; ce titre sera également exploité par les lecteurs de news et aussi pour le référencement par les moteurs de recherche.
  • les meta : il y en a ici trois :
    • la première décrit la page (pour les moteurs et les agrégateurs).
    • la deuxième indique le jeu de caractères (on dit aussi codage, François Granger nous prépare un article là-dessus).
    • la troisième (re)précise qu’ici on parle français.
Le body en détail

Et maintenant le contenu de la page, celui que vos visiteurs liront. Remplissons la partie de <body> à </body> pour obtenir ceci :

yash html
<body>
     <h1>Bientôt mon blog ici !</h1>
     <p>Je suis vraiment trop balèze…</p>
     <p>J'ai réussi à :</p>
     <ul>
          <li>Créer un dossier sur mon ordinateur.</li>
          <li>Installer des logiciels.</li>
          <li>Ouvrir un compte chez un hébergeur.</li>
          <li>M'abonner au <a href="http://abc.dotaddict.org" title="un bon blog pour débuter">blog de l'abc dotclear</a>.</li>
          <li>Créer la page que vous lisez et la mettre au bon endroit.</li>
    </ul>
</body>

Examinons-en tous les éléments :

  • h1 : le titre de premier niveau. En xhtml il y a six niveaux hiérarchiques de h1 (le plus important) à h6 le moins important.
  • p : un paragraphe.
  • ul : une liste.
  • li : un élément de liste (on dit aussi un item).

Dans l’un des items de liste on a placé un lien : décortiquons cette portion de code :

<a href="http://abc.dotaddict.org" title="un bon blog pour débuter">blog de l'abc dotclear</a>
  • de <a> à </a> c’est tout le lien ;
  • entre <a> et </a> ce sont les mots sur lesquels le lien sera posé (ici blog de l’abc dotclear) ;
  • la balise <a> possède deux attributs :
    • href=" " la destination du lien se place entre les guillemets de l’attribut href - ici http://abc.dotclear.org ;
    • title=" " le titre du lien se place entre les guillemets de l’attribut title - ici un bon blog pour débuter, c’est la petite étiquette qu’on peut lire au survol de la souris sur un lien : elle est aussi utilisée par les lecteurs d’écran et les robots des moteurs de recherche.

D’autres balises existent bien sûr, il n’y a là que celles le plus couramment utilisées. Si l’exploration de la syntaxe xhtml vous tente, vous pouvez poursuivre votre voyage en maints endroits du web, par exemple sur ces pages.

Étape 2 - Mettre le fichier en ligne

Il est temps maintenant que le monde entier puisse lire la magnifique page que vous avez créée. Pour cela il faut qu’elle soit placée sur un serveur qui publie les pages sur le web. Et ça tombe drôlement bien dis-donc que précisément vous avez pris une location chez un hébergeur disposant de ce type de serveur (la vie est bien faite).

Récupérez, parmi les infos que vous avez gardées de côté depuis le tutoriel #5, le nom du serveur FTP, l’identifiant et le mot de passe qui vont avec, puis lancez votre client FTP. L’ami François vous a préparé une fiche aux petits oignons pour apprendre à transférer des fichiers chez votre hébergeur (voir à la fin de cet article) et connectez votre client FTP à votre espace web.

Vérifiez dans les informations transmises par votre hébergeur si les pages web doivent être placées dans un répertoire spécial (c’est le cas chez OVH par exemple, où il faut placer ses fichiers dans le répertoire nommé www). Si rien n’est précisé c’est que vous pouvez les placer directement sur l’hébergement. Il peut y avoir des cas particuliers pour les hébergements permettant l’abri de plusieurs noms de domaine : généralement il faut en ce cas indiquer dans la console de gestion de votre compte que les fichiers de tel domaine seront placés dans tel répertoire et les fichiers de tel autre domaine dans tel autre répertoire. Si vous pataugez, manifestez-vous nous vous aiderons.

Une fois que vous aurez repéré le bon dossier ou vous être assuré que vous pouvez placer les fichiers directement, envoyez le fichier test.html chez votre hébergeur.

Etape 3 - Admirez le travail

A l’aide de votre navigateur, rendez-vous sur la page http://mon-domaine/test.html (n’oubliez pas de remplacer mon-domaine par votre vrai nom de domaine bien sûr (ou par monlogin.free.fr si vous êtes chez Free).

Si tout va bien vous devriez pousser des cris extasiés en découvrant ça (cliquez sur l’image pour la voir en plus grand) :

Ma première page, première mouture

Whaaaaaaaa ! Mais on peut faire mieux. Lundi prochain on améliorera la présentation, mais pour l’instant vous allez remplacer ce contenu standard par un contenu plus personnel.

Depuis Filezilla, double-cliquez sur le nom du fichier test.html : nous avons réglé les paramètres par défaut pour que le double-clic permette d’éditer le fichier. Si tout se passe bien vous devriez donc le voir s’ouvrir. Apportez-y quelques modifications de votre jus (concentrez-vous bien sur l’obligation que toute balise ouverte soit fermée), sauvegardez et rechargez la page de votre navigateur.

Si vous avez fait des bêtises vous pouvez revenir en arrière en copiant à nouveau le code de l’étape 1.

Compléments

Fiche pratique

Un peu de théorie

  • C’est quoi cette histoire de codage de caractères ? (à venir)

Notes

[1] À télécharger avec clic-droit (ou ctrl-clic) Enregitrer la cible du lien.

[2] On appelle ces éléments complétant une balise des attributs ; ici ils signalent que la langue utilisée est le français, ce qui sera par exemple très utile aux logiciels lecteurs d’écran pour énoncer aux personnes aveugles le contenu de la page avec le bon accent !