Remerciez-le!

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

Chapitre 2: Le langage HTML Université de Guelma Département d’Informatique 2ém

Chapitre 2: Le langage HTML Université de Guelma Département d’Informatique 2éme Année Licence Informatique Développement d’Applications Web Dr. Khaled HALIMI halimi.khaled@univ-guelma.dz Le langage HTML HTML est le langage universel utilisé pour communiquer sur le Web. L’information sera ainsi transportée sur le réseau (éventuellement sur Internet), pour aboutir sur un poste client (Micro-ordinateur) puis interpréter grâce à un programme appelé navigateur ou browser. Le logiciel que l'on appelle un browser permet de surfer sur le Net et d'afficher sur l’écran les "pages" qu'il a interceptées. Il excite différents browser, dont les plus connus sont Netscape Navigator et Internet Explorer de Microsoft mais il en existe beaucoup d'autres. Chaque browser a sa propre façon de travailler. A la différence d’un traitement de texte qui restitue exactement un document, en HTML, on n’a pas la maîtrise totale du document. Pour transiter le plus rapidement possible sur les câbles du réseau (éventuellement sur lignes téléphoniques), on a adopté un format de texte très compact mais aussi peu sophistiqué. Ce format ASCII a été amputé d'un bit (7 bits au lieu de 8). On sera donc privé de certains caractères spéciaux comme le é pour lesquels il faudra passer par des codes particuliers. On contre partie, HTML est un langage universel qui s'adapte à toutes les plate-formes que ce soit Windows, Macintoch, Unix, OS/2... En plus du texte, il faut inclure des instructions pour le browser de celui-ci. Ces instructions seront différenciées du texte par les signes < et > par exemple <HTML>. Ces "instructions" s'appellent des tags ou des balises. Déclaration de la version supportée avec la balise <doctype> • Cette balise doit se situer au début du document. • Existence de trois format: Format 1 • version 4, sans support des éléments des versions précédentes • <doctype html public "-//w3c//dtd html 4.0//en" "http://www.w3c.org/TR/REC- html40/strict.dtd"> • version 4 avec support des anciennes versions de html • <doctype html public "- //w3c//dtd html 4.0 transitional//en" "http://www.w3c.org/TR/REC- html40/loose.dtd"> : Format 2 • s'applique aux fichiers gérant le multifenêtrage • <doctype html public "-//w3c//dtd html 4.0 frameset//en" "http://www.w3c.org/TR/REC- html40/frameset.dtd"> : • N.B. : le "en" signifie que le html est en anglais Format 3 Le document HTML minimum • Une page HTML était en fait un fichier texte, enrichi d'un certain nombre de codes ou commandes, appelés balises. • Ces balises sont toujours exprimées sous la forme d'un mot clé, encadré par les caractères "<" et ">". Exemple : <BALISE>. • Pour la plupart des balises, il existe une balise de fermeture associée, reprenant le même nom, mais précédée du caractère "/". • La commande spécifiée s'applique donc uniquement au texte situé entre le couple de balises ainsi formé Exemple: • <HTML> ... </HTML> • Entre ces deux balises, on définit deux zones : • l'en-tête, spécifié par les commandes <HEAD> et </HEAD>, • ainsi que le corps, délimité par: <BODY> et </BODY>. structure de base • <HTML> <HEAD> ... </HEAD> <BODY> ... </BODY> </HTML> en-tête • On ne met généralement qu'une seule information, le Titre du document qui sera affiché en haut de la fenêtre du navigateur • Le Titre est indiqué entre les balises <TITLE> et </TITLE> • Exemple • <TITLE>Ceci est le Titre</TITLE>. Le corps • On met tout le document à afficher (texte, définition des images etc.) • Remarque: – Signalons l'existence d'une balise de commentaires, qui peut être utilisée partout dans les documents HTML, définie comme suit : –  Ne pas afficher Paragraphe [Paragraph] Début d'un nouveau paragraphe Centrage [Center] <CENTER></CEN TER> Centrer Exemple1 <HTML> <HEAD> <TITLE> Titre du document</TITLE> </HEAD> <BODY>texte simple texte en gras texte en gras texte en italique texte en italique texte en gras et en italique texte en bleu  </BODY> </HTML> Execution Remarque • Il n'est pas rare d'utiliser plusieurs balises pour un même élément de texte. Il faut veiller à bien les imbriquer. Ainsi ... est correct et ... risque de vous créer des ennuis. • La taille dans peut être indiquée avec un nombre de 1 à 7. La valeur par défaut étant 3 Retour Couleurs en HTML • Chaque élément de couleur (Rouge, Vert ou Bleu) est codé en HTML sur 8 bit en hexadécimal soit de 00 à FF (de 0 à 255) Ainsi FF de rouge, FF de Vert et FF de Bleu, donne du Blanc Quelques Code de couleurs basiques Bleu #0000FF Vert #00FF00 Blanc #FFFFFF Violet #8000FF Rouge #FF0000 Jaune #FFFF00 Gris clair #C0C0C0 Noir #000000 Exemple 2 • <HTML> • <HEAD> • <TITLE> Titre du document </TITLE> • </HEAD> • <BODY>texte simple • texte en gras • texte en gras • texte en italique • texte en italique • texte en gras et en italique • texte • en bleu • en Vert • en blanc • en violet • en rouge • en jaune • en gris clair • en noir • </BODY> • </HTML> Executer Retour Les Titres • Pour donner une taille aux caractères d’un titre dans un texte avec un saut de ligne à la fin, en utilise la balise <Hn></Hn> • Ou n peut prendre une valeur comprise entre 1 et 6 (dans l’ordre décroissante des tailles) Exemple 3 • <HTML> • <HEAD> • <TITLE> Titre du document • </TITLE> • </HEAD> • <BODY>texte simple • <H1>texte en gras et en italique et H1</H1> • <H2>texte en gras et en italique et H2</H2> • <H3>texte en gras et en italique et H3</H3> • <H4>texte en gras et en italique et H4</H4> • <H5>texte en gras et en italique et H5</H5> • <H6>texte en gras et en italique et H6</H6> • </BODY> • </HTML> Executer Retour Les caractères spéciaux • Les navigateurs ne reconnaissent pas les caractères spéciaux. Heureusement chaque caractère possède une abréviation (ENTITY) permettant de le coder. Voici quelque exemple Espace © © < < > > E é E è Listes • Les listes numérotées • Les listes à puces Les listes numérotées • Une liste numérotée est délimitée par les balises <OL> et </OL> entre lesquelles chaque élément de la liste est précédé de la balise <LI>. Exemple 4 • <HTML> • <HEAD> • <TITLE> Titre du document • </TITLE> • </HEAD> • <BODY>texte simple • <OL> • <LI> élément 1, • <LI> élément 2, • <LI> élément 3. • </OL> • </BODY> • </HTML> Exécuter Retour Les listes à puces • Une liste non numérotée est délimitée par les balises <UL> et </UL> entre lesquelles chaque élément de la liste est précédé de la balise <LI>. Exemple 5 • <HTML> • <HEAD> • <TITLE> Titre du document • </TITLE> • </HEAD> • <BODY>texte simple • <UL> • <LI> élément 1, • <LI> élément 2, • <LI> élément 3. • </UL> • </BODY> • </HTML> Exécuter Remarque • Notez qu'il est possible d'imbriquer des listes du même type ou de types différents Exemple 6 • <HTML> • <HEAD> • <TITLE> Titre du document • </TITLE> • </HEAD> • <BODY>texte simple • <UL> • <LI> élément 1, • <OL> • <LI>sous-élément 1A, • <LI>sous-élément 1B. • </OL> • <LI> élement 2, • <OL> • <LI>sous-élément 2A, • <LI>sous-élément 2B. • </OL> • <LI> élément 3. • </UL> • </BODY> • </HTML> Exécuter Liste de définitions • Il est possible de définir des listes spéciales, permettant de faire des glossaires, en utilisant les balises <DL> et </DL> pour encadrer la liste, <DT> pour spécifier un élément et <DD> pour indiquer sa définition. Exemple 7 • <HTML> • <HEAD> • <TITLE> Titre du document • </TITLE> • </HEAD> • <BODY>texte simple • <DL> <DT>HTML<DD>HyperText Markup Language <DT>HTTP<DD>HyperText Transfert Protocol • </DL> • </BODY> • </HTML> Exécuter Les attributs Type="type" UL & OL Spécifie l'aspect des marqueurs des éléments Start="nombre" OL commence la numérotation à la valeur spécifiée. Value="nombre" LI uploads/Litterature/ cours-html 9 .pdf