encre à pixels

Bienvenue ! Le premier cours de l'atelier web est arrivé !

 

On dirait peut-être pas comme ça, mais j'ai beaucoup réfléchi à comment « commencer ». Il y a en effet une foultitude de tutoriels déjà présents sur le web, si c'est pour refaire la même chose, autant vous fournir des liens. Je m'appuierai donc pour débuter sur la question de Nasha (merci !) qui demandait en gros : j'ai une image, je veux un site web, je fais comment ?

 

Quelques précisions donc sur « comment ça va se passer » :

• On va partir de zéro. Si vous avez déjà des connaissances de base en HTML/CSS, je ne peux pas promettre que vous n'allez pas vous ennuyer.
• Ce cours va être assez conséquent pour cette raison, accrochez-vous. Si vous visionnez cette page alors que vous êtes crevés/pressés/pas très motivés, peut-être vaut-il mieux garder le lien dans un coin et revenir avec au moins une bonne demi-heure de libre ?
• Je vais adopter la méthode « je vous montre et ça marche », c'est-à-dire que je ne vous enseignerai pas le langage complet avant de passer à la pratique (ce serait un peu trop chiant). On verra ça dans les cours suivants. Je vous fournirai aussi en complément des liens vers des sites qui ont une approche différente, et vous enseigneront la programmation en détail bien mieux que moi.
• Si mon approche ne vous convient pas, rappelez-vous qu'il existe des sites fantastiques comme le site du zéro, spécifiquement pensé pour les gens n'y connaissant que dalle (dans de nombreux domaines).

 

html ou flash ?

Il y a une vraie question, là. Pour un débutant, quand on voit un site web simple ET un site en flash super beau, bourré d'animations on se demande pourquoi on devrait aller vers HTML. Il est aujourd'hui possible de faire avec une page HTML la plupart des choses qu'on peut faire en flash, mais il faut souvent y consacrer du temps et un peu de peine. Alors pourquoi ?

 

Il y a de nombreuses raisons. Tout d'abord, Flash est un logiciel. Même si des geeks fous ont aujourd'hui rendu possible la création de fichiers .swf (fichiers flash) sans ça, Flash, c'est un avant tout une la propriété d'une marque, Adobe, et un logiciel professionnel à 700 dollars tournant uniquement sur un ordinateur récent. D'un point de vue « politique », Flash est donc un outil propriétaire dépendant d'une société qui peut en faire ce que bon lui semble, et c'est mal. Plus pratiquement, flash est à l'origine de pas mal de ralentissements dans les navigateurs web, car il n'est pas directement lu par ceux-ci mais par une extension fournie ... par Adobe. Vous voyez où je veux en venir ?

 

Le HTML, quand à lui, n'est pas un logiciel, encore moins une marque, et il appartient à tout le monde. C'est un simple langage de programmation. Ouvrez un fichier texte, écrivez en HTML, enregistrez-le en .html, vous avez un fichier HTML. Il est lisible par n'importe qui possédant un navigateur ou un éditeur de texte.

 

Pour conclure là-dessus, je vous aiderai sur du flash si j'ai des questions portant spécifiquement dessus (vraiment, hein ! promis !), mais si vous me demandez comment on fait un site web, je vous réponds : en HTML.

 

dans ce cours, nous verrons :

Un peu de théorie, combinée avec un exercice pratique pour vous montrer comment ça marche en vrai. Vous êtes encore là ? Alors c'est parti !

 

html mon ami

Le HTML est un langage simple. Vraiment. Il décrit par essence la structure d'un document. Si on devait changer un code HTML en langage humain, ça donnerait quelque chose comme ça :

 

ça c'est un titre : « un titre »

ça c'est une liste : « menu »

ça c'est un élément de la liste : « accueil »

 

Pas si compliqué ! HTML se charge donc de la structure, et définit le contenu de la page. Comparé à un être humain, HTML, c'est les os et la chair. Le CSS (qu'on verra plus tard), c'est la couleur de la peau, la longueur des cheveux et le maquillage. Vous suivez ?

 

Ensuite, HTML fonctionne sous forme de boites. Des boites les unes dans les autres. Là encore c'est très simple, regardez :

 

 

Voilà. C'est comme ça qu'est organisée une page HTML. Qu'est ce que ça donne dans le langage, concrètement ?

 

Le langage en lui même est organisé en balises. Les balises, ça ressemble à ça :

 

<balise></balise>

 

Ici, la balise de gauche indique le début de la boite, et celle de droite ... la fin. Il y a plein de types de balises, tout ce qui change, c'est le texte : <ul></ul>, <li></li>, <p></p> ... Vous saisissez le principe ?

 

On rajoute une derbière difficulté : il existe des balises qui pour certaines raisons ne peuvent pas en contenir d'autres (une image, un retour à la ligne ...). Dans ce cas de figure on écrit une « balise simple », de cette façon :

 

<balise/>

 

Ça me semble suffisant pour une introduction, alors passons maintenant à la pratique ! Si vous voulez un cours plus complet, attendez le prochain ou reportez-vous aux cours sur le html du site du zéro. Allez, au boulot !

 

exercice pratique

Pour cet exercice on va partir sur une base très simple, un bloc avec du texte dedans. Comme ça :

 

 

On fera la structure d'abord, puis on stylera tout ça. Tout ce que je vais montrer dans l'exemple sera redit et ré-expliqué plus en profondeur quand on attaquera le vrai site.

 

Alors, qu'est ce que ça donne quand on construit un document HTML ? On a deux choses à déclarer tout d'abord. On dit au navigateur « ceci est une page html » grâce à une balise appelée « doctype ».

 

Cette balise est spéciale, ce n'est pas vraiment une balise HTML puisqu'elle est là pour dire quel est le langage de la page, par conséquent elle ne s'écrit pas exactement pareil : globalement, on s'en fout. C'est toujours la même au début d'un document, il vous suffit de l'apprendre par coeur, et puis c'est tout. Voilà ce que ça donne :

 

<!DOCTYPE Html>

 

Ensuite on crée la structure de base, obligatoire, d'un document HTML :

 

<!DOCTYPE Html>

<html>

  <head></head>

  <body></body>

</html>

 

Alors, c'est quoi tout ça ? Déjà vous aurez pu remarquer que je suis allé à la ligne après certaines balises, que j'ai mis des espaces avant <head> et <body> : ça n'a aucune importance ! C'est juste pour faire joli et vous aider à vous y repérer, mais le navigateur lira cette page de la même façon. Actuellement dans la structure on a donc : une balise qui dit « c'est du HTML », et une balise <html> qui contient <head> et <body>. Toutes ces choses sont obligatoires dans un document HTML. La balise qui va nous intéresser pour l'instant s'appelle <body> et c'est là-dedans qu'on va mettre tout ce qui s'affiche dans la page ! Si on se rappelle de l'image d'exemple que j'ai donné, ça nous fait une boite avec 2 textes dedans (de tailles différentes). En HTML :

 

<!DOCTYPE Html>

<html>

  <head></head>

  <body>

    <div>

      <p>un joli exemple</p>

      <h1>n'est-ce pas ?</h1>

    </div>

  </body>

</html>

 

Bon, on se retrouve devant 3 nouvelles balises : <div>, <p> et <h1>. Quelques explications :

 

<div> est une balise sans « sens » particulier. Une boite tous usages, que vous pouvez utiliser quand il n'y a rien de plus intelligent à mettre à la place.

<p> signifie paragraphe. C'est le conteneur de texte pa défaut. C'est fait pour.

<h1> est un titre. En fait, il y a 6 hauteurs de titre différentes (h1, h2, h3 ...) qui permettent de définir une hiérarchie. La hauteur 1 est la plus importante.

 

Est-ce qu'on a fini ? Pas vraiment ! Nous avons l'intention de créer un fichier CSS dans la suite, et pour que le style soit appliqué, il va falloir lier ce fichier à notre page. Pour cela, on va indiquer à notre page HTML : tu as un style à appliquer, voilà son adresse. On va insérer ça dans la partie du fichier HTML qui s'occupe des informations complémentaires sur la page ... La balise <head>. La balise du style est un peu barbare, ne cherchez pas trop à la comprendre cette fois-ci; sachez seulement que l'adresse de la page est après href, ici j'ai appelé la page « style.css ». Ça donne :

 

<!DOCTYPE Html>

<html>

  <head>

    <link rel="stylesheet" type="text/css" href="style.css"/>

  </head>

  <body>

    <div>

      <p>un joli exemple</p>

      <h1>n'est-ce pas ?</h1>

    </div>

  </body>

</html>

 

Désormais, le style sera appliqué à votre page par le navigateur.

 

Bon, hé bien ... On a fini la structure. Déjà ? Oui, comme je l'ai précisé au début, on rentrera plus dans les détails dans les leçons suivantes, là je vous montre. Si vous voulez tester ce que ça donne pour l'instant, il vous suffit de copier mon code dans un fichier appelé exemple.html et de l'ouvrir dans votre navigateur. Sinon je l'ai fait pour vous de mon côté : ici. On passe au style en attaquant le langage CSS !

 

css mon amour

Le principe du CSS est assez simple : on prend un élément de notre page pour cible, et on modifie certains points de son apparence. Là encore, il s'agit d'un simple fichier texte avec une extension en .css. Sa syntaxe ressemble à ça :

 

unebalise{

  couleur:'une couleur';

  fond:'un fond';

}

 

Dans cet exemple on a donc ciblé la balise <unebalise>, et on a dit que sa propriété couleur devait être « une couleur » et sa propriété fond « un fond ». Évidemment, ce n'est qu'un exemple, on ne dit pas vraiment « couleur », « fond » etc.

 

Hé bien voilà, c'est comme ça que ça marche, le CSS. La seule difficulté de ce langage, c'est qu'il y a une liste ahurissante de propriétés à connaître. J'en découvre encore tous les jours. Si vous préférez rentrer dans le langage par vous-même : le site du zéro, une nouvelle fois, vous expliquera clairement les détails du langage.

 

On applique ça à notre exemple ?

 

suite de l'exercice pratique

Comme vous avez pu le voir en allant regarder ma page exemple, pour l'instant ma page ne ressemble à rien ! Ou plutôt elle ressemble à ça :

 

 

 

Pas vraiment ce qu'on cherche ! (L'apparence peut varier selon les navigateurs, étant donné que c'est eux qui décident de l'aspect par défaut des balises). On va commencer par ajouter un peu de couleur : noir pour le fond de page, rose pour la balise <div>. On écrit ça dans notre fichier style.css grâce à la propriété background :

 

body{

  background:#000;

}

div{

  background:#e78;

}

 

Si vous aviez compris le principe, la mise en pratique ne devrait pas trop vous étonner, à part peut-être ... la définition de la couleur (le truc en « #000 »). Pour définir une couleur, on a plein de solutions : définir avec des pourcentages, des valeurs allant de 0 à 255, etc. Pour le web, en général, on utilise un format particulier : l'hexadécimal.

 

Je sens que ça va faire peur à certains. Ne vous en faites pas ! Dans la plupart des logiciels graphiques, votre nuancier vous dira de lui-même quel est le code couleur pour telle ou telle couleur. Le code, c'est en général quelque chose comme « F07887 ». Si vous voulez je vous expliquerai comment ça se lit, c'est pas très compliqué et assez utile, mais on garde ça pour plus tard. Sachez seulement que dans mon exemple, le noir c'est « 000 », le rose « e78 », et qu'on commence un code hexadécimal par le symbole « # ».

 

Notre exemple ressemble maintenant à ça :

 

 

Par défaut, un bloc (comme le <div>) prend toute la largeur de la page. On va changer ça avec la propriété width :

 

body{

  background:#000;

}

div{

  width:400px;

  background:#e78;

}

 

La largeur est exprimée en « px », c'est-à-dire « pixels ». Attention, pas d'espace entre « 400 » et « px » ! En passant, on va lui ajouter une marge intérieure avec padding.

 

body{

  background:#000;

}

div{

  width:400px;

  padding:25px;

  background:#e78;

}

 

Ce qui nous donne :

 

 

Reste à positionner ce bloc comme on le souhaite. Pour cela, on va utiliser les marges extérieures, soit la propriété margin. Une astuce : mettre les marges sur « auto » va ajuster la marge de gauche et de droite sur la même valeur ... C'est à dire centrer notre <div> ! On rajoutera une marge en haut avec margin-top :

 

body{

  background:#000;

}

div{

  width:400px;

  margin:auto;

  margin-top:100px;

  padding:25px;

  background:#e78;

}

 

Ça commence à sérieusement ressembler à notre image !

 

 

Il nous manque cependant la bonne police de caractère. À ce sujet, il faut savoir que le navigateur va en général chercher les polices sur l'ordinateur de la personne qui visite le site, donc à moins que vous sachiez comment faire autrement (mais dans ce cas-là que faites-vous dans un cours de débutant en CSS ?) il vaut mieux ne pas utiliser de fonte fantaisie existant sur 1% des ordinateurs. J'ai donc utilisé la Verdana, présente ... presque partout. On va l'utiliser grâce à la propriété font-family. Je rajouterai « sans-serif » à la fin, ce qui permettra au navigateur de prendre une police de remplacement au cas où vous n'auriez pas la Verdana :

 

body{

  background:#000;

}

div{

  width:400px;

  margin:auto;

  margin-top:100px;

  padding:25px;

  background:#e78;

  font-family:Verdana,sans-serif;

}

 

Le résultat :

 

 

On y est ! Vous pouvez voir la page finie ici.

 

Notre page est prête. Nous sommes passés très vite sur les explications, mais c'était dans le but de vous montrer rapidement, et sans trop vous farcir la tête, la construction d'une page web simple. J'espère que ça vous a donné envie d'en savoir plus, et de suivre le cours suivant, qui s'occupera de réaliser la structure HTML du site proposé par Nasha.

 

Surtout n'hésitez pas à poser des questions sur des éléments que vous n'auriez pas compris, des termes, des passages mal expliqués ... Je serai ravi de vous répondre dans les commentaires ! Merci, et au prochain cours !