les codes HTML
Introduction
Les pages pr dentes montraient comment utiliser Microsoft Word 97 ou Netscape Composer pour crer 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 diffrence entre les deux est que le dernier a le caractre /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[IMG]file:///E:/Documents%20and%20Settings/PROGRAM/Bureau/com/plus.gif[/IMG]
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_v otre_choix"> Ex.: <A HREF="mailto: - البريد الإلكتروني حذف من قبل الإدارة (غير مسموح بكتابة البريد) -">
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.
à ou à à
è è
ù ù
é ou é é
â â
ê ê
î î
ô ô
û û
ç ç
À À
É É
<! vos commentaires> Remarques qui ne seront pas pris en considération par le fureteur.
Comme mentionné ci-dessus, la commande ******** 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 ******** 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.
<**** NAME="KEYWORDS" *******="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!
<**** NAME="DESCRIPTION" *******="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: <**** NAME="GENERATOR" *******="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.
<**** NAME="AUTHOR" *******="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 ******** soit présent!
<**** NAME="COPYRIGHT" *******="Les droits d'auteur vont à (votre nom), année de composition (ex.: 1998)"> Les droits d'auteur.
<**** NAME="EXPIRES" *******="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 "**** 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.
<**** ***********="Publication_Date" *******="Date de publication">
<**** ***********="Custodian" *******="Nom du responsable">
<**** ***********="Custodian Contact" *******="Coordonnées du resposable (nom, e-mail)">
<**** ***********="Owner" *******="Nom du propriétaire de la page">
<**** ***********="Reply to" *******="e-mail du propriétaire">
Le dernier **** 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.
<**** ***********="*******" *******="(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 "*******" 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. Ce lien va vous transférer à une page Web ayant une commande "*******". Vous serez de retour au paragraphe suivant dans 30 secondes.
( تقرير عن مشاركة سيئة )، و الموجودة أسفل كل مشاركة .
2013-07-17, 13:46
وسم html
العرض المتطور
