HTML5
HTML (HyperText Markup Language : langage d’hypertexte à balises) est le fondement du Web, il permet de décrire la structure d’une page Web, son contenu et ses métadonnées.
Principe de base
Pour indiquer le rôle d’un texte ou d’une pièce d’information, on utilise des balises comme <p>...</p> pour indiquer que le contenu entre la balise ouvrante <p> et la balise fermante </p> est un paragraphe à part entière.
On peut inclure des balises à l’intérieur d’autres balises, à condition de bien refermer une balise interne avant une balise externe, par exemple :
<p>Ceci est un <strong>paragraphe</strong>.</p>
donnera :
Ceci est un paragraphe.
où <p> indique un paragraphe et <strong> indique que le contenu doit être mis en valeur fortement (en gras par défaut).
Attention à ne pas écrire :
<p>Ceci est un <strong>paragraphe.</p> </strong>
où <strong> est refermé après <p> alors que <p> avait été ouvert avant <strong>.
Il est également possible d’ajouter un attribut à une balise pour préciser son rôle, comme l’adresse vers laquelle pointe un lien hypertexte <a>, l’image à afficher avec une balise <img>, … Cet attribut est indiqué entre les crochets < >, séparé du nom de la balise par un espace, par exemple :
<a href="https://www.google.fr">Lien vers Google</a>
donnera :
Lien vers google
href est le nom de l’attribut tandis que https://www.google.fr est sa valeur (à mettre entre guillemets anglais : " ")
Structure d’une page Web
Une page Web typique ressemblera à :
<!DOCTYPE html>
<html>
<head>
Métadonnées sur la page (pas affichées dans la page)
</head>
<body>
Contenu affiché sur la page
</body>
</html>
La première ligne indique que la suite est en HTML5 (la version 5 du standard HTML est la plus récente aujourd’hui). La page entière est contenu par une balise <html> et est constituée de deux parties :
- l’entête
<head> qui contient une description de la page, par exemple <meta charset="utf-8"/> pour indiquer comment interpréter le code binaire en caractères (c’est une balise auto-fermante qui n’a pas de contenu et se ferme elle-même comme l’indique le slash / final) et <title>Titre</title> qui donne le titre de la page (utilisé sur l’onglet du navigateur, si vous créez un marque page ou si un moteur de recherche veut créer un lien vers votre page). - le corps de la page
<body> qui est la partie réellement affiché par le navigateur.
Quelques balises typiques
<p> pour un paragraphe<h1>, <h2>, <h3>, … pour des titres de niveau 1, 2, 3, … plus le niveau est bas, plus le titre est important.<strong> pour une mise en valeur forte (gras)<em> pour une mise en valeur, emphase, plus discrète (italique)<a href="cible"> pour un lien hypertexte<img src="adresse de l'image" alt="description"/> pour afficher une image (la balise est auto-fermante).<ol> (ordered list : liste numérotée) ou <ul> (unordered list : liste à puces) pour créer une liste, chaque élément de la liste étant dans un <li> (list item).
Il existe une grande variétés d’autres balises (pour une structuration en section, pour des éléments multimédia comme des vidéos ou du sons, etc) que vous pouvez découvrir par exemple sur le site du W3C (World Wide Web Consortium, organisme chargé de concevoir les langages du Web).
CSS
En réalité l’HTML ne sert pas à la mise en page mais uniquement à la structuration de la page, même le fait que <strong> mette son contenu en gras n’est pas directement une conséquence de l’HTML et peut être changé sans modifier son code HTML.
La mise en page sur le Web se fait avec le langage CSS (Cascading StyleSheets : feuilles de style en cascade) qui permet de décrire la façon de mettre en page chaque élément d’une page Web. Il est possible d’utiliser plusieurs fichiers contenant du CSS pour spécifier la mise en forme d’une page web et chaque fichier viendra préciser ou supplanter les règles de mise en forme du précédent d’où le « en cascade » dans le nom du langage, par exemple chaque navigateur a un fichier CSS de base, une feuille de style « par défaut », qu’il applique à chaque page et qui indique entre autre que <strong> doit être en gras, que les paragraphes <p> doivent se placer les uns en dessous des autres, etc. Les indications de style que vous donnerez seront après cette feuille de style par défaut et seront donc prioritaires.
Ajouter du CSS à une page
Il existe trois moyens de donner du style à ses balises par ordre de priorité croissante :
- un fichier CSS externe qui est indiqué dans l’entête de la page par :
<link href="style.css" rel="stylesheet">
(si votre fichier CSS s’appelle style.css et se trouve dans le même dossier que votre page HTML)
- du code CSS directement dans l’entête dans une balise
<style>, par exemple :
<style>
body {
background-color: red;
}
</style>
- des directives CSS directement dans une balise dans un attribut
style comme :
<img src="panda.png" alt="Un panda" style="width:400px;"/>
Directives CSS
Les instructions de mise en forme sont toutes sous la forme :
où la propriété est par exemple la couleur du texte (color), la couleur de l’arrière-plan (background-color), l’alignement du texte (text-align) et la valeur indique quelle couleur utiliser (red, green, rgb(0,255,0), …), comment aligner le texte (right, left, center, …), etc.
N’oubliez pas le point-virgule à la fin de la directive.
Déclarations CSS
On peut directement mettre les directives CSS souhaitées sur une balise avec l’attribut style mais cela devient fort peu pratique avec énormément de répétition lorsqu’on veut mettre tout une page ou même tout un site (!) dans une mise en page uniforme (tous les paragraphes avec une certaine police, tous les titres de niveau 1 avec une certaine taille de caractère, le menu sur le côté de la page, etc).
Pour cela il faut plutôt utiliser un fichier CSS (qu’on préfère à une balise <style> dans l’entête car on peut réutiliser le même fichier CSS dans plusieurs pages en répétant simplement son nom plutôt que son contenu).
Mais dans ce cas, il faut préciser à quelles balises les directives CSS s’appliqueront. On fait cela à l’aide d’une déclaration CSS :
sélecteur {
propriété: valeur;
propriété: valeur;
}
Le sélecteur est une description des balises auxquelles on appliquera les directives CSS entre les accolades (obtenues avec AltGr+4 et AltGr++ respectivement). Un sélecteur peut être simplement un nom de balise comme p, body, h1, … ou une sélection de balise par la valeur de leur attribut id (identifiant) comme #grandTitre (pour sélectionner la balise contenant id="grandTitre") ou par la valeur de leur attribut class comme .code (pour sélectionner les balises contenant class="code").
Il existe également d’autres possibilités, décrites dans cette page.
Pour de plus amples détails et des listes de propriétés et leurs valeurs possible consultez le site du W3C.
