La balise IMG

L'élément img est un élément inline dit remplacé, ce qui signifie que :
Par défaut, il a un comportement en ligne et suit le texte dans lequel il est inséré.
Mais on peut lui attribuer des dimensions (width, height), des marges (margin et padding) et des bordures.
Le lien vers l'image d'origine se fait par l'attribut src="......" dont la valeur est l'url de cette image.
Par défaut l'élément img adopte les dimensions de l'image d'origine, mais on peut ajuster ces dimensions à la page en jouant sur width ou height, une seule de ces propriétés suffit, l'image conservant ces proportions d'origine. On peut aussi déformer l'image en attribuant à width et à height des proportions différentes de celles de l'image d'origine.
Attention toutefois, une grande image très réduite conserve son poids en pixels, une petite image très agrandie perd de la définition.
APPLICATION : Dans le code html, créons une div class="Boites" dans laquelle nous placerons un titre h2 "La balise img ", puis un élément p auquel nous attribuerons en ligne successivement la propriété : border:2px solid #f00. Dans cet élément p nous copierons le texte du fichier CanyonsSousMarins.txt, dans lequel nous insèrerons au petit bonheur, trois images et leurs propriétés en ligne :
1. src="Images/VChapon.jpg" style="width:90px;"
2. src="Images/VEspets.jpg" style="height:120px; margin-right:30px;"
3. src="Images/VMurene.jpg" style="width:160px; margin:30px;padding:20px;border:5px solid #0f0"
Ni margin, ni padding ni border
Depuis les premiers temps de l'océanographie, les canyons sous-marins ont attiré la curiosité et l'imagination des explorateurs. Leur taille imposante (suggérant des incisions supérieures à mille mètres dans certains cas) n'était pas sans rappeler les canyons creusés par les rivières sur les continents, ce qui conduisit les premiers océanographes, comme Francis Shepard, à imaginer que ces reliefs sous-marins s'étaient formés durant des périodes d'émersion. La marge du Languedoc - Roussillon est probablement l'une des régions du monde qui a fait l'objet des plus anciennes reconnaissances, en particulier en raison de la présence de la station marine de Banyuls sur Mer et de l'Institut Océanographique de Monaco. A la fin du siècle dernier, Pruvôt explorait déjà, avec le vapeur "Roland", les parages du "rech" de Lacaze Duthiers (ce terme désigne les canyons en catalan). A partir des années 1940, Jacques Bourcart devait consacrer de nombreuses publications à la morphologie et la géologie de cette zone, et en particulier à l'effet des cycles glaciaires sur la distribution des sédiments de surface (les "sables du large") et à l'origine des canyons.
Une marge droite, pas de padding ni de bordure
Ses idées sur la "flexure continentale" et la "révolution pliocène" s'inspirent largement des observations effectuées dans cette région. Il devait réaliser, avec la Marine Nationale, une première carte du "socle continental du littoral français de la Méditerranée" sur laquelle les principaux canyons sont bien identifiés (la carte "des côtes de Provence et du Roussillon dressée par Marti et Antoine en 1930 resta secrète jusqu'en 1945 pour des raisons stratégiques). Paradoxalement, cette région qui avait tant attiré les premiers océanographes français aura été la dernière, autour de la métropole, à bénéficier d'une cartographie moderne.
Un margin, un padding et une bordure
On sait aujourd'hui que les canyons jouent un rôle très important dans les échanges entre les continents et les océans, et représentent des "conduits" concentrant les transferts d'énergie et de matière. Par voie de conséquence, ils représentent aussi des secteurs d'intérêt particulier pour l'étude des ressources vivantes. Ils jouent enfin un rôle dans la stabilité des pentes continentales, et contrôlent le transport et le dépôt de sédiments sableux qui peuvent fournir des roches réservoirs piégeant le pétrole. Plusieurs programmes de l'IFREMER, mais aussi des universités de Perpignan, Marseille, Barcelone, Lille, Brest et Paris 6 étaient intéressés par l'accès à une bonne cartographie de ce secteur clé, en particulier dans le cadre de plusieurs programmes européens en cours et d'une proposition de forages scientifiques. Un siècle après les expéditions du vapeur "Roland", la campagne CALMAR (CAtalano-Languedocian Margin) a donc achevé la cartographie au sondeur multi-faisceaux de la pente continentale du Golfe du Lion, entamée à l'est en 1981 par le "Jean Charcot". Du 13 au 26 novembre 1997, les canyons et le glacis situés entre le méridien de Sète et 41°30' de latitude ont été cartographiés, des prélèvements et des profils sismiques étant également réalisés.

INTÉGRER UNE ICÔNE DANS la barre d'adresse et dans L'ONGLET DE LA PAGE

L'icône est appelée par la meta-balise placée dans la partie . Dans ce cas, les attributs de (qui rappelons-le peut également être utilisée pour établir d'autres types de liens) sont :
rel="shortcut icon". L'attribut rel détermine une relation logique avec une cible de lien située après.
type="...". La valeur de l'attribut type est généralement image/x-icon, mais on peut également utiliser les valeurs image/jpg, image/png ou image/gif.
href="....". La valeur de l'attributs href est l'url de l'icône.
APPLICATION : Placer dans la partie de la page la meta-balise avec ses attributs décrits plus haut.
Nous ferons un essai :
avec type="image/x-icon" et l'icône Images/NP++.ico
puis avec type="image/jpg" et l'image Images/Espet2.jpg (visionner la page Marges négatives avec Firefox car IE n'accepte que le type image/x-icon)

Commentaire conditionnel

Sous Firefox s'affiche l'icône SAR.gif
Sous IE s'affiche l'icône NP++.ico

<head>
<link href="StyleAtelierCss2.css" rel="stylesheet" type="text/css">
<!--[if IE ]>
<link rel="shortcut icon" type="image/x-icon" href="Images/NP++.ico"/>
<![endif]-->

<link rel="shortcut icon" type="image/gif" href="Images/SAR.gif"/>

Créez rapidement des icônes à partir de vos images et photos grâce à Imagicon
Simple d'utilisation, il suffit d'effectuer un glisser-déposer de l'image que vous souhaitez transformer, puis de régler certains paramètres. Vous pouvez ainsi choisir la taille, l'emplacement de destination, le format (BMP, ICO, JPG ou PNG), ou encore la couleur. Enfin, cette application supporte le traitement par lots.