2. Partie 1 : Les Bases en HTML et en CSS
Partie 2 : Formater du Texte & Positionner des Eléments grâce au CSS
Partie 3 : Fonctionnalités Avancées
Partie 4 : Aller plus Loin
SOMMAIRE
3. CHAPITRE 1 : PREMIERE APPROCHE THEORIQUE
DU HTML ET DU CSS
4. HTML est l’abréviation de HyperText Markup Language, soit en français « langage hypertexte de balisage ».
Ce langage a été créé en 1991 et a pour fonction de structurer et de donner du sens à du contenu.
CSS signifie Cascading StyleSheets, soit « feuilles de style en cascade ». Il a été créé en 1996 et a pour rôle de
mettre en forme du contenu en lui appliquant ce qu’on appelle des styles.
Il ne faut JAMAIS utiliser le HTML pour faire le travail du CSS.
Retenez donc que le HTML est utilisé pour baliser un contenu, c’est à dire pour le structurer et lui donner du
sens. Le HTML sert, entre autres choses, à indiquer aux navigateurs quel texte doit être considéré comme un
paragraphe, quel texte doit être considéré comme un titre, que tel contenu est une image ou une vidéo.
Le CSS, quant-à-lui, est utilisé pour appliquer des styles à un contenu, c’est-à-dire à le mettre en forme. Ainsi,
avec le CSS, on pourra changer la couleur ou la taille d’un texte, positionner tel contenu à tel endroit de notre
page web ou ajouter des bordures ou des ombres autour d’un contenu.
1.1 DÉFINITIONS ET RÔLES DU HTML ET DU CSS
5. Les versions actuelles du HTML et du CSS sont HTML5 et CSS3. Il faut savoir que, contrairement aux idées
reçues, ce sont encore des versions non finalisées. Cela signifie que ces versions sont toujours en
développement et qu’elles sont toujours en théorie sujettes à changements et à bugs.
En pratique, toutefois, on peut considérer ces versions comme totalement stables et c’est donc sur celles-ci
que nous allons travailler.
La version 5 d’HTML, tout comme la version 3 de CSS introduisent de nombreuses nouvelles fonctionnalités
longtemps attendues par les développeurs et il serait donc dommage de s’en priver.
Parmi celles-ci, l’insertion simplifiée de vidéos et de contenus audio et de nouvelles balises améliorant la
sémantique pour mieux structurer nos pages en HTML ou encore la possibilité de créer des bordures
arrondies en CSS.
1.2 VERSIONS ACTUELLES DES LANGAGES HTML ET CSS
6. XHTML signifie eXtensible HTML. Crée en 2000, il devait à l’origine succéder au HTML.
En effet, il faut savoir que le HTML base sa syntaxe sur le langage SGML (Standard Generalized Markup
Language) tandis que le XHTML se fonde sur le XML (eXtensible Markup Language)
A l’époque, le XML était une véritable petite révolution puisqu’il permettait de faire davantage de choses que
le SGML et qu’il était dit plus simple à utiliser.
Cependant, le HTML a continué à se développer en parallèle au XHTML et le XHTML est définitivement
abandonné en 2009 ou plus exactement a été en partie intégré dans ce qui allait devenir le HTML5.
1.3 LE XHTML
7. Il existe des centaines d’éditeurs de texte . Certains sont gratuits, d’autres sont payants. Je ne vais pas vous imposer
le choix d’un éditeur, mais simplement vous donner des recommandations.
Je vous conseille de choisir un éditeur de texte gratuit. Une raison à cela : à moins d’être un développeur expert,
vous n’aurez quasiment jamais besoin des options disponibles avec les éditeurs payants.
Deuxième conseil : essayez-en plusieurs avant de faire votre choix. En effet, comme je l’ai dit, les bons éditeurs
possèdent quasiment tous les mêmes fonctionnalités. La différence va donc se faire sur l’ergonomie et la prise en
main.
Voici les éditeurs que je peux vous conseiller :
Sublime text pour Windows
NotePad++, pour Windows
Komodo, pour Mac ou Linux
TextWrangler, pour Linux
1.4 L’ÉDITEUR DE TEXTE
9. Il y a trois termes dont vous devez absolument comprendre le sens en HTML. Ce sont les termes élément,
balise et attribut.
Les éléments, tout d’abord, vont nous servir à définir des objets dans notre page. Grâce aux éléments, nous
allons pouvoir définir un paragraphe (élément p), des titres d’importances diverses (éléments h1, h2, h3, h4,
h5 et h6) ou un lien (élément a).
Les éléments sont constitués de balises. Dans la majorité des cas, un élément est constitué d’une paire de
balises : une balise ouvrante et une balise fermante.
2.1 ELÉMENTS, BALISES ET ATTRIBUTS
10. Les balises reprennent le nom de l’élément et sont entourées de chevrons. La balise fermante possède en plus un slash qui précède
le nom de l’élément.
Certains éléments ne sont constitués que d’une balise qu’on appelle alors balise orpheline. C’est par exemple le cas de l’élément br
qui va nous servir à créer un retour à la ligne (l’écriture en HTML est alors <br/>).
Notez que, dans le cas des balises orphelines, le slash se situe après le nom de l’élément. Notez également que ce slash n’est pas
obligatoire et que certains développeurs l’omettent volontairement.
Je vous conseille cependant, pour des raisons de propreté de code et de compréhension, de mettre le slash dans un premier
temps.
Les attributs vont venir compléter les éléments en leur donnant des indications ou des instructions supplémentaires.
Dans le cas d’un lien, on va se servir d’un attribut pour indiquer la cible du lien, c’est à dire vers quel site le lien doit mener.
Notez que les attributs se placent toujours à l’intérieur de la balise ouvrante d’un élément (ou de la balise orpheline le cas échéant).
2.1 ELÉMENTS, BALISES ET ATTRIBUTS
11. Dans l’exemple ci-dessus, on discerne l’élément a composé :
d’une balise ouvrante elle-même composée d’un attribut href
d’une ancre textuelle
d’une balise fermante
L’attribut href (initiales de « Hypertexte Reference ») sert à indiquer la cible de notre lien, en l’occurrence le
site Wikipédia.
L’ancre textuelle correspond au texte entre les balises. Ce sera le texte sur lequel vos visiteurs devront cliquer
pour se rendre sur Wikipédia et également l’unique partie visible pour eux.
2.1 ELÉMENTS, BALISES ET ATTRIBUTS
12. Toute page HTML5 doit commencer par la déclaration de ce qu’on appelle un « doctype ». Le doctype, comme son
nom l’indique, sert à indiquer le type du document. Dans notre cas, le type de document est HTML. On écrira donc :
<!DOCTYPE html>
Notez bien le point d’exclamation, obligatoire, au début de cet élément un peu particulier.
Ensuite, pour que notre page HTML5 soit valide, il va nous falloir indiquer trois nouveaux éléments : html, head («
en-tête ») et body (« corps de page »). L’élément html va contenir toute la page. L’élément head contiendra entre
autres, le titre de la page, l’encodage utilisé et des meta-data (des données invisibles pour les utilisateurs mais
essentielles).
L’élément body contiendra tout le contenu de notre page (paragraphes, images, tableaux, etc.). Voilà où nous en
sommes rendus pour le moment :
2.2 STRUCTURE DE BASE D’UNE PAGE EN HTML5
13. Pour que la page soit valide, l’élément head doit lui même contenir un élément title, qui correspond au titre
de la page et le meta charset qui prendra comme valeur le type d’encodage choisi.
Pour les langues latines, nous choisirons généralement la valeur « utf-8 ».
Voici à quoi vous devriez arriver en pratique :
2.2 STRUCTURE DE BASE D’UNE PAGE EN HTML5
33. RÉSUMÉ
▪ Utiliser l'attribut style pour styliser les éléments HTML
▪ Utiliser background-color pour la couleur d'arrière-plan
▪ Utiliser color pour les couleurs du texte
▪ Utiliser font-family pour les polices de texte
▪ Utiliser font-size pour les tailles de texte
▪ Utiliser text-align pour l'alignement du texte
44. LES TABLEAUX
SYNTAXE
▪ Chaque ligne du tableau commence par un <tr> et se termine par une balise </tr> (table row).
▪ Chaque cellule du tableau est définie par une balise <td> et une balise </td> (table data).
▪ Tout ce qui se trouve entre <td> et </td> est le contenu de la cellule du tableau.
70. LES LISTES
DÉFINITION
▪ Les listes HTML permettent aux développeurs Web de regrouper un ensemble d'éléments
connexes dans des listes.
71. LISTE NON ORDONNÉE
Une liste non ordonnée commence par la balise <ul> (unordered list) . Chaque élément de la liste commence
par la balise <li>.
Les éléments de la liste seront marqués par des puces (petits cercles noirs) par défaut
72. LISTE ORDONNÉE
Une liste ordonnée commence par la balise <ol> (Ordered List). Chaque élément de la liste commence par la
balise <li>.
Les éléments de la liste seront marqués par des numéros par défaut
73. LISTES DE DESCRIPTION
Une liste de description est une liste de termes, avec une description de chaque terme.
La balise <dl> définit la liste de description, la balise <dt> définit le terme (nom) et la balise <dd> décrit chaque
terme :
74. BALISE DESCRIPTION
<ul> Définit une liste non ordonnée
<ol> Définit une liste ordonnée
<li> Définit un élément de liste
<dl> Définit une liste de description
<dt> Définit un terme dans une liste de description
<dd> Décrit le terme dans une liste de description
75. BLOC HTML & INLINE
DÉFINITION & SYNTAXE
▪ Il existe deux valeurs d'affichage : bloc et Inline.
▪ Un élément de niveau bloc commence toujours sur une nouvelle ligne et les navigateurs
ajoutent automatiquement un espace (une marge) avant et après l'élément.
▪ Un élément de niveau bloc occupe toujours toute la largeur disponible (il s'étend aussi loin
que possible vers la gauche et la droite).
76. BLOC HTML
Deux éléments de bloc couramment utilisés sont : <p> et <div>.
L'élément <p> définit un paragraphe dans un document HTML.
L'élément <div> définit une division ou une section dans un document HTML.
77. INLINE
Un élément Inline ne commence pas sur une nouvelle ligne.
Un élément Inline ne prend que la largeur nécessaire.
78. L'ÉLÉMENT <DIV>
L'élément <div> est souvent utilisé comme conteneur pour d'autres éléments HTML.
L'élément <div> n'a pas d'attributs obligatoires, mais style, class et id sont communs.
Lorsqu'il est utilisé avec CSS, l'élément <div> peut être utilisé pour styliser des blocs de contenu
79. L'ÉLÉMENT <SPAN>
L'élément <span> est un conteneur Inline utilisé pour marquer une partie d'un texte ou une partie
d'un document.
L'élément <span> n'a pas d'attributs obligatoires, mais style, class et id sont communs.
Lorsqu'il est utilisé avec CSS, l'élément <span> peut être utilisé pour styliser des parties du texte
80. LES CLASSES
DÉFINITION & SYNTAXE
▪ L'attribut de classe HTML est utilisé pour spécifier une classe pour un élément HTML.
▪ Plusieurs éléments HTML peuvent partager la même classe.
83. ID
DÉFINITION & SYNTAXE
▪ L'attribut HTML id est utilisé pour spécifier un identifiant unique pour un élément HTML.
▪ Vous ne pouvez pas avoir plus d'un élément avec le même identifiant dans un document
HTML.
▪ La syntaxe pour id est la suivante : écrivez un caractère dièse (#), suivi d'un nom d'id.
Ensuite, définissez les propriétés CSS entre accolades {}.
85. LES FORMULAIRES
DÉFINITION & SYNTAXE
▪ L'élément HTML <form> est utilisé pour créer un formulaire HTML pour la saisie de l'utilisateur
▪ Syntaxe : <form>
… Les éléments de formulaire …
</form>
▪ L'élément <form> est un conteneur pour différents types d'éléments d'entrée, tels que : champs de
texte, cases à cocher, boutons radio, boutons d'envoi, etc.
86. ÉLÉMENTS DE FORMULAIRE HTML
BALISE DESCRIPTION
<form> Définit un formulaire HTML pour la saisie de l'utilisateur
<input> Définit un contrôle d'entrée
<textarea> Définit un contrôle de saisie multiligne (zone de texte)
<label> Définit une étiquette pour un élément <input>
<fieldset> Regroupe les éléments liés dans un formulaire
<legend> Définit une légende pour un élément <fieldset>
87. ÉLÉMENTS DE FORMULAIRE HTML
BALISE DESCRIPTION
<select> Définit une liste déroulante
<optgroup> Définit un groupe d'options associées dans une liste déroulante
<option> Définit une option dans une liste déroulante
<button> Définit un bouton cliquable
<datalist> Spécifie une liste d'options prédéfinies pour les contrôles d'entrée
<output> Définit le résultat d'un calcul
88. L'ÉLÉMENT <INPUT>
L'élément HTML <input> est l'élément de formulaire le plus utilisé. Il peut être affiché de plusieurs façons,
selon l'attribut type. Voici quelques exemples:
TYPE DESCRIPTION
<input type="text"> Affiche un champ de saisie de texte sur une seule ligne
<input type="radio">
Affiche un bouton radio (pour sélectionner l'un des
nombreux choix)
<input type="checkbox">
Affiche une case à cocher (pour sélectionner zéro ou
plusieurs choix)
<input type="submit">
Affiche un bouton de soumission (pour soumettre le
formulaire)
<input type="button"> Affiche un bouton cliquable
90. L'ÉLÉMENT <LABEL>
La balise <label> définit une étiquette pour de nombreux éléments de formulaire.
L'élément <label> aide également les utilisateurs qui ont des difficultés à cliquer sur de très petites
régions (telles que des boutons radio ou des cases à cocher) - car lorsque l'utilisateur clique sur le
texte dans l'élément <label>, il bascule le bouton radio/case à cocher.
L'attribut for de la balise <label> doit être égal à l'attribut id de l'élément <input> pour les lier
ensemble.
