Sommaire. Les caractères nommés Les URL Les types MIME. Attribut standard Attribut d Événement

Transcription

1 LES BASES DE HTML 5 Ce cours recense de façon synthétique les principaux concepts, outils, éléments et attributs HTML nécessaires à la création d'un site internet. Les listes ne sont donc pas exhaustives et certaines explications ne sont pas exemptes de simplifcations. Sommaire Introduction Les logiciels nécessaires Le W3C Syntaxe Mise en forme Les balises Structure minimale d'une page HTML Règles facultatives hérités du XHTML Quelques différences avec HTML4 L'encodage des caractères Les caractères nommés Les URL Les types MIME Les attributs Attribut standard Attribut d Événement Balise d'en tête <head> Les métadonnées de la page web Le titre Lier un fchier à la page web Insérer de code Balise de corps <body> La sémantique du Web Balise d'architecture non sémantique Balise d'architecture sémantique Balise sémantique de texte Balise de texte non sémantique Balise de liste Balise de tableau Balise de formulaire Balise multimédia

2 INTRODUCTION Les logiciels nécessaires Pour créer une page web, il sufft d'écrire le code de la page dans un fchier d extension.html avec un simple éditeur de texte. Mais il est recommandé d utiliser un logiciel proposant une coloration syntaxique pour faciliter la lecture du code. (Ex : Notepad++, Komodo Edit) Un navigateur internet affche l'apparence d'une page web à partir d'un fchier html. (ex : Firefox) Le W3C le langage HTML («HyperText Mark-Up Language») est un standard, c'est-à-dire qu'il s'agit de recommandations publiées par un consortium international : le World Wide Web Consortium (W3C). Ce standard évolue et présente donc plusieurs version dont : HTML 4 (1999) XHTML (000) HTML 5 (014) XHTML est une reformulation plus rigoureuse du HTML. Bien que sa syntaxe présente des différences minimes avec celle du HTML, elle en devient pour autant plus précise et plus logique. Le W3C propose des outils de validations de code : Les navigateurs internet implémentent ces standards au fur et à mesure de son évolution mais notez que tous les navigateurs ne sont pas forcément à jour. Un même site ne s'affche pas exactement de la même façon suivant le navigateur utilisé. SYNTAXE Mise en forme Le langage HTML considère une suite d'un ou plusieurs espaces/tabulations/saut de ligne comme une seul espace. Cela permet notamment d'indenter le code HTML pour plus de lisibilité, sans modifer l'apparence de la page HTML dans le navigateur. Le doctype : <!DOCTYPE html> Déclaration de Type de Document (DTD), également nommée "doctype". Cette syntaxe informe au navigateur la version du code HTML utilisé ; ici HTML5. Les commentaires :  Syntaxe indiquant que les éléments ne doivent pas être prises en compte lors de l'affchage des éléments dans le navigateur (en vert).  Les balises Un élément HTML est composé d'une balise ouvrante (son nom encadré par des chevrons, en bleu) de son contenu (noir) et d'une balise fermante (son nom précédé d'un slash / encadré par des chevrons, en bleu). <nomelement> balise ouvrante Texte affiché Contenu de l'élément </nomelement> balise fermante

3 Certain éléments HTML n'ont jamais de contenu, on se passe donc de la balise fermante. On signale une balise autofermante (ou orpheline) en ajoutant un espace et un slash ( /) à la fn de la balise ouvrante. <nomelement /> balise auto-fermante (ou orpheline) Certaines balises ouvrantes peuvent contenir des attributs (rouge) paramétrables en leurs assignant une valeur entre guillemets (violet). <nomelement nomattribut="valeurattribut"> Les balises peuvent s'imbriquer les unes dans les autres mais pas se chevaucher. (Elles s'ouvrent et se ferment dans un ordre logique.) <a> <b></b> </a> correct <a> <b> </a> </b> INCORRECT! Les éléments imbriqués son les «Enfants» de l'élément «Parent». Un élément «Enfant» reçoit en héritage tous les styles CSS «héritable» de son élément «Parent». <a> <b></b> </a> l'élément B est un enfant de l'élément A. L'élément A est un parent de l'élément B. Structure minimale d'une page HTML <!DOCTYPE html> code HTML 5 <html lang="fr"> création d'une page HTML dont le contenu est en langue française <head> (tête) balise contenant les propriétés/méta-données de la page web (éléments non affchées) <meta charset="utf-8" /> jeux de caractères standard unicode <title>les bases de HTML 5</title> titre de la page web </head> <body> (corps) balise contenant les éléments à affcher  un exemple de commentaire informatif </body> </html> Règles facultatives hérités du XHTML Les noms des balises sont en minuscule. les minuscules sont visuellement plus lisible que les majuscules Tous les éléments doivent être fermés. Les balises auto-fermantes doivent contenir un espace et un slash à la fn de la balise ouvrante. Organise le code de façon logique. Règle plus simple car elle n'a pas les exceptions : <p>, <dd>, <dt>, <li>, <optgroup>, <option>, <rt>, <rp>, <td>, <th>, <tr>, <thead> et <tfoot> Les attributs ont une valeur entre guillemets. règles beaucoup plus simple que «les guillemets peuvent être omis si la valeur de l'attribut ne contient que des lettres (a-z et A-Z), des chiffres (0-9), trait d'union (-), virgule (,), tiret bas (_) et deux-points (:)» Un attribut minimisé (valeur booléenne arbitrairement sur «true») est égale à son propre nom. Ex : HTML : selected attribut minimisé XHTML : selected="selected" (="true" ou ="false" ne fonctionnent pas) Quelques différences avec HTML4 Ajout de nombreuses balises sémantiques et des balises médias <audio> <video> et <canvas>. L'identifcation des balises <img>, <form> et <a> se fait avec id car contrairement à name il est obligatoirement unique. Les attributs alt sur les images sont obligatoires pour des raisons d'accessibilités. Si l'image est purement décorative on écrit alors alt="" Les attributs type (type MIME) ne sont plus obligatoires pour les balises <link>, <script> et <style> Note : l'attribut language de <script> est remplacer par type Le design est exclusivement réservé au code CSS. Il faut utiliser une feuille de style CSS, l'attribut style ou la balise <style>. Sauf exception, sont obsolètes les balises et attributs de design : <basefont>, <big>, <center>, <font>, <strike>, <tt>, align bgcolor width height border cellpadding cellspacing etc.

4 L'encodage des caractères Il est important de savoir dans quel codage est enregistré le fchier.html, afn de pouvoir annoncer ce codage aux navigateurs web qui affcheront les bons caractères à l'écran. Codages des caractères usuels : ASCII est un standard américain. 18 caractères - pas de lettre avec signes diacritiques (accents) ISO (ou Latin-1) extension d ASCII 191 caractères - lettre avec signes diacritiques ISO (ou Latin-9) extension de Latin-1 ajout notable œ et Windows-15 (ou CP15) extension de Latin-1 18 caractères, œ,, «,»,, (demi-cadratin), etc. ANSI n'est pas un standard, il correspond le plus souvent à Windows-15. UTF-8 est un standard d'unicode compatible avec la norme ASCII code l'ensemble des caractères internationaux Il est recommandé d'utiliser l'encodage UTF-8. (Dans notepad++ : encodage convertir en UTF-8) Les caractères nommés Un caractère nommé est nécessaire s'il ne doit pas être confondu avec la syntaxe du code HTML. Il est encadré par & et ; Espace insécable : non-breaking space (espace insécable) (Espace cumulable et ne pouvant être brisé par une fn de ligne.) Chevron ouvrant (<) : < less than (moins que) Chevron fermant (>) : > greater than (plus que) Guillemets (") : &quote; (citation) Esperluette (&) : & ampersand (esperluette) Un caractère nommé permet également d'utiliser un caractère qui se trouve en dehors du jeu de caractères utilisé, déterminé par l'encodage des caractères (É, à, œ, Γ, «,»,,, ). Lettre avec signes diacritiques : & + (lettre à accentuée) + (signes diacritiques) + ; Signes diacritiques : aiguë : acute grave : grave circonfexe : circ circumfex tréma : uml umlaut cédille : cedil cedilla lettres ligaturées : & + ( lettres) + lig; Mais les caractères nommés rendent le code peu lisible : <p>c'est ça ton œuvre?</p> affche «C'est ça ton œuvre?» Les URL Uniform Resource Locator, littéralement «localisateur uniforme de ressource», désigne une chaîne de caractères utilisée pour adresser les ressources du World Wide Web. Cibler une page internet : web) Cibler une adresse mailto:( ) Cibler une balise dans une page HTML : #(id/name de l'élément HTML) Cibler un fchier/dossier déduit à partir de l'url de la source : /(chemin d'accès à partir du dossier racine) URL absolu

5 ./(chemin d'accès à partir du dossier courant) URL relative (syntaxe facultative)../(chemin d'accès à partir du dossier parent) URL relative, syntaxe pour remonter d'un dossier (cumulable pour remonter de plusieurs dossiers) Ex : <img src="../../mes-images/chaton.jpg" /> Cette URL relative cible l'image en partant du fchier contenant le lien, puis en remontant de dossiers, puis en rentrant dans le dossier «mes-images» pour enfn chercher l'image «chaton.jpg». Les types MIME C'est un identifant de format de données sur internet. Il permet d'informer le format d'un fchier ou le codage utilisé dans une balise. Il est composé en deux parties : (type)/(sous-type). Les types et sous-types non standards commencent par «x-». type : text/ sous-type : css ; html ; xml type : image/ sous-type : jpeg ; png ; gif ; tiff ; svg+xml ; vnd.microsoft.icon (anciennement x-icon) type : audio/ sous-type : ogg ; mpeg ; wav type : video/ sous-type : mp4 ; webm ; ogg ; x-flv type : application/ sous-type : javascript ; rss+xml ; x-shockwave-flash ; pdf Ex : <style type="text/css"> cette balise contient du texte qui est du code CSS <link type="image/jpeg" /> cette balise lie une image en format JPEG LES ATTRIBUTS Attribut standard Sauf exception, tous les éléments HTML peuvent avoir les attributs suivants : id identifcation (identité) nom UNIQUE de l'élément Class (catégorie) le(s) nom(s) de catégorie séparé par des espaces style (style) code CSS lang language (langue) abréviation de la langue (en, fr etc.) hidden (cacher) attribut minimisé title (titre) texte visible au survole de la souris Attribut d Événement Ces attributs créent un «écouteur» sur éléments HTML qui déclenche un code javascript lorsque l événement est produit (sur l élément possédant l'écouteur). <nomelement nomecouteur="code javascript"></nomelement> Les noms des attributs javascript n'ont pas d'espace, mais il est signifé par la présence d'une majuscule sur le mot suivant. onclick on click (au clic) code javascript onkeypress on key press (à l appui d'une touche) code javascript onchange on change (au changement) code javascript

6 onfocus on focus (au focus) code javascript onload on load (au chargement) code javascript Les instructions Javascript se terminent toujours par un point virgule ; Si le code Javascript contient des guillemets " on les remplace par des apostrophes ' pour éviter la confusion avec les guillemets de l'attribut. <a href="#" onclick="alert('clic');">lien</a> Pour annuler le déclenchement d'un lien, on ajoute le code javascript : return=false; <a href="page.html" OnClick="f1(); return=false;" >mon Lien</a> Lors du clic, la fonction javascript f1 est appelée et le lien href est bloqué (si le javascript est désactivé, le lien fonctionnera avec href). BALISE D'EN TÊTE <HEAD> Les métadonnées de la page web <meta charset="" /> [character set : jeux de caractère] encodage des caractères (ex : utf-8) <meta name="description" content="" /> [description] texte affché par les moteurs de recherches <meta name="keywords" content="" /> [mots clés] texte pour le référencement <meta name="author" content="" /> [auteurs] texte Le titre <title> [title : titre] de la page web (affché dans l'onglet du navigateur web) Lier un fchier à la page web <link /> rel ="stylesheet" [style sheet :feuille de style] lie un fchier.css pour le design ="icon" [icon : icône] lie une image.ico.gif ou.png qui sera affchée dans l'onglet du navigateur web href [hypertext reference : référence hypertexte] URL type type MIME Insérer de code <script> insertion de code (par défaut en javascript) type type MIME src [source : source] URL insère du code enregistré dans un fchier externe <style> insertion de code (par défaut en CSS) type type MIME BALISE DE CORPS <BODY> La sémantique du Web Les balises sémantiques donnent du sens au contenu qu'elles encadrent. Il est primordiale de les utiliser à bonne escient car cela permet aux moteurs de rendu/recherches (navigateurs internet, lecteurs d'écran, Google etc.) d interpréter le code pour optimiser leurs performances. Dans un Web "intelligent", la présentation ne sert à rien, la sémantique est tout.

7 Balise d'architecture non sémantique Ces balises permettent de défnir la structure de la page HTML sans préciser le sens du contenu. <div> [division : division] défnit une section de type «block level» (les éléments s'affchent les uns sous les autres) <span> [span couvrir] défnit une section de type «inline» (les éléments s'affchent les uns à côté des autres) <br /> [break : stop] créer un saut de ligne <hr /> [horizontal rule : tracer une ligne horizontale] <pre> [preformater] les espaces, tabulations et saut de ligne sont interprétés normalement Balise d'architecture sémantique Ces balises permettent de défnir la structure de la page HTML en précisant le sens du contenu. <h1> <h> <h3> <h4> <h5> <h> [heading : titre] le chiffre indique le niveau hiérarchique <p> [paragraph : paragraphe] <section> [section] d'éléments thématiques (qui vont ensembles) <article> [article] section autonome/indépendant (qui se sufft à elle-même) <aside> [de côté] section annexe au contenu principale (un apport tangentiel) <header> [en-tête] en-tête d'une section ou de la page <footer> [bas de page] bas d'une section ou de la page <nav> [navigation : navigation] section de liens de navigations (ex : accueil, page suivante, contact) <menu> [menu] section de boutons de contrôles (ex : play, stop, pause) <figure> [fgure] image en lien avec le contenu principal

8 <figcaption> [légende fgure] enfant de <fgure> <address> [adresse] section d'information de contact <blockquote> [block quote : bloc de citation] section de citation cite [citation] URL de la citation Balise sémantique de texte Ces balises permettent de mettre en forme du texte en précisant le sens des mots contenu. <strong> [fort] contenu important <small> [modest] contenu relatif <em> [emphase] mettre l'accent (phonétique) <cite> [citer] titre d'une oeuvre, d'un document ou d'un événement. <q> [quote : citation] cite [citer] URL de la citation <time> [date] <abbr> [abbreviation : abréviation] <dfn> [défnition] un terme qui est défnit <del> [delete : supprimer/barrer] texte supprimé <ins> [insert : insérer] texte de remplacement <code> [code] Balise de texte non sémantique Ces balises permettent de mettre en forme du texte sans préciser le sens des mots contenu. <b> [bold : gras] <i> [italic : italique] <u> [underline : souligner] <s> [strike : barrer] <mark> [marquer] texte surligné <sub> [subscript : indice] texte en indice <sup> [superior : supérieur] texte en exposant Balise de liste <ul> [unordered list : liste désordonnée] liste à puces <ol> [ordered list : liste ordonnée] liste numérotée <li> [list : liste] élément d'un liste enfant de <ul> ou <ol> Balise de tableau Les balises de tableau doivent obligatoirement êtres contenu dans une balise <table>. Note : Un tableau est conçu initialement pour affcher des données tabulaires et non pour faire la présentation de la page. <table> [tableau] border [bordure] nombre de pixel <caption> [légende] légende d'un tableau enfant de <table>

9 <th> [table heading : titre de tableau] ligne titre d'un tableau enfant de <table> colspan [colunms span : couvrir des colonnes] nombre de colonnes sur lesquelles les cellules débordent rowspan [rows span : couvrir des lignes] nombre de lignes sur lesquelles les cellules débordent <tr> [table row : ligne de tableau] ligne d'un tableau enfant de <table> colspan [colunms span : couvrir des colonnes] nombre de colonnes sur lesquelles les cellules débordent rowspan [rows span : couvrir des lignes] nombre de lignes sur lesquelles les cellules débordent <td> [table division : division de tableau] cellule d'une ligne enfant de <tr> ou <th> colspan [colunms span : couvrir des colonnes] nombre de colonnes sur lesquelles les cellules débordent rowspan [rows span : couvrir des lignes] nombre de lignes sur lesquelles les cellules débordent Balise de formulaire Les balises de formulaire doivent obligatoirement êtres contenu dans une balise <form>. <form> [formulaire] <select> [sélectionner] liste sélectionnable enfant de <form> disabled [désactivé] attribut minimisé <option> [option] élément d'une liste sélectionnable enfant de <select> disabled [désactivé] attribut minimisé selected [selectionné] attribut minimisé <input /> [donnée d'entrée] enfant de <form> type ="button" [bouton] ="submit" [soumettre] ="reset" [remettre] ="text" [texte] ="radio" [radio] ="checkbox" [check box : case à cocher] size [taille] nombre de caractère visible value [valeur] texte affché disabled [désactivé] attribut minimisé selected [sélectionné] attribut minimisé name [nom] nom du groupe de bouton (un seul bouton «radio» peut être sélectionné au sein d'un même groupe) <label> [étiquette] associe un texte à un élément de formulaire enfant de <form> for [pour] id de l'élément auquel l'étiquette correspond <textarea> [text area : zone de texte] zone de texte étirable enfant de <form> disabled [désactivé] attribut minimisé Balise multimédia <a> [anchor : ancre] créer un lien href [hypertext reference : éférence hypertexte] URL de la cible du lien target [cible] ="_blank" ouvre le lien dans un nouvel onglet/page. <img /> [image : image] enfant de <p>, <h1> [...] <h> ou <fgure> src [source : source] URL de l'image à affchée alt [alternative : alternative] texte affché si l'image n'est pas chargée width [largeur] nombre de pixel height [hauteur] nombre de pixel usemap [use map : utilisation carte] name de la balise <map> à intégrer dans l'image. <map> [carte] zone cliquable à l intérieur d'une image name [nom] nom de la carte <area /> [zone] interactive d'une image enfant de <map> shape [forme] ="rect" [rectangle] ="circle" [cercle] ="poly" [polygonne] coords [coordinates : coordonnées] suite de nombre x1, y1, x, y, etc. (cercle : x1, y1 rayon) href [hypertext reference : référence hypertexte] URL de la cible du lien alt [alternative : alternative] texte affché au survole de la souris

10 <canvas> [toile (pour peinture)] zone pour les dessins ou applications graphiques. width [largeur] nombre de pixel height [hauteur] nombre de pixel <noscript> [pas de script] Contenu affché seulement si JavaScript est désactivé (message ou alternative) <audio> [audio] controls [contrôleurs] boutons de navigation, attribut minimisé autoplay [démarrage automatique] attribut minimisé loop [boucle] attribut minimisé preload [préchargement] ="none" [aucun] ="auto" [automatique] au chargement de la page ="metadata" [métadonnées] seulement <video> [vidéo] width [largeur] nombre de pixel height [hauteur] nombre de pixel poster [poster] URL de l'image à affcher par défaut controls [contrôleurs] boutons de navigation, attribut minimisé autoplay [démarrage automatique] attribut minimisé loop [boucle] attribut minimisé preload [préchargement] ="none" [aucun] ="auto" [automatique] au chargement de la page ="metadata" [métadonnées] seulement <source /> [source] enfant de <video> ou <audio> src [source : source] URL du fchier audio ou vidéo type type MIME <object> [incorporer] insérer un contenu externe et interactif ou un plug-in data [données] URL du contenu externe type type MIME width [largeur] nombre de pixel height [hauteur] nombre de pixel <param> [parameter : paramètre] enfant de <object> name [nom] nom du paramètre value [valeur] texte valeur du paramètre <iframe> insérer une page html src [source : source] URL de la page web width [largeur] nombre de pixel height [hauteur] nombre de pixel