HTLM : Hypertext Markup Langage

Le langage de balisage hypertexte , ou HTLM pour Hypertext Markup Langage sert évidement à la construction des pages Web. Il permet d'insérer du texte, des images , des applets java ou tout contenu actifs, ainsi que des liens hypertextes. Contrairement aux langages de programmation classique, le HTLM est interprété pendant le chargement de la page Web. Formatée en code HTLM, la page "voyage" par internet pour parvenir jusqu'au poste de l'utilsateur qui a commandé son affichage. C'est le navigateur qui interprète les commandes HTLM pour formater la page selon les conventions en vigueur.

La normalisation du HTLM : elle est géré par les acteurs du secteur informatique, le W3C qui veut dire Word Wide Web Consortium , ils ont pour mission d'élaborer des normes relatives au Web : langages et navigateurs.
Bien entendu, il existe aucune obligation à suivre les directives et consignes du W3C , mais leur respect aide à garantir un affichage uniforme des sites Web dans tout les types de navigateur. Si vous voulez découvrir les activités du W3C , cliquez sur le lien www.w3.org



Les mots entre les chevrons < > sont des références de balisages (tags). Ces références ou plus communément balises jouent un rôle capital dans le programme HTLM. La plupart des commandes se composent d'une balise de début et d'une balise de fin ( la barre / marque toujours la balise de fin). Un morceau de texte hors chevron est une constante. Les balises déterminent l'emplacement des chiffres, la mise en forme du texte, les liens vers d'autres sites Web et donnent des informations relatives à la construction de tableaux permettant d'ordonnées l'affichage des données dans la page. Par exemple , .<.TITLE.>. marque le début d'un titre et .<./TITLE.>. marque la fin. (dans toutes les explixations les (.) devant et aprés le chevron (<) doivent être enlever).

Certaines balises sont des codes de formatage définissant la couleur du texte et la taille de la police ect...à l'attention du navigateur. D'autres balises définissent les cellules d'un tableau invisible qui facilite pour le programmeur la mise en places des éléments de la page .

Les balises ne contiennent pas de texte formaté : elles fournissent des instructions de mise en forme déstinées au navigateur web. Lorsque par exemple le navigateur lit une balise .<.center.>., il centre dans la page le texte placé entre cette balise et la prochaine balise .<./center.>..
Par exemple: .<.center.>. Balise introduction .<./center.>.. Le texte " balise introductions sera centré sur votre page .
Pour documenter le code HTLM on insére les commentaires ainsi .<.!-- --.>. ( les point (.) rouge sont à enlever.)

Par exemple : .<.!-- ceci est un commentaire HTLM --.>.

A titre d'exemple nous allons créer une page web simple, comme cela vous aurez un apercu de ce que l'on peut faire :



Pour un compte rendu de ce bout de code Cliquer ici



Toutes les pages Web se construisent sur un jeu minimal de balises HTLM. Je vais essayer de présenter ces commandes fondamentales et indispensables à l'affichage de la page Web.

Format standard de toutes les pages Web en HTLM:



Explication du format La première balise de toute les pages web doit être .<.HTLM.>. elle marque le début du code, en toute logique la dernière de la page web sera .<./HTLM.>..
La section d'en-tête , délimitée entre .<.HEAD.>. et .<./HEAD.>. contient le texte qui apparait dans la barre de titre du navigateur, siganlé par les balises .<.TITLE.>. et .<./TITLE.>., ainsi que d'autres données préliminaires à ne pas afficher. Il s'agit de métadonnées que les programmeurs insérent aux pages pour faciliter leur repérage par les moteurs de recherche.

Le corps de la page , est délimité par les balises .<.BODY.>. et .<./BODY.>., elle comprend l'essentiel du contenu de la page. Ce sont les données placées ici qui intéressent l'utilisateur.



Pour faire apparaitre du texte dans la fenêtre du navigateur , il suffit de taper dans le fichier HTLM. Le corps de la page Web pourrait comprendre des lignes de texte:

.<.BODY.>.
Ce texte s'affichera dans le navigateur .
.<./BODY.>

Vous pouvez ou non le texte de guillements. Les navigateurs ne formatent pas le texte automatiquement, donc même si vous tapez ce texte sur plusieurs lignes il n'apparaitra que sur une ligne dans le navigateur .
Pour donc ajouter un retour à la ligne on insère la balise .<.BR.>., elle s'emploie seule.

.<.BODY.>.
Ce texte sera visible .<.BR.>.
dans le navigateur web .<.BR.>.
.<./BODY.>.

Il faut retenir que la présence de la balise .<.BR.>. divise le texte en 2 lignes.

Par défault, le texte est justifié ( aligné des deux cotés) dans la fenêtre du navigateur. On peut centrer le texte ou l'aligner en plaçant ces paires de balises:

.<.P ALIGN=CENTER.>. et .<./P.>.
.<.P ALIGN=RIGHT.>. et .<./P.>.
.<.P ALIGN=LEFT.>. et .<./P.>.

ALIGN=VALUE est un attribut. La balise .<.P.>. a besoin d'information supplémentaire pour d'écrire l'alignement, c'est le rôle de l'attribut ALIGN.
On peut enrichir le texte d'italique de gras et de soulignement:

.<.U.>. et .<./U>. balise pour le souligné ( le texte à l'intérieur de ces balises sera souligné).
.<.I.>. et .<./I>. balise pour les mots en italiques ( le texet à l'intérieur de ces balises sera en italique ).
.<.B.>. et .<./B>. balise pour les mots en gras ( le texte à l'intérieur de ces balises sera en gras ).

La balise .<.H.>. détermine la taille de police des titres dans le texte. .<.H1.>. produit les plus gros titres et .<.H6.>. les plus petits.

En partant du même principe on peut aussi définir la taille d'affichage du texte , pour celà on utilise les balises .<.FONT SIZE .>. et fin de balise .<./FONT.>. . Les tailles disponibles vont de 1 ( la plus petite à l'inverse de la balise H ) à 7 taille maximale.



En combinaison avec l'attribut SRC= , la balise .<.IMG.>. sert à insérer une image Dans la page Web.

Sous sa forme la plus imple , la commande d'insertion d'image se présente sous cette forme : .<.IMG SRC="images/maphoto.jpg".>.
L'image apparait à l'emplacement de la balise .<.IMG.>. dans le code HTLM. On se limite généralement à un format graphique connu par l amajorité des navigateurs. Soit GIF, JPEG, PNG ( ces trois formats sont disponibles à partir de la majorité des logiciels graphiques.)

Il est aussi simple d'afficher une bordure autour de l'image grâce à la balise .<.BORDER.>. qui est une extension de la balise .<.IMG.>., on peut aussi centrer l'image ou l'aligner sur le bord gauche ou droit de l'écran par l'intermédiaire de l'attribut ALIGN=.

.<.IMG SRC="/images/photo.gif" ALIGN=LEFT BORDER=10 ALT="Mes photos".>.

Explication : L'image provient d'un dossier nommé images, dans lequel sont rassemblées toutes les images du site. L'attribut ALIGN commande au navigateur d'aligner l'image sur le bord gauche de la fenêtre. L'attribut BORDER=10 spécifie l'ajout d'une bordure de 10 pixels de large autour de l'image.
L'attribut ALT= sert à faire surgir un texte lorsque l'utilisateur pointe sur l'image.



La balise d'ancrage représenté par .<.A.>. et .<./A.>. définit un hypertexte vers un autre endroit de la page ou vers une page. en général, le navigateur représente le lien par du texte souligné à l'emplacement de la balise .<.A.>.

Les lignes de code suivantes conduisent l'utilisteur vers le site web de son choix par exemple www.microsoft.com s'il choisit de cliquer sur le lien :

.<.A HREF=" www.microsoft.com"> Cliquez pour acceder au contenu..<./A>.

Explication : tout ce qui est contenu entre les balises .<.A> et .<./A> sert de lien et l'attribut HREF définit la liaison hypertexte. Les mots "Cliquez pour acceder au contenu" seront soulignés à l'écran et l'internaute peut cliquer n'importe ou dans cette portion de texte pour activer le lien.

Il est possible de définir en lien une image ou plusieurs lignes de texte. Le navigateur se dirige vers l'adresse de destination lorsque l'utilisateur clique sur le lien . Ensuite, pour revenir à la page d'origine du lien, il suffit de cliquez sur le bouton précédent.

Voici un code HTLM qui permet l'emploi d'une image en lien hypertexte:

.<.A HREF=" http://blablabala.com".>.<.IMG SRC="images/photo.gif".>.<./A>

cliquer sur l'image et le navigateur ouvre à l'url choisit.

[/center]

et voilà

Merci

Sujet clos