Séance n°1

Fiche d'information

Travail demandé

Utiliser vos connaissances en HTML et en CSS pour vous présenter. Le choix des couleurs et le style des polices sont laissés à l'élève.

Modèle de fiche d'information
Module de la fiche d'information

Langage HTML

Structure d'une page Web

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

Question

Expliquer le rôle de chaque ligne du code précédent.

Réponse

<!DOCTYPE html>

Indique au navigateur la version HTML utilisée dans le document. Ici, on utilise la version 5 du HTML.

<html lang="fr"> ... </html>

Indiquent les limites du document HTML. L'attribut lang="fr" est destiné aux screen-readers et au correcteur orthographique intégré au navigateur.

<head> ... </head>

L'entête du document HTML comporte des informations sur l'encodage du document, les feuilles de style utilisées, le titre du document qui apparait dans la barre du titre du navigateur, etc.

<body> ... </body>

Le corps du document englobe toutes les balises qui seront rendues (affichées) par le navigateur : textes, images, audio, vidéo, etc.

<meta charset="UTF-8">

L'encodage du document est le nombre de bits utilisés pour représenter ses caractères. L'UTF-8 est un encodage variable qui s'étend sur 1 à 4 octets par caractère. C'est, en effet, l'encodage le plus utilisé car il supporte toutes les langues humaines.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Elle indique le moteur de rendu pour les pages HTML destinées à IE.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Elle empêche le navigateur d'un smartphone de faire la mise à l'échelle d'un document HTML destiné, initialement, à un grand écran.

<title>Document</title>

Elle indique le titre affiché dans la barre du titre du navigateur.

Titres & Paragraphes

<h1>...</h1>
<h2>...</h2>
...
<h6>...</h6>

Les titres sont classés selon leurs importances et leurs tailles de 1 à 6, du plus important au moins important, du plus grand au plus petit.

Ils commencent toujours dans une nouvelle ligne et possèdent une marge plus importante qui dépend de leurs niveaux.

<p>...</p>

Les paragraphes sont des balises de bloc. Un nouveau paragraphe commence toujours dans une nouvelle ligne et elle possède une marge par défaut.

Les paragraphes et les titres ne peuvent pas être imbriqué. Un paragraphe ne peut pas contenir un autre paragraphe ou un titre, et inversement.

Conteneurs

<div>...</div>

Utilisé pour le groupement des éléments appartenant à une même entité sémantique.

Paar défaut, un div est un élément de bloc. Il commence toujours sur une nouvelle ligne et n'a pas de marges.

<span>...</span>

Utilisé pour le groupement des éléments apparenant à une même entité sémantique. Un span est un élément inline. Il n'a pas de marge et ne commence pas sur une nouvelle ligne.

Les conteneurs peuvent être imbriqués, sans aucune limite, l'un dans l'autre.

Images

<img src="chemin de l'image" alt="texte de remplacement">

Utilisée pour insérer une image dans le document HTML. Le chemin de l'image doit être spécifié dans l'attribut src. Lorsque le navigateur ne peut pas charger l'image il affiche le texte indiqué dans l'attribut alt. Bien que ce dernier (attribut alt) soit optionnel il est vivement conseillé de le mentionner, car il est destiné aux mal-voyants utilisant un screen reader.

Liens hypertextes

<a href="destination">texte du lien</a>

C'est un texte souligné et clickable qui permet de naviguer entre les pages Web.

Feuilles de styles en cascade CSS

Intégration

Les feuilles de style en cascade sont utilisées pour personnaliser la mise en forme d'un document HTML. Elles peuvent être intégrées de plusieurs manières :

  • Inline : indiquant le style désiré pour chaque élément. 
    <p style="color: red; text-align: center; font-size: 20px">CSS is cool!</p>
  • Embedded : Le style est intégré dans la page à l'aide de la balise <style>...</style>. 
    <style>
p { color: green; text-align: center; font-size: 22pt; }
</style>
  • Linked : Les styles sont enregistrés dans un fichier indépendant de la page HTML et ce fichier est lié, par la suite, au document. 
    <link rel="stylesheet" href="style.css">

Règles de style

La feuille de style est composée de règles de style. Elles possèdent le format suivant :

selecteur { 
  propriété1: valeur1;
  propriété2: valeur2;
  ...
}

On modifie l'apparence d'un élément en modifiant les valeurs de ses propriétés.

Sélecteurs

Le sélecteur indique l'élément ou le groupe d'éléments concernés par une règle de style. Parmi les sélecteurs les plus fréquemment utilisés on cite :

  • Le sélecteur d'élément : il est de la forme suivante et concerne tous les éléments d'une balise donnée. 
    balise {
  propriétés
}

    balise est le nom d'un élément. Exemples : p, h1, etc.

  • Le sélecteur de classe : il est de la forme suivante et concerne tous les éléments qui définissent l'attribut class="classe". 
    .classe {
  propriétés
}
  • Le sélecteur d'id : il est de la forme suivante et concerne l'unique élément qui a définit l'attribut id="iden". 
    #iden {
  propriétés
}
  • Le sélecteur universel (*) : il cible l'ensemble des éléments HTML du document sans exception. Il est fréquemment employé pour réinitialiser les marges internes et externes par défaut du navigateur (CSS Reset) : 
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Mise en forme du texte

font-family: 'Georgia';

Choix de la police de caractères appliquée à un élement.

font-size: 15px;

Indique la taille de la police.

font-style: italic;

Indique si la police est oblique, italique ou normale.

font-weight: bold;

Indique si le texte est gras.

text-align: center;

Choix de l'alignement d'un paragraphe : gauche (left), droite (right), centré (center) ou justifié (justify).

Couleurs

color: couleur;

Choix de la couleur du texte. couleur peut être :

  • Le nom d'une couleur : red , white , black , pink , green , etc.
  • Le code hexadécimal d'une couleur, sur 6 chiffres, au format #rrggbb où rr, gg et bb indiquent l'intensité en hexadécimal de chacune des trois composantes. Exemple, #123456 signifie que l'intensité du rouge est 18, l'instensité du vert est 52 et celle du bleu est 86 ce qui donne : .
  • Le code hexadécimal d'une couleur, sur 3 chiffres, au format #rgb où r, g et b indiquent l'intensité en hexadécimal de chacune des trois composantes. Ce format est un raccourci du format #rrggbb. Par exemple, le code #356 signifie #335566 : .
  • L'intensité des trois composantes rouge, vert et bleu rgb(r, g, b). Exemple : color: rgb(33, 144, 55);
  • L'intensité des trois composantes rouge, vert et bleu auxquelles s'ajoutent le degré de transparence de couleur rgba(r, g, b, a). Exemple : color: rgba(33, 144, 55, 0.5); . La transparence varie de 0 à 1, du transparent à l'opaque. 
background-color: couleur;

Choix de la couleur de l'arrière plan d'un élément.

background: linear-gradient(angle, col1, col2);

Elle définit un dégradé linéaire ayant un angle de angle degrées, allant de -180deg à 180deg, de la couleur col1 à la couleur col2. Exemple : background: linear-gradient(45deg, white, red);

Modèle de boîte (box model)

Toutes les balises de blocs sont considérées comme étant des boîtes.

Une boîte est constituée par :

  • Le contenu de l'élément HTML (content), qui possède une largeur width et une hauteur height.
  • La marge interne (padding)
  • La bordure de l'élément (border)
  • La marge externe (margin)
Modèle de boîte d'un élément HTML
Modèle de boîte d'un élément HTML

width: taille;

La taille indique la largeur d'un élément HTML. Elle peut-être :

  • Absolue : définie en pixels (px), en points (pt = 1/72"), en cm, en mm. Exemple : width: 200px; définit la largeur d'un élément à 200 pixels.
  • Relative : définie en pourcent (%) ou en M em. Par exemple, width: 4em; la largeur de l'élément est de quatre fois l'hauteur de la lettre MMMM. 
height: taille;

La taille indique l'hauteur d'un élément HTML. Elle est semblable à la propriété width. 

padding: top;
padding: top right;
padding: top right bottom;
padding: top right bottom left;

Indique la marge interne d'un élément HTML, entre le contenu de l'élement et sa bordure. Elle peut prendre plusieurs formes :

  • Une seule valeur : 
    padding: top;
    Toutes les marges internes sont égales. Exemple : padding: 10px;
  • Deux valeurs : 
    padding: top right;
    Les marges internes sur les deux axes sont égales (top = bottom) et (right = left). Exemple : padding: 15px 20px;, les marges top et bottom sont de 15 pixels et les marges right et left sont de 20 pixels.
  • Trois valeurs : 
    padding: top right bottom;
    Les marges internes sur l'axe des x sont égales tandis que les autres sont différentes. Exemple : padding: 15px 20px 25px;, la marge top est de 15 pixels, la marge right est de 20 pixels et la marge bottom est de 25 pixels et la marge left est égale à la marge right,
  • Quatre valeurs : 
    padding: top right bottom left;
    Toutes les marges internes sont différentes. Exemple : padding: 15px 20px 25px 30px;, les marges top, right et bottom sont les mêmes que l'exemple précédent, tandis que la marge left est de 30 pixels. 
border: couleur style taille;

Définit une bordure autour d'un élément HTML. couleur définit la couleur de la bordure, styledéfinit le style du trait (solid, dotted, etc) et la taille l'épaisseur du trait. 

border-collapse: collapse | separate;

Spécifique aux tableaux (<table>), elle permet de fusionner les bordures des cellules adjacentes en une bordure unique (collapse) plutôt que de laisser un espace entre elles (separate).

margin: top;
margin: top right;
margin: top right bottom;
margin: top right bottom left;

Elle indique la marge extérieure d'un élément. C'est sa marge avec les éléments voisins. Tout comme la marge interne padding, elle possède aussi plusieurs formes.