Pour toi, mon chéri

Cette page est à toi. Vrai serveur, vraie adresse, kigen.kaziza.fr : n'importe qui sur terre peut la taper et tomber dessus. Ce n'est pas un exercice.

Je ne t'ai pas installé un jouet. Je t'ai installé un endroit vide. Ce qui va s'y trouver, c'est ton affaire, et je n'ai pas l'intention de m'en mêler tant que tu ne me le demandes pas.

À ton âge, je n'avais pas ça. J'aurais bien aimé. Alors voilà : je paie l'électricité, tu fais le reste.

Tu ne peux rien casser. Enfin si, tu peux tout casser. Mais je remets l'ensemble d'aplomb en deux minutes, alors ça revient au même. Casse. Un truc qui marche du premier coup n'a jamais rien appris à personne.

Ce que tu as sous les yeux

Un seul fichier, index.html. Le nom n'est pas décoratif : index, c'est ce que le serveur va chercher quand on ne lui demande rien de précis. C'est la porte d'entrée.

<!doctype html> : première ligne, toujours.
<head> : les réglages, invisibles.
<body> : ce qui s'affiche.
<h1>, <h2> : les titres.
<p> : les paragraphes.
<ul>, <li> : les listes, celle-ci par exemple.
<a> : les liens.
<style> : les habits, tout en haut dans la tête.

Les commentaires, enfin montrés

Je te dois ça depuis le début du fichier. Un commentaire s'ouvre avec . Entre les deux, tu écris ce que tu veux : ça ne s'affichera jamais.

Je ne pouvais pas te l'écrire là-haut, à l'intérieur d'un commentaire : la marque de fin l'aurait refermé sur place. Ici je m'en sors avec < et >, deux codes qui affichent < et > sans que le navigateur les prenne pour de vraies balises. C'est la seule entourloupe de la page. Après, c'est cadeau.

Sers-t'en pour te laisser des notes. Dans six mois, tu reviendras sur une page et tu n'auras aucune idée de ce que tu avais en tête. Le toi d'aujourd'hui peut prévenir le toi de l'année prochaine. Il n'y a que dans ce métier qu'on peut faire ça.

Où chercher

Quand tu bloques sur une balise ou une propriété, tu ne demandes à personne : tu vas voir. Tout est là, avec des exemples que tu peux essayer directement dans la page.

Maintenant :

HTML : les balises, une par une, avec un bouton pour tester.
CSS : les couleurs, les tailles, les positions, les ombres.

Plus tard, quand tu auras faim :

JavaScript : pour que la page bouge et réponde quand on clique.
PHP : pour que le serveur fabrique la page avant de l'envoyer. Tu as déjà une base de données qui t'attend pour ce jour-là.

Fais les deux premiers d'abord. Les deux autres ne servent à rien tant que le HTML et le CSS ne sont pas dans les doigts.

À toi

Change le <h1> plus haut par ton prénom. Enregistre, recharge.
Dans le <style>, remplace #8b2f1d par green. Regarde. Deux choses ont changé d'un coup : trouve pourquoi.
Ajoute un paragraphe à toi tout en bas, avant la signature. Ce que tu veux. C'est ta page.

Et tu viens me montrer. Je regarde pour de vrai, je pose des questions, et on cherche la suite ensemble.

Un jour tu vas me montrer un truc que je ne comprendrai pas. Tu m'expliqueras et je ne suivrai qu'à moitié. J'attends ce jour-là avec impatience. Prends ton temps quand même.

Je t'aime.
Papa