Catégories: "Développement Web"
HTML: Caractères spéciaux et accentués
Certains caractères sont interprétés par HTML et ne peuvent être insérés tels quels dans le texte d'une page. Il faut alors utiliser des séquences d'échappement:
- <
- permet d'obtenir un <
- >
- permet d'obtenir un >
- &
- permet d'obtenir un &
- "
- permet d'obtenir un "
De même, si vous ne pouvez pas générer des fichiers codés avec le jeu de caractères ISO-Latin-1, vous pouvez utiliser des séquences d'échappement pour produire des caractères accentués. Voici quelques exemples:
- é
- permet d'obtenir un é
- È
- permet d'obtenir un È
- ê
- permet d'obtenir un ê
- ë
- permet d'obtenir un ë
- ï
- permet d'obtenir un ï
- ô
- permet d'obtenir un ô
- ç
- permet d'obtenir un ç
- ñ
- permet d'obtenir un ñ
Mise en forme HTML
Les styles précédents s'appliquent à des paragraphes entiers. Lorsque vous ne voulez affecter que le style d'un mot ou d'une phrase à l'intérieur d'un paragraphe, vous disposez de marqueurs spéciaux, par exemple <STRONG> pour mettre fortement en valeur - ce qui sera généralement traduit par un affichage en gras.
Notez qu'il existe les marqueurs comme <DFN>précisant le type d'information et d'autres comme <B> précisant le type de police à employer.
Type d'information:
Les éléments suivants peuvent être utilisés pour spécifier le type d'information d'un mot ou d'un groupe de mots:
- DFN
- Instance définissant un mot.
- EM
- Mise en valeur. Typiquement rendu en italiques.
- CITE
- Indique une citation ou un titre. Typiquement rendu en italiques.
- CODE
- Exemples de
code source
. - KBD
- Exemples de saisie clavier.
- SAMP
- Exemples de messages informatiques.
- STRONG
- Forte mise en valeur.
- VAR
- Variables que l'utilisateur doit remplacer avec ses propres donnéees.
Nouveaux éléments définis dans HTML 3: Q, LANG, AU, PERSON, ACRONYM, ABBREV, INS, DEL.
Type de fonte:
L'utilisation de ces marqueurs fortement déconseillée au profit des styles logiques ci-dessus. En effet, imaginez que votre page doive être affichée sur un système ne supportant pas l'italique. Dans ce cas, si vous avez par exemple utilisé <EM> au lieu de <I>, le client pourra néanmoins afficher le texte à mettre en valeur sous forme soulignée ou dans une autre couleur, selon ses possibilités...
Les éléments suivants peuvent être utilisés pour spécifier le type de fonte à utiliser pour l'affichage d'un mot ou d'un groupe de mots:
- B (Boldface)
- Permet d'afficher en gras.
- I (Italic)
- Permet d'afficher en italique.
- TT (TeleType)
- Permet d'afficher en style machine à écrire.
- U (Underline)
- Permet d'afficher en souligné. Très peu supporté.
Nouveaux éléments définis dans HTML 3: S, BIG, SMALL, SUB, SUP.
Il est possible de combiner différents styles, par exemple <B> et <I> mais il n'est pas garanti que le browser sache afficher du gras+italique, même s'il sait afficher du gras et de l'italique séparément.
Couleur des caractères
En utilisant le marqueur FONT
et son attribut COLOR vous pouvez forcer la couleur du texte. Voici un exemple:
Ce texte est Rouge, Orange, Vert, Bleu, etc.
Les codes de couleur doivent être interprétés de la manière suivante: derrière le dièse, on trouve six caractères qu'il convient de grouper deux par deux. Ces groupes de deux caractères représentent l'intensité des couleurs de base rouge, vert et bleu (dans l'ordre) sous forne d'un nombre hexadécimal compris entre 00 et FF.
Quelques exemples de couleurs.
Taille des caractères
Texte en taille normale+2=6.
Texte en taille normale-2=2.
Texte en taille 1.
Police de caractères
Internet Explorer choisira la première police de caractères disponible sur le système parmi la liste de préférences fournie...
Texte en Impact ou Arial selon disponibilite.
Texte en Freehand471 BT ou Brush Script MT selon disponibilité.
HTML: Formats de paragraphes
Texte préformaté
Vous avez déjà constaté que le client Web effectuait lui même la mise en page et déterminait les retours à la ligne dans vos paragraphes en fonction de la largeur de sa fenêtre d'affichage. Lorsque ceci présente un risque de confusion (cas de l'affichage d'un code source) ou que vous désirez écrire dans une fonte à espacement fixe (cas de colonnes de chiffres), vous pouvez utiliser le style <PRE>.
Ceci est un texte ... préformaté Il est reproduit tel qu'il apparaît dans le source de la page HTML. ...sauf les marqueurs qui sont toujours interpétés: Gras
<PRE> Ceci est un texte ... préformaté Il est reproduit tel qu'il apparaît dans le source de la page HTML. ...sauf les marqueurs qui sont toujours interpétés: <STRONG>Gras</STRONG> </PRE>
Citation
Le style <BLOCKQUOTE> pour afficher une citation en retrait par rapport au texte normal:
Ceci est une citation. Elle apparaît en retrait par rapport au texte normal.
<BLOCKQUOTE> Ceci est une citation. Elle apparaît en retrait par rapport au texte normal. </BLOCKQUOTE>
Sous HTML 3, vous pouvez remplacer <BLOCKQUOTE> par <BQ> ce qui est plus rapide à taper. Vous pouvez également faire suivre la citation de sa source en utilisant les marqueurs <CREDIT> et </CREDIT>. Ex:
<BQ> Working is an unnatural act! <CREDIT>Kevin D. Love</CREDIT> </BQ>
Adresse
Le style <ADDRESS> vous permet de préciser vos coordonées en bas de la page (ce qui permet à quelqu'un qui se trouve parachuté sur votre page depuis ailleurs de s'y retrouver), mais dans un style différent (généralement traduit par une mise en italique).
Ceci est une adresse.<planque@worldnet.net>
<ADDRESS> Ceci est une adresse.<BR> <planque@worldnet.net> </ADDRESS>
HTML: Comment créer des listes
HTML vous offre la possibilité de créer des listes dans lesquelles chaque élément se trouve sur une ligne différente.
Il existe différents types de listes:
Listes non numérotées
- Lait
- Chocolat
Café
- Noir
Au lait
Avec du sucre
- Blanc
- Roux
- Sans sucre
Ce type de liste est réalisé grâce aux marqueurs <UL> et </UL> (Unordered List). Chaque entrée de liste est signalée avec le marqueur <LI> (LIst entry):
<UL> <LI>Café <LI>Chocolat <LI>Lait </UL>
Liste numérotée
- Ouvrez
- Entrez
- Fermez
- La porte
- La fenêtre
- La bouteille
- De lait
- D'eau
- De pinard
<OL> <LI>Ouvrez <LI>Entrez <LI>Fermez </OL>
Liste de définitions
- HTML
- HyperText Markup Language
- WWW
- World Wide Web
<DL> <DT>HTML <DD>HyperText Markup Language <DT>WWW <DD>World Wide Web </DL>
HTML: Liens hypermédia
Le principal atout de HTML réside dans ses possibilités hypermédia. En effet, vous avez la possibilité (grâce au marqueur <A>
) de transformer certains mots, icônes ou images d'une page en sortes deboutons qui, lorsqu'ils sont sélectionnés, renvoient vers un autre paragraphe, une autre page, une image, un son, un clip vidéo, etc...
Il existe plusieurs types de liens différents...
Liens vers un autre document
Ceci est un lien vers une autre page Web nommée gato.html dans le même répertoire que la page courante. Voici comment il a été réalisé:
Ceci est un <A HREF="gato.html">lien vers une autre page Web nommée gato.html</A> dans le même répertoire que la page courante.
Ceci est un lien vers une autre page Web dont le chemin d'accès est indiqué relativement à la page courante:
Ceci est un <A HREF="../Publier/copyright.html"> lien</A> vers une autre page Web dont le chemin d'accès est indiqué relativement à la page courante.
Notez:
- Pour séparer les noms de dossiers, vous devez utiliser des slash
/
, même si vous travaillez sous MS-DOS où vous avez coutume d'utiliser des backslash\
. - Pour remonter au dossier supérieur, il faut utiliser le nom
..
(point-point)
Liens vers un autre serveur
Ceci est un lien vers un autre serveur - celui de l'UTC. Pour réaliser un tel lien, vous devez indiquer dans HREF une URL complète:
Ceci est un <A HREF="http://www.utc.fr/">lien vers un autre serveur</A> - celui de l'UTC.
Liens à l'intérieur d'un document
Ceci sont des liens vers le début et la fin de page. On les réalise en indiquant dans HREF le nom d'une étiquette précédé d'un dièse #
:
Ceci sont des liens vers le <A HREF="#etiquette_debut"> début</A> et la <A HREF="#etiquette_fin">fin</A> de la page.
Mais bien sur, il faut pour celà avoir défini de telles étiquettes dans la page HTML. C'est ce que nous avons fait au début et à la fin de la présente page de la manière suivante:
<A NAME="etiquette_debut"><EM>Début de la page</EM></A> <A NAME="etiquette_fin"><EM>Fin de la page</EM></A>