Formation les balises de base HTML

Formation les balises de base HTML, tutoriel & guide de travaux pratiques en pdf.

Les balises de base HTML

Les commandes obligatoires

Chaque document HTML doit posséder quelques commandes obligatoires pour que tous les navigateurs puissent interpréter correctement votre page.

Le document doit commencer par <HTML> et finir par </HTML>, tout simplement pour signaler que le document est un document HTML et que les instructions comprises entre ces deux balises sont des instructions HTML.

Le document se découpe ensuite en 2 parties :

<HEAD> pour indiquer que c’est l’en-tête de la page suivi de </HEAD>
<BODY> qui comportera le corps de votre page, donc l’essentiel de votre texte, suivi de </BODY>

Entre les deux balises d’ouverture et de fermeture de l’en-tête, nous allons trouver l’instruction <TITLE> et </TITLE>, qui sera le titre de votre page (ce titre se retrouvera dans la barre supérieure de votre Navigateur, ainsi que dans les menus de signets).

Récapitulons, votre document doit nécessairement comporter ces balises :
<HTML> Début de page
<HEAD> Début de l’en-tête
<TITLE> Inserez_votre_titre_ici </TITLE>
</HEAD> Fin de l’en-tête
<BODY> Début du corps
Le_texte_de_votre_page_ici
</BODY> Fin du corps
</HTML> Fin de page

Les retours à la ligne

Il est important de savoir que les retours à la ligne avec la touche « ENTREE ou RETURN » ne sont pas pris en compte par les navigateurs. Pour marquer un retour à la ligne il faut utiliser la balise qui signifie « break » c’est à dire retour à la ligne. Pour marquer une fin de paragraphe il faut utiliser qui signifie « Paragraph ».
Notez que ces instructions ne nécessitent pas une balise d’ouverture et une balise de fermeture. Il est vrai que la syntaxe rigoureuse exigerait d’écrire le texte suivant :

Texte_de_la_ligne_1

Texte_de_la_ligne_2

Tout cela n’est pas nécessaire, les navigateurs savent interpréter les documents n’ayant pas les balise de fermeture et . Une raison simple à cela, c’est un début de ligne ou de paragraphe marque obligatoirement la fin de la ligne précédente ou du paragraphe précédent.
Par convention, on va marquer la fin d’une ligne par et une fin de paragraphe alors que ce sont en fait des balises d’ouverture d’instruction et non de fermeture.

La balise possède l’attribut ALIGN qui sert à aligner le texte et prend 4 valeurs :

LEFT : Aligne le texte sur la marge de gauche.
RIGHT : Aligne le texte sur la marge de droite.
CENTER : Centre le texte entre les marges.
JUSTIFY : Justifie le texte.

Note : l’attribut NOWRAP permet de ne pas effectuer de retour à la ligne.
Les titres
Pour créer des titres de différentes tailles, nous allons utiliser l’instruction <Hx> et </Hx> avec pour « x » des valeurs allant de 1 (le plus grand) à 6 (le plus petit).
Les effets
Le texte brut c’est bien, mais si on rajoutait du gras, de l’italique, etc…
Voici les instructions:

met le texte en gras
met le texte en gros idem que gras
met le texte en italique
<CENTER>

centre le texte au milieu de l’écran

</CENTER>

met le texte en emphase idem que italique mais met le texte en rouge sur certains navigateurs
souligne le texte à éviter car cela ressemble à un lien hypertexte.
<BLINK> Fait clignoter le texte </BLINK> ne fonctionne pas avec tous les navigateurs, et beaucoup de gens détestent quand ça clignote.
<BIG> grossit le texte </BIG> ne fonctionne pas avec tous les navigateurs
rapetisse le texte ne fonctionne que sur Netscape et Internet Explorer
<STRIKE> barre le texte </STRIKE>
<CODE> sert pour les listings de programmes </CODE> permet d’utiliser la police de caractère non proportionnelle « courrier »
<BLOCKQUOTE>

ceci est une citation qui apparaît en retrait par rapport au texte

</BLOCKQUOTE>

Texte préformaté. La même chose que <CODE> mais avec les changements de lignes en plus. Peut servir pour présenter un tableau correctement aligné.<PRE>

· Budget :· Revenu brut 750 000,00 F· Cout de revient 132 825,00 F· Benefice brut 617 175,00 F

</PRE>

<ADDRESS>

pour donner son adresse
</ADDRESS>

Pour mettre le texte ^{en exposant}
Pour mettre le texte _{en indice}

<HR> barre de séparation

Télécharger le cours complet

Documents pour tous

Formation les balises de base HTML