12/12/02 Maîtrise des sciences de l'information et de la documentation - 2002/2003 - Mémento HTML 4.01 12 décembre 2002 1 MEMENTO HTML 4.01 Extrait de http://mist.univparis1.fr/cours/module6/intro-html. 1. Entités HTML permettent de coder les caractères accentués, les signes diacritiques et les caractères spéciaux (< & >). elles commencent par le caractère &, suivi d'un nom significatif et se terminent par un point-virgule. s é é ç ç è è ecirc; ê à à ù ù espace insécable < < > > & & 2. Elément représente une unité structurelle du document : paragraphe, lien, listes, tableau, images, etc. le plus souvent composé de trois parties : une balise d'ouverture, un contenu et une balise de fermeture. la plupart des éléments peuvent s'emboîter (s'imbriquer). <STRONG><EM>Super!!!</EM></STRONG> -> les butineurs ignorent les éléments inconnus. 3. Elément conteneur Comporte une balise d'ouverture et une balise de fermeture. <TITLE>Université Paris 1</TITLE> 4. Elément à balise de fermeture optionnelle <LI>Lundi</LI> est équivalent à <LI>Lundi 5. Elément vide Ne comporte pas de balise de fermeture. s <HR> <BR> <IMG> 6. Chevauchement d'éléments interdits Les éléments précédents ne doivent pas se chevaucher. correct <STRONG><EM>Terpsichore</EM></STRONG> incorrect <STRONG><EM> Terpsichore </STRONG></EM> 7. Attribut paramètre d'un élément. : <A href = "index.html"> (href est l'attribut de l'élément A, tapé de préférence en minuscules). n'est pas sensible à la casse. les butineurs ignorent les attributs inconnus. la valeur d'un attribut est encadrée par des guillemets : attribut = "valeur". 8. Commentaires ne sont pas affichés par les butineurs. tout ce qui est situé entre les caractères <!- - et --> est ignoré par les butineurs. s <!-- Ceci est un commentaire --> <!-- Attention -- ceci est incorrect --> <P -- Ceci aussi! --> 9. Contenu d'un document HTML Un document HTML contient : de l'information (texte) ; la structure logique (titres, paragraphes, listes, tableaux, etc.) représentée sous forme d'éléments HTML emboîtés (imbriqués). 10. Structure générale d'un document HTML Un document HTML comprend trois parties : 1. une ligne indiquant la version HTML qu utilise le document. 2. un en-tête représenté par l'élément HEAD. 3. le corps du document qui contient le contenu proprement dit du document et qui est représenté par l'élément BODY ou FRAMESET. 11. Structure générale d'un document HTML - 1 <!DOCTYPE html PUBLIC "-
12/12/02 Maîtrise des sciences de l'information et de la documentation - 2002/2003 - Mémento HTML 4.01 12 décembre 2002 2 //IETF//DTD HTML 2.0//EN"> <HTML> 2 <HEAD> <TITLE> de document HTML</TITLE> 3 <BODY> <P>Bonjour! </BODY> </HTML> 12. Structure générale d'un document HTML <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"> -> information sur la spécification d'html respectée par le document. Utilisée par les validateurs. 13. L'élément HTML Dénommé élément racine, il n'a pas réellement d'utilité. 14. L'élément HEAD Représente l'en-tête du document, il contient essentiellement des méta-données non affichées par les butineurs et le titre du document qui apparaît dans la barre de titre du butineur. <HEAD> <META name="author" lang="fr" content="céline Martin"> <META name="keywords" lang="enus" content="vacation, Greece, sunshine"> <META name="keywords" lang="en" content="holiday, Greece, sunshine"> <META name="keywords" lang="fr" content="vacances, Grèce, soleil"> <TITLE>Vacances hélléniques - été 2001</TITLE> 15. L'élément META inclus dans l'élément HEAD. élément à balise de fermeture optionnelle. permet de spécifier des méta-données dans un document HTML. L'élément META spécifie une propriété à l'aide de l'attribut name et lui assigne une valeur définie par l'attribut content. s d'utilisation Description du contenu de la page <META name="description" content="cours HTML"> Mots-clefs <META name="keywords" lang="fr" content="langage de balisage, balisage, HTML"> Nom du/des auteur(s) du document <META name="author" content="céline Martin"> Éditeur(s) HTML utilisé(s) <META name="generator" content="html Tidy, see www.w3.org"> 16. L'élément TITLE tout document HTML doit posséder un élément titre. inclus dans l'élément HEAD. définit le titre du document (donner un titre représentatif du contenu du document). apparaît dans la barre de titre du butineur et dans les signets (signets, favoris, bookmarks). utilisé par les moteurs de recherche. élément conteneur. <TITLE>Université Paris 1 - Panthéon-Sorbonne</TITLE> 17. L'élément BODY définit le corps du document. n apparaît qu une fois dans un document HTML. élément conteneur. 18. Squelette d un document HTML <HTML> <HEAD> <TITLE>Terpsichore</TITLE> <BODY> </BODY> </HTML> 19. Contenu du corps d'un document HTML en-têtes ou niveaux de titres. paragraphe. listes. lien ou hyperlien. images. structuration du texte.
12/12/02 Maîtrise des sciences de l'information et de la documentation - 2002/2003 - Mémento HTML 4.01 12 décembre 2002 3 tableaux. formulaires (forms). cadres (frames). 20. En-têtes ou niveaux de titres élément H. 6 niveaux : 1 le plus important, 6 le moins important : H1, H2, H3, H4, H5 et H6. à utiliser dans l'ordre hiérarchique. élément conteneur. <H2>Titre de niveau 2</H2> 21. Paragraphes élément à balise de fermeture optionnelle P. <P>Tous les êtres humains naissent libres et égaux en dignité et en droits Retour à la ligne forcé : élément vide BR. Ligne horizontale : élément vide HR. Paragraphe préformaté élément conteneur PRE. définit un bloc rendu par un butineur tel quel, en conservant espaces et retours à la ligne. police à espacement fixe. <PRE> Ceci est un paragraphe préformaté. Il est affiché tel qu il a été tapé. </PRE> 22. Listes trois types (élément conteneur) : ordonnée (numérotée) : OL. non ordonnée (à puces) : UL. de définitions : DL. définition d'un item de liste : LI pour les deux premiers types de liste. DT et DD pour le dernier. Ces éléments sont à balise de fermeture optionnelle. s de listes non ordonnée et ordonnée <UL> <LI>500 g de crevettes <LI>1 morceau de gingembre <LI>... </UL> <OL> <LI>Frire les crevettes jusqu à ce qu'elles soient bien dorées. <LI>Verser la sauce aigre-douce. <LI>Orner de quelques feuilles de coriandre. </OL> s de liste de définitions <DL> <DT>Langage de balisage <DD>Facilite la publication, l'échange et le traitement par des programmes de documents électroniques structurés. <DT>HTML <DD>Standard de la publication de données sur le Web. </DL> 23. Syntaxe d un URL protocole://serveur[:port][/chemin] [/nom du document][#position] Les [...] notent un élément optionnel. Protocole : http, ftp, mailto, news, telnet, file (fichier en local), Serveur : nom complet (FQDN) du serveur. s d URL http://www.w3.org http://www.w3.org/tr/html401/cover.h tml ftp://ftp.jussieu.fr mailto:mist@univ-paris1.fr 24. Lien ou hyperlien relation entre deux ressources (document HTML, image, etc.) du Web. un lien est composé de deux parties, appelées ancres (anchor) : ancre source : texte, image. ancre de destination : n'importe quelle ressource du Web. défini par l'élément conteneur A. deux formes d utilisation : Insertion d'un lien <A href="url">ancre source</a> Accès à un fragment de document (à une position précise dans un document) <A name="étiquette">texte</a> 25. Typologie des liens Liens absolus pointent de manière absolue (URL complet) vers une ressource Web.
12/12/02 Maîtrise des sciences de l'information et de la documentation - 2002/2003 - Mémento HTML 4.01 12 décembre 2002 4 en général à utiliser pour des ressources situées sur d'autres serveurs Web. <A href="http://www.yahoo.fr/aide.html" >Aide de Yahoo! France</A> Liens relatifs pointent de manière relative (nom de dossier/nom du document) vers une ressource. à utiliser pour des ressources situées sur son serveur Web. <A href="tp/index.html">sommaire des TP</A> Liens d'accès à un fragment de document absolu <A href="http://www.yahoo.fr/aide.html# clas">aide sur la classification de Yahoo! France</A> relatif à un autre document <A href="recettes.html#raclette">recett e de la raclette</a> relatif à une position du document actuel cf. <A href="#note1">note 1</A> <A name="note1">il ressort</a> de cette étude un paradoxe surprenant... 26. Insertion d'images élément IMG, à balise de fermeture optionnelle. attributs src : spécifie l'endroit où est localisée l'image. border : bordure bleue autour de l'image en cas de lien (0 = pas de bordure). alt : brève description de l'image. Affichée si l image n est pas chargée. title : titre de l'image (une infobulle apparaît lorsque le pointeur de la souris est placé sur l'image). <IMG src="hamac.jpg" alt="un hamac" title="douceur de vivre"> 27. Quelques formats d'images GIF (Graphic Interchange Format ) créé par Compuserve. jusqu'à 256 couleurs (8 bits). compression sans perte. entrelacement, animation. -> à utiliser pour des boutons, des icônes, des schémas mais pas pour des photographies. http://burnallgifs.org JPEG (Joint Photographic Experts Group) normalisé par l'iso. jusqu'à 16 millions de couleurs (24 bits) compression avec perte. -> à utiliser pour des photographies mais pas pour des boutons ou des icônes. http://www.jpeg.org PNG (Portable Network Graphics) recommandation du W3C. jusqu'à 16 millions de couleurs (24 bits). compression sans perte. -> à utiliser pour représenter n'importe quel type d'information graphique. Remplace les formats GIF et JPEG. http://www.w3.org/graphics/png 28. Structuration de fragments de texte éléments «logiques». apportent une information structurelle à des fragments de texte. formatage dépend du butineur. éléments «physiques». -> formatage imposé au butineur. Ces deux types d'élément sont des éléments conteneurs. Eléments logiques EM : mise en évidence (généralement rendu en italique). STRONG : mise en évidence forte (généralement rendu en gras). CITE : cite une référence. DFN : une définition. CODE : un extrait de code (informatique, mathématique,...). Pour des extraits plus longs (plusieurs lignes), on utilisera PRE. SAMP : pour donner des exemples de résultat de programmes, de scripts,...
12/12/02 Maîtrise des sciences de l'information et de la documentation - 2002/2003 - Mémento HTML 4.01 12 décembre 2002 5 KBD : un texte tel qu'un utilisateur devrait le taper au clavier. VAR : une instance de variable. ABBR : un sigle (WWW, HTTP). ACRONYM : un acronyme (ONU, UNICEF). Eléments physiques TT : texte à rendre dans une police à espacement fixe (télétype). I : texte en italique. B : texte gras. BIG : texte avec une taille de police plus grande que la taille courante. SMALL : texte avec une taille de police plus petite que la taille courante. STRIKE ou S : texte barré (obsolète). U : texte souligné (obsolète). 29. Eléments conteneurs de structuration de texte BLOCKQUOTE : bloc de citation (retrait à gauche et à droite). SUB : indice. SUP : exposant. ADDRESS : contact et coordonnées. 30. Les tableaux Usages présentation d'informations sous forme de tableau. mise en page : multi-colonnages. Structure titre optionnel. une ou plusieurs lignes. une ou plusieurs colonnes. chaque ligne consiste en une ou plusieurs cellules. une cellule peut s'étendre sur plusieurs lignes ou plusieurs colonnes. Définition élément conteneur TABLE. attributs de l'élément border : bordure autour du tableau et entre les cellules (en pixels, 0 = pas de bordure). cellpadding : espace entre la bordure d'une cellule et son contenu (en pixels ou pourcentage). cellspacing : espace entre les cellules (en pixels ou pourcentage). width : largeur du tableau (en pixels ou pourcentage). <TABLE cellspacing="10" border="0"> </TABLE> Définition des composants d'un tableau titre : élément conteneur CAPTION. ligne : élément à balise de fermeture optionnelle TR. cellule : élément à balise de fermeture optionnelle TD. Attribut d'alignement pour les éléments TR et TD : align. Valeurs : left, center, right, justify. Attributs d' extension d'une cellule sur : n lignes : rowspan. n colonnes : colspan. En-tête de colonne : élément à balise de fermeture optionnelle TH. Attribut d'alignement : align (obsolète). Valeurs : left, center, right, justify. <TABLE border="0" cellspacing="10"> <CAPTION>Cinéma : les meilleures entrées à Paris</CAPTION> <TH align="left">titre <TH>Nombre d'entrées <TD>Barberousse <TD align="right">150 000 <TD>Le Sacrifice <TD align="right">140 000 <TD>In the Mood for Love <TD align="right">100 000 </TABLE> 31. Les formulaires Usages permettent à l'internaute de saisir des informations. celles-ci sont envoyées à un programme sur un serveur Web afin d'être traitées. ce programme peut renvoyer le résultat du traitement des informations. Définition Elément conteneur FORM Attributs :
12/12/02 Maîtrise des sciences de l'information et de la documentation - 2002/2003 - Mémento HTML 4.01 12 décembre 2002 6 action. Valeur : un URL. method. Valeur : post ou get. <FORM action="http://www.somesite.com/cgibin/ajoutstage" method="post">... </FORM> Un formulaire peut contenir du texte, les éléments vus précédemment et des éléments particuliers appelés contrôles. Les éléments contrôle INPUT : champ d'entrée de données. Elément vide. Attributs de l élément INPUT name : nom du champ. value : valeur initiale. size : taille du champ. maxlength : nombre maximum de caractères. type : text : champ de type texte. password : idem que text mais les caractères tapés sont dissimulés, par des étoiles par exemple. checkbox : case à cocher. radio : bouton radio. submit : bouton de soumission (envoi des données au serveur). reset : bouton de réinitialisation. Les valeurs de tous les contrôles du formulaire sont remises à leur valeur initiale, telle que mentionnée dans l'attribut value. SELECT : menu. Elément conteneur. Il doit contenir au moins un élément conteneur OPTION. <SELECT> <OPTION>Découverte 12-25</OPTION> <OPTION>Découverte Séjour</OPTION> <OPTION>Découverte à deux</option> <OPTION>Découverte J8</OPTION> <OPTION>Découverte J30</OPTION> </SELECT> TEXTAREA : zone de saisie multi-ligne. Elément conteneur. Attributs obligatoires cols : nombre de colonnes visibles à l'écran. rows : nombre de lignes visibles à l'écran. <H3>Etat civil</h3> <FORM action="mailto:mist@univparis1.fr" enctype="text/plain" method="post"> NOM : <INPUT name="nom" type="text"> <P>Prénom : <INPUT name="prenom" type="text"> <P>Age : <INPUT name="age" type="text" size="3" maxlength="3"> ans <P><INPUT value="validation" type="submit"> <INPUT value="réinitialisation" type="reset" > </FORM> 32. Les cadres (frames) Usages permettent de diviser la fenêtre principale du butineur en plusieurs cadres ou sousfenêtres indépendants et d'afficher des documents différents dans ceux-ci. ces cadres sont agençables horizontalement (attribut rows) ou verticalement (attribut cols). utiliser à bon escient les cadres. Squelette <HTML> <HEAD> <FRAMESET> <FRAME> Définition de la division en cadres Définition des documents à afficher dans chacun des cadres <NOFRAMES> Pour les butineurs n'affichant pas les cadres </NOFRAMES> </FRAMESET> </HTML>
12/12/02 Maîtrise des sciences de l'information et de la documentation - 2002/2003 - Mémento HTML 4.01 12 décembre 2002 7 Définition - Attributs de l élément conteneur FRAMESET rows : nombre de cadres horizontaux. Liste de longueurs exprimées en pixels ou pourcentage séparées par des virgules. cols : nombre de cadres verticaux. Liste de longueurs exprimées en pixels ou pourcentage séparées par des virgules. Définition - Attributs de l élément conteneur FRAME name : assigne un nom au cadre courant. Ceci permet de spécifier dans quel cadre afficher un document donné au moyen de l'attribut target de l'élément A. src : URL désignant le document à afficher dans le cadre. noresize : interdit le redimensionnement d'un cadre. scrolling : spécifie les conditions de présence des barres de défilement du cadre. Les valeurs peuvent être : auto, yes, no (choix laissé au butineur, défilement autorisé, défilement impossible). frameborder : présence (valeur 1) ou absence (valeur 0) de bordure autour des cadres. <P><A href="accueil-sanscadres.html">version sans cadre de ce document</a>. </NOFRAMES> 33. Les éléments propriétaires Ils ne sont pas définis dans la spécification HTML 4.01 et ne doivent pas être utilisés. Netscape : BLINK, ILAYER, KEYGEN, LAYER, MULTICOL, NOEMBEB, NOLAYER, SERVER, SPACER, NOBR. Microsoft : BGSOUND, COMMENT, HTMLAREA, LEGEND, MARQUEE. Références http://mist.univparis1.fr/enseignements/module3/methodoweb/in dex.html Les cadres - Désignation du cadre d'arrivé L'attribut target de l'élément A sert à désigner le cadre cible par son nom qui doit commencer par une lettre, sauf pour les noms réservés : _blank : ouvre une nouvelle fenêtre (non nommée) pour afficher le document destination. _top : affiche le document destination en pleine page dans la fenêtre courante. _self : affiche le document destination dans le même cadre où est situé le lien qui le référence. _parent : affiche le document destination dans le cadre englobant (à la place du FRAMESET de rang immédiatement supérieur). Les cadres - Définition - Elément conteneur NOFRAMES Le contenu est affiché par les butineurs ne gérant pas les cadres ou qui ont été configurés pour ne pas les afficher. <NOFRAMES>