Rappel

Débutons par faire un rappel sur ce que nous avions vu en cours jusqu'à présent.

Le rôle de HTML et de CSS

  • HTML(HyperText Markup Language) : fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images… Vous direz par exemple : "Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image à afficher, etc.".
  • CSS(Cascading Style Sheets, aussi appelées Feuilles de style) : le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996.

HTML, les bases

Le rôle de ce langage est de gérer et organiser le contenu. Il s'écrit dans des documents avec l'extension .html.

Grammaire HTML

Un élément HTML s'écrit sous la forme d'une balise. La syntaxe générique est la suivante :

1
<balise attribut="valeur">Contenu de l'élément</balise>

Les éléments HTML n'ayant' pas de contenu peuvent être écrits sous la forme d'une balise orpheline :

1
<balise/>

Un exemple concret de balise paire, un paragraphe :

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

Un exemple concret de balise orpheline, un retour à la ligne :

1
<br/>

Un exemple concret de balise orpheline avec attribut, une image :

1
<img src="adresseImage.jpg" alt="Description de l'image"/>

Les règles qui régissent le langage HTML :

  • Tous les éléments doivent être clos
  • Les éléments HTML peuvent s’imbriquer
  • Les éléments HTML ne doivent pas se chevaucher
  • Les balises doivent être fermées dans le sens inverse de leur ouverture.

Vocabulaire HTML

Nous avons déjà vu les éléments HTML suivants :

  • <p>...</p> : paragraphe
  • <h1>...</h1>: titre de niveau 1
  • <h2>...</h2> : titre de niveau 2
  • ...
  • <h6>...</h6> : titre de niveau 6
  • <br/>: saut de ligne
  • <img src="" alt=""/>: image
  • <a href="" target="">...</a>: lien hypertexte
  • <ol><li>...</li></ol>: liste ordonnée (numérotée)
  • <ul><li>...</li></ul>: liste non ordonnée (à puces) En voici quelques autres :
  • <strong>...</strong>: texte très important
  • <em>...</em>: texte important (mise en emphase)

Ces éléments vous permettent d'écrire et de hiérarchiser votre contenu textuel ainsi que les images. Nous verrons plus loin d'autre éléments HTML qui nous permettront de mieux structurer (mettre en page) notre site web.

Retrouvez l'ensemble des éléments HTML disponibles sur le site des développeurs Mozilla.

Bien démarrer

La page d'accueil d'un site se nomme index.html. Prenez l'habitude de bien structurer vos fichiers. Je vous encourage, pour chaque site que vous créez, de créer un nouveau répertoire (dossier) portant le nom du site. Dans ce répertoire, placer le fichier index.html, un répertoire pages pour les autres pages du site (fichiers .html) , un répertoire img pour les images et un répertoire css qui contiendra vos feuilles de style (fichiers .css).

Pour que votre page web soit valide, elle doit comporter un certain nombre d'éléments obligatoires (cf. Structure globale d'un document HTML5).

On doit d'abord définir le doctype(type de document) et place l'élément racine <html>. Cet élément contient les éléments <head>et <body>. L'élément <head>(en-tête html) contient au minimum les éléments <title> - qui permet de définir le titre de la page affiché dans les moteur de recherche et l'onglet du navigateur - et <meta> avec son attribut charset - qui permet de définir l'encode des caractères. De manière générale, optez pour UTF-8.

Structure HTML minimale :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
    </head>
    <body>

      <!-- Le contenu de votre site -->

  </body>
</html>

CSS, les bases

Le rôle de ce langage est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Il s'écrit dans des documents avec l'extension .css. Un fichier CSS est également appelé une feuille de styles.

Grammaire CSS

La syntaxe générique d'une déclaration CSS est la suivante :

1
2
3
selecteur{
    propriéte:valeur;
}

Un exemple concret de déclaration CSS. Tous les paragraphes en rouge :

1
2
3
p{
    color:red;
}

Il est possible de définir plusieurs propriétés pour un même sélecteur. Exemple, tous les paragraphes en rouge, en taille 14pt et en gras :

1
2
3
4
5
p{
    color:red;
    font-size:14pt;
    font-weight:bold;
}

Nous allons bien sûr pouvoir faire plusieurs déclarations au sein d'une même feuille de style (d'un même fichier .CSS). Schématiquement, une feuille de style CSS ressemble donc à cela :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
selecteur1{
    propriété1:valeur1;
    propriété2:valeur2;
}
selecteur2{
    propriété1:valeur1;
    propriété2:valeur2;
    propriété3:valeur3;
}
selecteur3{
    propriété1:valeur1;
}

Vocabulaire CSS

Il existe des centaines de propriétés css que l'on peut appliquer à des éléments html. En cours, nous avons déjà évoqué les suivantes :

  • color: couleur du texte
  • font-size: taille du texte
  • text-align: alignement du texte
  • font-family: police du texte
  • background-color: couleur d'arrière-plan

Il est impossible de passer en revue toutes les propriétés CSS. De plus, chacune d'elles acceptent des types de valeurs particuliers. Les principales propriétés se trouvent dans les diapos du cours. Pour le reste, je vous encourage à chercher dans la documentation en ligne (ici ou là par exemple) ou passez par les moteurs de recherche.

Bien démarrer

Pour que les styles que définissez à l'intérieur d'une feuille de style (fichier .css), s'applique à une page web (fichier .HTML), il faut lier ces deux fichiers. Cette liaison s'opère dans l'en-tête du fichier HTML (dans l'élément head). 

1
<link rel="stylesheet" href="adresseFeuilleDeStyles.css"/>

Attention

L'adresse relative entre votre fichier HTML et CSS doit correspondre à votre hiérarchie de fichiers.

Dans mon cas, en reprenant la structure de site présentée plus haut, pour appeler le fichier style.css depuis le fichier index.html, je dois entrer dans le dossier CSS puis appeler le fichier style.css.

1
<link rel="stylesheet" href="css/styles.css"/>

Structure HTML minimale avec appel d'une feuille de style : 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
    <link rel="stylesheet" href="css/styles.css"/>
    </head>
    <body>

      <!-- Le contenu de votre site -->

  </body>
</html>

CSS en pratique

Utilisation des web fonts

Je vous rappelle l'intérêt d'utiliser des web fonts lorsque vous définissez des familles de polices à utiliser dans votre site :

  • externaliser la police (gain de place sur votre site) ;
  • tout utilisateur verra cette police même si elle n'est pas installée sur son ordinateur.

Attention toutefois au temps de chargement qui peut vite augmenter si vous charger trop de police de caractère. Que se soit pour des questions de chargement ou d'esthétisme, ne dépassez pas 3 polices différentes sur un même site. N'hésitez pas, cependant à jouer sur la graisse de la police (propriété css font-weight) et/ou sur l'espacement des caractères (proprité css letter-spacing).

Nous avons utilisé en cours le service Google Fonts.

Pour intégrer la police de votre choix à votre feuille de styles :

  • sélectionner une police +
  • dans le "panier" (Family selected), choisissez la méthode @import
  • copiez la ligne commençant par @import url(
  • collez-la au tout début de votre feuille de style CSS
  • copiez la propriété css de la partie Specify in CSS commençant par font-family:
  • copiez-la, dans votre feuille de style, à l'endroit ou vous souhaitez l'utiliser

GoogleFont_import.png

Je vous renvoie également à la partie sur la mise en forme du texte dans ma présentation.

Les couleurs en CSS

Plusieurs propriétés CSS attendent des valeurs de couleur. C'est notamment le cas des propriétés color (couleur du texte) et backgroung-color(couleur d'arrière-plan).

En CSS, il est possible de spécifier les couleurs de 3 manières différentes :

  • utiliser les noms des couleurs telles qu'elles sont définies par le W3C
  • spécifier les composantes rouge, verte et bleu de la couleur avec rgb()
  • spécifier les valeurs RVB en hexadécimal précédé de #

Petite parenthèse sur la notation hexadécimale

Celle-ci est très répandue sur le Web, notamment en CSS car elle a le mérite d'être plus courte à écrire que la notion décimale RGB et elle permet de spécifier des couleurs qui n'ont pas de noms réservés.

Rappelez-vous, nous avions vu qu'une couleur numérique comprenait 3 composantes (rouge, vert et bleu) chacune codée de 0 à 255 unités de valeur.

En RGB, le rouge pur se note : rgb(255,0,0) → rouge : 255 ; vert : 0 ; bleu : 0

En hexadécimal, une couleur est représentée par 3 paires de caractères qui représentent respectivement l'intensité de rouge, vert et bleu qui sont toujours codées sur 255 valeurs. Sachant qu'en hexadécimal, 0 se note 00 et que 255 se note FF, nous codons donc les couleurs de #000000à #FFFFFF. Les 2 premiers caractères représente la composante rouge, les 2 suivants, la composante verte et les 2 derniers la composante bleue.

En hexa, le rouge pur se note : #FF0000 → rouge : FF = 255 ; vert : 00 = 0 ; bleu : 00 = 0

→ Pour en savoir plus sur le système hexadécimal, je vous renvoie sur cette page Wikipedia

→ Retrouvez d'autres informations sur les couleurs Web sur cette page Wikipedia et sur https://htmlcolorcodes.com/fr/

Ainsi, si je souhaite que tous mes titres (élément <h1>) soient de couleur sarcelle (teal en anglais) je peux l'écrire de 3 manières différentes mais équivalentes :

1
2
3
h1{
    color : teal;
}

ou

1
2
3
h1{
    color : rgb(0,128,128);
}

ou

1
2
3
h1{
    color : #008080;
}

Les classes

En CSS, il existe différents types de sélecteurs. Jusqu'à présent, nous avons utlisé des sélecteurs de type. Ce sélecteur permet de cibler les éléments qui correspondent au nom indiqué.

Par exemple, en CSS : p{ ... } permet de cibler tous les éléments de type paragraphe de notre page HTML (<p>).

Comment puis-je alors ne cibler que certains de ces paragraphes ? Je vais pouvoir utiliser les classes. Il s'agit d'ajouter à certains élément HTML un attribut class auquel on donne une valeur (le nom de la classe). Puis d'utiliser en CSS un sélecteur de classe. Ce sélecteur permet de cibler les éléments en fonction de la valeur de leur attribut class.

En HTML :

1
<p class="nomDeLaClasse">...</p>

En CSS : 

1
2
3
.nomDeLaClasse{

}

Contentons-nous pour le moment de ces deux types de sélecteurs. Ils seront suffisants dans la majorité des cas que vous rencontrerez.

Exemples

  • Retrouvez ici, une structure de site vierge que vous pouvez réutiliser.
  • Retrouvez ici, un site plus complet avec plusieurs pages, du contenu et une feuille de style.