Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Université Hassan 1er Faculté des Sciences et Techniques de Settat COURS HTML H

Université Hassan 1er Faculté des Sciences et Techniques de Settat COURS HTML HyperText Markup Language Professeur Laachfoubi Nabil Département des Mathématiques et Informatique Pr. N. Laachfoubi, FSTS, Département des Mathématiques et Informatique Sommaire A. Introduction ........................................................................................................................................................4 A.1. Bref historique du HTML .............................................................................................................................4 A.2. HTML : un langage de balises ......................................................................................................................4 A.3. HTML : règles de base .................................................................................................................................5 B. Structure d’un document HTML .........................................................................................................................6 B.1. Les éléments de base ..................................................................................................................................6 C. Structurer le contenu d’une page ......................................................................................................................9 C.1. Les grandes divisions de la page ..................................................................................................................9 C.2. Les divisions secondaires .......................................................................................................................... 11 C.3. Les divisions de bloc locales ..................................................................................................................... 12 C.4. Les éléments des divisions sémantiques du texte ................................................................................... 12 C.5. Les styles physiques .................................................................................................................................. 14 C.6. Les listes .................................................................................................................................................... 15 D. Insérer des images et du multimédia .............................................................................................................. 17 D.1. Les types d’images ................................................................................................................................... 17 D.2. L’insertion d’images et du multimédia .................................................................................................... 18 E. Les liens ............................................................................................................................................................ 19 E.1. L’insertion d’un lien .................................................................................................................................. 19 E.2. Les liens externes ...................................................................................................................................... 20 E.3. Les liens ciblés : les ancres ........................................................................................................................ 20 E.4. Les liens pour télécharger des fichiers ..................................................................................................... 21 E.5. Lien à partir d'une image ou un élément de type bloc ............................................................................. 22 E.6. Le lien vers une adresse email .................................................................................................................. 22 E.7. Les liens déclenchant un script JavaScript ................................................................................................ 22 F. Les tableaux ..................................................................................................................................................... 23 F.1. La structure générale d’un tableau ........................................................................................................... 23 F.2. Les cellules de tableaux ............................................................................................................................ 25 F.3. La fusion des cellules ................................................................................................................................ 26 F.4. Les cellules d’entête ................................................................................................................................. 27 Pr. N. Laachfoubi, FSTS, Département des Mathématiques et Informatique F.5. La légende d’un tableau ............................................................................................................................ 27 F.6. Le groupement de colonnes ..................................................................................................................... 28 F.7. La structuration d’un tableau ................................................................................................................... 29 G. Les formulaires ................................................................................................................................................ 30 G.1. La déclaration de formulaire .................................................................................................................... 30 G.2. Les composants communs ....................................................................................................................... 31 G.3. Les composants de saisie d'informations ................................................................................................ 32 Pr. N. Laachfoubi, FSTS, Département des Mathématiques et Informatique Page 4 sur 38 A. Introduction A.1. Bref historique du HTML Depuis les débuts du World Wide Web, de nombreuses versions de HTML (HyperText Markup Language) ont été créé : Année Version 1989 Tim Berners-Lee invente WWW 1991 Tim Berners-Lee invente HTML 1993 Dave Raggett rédige HTML+ 1995 HTML Working Group definit HTML 2.0 1997 Recommendation W3C : HTML 3.2 1999 Recommendation W3C : HTML 4.01 2000 Recommendation W3C : XHTML 1.0 2008 WHATWG HTML5 First Public Draft 2012 WHATWG HTML5 Living Standard 2014 Recommandation W3C : HTML5 2016 W3C Candidate Recommandation : HTML 5.1 A.2. HTML : un langage de balises Dans un langage de balisage, tout contenu, qu'il s'agisse de texte, d'images ou d'éléments multimédias les plus divers, doit être enfermés dans un élément. En HTML, chaque élément possède un nom déterminé ; la liste des éléments utilisables est limitative et clairement définie dans la spécification du langage. Les balises Les balises, appelées tags en anglais, sont des commandes à l’intention du navigateur et saisies entre les signes, inférieur à (<) et supérieur à (>). Ainsi une balise s’écrit <balise>. En règle générale, à toute balise d’ouverture correspond une balise de fermeture qui marque la fin de la commande annoncée par la balise d’ouverture. La balise de fermeture reprend le même énoncé que la balise d’ouverture mais ce dernier est précédé d’un slash (/). Ainsi à la balise d’ouverture <balise> correspondrait la balise de fermeture </balise>. La syntaxe d’une balise est alors : <balise> Contenu Balise </balise> Pr. N. Laachfoubi, FSTS, Département des Mathématiques et Informatique Page 5 sur 38 Les attributs de la balise Il est parfois nécessaire de compléter une commande par des spécifications plus précises dans l’un ou l’autre domaine. Pour ce faire, le langage HTML dispose des attributs de la balise. L’attribut s’insère dans la balise, entre le mot de commande et le signe > final. La syntaxe complète d’une balise avec un attribut est : <balise attribut="valeur"> Contenu Balise </balise> L’attribut comporte toujours une valeur, celle-ci s’indique en complément de l’attribut par un signe égal (=) suivi de la valeur mise entre des guillemets. Il est impératif de mettre cette valeur entre guillemets. Le strict respect de la syntaxe veut qu’il n’y ait pas d’espace avant et après le signe égal. Il est possible d’utiliser plusieurs attributs, séparés par un espace, dans une même balise : <balise attribut1="valeur1" attribut2="valeur2 valeur3">Contenu Balise </balise> Le contenu d'une balise peut être constitué de texte ou d'autres balises, eux-mêmes, peuvent en contenir d'autres, et ainsi de suite. Cet ensemble d'inclusion constitue la hiérarchie du document HTML. A.3. HTML : règles de base Un document bien formé Un document HTML est considéré bien formé s’il respecte les règles simples suivantes : ▪ Les balises et les attribues sont insensibles à la casse. Ainsi, on peut écrire indifféremment <BALISE>, <Balise> ou <balise>. ▪ Les balises non vides doivent avoir une balise d'ouverture et une balise de fermeture. Par exemple, au lieu d’écrire : <a> <b>article1 <b>article2 On utilisera le code suivant : <a> <b>article1</b> <b>article2</b> </a> ▪ Pour les balises vides, il serait plus propre de les terminer par les caractères /> précédés d'un espace pour marquer la fin de la balise : <balise />. ▪ Les balises doivent être correctement imbriquées et donc obéir au principe premier ouvert, dernier fermé. Par exemple, au lieu d’écrire (code incorrect) : <a><b><c>contenu</a></c></b> Pr. N. Laachfoubi, FSTS, Département des Mathématiques et Informatique Page 6 sur 38 On doit utiliser le code suivant : <a><b><c>contenu</c></b></a> ▪ Toutes les valeurs des attributs doivent toujours figurer entre des guillemets. Par exemple, on préférera le code suivant : <a attribut1="valeur1" attribut2="valeur2" > contenu</a> Plutôt que d’écrire : <a attribut1=valeur1 attribut2=valeur2 > contenu</a> Un document conforme Un document HTML est déclaré conforme et valide s’il respecte les règles d'inclusion des éléments, les uns dans les autres, telles qu'elles sont définies dans la spécification. Pour s'assurer de la conformité d'un document HTML, plusieurs validateurs sont disponibles en ligne comme : ▪ https://validator.w3.org/ ▪ https://html5.validator.nu/ B. Structure d’un document HTML B.1. Les éléments de base Un document HTML se compose d’un ensemble d’éléments de balisage, certains sont obligatoires, d’autres sont optionnels. Il comporte toujours au moins quatre éléments : ▪ Une déclaration DOCTYPE ▪ Les balises d’ouverture et de fermeture <html> </html> ▪ Les balises d’ouverture et de fermeture <head> </head> ▪ Les balises d’ouverture et de fermeture <body> </body> La déclaration DOCTYPE Tout document HTML doit commencer par une déclaration doctype. Cette ligne de balisage spécifie la version HTML du document qui va être créé et permet 5, aux navigateurs de l’interpréter correctement. A partir de sa version 5, Le HTML utilise le doctype simplifié suivant : <!DOCTYPE html> La balise racine <html> La balise <html> est l’élément racine du document. Elle prend place juste après la déclaration du doctype. Il n’existe que deux éléments enfants de la racine <html> : le <head> et le <body> mais elle constitue le parent de tous les autres éléments. Pr. N. Laachfoubi, FSTS, Département des Mathématiques et Informatique Page 7 sur 38 La balise <html> possède plusieurs attributs dont les plus utilisés sont : 1. L'attribut lang : la valeur indique la langue utilisée par défaut dans la page. 2. L'attribut dir : il indique le sens de lecture du texte dans la page. Il peut prendre les valeurs ltr pour le texte qui se lit de gauche à droite (langues occidentales) ou rtl pour le texte qui se lit de droite à gauche (langues orientales comme l’arabe ou l’hébreu) <html lang="fr" dir="ltr" > < !-- Les éléments HTML de la page -- > </html> L’entête du document : la balise <head> La balise <head> constitue l’entête du document. Elle contient les balises suivantes : 1. La balise <title> : c’est le titre du document, 2. Les balises <style> et <link> : englobent des déclarations ou des appels de feuilles de style CSS, 3. La balise <base> : c’est adresse de base par default de tous les liens de la page, 4. La balise <script> : contient des fonctions ou des liens vers des fichiers JavaScript, 5. Les balises méta : servent à placer des métadonnées dans la page HTML. Ce sont des informations, utilisées par les navigateurs web et les moteurs de recherche. <head> <meta charset="utf-8"> <title>Titre de la page</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> Le titre de la page : la balise <title> La balise <title> est la seule balise obligatoire dans l’entête du document. Elle contient le titre du document HTML qui apparaît dans la barre de titre située en haut de la fenêtre du navigateur. <title>Titre de la page</title> L’adresse de base : la balise <base/> La balise <base/> contient l’adresse de base par default de tous les liens de la page si leur adresse est transmise de façon relative. <base href="http : //www.fsts.ac.ma/pages/" > Pr. N. Laachfoubi, FSTS, Département des Mathématiques et Informatique Page 8 sur 38 Les documents liés : la balise <link/> La balise <link/> permet d’incorporer le contenu d’un fichier externe - une feuille de style CSS ou une icône - dans une page web. <link rel="stylesheet" href="monstyle.css"> <link rel="icon" href="/favicon.ico" type="image/x-icon"> Les métadonnées : uploads/s1/ html-cours.pdf