Découverte des langages HTML et CSS d’une page web

  • Post last modified:3 octobre 2021
  • Reading time:9 mins read
  • Post category:Lycée / SNT

L’activité proposée ci-dessous est fortement inspirée des travaux proposés par David Roche (enseignant en lycée) sur son site pixees.fr

Introduction du TP

Lorsque nous naviguons sur l’internet, le plus souvent, nous y consultons les pages web de nos sites préférés. Ces pages web qui s’affichent sur nos navigateurs (firefox, mozilla, chrome, edge …) sont la combinaison de différents fichiers que nous avons téléchargés :

Exemple de code d'un fichier html
Exemple de code d'un fichier html
Exemple de code d'un fichier css
Exemple de code d'un fichier css
Exemple d'une page web qui s'affiche sur un navigateur
Exemple d'une page web qui s'affiche sur un navigateur

Objectifs du TP

En classe de seconde au lycée général et technologique, vous devez :

  • comprendre le code html puis créer et ouvrir un fichier html : GO
  • comprendre le code css puis créer et ouvrir un fichier css : GO

Capacités travaillées

Le langage HTML

L’acronyme HTML signifie HyperText Markup Language, ce qui signifie en français « langage de balisage d’hypertexte ». C’est un langage informatique utilisé sur l’internet pour créer des pages web.

Comprenons le langage HTML

Travail à faire :

Dans un premier temps, pour aborder le langage HTML, nous allons utiliser le site « jsfiddle.net » qui permet d’écrire du code html et de visualiser comment ce code html sera interprété (=lu) par nos navigateurs.

  • Cliquer sur le lien hypertext suivant : jsfiddle.net. Vous devriez voir apparaitre ceci à l’écran :
  • Écrivez ou copier-coller le code HTML ci-dessous dans le cadre HTML (en haut à gauche) de jsfiddle.net, puis appuyer sur « Run » (en haut à gauche).
<h1>Ceci est un grand titre</h1>

<h2>Ceci est un sous titre</h2>

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

Ceci est un autre grand titre

Ceci est un autre <i>paragraphe</i>. Avez-vous compris ?
  • Enlever les balises h1 qui encadre le premier titre puis appuyer sur Run pour exécuter le code.
  • Tout texte html doit être balisé. Rajouter les balises adéquates dans votre code puis appuyer sur Run.
  1. Les balises s’affichent-elles lorsque le code est exécuté (=interprété) par un navigateur ?
  2. A quoi servent les balises dans un code html ?

Présentation de quelques balises HTML

Si une balise est ouverte, elle doit être refermée plus loin.

  • < h1 > : Le texte situé entre ces balises h1 est obligatoirement un titre important.
  • < h2 >, < h3 > : aussi des titres, mais moins importants (sous-titre)).
  • < p > : définit des paragraphes
  • < strong > : mettre en évidence un élément important.

Création d'un fichier HTML

jsfiddle.net est un très bel outil mais il ne peut pas être utilisé pour la création de fichier html et donc d’un vrai site web.

Vous avez aussi pu constater que les navigateurs internets ne permettent pas de modifier le contenu d’une page web : vous ne pouvez pas toucher au code html de la page que vous consultez. Les navigateurs ne peuvent que lire (=exécuter, interpréter) des fichiers html que vous avez téléchargés via l’internet.

Pour créer un fichier html (et donc une page web), suivez le travail ci-dessous :

Travail « Création d’un fichier html » : 

  • Ouvrir l’éditeur de texte notepad++ (ou sublimtexte ou …) qui va nous permettre d’écrire du code html.
  • Écrivez ou copier-coller tout le code ci-dessous dans votre éditeur de texte Notepad++ ou autre.
<!doctype html>

<html lang="fr">

<head>

    <meta charset="utf-8">
    <title>CV NOM Prénom</title>

</head>

<body>

    <h1>Mes diplômes </h1>

    <h2>DNB</h2>

    <p>Détails diplôme</p>
    
    Diplôme à inventer

    Détails diplôme

    <h1>Mes stages</h1>

    Mon stage de 3ieme

    <p>Détails expériences</p>

    Stage à inventer


</body>

</html >
  • Sauvegardez (File/Save as) : idéalement dans le dossier « Documents ». Nommer le fichier « moncv – NOM Prénom.html » ; faites attention à ce que l’extension *.html apparaisse.
  • Fermer la fenêtre de notepad++ puis tester votre code en double-cliquant sur votre fichier :

Une fenêtre d’un navigateur « firefox » ou « Chrome » doit s’ouvrir : tous les fichiers avec l’extension *.html s’ouvre par défaut avec un navigateur web. 

Pour modifier votre code à l’avenir, effectuer un clique-droit sur votre ficher puis sélectionner « Edit with Notepad » ou « ouvrir avec » puis sélectionner votre logiciel.

  • Enlever les balises h1 qui encadre le premier titre puis enregistrer vos modifications puis exécuter le code en double-cliquant sur votre fichier.
  • Tout texte html doit être balisé. Rajouter les balises adéquates dans votre code puis tester le en double-cliquant sur votre fichier.
  1. A quoi servent les balises title ?

Le langage CSS

Le langage HTML n’a pas été conçu pour gérer la mise en page. Cela est possible mais c’est une mauvaise pratique. Le HTML ne devra s’occuper QUE du contenu.

Pour tout ce qui concerne la mise en page et l’aspect « décoratif » (le « style » de la page), on utilisera le langage CSS : Cascading Style Sheets.

Comprenons le langage CSS

Travail à faire :

Dans jsfiddle.net, il est possible d’écrire du code CSS dans la fenêtre en haut à droite (il faudra qu’il y ait le code html du travail précédent qui soit aussi présent)

  • Écrivez ou copier-coller le code CSS ci-dessous puis constatez ce qui change par rapport à tout à l’heure en cliquant sur « Run »
h1 {
text-align: center;
background-color: red;
}

p {
font-family: monaco;
font-style: bold; 
color: green;
}
  • Enlever les balises h1 qui encadre le premier titre puis appuyer sur Run pour exécuter le code.
  • Le style des paragraphes qui est proposé est plus adapté à des sous-titres. Changer cela puis exécuter en appuyant sur Run.
  • Changer la police de caractère des paragraphes (en Comic sans MS, par exemple) et mettez-les en italic. Exécuter.

Meme si nous ne sommes pas des experts en anglais, il est assez facile de comprendre le code css. 

  1. Que permet de modifier « font-family », « color » et « background-color » ?

Présentation de quelques propriétés CSS

Tableau de différentes propriétés css à coder dans un fichier

Création du fichier CSS

Travail « Création du fichier CSS » :

  • Créer un nouveau fichier, toujours avec l’éditeur de texte Notepad++ : File/New
  • Sauvegardez-le (File/Save as) dans le même dossier que votre fichier HTML en précisant son nom : style.css ; faites attention à ce que l’extension *.css apparaisse.
  • En vous inspirant des codes CSS précédents et du tableau « Propriétés CSS » ci-dessus, vous devez mettre :
  1. vos titres principaux en fond gris,
  2. vos titres secondaires en italic, arial et vert.
  3. Pour les paragraphes, faites comme vous le souhaitez.
  • Testez votre code à l’aide d’un navigateur web (Firefox ou Chrome) en “double-cliquant” sur votre fichier html ; si il y a un problème, lisez la suite.

Rien ne se passe ? Cela est normal : vous devez rajouter, dans votre fichier HTML, entre les balises head, la ligne de code ci-dessous.

  • Retestez votre code.
<link rel="stylesheet" href="style.css" />

Pour aller plus loin

Un fichier HTML contient du texte avec des balises et il permet de créer des liens vers d’autres pages web (=liens hypertextes) mais aussi vers des photos, des vidéos, des formulaires, …

Insertion d'un lien hypertexte

Toutes les pages web propose des liens hypertextes : zone d’une page web sur laquelle on clique pour accéder à une autre page web.

Exemple : Le texte souligné ci-contre est un lien hypertexte : Accès au site APOD.tv

Travail à faire :

  • Insérer un lien hypertexte (voir code ci-dessous) dans votre ficher HTML pour enrichir votre CV ; il faut que ce lien est du sens avec votre formation ou votre stage.
<a href="www.phychiers.fr">Accès au site phychiers.fr</a>

Insertion d'une photo

Toutes les pages web sont illustrées avec des photos. Malheureusement, nous ne pouvons pas copier-coller des images directement dans le ficher HTML comme cela est possible de faire avec les logiciels Word ou Writer. Nous devrons insérer une ligne de code qui renvoie un lien vers notre photo.

Travail à faire :

  • Insérer une photo (voir code ci-dessous) dans votre ficher HTML entre les balises body, pour enrichir votre CV ; dans un CV, la seule photo présente est celle du candidat. 

Comment faire ?

  • Copier-coller la photo indiquée par le professeur de préférence (sinon une autre) dans le même dossier que votre fichier html.
  • Il faut que le nom de votre fichier image soit le même que celui dans la ligne de code src= »ma_photo.jpg » ; ou tout autre titre.
  • N’oubliez pas d’enregistrer avant d’exécuter votre fichier pour voir si la photo apparait sur le navigateur.
<img/ src="ma_photo.jpg">

Les attributs de balises (facultatif)

Il est possible de différencier (couleur, police…) des paragraphes entre eux ou des titres eux pour proposer des mises en forme différentes. Pour ce faire, on insère dans une balise ouvrante un ou des attributs.

Exemple pour les balises classiques dans le fichier HTML :

< p class= »para_1″> Mon texte< /p> : l’attribut class permettra de différencier ce paragraphe des autres pour la mise en forme avec le fichier CSS.

Exemple dans le fichier CSS :

.para_1 {
font-style: italic;
color: blue;
}
Quiz sur le code HTML et CSS
Pour tester vos connaissances. A vous de jouer …

La publication a un commentaire

Laisser un commentaire