Le langage HTML

1. AVANT PROPOS

Pour simplifier la compréhension de cette rubrique je vais adopter un code d'écriture :

-tout le texte d'éxplication sera écrit normalement
-les balises du langage HTML seront en gras (exemple : <balise></fin de balise>)
-ce qui sera entre les balises sera en italique
-le résultat sera en vert

Voici donc un petit exemple de ce que cela va donner :
pour mettre un titre dans la page web on utilise la balise <title> avec la fin de balise </title>.
Par exemple, <title>SUPER LE SITE</title> donnera
SUPER LE SITE dans la barre de titre de la fenêtre de l'explorateur.

2. HISTOIRE D'INTERNET

Internet a une longue histoire : tout à commencé en 1957.
En effet en 1957 l'ARPA,une agence américaine pour les projets de recherche avancée,est crée (cette agence n'existe plus aujourd'hui pour information pour les paranos).

Dans les années 60, l'ARPA propose l'ARPANET, un système permettant de relier plusieurs ordinateurs. Il y'a deux objectifs à ce système : augmenter la puissance de calcul et résister à une attaque nucléaire, les informations voyageants librement d'un ordinateur à un autre il sera plus difficile de supprimer des données importantes. Il ne faut pas oublier qu'a cette époque le monde est en pleine guerre froide.

Dans les années 70, INTERNET, qui élargit ARPANET, est adopté et dévellopé dans différentes universités (les universités font toujours des trucs supers dans la recherche et sont les précurseurs d'internet)
Pendant ce temps l'ARPA continue ses recherches dans les protocoles : ils permettent de faire communiquer deux ordinateurs différents ensemble selon des règles pré-établies qui vont faire qu'ils vont se comprendre.

Le premier virus apparaît alors en 1988, créé par des universitaires !!!

En 1991, GOPHER est né ainsi que le SGML(dévellopé avec le World Wide Web) : GOPHER est le premier navigateur internet et SGML est l'ancêtre de l'HTML.

En 1994, MOSAIC, l'ancêtre de Nestcape, est à son tour crée : il intègre de nouvelles fonctionalités.
Le langage HTML suit et le premier mail date des années 90 environ.

3. HISTOIRE DE L'HTML

Le langage HTML a été mis au point par Tim Berners-Lee, chercheur au CERN à Genève, à partir de 1989. Ce n'est cependant qu'à partir de 1993 que l'on considère l'état du HTML suffisamment avancé pour parler de langage (HTML est alors baptisée symboliquement HTML 1.0).

Il y'a ensuite eu les versions :
.3.2 - 14 janvier 1997
.4.0 - septembre 1997
.4.01 - 24 décembre 1999

Le langage HTML (qui signifie Hypertext Mark-up Langage, soit dit en passant) n'a donc pas été créé par un informaticien proprement dit mais plutôt par un bibliothécaire.
C'est pourquoi il est organisé autour de la structure de l'affichage : on dit où l'on veut placer son texte, si on veut l'afficher en gras, en italique, etc.

De plus les informations que le créateur de page web fournit à sa page sont INTERPRETEES par le navigateur : même si ce doit être très rare, Mozilla Firefox et Internet Explorer n'afficheront pas de la même façon certaines informations.

4. LES BASES DU LANGAGE HTML

Le langage HTML est un langage brut, c'est à dire qu'il suffit d'écrire quelques lignes que le navigateur va interpréter pour afficher un réultat. Le langage brut est très simple à crée : il suffit d'avoir le bloc-notes sous windows ou Edit sous Linux (ou Nedit). Il ne faut pas utiliser word par exemple car c'est un logiciel de texte enrichi : il va enregistrer des informations sur la façon dont vous écrivez.

Ensuite il vous faut un navigateur internet pour pouvoir afficher votre page web ainsi crée (exemple : Mozilla Firefox, Internet Explorer, Netscape).

Lorsque vous crééz une page avec le bloc notes par exemple il faut bien penser à l'enregistrer au format HTML ou HTM : par exemple mapageweb.html .
Ensuite vous pourrez l'ouvrir avec le navigateur.

Pour modifier votre code, inutile de changer l'extension : il vous suffit de faire un clique droit sur la page et de cliquer sur "afficher la source", ou alors il est possible de passer par le menu "affichage".
(Sous Mozilla, vous pouvez même faire CTRL+U).

Mise à jour : il n'est pas possible de modifier le code source avec Mozilla.
Utilisez donc Internet Explorer ou le bloc-notes

4.1 Les balises

Les balises sont à la base du langage HTML : ce sont elles qui fournissent de l'information sur l'information ("écrire en gras le titre et le mettre en haut à gauche" est de l'information sur l'information).

Les balises sont donc nécéssaires pour pouvoir créer une page web.
Elles sont très nombreuses (plus de 400) mais il est inutile de toutes les apprendre : 100 balises suffisent pour un bon site.

Pour cela elles commençent par les carcatères < et > et se terminent par </ et >.
<title></title> est par exemple la balise qui permet de mettre un titre.
Cependant certaines balises n'ont pas besoin de balise de fin : <HR> créé une ligne et n'a pas besoin de </HR>.

Enfin les balises peuvent être écrites en majuscules ou en minuscule : cela n'a de l'importance que pour celui qui crée sa page web, pour qu'il s'y retrouve.

4.2 Les balises de base

Pour commençer une page web, il faut tout d'abord dire ce que l'on veut faire : créer une page web.

Pour cela il existe une balise : <HTML>page web</HTML> .
Cette balise est nécessaire à toute page web. La balise de début se plaçe au début du fichier texte et la balise de fin se plaçe à la fin du fichier texte.

Ensuite, une page web contient un en-tête : il y'a donc une seconde balise <HEAD> terminée par </HEAD> qui contient par exemple le titre de la page.

Pour créer un titre, la balise <TITLE>titre de la page</TITLE> existe également. Cette balise est "importante" car ce qu'elle contient sera le texte plaçé dans le titre d'un favori par défaut.
Il faut donc éviter les titres comme "Bienvenue sur ma page web" et privilégier les titres comme "Le site de Squalldjidane" !
De plus le titre doit être assez court ou il sera tronqué lors de son affichage (par exemple le titre "Bienvenue sur le site de Squal..." est tronqué.

Maintenant que nous avons vu le titre de la page, attaquons nous au corps de la page : il existe alors une balise <BODY>corps de la page</BODY>.
Tout ce qui sera affiché sur la page est à placé dans cette balise !

Voici maintenant un exemple simple de code source de page web:

<HTML>
<HEAD>

<TITLE> Le site de Squalldjidane </TITLE>

</HEAD>

<BODY>

Bienvenue sur le site de Squalldjidane !!!

</BODY>

</HTML>

Cela donne le résultat suivant : Bienvenue sur le site de Squalldjidane !!! (sans oublier le titre de la page).

Enfin, voici quelques conseils sur la réalisation d'une page web :
-pensez toujours à refermer une balise par sa balise de fin dès que vous l'avez ouverte pour éviter de l'oublier ensuite et de générer des erreurs
-indentez en pressant la touche TAB (en dessous de ² et à gauche de A sur le clavier), vous lirez mieux ce que vous écrivez. Je ne l'ai pas fait ici car ça ne marche pas
-réfléchissez sur papier avant de commencer la réalisation, cela vous évitera des erreurs, des résultats innatendus, etc

4.3 Le corps de la page

Nous allons maintenant nous attaquer au texte plaçé entre les balises <BODY> et </BODY>, c'est à dire au corps de la page.

Tout d'abord, pour créer un nouveau paragraphe il faut utiliser la balise <P> avec sa fin de balise </P>.
Il est important d'utiliser cette balise car le navigateur n'interprète pas les espaces et les retours à la ligne : les deux codes suivants sont identiques (pour ne pas utiliser trop d'espace j'ai enlevé les autres balises, mais ne le faites pas ) :

<BODY>

Bienvenue
sur
le
site
de
Squalldjidane !!!

</BODY>

----------------------------*************--------------------

<BODY>

Bienvenue sur le site de Squalldjidane !!!

</BODY>

----------------------------*************--------------------

Ensuite, il existe une balise spéciale pour revenir à la ligne : la balise <BR> qui n'a pas de fin de balise.
Cette balise est utile pour la même raison que la balise qui créée un nouveau paragraphe.
de même la balise <HR> créée une ligne sur toute la longueur de la page : elle n'a donc pas besoind de se refermer.

Maintenant que vous savez écrire dans une page web, comment faire pour changer la taille des caractères ?
Il existe tout simplement la balise <Hx></Hx> avec x un nombre entier compris entre 1 et 6 qui représente la taille du texte (plus x est grand et plus le texte est petit ).

Et comment faire pour mettre le titre en gras, en italique et souligné ?
Les balises <B></B> pour gras, <I></I> pour italique et <U></U> pour souligné sont là pour vous aider !!!

Il existe également la balise <STRONG></STRONG> qui rend un texte important mais sur la plupart des navigateurs le texte apparaît en gras.

Enfin voici un point presque inutile : les accents. Il existe pour créer des accents un mot spécial : &<lettre à accentuer><forme de l'accent>.
Par exemple, "&ecirc" donne "ê", "&agrave" donne "à", etc.
cela est inutile aujourd'hui car les navigateurs récents reconnaissent les caractères accentués, qui font parti du code ASCII étendu.
Et cette mise en forme ne s'avère nécessaire que lorsque votre site doit être vu par un japonais, un tchèque, dont le navigateur ne traitera pas correctement des accents français.
Donc ne vous en faites pas, il est inutile d'utiliser cette fonction si vous ne voulez faire qu'un site perso.

4.4 Les attributs

Voici une section importante qui va vous permettre de modifier les couleurs de la page et du texte ainsi que de mettre des liens, des images, etc ( )

Les attributs de balises sont des fonctions qui se plaçent à l'intérieur d'une balise et qui en modifient un peu la fonction : par exemple si j'écrit
<H1>Le titre</H1>, Le titre sera affiché avec la taille H1 et sera plaçé au centre de la page.

Tout d'abord voici quelques attributs concernant la mise en forme du texte :
align="center-left-right"
size="x"
font="police d'écriture"
-Le premier attribut aligne le texte dans la page au centre, à gauche ou à droite.
-Le second attribut change la taille du texte d'une façon plus précise que la balise <Hx>.
-Enfin le dernier spécifie la police d'écriture :arial, times new roman, etc.
Faites attention si vous changez la police car le visiteur de votre site n'a peut-être pas les mêmes polices que vous sur son ordi : il risque alors de voir des caractères bizarres. Ce que vous pouvez faire dans ce cas est par exemple un lien vers le téléchargement de votre police d'écriture pour que chaque visiteur puisse voir votre site.

Ensuite voici l'attribut permettant de changer la couleur sur votre page :
bgcolor="couleur"
Et voici la balise
-Le premier change la couleur de la police tandis que le deuxième change la couleur de l'arrière plan. Associées à la balise <BODY>, ces attributs changeront toutes les couleurs des polices et la couleur de l'arrière plan par celle précisée.
-Couleur est une couleur (vous allez dire c'est idiot de marquer cela mais attendez la suite ) littérale ou héxadécimale !
Une couleur littérale est par exemple "red", "blue", "darkblue", "black", ...
Une couleur héxadécimale est une couleur exprimée en héxadécimale, c'est à dire en base 16 pour les matheux : les chiffres ne sont pas 0 1 2 3 4 5 6 7 8 9 mais 0 1 2 3 4 5 6 7 8 9 A B C D E F .
De plus la couleur héxadécimale possède un # devant.
Enfin les couleurs sont exprimées en RGB (red, green, blue, soit rouge, vert, bleu) et sur 6 chiffres. Par exemple #000000 dit qu'il y'a 0 rouge, 0 vert et 0 bleu, ce qui donne du noir. A l'inverse #FFFFFF dit qu'il y'a 255 rouge, bleu et vert ce qui donne du blanc.
Dernière chose : n'oubliez pas les guillemets !

Voici quelques couleurs utiles :
en héxadécimal ---- en littéral ---- couleur
#FF0000 --------------- red --------- rouge
#00FF00 -------------- green -------- vert
#0000FF --------------- blue --------- bleu
#00FFFF ------------- lightblue ----- bleu ciel
#3300FF ------------ darkblue ---- bleu foncé
Essayez vos propes associations !

Maintenant nous allons voir comment insérer des images ou faire des liens :

<IMG SRC="mon_image.gif> plaçe l'image mon_image.gif dans la page. Cette balise peut être intéressante avec l'attribut align="...".
Il faut également savoir quelque chose d'important à propos des images pour améliorer leur compression et donc la vitesse de chargement de votre page :
-les images portants l'extension .JPG sont déstinées à des photos.
-les images portants l'extension .GIF sont déstinées aux images avec peu de couleurs.
-les images portants l'extension .PNG sont déstinées aux deux types.

Enfin, les liens sont la chose la plus importante et la plus excitante du langage HTML : aucune télé, aucun journal ni aucun autre support d'information ne vous permet de faire des liens comme ceux permis par Internet
Pourtant la balise est toute simple :
Voici un lien permet de faire un lien vers le fichier (ou vers un autre type de contenu : musique, vidéos, photos, fichiers executables, jeux flash) entre les guillemets.

L'adresse relative est l'adresse à partir du dossier où vous vous trouvez, par exemple si les fichiers "index.html" et "lien.html" se trouvent dans le dossier C:\mon_site_perso\ et que je veux faire un lien entre index.html et lien.html, l'adresse relative (ou chemin relatif) est lien.html. Par contre le chemin absolu est C:\mon_site_perso\liens.html .
Remarquez l'utilisation du caractère '_' : celui ci est important car les serveurs ne comprennent pas ou mal les espaces et des pages existantes pourraient alors ne jamais être trouvées. Cela est valable sous le système d'exploitation UNIX mais pas sous Windows par exemple.

Allez voir la page suivante pour vous donner une idée de ce que vous avez appris et regardez la source: http://pl.a.free.fr/web/images.html

5. LES TABLEAUX ET LES LISTES

Dans tous les langages les tableaux (et donc les listes) sont toujours des éléments importants.

Il en est de même en HTML : il suffit de regarder le forum pour voir qu'il s'organise en colonnes et en lignes.


5.1 Les listes


Les listes permmettent de lister ( ) des éléments : par exemple voici les différents modèles de voiture de la marque Reuno disponibles :

Maiguane
Cli-yau
Tou-in-go

En HTML il existe 2 types de listes : les listes ordonnées et les listes non ordonnées. Les listes ordonnées tiennent compte de l'emplacement de l'élément (par exemple dans un classement) à l'inverse des listes non-ordonnées.
Pour un exemple de chaque, allez voir la page http://pl.a.free.fr/web/listes.html .

Pour créer une liste non ordonnée il existe la balise

.
Pour créer une liste ordonnée il existe la balise

(signifie ordonned list).
Pour insérer un élément dans une liste il faut utiliser la balise

. Cela remplace la balise
dans une liste non ordonnée.

Enfin, pour créer un titre de la liste, utilisez la balise <LH></LH> (signifie list header).


Il existe également un troisième type de liste mais un peu particulier donc je ne l'ai pas mis avec les autres : les listes descriptives.

Les listes descriptives permmettent d'apporter des précisions sur un mot, par exemple pour faire un lexique. Elles sont composées d'un item (le mot du lexique par exemple) et de sa définition.

Pour cela la balise <DL></DL> ouvre une liste descriptive.
La balise <DT> permet ensuite de créer un nouvel item et la balise <DD> corrrespond à la définition de cet item.

On peut ensuite utiliser d'autres balises de style (comme <Hx>,) pour modifier l'apparence de l'item.

Voici le lien pour l'exemple : http://pl.a.free.fr/web/listes.html