TP: Création de page web en HTML et CSS

Mise en place

Allez dans votre dossier personnel : sur le Bureau cliquez sur "Ce Pc" puis allez dans le disque Élèves puis dans le dossier prénom.nom, qui est sauvegardé et accessible depuis tous les ordinateurs du lycée. Créez un nouveau dossier (cliquez en haut à gauche sur Nouveau puis dossier) et appelez-le siteweb (sans espaces !). Gardez cette fenêtre ouverte (ne pas la fermer).

Ouvrir le logiciel Notepad++ qui permet d'écrire du code, copiez-collez le code HTML ci-dessous, c'est le minimum de code pour avoir une page valide.

<!DOCTYPE html>
<html>

<head>  
<meta charset="UTF-8">
<title> Ceci est le titre qui s'affiche dans l'onglet (changez ce texte!)</title>
<link rel="stylesheet" href="style.css">
</head>     

<body>
<!-- Ceci est un commentaire, qui n'affiche rien dans la page web (grâce aux symboles au début et à la fin du commentaire).
Supprimez-le et mettez à la place tout le contenu de la page -->
</body>

</html>

Enregistrez le fichier (Fichier->Enregistrer) dans votre dossier siteweb en l'appelant index.html. Cela active la coloration du code car maintenant Notepad++ sait que c'est du langage HTML.

Retournez dans le dossier siteweb, double-cliquez sur le fichier index.html pour l'ouvrir avec Firefox. Vous devez voir une page blanche car il n'y a pas encore de contenu.

Votre travail est maintenant de rajouter toutes les choses présentées ci-dessous sur votre page, en suivant à chaque fois la méthode :

Ajouter le code HTML sur Notepad++
Enregistrez avec le raccourci Ctrl + S (l'icône de l'onglet passe de rouge à bleue)
Actualisez avec le bouton dans Firefox pour voir le résultat.

Ajouter du contenu à la page

La balise head contient des informations d'en-tête sur la page (le code binaire utilisé pour les caractères, le nom du fichier CSS, le titre qui s'affiche dans l'onglet...)
Le contenu de la page, que vous allez rajouter, sera toujours mis à l'intérieur de la balise body, c'est à dire entre la balise ouvrant <body> et la balise fermante </body>

Supprimez les deux lignes de commentaires dans la balise body et ajouter au moins un élément de chaque parmi les balises suivantes. N'oubliez pas d'enregistrer puis tester dans le navigateur le résultat au fur et à mesure.

Les titres

Les titres s'affichent avec les balises h1,h2...h6, pour des titres du plus gros au plus petit.

<h1>Ceci est un grand titre</h1>
<h4>Ceci est un titre de niveau 4</h4>

Le texte avec la balise p

La balise p (comme paragraphe) permet d'afficher du texte comme ceci :

<p>Ceci est un paragraphe.</p>

Si vous passez des lignes dans le code HTML, cela ne se voit pas sur la page web. Pour passer une ligne il faut utiliser la balise auto-fermante br (comme line break ou saut de ligne).

<p>Ceci est un paragraphe.
Ceci s'écrira sur la même ligne. <br> Ceci s'écrira sur une autre ligne</p>

Des liens avec la balise a

Les liens sont utilisés partout sur le web pour passer d'une page à une autre. Ils se créent avec la balise a en mettant dans l'attribut href l'adresse du lien. Le texte entre la balise ouvrante et la balise fermante est celui sur lequel on peut cliquer.

Il y a deux types de liens possibles:

Si le lien est vers un autre site sur Internet, l'adresse commencera par http:// ou https://

<a href="https://fr.wikipedia.org/wiki/Hypertext_Markup_Language">Cliquez pour en savoir plus sur HTML</a>

Si le lien est vers une autre page de votre site, stockée dans le même dossier, il suffit de mettre le nom du fichier dans l'adresse : (c'est comme cela qu'on fait pour avoir un site avec plusieurs pages !)
```
<a href="page2.html">Page suivante</a>
```

Des images avec la balise img

Pour insérer une image, on utilise la balise auto-fermante img avec l'adresse dans l'attribut src. Il y a deux manières de faire ça:

Soit vous téléchargez l'image sur votre ordinateur, et vous la mettez par exemple dans un sous-dossier "images" (par rapport au dossier de votre fichier html). Si votre image s'appelle "ada_lovelace.svg" le code sera :
```
<img src="images/ada_lovelace.svg">
```
Pour afficher cette image
Soit vous prenez l'adresse d'une image sur internet (par exemple avec clic droit et "copier l'adresse de l'image"). Cette solution est moins bonne parce que vous êtes dépendant du fait que l'image reste en ligne sur le site où vous l'avez prise, et le lien peut parfois être très long. Le code sera par exemple :
```
<img src="https://upload.wikimedia.org/wikipedia/commons/b/be/Apsp_dijkstra_graph.png">
```
Ce qui donne :

Enfin, il est recommandé d'ajouter un attribut alt qui décrit l'image, au cas où elle ne s'affiche pas et pour améliorer l'accessibilité aux personnes qui utilisent un lecteur d'écran.

<img src="images/ada_lovelace.svg" alt="Portrait d'Ada Lovelace">

Modifier le style de la page en CSS

Créez un nouveau fichier dans Notepad++, et enregistrez-le au même endroit que le fichier html en l'appelant style.css.

La balise <link rel="stylesheet" href="style.css"> mise dans le HTML indique au navigateur qu'il faut aller chercher le fichier style.css au même endroit comme "feuille de style" (stylesheet).

Une règle CSS est toujours de la forme :

sélecteur
{
    propriété : valeur;
}

Où le sélecteur est un nom de balise html qu'on veut modifier, propriété est une propriété CSS, et valeur est la valeur qu'on veut lui attribuer (on peut modifier plusieurs propriétés à la suite entre les accolades). N'oubliez pas les deux points ":" entre la propriété et la valeur et le point-virgule ";" à la fin de la ligne.

Voici des exemples de règles CSS, à vous de les reprendre en testant leurs effets.

Modification du texte

Changer la couleur du texte, sa taille, la police de caractère:

p
{
    color: red;
    font-size: 18px;
    font-family: Georgia, serif;
}

Centrer les titres h1:

h1
{
    text-align: center;
}

Modifications sur toute la page

Si on veut modifier toute la page, on peut utiliser comme sélecteur la balise body puisque tout le contenu est dedans. Par exemple pour changer la couleur de fond:

body
{
    background-color: lightblue;
}

Modifier des images

Pour modifier la taille d'une image, on peut utiliser les propriétés width (largeur) et height (hauteur) en donnant une valeur en px (pixel) ou en % de la taille originale. Il vaut mieux modifier une seule des deux propriétés, l'autre sera modifiée proportionnellement.

img
{
    width: 30%;
}

Centrer les images (il n'y a pas de propriété toute faite, on est obligés d'utiliser des propriétés d'affichages plus avancées):

img
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Modifier le CSS directement dans Firefox

Si vous avez déjà un fichier css fonctionnel, c'est pratique pour peaufiner le style de votre page de le modifier directement dans Firefox pour voir le résultat tout de suite. Pour cela, ouvrez la console de développement en tapant la touche F12, et dans l'onglet "Éditeur de style" votre fichier css devrait s'afficher. Vous pouvez le modifier, voir les résultats immédiatement, et cliquer sur "enregistrer" à gauche pour que les modifications soient écrites dans le fichier.

Éditeur de style

Pour aller plus loin...

Pour avoir une liste de propriétés CSS classiques, consultez ce fichier pdf.

CSS est un langage complexe (chaque élément est dans une boîte par défaut invisible, la hiérarchie des éléments est importante, un système de classes permet de modifier seulement certaines parties de la page...).

N'hésitez pas si vous avez une idée de ce que vous voudriez à chercher sur internet "Comment faire ? avec CSS"

On peut par exemple avec la pseudo-classe "hover" modifier un élément quand on passe la souris dessus:

a:hover{
  background-color:black;
  color:white;
}