B. Insérer des images et des liens

a) Insérer des images

Un document HTML est très souvent un document multimédia, c'est à dire qu'il comprend des images et des sons en plus du texte. Cependant, le fichier HTML proprement dit est uniquement un fichier de texte mais qui peut contenir des liens vers des fichiers multimédias.

Le marqueur qui permet d'insérer les images est <img>. Ce marqueur comporte un attribut obligatoire qui indique où se trouve le fichier image correspondant, c'est l'attribut src = "chemin vers fichier". Ainsi, on aura toujours au moins une syntaxe de ce genre:

<img src="/home/toto/IMAGES/photo.jpg">

Il existe d'autres attributs pour ce marqueur <img>, qui sont eux facultatifs:

alt ="texte decriptif" : permet d'afficher un texte décrivant l'image si le navigateur n'arrive pas à l'afficher ou lorsque la souris passe sur l'image. C'est une chaîne de 1024 caractères au maximum.
align=alignement : permet de contrôler l'alignement des images par rapport au texte environnant. Les spécifications HTML définissent 5 valeurs d'alignement: left, right, top, bottom, middle. Les deux premières positionnent l'image sur la marge gauche (left) ou droite (right) du texte qui se place donc sur la partie restante des lignes pour compléter la page. Les trois autres valeurs positionnent verticalement l'image par rapport au texte: top aligne le sommet de l'image sur le plus haut élément du texte environnant, bottom aligne le bas de l'image sur le bas du texte (c'est la valeur par défaut). La valeur middle est traitée différemment par InternetExplorer et Netscape: Nestcape aligne seulement le milieu de l'image avec la ligne de base du texte tandis que IE aligne le milieu de l'image avec le milieu de l'élément (lettres ou image) le plus haut de la ligne.
hspace="nombre", vspace="nombre" : associés à l'attribut aligne, permettent de laisser un espace libre (exprimé en pixels) entre l'image et le texte.
border="nombre" : lorsqu'une image correspond à un hyperlien (on clique dessus pour appeler un autre document, voir la section 2), elle peut être signalée par un bordure bleue (de la même façon qu'un texte associé à un hyperlien est de couleur différente). L'attribut border précise la taille de la bordure bleue en pixels.
width="nombre", height="nombre" : permettent de fixer la largeur (width) et la hauteur (height) de l'image, soit en pixels, soit en pourcentage de la taille de la fenêtre. On peut ainsi éviter le débordement des images trop grandes mais également gagner du temps lors du chargement: le navigateur réserve directement la place demandée pour l'image au lieu de devoir la calculer et l'adapter en fonction de l'image chargée. Attention toutefois de conserver le rapport largeur/hauteur sous peine de distorsion.

^B1 Récupérez les photos photo1.jpg et photo2.jpg et insérer les dans la page, la première dans le premier paragraphe à droite, la deuxième dans le dernier paragraphe en bas.

b) Insérer des liens hypertextes

Les liens hypertextes sont la principale caractéristique des documents HTML et sont à l'origine de la création du World Wide Web. Ils permettent la navigation à partir du document courant, soit vers d'autre documents de tous types répartis sur le réseau, soit à l'intérieur du document lui-même. Chaque lien est défini par une adresse ou URL (Uniforme Ressource Locator). Il existe plusieurs types d'URL:

liens HTTP (HyperText Transfer Protocol): ils correspondent aux adresses d'autres documents HTML sur le réseau. Ces liens s'écrivent sous la forme http://serveur:port/chemin avec "serveur" qui est l'adresse de la machine qui abrite le document demandé. La partie "port" est facultative : elle indique la "porte d'entrée" dans le serveur (en général 80 pour le HTML). Le reste de l'adresse("chemin") indique la partie de l'arborescence du serveur sur laquelle se trouve la page demandée. Ce chemin peut être d'une longueur quelconque et comporter plusieurs répertoires et sous-répertoire (rep1/rep2/rep3/...). Ce chemin se termine par le nom du document. Si aucun nom de fichier n'est indiqué, le navigateur essaie d'ouvrir un fichier "index.html": s'il n'en trouve pas, il affiche la liste des fichiers du répertoire.
les e-mails (courrier électronique): ces liens appellent en fait un programme de courrier électronique pour envoyer un mail vers l'adresse indiquée. Le programme de courrier est appelé par la commande: mailto:nom@adresse

Un lien peut également pointer vers une partie précise d'un document html, si on repère ce point précis par une ancre, qui est en fait un point de repère vers lequel on peut un lien hypertexte.
Une ancre est l'attribut name="nom" ajouté une balise quelconque pour la repérer. Si on a posé une ancre nommée "chap_1" sur le titre principal d'une page (<h1 name="chap_1"> Grand titre </h1>), on pourra arriver directement à ce titre par le lien <a href="serveur:fichier.html#chap_1">...</a>.
Si le lien est écrit simplement comme <a href="#chap_1">...</a> cela signifie qu'il pointe vers l'ancre chap_1 du même fichier : c'est donc un moyen de créer des liens à l'intérieur d'une page un peu longue.

^B2 Dans le fichier pp.html, créez un lien vers la page principale de l'Université de Montpellier (http://www.umontpellier.fr/).
^B3 Faîtes en sorte que les mots cette adresse soit un lien cliquable qui permet de vous envoyer un mail sur votre adresse institutionnelle.
^B3 Créer un lien depuis les images insérées dans le document vers le site Flickr (https://www.flickr.com/) où elles ont été récupérées (sous licence Creative Commons Pensez à ne jamais utiliser de photos dans vos documents publics sans en connaître la licence.. Vous penserez à créer autour de l'image une bordure d'épaisseur 2 pixels.