Bruno Delb                          http://www.brunodelb.com                      Date : 12/02/2001                       ...
Bruno Delb                 http://www.brunodelb.com   Date : 12/02/2001                                       HTMLHistoriq...
Bruno Delb                  http://www.brunodelb.com   Date : 12/02/2001                                        HTMLStruct...
Bruno Delb                         http://www.brunodelb.com                    Date : 12/02/2001                          ...
Bruno Delb                  http://www.brunodelb.com         Date : 12/02/2001                                     HTML Il...
Bruno Delb                          http://www.brunodelb.com                 Date : 12/02/2001                            ...
Bruno Delb                          http://www.brunodelb.com                Date : 12/02/2001                             ...
Bruno Delb                        http://www.brunodelb.com                  Date : 12/02/2001                             ...
Bruno Delb                       http://www.brunodelb.com                       Date : 12/02/2001                         ...
Bruno Delb                    http://www.brunodelb.com                  Date : 12/02/2001                                 ...
Bruno Delb                      http://www.brunodelb.com                    Date : 12/02/2001                             ...
Bruno Delb                   http://www.brunodelb.com                 Date : 12/02/2001                                   ...
Bruno Delb                        http://www.brunodelb.com                Date : 12/02/2001                               ...
Bruno Delb                        http://www.brunodelb.com               Date : 12/02/2001                                ...
Bruno Delb                       http://www.brunodelb.com                  Date : 12/02/2001                              ...
Bruno Delb                     http://www.brunodelb.com                    Date : 12/02/2001                              ...
Bruno Delb                       http://www.brunodelb.com                         Date : 12/02/2001                       ...
Bruno Delb                       http://www.brunodelb.com                  Date : 12/02/2001                              ...
Bruno Delb               http://www.brunodelb.com        Date : 12/02/2001                                     HTMLLes coo...
Upcoming SlideShare
Loading in...5
×

Le langage HTML

1,669

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,669
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
146
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Le langage HTML

  1. 1. Bruno Delb http://www.brunodelb.com Date : 12/02/2001 HTML SommaireHISTORIQUE...............................................................................................................2STRUCTURE D’UNE PAGE HTML...................................................................................3FORMATER LE TEXTE...................................................................................................4ETABLIR DES LISTES ET DES DÉFINITIONS................................................................6INSÉRER UNE IMAGE..................................................................................................7PLACER DES LIGNES HORIZONTALES.........................................................................8INSÉRER UN LIEN.......................................................................................................9UTILISER LE COURRIER............................................................................................10CRÉER UN FORMULAIRE............................................................................................11PLACER DES LIENS SUR DES IMAGES.......................................................................12UTILISER UNE TRAME SONORE.................................................................................13UTILISER UNE SÉQUENCE VIDÉO..............................................................................14CRÉER UN TABLEAU..................................................................................................15SPÉCIFIER UN FONDS DÉCRAN ...............................................................................17LES AUTRES COMMANDES.........................................................................................18LES COOKIES............................................................................................................19 1
  2. 2. Bruno Delb http://www.brunodelb.com Date : 12/02/2001 HTMLHistorique Le langage HTML provient du langage SGML (Standard Generalized Markup Language). C’est le navigateur (en anglais « browser ») qui interprète les commandes HTML contenues dans le document. Il est apparu en 1990. 2
  3. 3. Bruno Delb http://www.brunodelb.com Date : 12/02/2001 HTMLStructure d’une page HTML Une page HTML est un fichier texte. On peut donc utiliser n’importe quel éditeur de texte pour le modifier. Une page HTML doit contenir les éléments suivants : Elément Description <HTML> Marque le début du document. <head> Marque le début de la zone den-tête. <title> Marque le début du titre de la page. </title> Marque la fin du titre de la page. </head> Marque la fin de la zone den-tête. <body> Marque le début du corps du document. Corps du document (textes et images). </body> Marque la fin du corps du document. </HTML> Marque la fin du document HTML. Les balises vont par paire : une balise début <code> possède une balise de fin équivalente </code>. Les balises peuvent figurent en minuscules ou en majuscules. 3
  4. 4. Bruno Delb http://www.brunodelb.com Date : 12/02/2001 HTMLFormater le texte Action Syntaxe Pour formater un en-tête (header en Utiliser les balises de <H1> à <H6> (de la plus grosse à la anglais) plus petite). Pour center du texte <center>texte </center> Pour changer de paragraphe <P> Pour changer de ligne <BR> Pour afficher du texte en gras <b>texte</b> ou <strong>texte</strong> Pour afficher du texte en italique <EM>texte</EM> ou <I>texte</I> ou <CITE>texte</CITE> Pour afficher du texte avec une <TT>texte</TT> police à espace constant Pour afficher du texte préformaté (le <pre>texte</pre> navigateur respecte alors les fins de ligne) Pour afficher du code de <CODE>texte</CODE> programmation (analogue à <TT>texte</TT>; les fins de ligne sont ignorées) Pour attribuer lannotation variable à <VAR></VAR> une donnée (saffiche en italique) Pour augmenter des caractères d’un <FONT SIZE="+2"></FONT SIZE="+2"> ou <FONT certain nombre d’unités (de 1 à 7) SIZE="+2"></FONT> Pour réduire la taille des caractères <FONT SIZE="-2"></FONT SIZE="-2"> ou <FONT SIZE="- d’un certain nombre d’unités (de 1 à 2"></FONT> 7) Pour emprisonner un paragraphe <BLOCKQUOTE></BLOCKQUOTE> (exemple : une citation) en alinéa Pour rayer un texte <STRIKE></STRIKE> Pour utiliser les indices <SUB></SUB> Pour utiliser les exposants <SUP></SUP> Pour faire clignoter du texte <BLINK>texte</BLINK> Pour modifier la police de caractères Utiliser l’attribut FACE=« première police, deuxième (par ordre de préférence) police ». Pour spécifier la couleur du texte Utiliser l’attribut COLOR. Remarques : • Les balises <P> et <BR> nont pas besoin d’être fermées. De plus, elles peuvent être répétées. 4
  5. 5. Bruno Delb http://www.brunodelb.com Date : 12/02/2001 HTML Il existe des caractères spéciaux dans HTML. Pour les utiliser, on fait aux commandes dites alternatives : Commande alternative Caractère spécial &lt; < &gt; > &amp; & &quot; " Pour pouvoir utiliser les caractères accentués sur le Web, il faut savoir plusieurs choses. Ainsi, on distingue plusieurs types de codage des caractères : • les caractères référencés (Entity References en anglais), qui utilisent le jeu de caractères US-ASCII standard ; ce jeu de caractère n’utilise que 7 bits (ce qui permet de coder 127 caractères). Avantage : • Certains systèmes informatiques filtrent le 8ème bit : bien que la norme HTTP utilise 8 bits pour les échanges, ces jeux de caractères 8-bits (ou « étendus ») diffèrent dun système informatique à l’autre. Inconvénient : • La composition et la consultation des sources HTML de votre document est fastidieuse (exemple : le caractère « é » est codé « &eacute; »). • les caractères ISO Latin-1 (ISO-8859-1) La plate-forme informatique de conception doit utiliser ce jeu de caractères. Les caractères sont codés sur 8 bits. Les systèmes Unix et MS-Windows peuvent utiliser ces jeux de caractères, mais Macintosh, MS-DOS et OS/2 ont adopté des jeux caractères différents. 5
  6. 6. Bruno Delb http://www.brunodelb.com Date : 12/02/2001 HTMLEtablir des listes et des définitions Action Syntaxe Pour créer une liste non ordonnée <UL><LI>1er point<LI>2ème point</UL> Pour créer une liste ordonnée <OL><LI>1er point<LI>2ème point</OL> Pour changer de type de puce dans une <UL TYPE=disc> (ellipse), <UL TYPE=circle> (cercle) ou liste non ordonnée <UL TYPE=square> (carré) Pour changer de type de numérotation <OL TYPE=a> (minuscules), <OL TYPE=I> (chiffres dans une liste ordonnée romains en majuscules), <OL TYPE=i> (chiffres romains en minuscules) et <OL TYPE=1> (chiffres) Pour définir une zone de définition <DL> (Definitions List) Pour indiquer le premier terme à définir <DT> (Definition Term) Pour donner la définition du premier <DD> terme en retrait dun alinéa Pour indiquerla fin de la zone de </DL> définition (Definition List) Remarque : • Pour enchaîner plusieurs définitions, répéter la séquence <DT><DD> pour chaque définition. On peut ainsi donner plusieurs définitions à un même terme en utilisant plusieurs fois la balise <DD> sous la balise <DT>. • Les listes peuvent être imbriquées. 6
  7. 7. Bruno Delb http://www.brunodelb.com Date : 12/02/2001 HTMLInsérer une image Les navigateurs Web reconnaissent deux formats dimages compressés : • les images GIF, • les images JPEG. Action Syntaxe Pour insérer une image <img src="images.gif"> Pour aligner une image à la base <img src="images/serviette50.gif" ALIGN=BOTTOM> Pour aligner une image à la tête <img src="images/serviette50.gif" ALIGN=TOP> Pour aligner une image au centre <img src="images/serviette50.gif" ALIGN=MIDDLE> Pour aligner du texte à gauche <img src="photos/PK015moyenne.jpeg" ALIGN=LEFT HSPACE=4> Pour aligner du texte à droite <img src="photos/PK015moyenne.jpeg" ALIGN=RIGHT HSPACE=4> Pour définir un espace horizontal libre Utiliser l’attribut HSPACE (de 1 à 5) entre limage et le texte Pour forcer un changement de ligne qui <br clear> tienne compte de la place occupée par limage (en fin du texte) Remarque : • La taille de limage est déterminée par le fichier lui-même. 7
  8. 8. Bruno Delb http://www.brunodelb.com Date : 12/02/2001 HTMLPlacer des lignes horizontales Action Syntaxe Pour placer une ligne horizontale <HR> Pour faire varier la largeur de la ligne en pourcentage de la <HR WIDTH=75%> largeur de l’écran Pour faire varier la largeur de la ligne en nombre de pixels <HR WIDTH=200> Pour faire varier lépaisseur de la ligne <HR SIZE="5"> Pour aligner les lignes à gauche <HR ALIGN=left> Pour aligner les lignes à droite <HR ALIGN=right> Pour aligner les lignes au milieu <HR ALIGN=center> Pour afficher une ligne sans effet de profondeur <HR NOSHADE> Remarque : • On peut placer une image en tant que ligne. 8
  9. 9. Bruno Delb http://www.brunodelb.com Date : 12/02/2001 HTMLInsérer un lien Action Syntaxe Pour insérer un lien hypertexte-hypermédia <A HREF="url">texte lié</A> Pour créer un lien vers un document <A HREF="http://www.grr.ulaval.ca/grrwww/glossairehtml. html">Glossaire</A> Pour créer signet (c’est-à-dire un point <a name="Gopher"> daccès à lintérieur dun document HTML) Pour se rendre à un signet <a href="manuel8.html#Gopher">Gopher</a> Pour voir les liens sous forme de texte Utiliser l’attribut ALT : <A HREF="fichier.HTML"><img src="images/belicone.gif" ALT="accès au fichier X"></a> Remarque : • Les liens apparaissent en couleur contrastée et souligné dans le navigateur. Un lien peut pointer vers différents types de site : Type de site Syntaxe Site HTTP (WWW) <A HREF="http://WWW.fsaa.ulaval.ca">Serveur WWW de la FSAA</A> Site FTP <A HREF="ftp://ftp.apple.com/pub">Site FTP de la compagnie Apple</A> Site TELNET (émulation de terminal <A HREF="telnet://ariane.ulaval.ca/">ARIANE</A> VT100/VT220) Site TN3270 (émulation de terminal IBM <A HREF="tn3270://muse 3270) <retour>@mvs.mcgill.ca/">MUSE</A> Site GOPHER <A HREF="gopher://dionysos.ulaval.ca:70/00/reglementati on/calendrier/1996-1997/cal9697.rtf.txt</A> Site USENET (news) <A HREF="news:soc.culture.quebec">Société québecoise</A> Fichier sur le système hôte <A HREF="fichier.HTML">fichier</A> 9
  10. 10. Bruno Delb http://www.brunodelb.com Date : 12/02/2001 HTMLUtiliser le courrier Action Syntaxe Pour envoyer du courrier <A HREF="mailto:dboivin@grr.ulaval.ca">Le courrier électronique</a> 10
  11. 11. Bruno Delb http://www.brunodelb.com Date : 12/02/2001 HTMLCréer un formulaire Action Syntaxe Pour créer un formulaire <FORM METHOD="POST" ACTION="/cgi- bin/formulaire.pl?xxx"> Pour créer un champ de saisie de texte <input type="text" name="name"> Pour spécifier la longueur du champ de saisie <input type="text" name="name" size=30> de texte Pour créer deux champs de type bouton <input type="radio" name="info" value="OUI">OUI radio (donc exclusifs) <input type="radio" name="info" value="NON">NON Pour créer un champ de type case à cocher Kent, England <input name="city" TYPE=checkbox (pour pouvoir sélectionner plusieurs choix en VALUE="Kent"> même temps) Pour créer un champ de type combo box <select name><option selected>Kent, (apparaissant donc sous la forme d’un menu England<option>Toronto, Canada<option>Dublin, « pop-up ») Ireland</select> Pour créer un champ de saisie texte <TEXTAREA name="logiciels?" rows=3 multilignes (3 lignes de 56 colonnes) cols=56></TEXTAREA> Pour valider le formulaire et le soumettre au <input type="submit" value="Soumettre"> serveur HTTP Pour vider le contenu du formulaire <input type="reset" value="effacer et recommencer"> Remarque : • METHOD= « POST » désigne la méthode de transmission des champs de saisie au serveur. • ACTION=« /cgi-bin/formulaire.pl » désigne le programme de traitement des informations. • « ?xxx » désigne les éventuels arguments du programme. • Pour les boutons radio, on peut spécifier n’importe quel type de valeur dans l’attribut « value ». 11
  12. 12. Bruno Delb http://www.brunodelb.com Date : 12/02/2001 HTMLPlacer des liens sur des images Action Syntaxe Pour afficher une image dont certaines <A HREF="http://www.grr.ulaval.ca/cgi- zones ont un lien bin/imagemap.exe/moissonbatteuse"><img src="images/moissonbatteuse.gif" ISMAP></a> Pour désactiver le carré bleu entourant <img border=0 src="images/moissonneuse.gif"> une image liée Remarque : • Le programme « imagemap.exe » identifiera et retournera lURL associée à la zone sélectionnée. Pour cela, il faut fournir une clef de limage "cartographiée". Il faut aussi constituer un fichier d’association des zones à des URL. 12
  13. 13. Bruno Delb http://www.brunodelb.com Date : 12/02/2001 HTMLUtiliser une trame sonore Puisque le navigateur Web ne peut reproduire les sons, il appelle un programme externe. Action Syntaxe Pour lier un son à un mot <A HREF="sons/meuh.aiff">mot sonore</A> Pour lier un son à une image <A HREF="sons/meuh.aiff"><img src="images/vache.gif></A> Pour intégrer un son (au format Wave ou <BGSOUND src="fnkngrvn.mid"> Midi) en arrière-plan (dans la partie HEAD) 13
  14. 14. Bruno Delb http://www.brunodelb.com Date : 12/02/2001 HTMLUtiliser une séquence vidéo Puisque le navigateur Web ne peut reproduire les sons, il appelle un programme externe : • PMMPEG pour le format MPEG, • le runtime de QuickTime pour les fichiers QuickTime, • le runtime de Video for Windows pour les fichiers AVI. Action Syntaxe Pour lier une vidéo à un mot <A HREF="animations/WaterCycle.mov">cycle de leau animé</A> Pour lier une vidéo à une image <A HREF="animations/WaterCycle.mov"><img src="images/ cycleeau.gif"></A> 14
  15. 15. Bruno Delb http://www.brunodelb.com Date : 12/02/2001 HTMLCréer un tableau Action Syntaxe Pour créer un tableau <TABLE></TABLE> Pour définir une ligne dans un tableau <TR></TR> Pour définir une colonne dans une ligne d’un tableau <TD></TD> Pour aligner à au centre verticalement dans une <TD VALIGN=MIDDLE></TD> colonne Pour ajouter une ligne en en-tête (Table Header) <TH></TH> Pour placer un titre au-dessus du tableau <CAPTION ALIGN=TOP></CAPTION> Pour placer un titre en-dessous du tableau <CAPTION ALIGN=BOTTOM></CAPTION> Pour définir une ligne dépaisseur variable entourant <TABLE BORDER=nombre> le tableau Pour aligner à gauche une ligne dans un tableau <T? ALIGN=LEFT></T?> (<TR>), une colonne dans une ligne d’un tableau (<TD>) ou une en-tête (<TH>) Pour aligner à droite une ligne dans un tableau <T? ALIGN=RIGHT></T?> (<TR>), une colonne dans une ligne d’un tableau (<TD>) ou une en-tête (<TH>) Pour aligner au centre une ligne dans un tableau <T? ALIGN=CENTER></T?> (<TR>), une colonne dans une ligne d’un tableau (<TD>) ou une en-tête (<TH>) Pour aligner en haut verticalement une ligne dans <T? VALIGN=TOP></T?> un tableau (<TR>), une colonne dans une ligne d’un tableau (<TD>) ou une en-tête (<TH>) Pour aligner en bas verticalement une ligne dans un <T? VALIGN=BOTTOM></T?> tableau (<TR>), une colonne dans une ligne d’un tableau (<TD>) ou une en-tête (<TH>) Pour aligner au milieu verticalement une ligne dans <T? VALIGN=MIDDLE></T?> un tableau (<TR>), une colonne dans une ligne d’un tableau (<TD>) ou une en-tête (<TH>) Pour aligner sur la même ligne une ligne dans un <T? VALIGN=BASELINE></T?> tableau (<TR>), une colonne dans une ligne d’un tableau (<TD>) ou une en-tête (<TH>) Pour empêcher que le texte des cellules (<TD> ou <td nowrap> ou <th nowrap> <TH>) ne soit réparti sur plusieurs lignes Pour ajouter une ligne qui sétend sur toute la <td colspan=2> largeur du nombre de colonnes spécifié (<TD> ou <TH>) Pour ajouter une colonne qui sétend sur toute la <td rowspan=2> largeur du nombre de rangées spécifié (<TD> ou <TH>) Pour spécifier lépaisseur de la bordure Utiliser l’attribut BORDER. Pour spécifier lespacement entre les données dans Utiliser l’attribut BORDER. les cellules et la bordure Pour spécifier la largeur totale du tableau en <table border=1 width="30%"> pourcentage de la largeur de l’écran Pour spécifier la largeur totale du tableau en <table border=1 width="500"> 15
  16. 16. Bruno Delb http://www.brunodelb.com Date : 12/02/2001 HTML nombre de pixels Pour spécifier la largeur Utiliser l’attribut width. Remarques : • Dans une cellule d’un tableau, il est possible d’insérer une image, un texte, un lien, une liste ou encore un autre tableau. 16
  17. 17. Bruno Delb http://www.brunodelb.com Date : 12/02/2001 HTMLSpécifier un fonds décran Action Syntaxe Pour changer limage du fond décran Utiliser la balise <body background="images/carrefondgris.gif"> dans lentête du document HTML juste avant <title>. Pour changer la couleur du fond d’écran <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#FFFFFF" VLINK="#00AAFF"> Pour changer la couleur du fond de Utiliser l’attribut BGCOLOR (Background Color). lécran Pour changer la couleur du texte Utiliser l’attribut TEXT (Text Color). Pour changer la couleur des liens Utiliser l’attribut LINK (Link Color). Pour changer la couleur des liens Utiliser l’attribut ALINK (Selected Link Color). sélectionnée avec la souris Pour changer la couleur des liens visités Utiliser l’attribut VLINK (Visited Link Color). Pour spécifier une couleur RGB (ou RVB Utiliser l’attribut #rrvvbb. en Français) (Rouge, Vert, Bleu) Pour changer localement la couleur du <FONT COLOR=#FFFFFF>texte</FONT> texte Couleur Code RGB Blanc #FFFFFF Jaune #FFFF00 Noir #000000 Magenta #FF00FF 17
  18. 18. Bruno Delb http://www.brunodelb.com Date : 12/02/2001 HTMLLes autres commandes Action Syntaxe Pour positionner les autres pages dans la <BASE hiérarchie des fichiers (en début de page, dans HREF="http://WWW.grr.ulaval.ca/grrWWW/" la section entête) > Pour insérer un commentaire <!-- commentaire --> Pour permettre à l’utilisateur de chercher un ou <ISINDEX> plusieurs mots-clé (l’utilisateur doit alors spécifier un mot-clé lors de l’affichage de la page ; un programme est nécessaire pour cela) Pour changer automatiquement de page (dans la <META HTTP-EQUIV="refresh" CONTENT="6; section HEAD de la page) (« refresh » indique de URL=meta2.html"> rafraîchir l’écran, « content=6 » indique la durée en secondes) 18
  19. 19. Bruno Delb http://www.brunodelb.com Date : 12/02/2001 HTMLLes cookies Un cookie HTTP sauvegarde des informations chez le client (c’est-à-dire chez l’utilisateur) jusqu’à une date d’expiration. Cela nécessite l’utilisation de scripts CGI ou de JavaScript. Pour sauvegarder une information, utiliser la commande « Set-Cookie: NAME=VALUE; expires=DATE; path=PATH; domain=DOMAIN; secure ». Remarque : • La date est au format suivant : Wednesday, 09-Nov-99 23:12:40 GMT Dès que vous revenez sur la page « PATH » avant la date dexpiration « DATE », le navigateur envoie au serveur la commande « Cookie: NAME=VALUE ». 19

×