Brico Micro

LANGAGE HTML

 

Création d'une page de texte web :

Le code source peut être saisi sur un document "Bloc-notes". Ce document sera à enregistrer en fichier .htm (mapageweb.htm) par exemple.
Le code source sera ensuite accessible par clic droit sur la page.

Le code source doit être situé entre les balises <HTML> et </HTML>.

<HTML>
</HTML>

Les informations non affichées sont entre les balises <HEAD> et </HEAD>.

<HTML>
<HEAD>
<TITLE>Page Web en HTML</TITLE>
</HEAD>
</HTML>

Le texte visible est entre les balises <BODY> et </BODY>.

<HTML>
<HEAD>
<TITLE>Page Web en HTML</TITLE>
</HEAD>
<BODY bgcolor="beige">
<H1 align="center"><FONT color="blue">PAGE TEXTE WEB EN HTML</FONT></H1>
<P><FONT Size="4">Le code source doit être situé entre les balises &ltHTML&gt et &lt/HTML&gt.</FONT>
<P><FONT Size="4">Les informations non affichées sont entre les balises &ltHEAD&gt et &lt/HEAD&gt.</FONT>
<P><HTML>
<P><HEAD>
<BR><TITLE>Page Web en HTML</TITLE>
<BR></HEAD>
<BR></HTML>
<P><FONT Size="4">Le texte visible est entre les balises &ltBODY&gt et &lt/BODY&gt.</FONT>
etc...etc...
</BODY>
</HTML>

Principales balises :

<HTML>...</HTML> : Code source.
<HEAD>...</HEAD> : Informations non affichées.
<BODY>...</BODY> : Texte visible.
<TITLE>...</TITLE> : Titre de la page. Il s'agit du titre pour la recherche sur le web et non du titre apparant de la page. Il peut néanmoins être identique. Il se matérialise dans la barre de titre du navigateur.
<H1>...</H1> : Titre. Texte en caractère gras en 6 tailles différentes. De H1 à H6, H1 étant la plus grande.
<P>...</P> : Paragraphe. Texte avec saut de ligne. Texte en caractère normal en 7 tailles différentes. Par défaut la taille est de 3, 7 étant la plus grande.
<BR>...</BR> : Texte. Sans saut de ligne. Texte en caractère normal en 7 tailles différentes. Par défaut la taille est de 3, 7 étant la plus grande. La balise de fin </BR> est facultative.

Autres balises et éléments de lignes :

<B>...</B> ou <STRONG>...</STRONG> : Texte en caractère gras. Exemple de texte.
<I>...</I> ou <EM>...</EM> : Texte en caractère italique. Exemple de texte.
<U>...</U> : Texte souligné. Exemple de texte.
<S>...</S> : Texte barré. Exemple de texte.
<FONT face="nom de la police">...</FONT> : Autre police que celle par défaut. Exemple de texte avec la police Arial.
<FONT size="taille de police">...</FONT> : Autre taille de police que celle par défaut. Exemple de texte avec la police Arial de taille 2.
<FONT color="nom de couleur">...</FONT> : Couleur du texte. Exemple de texte avec la police Arial de taille 2 et de couleur purple. Le code HTLM de cette combinaison d'éléments est le suivant :

<BR><FONT face="Arial" size="2" color="purple">Exemple de texte avec la police Arial de taille 2 et de couleur purple. Le code HTLM de cette combinaison d'éléments est le suivant :</FONT>

Exemple de texte avec la police Arial de taille 2 de couleur purple en caractères gras italiques. Le code HTLM de cette combinaison d'éléments est le suivant :

<P><FONT face="Arial" size="2" color="purple"><B><I>Exemple de texte avec la police Arial de taille 2 de couleur purple en caractères gras italiques. Le code HTLM de cette combinaison d'éléments est le suivant :</I></B></FONT>

Principales couleurs utilisées avec <FONT color="nom couleur">...texte...</FONT> :

aqua - aquamarine - beige (beige) - black - blue - blueviolet - brown - cyan - green - blueyellow - hotpink - indianred - maroon - mediumblue - mediumpurple - mediumturquoise - mediumvioletred - midnightblue - navy - olive - pink - plum - powderblue - purple - red - royalblue - salmon - sandybrown - turquoise - violet - white (white) - yellow (yellow) -
 
Couleur de fond :
Ajouter bgcolor à la balise <BODY> : <BODY bgcolor="nom couleur">

Caractères spéciaux : Le code d'un caractère spécial est toujours placé entre une espaluette et un point virgule ( &code; ).

&euro;      €      euro
&pound;      £      livre
&yen;      ¥      yen
&nbsp;             espace insécable
&lt;      <      inférieur
&gt;      >      supérieur
&plusmn;      ±      plus ou moins
&tilde;      ˜      ~
&cent;      ¢      %
&copy;      ©      copyright
&trade;      ™      trade mark
&amp;      &      espaluette
&deg;      °      degré
&quot;      "      tréma
amp       &ampdeg;      amp placé entre & et le code permet d'afficher à l'écran le code.

Mise en forme :

Incorporer l'attribut align="valeur" à la balise de début de la ligne pour aligner le texte et le disposer par rapport à la page.

<H1 align="center"> : Pour centrer le texte.
<P align="justify"> : Pour répartir le texte sur la largeur de la page.
<BR align="left"> : Pour aligner le texte à gauche.
<BR align="right"> : Pour aligner le texte à droite.

<BLOCKQUOTE>.......</BLOCKQUOTE> : provoque un retrait gauche et droit comme ci-dessus. Le code HTML est le suivant:

<BLOCKQUOTE><P><B><H1 align="center"> :</B> Pour centrer le texte.
<BR><B><P align="justify"> :</B> Pour répartir le texte sur la largeur de la page.
<BR><B><BR align="left"> :</B> Pour aligner le texte à gauche.
<BR><B><BR align="right"> :</B> Pour aligner le texte à droite.</BLOCKQUOTE>

<CENTER>.......</CENTER> : permet de centrer plusieurs éléments à la foi d'une page. Dans l'exemple ci-dessus, il suffit de remplacer BLOCKQUOTE>...</BLOCKQUOTE> par <CENTER>...</CENTER>

<UL>.......</UL> : Délimitent une liste. A la balise d'ouverture ajouter les élément suivant :

Le code HTLM utilisé pour cette combinaison est le suivant :

<UL type="circle">
<LI><b>disc : </b>pour une puce en forme de cercle plein (valeur par défaut).
<LI><b>circle : </b>pour une puce en forme de cercle vide.
<LI><b>square : </b>pour une puce en forme de rectangle plein.
</UL>

<OL>.......</OL> : Délimitent une liste ordonnée. A la balise d'ouverture ajouter les élément suivant :

  1. 1 : pour une liste en chiffres arabes (valeur par défaut).
  2. i : pour une liste en chiffres romains minuscules.
  3. l : pour une liste en chiffres romains majuscules.
  4. a : pour une liste en lettres minuscules.
  5. A : pour une liste en lettres majuscules.

Le code HTLM utilisé pour cette combinaison est le suivant :

<OL type="a">
<LI><b>1 : </B>pour une liste en chiffres arabes (valeur par défaut).
<LI><b>i : </B>pour une liste en chiffres romains minuscules.
<LI><b>l : </B>pour une liste en chiffres romains majuscules.
<LI><b>a : </B>pour une liste en lettres minuscules.
<LI><b>A : </B>pour une liste en lettres majuscules.
</OL>

<OL type="a" start="5">.......</OL> : L'ajout de l'élément start="valeur" permet de faire débuter la liste au numéro ou à la lettre de son choix. Dans l'exemple, la liste débutera à la lettre e.

Séparateurs :
Pour placer un séparateur horizontal comme ci dessous, utiliser la balise <HR>.

Ce séparateur peut être modifié :
En largeur avec l'élément width : <HR width="40%">

En épaisseur avec l'élément size : <HR width="40%" size="3">

En alignement avec l'élément align adjoint de left, right ou center qui est la valeur par défaut : <HR width="40%" size="3" align="left">

En couleur avec l'élément color : <HR width="40%" size="3" align="left" color="purple">

Haut de page