HTML a été inventé par Tim Berners-Lee du CERN (Conseil Européen pour la Recherche Nucléaire).
Il se compose d'une tête <HEAD>........</HEAD>, d'un titre <TITLE>........</TITLE> et d'un corps <BODY>........</BODY>.
On utilise l'étiquette <BODY> pour indiquer le fond BGCOLOR (couleur de fond) ou BACKGROUND (image de fond), la couleur du texte TEXT, des hyperliens LINK, des liens actifs ALINK et des liens visités VLINK:
Exemple de début de document HTML :
<H1>En-tête de taille 1</H1>
<I>Cette phrase est en italique.</I>
Cette phrase est en italique.
Pour changer la police de caractères, il suffit d'indiquer le nom de celle désirée. Toutefois, si l'utilisateur ne possède pas cette police dans son système, il lira le texte avec la police par défaut.
<font face="comic sans ms">Le texte s'écrit avec la police COMIC SANS MS.</font>
le texte s'écrit avec la police COMIC SANS MS.
Pour changer la grosseur des caractères, on utilise cette étiquette:
<font size="+1">Le texte s'écrit avec une taille plus grande de 1.</font>
Le texte s'écrit avec une taille plus grande de 1.
<font size="-1">Le texte s'écrit avec une taille plus petite de 1.</font>
Le texte s'écrit avec une taille plus petite de 1.
| Les caractères spéciaux | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| á | á | â | â | à | à | ä | ä | ã | ã | å | å |
| Á | Á | Â | Â | À | À | Ä | Ä | Ã | Ã | Å | Å |
| ( La plupart de ces combinaisons sont valables pour e, i, o, u, y, E, I, O, U, Y ) | |||||||||||
| ç | ç | Ç | Ç | ñ | ñ | Ñ | Ñ | © | © | ® | ® |
| ° | ° | < | < | > | > | " | " | & | & | ™ | ™ |
| Pour les indices et les exposants, on utilise les étiquettes : | |||||||||||
H2O et 10+3 | |||||||||||
L'éditeur WebExpert prend directement en compte ces caractères spéciaux (Spécialisés - Caractères spéciaux). Il est essentiel de convertir les caractères accentués afin que tous les systèmes d'exploitation puissent visualiser le même format à l'écran. Ne jamais oublier d'effectuer cette procédure (Éditer, Conversion des caractères).
on change de paragraphe.
Pour passer à la ligne,<BR>, on place un <BR>.
Pour passer à la ligne,
on place un <BR>.
Une liste non ordonnée : <UL> <LI>Hydrogène <LI>Hélium <LI>Lithium </UL>
donnera :
Une liste non ordonnée :
Une liste non ordonnée dans une autre liste non ordonnée :
<UL>
<LI>Alcalins
<UL>
<LI>Lithium
<LI>Sodium
</UL>
<LI>Alcalino-terreux
<UL>
<LI>Béryllium
<LI>Magnésium
</UL>
</UL>
donnera :
Une liste non ordonnée dans une autre liste non ordonnée :
Une liste ordonnée <OL> <LI>Méthane <LI>Ethane <LI>Propane <LI>Butane </OL>
donnera :
Une liste ordonnée
Une définition de liste <DL> <DT>Éléments de la famille IA réagissant violemment au contact de l'eau,
avec laquelle ils forment un alcali, ou base. On les nomme alcalins. <DD>Lithium <DD>Sodium <DD>Potassium <DT>Éléments de la famille VIIA se trouvant dans la nature sous forme de sels.
On les nomme halogènes, mot qui signifie «générateurs de sels». <DD>Fluor <DD>Chlore <DD>Brome </DL>
donnera :
Une définition de liste
<HR size=3 align=left width=40%>
<HR size=4 align=right width=60%>
<HR size=5 align=center width=80%>
| Exercice - Partie 1 |
<IMG src="instru.gif hspace=5"> Par défaut, le bas de l'image est aligné avec le début du texte. hspace=5 signifie qu'un espace horizontal de 5 pixels est gardé autour de l'image.
Par défaut, le bas de l'image est aligné avec le début du texte.
Un espace horizontal de 5 pixels est gardé autour de l'image.
<IMG src="instru.gif" hspace=5 align=top> Le haut de l'image est aligné avec le début du texte. Un espace horizontal de 5 pixels est gardé autour de l'image.
Le haut de l'image est aligné avec le début du texte.
Un espace horizontal de 5 pixels est gardé autour de l'image.<IMG src="instru.gif" hspace=5 align=middle> Le milieu de l'image est aligné avec le début du texte. Un espace horizontal de 5 pixels est gardé autour de l'image.
Le milieu de l'image est aligné avec le début du texte.
Un espace horizontal de 5 pixels est gardé autour de l'image.<IMG src="erlen.gif" hspace=5" align=left> Dans le cas où le texte comporte plusieurs lignes, l'aspect est meilleur si l'image est alignée à gauche, et en même temps en haut. Il faut alors ajouter une rupture de ligne avec l'option 'clear=all'. <BR clear=all>
Dans le cas où le texte comporte plusieurs lignes, l'aspect est meilleur
si l'image est alignée à gauche, et en même temps en haut.
Il faut alors ajouter une rupture de ligne avec l'option 'clear=all'.
<IMG src="erlen.gif" hspace=5" align=right> Dans le cas où le texte comporte plusieurs lignes, l'aspect est meilleur si l'image est alignée à droite, et en même temps en haut. Il faut alors ajouter une rupture de ligne avec l'option 'clear=all'. <BR clear=all>
Dans le cas où le texte comporte plusieurs lignes, l'aspect est meilleur
si l'image est alignée à droite, et en même temps en haut.
Il faut alors ajouter une rupture de ligne avec l'option 'clear=all'.
Voici une image sans font transparent.
Et voici la même image avec un fond transparent.
| Exercice - Partie 2 |
À la fin de cet atelier, vous devriez être en mesure de:
|
Un exercice, divisé en deux parties, vous fera pratiquer les apprentissages théoriques réalisés dans cet atelier.
La partie 1 fait référence aux items no 1 à 7 inclusivement.
La partie 2 porte sur les items no 8 et 9.
| Avec WebExpert, il est très important de convertir les caractères spéciaux à la fin de la mise en page HTML. De cette façon, vous vous assurez que ces caractères pourront êtres lus par tous les navigateurs.Vous utilisez la commande Éditer, Conversion des caractères pour les convertir. |
12. Autres guides HTML
Pour parfaire votre connaissance de l'écriture des pages HTML vous pouvez consulter les adresses suivantes :
|
|