Le HTML (Hyper Text Markup Language) est un langage de description de page. L'hypertexte est un texte dans lequel on peut se déplacer en cliquant sur des liens. Ces liens permettent de se déplacer à l'intérieur d'une même page, d'une page vers une autre page du même document ou bien vers un autre document.
Markup ou balisage indique que nos pages sont structurées et mise en forme grâce à des balises. Par exemple, pour écrire le mot italique en caractères penchés, dans mon texte j'ai écrit <i>italique</i>. Le premier <i> signifie qu'à partir de cette balise, le texte qui va suivre sera en italique et le </i> signifie qu'au delà de cette balise, le texte redeviendra normal.
Les pages des sites Web sont construites suivant le même modèle.
<!DOCTYPE html> <html lang="fr"> <head> . . . </head> <body> . . . </body> </html>
La première ligne, <!DOCTYPE html> indique simplement que le navigateur qui va lire votre page fera de son mieux pour l'interpréter suivant les bonnes spécifications. HTML en est à sa version 5 et votre navigateur saura, dès qu'il aura lu cette première ligne, que c'est suivant cette version qu'il devra interpréter votre page.
La balise <html lang="fr"> indique le point de départ de votre document. On y a ajouté la propriété lang pour indiquer la langue dans laquelle le document est rédigé. Ici, la langue est le français. Lorsque l'on utilise des propriétés, on lui donne une valeur que l'on met entre guillemets juste après le signe égal =. Les propriétés peuvent être tout ce qui peut agrémenter le contenu de votre page comme une couleur, une police de caractères, une longueur etc. Vous pouvez remarquer que la balise <html> a une balise fermante </html> qui indique que la page est terminée. On ne peut rien mettre derrière cette balise fermante.
Le couple <head> et </head> encadre l'entête de notre fichier. Dans cet entête, on va mettre des balises <META> qui vont renseigner le navigateur et les moteurs de recherche sur des tas de choses. On va y mettre également d'autres renseignements utiles au bon affichage de notre page.
<head> <link rel="stylesheet" type="text/css" href="../retouche.css" media="screen"> <title>Mise en ligne</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="author" content="Frank Nauche"> <meta name="generator" content="Notepad++"> <meta name="description" content="On commence en HTML"> </head>
La première ligne commence par link, lien, et indique que l'on va utiliser le fichier retouche.css (je vous en parle très bientôt). Ce fichier sera lu par le navigateur avant qu'il ne commence à afficher la page.
La balise <title></title> contient le titre qui sera affiché dans l'onglet du navigateur. Si vous regardez l'onglet de la page sur laquelle vous êtes vous verrez que c'est marqué "Mise en ligne".
La ligne <meta http-equiv="..."> indique au navigateur que l'on va utiliser du CSS. On verra ce que c'est très bientôt.
Les lignes suivantes permettent d'indiquer l'auteur de la page, l'outil avec lequel la page a été écrite et la description de la page. Dans cette partie, vous pouvez décrire ce que contient votre page. Il est inutile de mettre plus de deux ou trois lignes, les moteurs de recherche ne liront pas tout.
Il est à signaler que les balises <META> n'ont pas de balises de fin.
On arrive à la troisième paire de balises, <body></body>. L'espace qu'il y a entre les deux balises va contenir tout ce qui apparaît à l'écran.
<!DOCTYPE html> <html lang="fr"> <head> <!-- <link rel="stylesheet" type="text/css" href="../retouche.css" media="screen"> --> <title>Ma première page</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="author" content="Votre nom"> <meta name="generator" content="Notepad++"> <meta name="description" content="On commence en HTML"> </head> <body> C'est ma première page </body> </html>
Sur la quatrième ligne, en début et en fin de ligne, j'ai rajouté deux balises (en rouge), <!-- et -->. Elles signalent des commentaires. Tout ce que vous marquerez entre ces deux balises sera ignoré par les navigateurs et n'apparaîtra pas à l'écran. Mettre des commentaires dans les pages est intéressant pour pouvoir se repérer facilement dans votre texte.
Vous allez créer votre première page. Pour cela, vous allez ouvrir Notepad++ et, avant de faire quoi que ce soit dedans, vous allez dans le menu Paramètres puis Préférences. Dans la partie gauche de la fenêtre, vous sélectionnez Nouveau document et dans la partie droite vous cochez la case UTF-8-BOM ou bien la case ANSI. L'encodage UTF-8 pose des problèmes d'affichage de certains caractères.
Faites un copier-coller du contenu de l'encadré dans une page blanche. Remplacez le texte par ce que vous voulez et enregistrez le fichier dans un dossier en l'appelant index.html. Allez dans le dossier où se trouve le fichier et double-cliquez dessus.Votre navigateur par défaut va s'ouvrir avec une page contenant le texte que vous avez saisi.
Voir le résultat
Lorsque vous tapez une adresse dans votre navigateur pour aller sur un site quelconque, vous n'écrivez pas le nom de la page. Votre navigateur va rechercher, à l'adresse indiquée, le fichier index.html. Si ce fichier n'existe pas, vous aurez droit à une erreur 404.
Vous connaissez maintenant le principe de la construction d'une page html. Comme ce qui nous intéresse ici c'est l'affichage de photos, on va voir, avant d'aller plus loin, l'art et la manière d'afficher une image. A partir de maintenant, je ne vous montre que le code qui est compris entre les balises <body>...</body>. Si vous ne voulez pas utiliser vos propres photos, vous pouvez utiliser celles que je cite sur les exemples. Si vous regarder ces pages à partir d'une clé USB, vous les trouverez dans le dossier ftp/exos/img/. Si vous êtes en ligne je vous mets un lien qui vous permet de télécharger les images.
Allez dans le dossier qui contient index.html et créez un nouveau dossier que vous appelez img (clic droit à l'intérieur du dossier, Nouveau puis Dossier). Vous enregistrez les deux images dans ce dossier img.
<body> <img src="img/tour1.jpg" width="720" height="540"> </body>
Le petit bout de code ci-dessus représente la façon la plus simple d'afficher une image. A l'intérieur de la balise <img> il y a le paramètre src qui nous permet d'indiquer le nom et l'emplacement du fichier image à afficher. Les paramètres à l'intérieur d'une balise sont suivis du signe égal = suivi d'une valeur encadrée par des guillemets ". Les deux autres paramètres width et height sont respectivement la largeur et la hauteur d'affichage de l'image exprimées en pixels. Il n'est pas obligatoire de mettre les bonnes dimensions, vous pouvez afficher les images plus petites ou plus grandes voire même ne pas respecter le rapport largeur/hauteur.
Copiez la ligne ci-dessus à la place du texte dans index.html et enregistrez la page en lui donnant le nom de tour1.html. Voir le résultat
Maintenant, nous allons faire connaissance avec tout ce qui fait le charme de HTML 5. Il s'agit de CSS 3 pour la troisième version du Cascading Style Sheet ou feuille de style en cascade. Rappelez vous, dans l'entête du fichier, nous avons mis une ligne en commentaire. Nous allons supprimer les balises de commentaire et remplacer le nom ../retouche.css par tour.css.
<link rel="stylesheet" type="text/css" href="tour.css" media="screen">
Pour résumer, la plupart des paramètres que nous trouvons dans les balises du fichier html va se retrouver dans le fichier tour.css. L'intérêt, c'est que nous n'aurons pas à répéter les caractéristiques des différents éléments qui forment la page.
On ouvre une page vierge dans Notepad++, on copie l'encadré du dessous dans cette page vierge et on enregistre cette page dans le même dossier que tour1.html sous le nom tour.css.
/* Centrer la photo des tours */
.tour {
display: block;
margin: auto;
}
Cela mérite quelques explications. La première ligne est une ligne de commentaire. Tout ce qui est compris entre les signes /* et */ sera ignoré par les navigateurs. Il ne faut pas hésiter à mettre des commentaires dans vos feuilles de style.
La ligne .tour { annonce une classe. Pour simplifier un maximum, une classe est quelque chose qui va être répété plusieurs fois dans une même page. Pour décrire une classe, on donne un nom que l'on fait précéder d'un point. Une classe peut s'appliquer à toute sortes d'objets. Dans notre exemple il s'agit d'une simple image. Tout ce qui vient après l'accolade ouvrante { correspond à la description de la classe. Cette description se termine dès que l'accolade fermante } est rencontrée.
Il y a deux façons d'afficher les objets en html : En ligne (inline) ou en bloc. Le texte se présente généralement en ligne et il en est de même pour les images. D'autres éléments de la page s'affichent en bloc, on en reparlera dès que nous en rencontrerons. display: block; veut dire que notre classe tour sera considérée comme un bloc. On termine la description d'une propriété de la classe par un point-virgule ;.
La deuxième propriété décrite ce sont les marges autour de la classe. margin: auto; veut dire qu'on laisse le navigateur gérer les marges. En pratique, le navigateur va répartir les marges de façon égales. Pour les marges horizontales, pas de problème, le calcul se fait en fonction des bords de la fenêtre. Comme notre document n'a pas de hauteur le navigateur laisse l'élément auquel s'applique la classe à la place où on l'a mis.
On revient au fichier tour.html et on va donner la classe tour à notre image.
<body> <img class="tour" src="img/tour1.jpg" width="720" height="540"> </body>
Après avoir enregistré, on double clique sur tour1.html pour voir le résultat
On va donner un peu d'épaisseur à notre page en mettant une bordure à la photo et en mettant une couleur de fond à notre page. On reprend notre fichier tour.css et on le modifie.
/* Centrer la photo des tours */
.tour {
display: block;
margin: auto;
border: 6px ridge white;
}
/* Le corps du document */
body {
background-color: darkturquoise;
}
La propriété border a trois arguments, la taille, le style et la couleur. Ici, on a une bordure de 6 pixels d'épaisseur dans un style qui donne une impression de relief et dont la couleur de base est le blanc. Pour en savoir plus sur les bordures, regardez la page sur le lien. Vous verrez que l'on peut gérer les bordures côté par côté. Pour les unités de mesure je vous renvoie sur la page du W3C qui est l'organisme qui fixe les règles pour tout ce qui concerne les sites Internet.
Les couleurs en HTML peuvent s'exprimer de différentes façons. La manière la plus "lisible" est de nommer la couleur par son nom. Il est possible de nommer les couleurs plus précisément en donnant la valeur de chaque composante de la couleur (Rouge, Vert, Bleu). La façon de faire est expliquée dans le lien. J'ai fait un petit utilitaire, coulHTML qui permet de récupérer le code de la couleur que l'on désire avec ou sans transparence. La transparence d'une couleur peut être utile par exemple si vous voulez mettre un filtre de couleur sur une image sans pour autant modifier votre photo. On verra ça en temps utile. Cet utilitaire nécessite la présence d'une DLL VB40032.DLL que vous devez placer dans le même dossier que coulHTML.exe.
Les balises peuvent également être décrites directement. Il suffit de mettre le nom de la balise sans les signes < et >. Le reste suit les mêmes règles que le reste des éléments. La propriété background-color correspond à la couleur de fond de notre document.
Après avoir modifié et sauvegardé le fichier tour.css vous pouvez recharger le fichier tour1.html afin de voir le résultat.
Pour continuer, nous allons modifier l'entête de tour1.html en y ajoutant la ligne en gras. L'entête devient l'encadré ci-dessous. La balise <meta refresh> peut servir à deux choses. La première, c'est de recharger une page automatiquement au bout d'un certain temps. La seconde, c'est de fabriquer un diaporama. content= est suivi de deux paramètres. Le premier, exprimé en secondes, est le délai avant que la page ne se recharge ou ne change. Le deuxième paramètres est le nom et l'adresse de la page à charger. Dans notre exemple, au bout de 5 secondes le navigateur cherchera à charger le fichier tour2.html.
<head> <link rel="stylesheet" type="text/css" href="tour.css" media="screen"> <title>Ma première page</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="author" content="Votre nom"> <meta name="generator" content="Notepad++"> <meta name="description" content="On commence en HTML"> <meta http-equiv="refresh" content="5;url=tour2.html"> </head>
Avant de voir les modifications sur votre page, vous allez enregistrer une copie du fichier tour1.html et vous allez le baptiser tour2.html. Il faut maintenant modifier tour2.html. Dans l'entête vous remplacez tour2 par tour1 et dans la balise <img> vous remplacez tour1.jpg par tour2.jpg. Maintenant vous pouvez double-cliquer sur tour1.html pour voir le résultat.
On va terminer en disant ce que sont ces photos. Sous la première photo on marquera "Photo originale" et sous l'autre on marquera "Photo retouchée avec PSP". Voilà le résultat
<body> <img class="tour" src="img/tour1.jpg" width="720" height="540"> <div id="texte"> Photo originale </div> </body>
On a vu plus haut les classes, comme dans class="tour", qui permettent de décrire des éléments qui peuvent se retrouver plusieurs fois dans un même document. Il existe le mot clé id, pour identifiant, qui sert à désigner un élément qui ne peut être présent qu'une fois dans la même page.
Une autre nouveauté, la balise <div> </div> pour division. Cette balise sert énormément pour organiser une page. On peut la dimensionner, la positionner et la décrire comme on le fait pour tout autre élément de la page. Elle est ce qu'on appelle un conteneur c'est à dire que dedans on peut mettre d'autres éléments. Par exemple sur la page que vous avez devant les yeux, les pavés dans lesquels il y a le code, sont des balises DIV.
Après avoir modifié le fichier tour1.html, vous faites la même chose avec tour2.html en remplaçant juste le texte par "Photo retouchée avec PSP".
/* Texte sous la photo */
#texte {
width: 100%;
font-family: Cursive;
font-size: 50px;
line-height: 120px;
color: darkturquoise;
text-shadow: 2px 2px #000000;
text-align: center;
}
Vous reprenez le fichier tour.css pour rajouter la description du contenu de la balise <div> sous celle de la balise <body>.
Pour différencier une classe susceptible d'être présente plusieurs fois sur une page, un identifiant est précédé du signe dièse # ([Alt-Gr]-[3]). Vous savez, en voyant ce signe que texte ne peut être présent qu'une fois dans votre page.
On commence par fixer la largeur du conteneur au maximum possible c'est à dire 100%. La propriété width représente la largeur de l'élément auquel elle se rapporte. Si on avait voulu donner une hauteur à l'élément, on aurait utilisé la propriété height. Le fait d'utiliser des pourcentages pour dimensionner des éléments est pratique dans bien des cas. Dans l'exemple ci-dessous, quelle que soit la taille de la fenêtre du navigateur, chaque pavé restera visible à l'écran et le rapport des largeurs entre les différentes zones restera constant.
<style>
#rouge {width: 25%; height: 25px; background-color: hotpink; float: left;}
#vert {width: 50%; height: 25px; background-color: springgreen; float: left;}
#bleu {width: 25%; height: 25px; background-color: lightskyblue; float: left;}
#jaune {width: 75%; height: 25px; background-color: yellow; margin-left:25%; float: left;}
</style>
<div id="rouge">Elément 1 - 25%</div>
<div id="vert">Elément 2 - 50%</div>
<div id="bleu">Elément 3 - 25%</div>
<div id="jaune">Elément 4 - 75%</div>
Je reprends l'explication de texte. On arrive à la propriété font-family qui, comme son nom l'indique, sert à indiquer le nom de la police de caractères utilisée. Autant que faire se peut, utilisez des noms de polices qui existent. Il est impératif de respecter la casse dans le nom de police. Si Arial est valide, arial ne sera pas reconnu. Evitez les polices "exotiques", vos visiteurs ne sauront, pour la plupart, pas les lire. Les noms qui comportent des espaces comme "Times New Roman" doivent être mis entre guillemets. Vous avez la possibilité de mettre plusieurs noms en les séparant par des virgules. C'est la première police reconnue qui sera utilisée. Vous avez encore la possibilité d'utiliser des mots-clés comme cursive ou serif qui désignent des noms de polices génériques. Le résultat obtenu variera d'un navigateur à l'autre.
La taille de la police est définie par la propriété font-size. Elle peut être utilisée avec pas mal d'unités de mesure. Personnellement j'utilise principalement le pixel (px) car c'est l'unité de mesure de l'écran.
La propriété line-height sert ici à positionner le texte par rapport à la photo. Vous comprendrez facilement en suivant le lien.
La propriété couleur respecte les mêmes règles que la propriété background-color et s'applique à la couleur de premier plan ou couleur d'encre. La couleur est la même que la couleur de fond. Bien qu'il existe une valeur transparent comme couleur, on ne peut pas l'utiliser ici car l'ombre prend la forme du caractère mais décalée.
On en arrive à l'ombre avec la propriété text-shadow qui ici est décalée de 2 pixels vers la droite et vers le bas. La couleur de l'ombre est le noir. Regardez le lien vous verrez comment on peut étendre l'ombre par un dégradé. Jusqu'à présent on a utilisé les couleurs par leur nom, ici, la couleur est représentée par sa valeur hexadécimale avec deux caractères pour le rouge, le vert et le bleu. Il est à signaler que l'on peut mettre une ombre sur différents éléments comme les images, les balises DIV.... La syntaxe de box-shadow est plus complète que celle de text-shadow.
Ce genre de présentation est pratique lorsque vous ne voulez pas que celui qui regarde vos photos touche à la machine sur laquelle elles sont présentées. Ça peut être par exemple une machine posée dans la vitrine d'un magasin qui présente quelques objets originaux. Pour ce genre de présentation que vous réserverez au local, vous pouvez appuyer sur [F11] afin de mettre votre navigateur en plein écran. Si vous réservez votre présentation à un cercle familial ou amical, vous pouvez relier votre ordinateur à une télé via un câble HDMI ou un câble VGA sur les anciens matériels.
Ça va être tout pour cette fois. La prochaine fois, on va voir la même chose mais avec une interaction du spectateur (on parle de visiteur). C'est à dire que vous pourrez mettre votre présentation en ligne.
