Construis ta page de présentation

Objectif : afficher dans ton navigateur une page qui contient un mot, écrit par toi.

À faire

1. Crée un dossier MaPremierePageWeb à un endroit que tu retrouveras.
2. Ouvre ce dossier dans VS Code (menu Fichier → Ouvrir le dossier).
3. Crée dedans un fichier nommé index.html. Attention à l'extension : ce doit être .html, pas .txt.
4. Écris un mot dedans, n'importe lequel, et enregistre (Ctrl+S).
5. Ouvre le fichier dans ton navigateur : double-clic dessus depuis l'explorateur de fichiers.
6. Appuie sur F12 pour ouvrir les outils de développement. Regarde les onglets « Éléments » et « Console » : tu y reviendras toute la journée.

Comment tu sais que c'est bon

• Mon mot s'affiche dans le navigateur.
• Je sais retrouver mon dossier sans chercher.
• J'ai ouvert les outils de développement avec F12 et je vois les onglets « Éléments » et « Console ».

Ressources

• Les outils de développement du navigateurMDN
• Extension « Live Server » : recharge la page à chaque sauvegardeVS Code

Objectif : comprendre les quelques lignes qu'on retrouve en haut de toutes les pages web du monde.

Ces lignes-là, on te les donne : ce sont des conventions, pas quelque chose qui se devine. En revanche, tape-les à la main plutôt que de les copier-coller : c'est comme ça qu'elles rentrent.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ma présentation</title>
</head>
<body>

  <!-- Tout ton contenu viendra ici -->

</body>
</html>

Ce que tu dois pouvoir expliquer

Cherche chacun de ces éléments, c'est le vrai travail de cette étape :

• À quoi sert <!DOCTYPE html> ?
• Que change lang="fr" ? (indice : pense aux traducteurs automatiques et aux lecteurs d'écran)
• Quelle est la différence entre le <head> et le <body> ? Lequel se voit dans la page ?
• Que se passe-t-il si tu enlèves <meta charset="UTF-8"> et que ton texte contient des accents ? Essaie, c'est spectaculaire.
• Où s'affiche le contenu de <title> ?

Comment tu sais que c'est bon

• Ma page affiche le squelette sans erreur, et le titre de l'onglet du navigateur a changé.
• J'ai testé de retirer le charset pour voir ce que ça casse, puis je l'ai remis.
• Je sais expliquer la différence entre <head> et <body>.

Ressources

• La syntaxe HTML de baseMDN
• L'élément <head>MDN
• L'élément <title>MDN

Objectif : toute ta page, en HTML seulement. Ce sera moche. C'est normal et c'est voulu : le CSS viendra à l'étape 3.

À faire

Écris, dans le <body>, le contenu suivant :

• Un titre principal de page
• Ton prénom et ton nom, en sous-titre
• Une phrase qui te décrit, ou une devise
• Une image : ton avatar (voir plus bas) ou une photo
• Une section « À propos de moi » avec un paragraphe
• Une section « Mes centres d'intérêt » avec une liste
• Une citation qui te plaît, avec son auteur
• Un lien vers un site que tu aimes, qui s'ouvre dans un nouvel onglet

Les questions qui font la différence

N'importe qui peut mettre du texte à l'écran. Un développeur choisit quelle balise l'entoure, et c'est ce choix qu'on regardera :

• Combien de <h1> doit-il y avoir dans une page, et pourquoi ?
• Quelle est la différence entre <ul> et <ol> ? Laquelle convient à des centres d'intérêt ?
• Une image a un attribut alt. À quoi sert-il ? Que doit-on y écrire, et que ne doit-on pas y écrire ?
• Pourquoi utiliser <blockquote> pour une citation, plutôt qu'un paragraphe en italique ?
• Quel attribut fait qu'un lien s'ouvre dans un nouvel onglet ? Et pourquoi lui ajoute-t-on presque toujours rel="noopener" ?

<h1>Ma présentation</h1>

<h2>Prénom Nom</h2>
<p><em>« Toujours curieux et prêt à apprendre ! »</em></p>

<img src="https://api.dicebear.com/9.x/avataaars/svg?seed=monavatar"
     alt="Mon avatar" width="150">

<h3>À propos de moi</h3>
<p>
  Je suis passionné(e) par le web et la technologie.
  J'aime découvrir de nouvelles choses et créer des sites internet.
</p>

<h3>Mes centres d'intérêt</h3>
<ul>
  <li>Jeux vidéo</li>
  <li>Musique</li>
  <li>Sport</li>
</ul>

<blockquote>
  « Le succès, c'est tomber sept fois, se relever huit. » (proverbe japonais)
</blockquote>

<p>
  <a href="https://www.youtube.com/" target="_blank" rel="noopener">
    Une vidéo que j'aime
  </a>
</p>

Comment tu sais que c'est bon

• Tous les éléments demandés sont présents et s'affichent.
• Mon image s'affiche vraiment (pas une icône cassée) et son alt décrit ce qu'on y voit.
• Mon lien s'ouvre dans un nouvel onglet.
• Je peux justifier chaque balise que j'ai choisie : pourquoi une liste ici, pourquoi un titre là.

Ressources

• Les titres <h1> à <h6>MDN
• Le paragraphe <p>MDN
• La liste à puces <ul>MDN
• L'image <img>, et son attribut altMDN
• La citation <blockquote>MDN
• Le lien <a>MDN
• Titres et paragraphes : le guideMDN

Objectif : une seule chose, mais elle est cruciale. Il faut que ton fichier CSS soit bien lu par ta page.

À faire

1. Crée un fichier style.css dans le même dossier que ton index.html.
2. Écris-y une seule règle : mets un fond de couleur bien visible sur toute la page (du rouge vif, par exemple, c'est temporaire).
3. Dans le <head> de ton HTML, ajoute la balise qui relie la feuille de style. Cherche « lier une feuille de style CSS » : c'est une ligne, avec deux attributs.
4. Recharge la page. Si le fond est rouge, la liaison fonctionne. Sinon, elle ne fonctionne pas, et tu dois régler ça avant d'écrire une ligne de CSS de plus.

Comment tu sais que c'est bon

• Le fond de ma page a changé de couleur : le CSS est bien branché.
• Je sais expliquer avec mes mots la différence entre ce que fait le HTML et ce que fait le CSS.

Ressources

• Qu'est-ce que le CSS ?MDN
• Commencer avec le CSS : dont comment le relier au HTMLMDN
• L'élément <link>MDN

Objectif : une page agréable à lire. Pas une page spectaculaire.

À faire

Dans l'ordre, du plus utile au plus décoratif :

1. Change la police et la couleur du texte de toute la page.
2. Donne au contenu une largeur maximale et centre-le dans la fenêtre : un texte qui court sur 2 000 pixels est illisible.
3. Ajoute de l'espace : à l'intérieur du bloc, et autour.
4. Donne une couleur à tes titres, différente du texte courant.
5. Rends ton image ronde, et centre-la.
6. Mets ta citation en valeur : italique, couleur plus douce, et un trait vertical à gauche.
7. Enlève le soulignement de tes liens, et fais-le réapparaître au survol.

Les questions à te poser

• Comment vise-t-on tous les paragraphes d'un coup ? Et un seul élément précis ?
• Quelle est la différence entre margin et padding ? (fais le test : mets un fond de couleur sur un bloc, puis change l'un puis l'autre)
• Comment centre-t-on un bloc horizontalement ? Ce n'est pas text-align.
• Comment fait-on un carré parfaitement rond avec border-radius ?
• Qu'est-ce que :hover, et à quoi d'autre pourrait-il servir ?

/* Style global */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f4f8;
  color: #333;
  max-width: 700px;
  margin: 40px auto;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Titres */
h1 {
  text-align: center;
  color: #0066cc;
}

h2 {
  color: #444;
}

/* Image */
img {
  display: block;
  margin: 10px auto;
  border-radius: 50%;
}

/* Liste */
ul {
  list-style-type: square;
  padding-left: 20px;
}

/* Citation */
blockquote {
  font-style: italic;
  color: #555;
  border-left: 4px solid #0066cc;
  padding-left: 10px;
}

/* Lien */
a {
  color: #0099cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

Comment tu sais que c'est bon

• Mon contenu est centré et ne s'étale pas sur toute la largeur de l'écran.
• Mon image est ronde et centrée.
• Mes liens réagissent au survol de la souris.
• Je sais expliquer la différence entre margin et padding, parce que je l'ai testée.

Ressources

• Les sélecteurs CSS : viser les bons élémentsMDN
• Le modèle de boîte : margin, padding, borderMDN
• colorMDN
• background-colorMDN
• font-familyMDN
• border-radiusMDN
• box-shadowMDN
• La pseudo-classe :hoverMDN

Objectif : que la page te ressemble, et que plus personne ne puisse la confondre avec celle du voisin.

À faire · choisis-en au moins quatre

• Change le titre affiché dans l'onglet du navigateur.
• Ajoute un fond coloré derrière tes titres, avec un peu d'espace autour du texte pour que ce soit lisible.
• Change la taille de ton image, ou rends-la carrée à coins arrondis plutôt que ronde.
• Ajoute une bordure arrondie autour du bloc principal.
• Ajoute une nouvelle section de ton choix : « Mes objectifs », « Ce que je veux apprendre », « Mes projets »…
• Utilise une vraie police depuis Google Fonts plutôt qu'Arial.
• Ajoute une favicon : la petite icône dans l'onglet.

Comment tu sais que c'est bon

• J'ai fait au moins quatre personnalisations de la liste.
• Le titre de l'onglet est le mien.
• Ma page ne ressemble à aucun des exemples de ce site.

Ressources

• Google Fonts : polices gratuites, avec le code à collerfonts.google.com
• paddingMDN
• borderMDN

Objectif : livrer quelque chose de propre. C'est la différence entre « ça marche » et « c'est fini ».

À faire

1. Passe ton HTML au validateur du W3C (onglet « Validate by Direct Input », colle ton code). Corrige les erreurs. Les avertissements jaunes sont moins graves, mais lis-les.
2. Vérifie que toutes tes images ont un alt qui décrit vraiment ce qu'on voit.
3. Réduis la fenêtre de ton navigateur jusqu'à la largeur d'un téléphone. Le texte déborde-t-il ? L'image sort-elle du cadre ?
4. Relis ton CSS : reste-t-il des essais inutiles, des couleurs de test, des règles qui ne servent plus ?
5. Le test final : ouvre ton HTML, choisis cinq lignes au hasard et explique-les à voix haute. Toute ligne que tu ne sais pas expliquer est à comprendre, ou à supprimer.

Comment tu sais que c'est bon

• Mon HTML passe le validateur W3C sans erreur rouge.
• Toutes mes images ont un alt utile.
• Ma page reste lisible dans une fenêtre étroite.
• J'ai réussi le test des cinq lignes au hasard.
• J'ai rempli mon journal de bord, bilan compris.

Ressources

• Validateur HTML du W3Cw3.org
• Validateur CSS du W3Cw3.org
• Revoir la syntaxe HTMLMDN