i) Qu'est ce que le langage HTML ?
HTML (HyperText Markup Language) est un format permettant de définir les éléments variés d'une page WEB qu'on observe avec Internet Explorer ou tout autre Browser : Netscape, Opéra ...
HTML définit :
Les pages WEB sont toujours définies dans ce langage, ainsi votre Browser traduit le code source HTML, cherche les éléments externes (images, sons, etc) et reconstitue une page complète qu'il présente dans une fenêtre sur votre écran.
ii) Le but.
Le but de ce chapitre n'est pas d'apprendre à utiliser un programme créant des pages Web automatiquement mais plutôt de découvrir le langage HTML. Vous apprendrez à créer des pages en tapant du code HTML dans un traitement de texte basique (par exemple : le bloc-note de windows).
A la fin de ce chapitre, vous devriez :
i.Afficher le code.
Dans ce cours, je me place dans le cas le plus probable d'un utilisateur d'internet explorer. Ce browser est de loin le plus répandu car il est installé en même temps que Windows.
Si vous disposez d'un autre système d'exploitation ( MAC OS,Linux,... )ou un autre browser (Netscape, Opéra, ...) , la procédure de visualisation du code HTML d'une page web est souvent peu différente.
Par un clic droit sur du texte présent dans une page HTML classique ( ce cours par exemple ), vous faîtes apparaître un menu contextuel (ci-dessous) proposant Afficher la source
Attention,si vous effectuez un clic droit sur une image, vous n'aurez pas ce menu contextuel. Pire, certains auteurs de pages WEB bloquent l'usage de ce clic droit, il devient alors difficile de lire le code.
En général, vous pourrez lire le code HTML qui se cache derrière une page Web et vous découvrirez la mise en forme de cette page. Si vous demandiez l'affichage du code source de cette page de cours, vous verriez apparaître un code ressemblant à celui-ci :
Bien que d'apparence relativement complexe, les bases de ce langage sont assez simples à apprendre. Nous allons nous familiariser avec les notions élémentaires nous permettant de réaliser une page simple puis nous nous lancerons dans la réalisation d'un petit site.
ii.Un code simple.
Voici le code complet d'une page élémentaire :
Il permet de créer cette modeste page :
Plusieurs remarques peuvent être faites dès à présent :
|
iii.Comment créer cette page ?.
Lancer le programme Bloc-note de Windows par Démarrer/Programmes/Accessoires/Bloc-notes.
Puis taper le code présenté ci-dessus. Attention n'ajoutez pas d'espaces autour des mots-clés entre les signes inférieurs et supérieurs car le code serait alors mal interprété par votre navigateur Web et la page serait pas affichée correctement.
C'est terminé ? Alors enregistrez votre travail dans un répertoire de votre choix ( le répertoire bureau de windows est parfait ) en choississant l'extension .htm. Il faudra pour cela, choisir dans Type "tous les fichiers" dans la fenêtre enregistrement.
Si vous oubliez cette action, le fichier portera l'extension .txt et sera reconnu comme un texte par le navigateur au lieu d'être interprété comme du code HTML fabriquant un page.
Une fois, l'enregistrement au format .htm réussi, ouvrez l'explorateur de windows ( il suffit de maintenir la touche "fenêtre gauche" enfoncée et d'appuyer sur E ) , retrouver le répertoire dans lequel figure votre fichier HTM et effectuez un double clic sur son nom. Internet Explorer s'ouvre alors en présentant le résultat affiché au ii.
|
|
< h t m l > < h e a d > < t i t l e >ici on place le titre< / t i t l e > < / h e a d > < b o d y > ici c'est le corps de la page < / b o d y > < / h t m l > |
Dans la suite du cours, vous allez découvrir comment organiser le CORPS DE LA PAGE : le texte, les images, les tableaux, les mises en pages, les liens vers d'autres pages,...
i. Sauts de lignes.
Le texte est entré dans le bloc-notes de Windows sans se soucier des "passages à la ligne" et des "sauts de ligne". Vous placez ces mises en forme où bon vous semble en utilisant les balises br et p entre les signes inférieurs et supérieurs.
Suivant la taille de la fenêtre de la personne qui visionnera votre page, l'affichage sera différent. Par exemple, la même page du mon cours vue avec des fenêtre de tailles différentes :
et
Vous pouvez center le texte sur la ligne en employant la paire :center et /center.
ii. Les attributs.
Il est possible d'écrire :
La taille des polices peut être définie par les mots-clés : H1 H2 à H6 de la façon suivante : < H1 >votre texte< / H1 >
Cela semble pratique mais le problème est le suivant : lorsque la police de caractère n'est pas présente dans l'ordinateur où s'affiche la page, elle s'affiche avec une police "proche". L'effet n'est pas garanti !
iii. La couleur.
Le texte peut prendre différentes couleurs, il suffit de placer les mots clés < f o n t c o l o r = " numéro " > et < / f o n t > de part et d'autre du texte à colorer. Le numéro de la couleur est le code rouge/vert/bleu précédé d'un #, chaque dose de couleur étant indiquée en hexadécimal !! Simple, n'est ce pas !
La couleur utilisée pour le fond de ce document a été déclarée par un "#F7E073". Heureusement, certains logiciels de dessin permettent de choisir une couleur dans un vaste nuancier et donnent le nombre hexadécimal correspondant, qu'il suffit alors de recopier dans le code HTML.
Certaines couleurs sont prédéfinies en HTML, se qui évite d'avoir recours à ces nombres barbares :
|
Pour écrire en rouge, il suffit d'écrire : < font color = red > ce texte sera en rouge < / font > |
Le fond de la page web peut lui aussi prendre une couleur. Ce cours a la couleur de fond portant le numéro : #F7E073 comme vu prédécemment. La déclaration de la couleur de fond se fait une seule fois, dans le mot clé BODY, on écrit : < BODY BGCOLOR =numéro ou nom > ,la fin du corps de la page est, lui, inchangé < / BODY >
et 
pour voir les modifications sur la page WEB.