Remerciez-le!

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

Eric BRASSART, MCF IUT informatique d’Amiens DUT informatique 2ième Année Le La

Eric BRASSART, MCF IUT informatique d’Amiens DUT informatique 2ième Année Le Langage HTML Le Langage HTML Hyper Text Markup Language CNAM d’AMIENS 98/99 Page 2/2 Table des matières AVANT PROPOS ................................................................................................................................................. 3 LA P’TITE HISTOIRE........................................................................................................................................ 3 LE SGML .............................................................................................................................................................. 3 COMMENTAIRES............................................................................................................................................... 5 DOCTYPE............................................................................................................................................................. 5 HTML .................................................................................................................................................................... 5 SEPARATEURS ................................................................................................................................................... 8 POINTEURS VERS AUTRES DOCUMENTS.................................................................................................. 9 LISTES ................................................................................................................................................................ 12 STYLE ................................................................................................................................................................. 15 LES COULEURS UTILISEES DANS BODY.................................................................................................. 17 IMAGES DANS LE TEXTE.............................................................................................................................. 18 FORMULAIRES................................................................................................................................................. 21 LES FRAMES ..................................................................................................................................................... 25 CNAM d’AMIENS 98/99 Page 3/3 Avant propos Première chose importante à savoir sur HTML est la signification de ces quatre initiales : Hyper Text MarkUp Language HTML est d'un langage de description (et non pas d'un langage de programmation) qui va nous permettre de décrire l'aspect d'un document, d'y inclure des informations variées (textes, images, sons, animations etc.) et d'établir des relations cohérentes entre ces informations grâce aux liens hypertextes. Les avantages du langage HTML sont nombreux : ) peux coûteux en effet un simple éditeur de texte suffit à écrire ses premiers documents HTML )relativement facile à aborder, )il représente en outre un bon moyen de dépasser les problèmes de compatibilité entre des systèmes et des formats informatiques différents. La description d'un document HTML passe par l'utilisation de BALISES (ou "TAGS" en anglais). Une balise est délimitée par les signes "<" et ">" entre lesquels figure le nom de la balise. Par exemple, la balise de retour à la ligne est La plupart du temps, on utilise une balise de début et une balise de fin, qui définissent les propriétés de l'intervalle. Exemple : écriture en gras sera traduit par : écriture en gras La p’tite histoire Le terme markup se réfère aux marques, aux annotations manuscrites placées par l'auteur sur un document pour préciser à l'imprimeur comment il doit être présenté. Avec l'apparition des ordinateurs et des photos- composeuses, ces marques ont été intégrées dans le texte mais chaque matériel de photocomposition réclamait son propre langage "markup" Au début des années 80, le CGA (Graphics Communications Association) a mis au point le premier langage markup généralisé baptisé GenCode. Au même moment, un comité de normalisation ANSI publiait le standard Generalized Markup Language (GML). En décembre 1986, les deux comités ont unis leurs efforts pour définir le standard SGML (Standard Generalized Markup Language) accepté par l'ISO (International Standard Organization) sous le numéro 8879. Jusqu’à 1990 les principales applications Internet étaient le courrier électronique, listserv, telnet et FTP. En 1990 l’université de Mac Gill (Montréal) introduisit ARCHIE, un outil de recherche FTP pour l’Internet. En 1991 l’université du Minessota proposa GOPHER. En 1992, Tim Berners-Lee un physicien du CERN, développa les protocoles du World Wide Web. Il créa le HTML, issu d’un sous ensemble du SGML en s’appuyant sur les travaux de Ted Nelson qui furent à l’origine du terme hypertexte (1965). C’est en 1993 que l’explosion de l’Internet eu lieu avec la sortie du navigateur (en anglais "browser") MOSAIC du NCSA. Le SGML Le SGML est un standard ouvert qui n'est lié ni à une plate-forme, ni à un constructeur. Les fichiers SGML sont stockés sous forme de simples textes ASCII et peuvent donc être utilisés par n'importe quelle machine. Le langage SGML est extrêmement pratique pour réaliser des publications à la demande. Le but est de pouvoir, à partir d'un document de base unique, publier différentes versions s'adressant à des publics différents. SGML est un langage de description de données qui divise un document en deux parties : le DTD (Data Type Definition) et les données elles-mêmes. Le DTD est une sorte de dictionnaire qui décrit les différents "tags" acceptés dans le document et les relations qui les unissent. Le corps du document contient les données délimitées Tag Début d’écriture en BOLD (gras) Tag Fin d’écriture en BOLD (gras) Résultat dans le navigateur CNAM d’AMIENS 98/99 Page 4/4 par les "tags" définis dans le DTD. Le langage HTML n'est qu'une instance du langage SGML définie par un DTD spécifique. Un document HTML est un simple fichier texte ASCII qui contient des "tags" HTML. Sur un serveur Unix, un document HTML porte généralement l'extension .html tandis que sur les PC, limités à des noms de fichiers de type 8.3, l'extension est .htm. La notion essentielle à bien comprendre avant de se lancer dans la création de pages HTML est que comme tous les langages “markup”, HTML ne se soucie pas de l'apparence d'un document mais bien de sa structure. Chaque navigateur World Wide Web représentera différemment des objets HTML comme la ligne horizontale ou le titre. L'HTML n'imposera jamais une police de caractères, une taille de police ou une largeur d'écran. C'est au navigateur de choisir en fonction de la station d'accueil, de la résolution d'écran, des polices disponibles. Il faudra donc toujours veiller à essayer les pages HTML nouvellement réalisées avec plusieurs navigateurs. Une autre notion à garder en tête est que le langage HTML est en constante évolution, chaque navigateur s'adaptant plus ou moins rapidement à cette évolution. Chaque commande du langage HTML débute par un “<“ et se termine par un “>“. Les commandes peuvent s'écrire en minuscules ou majuscules bien qu'on utilise généralement les caractères majuscules par souci de lisibilité. CNAM d’AMIENS 98/99 Page 5/5 Allure d’un fichier HTML ou squelette d’un fichier HTML  <!DOCTYPE> <HTML> <HEAD> ### </HEAD> <BODY> ### <BODY> </HTML> Commentaires Les commentaires peuvent être placés n'importe où dans un document HTML à condition de ne pas être imbriqués. Ils sont placés entre les chaînes de caractère . Exemple :  DocType DocType est une directive SGML permettant d'identifier un document comme étant de type HTML Cette commande est facultative. La plupart des navigateurs n'en ont pas besoin même s'il est de bon ton pour un éditeur HTML de placer en tête de document une commande de type. Exemple : Avec Netscape 3.0 GOLD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> HTML C’est le premier marqueur ou tag que l’on trouve dans un document HTML. Tout le document qui sera écrit par la suite (texte ou marqueur) sera compris entre le tag <HTML> et </HTML>. Exemple : <HTML> document à écrire </HTML>. En-tête <HEAD> L'en-tête du document est réservée aux méta-informations (les informations relatives au document) comme son titre. Ces méta-informations doivent être placées entre les tags <HEAD> de début et </HEAD> de fin. Même si CNAM d’AMIENS 98/99 Page 6/6 l'en-tête est optionnelle, il est important de l'inclure dans un document pour éviter que le logiciel serveur n'ait à balayer tout le document pour y retrouver l'information recherchée. Dans l'en-tête, on trouvera les 6 commandes suivantes : ) TITLE (la seule véritablement essentielle- voir ci-dessous) ) ISINDEX indique au logiciel client que le document est un écran permettant une saisie pour interroger un programme externe (Programme CGI), (Servait à l’origine du HTML aux browser à envoyer de l’info.-Les formulaires ont simplifiés tout), ) BASE permet d'indiquer une adresse de base qui complétera tous les chemins relatifs, ) LINK (Indique un lien entre le présent document et un autre) ; très rarement utilisé. ) NEXTID (Indique le document suivant – considéré actuellement comme obsolète-) ) META donne des informations sur le document au serveur. Ces informations sont généralement : <META NAME=...> le nom, <META AUTHOR=....> le nom de l'auteur, <META CONTENT=….> , <META NEXTID=….> un identifiant. )<BASEFONT SIZE = n> ou n prend les valeurs 1 à 7.Cette commande fixe la taille de la police de caractères (par défaut : 3) 1, petits caractères … 7, gros caractères. ) PROMPT=texte, permet d'afficher le texte comme message pour <ISINDEX>. Titre <TITLE> <TITLE> Titre </TITLE> Chaque document HTML, pour être correct, doit disposer d'un titre. Le titre apparaît le plus souvent dans la barre de titre du navigateur Web. Son but est de pouvoir identifier le document dans un ensemble plus large comme un index WAIS par exemple. Le titre d'un document HTML sert aussi lorsqu'un navigateur World Wide Web dispose d'une fonction “hotlist” ou “bookmark” pour fournir un accès rapide à vos documents favoris. Le titre est limité à 64 caractères y compris les espaces et ne doit normalement contenir que les 128 premiers caractères ASCII (pas de caractères accentués) Corps du document <BODY> Le corps du document, ce qui sera effectivement affiché par le navigateur Web, est balisé par les commandes : <BODY> et </BODY> Exemple : <BODY> Ceci est le premier essai </BODY> Voici donc à quoi ressemblera un document minimal ainsi que sa représentation dans un navigateur Web : CNAM d’AMIENS 98/99 Page 7/7 <HTML> <HEAD> <TITLE>essai n° 1</TITLE> </HEAD> <BODY> Ceci est le premier essai </BODY> </HTML> Ces commandes ne doivent pas nécessairement être séparées par des retours de chariot et peuvent être placées n'importe comment. Seule la lisibilité du code source nous fait pencher pour cette présentation. Tailles de polices : Il existe 7 tailles de polices. La commande est … ou n prend les valeurs de 1 à uploads/s1/ html-2000-2006-v-iut.pdf