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

Nous allons nous intéresser à un acteur fondamental du développement web, le couple HTML + CSS (Hyper Text Markup Langage et Cascading Style Sheets).

Le HTML

Définition

L’HTML est un langage informatique utilisé sur l’internet pour créer des pages web.

L’acronyme HTML signifie HyperText Markup Language, ce qui signifie en français “langage de balisage d’hypertexte”.

Mais que balise-t-on ? Et comment ?

Grâce à votre navigateur (Firefox, Chrome, Opera,….), vous allez pouvoir interpréter (=visualiser) les fichiers au format HTML. Un fichier HTML contient du texte avec des balises et permet de créer des liens vers d’autres pages web (=liens hypertextes), vers des photos, des vidéos, formulaires, …

Le langage HTML n’est pas un langage de programmation comme le Python par exemple (pas de conditions “if” ou de boucles “for” …), c’est un langage de description.

Exercice 1 - Ecrire un code HTML

Travail : Pour aborder le langage HTML, nous allons, dans un premier temps, utiliser le site “jsfiddle.net” qui permet de simuler des pages web. Cliquer sur le lien hypertext suivant : jsfiddle.net. Vous devriez voir apparaitre ceci à l’écran :

Image du site jsfiddle.net
Écrivez 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 titre</h1>

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

<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>

<p>Ceci est un autre <strong>paragraphe</strong>. Avez-vous réellement compris ?</p>

Le rôle important des balises

Ce qui s'affiche  :

Pas les balises si vous regardez bien. Elles se reconnaissent à leurs crochets. Il existe les balises ouvrante (de la forme < balise>) et les balises fermantes (de la forme < /balise >).

Ce sont donc des indicateurs utilisés par le navigateur pour distinguer les différentes parties d’un texte. Il est important de respecter le rôle de chaque balise : on parle de la sémantique des balises.

Les balises classiques

Si une balise classique 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
  • < a > : lien hyperthexte, il renvoie à une nouvelle page.
  • < strong > : mettre en évidence un élément important.

Les balises ouvrantes ET fermantes

Ces balises n’ont pas besoin d’être refermée.

< br/ > : permet de sauter une ligne

< img/ > : permet d’insérer une image.

En observant attentivement le code, vous devriez forcément remarquer que toute balise ouverte doit être refermée à un moment ou un autre. La balise ouvrante et la balise fermante peuvent être sur la même ligne ou pas, cela n’a aucune espèce d’importance, la seule question à se poser ici est : ai-je bien refermé toutes les balises que j’ai ouvertes ?

Enfin pour terminer avec les généralités sur les balises, il est important de savoir qu’une structure du type … :

<balise1>
<balise2>
</balise1>
</balise2>

… est interdite. La balise2 a été ouverte après la balise1. Elle devra donc être refermée avant la balise1. En revanche, l’enchaînement suivant est correct :

<balise1>
<balise2>
</balise2>
</balise1>

Le langage CSS

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

Exercice 2 - Ecrire un code CSS

Travail : Dans jsfiddle.net, il est possible d’écrire du code CSS dans la fenêtre en haut à droite. Ecrivez le code suivant puis constatez ce qui change par rapport à tout à l’heure en cliquant sur “Run”

h1 {
text-align: center;
background-color: red;
}

h2 {
font-family: Verdana;
font-style: italic; 
color: green;
}
Il est donc possible de cibler un paragraphe et pas un autre en utilisant la class du paragraphe.

Création de fichiers HTML et CSS

jsfiddle.net est un très bel outil, mais il ne peut pas être utilisé pour la réalisation d’un vrai site internet (ou d’une vraie application web).

Les buts des exercices qui vont suivre seront de créer 2 fichiers :

  • un fichier HTML que vous nommerez : moncv.html (détails, voir exercice 3)
  • un autre fichier CSS que vous nommerez : style.css (détails, voir exercice 4)

Ces 2 fichiers devront être sauvegardés dans le même dossier : c’est important.

Exercice 3 - Création du fichier HTML

Travail :
  • Ouvrir l’éditeur de texte notepad++.
  • Sauvegardez (File/Save as) tout de suite dans “Documents” et en précisant le nom du fichier (moncv.html) ; faites attention à ce que l’extension *.html apparaisse.
  • 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.
  • Écrivez tout le code ci-dessous dans votre éditeur de texte Notepad++ ou autre (sans oublier de sauvegarder quand vous avez terminé).
  • Testez votre code à l’aide d’un navigateur web (Firefox ou Chrome) en “double-cliquant” sur votre fichier moncv.html
  • Changez tous les titres, sous titres et paragraphes en vous inspirant de vous ou de quelqu’un d’autre.
<!doctype html>

<html lang="fr">

<head>

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

</head>

<body>

    <img/ src="ma_photo.jpg">

    <h1>Mes diplômes </h1>

    <h2>Diplôme 1</h2>

    <p>Détails diplôme</p>


    <h1>Mes expériences </h1>

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


</body>

</html >

Remarques à propos du code ci-dessus

Entre les balises body, vous reconnaissez le code des exercices précédents. Tout votre code HTML devra se trouver entre ces 2 balises.

Le reste des balises devraient vous êtes inconnues. Passons-les en revue :

  • La première ligne (<!doctype html>) permet d’indiquer au navigateur que nous utiliserons la dernière version du HTML, le fameux HTML5.
  • La balise html est obligatoire, l’attribut lang=”fr” permet d’indiquer au navigateur que nous utiliserons le français pour écrire notre page.
  • La balise head délimite ce que l’on appelle l’en-tête. L’en-tête contient, dans notre exemple, 2 balises : la balise qui permet de définir l’encodage des caractères (utf-8) et la balise title qui définit le nom de l’onglet de la page dans le navigateur

Exercice 4 - Création du fichier CSS

Travail :

  • 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” (plus bas dans cette page), 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 moncv.html
  • Rien ne se passe ? Cela est normal : vous devez rajouter, dans votre fichier HTML, entre les balises head, la ligne de code ci-dessous. Relancer votre fichier html.
<link rel="stylesheet" href="style.css" />

Pour aller plus loin

Ci-dessous de nombreuses propriétés CSS à attribuer aux balises HTML pour mettre en forme vos textes.

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

Les attributs de balises

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

  • < p class=”para_1″> : l’attribut class permettra de différencier ce paragraphe des autres pour la mise en forme avec les fichiers CSS (voir plus loin)
  • < a href=”lessive.fr”> : l’attribut href indique le site web du lien hyperthexte. Il renvoie à une nouvelle page.

Les balises ouvrantes et fermantes

< img/ src=”mon_image1.jpeg”> : l’ attribut src indique le nom du fichier l’image à ouvrir et donc afficher.

Exercice 5 - Ecrire un code HTML

Travail : Toujours sur le site jsfiddle.net, et toujours dans le cadre HTML, effacer le texte précédent et complétez le avec le code ci-dessous.

Constatez l’influence ou non qu’à l’attribut “para_1” sur l’affichage des paragraphes en cliquant sur “Run”.

<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>

<p>Ceci est un autre <strong>paragraphe</strong>. Avez-vous réellement compris ?</p>

<p class="para_1">Je suis un nouveau paragraphe mais avec l'attribut "para_1. Est-ce que cela change quoi que ce soit ? </p>

Exercice 6 - Ecrire un code CSS

Travail : A la suite de ce que vous avez déjà écrit dans le cadre CSS, écrivez le code suivant puis constatez ce qui change par rapport à tout à l’heure.

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

Cet article a 1 commentaire

Laisser un commentaire