HTML5 et CSS3
HTML est un langage à balises pour hypertextes. HTML signifie HyperText Markup Language. Il est utilisé pour créer des
pages Web. Autrement dit, les pages Web du monde entier se composent de HTML.
Le HyperText Markup Language (HTML) est le langage de publication du World Wide Web. La première version de HTML
a été décrite par Tim Berners-Lee, fin 1991.
Le Cascading Style Sheets (CSS : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation
des documents HTML (disposition, couleurs, polices…).
HTML (Hypertext Markup Language) et CSS (Cascading Style Sheets) sont deux technologies de base pour la création de
pages Web.
HTML fournit la structure de la page, et CSS la mise en page.
Le World Wide Web Consortium (W3C) standardise les protocoles, et les technologies utilisées
pour construire le web.
Le validateur W3C vérifie la validité du balisage des documents HTML et CSS.
[Link] [Link]
1. La syntaxe de la balise HTML
Balises paires et seules (ou auto fermantes)
HTML utilise des balises pour sa syntaxe. On distingue deux types de balises : les balises en paires et les balises orphelines.
Une balise (tag) est composée avec des caractères spéciaux :
• < Chevron ouvrant > chevron fermant / permet de définir la balise fermante
Balise ouvrante Balise fermante
Exemple :
<Nom du tag> Contenu </Nom du tag> <html> </html>
Balise paire
Les éléments HTML viennent habituellement par paires de balises.
Les balises orphelines : balise seule ou auto fermante <br> ou <br /> <hr>
Attribut = "texte"
Les éléments peuvent être complétés par des attributs. Les attributs affinent le sens de l’élément.
Exemple : <abbr title="Lycée du Pays de Saint-Omer ">LYPSO</abbr>
Ces attributs sont spécifiés sur la balise ouvrante. Ils se composent d'un nom et d’une valeur, séparés par un "="
Certains attributs sont communs à tous les éléments :
• title information textuelle sur le contenu de l’élément
• class associe une ou plusieurs classes à l’élément,
• id nomme un élément de manière unique dans le document
D’autres sont spécifiques à un élément
• src pour l’élément <img> (désigne la source de l’image)
• href pour l’élément <a>
Ne pas faire chevaucher les balises
LYPSO 1 HTML5 & CSS3
2. Editeur de code HTML
C’est un éditeur de code gratuit, et fonctionne sous tous les systèmes
d’exploitation (OS).
C’est un environnement de développement « intégré » (abrégé EDI en français
ou IDE en anglais, pour integrated development environment).
Certaines extensions peuvent-être téléchargées et installées : Bracket Pair Colorizer, Live Server, French Language Pack,
Material Icon Theme, …
Thème de couleur : One Dark Pro
3. Structure de base du document HTML
Le (DTD : Document Type Declaration) DOCTYPE doit être spécifié pour les
navigateurs, et placé en haut dans le document HTML, ici version 5
L'élément html représente la racine d'un document HTML avec son attribut langue
L'élément de l’entête représente un ensemble de métadonnées du
document.
Le contenu dans la balise head n’est pas affiché dans un navigateur Web.
L'élément body représente le corps du document.
Le <body> ... </ body> contient le balisage du contenu visible.
☺ L’indentation est automatique dans Visual Studio Code.
Travail à réaliser :
Télécharger Visual Studio Code, puis l’installer.
Taper le fichier [Link] dans l’IDE.
Enregistrer le fichier dans le répertoire html du disque réseau H.
Lancer le fichier dans Mozilla Firefox.
Valider le fichier HTML à l’aide du validateur W3C.
Convention d’écriture : Le camel Case
Les mots sont liés sans espace. Chaque mot commence par une majuscule à l'exception du premier.
Exemples : indexBase, myVariableName (aucun accent ou caractères spéciaux)
LYPSO 2 HTML5 & CSS3
Les balises HTML
3 modes d'affichage pour les éléments HTML. Par défaut, les éléments HTML sont affichés selon l'un
des modes suivants :
Bloc / block
Éléments superposés Occupe toute la largeur disponible. Lorsque 2 éléments blocs se suivent dans une page, ils
sont positionnés (par défaut) l'un sous l'autre.
En ligne / inline
Éléments côte à côte. N'occupe que la largeur indispensable à l'affichage du contenu et ne provoque pas de
retour à la ligne. Lorsque 2 éléments se suivent dans une page, ils sont positionnés l'un à côté l'autre.
Invisible / not displayed
Élément invisible. Certains éléments ne servent qu'à apporter des informations invisibles pour l'internaute.
1. Les balises dans l’entête (invisibles)
Les balises META servent à placer des métadonnées (metadata) dans une page HTML. On placera ces informations dans
l’élément head, et elles ne seront pas affichées sur la page.
À qui sont destinées ces informations ? À tous les outils susceptibles de les exploiter. Et notamment :
• Aux navigateurs web.
• Aux moteurs de recherche.
• À tous les outils d’indexation qui analysent vos pages pour y identifier diverses informations.
LYPSO 3 HTML5 & CSS3
2. Les balises dans le corps : les titres (blocs)
Les titres (heading) sont précisés par <h1>, <h2>, <h3>, <h4>, <h5> et <h6>.
Les paragraphes sont spécifiés par <p>.
Le séparateur horizontale (trait horizontal) est <hr />
Ce sont des balises de type bloc.
Référence des éléments HTML
Liste des balises HTML5
Travail à réaliser :
Taper le fichier [Link] dans l’IDE.
Enregistrer le fichier dans le répertoire html du disque réseau H.
Lancer le fichier dans Mozilla Firefox, Explorer et Edge.
Valider le fichier HTML à l’aide du validateur W3C.
Trouver les caractères spéciaux d’un espace insécable, du guillemet français ouvrant «, du
guillemet français fermant », et guillemet double (anglais) ".
LYPSO 4 HTML5 & CSS3
3. Créer des Listes (blocs)
Travail à réaliser :
Taper le fichier [Link] dans l’IDE.
Enregistrer le fichier dans le répertoire html du disque réseau H.
Lancer le fichier dans Mozilla Firefox, Explorer et Edge.
Valider le fichier HTML à l’aide du validateur W3C.
LYPSO 5 HTML5 & CSS3
Travail à réaliser :
Créer le fichier [Link] afin d’obtenir l’écran ci-dessus dans votre navigateur.
Enregistrer le fichier dans le répertoire html du disque réseau H.
Lancer le fichier dans Mozilla Firefox, Explorer et Edge.
Valider le fichier HTML à l’aide du validateur W3C.
4. Créer des liens (En ligne)
Lien absolu
On appelle lien absolu lorsque l’adresse complète est notifiée (lien vers un autre site) :
[Link]
LYPSO 6 HTML5 & CSS3
Liens relatifs
On appelle lien relatif lorsque la cible du lien se trouve sur le site.
Ils permettent d'aller vers une page selon la position de la page actuelle. On se sert donc de l'emplacement de la page qui
contient le lien pour définir la destination.
Racine du site : Dossier html Contenu du dossier test
du disque réseau H
Contenu du dossier image
Travail à réaliser :
Créer les dossiers et copier les fichiers.
Créer le fichier [Link] avec 2 liens relatifs pointant sur le fichier [Link] et le fichier
[Link]
Vérifier le résultat dans Mozilla Firefox, Explorer et Edge.
Valider le fichier HTML à l’aide du validateur W3C.
LYPSO 7 HTML5 & CSS3
Lien (signet) sur la page courante
Il est également possible de créer un lien vers un endroit précis de la page courante, ou d'une autre page afin
de positionner correctement le navigateur.
5. Insérer une image (En ligne)
Une image est insérée avec la balise img en spécifiant avec l'attribut src (source) le chemin de l'image à inclure
et avec l'attribut alt, l'éventuel texte de remplacement de l'image.
La balise img peut avoir divers attributs facultatifs. Seuls les attributs src et alt sont obligatoires.
• alt : texte de remplacement (affiché si le navigateur ne peut afficher l'image) ; cet attribut est obligatoire,
il permet notamment à un malvoyant de comprendre l'image qu'il ne peut voir (son logiciel lit le texte à
voix haute ou le transforme en braille) ;
• title : titre de l'image (s'affiche en info bulle dans le navigateur) ;
• height : hauteur de l'image (si aucune valeur spécifiée, l'image garde sa hauteur normale) ;
• width : largeur de l'image (si aucune valeur spécifiée, l'image garde sa largeur normale).
Les différents formats d'images
Le poids (en Ko, voire en Mo) de l'image sera plus ou moins élevé selon le format choisi et de la qualité de l'image.
Certains formats sont plus adaptés que d'autres selon l'image (photo, dessin, image animée…).
Toutes les images diffusées sur Internet ont un point commun : elles sont compressées.
Le JPEG (Photos)
Les images au format JPEG (Joint Photographic Expert Group) sont très répandues sur le Web. Ce format est conçu pour
réduire le poids des photos (c'est-à-dire la taille du fichier associé), qui peuvent comporter plus de 16 millions de couleurs
différentes.
Le PNG (Images)
Le format PNG (Portable Network Graphics) est le plus récent de tous. Ce format est adapté à la plupart des graphiques.
Le PNG a deux gros avantages : il peut être rendu transparent et il n'altère pas la qualité de l'image.
Le PNG a été inventé pour concurrencer un autre format, le GIF. Depuis, le PNG a bien évolué et c'est devenu le format le
plus puissant pour enregistrer la plupart des images.
Le PNG existe en deux versions, en fonction du nombre de couleurs que doit comporter l'image :
• PNG 8 bits : 256 couleurs ;
• PNG 24 bits : 16 millions de couleurs (autant qu'une image JPEG).
Le GIF (Images animées)
C'est un format assez vieux, qui a été néanmoins très utilisé. Aujourd'hui, le PNG est globalement bien meilleur que le GIF
: les images sont généralement plus légères et la transparence est de meilleure qualité.
Le format GIF est limité à 256 couleurs (alors que le PNG peut aller jusqu'à plusieurs millions de couleurs).
Néanmoins, le GIF conserve un certain avantage que le PNG n'a pas : il peut être animé.
LYPSO 8 HTML5 & CSS3
Travail à réaliser :
Créer le dossier image et copier les fichiers des images.
Créer le fichier [Link] en vous aidant du body de l’image ci-dessus.
Vérifier le résultat dans Mozilla Firefox, Explorer et Edge.
Valider le fichier HTML à l’aide du validateur W3C.
6. Insérer un tableau
Tableau simple
Un tableau est un ensemble de lignes elles-mêmes constituées de cellules.
Définition d’une ligne avec les balises (table row) : <tr> </tr>
Définition d’une cellule d’entête (table head) : <th> </th>
Définition d’une cellule de donnée (table data) : <td> </td>
Une légende peut être ajoutée au tableau : <caption> </caption>
LYPSO 9 HTML5 & CSS3
Il est possible également de définir 3 zones :
Zone d’entête du tableau
Zone de corps du tableau
Zone de pied du tableau
Tableaux à cellules recouvrantes
On fusionne des cellules (<td> ou <th>) :
• L’attribut colspan qui fusionne plusieurs colonnes
• L’attribut rowspan qui fusionne plusieurs lignes
Travail à réaliser : Créer la page WEB [Link] sur le modèle suivant :
7. Les formulaires
Formulaire de base
La balise form représente un formulaire. L’attribut method est utilisée pour envoyer les données au serveur.
L’attribut action qui traite l’URL du fichier d'envoi du formulaire.
Lorsque le formulaire est validé, l’ensemble des informations est transmis par la méthode POST (préférable à GET) au
fichier [Link]. Tous les attributs name contiennent les données de l’utilisateur.
<label> représente l’étiquette pour un champ destiné à
l’utilisateur (ici zone de texte). Il est associé à l’attribut
for afin d’identifier le <label>
La balise <input> est le type de champ, ici une zone de texte mono ligne : text
L’attribut id permet de l’associer à l’étiquette <label> par son attribut for.
Attribut name est le nom qui sera rattaché à la donnée envoyée via le formulaire.
LYPSO 10 HTML5 & CSS3
Formulaire avec différents champs
La balise <legend> La balise <fieldset> (le cadre) regroupe plusieurs étiquettes
Un champ texte à compléter
L’attribut required indique que le champ doit être
renseigné avant de pouvoir envoyer le formulaire.
Un champ mail à compléter
L’attribut placeholder est un indice supplémentaire sur le
champ à compléter.
LYPSO 11 HTML5 & CSS3
Un champ web à compléter
L’attribut placeholder est un indice supplémentaire sur le
champ à compléter.
Un champ avec des boutons radio et un champ avec des
boites à cocher checkbox
L’attribut checked sélectionne par défaut
Un champ représente une liste d’options.
Chaque élément <option> doit avoir un attribut value qui
contient la valeur qui sera transmises
2 groupes distincts ont été créés avec la balise
<optgroup>
LYPSO 12 HTML5 & CSS3
Travail à réaliser :
Taper le fichier [Link] dans l’IDE.
Enregistrer le fichier dans le répertoire html du disque réseau H.
Lancer le fichier dans Mozilla Firefox, Explorer et Edge.
Valider le fichier HTML à l’aide du validateur W3C.
8. Balises génériques
Balise de type block <div> </div>
La balise <div> définit une division. La balise div n’a pas de signification et peut être utilisé pour regrouper différents
éléments (tableaux, images, texte, multimédia). La balise <div> est utilisée comme partie de bloc de la page Web.
Elle peut contenir d’autres balises <div>, les boites s’empilent les unes derrière les autres.
Ces balises ne produisent aucun effet visuel, mais seront exploitées par les styles CSS.
Balise multi-usage en ligne <span> </span>
La balise <span> est un conteneur générique (en ligne - inline) pour les contenus phrasés. Elle peut être utilisée
pour grouper des éléments afin de les mettre en forme. Cette balise est très pratique pour appliquer un style CSS à une
portion de texte.
9. Structuration d'une page web
Les balises de structuration d’une page web sont invisibles, mais elles permettent de segmenter des portions de la page
WEB.
Entête <header> </header> Pied de page <footer> </footer>
Section <section> </section> Section de navigation <nav> </nav)
Article <article> </article> Aparté (notes) <aside> </aside>
LYPSO 13 HTML5 & CSS3
Une feuille de style est
nécessaire en CSS.
[Link] balises HTML5
Travail à réaliser :
Taper le fichier [Link] dans l’IDE.
Enregistrer le fichier dans le répertoire html du disque réseau H.
Lancer le fichier dans Mozilla Firefox, Explorer et Edge.
Valider le fichier HTML à l’aide du validateur W3C.
LYPSO 14 HTML5 & CSS3
