Pierre Le Barbenchon

Tutoriel pour créer ta page web

Voici un moyen simple de créer ta page web sur le même modèle que celle-ci.

Pour créer ta page web, il y a deux types de fichiers : les fichiers HTML pour le texte de chaque page que tu crées et les fichiers CSS pour donner le style que tu veux à ta page.

Pour les élèves de l'ENS, pour mettre ta page en ligne, il faut mettre tous ces fichiers dans un dossier “public_html” que tu dois mettre sur ta session de l'ENS (pour t'aider pour cette étape, je te recommande d'utiliser le tutoriel sur la page de Florian Lemonnier).


Fichier CSS

Télécharge ce fichier CSS. (Le fichier s'ouvre directement avec un traitement de texte, attention à bien l'enregistrer sous l'extension CSS après les modifications)

Dans le fichier, change les trois couleurs : couleurfonce, couleurmedium et couleurpale qui correspondent respectivement à la couleur foncée des bandes sur le côté, à la couleur medium des boutons et à la couleur pâle de l'arrière plan du texte. Les couleurs sont en format hexadécimal (voir sur internet pour avoir le code des couleurs de tes rêves).

Choisis des couleurs qui ne sont pas déjà présentes sur les pages d'Emilie, de Clarence, de Rémi, de François, de Pierre, d'Arthur, d'Alice ou de Lisa afin de diversifier et de personnaliser ta page.

Si tu veux bien, envoie moi un mail afin que je te rajoute à cette liste.


Fichiers HTML

Télécharge ces fichiers HTML : Accueil, Agrégation, Documents, Enseignements. Il faut les ouvrir avec un éditeur de texte qui permet de voir le code HTML.

La page d'accueil doit s'appeler “index.html”, les autres pages s'appellent comme tu veux.

Pour faire un paragraphe, il faut écrire entre les deux balises <p> et </p>

Pour faire une grande ligne séparatrice, il faut écrire <hr>

Pour faire des sauts de ligne, il faut écrire <br>

Pour écrire un titre, il faut écrire le titre entre les balise <h3> et </h3>

Pour faire un lien, il faut écrire <a href="lien ou page sur lequel il faut aller"> texte sur lequel il faut cliquer </a>

Pour mettre une image autour du texte sur le côté droit, il faut écrire <div class="rightbox"><img src="nom_image.png" alt="" width="100px"></div>


Pour aller plus loin

Pour faire des liens vers des fichiers PDF (par exemple), il faut que les PDF se trouvent dans le dossier “public_html” dans lequel sera tes fichiers HTML et ton fichier CSS.

On peut aussi mettre des fichiers dans un sous-dossier “Dossier_exemple” du dossier “public_html” en le précisant dans le fichier HTML avec la commande <a href=“Dossier_exemple/Fichier.pdf”>texte à cliquer</a>