LeCompagnon.info

Voir produits sur TeeSpring.comCliquez ici pour voir les produits

Internet

Internet: Les codes HTML

Avant de commencer
Introduction
Les commandes de base
La présentation
Les images
Les liens et les signets
Les tableaux
Les formulaires
Les frames
Les autres commandes

Avant de commencer

Le contenu sur le World Wide Web est maintenant divisé en plusieurs pages. La page d'introduction au World Wide Web contient une introduction et une description des éléments que l'on retrouve sur les pages Web et les sites Web. Il y a aussi une page contenant des conseils pour la conception de pages Web, la promotion du site et la publication. Les pages suivantes sont pour la conception de pages Web en utilisant Netscape Composer, Microsoft Word ou Microsoft FrontPage. Il y a beaucoup de petits conseils qui sont inclus sur ces pages. La prochaine page contient une description des éléments que l'on retrouve dans un formulaire d'une page Web ainsi que ses avantages et ses limitations. Pour terminer, il y a une page qui contient les codes HTML (cette page) que l'on retrouve sur toutes les pages du Web. En comprenant leur fonctionnement, vous pourrez composer de meilleures pages Web.

 

Internet
La nétiquette
Courrier électronique
Courrier électronique (avec Netscape)
FTP (File Transfer Protocol)
Les newsgroups
Internet Relay Chat (IRC)
World Wide Web (WWW ou W3)
Conseils pour la conception de pages Web
Conception de page Web avec FrontPage
Conception de page Web avec Netscape Composer
Conception de page Web avec Word
Les formulaires
Les codes HTML
Les images animées

Autres formations

Word 2003
Word 2007
Excel
Excel
VBA pour Excel
PowerPoint 2003
PowerPoint 2007
Access
Access 2010
Internet
Général
Intelligence financière
Vidéos

Navigation
Précédent
Suivant
Page Principale
FAQ
Nouveautés
Plan du site
Références
Motivations
Manuels de formation
Fichiers de démonstration
Droits d'auteur
Text in English
Nous joindre
Par courriel
Abonnez-vous à
l'infolettre LCI





























Abonnez-vous à l'infolettre LeCompagnon.info


Introduction

Les pages précédentes montraient comment utiliser Microsoft Word 97 ou Netscape Composer pour créer une page Web. Mais, éventuellement, il faudra que vous entrez dans le code HTML pour pouvoir changer ou ajouter une option.

Comme mentionné à la page de conception de pages Web avec Word, tous les codes en format HTML se retrouvent entre des "<" et des ">". La plupart de ces codes fonctionnent aussi en paires: le premier pour activer la commande et le second pour la terminer. La seule différence entre les deux est que le dernier a le caractère "/" en plus dans le code. Par exemple, les codes <P> et </P> indiquent le début et la fin d'un paragraphe. Il y a aussi certains codes qui sont nécessaires.

Les commandes de base

Certains codes sont essentiels pour que le fureteur reconnaisse que le fichier soit une page Web.

<HTML>
<HEAD>
<TITLE>Titre de votre page Web</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Ce que vous avez au-dessus sont les codes de base pour une page Web. Une page Web commence toujours par le code <HTML>. C'est de cette manière que le format est reconnu par les éditeurs de pages Web. Ensuite suit la section <HEAD> qui inclus le nom de la page (<TITLE>) qui va apparaître sur la barre titre de la fenêtre lors de l'affichage de la page dans un fureteur. C'est à l'intérieur des codes <BODY> que se retrouve le texte de la page. Souvent, le premier code BODY inclus des options telles que la couleur de fond (<BACKGROUND>) ou le nom de l'image qui sert de motif de fond de la page. Voici quelques options possibles pour la commande BODY.

Code

Description

BGCOLOR

Couleur de fond de la page Web.

BACKGROUND

Image utilisé pour le fond de la page Web. Seul une couleur ou une image peut être utilisé à la fois pour déterminer l'apparance du fond de la page Web.

TEXT

Couleur du texte de la page Web.

LINK

Couleurs des liens sur la page Web.

VLINK

Couleur d'un lien lorsqu'on "clique" dessus.

ALINK

Couleur d'un lien déjà visité récemment.

Ex.: <BODY BACKGROUND="bk21.gif" TEXT="blue" LINK="red" VLINK="yellow" ALINK="green">

La présentation

Entre les commandes <BODY> et </BODY>, il y a le texte qui compose la page Web. Il est cependant toujours possible de changer la présentation du texte. Les commandes qui suivent vous donne une idée de ce qui est possible d'accomplir en format HTML pour la présentation du texte.

<P></P>

Début et fin de paragraphe

<B></B>

Début et fin du gras (Bold)

<I></I>

Début et fin d'italique

<U></U>

Début et fin du souligné (Underline)

<BR>

Fin de ligne. Commence à écrire à la ligne directement en dessous.

ALIGN="LEFT, CENTER, RIGHT"

Aligner un élément que ce soit un paragraphe, une image, le contenu d'une cellule ...). Choisir parmi l'une des trois possibilités.

<Hx></H>

Ex.: <H1> </H1>

Début et fin d'en-tête (header) Les en-têtes vont de H1 jusqu'à H6.

<UL><LI></LI></UL>
Ex.:
<UL>
<LI>Texte de votre choix</LI>
<LI>Texte de votre choix</LI>
</UL>

Affichage d'une liste non numérotée (Unordered list) et le contenu de chacune des lignes.

<OL><LI></LI></OL>
Ex.:
<OL>
<LI>Texte de votre choix</LI>
<LI>Texte de votre choix</LI>
</OL>

Affichage d'une liste ordonnée, numéroté (Ordered list) et le contenu de chacune des lignes

<HR>

Ligne horizontale. Peut avoir comme option la longueur en pixels ou en pourcentage de l'écran ainsi que le nom de l'image.

<TT> Votre texte </TT>

Afficher le texte en police en style "Typewriter"

<BLINK>Votre texte </BLINK>

Texte "clignote" à l'écran. Ne devrait pas être utiliser que pour décrire une situation exceptionnelle.

<EM>

Mettre de l'emphase sur le texte

<STRONG> Votre texte</STRONG>

Met le texte en gras.

<PRE>Votre texte</PRE>

Met le texte en format préformaté

<CITE>Votre texte</CITE>

Met le texte en format de citation

<CODE>Votre texte</CODE>

Afficher le code au lieu de l'utiliser pour la présentation de la page.

<SAMP> Votre texte </SAMP>

Afficher le texte en format "Exemple".

<KBD>

Keyboard Input

<VAR>

Variable utilisé dans un formulaire

<DFN>

Définition

<FONT size=?>Votre texte </FONT>

Déterminer la police de caractère, sa taille et sa couleur du texte.

<BLOCKQUOTE>

 

<CENTER>

 

Les images

L'un des élément qui a rendu le World Wide Web si populaire est sa possibilité d'afficher des images. Voici un exemple du code pour l'image plus.gif

<IMG SRC="plus.gif" ALT="+" HEIGHT="10" WIDTH="10" BORDER="0">

Voici le résultat+

Le code précédent indentifie une image. L'option SRC indique le nom et si nécessaire le chemin (en adresse absolue si nécessaire) pour trouver l'image en question. L'option ALT affiche du texte si, pour une raison ou une autre, l'image n'apparaîtrait pas. Ceci laisse toujours une référence aux lecteurs de la page. Cette option est encore plus importantes pour les lecteurs de pages Web ayant un hadicap visuel. Les options HEIGHT et WIDTH réservent l'espace nécessaire pour afficher l'image. De cette manière, le fureteur réserve l'espace et continue d'afficher le reste du texte de la page. Par après, il revient et affiche les images dans les espaces réservés. Si cette option n'est pas utilisée, la présentation du texte de la page est ralentie puisque le fureteur doit premièrement lire l'image avant de réserver l'espace. L'option BORDER sert à déterminer l'épaisseur du contour de l'image. Si l'option n'est pas là, il n'y aura pas de bordure autour de l'image (BORDER="0").

Les liens et les signets

L'élément le plus important d'une page Web, après son contenu, est le lien à une autre page Web. Il est impensable de concevoir une page Web sans envisager de créer un ou plusieurs liens à d'autres pages Web. D'ailleurs le nom du service, le Web, provient du fait que toutes les pages disponibles sur l'Internet sont entre-reliées. Il y a aussi les codes pour les liens et les signets.

<A HREF="acct.htm">Les tables</A>

Ce code représente un lien à une autre page Web (acct.htm) avec une adresse relative. Il y a aussi le texte qui apparaît à l'écran sur lequel vous appuyez pour vous rendre à cette page.

<A HREF="#intro">Introduction</A>

Le code ci-dessus est un lien à un signet qui se retrouve quelque part sur la même page Web actuelle.

<A NAME="test"></A>

Ceci est un signet de la page. Le nom de celui-ci est "test".

Lien à une adresse de courrier électronique

<A HREF="mailto:adresse_de_courrier_électronique@de_votre_choix"> Ex.: <A HREF="mailto:lecompagnon@lecompagnon.info">

Lien à un fichier ou document qui n'est pas une page Web ou une image.

<HREF="nom_du_document_incluant extention_si_nécessaire"> Ex.: <HREF="courrier.ppt">

Autres services: FTP, Gopher, newsgroups

Target (pour les "frames" ou les cadres)

Liens sur un Imagemap avec des formes:
Rectangulaire
Circulaire
Non-uniforme

Les tableaux

Ils sont utile pour une grille mais aussi pour écrire du texte sur plusieurs colonnes. Le format HTML n'a pas de commandes pour afficher plusieurs colonnes. Il est cependant possible de contourner cette limitation en écrivant le texte dans des cellules d'un tableau.

Voici quelques-uns des codes que vous allez retrouver dans un tableau.

<TABLE BORDER="0" CELLSPACING="0" WIDTH="780">

Début du tableau
Aucun contour de cellules (Border="0")
Aucune distance entre le texte et la bordure des cellules (CELLSPACING)
La largeur du tableau est de 780 pixels.

<TR>

Début d'une rangée d'un tableau

<TD VALIGN="TOP"><B>No. Facture</B>

Début de la cellule
Alignement vertical au haut de la cellule
Le texte No. Facture est en gras (Bold)

</TD>

Fin de la cellule

</TR>

Fin d'une Rangée du tableau

</TABLE>

Fin du tableau

COLSPAN, ROWSPAN
BORDER, CELLSPACING, CELLPADDING, WIDTH%,pixel, nowrap
ALIGN

Les formulaires

Les formulaires permet au concepteur de pages Web d'avoir un contact avec les lecteurs sans avoir à passer par le courrier électronique. De plus le concepteur peut demander de l'information précise puisqu'il conçoie le formulaire.

<FORM METHOD="POST" ACTION="mailto: ou SCRIPT CGI"><INPUT></FORM>

Contenu d'un formulaire. Annonce le début et la fin du formulaire. OBLIGATOIRE.

<INPUT TYPE="TEXT" NAME="Nom de la variable" SIZE="Nombre de caractères">

Variable pour du texte. Pour une ligne de texte au choix de lecteur.

<INPUT TYPE="TEXTAREA" NAME="Nom de la variable" ROWS="Nombre de rangées" COLS="Nombre de colonnes">

Champ pour commentaires. Permet au lecteur d'entrer plusieurs lignes de textes. Parfait pour des commentaires.

<INPUT TYPE="RADIO" NAME="Nom de la variable" VALUE="Valeur envoyé par courrier électronique">

Bouton radio. Permet d,avoir plusieurs possibilités. Seulement une de celles-ci peut être choisie.

<INPUT TYPE="CHECKBOX" NAME="Nom de la variable" VALUE="Valeur envoyé par courrier électronique">

Bouton crochet. Parfait pour des situations Oui/Non.

<SELECT NAME="Nom de la variable" SIZE="Nombre de lignes affichées">
<OPTION SELECTED>Valeur par défaut
<SELECT>Autre choix ...
</SELECT>

Menu déroulant. Permet d'avoir une liste déroulante. Option selected permet d'avoir un choix prédéterminé.

<INPUT TYPE="SUBMIT" VALUE="Texte dans le bouton">

Bouton transmettre le contenu du formulaire. Transmet le contenu des variables au destinateur. OBLIGATOIRE.

<INPUT TYPE="RESET" VALUE="Texte dans le bouton">

Bouton vider le contenu du formulaire. Permet à l'utilisateur de recommencer l'entrée de données.

Les frames ou les cadres

FRAMESET Découpe l'écran en plusieurs partis horizontalement ou verticalement en autant de parties que vous avez besoin. Le découpage peut se faire selon le nombre de "pixels" ou selon un certain pourcentage de l'écran.

<NOFRAME> Texte de la page </NOFRAME> Incrire du texte pour les usagers qui n'utilisent un fureteur qui supporte l'option des cardre. Ceci est de plus en plus rare.

Les autres commandes

Caractères spéciaux

Parmi les codes, il y a ceux pour les caractères spéciaux. Le format HTML a été premièrement conçu pour du texte en anglais. C'est ensuite que des codes ont été ajoutés pour les caractères des différentes langues de la planète. Voici quelques-uns des codes pour la langue française.

&#224; ou &agrave; à
&#232; è
&ugrave; ù
&#233; ou &eacute; é

&acirc; â
&ecirc; ê
&icirc; î
&ocirc; ô

&ucirc; û
&ccedil; ç
&Agrave; À
&Eacute; É

<! vos commentaires> Remarques qui ne seront pas pris en considération par le fureteur.

Comme mentionné ci-dessus, la commande <META> peut être utilisé pour mieux décrire votre page Web. Cette commande se place entre les commandes <HEAD> et </HEAD> au début de la page. Placez-le immédiatement après les commandes <TITLE> et </TITLE>. Le <META> offre plusieurs options comme vous allez le voir. Elle se découpe en deux parties: le nom et le contenu. Voici pour commencer les deux plus populaires.

<META NAME="KEYWORDS" CONTENT="Liste des mots clés,séparés,par,une,virgule"> Cette commande caché offre au site de recherche les termes qu'il pourra mettre dans différentes catégories. Certains sites de recherche n'aiment pas avoir des espaces à côté de la virgule. N'en mettez pas!

<META NAME="DESCRIPTION" CONTENT="Une courte description de votre site ou de votre page. Environ de 25 mots ou 200 caractères."> C'est la description qui va apparaître à l'écran lorsqu'une personne aura choisi l'un des mots clés que vous avez écrit.

Une autre qui apparaît souvent: <META NAME="GENERATOR" CONTENT="Nom de l'éditeur avec lequel vous avez conçu cette page">. C'est l'éditeur lui-même qui l'ajoute. Un peu de promotion quoi! En voici d'autres.

<META NAME="AUTHOR" CONTENT="Nom de l'auteur de la page (votre nom)"> Certain sites de recherche vous permet de chercher selon l'auteur de la page. Il faut cependant que le bon <META> soit présent!

<META NAME="COPYRIGHT" CONTENT="Les droits d'auteur vont à (votre nom), année de composition (ex.: 1998)"> Les droits d'auteur.

<META NAME="EXPIRES" CONTENT="Date en anglais ex.: 1 january 2001"> Date ou la référence à cette page sera retiré de la base de données du site. Pour vérifier si une page est encore valide, certains sites de recherche utilisent des "araignées" (spiders), des petits automates qui valident l'existence d'une page.

Avec un peu de recherche, j'ai trouvé ces autres "META TAGS" qui pourraient vous aider à identifier votre page. Ceci est plus pour de l'information générale sur la page que pour identifier la page avec des mots clés.

<META http-equiv="Publication_Date" CONTENT="Date de publication">
<META http-equiv="Custodian" CONTENT="Nom du responsable">
<META http-equiv="Custodian Contact" CONTENT="Coordonnées du resposable (nom, e-mail)">
<META http-equiv="Owner" CONTENT="Nom du propriétaire de la page">
<META http-equiv="Reply to" CONTENT="e-mail du propriétaire">

Le dernier META TAG est intéressant pour "rafraichir" la page ou lorsque vous "déménager" votre site sur un autre serveur. La commande permet de charger une autre page Web automatiquement après un certain tempa.

<META http-equiv="Refresh" CONTENT="(nombre de secondes d'affichage);url=(adresse de la page Web à afficher)">

Elle est intéressant si vous déménager votre site, si possible, vous pouvez laissez une page Web sur l'ancien serveur avec la commande "refresh" qui redirige les lecteurs au nouveau site. De cette manière, vous pouvez conserver les utilisateurs réguliers à votre site en les informant de la nouvelle adresse. Pour vous démontrer le fonctionnement de cette commande, vous pouvez cliquer ici. Ce lien va vous transférer à une page Web ayant une commande "refresh". Vous serez de retour au paragraphe suivant dans 30 secondes.

On peut aussi s'en servir pour afficher rapidement plusieurs petites pages pour en faire un genre de promotion. Une personne m'a même mentionné la possibilité d'un "carousel" ou plusieurs pages Web font une boucle infini. N'oubliez pas dans ce cas d'ajouter un lien ou un bouton de navigation pour "sortir" de la boucle!

31? 41 ) 51 3 61 = 71 G 81 Q
32 42 * 52 4 62 > 72 H 82 R
33! 43 + 53 5 63? 73 I 83 S
34 " 44 , 54 6 64 @ 74 J 84 T
35 # 45 - 55 7 65 A 75 K 85 U
36 $ 46 . 56 8 66 B 76 L 86 V
37 % 47 / 57 9 67 C 77 M 87 W
38 & 48 0 58 : 68 D 78 N 88 X
39 ' 49 1 59 ; 69 E 79 O 89 Y
40 ( 50 2 60 < 70 F 80 P 90 Z
91 [ 101 e 111 o 121 y 131 ƒ 141 ì
92 \ 102 f 112 p 122 z 132 „ 142 Ä
93 ] 103 g 113 q 123 { 133 … 143 Å
94 ^ 104 h 114 r 124 | 134 † 144 É
95 _ 105 i 115 s 125 } 135 ‡ 145 ‘
96 ` 106 j 116 t 126 ~ 136 ˆ 146 ’
97 a 107 k 117 u 127 ¦ 137 ‰ 147 “
98 b 108 l 118 v 128 Ç 138 Š 148 ”
99 c 109 m 119 w 129 ü 139 ‹ 149 •
100 d 110 n 120 x 130 ‚ 140 Œ 150 –
151 — 161 ¡ 171 « 181 µ 191 ¿ 201 É
152 ˜ 162 ¢ 172 ¬ 182 ¶ 192 À 202 Ê
153 ™ 163 £ 173 ­ 183 · 193 Á 203 Ë
154 š 164 ¤ 174 ® 184 ¸ 194 Â 204 Ì
155 › 165 ¥ 175 ¯ 185 ¹ 195 Ã 205 Í
156 œ 166 ¦ 176 ° 186 º 196 Ä 206 Î
157 Ø 167 § 177 ± 187 » 197 Å 207 Ï
158 ž 168 ¨ 178 ² 188 ¼ 198 Æ 208 Ð
159 Ÿ 169 © 179 ³ 189 ½ 199 Ç 209 Ñ
160 á 170 ª 180 ´ 190 ¾ 200 È 210 Ò
211 Ó 221 Ý 231 ç 241 ñ 251 û
212 Ô 222 Þ 232 è 242 ò 252 ü
213 Õ 223 ß 233 Ú 243 ó 253 ý
214 Ö 224 à 234 Û 244 ô 254 þ
215 × 225 á 235 ë 245 õ 255 ÿ
216 Ø 226 â 236 ì 246 ö
217 Ù 227 ã 237 í 247 ÷
218 Ú 228 ä 238 î 248 ø
219 Û 229 Õ 239 ï 249 ù
220 Ü 230 æ 240 ð 250 ú



Abonnez-vous à l'infolettre

Abonnez-vous à l'infolettre du site pour recevoir le manuel " 150 fonctions Excel expliquées ". Vous recevrez aussi les prochaines infolettres sur les nouveautés du site et des formations détaillées que vous ne trouverez nulle part ailleurs.


Cliquez ici pour vous abonner à l'infolettre





Ce site est hébergé par 1&1.com