Apprendre le HTML et le CSS3

Non classébbelhamissiLeave a comment

Apprendre rapidement le HTML5 et le CSS3

Cliquez dans la diapo pour progresser mas pas sur un lien.

Apprendre le HTML

Pour ceux qui veulent plus de détails cliquez ici ->   Le HTML5 en long et en large

Le HMTL signifie « HyperText Markup Language ». Il s’agit du langage qui est interprété par tous les navigateurs webs et qui a été inventé pour unifier le travail des développeurs. Le langage contient des markups (balises) qui permettent d’identifier des zones, d’appeler des images, des vidéos, etc. d’où le nom du langage HTML.

HTML 5 (HyperText Markup Language version 5) est la dernière révision majeure du HTML. Cette version a été finalisée en 2014. Il faut noter en parallèle la formidable évolution du CSS avec de nombreuses nouvelles propriétés.
Désormais les choses sont claires : le HTML ne s’occupe que du contenu et le CSS gère la mise en forme. Cependant les balises B,I,S, U (gras, italique, barré, souligné) sont encore admises.

Historique

Créateur : Tim Berners-Lee, en 1989.

3 mars 1989 : Tim Berners-Lee invente le World Wide Web

Podcast / C'est arrivé le. 13 mars 1989 : Tim Berners-Lee invente le ...

Génie de l’informatique, le jeune homme britannique effectue un stage au Cern (le Conseil européen pour la recherche nucléaire) alors qu’il n’a que 25 ans.

Rapidement, il crée les liens hypertextes. Il se rend compte par la suite que les chercheurs du monde entier ont du mal à s’échanger leurs notes et leurs travaux.
Il réfléchit donc à un moyen facile de transférer ces données grâce à Arpanet, l’ancêtre d’internet.
Il invente alors le lien URL, le langage HTML et le protocole HTTP, et donne ainsi naissance au World Wide Web.
C’est le fameux « www » qui se trouve au début des adresses internet. Un système qui s’est depuis généralisé dans le monde entier.

En 1980, il a 25 ans et est engagé pour 6 mois au Cern, le Conseil européen pour la recherche nucléaire.

C’est au cours de ce stage à Genève qu’il met au point le lien hypertexte, qui permet de créer une connexion directe entre un mot-clé et un dossier qui y est rattaché.

Neuf ans plus tard, Tim Berners-Lee s’aperçoit que les chercheurs du monde entier qui travaillent pour le Cern ont du mal à échanger des dossiers et des notes.

Robert Cailliau — Wikipédia
Robert Cailliau

Avec un collègue belge, Robert Cailliau, il réfléchit à une solution.

Le 13 mars 1989, il présente à son supérieur un projet intitulé « Gestion de l’information : Une proposition ».

Il propose d’intégrer le concept de lien hypertexte à Arpanet, l’ancêtre d’internet, qui relie les différents centres de recherche du monde.

Le supérieur de Tim écrit au feutre rouge sur le rapport : « Vague mais prometteur ». Tim a l’autorisation de se lancer dans ses recherches.

Il baptise alors son projet : World Wide Web (la toile mondiale).

Il développe les trois principales technologies du Web.

Les liens URL pour donner une adresse aux pages, le langage HTML pour les afficher et le protocole HTTP pour les lier entre elles.

Ca y est, le Word Wide Web est né.

Il a aussi l’intuition que, pour que son système fonctionne, il faut que son protocole soit universel. Donc gratuit. Il convainc alors le Cern d’ouvrir sa découverte à tout le monde en partageant son travail en open source. Très vite, en décembre 1994, Berners-Lee est débauché par le très prestigieux Massachusetts Institute of Technology, près de Boston, pour tenir la chaire de Computer Communication Compatibility. Il s’établit avec femme et enfants à Concord, à une demi-heure de la capitale de l’Etat. Au MIT, le chercheur acharné poursuit son idée de développer un espace de partage pour tous fondé sur l’interaction. Le www prend définitivement forme.

Pengertian Internet, Sejarah dan Perkembangannya - IDwebhost
De nombreuses personnes confondent (à tort) Internet et le Web. 
Il faut savoir que le Web fait partie d'Internet.
Internet est un grand ensemble qui comprend, entre autres : le Web, les e-mails, la messagerie instantanée, etc.
Tim Berners-Lee n'est donc pas l'inventeur d'Internet, c'est « seulement » l'inventeur du Web.

HTML et CSS

d’après https://www.alsacreations.com/
et  https://www.apprendre-html-et-css.com/

HTML 5 (HyperText Markup Language version 5) est la dernière révision majeure du HTML. Cette version a été finalisée en 2014. Il faut noter en parallèle la formidable évolution du CSS avec de nombreuses nouvelles propriétés.
Désormais les choses sont claires : le HTML ne s’occupe que du contenu et le CSS gère la mise en forme. Cependant les balises B,I,S, U (gras, italique, barré, souligné) sont encore admises.

Comment organiser ses fichiers ?

Maintenant que nous sommes équipés pour coder, nous allons devoir créer un environnement pour y mettre nos fichiers.

En ce qui concerne le HTML et le CSS, vous pouvez coder où vous voulez sur votre ordinateur. Je vous invite donc à créer un dossier par projet, dans lequel vous allez retrouver les fichiers de votre site internet.

Créez donc un dossier nommé : Mon premier site.
À l’intérieur, vous allez trouver 3 dossiers et 2 fichiers :

  • un dossier nommé images,Notre arborescence de fichiers.
  • un dossier nommé fonts,
  • un dossier nommé js,
  • un fichier nommé index.html,
  • un fichier nommé style.css.

 

Notre arborescence de fichiers.

LE DOSSIER IMAGES

Ce dossier va contenir toutes les images de votre site.
Attention ! Il est important de mettre les images dans ce dossier. Si vous voulez utiliser une image de votre bibliothèque de photos, copiez-la et collez-la dans ce dossier.

En effet, si vous laissez votre photo ailleur sur votre disque dur, lors de la mise en production celle-ci ne sera pas mise en ligne et les internautes ne pourront pas la voir !

LE DOSSIER FONTS

Ce dossier contiendra les polices de caractère utilisées sur votre site internet. En effet, les internautes n’ont pas forcement les mêmes polices d’installées que vous. Pour qu’ils puissent voir la même chose que vous sans avoir à installer de nouvelles fonts, nous allons les mettre à disposition sur notre site.

LE DOSSIER JS

Ce dossier contiendra les codes en javascript de votre site. Nous ne verrons pas dans ces cours comment coder en JS, mais vous allez rapidement en avoir besoin 😉

LE FICHIER INDEX.HTML

Il s’agit de la page d’accueil de votre site.
Attention ! Il est important de nommer ce fichier index. Il s’agit d’une norme, tous les serveurs cherchent en premier un fichier nommé comme ça. S’il n’y en a pas, un message d’erreur apparaîtra.

Notez l’extension de fichier .html
Tous nos fichiers de code HTML auront cette extension.

Pour créer ce fichier :

  1.  Ouvrez SubliText 3.
  2.  Créez une nouvelle page avec Ctrl + N.
  3.  Enregistrez cette page avec Ctrl + S.
  4.  Dans la boite de dialogue qui vient d’être ouverte, sélectionnez le dossier Mon premier site et nommez le index.html.

LE FICHIER STYLE.CSS

Il s’agit du fichier dans lequel nous allons coder en CSS.
Il est important de noter que le HTML et le CSS ne se codent pas dans le même fichier.

Pour créer ce fichier, la manipulation est la même :

  1.  Ouvrez SubliText 3.
  2.  Créez une nouvelle page avec Ctrl + N.
  3.  Enregistrez cette page avec Ctrl + S.
  4.  Dans la boite de dialogue qui vient d’être ouverte, sélectionnez le dossier Mon premier site et nommez le style.css.

Nous allons commencer notre apprentissage du HTML qui permet  la création de sites WEB par le plus important : le contenu !

HTML est un langage à balises

L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web.

C’est un langage de balisage permettant d’écrire de l’hypertexte, d’où son nom.

En informatique, les langages de balisage représentent une classe de langages spécialisés dans l'enrichissement d'information textuelle.

Ils utilisent des balises, unités syntaxiques délimitant des séquences de caractères à l'intérieur d'un flux de caractères (par exemple un fichier texte).

L'inclusion de balises permet de transférer à la fois la structure du document et son contenu.

 Cette structure est compréhensible par un programme informatique, ce qui permet un traitement automatisé du contenu.

HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des programmes informatiques.

Il permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l’accessibilité du web.

Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de style en cascade).

HTML est initialement dérivé du Standard Generalized Markup Language (SGML).

Les pages créées ne seront pas très agréables à voir mais elles seront lisibles par tous : autant par les navigateurs graphiques ou textes / oraux / brailles, que des moteurs de recherches et autre robots d’indexation…

HTML signifie HyperText Markup Language.

En clair, c’est un langage (format de fichier) qui permet d’écrire des pages internet, et cela au moyen de balises (Markup, en anglais).

Exemple : pour indiquer un titre, on utilise la balise H1.

   On dit que ce texte est contenu dans la balise H1. 

  En pratique, il est entouré par deux morceaux de textes : <h1>Mon titre</h1>.

  On dit que <h1> est la balise ouvrante, et </h1> la balise fermante qui correspond à la   première.

Il existe des balises pour entourer les titres, les paragraphes, les liens, les listes, les tableaux, les cellules de tableaux, les images, etc.

Les balises peuvent s’imbriquer les unes dans les autres pour former une hiérarchie.

Exemple courant : une liste est décrite par une balise UL, et chaque ligne est délimitée par une balise LI, qui est comprise à l’intérieur de la balise de liste, comme nous le verrons plus tard.

En HTML il existe deux sortes de balises :

Les blocs : On passe à la ligne avant et après le bloc. Il s’agit des paragraphes.
Les blocs peuvent contenir d’autres blocs, mais aussi des passages en ligne,

Les passages en ligne : pour donner la signification d’un mot ou groupe de mots à l’intérieur d’un bloc ou paragraphe, ou d’un autre passage en ligne : on ne va évidemment pas à la ligne.
Ceux-ci ne peuvent contenir que des balises elles-mêmes en ligne.

Les balises de titre, de paragraphe, de liste et de ligne de liste sont des balises « bloc » : elles occupent 100 % de la largeur de la page, et le contenu débute toujours une nouvelle ligne.

Il est aussi à noter que les balises peuvent être imbriquées, comme c’est le cas de la balise de liste et des balises de « ligne de liste ».

Les balises en ligne, quant à elles, se fondent dans le texte et n’ont pas forcément une forme rectangulaire fixe, comme c’est le cas du lien de la figure : la balise est découpée en deux morceaux à cause du retour à la ligne.

Les balises en ligne sont par exemple des liens, des balises permettant d’insister sur une partie du texte (mise en gras, italique…) ou même des images.

Par défaut, les images se fondent dans le texte, à la manière des émoticônes dans une discussion en ligne.

Voici un schéma récapitulatif de la différenciation des balises dites « bloc » et « en ligne ».

Maintenant que le navigateur sait cela, nous rentrons dans la structures balisée du HTML : on commence par ouvrir une balise <html>, et on la referme à la fin du fichier avec </html> : après cette balise de fin, plus rien ne doit apparaître.

Voici le squelette (mince, pour l’instant) de toute page HTML

À l’intérieur (entre la balise ouvrant et fermante), on trouve :

Un entête (<head> en anglais ; idem : il faut le refermer avec </head>) qui contient des descriptions et informations annexes qui ne sont pas affichées : se sont les métadonnées,

Puis, un corps (<body> et on referme aussi </body>) : c’est ce qui sera affiché ou lu par les navigateurs.

Dans notre entête, se trouvent des métadonnées.

Pour commencer on ne verra que la plus importante : la balise title pour indiquer au navigateur le titre à afficher dans la barre de titre de la fenêtre, et pour indiquer aux moteurs de recherche le titre à afficher lorsque votre page sera retournée dans les résultats d’une recherche.

<title>Ceci est le titre de la page</title>

Pour le moment, rien n’est encore affiché dans la fenêtre du navigateur.

Il faut ensuite remplir le corps (balise <body>, positionnée juste après la balise fermante </head>) avec du contenu.

Globalement, notre contenu est composé de plusieurs types de données : des titres plus ou moins importants, des paragraphes, des listes, des liens, des images ou des tableaux…

L’élément fondamental des pages internet est bien entendu le texte, hormis pour les sites de jeux Flash et autres divertissements, bien sûr !

Tout texte dans une page HTML doit toujours être contenu dans une balise bloc : un paragraphe, une liste, etc. Et jamais directement dans le <body> !

Voyons donc les balises principales :

  • <p></p> (Paragraphe) : la plupart des textes de vos pages s’y trouvent,
  • <pre></pre> (Paragraphe pré-formaté) : cette balise est presque identique à celle ci-dessus, à la différence près que les espaces, tabulations et autre retours à la ligne sont gardés tel quels.

En pratique vous ne l’utiliserez presque jamais, sauf pour inclure des exemples de code, si bien sûr votre site est destiné à des programmeurs, <br> (Saut de ligne, BReak line, en anglais) : c’est une balise seule (pas besoin de la fermer avec un éventuel </br> par exemple).

Parfois vous aurez besoin d’aller à la ligne dans vos paragraphes (ou dans une ligne de liste…).

Voyons donc un petit exemple, en regardant le code HTML et le résultat produit :

le code html:

  

 

 

 

 

 
le résultat produit dans le navigateur:

 

 Squelette d’une page HTML5

La langage HTML manipule des balises (markup) :

<!DOCTYPE html>

<html>
	<head>
		<!-- en-tête de la page -->
		<!-- encodage des caractères -->
		<meta charset="UTF-8">
		<title>Titre de la page web</title>
	</head>

	<body>
		<!-- corps de la page -->

	</body>
</html>

 Quelques règles de syntaxe

Toute balise ouverte doit être refermée :

<p>contenu de la balise</p>

<p> est la balise ouvrante, </p> est la balise fermante.

Certaines balises sont vides (elles n’ont pas de contenu), la fermeture se fait alors immédiatement :

<br>
<img src="velo.jpg" alt="vélo">

La valeur des attributs doit être entourée de guillemets ou d’apostrophes :

<img src='velo.jpg' alt='vélo'>
<a href="http://fr.wikipedia.org">Un lien hypertexte vers le site de Wikipédia</a>

Les balises doivent être correctement imbriquées :

<p>Cette syntaxe est <strong>bonne</strong></p>
<p>Cette syntaxe est <strong>mauvaise</p></strong>

 Eléments de type bloc et de type en-ligne (inline)

Eléments de type bloc

Par défaut, les éléments de type bloc sont affichés par le navigateur avec un saut de ligne au début et à la fin.

Exemples : <h1>, <p>, <ul>, <table>, <hr>, <pre>, <form> …

Le code suivant affichera deux paragraphes, l’un en dessous de l’autre :

<p>Premier paragraphe.</p><p>Deuxième paragraphe.</p>

Eléments de type inline

Les éléments de type inline se placent normalement l’un à côté de l’autre (pas de saut de ligne).

Exemples : <strong>, <em>, <a>, <img>, <sup>, <sub> …

Propriétés

Les éléments de type bloc peuvent contenir des éléments de type bloc ou de type inline.

Exceptions : les paragraphes <p> et les titres <h1> … ne peuvent contenir que des éléments inline.
Donc pas de titres dans un paragraphe, pas de paragraphes dans un paragraphe !

Exemple : un élément bloc <p> (paragraphe) qui contient un élément inline <strong> :

<p>Ceci est <strong>important</strong></p>

Les éléments inline ne peuvent contenir que des éléments inline.

Exemple : un élément inline <a> (lien hypertexte) qui contient un élément inline <strong> :

<p><a href="http://fr.wikipedia.org">Un <strong>lien hypertexte</strong> vers le site de Wikipédia</a></p>

Un outil de vérification de la syntaxe

Pour vérifier que votre page Web est conforme aux spécifications HTML5, rendez-vous sur le site du W3C (World Wide Web Consortium) : http://validator.w3.org

Pour une page Web locale (pas encore publiée sur le Web) :

Validate by File Upload → Check

S’il y a des erreurs, elles vous seront indiquées, avec des explications (en anglais, of course).

Conseil : vérifier et corriger systématiquement vos pages Web avec cet outil.
C’est contraignant au début, mais cela vous fera prendre rapidement de bonnes habitudes.

DIFFÉRENCES ENTRE LE HTML ET LE CSS

Voilà à quoi ressemble un bout de code HTML :

<p>
	Un super paragraphe avec <strong>du texte en gras</strong>.
</p>

Et à quoi ressemble du CSS :

p{
	color: red;
}

Si on devait comparer un site internet avec une maison, le HTML serait les fondations et les parpaings, sans aucunes finitions. En soit, la maison serait bien construite et fonctionnelle, mais elle serait un peu austère, sans commodités.

Le CSS serait la décoration d’intérieur. Le coup de peinture qui rend votre maison agréable à vivre.

Ces deux langages sont donc indispensables :

  • Le HTML pose les bases de votre site. C’est lui qui va dire au navigateur internet qui est quoi, et comment l’interpréter.
  • Le CSS rend toute la donnée brute HTML plus jolie et plus facilement lisible.

Mise en page avec les feuilles de style CSS

Les règles de style CSS permettent de personnaliser les couleurs, de définir les polices de caractères, de positionner les éléments les uns par rapport aux autres, etc.

Insertion des styles dans les balises HTML

On peut incorporer les styles CSS directement dans les balises HTML avec l’attribut style.
Cette technique est simple mais peu pratique.

Exemple :

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Une page web en HTML5</title>
    </head>

    <body style="background-color: beige; font-family: 'Times New Roman';">
            
        <h2 style="text-align: center; color: brown;">Les feuilles de style CSS</h2>
                
        <p style="margin-left: 100px;">Bonjour à tous !<br>
        Ceci est un exemple d'utilisation des feuilles de style <span style="color: blue; font-weight: bold;">CSS</span> (Cascade Style Sheet).</p>
    
    </body>
</html>

Note : <span> est un élément inline générique.
Il existe aussi un élément bloc générique : <div>

Lier des styles à partir d’une feuille séparée

C’est la technique la plus efficace, celle que l’on rencontre dans la plupart des sites Web.

Reprenons l’exemple précédent :

– Code HTML :

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Une page web en HTML5</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
            
        <h2>Les feuilles de style CSS</h2>
                
        <p>Bonjour à tous !<br>
        Ceci est un exemple d'utilisation des feuilles de style <span class="important">CSS</span> (Cascade Style Sheet).</p>
    
    </body>
</html>

Notes :
L’élément <link> fait le lien avec la feuille de style CSS (ici le fichier externe style.css)
L’attribut class de l’élément <span> permet d’utiliser des règles CSS personnalisées.

– Code CSS :

La feuille de style se trouve dans le fichier style.css
La syntaxe du langage CSS est très simple à comprendre :

body {
background-color: beige;
font-family: 'Times New Roman';
}

h2 {
text-align: center;
color: brown;
}

p {
margin-left: 100px;
}

/* classe */
.important {
color: blue;
font-weight: bold;
}

LES BALISES

Une balise est composée de deux éléments :

  • Une balise ouvrante
  • Une balise fermante.

Prenons par exemple une phrase : Portez ce vieux whisky au juge blond qui fume.
Nous allons l’encadrer entre deux balises paragraphe <p> :

<p>Portez ce vieux whisky au juge blond qui fume.</p>

Vous pouvez voir que notre phrase est précédée de la balise ouvrante <p> ; et suivie de la balise fermante </p>

Les balises sont constituées d’une valeur entre deux chevrons : < et >.

Notez le / dans la balise fermante. Il est important : c’est lui qui défini si une balise est ouvrante (par son absence) ou fermante (par sa présence).

 

Ainsi, notre navigateur sait que Portez ce vieux whisky au juge blond qui fume. est un paragraphe et sera interprété comme tel.

LA SÉMANTIQUE

On a vu plus haut comment baliser des éléments avec un exemple de paragraphe. Il existe beaucoup de balises, chacune servant à baliser un contenu spécifique.

Vous trouverez par exemple des balises pour :

  • des titres,
  • des listes,
  • des tableaux,
  • des formulaires,
  • …

Le but premier en HTML est de respecter la sémantique de vos éléments. Ainsi, il ne faut pas utiliser une balise pour autre chose que sa valeur !
Par exemple, vous n’allez pas utiliser une balise titre pour encadrer une image, ou une balise paragraphe pour encadrer une liste.

Il est très important de respecter une bonne sémantique ! Et cela pour deux raisons :

  1.  Pour que les navigateur interprètent bien les éléments et ne se trompent pas sur leur valeur.
  2.  Pour optimiser le référencement naturel de votre site internet.

LES ATTRIBUTS

Il est possible d’ajouter des attributs aux balises. Ces attributs servent à donner des informations compémentaires (nous verront plus tard à quoi ils peuvent servir) :

<p attr="push">Portez ce vieux whisky au juge blond qui fume.</p>

Notez ici le attr="push" qui a été ajouté à la balise ouvrante. C’est notre attribut.
Il se compose toujours d’une propriété (avant le =) et d’une valeur (après le =, entre les ").
Elle est toujours ajoutée à la balise ouvrante, et non pas la fermante !

On peut avoir pleins de types d’attributs différents :

  • id="exemple"
  • class="valeur"
  • src="path/to/file.ext"
  • href="http://www.url.ext"
  • …

RÉCAPITULATIF

Voilà un schéma récapitulatif du fonctionnement des balises HTML :

Fonctionnement des balises HTML.

EXCEPTIONS : LES BALISES AUTOFERMÉES

Certaines balises sont autofermées. C’est à dire qu’elles n’ont qu’une seule balise ouvrante, et aucune balise fermante.
Voilà la liste de ces balises :

  • <area />
  • <br />
  • <hr />
  • <img />
  • <input />
  • <link />
  • <meta />
  • <param />

Notez la présence du / avant le second chevron >. Les balises auto fermantes en sont pourvue.

Qu’est-ce que c’est HTML5 ?

Comme son nom l’indique, HTML 5 est le successeur de HTML 4. Le travail sur HTML 5 a commencé fin 2003 grâce à un groupe de travail indépendant qui préconisait une approche pragmatique, le WhatWG, contrairement au W3C qui misait tous ses efforts sur XHTML 2. Ce n’est qu’en 2007 que le W3C accepte la vision HTML5 en intégrant en son sein ce groupe de travail. Les principes de conception sont clairs : simplifier l’usage de HTML, officialiser les pratiques courantes, et assurer un maximum de rétro-compatibilité.

Le W3C c’est quoi déjà ?

Le World Wide Web Consortium, abrégé W3C, est un organisme de standardisation à but non-lucratif, fondé en octobre 1994 comme un consortium chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP. Le W3C n’émet pas des normes au sens européen, mais des recommandations à valeur de standards industriels. Parmi les membres du W3C on compte les plus grands acteurs du Web actuels tels que Microsoft, IBM, Opera, Google, Apple, etc.

Quelles sont les nouveautés ?

Une grande nouveauté annoncée au niveau structurel des éléments est signalée dans l’introduction du brouillon de HTML5 : The new content model concepts (replacing HTML 4’s block and inline concepts).

Les notions de type « en ligne » et « bloc » semblent donc remplacées par un nouveau schéma, les éléments HTML sont à présent uniquement regroupés en catégories, sachant que les éléments peuvent apparaître dans plusieurs catégories :

  • Metadata content
  • Flow content
  • Sectioning content
  • Heading content
  • Phrasing content
  • Embedded content
  • Interactive content

kind of content in HTML 5

Ainsi, au vu de cette nouvelle organisation, le code suivant est parfaitement valide car l’élément <a> peut entourer des paragraphes, des listes, des tableaux voire des sections entières :

<aside>
 Welcome!
 <a href="about.html">
  This is home of...
  <h1>The Falcons!</h1>
  The Lockheed Martin multirole jet fighter aircraft!
 </a>
 This page discusses the F-16 Fighting Falcon's innermost secrets.
</aside>

Rappelons également que HTML5, en tant que digne successeur de HTML 4.01, offre la même permissivité que sa version transitionnal : il n’est pas systématiquement nécessaire de fermer tous les éléments. Ainsi, les éléments <p>, <dd>, <dt>, <li>, <optgroup>, <option>, <rt>, <rp>, <td>, <th>, <tr>, <thead> et <tfoot> n’ont pas besoin de balise fermante pour être valides. Même s’il est toujours recommandé de bien organiser votre code et de faire confiance aux bonnes pratiques établies jusqu’à présent. Seule la forme d’écriture XHTML 5 obligera à fermer ces éléments, mais il est très contraignant de s’y conformer.

Les balises principales

Doctype

Le doctype est simplifié :

<!DOCTYPE html>

 Plus d’informations sur l’élément Doctype

Il n’est pas sensible à la casse (on peut écrire <!doctype html> par exemple), et son rôle est uniquement d’éviter un rendu en mode «Quirks» (ou mode de compatibilité) pour les anciens navigateurs.

a conception d’une page web en suivant la philosophie du standard HTML5 spécifié par le W3C (ou du standard vivant tel que désigné par le WhatWG) répond à quelques réflexes de base. La structure d’un document (l’imbrication des balises à la racine) est simplfiiée pour répondre aux attentes pragmatiques des intégrateurs et webdesigners.

Un document HTML5 minimal

Sans surprise, les bases d’un code HTML5 ressemblent beaucoup à celles rédigées à l’aide des précédentes versions HTML 4 et XHTML 1.x. Rétro-compatibilité oblige. On y retrouve donc un doctype suivi des éléments les plus courants: <html>, <head>, <title>, <meta>, <link>, <script> et <body>.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  ...
  <!-- Le reste du contenu -->
  ...
</body>
</html>

Le doctype

La première ligne d’en-tête a été considérablement simplifiée. On peut maintenant retenir un doctype par coeur, sans avoir à le copier-coller.

<!doctype html>

Ce doctype allégé a été mûrement testé et réfléchi : il permet toujours – pour les anciens navigateurs – de rester dans le mode d’interprétation conforme aux standards et d’éviter le mode quirks. On peut remarquer qu’il n’y a pas d’allusion à un quelconque numéro de version. Son rôle est toujours de préciser quel est le type de document qui va suivre, afin de permettre au navigateur de savoir quel langage de la vaste famille SGML il devra interpréter.

L’élément racine <html>

C’est lui qui va recueillir les deux principaux éléments de la hiérarchie : <head> et <body>.

L’attribut lang (sur <html>)

On a tendance à l’oublier : l’attribut lang précise la langue utilisée pour le contenu de la page, lorsqu’il est placé sur la racine <html>.

<html lang="fr">

Une langue bien indiquée sera utile ainsi aux synthèses vocales (pour adopter le bon accent).

Les fameux <head> et <body>

À ce niveau, le code HTML peut être divisé en deux parties : l’en-tête située entre les balises <head> et </head>, qui regroupe toutes les méta-informations, c’est-à-dire les données qui ne sont pas représentées directement à l’écran dans le rendu du document, mais qui lui sont tout de même liées : le titre dans <title> (extrêmement recommandé), les autres méta-informations variées (facultatives : mots-clés, description générale de la page) dans zéro ou plusieurs <meta>, et éventuellement <link>, <script> ou <style>.

La deuxième partie comprend le corps à proprement parler, c’est-à-dire <body>. On y retrouvera tout le reste du contenu HTML, structuré par des balises variées – selon ce que l’on aura à y placer – et dont l’apparence sera affectée par les styles CSS chargés dans <link> et/ou <style>.

L’attribut charset (sur <meta>)

Préciser l’encodage des caractères est primordial pour exploiter la bonne page de code et ne pas se retrouver avec les caractères spéciaux ou accentués. Le choix de l’UTF-8 est désormais préconisé par le W3C pour tous les protocoles échangeant du texte sur internet (dont HTML).

<meta charset="utf-8">

On retrouvera donc très souvent ce codage de caractères, par contre il faut toujours veiller à ce que l’éditeur permettant de coder en HTML (que ce soit un IDE tout-en-un ou un simple éditeur de texte) enregistre le fichier avec le bon encodage, et non en Latin-1 (alias ISO-5589-1) ou ANSI si la balise <meta> indique UTF-8.

Veillez à toujours placer cette déclaration d’encodage avant toutes les autres balises contenues dans la section <head>. En effet, celles-ci sont immédiatement concernées, par exemple <title> qui peut déjà faire appel à des caractères en UTF-8 ; ceci également dans un but de sécuriser l’interprétation des caractères spéciaux et prévenir les injections de contenu indésirables.

L’élément <link>

Dans la majorité des cas, une balise <link> placée dans l’en-tête permet de mettre en relation la page avec d’autres documents externes. La plupart du temps cela concerne les feuilles de style CSS externes avec une relation du type stylesheet, mais il est aussi possible de définir d’autres types de relations (par exemple avec author, icon, prefetch, next, prev, etc).

<link rel="stylesheet" href="style.css">

En HTML5, il n’est plus strictement obligatoire de spécifier l’attribut type.

Pour inclure directement des instructions CSS dans le document HTML sans passer par un fichier externe, <style> est à votre service. Cependant, il vaut mieux faire confiance à un fichier indépendant : il n’y aura qu’un seul code à maintenir pour de multiples pages (voire pour tout le site), et la mise en cache par le navigateur n’en sera que plus efficace.

L’élément <script>

Cet élément permet d’ajouter des scripts (JavaScript) qui vont s’éxécuter côté client dans le navigateur dès leur chargement.

<script src="script.js"></script>

En HTML5, il n’est plus obligatoire de spécifier l’attribut type. Celui-ci est de toute manière interprété par défaut en text/javascript par tous les navigateurs.

Les autres éléments HTML5

Une fois la structure de base préparée, il est temps de commencer à y placer d’autres éléments HTML pour le contenu à proprement parler : paragraphes, listes, liens, images, vidéos, tableaux de données, formulaires, etc. La majorité des éléments HTML sont toujours au rendez-vous dans HTML5, qui se voit complété par quelques nouveautés pour le balisage. Par exemple :

  • Éléments de section <section>, <article>, <header>, <footer>, <nav> et <aside>
  • Élément <datalist>
  • Éléments <details> & <summary>
  • Éléments <figure> & <figcaption>
  • Éléments média <audio> et <video> complétés par <source>
  • Élément <canvas>
  • Éléments <meter>, <output> et <progress>
  • Élément <time> et <mark>
  • Et tous les autres, que l’on peut retrouver dans une liste complète maintenue par le W3C : HTML : The Markup Language

Pour rappel, tous les nouveaux éléments HTML5 ne sont pas nécessairement reconnus de façon native et cohérente par tous les navigateurs (même les plus récents). Pour certains, il sera possible de trouver des alternatives avec des compléments en JavaScript. Pour d’autres, il faudra patienter jusqu’à une implémentation totale, et évaluer le risque selon le besoin : un nouvel élément sera-t-il tout de même consultable, masqué, ou géré de façon erronée ?

Pour juger de l’état de la prise en charge par les navigateurs, fiez-vous à Caniuse.com qui dresse des tableaux de support complets, ou bien encore à HTML5Please, qui indique de façon rationnelle par rapport aux parts de marché ce qu’il est possible d’utiliser en production pour un maximum de visiteurs.

Templates et boilerplates

Des modèles réfléchis et structurés existent pour faciliter le démarrage d’un nouveau projet web autour de HTML5, et de ses futures évolutions. Ils reprennent la structure globale d’un document, en y ajoutant quelques bonnes pratiques, avec parfois des fichiers de configuration pour le serveur et des feuilles de styles de base, voire même des librairies JavaScript.

HTML5 Boilerplate

HTML5 Boilerplate

HTML5 Boilerplate

Initializr

Initializr

Initializr par Jonathan Verrecchia

HTML KickStart

HTML Kickstart

HTML KickStart par 99lime

Bootstrap

Bootstrap

Bootstrap (par la team Twitter)

Schnaps.it

Schnaps.it (par la team Alsacréations)

Jetez-vous à l’eau !

Comme on peut le constater, démarrer un document HTML5 est facilement abordable, et reste rétro-compatible, pour peu que les nouveaux éléments soient intégrés de façon intelligente. Étant donné que cette nouvelle version du langage embarque la grande majorité des éléments déjà connus par les précédentes moutures, il n’y aura pas de risque de s’y aventurer progressivement.

HTML5 propose de nouveaux éléments qui ont pour objectif de faciliter l’intégration de médias, d’utiliser des composants plus dynamiques sans avoir besoin de faire appel – à plus long terme – à des extensions propriétaires (Flash, Java, Silverlight). Le balisage propose également d’obtenir une meilleur sémantique, avec tous les aspects bénéfiques qui en découlent (accessibilité, référencement, syndication, interprétation par les moteurs de rendu, etc.)

Section

L’élément <section> permet de définir les grandes sections d’un document comme par exemple les chapitres, les en-tête et pied-de-page, ou toute autre section dans un document. Il peut être combiné avec les éléments h1, h2, h3, h4, h5, et h6 pour une meilleure définition de la structure du document.

Documentation sur l’élément Section

Article

<article> représente un texte indépendant, une portion de contenu, comme par exemple un article de journal, de blog ou de forum.

<article>
  <p>
    <a href="http://www.alsacreations.com/actu/lire/746-xhtml-est-mort-vive-html.html">
    XHTML est mort, vive HTML !</a>
    <br /> 
    Sous ce titre quelque peu provocateur (et faux) se cache une réalité officielle :
    le W3C vient d'annoncer que ses travaux sur XHTML 2 se termineront en 2009.
  </p>
</article>

Documentation sur l’élément Article

Aside

L’élément <aside> est destiné au contenu tangentiel, une sorte de bonus au contenu principal, que ce soit pour un article ou l’ensemble d’un document HTML.

<aside>
  <h1>Archives</h1>
  <ul>
    <li><a href="/archives/09/05/">Mai 2009</a></li>
    <li><a href="/archives /09/06/">Juin 2009</a></li>
    <li><a href="/archives /09/07/">Juillet 2009</a></li>
  </ul>
</aside>

Documentation sur l’élément Aside

Header

L’élément <header> représente l’en-tête d’une section ou d’une page.

Documentation sur l’élément Header

Footer

L’élément <footer> représente le pied de page d’une section ou d’une page pour mettre les informations concernant l’auteur, les mentions légales…etc.

Documentation sur l’élément Footer

Nav

L’élément <nav> représente une section de liens de navigation.

<nav>
  <ul>
    <li><a href="index.php">Page d'accueil</a></li>
    <li><a href="contact.php">Contact</a></li>
  </ul>
</nav>

Documentation sur l’élément Nav

Figure

L’élément <figure> peut être utilisé pour regrouper des éléments tels que des images ou des vidéos avec leur légende <figcaption>.

<figure>
  <img src="/images/chaton.jpg" alt="Oh le beau chaton" />
  <figcaption>Un petit chat mignon tout plein</figcaption>
</figure>

Documentation sur l’élément Figure

D’autres nouvelles balises

<embed>, <mark>, <meter>, <progress>, <time>, <command>, <details>, <datalist>, <keygen>, <bb>, <output>, <ruby>, <rt> et <rp> <datatemplate>, <rule>, <nest>, <summary> et <details>

Nouveaux types de l’élément input

De nouveaux types pour l’attribut type="" de la balise <input> voient le jour. Ils visent à faciliter la saisie des données par l’utilisateur :

datetime, datetime-local, date, month , week, time, number, range, email, url, search, color

Exemple : <input type="date"> devrait permettre d’afficher un calendrier pour sélectionner une date.

Attributs​

Glisser-déposer

L’attribut draggable permet de rendre un élément déplaçable.

 Documentation sur l’attribut draggable

Contenteditable

Cet attribut indique qu’une zone est éditable. L’utilisateur peut en changer le contenu et manipuler le balisage.

 Documentation sur l’attribut Contenteditable

Spellcheck

Cet attribut active ou non la correction orthographique.

Il existe d’autres nouveaux attributs HTML5 spécifiques à certains éléments uniquement (par exemple ping sur <a>, charset sur <meta>), ou bien applicables à tous. Par exemple contextmenu, hidden, data-*, etc.

Médias et applications web (APIs et DOM)

<audio> et <video>

Ces éléments sont utilisés pour les contenus multimédia.

<audio>
  <!-- Deux formats disponibles par ordre de priorité: -->
  <source src="trappeur.ogg" type="audio/ogg">
  <source src="trappeur.aac" type="audio/aac">
  <!-- Contenu alternatif si élément audio ou formats non supportés dans le navigateur: -->
  <a href="trappeur.ogg">Télécharger <cite>Avant j'étais trappeur</cite></a>
  de David TMX (format Ogg Vorbis)
</audio>

Documentation sur l’élément video
Documentation sur l’élément audio

Canvas

Illustration des canvas

L’élément <canvas> a été introduit afin de pouvoir créer des éléments graphiques 2D en Javascript à la volée. Il permet de mettre en place une zone pour les dessins ou les applications graphiques.

Documentation sur l'élément Canvas
Applications web hors-ligne (Offline web apps)
Une API permet d'activer les applications web hors connexion.
Géolocalisation

L’API Géolocalisation introduite par le W3C permet aux pages web d’interroger le navigateur sur la position de l’utilisateur (latitude, longitude).

Les éléments et attributs devenus obsolètes

  • <frame>, <frameset>, <noframes> (jugés néfastes à l’utilisabilité et l’accessibilité)
  • <acronym> disparaît au profit de <abbr>
  • accesskey (dans <a>, <area>, <button>, <input>, <label>, <legend> et <textarea>)
  • longdesc (dans <img> et <iframe>)
  • name (dans <img>, <form> et <a>)
  • language (dans <script>)
  • summary (dans <table>)
  • <basefont>, <big>, <center>, <font>, <s>, <strike>, <tt>, <u>, etc…

Les éléments redéfinis

  • <a> (pour les ancres)
  • <menu> (c’est en fait un élément réhabilité de HTML2)
  • <b>, <i>, <small>, <strong> (section de texte lue ou interprétée différemment du texte « normal »)
  • <hr>
  • etc…

A quoi cela va bien pouvoir servir ?

Les nouveaux sites pourront adopter les balises telles que <header> pour remplacer les <div id= "header"> que l’on trouve sur la plupart des sites construits actuellement.

Les éléments header et footer

Les éléments sont plus spécifiques et permettent une structure commune des sites et ainsi une meilleure accessibilité puisqu’une structure commune permettra entre autre aux synthétiseurs vocaux de se développer et aux personnes mal voyantes de se repérer plus facilement. De nouvelles fonctionnalités permettront aussi d’utiliser HTML et uniquement HTML en natif, au lieu d’y implémenter toute une série de plugins JavaScript voire d’extensions propriétaires.

Qui l’utilise déjà ?

Tous les navigateurs ont d’ores et déjà implémenté certains de ces éléments, mais HTML est un standard vivant, en évolution constante, notamment du côté des API. La liste des navigateurs et de leur niveau de compatibilité avec les différents éléments est consultable sur Wikipedia et il est possible de rechercher des fonctionnalités spécifiques sur le site Caniuse.com. Pour savoir s’il est risqué ou réalise d’utiliser telle ou telle partie de HTML5, consultez HTML5Please.

Audio et vidéo en HTML5

Avant HTML5, les fichiers audios étaient ajoutés aux pages Web, intégrant le fond sonore à l’aide du tag <bgsound>. Le fichier a été lu lors de l’affichage de la page et l’utilisateur n’a pas eu la possibilité de le désactiver. Avec l’avènement de la nouvelle balise <audio> en HTML5, les fichiers audios sont ajoutés avec une interface logicielle intégrée, et il n’est pas nécessaire de connecter des modules tiers.

Comment ajouter de l’audio à une page Web

Pour ajouter des fichiers audios à une page Web, utilisez l’élément <audio>. Le chemin d’accès au fichier audio est indiqué par l’attribut src, et l’attribut control ajoute un panneau de configuration (bouton de démarrage, défilement, contrôle du volume).

Dans le code, cela ressemble à ceci:

<audio src="name.ogg" controls></audio>

Codecs audio et formats de fichiers audio

Étant donné que tous les navigateurs ne prennent pas en charge tous les formats audios, le fichier audio est codé à l’aide de codecs spéciaux (programmes de conversion de données numériques au format d’un fichier audio ou d’un flux audio) et ajoute des fichiers simultanément via la balise <source> avec l’attribut src.

Lorsque vous spécifiez différents formats de fichier, nous vous recommandons de spécifier le type MIME pour chaque fichier afin de permettre au navigateur de localiser le fichier qu’il prend en charge. Définit le type MIME à l’aide de l’attribut type.

Exemple

<!DOCTYPE html>
<html>
 <head>
   <title>Titre du document</title>
 </head>
 <body>
   <audio controls>
     <source src="https://fr.w3docs.com/build/audios/jingle_bells.ogg" type="audio/ogg">
     <source src="https://fr.w3docs.com/build/audios/audio.mp3" type="audio/mpeg">
   </audio>
   <p>Cliquez sur le bouton</p>
 </body>
</html>
Essayez-vous-même!

Les formats audios les plus populaires sont les suivants :

MP3 – Le format audio le plus populaire qui utilise une compression avec perte et vous permet de réduire la taille du fichier plusieurs fois. Malgré leur popularité parmi les utilisateurs, les chaînes de télévision et les stations de radio utilisent des codecs ISO-MPEG plus modernes, tels que AAC ou MPEG-H.

AAC (Advanced Audio Codec) — codec fermé, analogue au format MP3, mais comparé à ce dernier, AAC offre une qualité sonore supérieure avec un taux de compression identique ou supérieur.

Ogg Vorbis — format libre open source pris en charge par Firefox, Opera et Chrome. Offre une bonne qualité sonore mais n’est pas largement prise en charge par les lecteurs matériels.

Comment ajouter des fichiers vidéos

Avant la norme HTML5, des plug-ins tiers, tels que QuickTime, RealPlayer ou Flash, étaient utilisés pour ajouter de la vidéo au site. En HTML5, une nouvelle balise <video> a été ajoutée. Elle permet d’insérer des insertions vidéo dans une page Web.

Dans le code, cela ressemble à ceci:

<video src="example.webm." controls></video>

L’attribut src indique l’URL du fichier et l’attribut controls est utilisé pour afficher les contrôles. (Plus d’informations sur les attributs de la balise <video>).

Codecs vidéo et formats de fichiers vidéo

Chaque navigateur prend en charge un codec spécifique. Par conséquent, pour assurer la lecture vidéo dans tous les navigateurs, le fichier vidéo doit être placé dans plusieurs formats. Comme dans le cas des fichiers audio, les formats de fichier vidéo sont contenus dans les formats d’élément <source>, en commençant par le plus préféré. De plus, pour chaque fichier vidéo, vous devez spécifier le type MIME, spécifié par l’attribut type.

Pour vous assurer que le navigateur peut gérer les fichiers vidéo, créez un fichier .htaccess dans le dossier contenant la page Web définissant les types MIME de la vidéo :

Exemple

<!DOCTYPE html>
<html>
 <head>
   <title>Titre du document</title>
   <style>
     video {
     width: 300px;
     height: 220px;
     border: 1px solid #666;
     }
   </style>
 </head>
 <body>
   <video controls>
     <source src=”http://techslides.com/demos/sample-videos/small.ogv” type=video/ogg>
     <source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
   </video>
   <p>Quelques informations sur le vidéo</p>
 </body>
</html>
Essayez-vous-même!

Il existe actuellement 3 formats vidéos principaux : MP4 / MPEG-4, OGG et WebM +. Les codecs sont utilisés pour compresser les données vidéo et les restaurer.

Pour le fichier vidéo MPEG-4, le codec vidéo H.264 et le codec audio AAC sont utilisés. Pour utiliser les codecs, vous devez obtenir une licence.

Pour le fichier vidéo Ogg, le codec vidéo Theora et le codec audio open source Vorbis sont utilisés.

Pour les fichiers vidéo WebM +, le codec vidéo VP8 et le codec audio Vorbis sont utilisés. Aucune licence n’est requise pour les utiliser.

La balise <video> n’est pas prise en charge par tous les navigateurs. Pour lire la vidéo dans Safari, les plug-ins installés sont respectivement Microsoft Media Player et Apple QuickTime.

Comment ajouter des sous-titres et des légendes

Les sous-titres et les légendes sont ajoutés aux fichiers audio et vidéo à l’aide de l’élément <track>, utilisé comme élément enfant de <audio> et <video>.

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      video {
      width: 300px; 
      height: 200px;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls muted src="https://fr.w3docs.com/apprendre-html//build/videos/arcnet.io(7-sec).mp4">
      <track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).mp4"/>
    </video>
    <p>Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique, demeurant essentiellement inchangé.</p>
  </body>
</html>
Essayez-vous-même!
Pour aligner le lecteur vidéo sur la page, placez l’élément <video> dans le conteneur <div>, assignez une classe pour laquelle définir la largeur et la hauteur, en fonction de la taille de votre vidéo.

Les bases du CSS

Les sélecteurs et les propriétés

Maintenant, nous allons voir comment styliser les pages écrites en HTML.
Alors que le HTML sert à structurer notre contenu au moyen de balises, le CSS sert lui à mettre en forme ce contenu.

OÙ CODER EN CSS

Nous allons maintenant quitter nos fichiers .html pour ouvrir style.css.
En effet, le CSS est à coder de préférence dans les fichiers type .css.

Avant toute chose, il va falloir dire à notre fichier .html où se trouve notre feuille de style .css. Pour cela, nous allons ajouter une ligne de code dans la balise <head> :

<link rel="stylesheet" type="text/css" href="style.css" />

Cette balise <link> est autofermante. Elle contient 3 attributs :

  • rel : qui défini la relation entre le fichier .html et le fichier lié. Ici, il s’agit de notre feuille de style.
  • type : qui définit le type de document lié. Ici, il s’agit d’un fichier .css.
  • href : permet d’indiquer le chemin vers notre fichier.

LES SÉLECTEURS

La première chose à définir en CSS est le sélecteur. Il s’agit de l’élément auquel nous allons appliquer un style :

p{}

Ici, je choisis de cibler les balises de type paragraphe. J’utilise donc le même sélecteur qu’en HTML : p.
Notez les crochets { et } qui suivent notre sélecteur. Ils définissent l’endroit où nous allons entrer les propriétés de style.

LES PROPRIÉTÉS

Les propriétés permettent de choisir quels aspects nous allons styliser. Par exemple, il est possible de changer la couleur, la police de caractère, la taille, le fond, …
Ici, nous allons modifier la couleur de notre texte avec color:

p{
	color: ;
}

Les propriétés se mettent entre les crochets { et }, à la ligne avec une tabulation d’indentation.
La propriété est suivie de : qui permet de lui attribuer une valeur.

Les attributs ne peuvent être inventés. Vous ne pouvez pas taper un mot en anglais en espérant que ça marchera. Nous verrons dans les cours suivants les propriétés les plus utilisées.

LES VALEURS

Nous allons maintenant changer la couleur de notre paragraphe. pour cela, nous allons entrer une couleur (ici red) à notre propriété :

p{
	color: red;
}

Et voilà le résultat :

Exemple de texte en rouge.

La valeur doit se mettre après les :. Aussi, il faut un ; pour fermer la ligne et pouvoir passer une autre propriété.

PLUSIEURS PROPRIÉTÉS ET SÉLECTEURS

Il est possible de définir plusieurs propriétés à un sélecteur. Pour cela, il faut les emplier, les uns à la suite des autres. Par exemple, nous allons changer la taille et la couleur de nos balises p :

p{
	color: red;
	font-size: 16px;
}

Si vous devez styliser différents sélecteurs, vous pouvez les mettre les uns après les autres :

p{
	color: red;
	font-size: 16px;
}
li{
	color: green;
	font-size: 14px;
}

RÉCAPITULATIF

Voilà un schéma récaptitulatif du fonctionnement du CSS :

Schéma de fonctionnement du CSS

L’héritage des propriétés

L’héritage est l’une des notions les plus importantes en CSS. Elle signifie que tout élément HTML va hériter des propriétés CSS de son parent.

Prenons une balise <div> dans laquelle nous allons mettre un paragraphe :

<div>
	<p>
		Un super paragraphe.
	</p>
</div>

Si j’applique des propriétés à la <div>, la balise <p> en héritera.
Par exemple, je vais appliquer une couleur de texte blue :

div{
	color: blue;
}

En faisant ça, le texte dans ma balise <p> devient bleu :

Un super paragraphe.

Bien cibler un élément

Vous l’avez compris, avec l’héritage des propriétés, l’un des plus gros challenges en CSS est de bien cibler son sélecteur. Pour cela, plusieurs sélecteurs nous sont mis à disposition.

X Y

Il est possible de cibler un élément contenu dans un autre élément.
Par exemple, si j’ai un paragraphe dans une <div> et un autre à l’extérieur :

<div>
	<p>
		Un super paragraphe dans une div.
	</p>
</div>
<p>
	Un mega paragraphe solo.
</p>

Pour cibler uniquement le paragraphe dans ma div, je vais utiliser :

div p{
	color: red;
}

Ce qui me donne :

Un super paragraphe dans une div.

Un mega paragraphe solo.

X > Y

Dans le cas où j’aurais plusieurs éléments imbriqués de même nature compris dans ma <div>, je peux utliser > pour cibler celui qui est imbriqué directement après mon élément référent.

Par exemple, j’ai ici :

  • un paragraphe hors de ma <div>,
  • un paragraphe directement dans ma <div>,
  • un paragraphe dans une section qui est comprise dan ma <div>.
<div>
	<p>
		Un super paragraphe dans une div.
	</p>
	<section>
		<p>
			Un super paragraphe dans une section qui est dans une div.
		</p>
	</section>
</div>
<p>
	Un mega paragraphe solo.
</p>

Pour cibler uniquement le paragraphe dans ma <div>, sans impacter celui présent dans la <section>, je vais ajouter un > dans mon CSS :

div > p{
	color: red;
}

Voilà le résultat :

Un super paragraphe dans une div.

Un super paragraphe dans une div.

Un mega paragraphe solo.

X + Y

Le sélecteur + permet de cibler un élément placé directement après un autre.
Par exemple, nous allons cibler uniquement les paragraphes situés directement après les titres de niveau 2 :

<h2>
	Un titre de niveau 2
</h2>
<p>
	Un super paragrahe rouge.
</p>
<p>
	Un super paragraphe.
</p>
<h2>
	Un titre de niveau 2
</h2>
<p>
	Un super paragraphe rouge.
</p>
h2 + p{
	color: red;
}

Voilà le résultat :

UN TITRE DE NIVEAU 2

Un super paragraphe.

Un super paragraphe.

UN TITRE DE NIVEAU 2

Un super paragraphe.

X ~ Y

À la différence du +, le sélecteur ~ permet de cibler n’importe quel élément Y qui se trouve derrière l’élément X.
Par exemple, nous allons ici cibler tous les paragraphes situés derrière les balises <h2> (et pas seulement ceux situés directement après).

<p>
	Un super paragrahe.
</p>
<h2>
	Un titre de niveau 2
</h2>
<p>
	Un super paragraphe rouge.
</p>
<p>
	Un super paragraphe rouge.
</p>
<h3>
	Un titre de niveau 3
</h3>
<p>
	Un super paragraphe rouge.
</p>
h2 ~ p{
	color: red;
}

Résultat, seul le paragraphe situé avant le premier <h2> n’est pas ciblé :

Un super paragraphe.

UN TITRE DE NIVEAU 2

Un super paragraphe.

Un super paragraphe.

UN TITRE DE NIVEAU 3

Un super paragraphe.

*

L’étoile * permet de cibler tous les éléments :

*{
	color: red;
}

Ici, tous les élément de ma page auront une couleur rouge.

header *{
	color: green;
}

Ici, tous les élément compris dans le header auront une couleur verte.

MUTUALISATION DES PROPRIÉTÉS

Il est possible d’appliquer plusieur propriétés à des sélecteurs différents en les séparant par des virgules. Par exemple, nous allons pouvoir simplifier :

p{
	color: red;
}
h2{
	color: red;
}
ol li{
	color: red;
}

Par :

p,
h2,
ol li{
	color: red;
}

.class et #id

Nous allons maintenant voir comment cibler un élément en particulier plutôt qu’un type d’élément. Pour cela, nous allons leur donner un nom, puis les cibler en CSS.

Afin d’affiner encore plus le ciblage CSS, il est possible de nommer les balises en HTML. Pour cela, deux choix s’offrent à nous : les .class et les #id.

LES #ID

Pour donner une #id à une balise, nous allons utiliser l’attribut HTML id :

<p id="ma_super_id">
	Un super paragraphe avec <strong>du texte en gras</strong>.
</p>

Attention ! Le nom d’une #id ne doit pas contenir :

  • des espaces,
  • des caractères spéciaux,
  • des accents.

Aussi, il doit commencer par une lettre (non pas un chiffre).

Pour cibler une #id en CSS, nous allons utiliser le sélécteur # :

/* Je cible l'ID #ma_super_id */
#ma_super_id{
	color: red;
}
/* Je cible la balise <p> qui a l'ID #ma_super_id */
p#ma_super_id{
	color: red;
}

Il existe deux manière de cibler une #id.

Attention ! Il ne faut pas mettre d’espace entre p et #ma_super_id. Sinon, cela veut dire que vous ciblez un élément avec l’id #ma_super_id situé dans une balise <p> !

LES .CLASS

De la même manière que les #id, nous allons utiliser l’attribut HTML class :

<p class="ma_super_class">
	Un super paragraphe avec <strong>du texte en gras</strong>.
</p>

Pour cibler une .class en CSS, nous allons utiliser le sélécteur . :

/* Je cible la classe .ma_super_class */
.ma_super_class{
	color: red;
}
/* Je cible la balise <p> qui a la classe .ma_super_class */
p.ma_super_class{
	color: red;
}

Attention ! Il ne faut pas mettre d’espace entre p et .ma_super_class. Sinon, cela veut dire que vous ciblez un élément avec la classe .ma_super_id situé dans une balise <p> !

DIFFÉRENCES ENTRE #ID ET .CLASS

La principale différence entre les #id et les .class relève de leur utilisation.
Une #id doit être unique au document. À partir du moment où vous nommez une élément #ma_super_id, aucun autre élément ne peut avoir cette #id.
Aussi, un élément ne peut avoir qu’une seule #id.

Une .class peut être utlisée sur plusieurs éléments, de nature dirrérente.
Par exemple, nous pouvons créer une class .red pour donner une couleur rouge :

.red{
	color: red;
}

Pour ensuite l’appliquer à plusieurs éléments :

<p class="red">
	Un super paragraphe avec <strong>du texte en gras</strong>.
</p>
<p class="red">
	Un autre mega paragraphe rouge.
</p>
<ul>
	<li>
		Élément de liste
	</li>
	<li class="red">
		Élément de liste rouge
	</li>
	<li>
		Élément de liste
	</li>
	<li>
		Élément de liste
	</li>
</ul>

Il est aussi possible de cumuler les .class :

/* Couleur rouge */
.red{
	color: red;
}
/* Texte en capitale */
.capitale{
	text-transform: uppercase;
}
<p class="red">
	Un super paragraphe avec <strong>du texte en gras</strong>.
</p>
<p class="red capitale">
	Un autre mega paragraphe rouge.
</p>
<ul>
	<li class="capitale">
		Élément de liste
	</li>
	<li class="red">
		Élément de liste rouge
	</li>
	<li>
		Élément de liste
	</li>
	<li>
		Élément de liste
	</li>
</ul>

Leave a Reply

Copyright © 2024 Un blog pour les étudiants de l'UIA - Powered by CosmosWP