Il est fortement conseillé aux débutants de lires ces chapitres dans l'ordre proposé car les notions seront abordées par ordre de difficulté.
Introduction
Ce texte succinct est très loin d'être exhaustif, il a simplement pour but de vous permettre de faire vos premiers pas dans le monde du langage hypertexte.
HTML= Hypertext Markup Language
Le principe de base d'HTML est assez simple, à chaque type de formatage correspond un couple de balises (tag en anglais) placés avant et après la partie de texte à formater. Dans un document HTML, si l'on souhaite placer un texte en italique, nous utiliserons les balises <i> et </i> pour encadrer la partie italique de cette manière : <i>texte italique</i>
Mais commençons par créer un document HTML.
Création du fichier
Un document HTML est à la base un simple fichier texte répondant à certaines normes. Vous pouvez très facilement créer votre premier fichier HTML avec un simple éditeur de texte comme NotePad.
Pour cela ouvrez votre éditeur et créez un nouveau fichier. Au lieu de le savegarder avec l'extension habituelle [.txt] ; nous sauverons ce fichier avec l'extension [.html]qui caractérise ce format particulier.
Copiez le code de la rubrique ci-dessous, et sauvegardez le fichier texte obtenu sous le nom index.html.Le fichier 'index' indique en règle générale qu'il s'agit d'une page d'accueil. Vous pouvez dès à présent visualiser votre première page HTML en la chargeant dans un navigateur comme Netscape ou Internet Explorer.
Une page HTML doit obligatoirement avoir la forme suivante :
Code
<HTML> <HEAD> <TITLE> Titre qui va s'afficher en haut de la page </TITLE> </HEAD> <BODY>
Bonjour, ceci est le corps de la page </BODY> </HTML>
Le tag <HTML>indique au browser qu'il va avoir à traduire une page écrite en langage HTML, le tag fermant en fin de fichier </HTML> lui indique que c'est terminé.
Les tag <HEAD> et </HEAD> contiennent l'entête de la page. Cette entête se compose généralement uniquement d'un titre, qui est signalé par <TITLE> et </TITLE>.
Cela dit l'entête peut comporter d'autres tags commençant par META, LINK ou BASE qui contiennent des indications sur l'auteur. Nous verrons ces tags plus tard.
Les tags <BODY> et </BODY> encadrent le corps de la page.
Pour les titres, il se fait en entourant la partie de texte concernée de <Hn> et </Hn>, "n" est un chiffre qui détermine la taille des caractères, comme dans les exemples suivants :
Il y a deux familles de tags pour mettre le texte en exergue, les tags physiques et les tags sémantiques.
Les tag physiques donnent une indication impérative :
Code
Résultat
<i>italique</i>
italique
<B>gras</B>
gras
<U>souligné</U>
souligné
<tt>télétype</tt>
télétype
<sup>exposant</sup>
exposant
<sub>indice</sub>
indice
<strike>barré</strike>
barré
Les tags sémantiques sont plus cohérents avec la philosophie qui tend à rendre l'Internet sémantique. Plus clairement ce sont des balises qui donnent du sens au contenu qu'elles encadrent.
En HTML vous disposez d'assez peu de choix pour l'utilisation des polices de caractère. En effet, une police ne s'affichera correctement que lorsque elle est installée sur le poste client (poste de l'internaute qui visualise votre page).
Les polices web usuelles sont Times, Verdana, Arial, Helvetica. Pour les afficher on fait appel à la balise <FONT> qui comporte de nombreux attribut (règlage de la taille, de l'alignement, de la couleur etc...
HTML propose des constantes de couleur en anglais. Elle sont employées comme valeur d'attribut à l'intérieur ce certaines balises. Nous venons de voir que cétait le cas pour la balise <FONT color=black> qui permet de colorer une zone de texte. Mais c'est également le cas pour de nombreuses autres balises comme le corps de la page <BODY bgcolor=green>, les tableaux et leurs cellules, etc....
Il est aussi possible de faire appel aux couleurs par leur code hexadécimal. #XXXXXX est une valeur hexdécimale exprimant les trois couleurs Rouge Vert Bleu
Pour commencer, essayez avec les valeurs suivantes :
Code Hexa
Résultat
"#000000"
Noir
"#CCCCCC"
Gris
"#FFFFFF"
Blanc
"#00FFFF"
Vert d'eau
"#CCFFCC"
Vert clair
"#00FF00"
Vert
"#CCCCFF"
Bleu layette
"#0000FF"
Bleu
"#FF00FF"
Pourpre
"#FF0000"
Rouge
"#FFCCCC"
Rose
"#FFDF00"
Orange
"#FFFF00"
Jaune
"#773333"
Marron
Pour colorer le fond de votre page:
Remplacez l'instruction <BODY> par : <BODY BGCOLOR="#XXXXXX">
La construction de listes s'effectue avec :
- une balise d'ouverture <UL> ou <OL> selon la forme souhaitée (puces ou numéros),
- un tag de ligne <LI> pour chaque élément,
- une balise de fermeture.
Exemple de liste à puces :
Code
Résultat
<UL> <LI> Premier élément de la liste <LI> Deuxième élément de la liste <LI> Troisième élément de la liste <UL>
Premier élément de la liste
Deuxième élément de la liste
Troisième élément de la liste
Exemple de liste numérotée:
Code
Résultat
<OL> <LI> Premier élément de la liste <LI> Deuxième élément de la liste <LI> Troisième élément de la liste <OL>
Les navigateurs n'affichent pas toujours le bord des cellules, pour ce faire il suffit d'ajouter l'attribut border=valeur (où valeur représente un nombre de pixels) dans la balise de définition de la table, ce qui nous donne :
Les tableaux supportent un nombre impressionnant de balises et d'attributs optionnels. Il faut les utiliser avec précaution car tous ne sont pas compatibles avec l'ensemble des navigateurs.
La balise optionnelle <caption> permet d'indiquer une légende. En reprenant l'exemple ci-dessus :
Il est également possible de distinguer certaines cellules comme étant des cellules titre, dans le cas le tag est <TH>( pour Table Header)
Par exemple :
Les attributs <table cellspacing=valeur et cellpadding=valeur> permettent d'avoir un contrôle sur l'espace séparant le contenu de la cellule des bords :
Un tableau n'est pas forcément symétrique, les attributs collspan et rowspan permettent de définir qu'une cellule va etre plus large ou plus haute que les autres.
- Rowspan définit le nombre de cellule en largeur que va tenir la cellule auquel il est appliqué.
- Collspan définit le nombre de cellules en hauteur que va tenir la cellule auquel il est appliqué.
Par exemple :
Lors de la construction d'un tableau élaboré, il est assez pratique de commencer par afficher une valeur de border pour délimiter visuellement l'agencement des cellules. Par la suite, on peut supprimer l'attribut border ou lui donner une valeur nulle pour effacer le contour des cellules.
Pour conclure, sur l'utilisation des tableaux, nous remarquerons qu'ils sont souvent utilisés pour des mises-en-page sophistiquées. Alors, ils sont généralement associés à des feuilles de style en cascade (CSS) pour l'aspect graphique qu'elles procurent. Pour ce genre de constructions élaborées, il est utile d'avoir recours à des éditeurs HTML professionnels comme Adobe Golive ou Dreamweaver, car ils approtent un gain de productivité important.
Le tag <IMG> pour l'insertion d'image ne fonctionne pas sans attributs.
L'attribut src renvoie le navigateur au chemin physique l'image. Celle-ci doit se trouver physiquement dans le même dossier que la page. Pour cet exercice vous pouvez télécharger ici l'image de l'exemple et la sauver sous le nom image.jpg dans le même dossier que votre page HTML.
Vous pouvez également utiliser le lien relatif.
Code
Résultat
<IMG src="image.jpg"> Ce code affiche une image en début de texte.
Ce code affiche une image en début de texte.
<IMG src="http://www.ranchon.net/ph
oto/medias/diaphragme.jpg"> Ce code affiche une image en début de texte.
Ce code affiche une image en début de texte.
Il est possible de rajouter à <IMG src=".."> les attributsde dimensionnement de l'image. Les dimensions sont exprimées en pixels ou en pourcentage.
Code
Résultat
<IMG src="image.jpg" width=50 height=25> Ce code affiche une image redimensionnée en début de texte.
Ce code affiche une image redimensionnée en début de texte.
On peut également spécifier l'alignement du texte qui se trouve éventuellement contre l'image.
Code
Résultat
<IMG src="image.jpg" width=50 height=25 align=right> Ce code affiche une image calée à droite du texte.
Ce code affiche une image calée à droite texte.
L'attribut border dimensionne un contour (en pixels) autour de l'image.
Code
Résultat
<IMG src="image.jpg" width=50 height=25 border=4> Ce code affiche une bordure à l'image.
Ce code affiche une bordure à l'image.
Pour éviter que le texte ou les objets adjacents restent collés à l'image, il existe des attributs permettant de libérer un espace horizontal ou vertical.
Code
Résultat
<IMG src="image.jpg" width=50 height=25 align=right border=0 vspace=10 hspace=30> Voici venir les temps où vibrant sur sa tige, chaque fleur s'évapore ainsi qu'un encensoir; Les sons et les parfums tournent dans l'air du soir ; valse mélancolique et langoureux vertige!
Voici venir les temps où vibrant sur sa tige, chaque fleur s'évapore ainsi qu'un encensoir; Les sons et les parfums tournent dans l'air du soir ; valse mélancolique et langoureux vertige!
Il est également possible (et très recommandé) de joindre au tag d'image un texte «alternatif» qui sert de descriptif. Pour le visulaliser, il suffit de survoler l'image avec la souris pendant quelques secondes.
Pour cela il suffit d'ajouter à l'intérieur du tag d'image ALT="texte alternatif".
Ce texte est impératif pour le web sémantique car utilisé par les moteurs de recherche lors du référencement.
Code
Résultat
<IMG src="image.jpg" alt="une belle tulipe" width=50 height=25 border=0 vspace=5 hspace=5> Pour voir le texte alternatif passez le curseur sur l'image.
Pour voir le texte alternatif passez le curseur sur l'image.
Pour rendre une image clicable, il suffit de l'encadrer par une balise de lien <a>.
Les attributs du lien <a> restent les mêmes que pour les liens textuels (voir plus haut).
Code
Résultat
Cette image est cliquable :<br><a href="index.php?pg=photo/content.tpl"> <IMG src="image.jpg" alt="une belle tulipe" width=50 height=25 border=1 ></a>
Les formulaires sont de plus en plus employés, c'est le moyen le plus efficace de soumettre l'utilisateur à des interractions avec une page web. Les choix proposés à l'utilisateur peuvent être calibrés et les résultats seront traités automatiquement .
En principe, un formulaire est utilisé en interraction avec un script placé sur le serveur.
Le formulaire compacte les informations saisies par l'utilsateur et les envoie au script.
La pluspart des serveurs web sont configurés avec des scripts (pour l'envoi de formulaires de courrier par exemple). Contactez votre hébergeur ou votre administrateur réseau pour en connaitre le fonctionnement.
Un formulaire a la forme suivante :
Code
Résultat
<FORM ACTION="monscript&.php" METHOD=POST>
Champ de saise (par exemple pour le nom) : <INPUT TYPE="text" NAME="nom" SIZE="15">
</FORM>
Voila cette initiation terminée. Pour approfondir ces notions j'inviterais le lecteur à se procurer des ouvrages sur le sujet et éventuellement à s'imprégner des spécifications établies par le WordWide Web Consortium (W3C), reponsable de la normalisation et de l'évolution de HTML.
Ce code affiche une image en début de texte.
