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

  • Post last modified:18 avril 2022
  • Temps de lecture :15 min de lecture
  • Post category:Lycée / SNT

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 dpuis un serveur :

Exemple de code d'un fichier html
Code d'un fichier HTML contenant le texte du site web
Exemple de code d'un fichier css
Code d'un fichier CSS contenant la mise en page de la page web
Exemple d'une page web qui s'affiche sur un navigateur
Page web qui s'affiche dans un navigateur suite à la lecture des fichiers HTML et CSS

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

Capacités et compétences travaillées

Langage et fichiers 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

Avant de créer de notre propre fichier HTML sur ordinateur et donc notre propre page web, nous allons comprendre le fonctionnement du langage HTML à l’aide d’un neticiel qui se trouve sur le serveur du  site « jsfiddle.net » : il permet d’écrire du code html et de visualiser rapidement comment ce code html sera interprété (=lu) par nos navigateurs.

Travail à faire :

  • Cliquer sur le lien hypertext suivant : jsfiddle.net. Vous devriez voir apparaitre ceci à l’écran :
  • 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 ?

Vous devriez voir apparaitre ceci dans la partie « Results » du site jsfiddle.net ; avec quelques anomalies.

Résultat du code html sur le site jsfiddle
  • Rajouter les balises h1 qui manquent pour que le texte « Ceci est un autre grand titre » soit présenté comme un grand titre ; puis appuyer sur Run pour exécuter le code.

Tout texte dans un fichier html doit être balisé. Sinon les retours à la ligne peuvent ne pas se faire, les titres ne seront pas mis en avant etc…

Présentation de quelques balises HTML à connaître

Si une balise est ouverte, elle doit être refermée plus loin.
  • < h1 > puis </ h1 > : Le texte situé entre ces balises h1 est obligatoirement un titre important.
  • < h2 >,</ h3 > : aussi des titres, mais moins importants (sous-titre)).
  • < p > puis </ p > : définit des paragraphes
  • < strong > puis </ 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.

Rappel : Les fichiers HTML d’une page web ne doivent contenir QUE le texte qui sera hiérarchisé à l’aide de balises afin de mieux organiser le contenu. La mise en page (couleur, centré…) et l’insertion de photo viendront plus tard.

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.
  • Écrire 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>

    Mes diplômes

    DNB

    Détails diplôme    
    
    Diplôme à inventer

    Détails diplôme

    Mes stages
    
    Mon stage de 3ieme

    Détails expériences
    
    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 fichier puis sélectionner « Edit with Notepad » ou « ouvrir avec » puis sélectionner votre logiciel.

On savait déjà que les balises ne s’affichaient pas dans la fenêtre d’un navigateur.

  1. Indiquer quelle partie du code HTML sera affichée dans la fenêtre du navigateur.
  2. Quelle partie du code HTML permet de modifier l’onglet affiché en haut de la page web ?

Tout texte html doit être balisé.

  • Rajouter les balises adéquates dans votre code puis tester le en double-cliquant sur votre fichier.
  • Pour affiner votre CV, inspirez-vous de ce modèle : modele_cv.pdf

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

Avant de continuer la création de notre page web avec nos fichiers, nous allons retourner sur le site jsfiddle.net pour comprendre le fonctionnement du langage CSS cette fois-ci.

Travail à faire :

Attention : il faudra qu’il y ait le code html du travail précédent dans le cadre HTML.

  • Copier-coller le code CSS (ci-dessous) dans le cadre CSS en haut à droite.
  • Cliquer sur « Run ». Constater ce qui change par rapport à tout à l’heure.
h1 {
text-align: center;
background-color: red;
}

p {
font-family: monaco;
font-weight: bold; 
color: green;
}
  • Dans le code HTML, enlever les balises h1 qui encadre le premier titre. Appuyer sur Run pour exécuter le code.
  • Le style des paragraphes balisés « p » proposé est plus adapté à des sous-titres balisé « h2 ». Changer cela puis exécuter en appuyant sur Run.
  • Changer la police de caractère des paragraphes « p » (en Comic sans MS, par exemple) et mettez-les en italic. Exécuter.
  1. Même si nous ne sommes pas des experts en anglais, il est assez facile de comprendre le code css. 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.

Travail « Lier le fichier CSS avec le ficher HTML » :

  • Rajouter, dans votre fichier HTML, entre les balises < head >, TOUTE la ligne de code ci-dessous :
<link rel="stylesheet" href="style.css" />

Travail « Modifier la mise en page de votre CV » :

  • 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.

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 fichier 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 fichier 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