WIK-ICN

Ceci est une ancienne révision du document !

====== HTML - liens et images ====== ===== Lien ===== ==== Syntaxes ==== Pour insérer un lien : - on utilise la balise **a** et son attribut **href** ; - entre la balise ouvrante **<a>** et la balise fermante **</a>**, on indique le texte qui apparaitra dans la page ; - l'attribut **href** placé dans la balise ouvrante permet de spécifier l'adresse (url) de la page vers laquelle doit se faire le lien. <a href="{url}">Texte</a> La balise **<a>...</a>** possède d'autres attributs que **href**, par exemple l'attribut **target** (dont le rôle est expliqué dans les lignes qui suivent) : <a href="{url}" target='_blank'>Texte</a> Pour davantage d'informations sur l'attribut ''target'', voir cette page sur [[https://www.w3schools.com/tags/tag_a.asp|w3schools.com]]. ==== Exemples ==== <webcode> * Code HTML <code html> <a href="http://noordover.fr">Lien vers le site noordover.fr</a> <br /><br /> <a href="http://noordover.fr" target='_blank'>Lien vers le site noordover.fr</a> dans un nouvel onglet. </code> </webcode> ==== A propos de l'adresse (url) passée à l'attribut href ==== * **Pour un lien vers un site externe**, l'url débutera par <code>http:// ou https://</code> * **Pour un lien vers un fichier local, l'url sera relative !** Il suffira d'écrire : * "//exemple.html//" pour faire un lien vers un fichier "//exemple.html//" qui se trouve dans le même dossier ; * "//doss/exemple.html//" pour faire un lien vers un fichier "//exemple.html//" qui se trouve dans le sous-dossier "//doss//" du dossier courant ; * "//../doss/exemple.html//" pour faire un lien vers un fichier "//exemple.html//" qui se trouve dans un dossier "//doss//" qui se trouve à côté de celui contenant le fichier courant. ===== Images ===== ==== Syntaxes ==== <img src="{url_image}" alt="{Texte alternatif}" /> <img src="{url_image}" alt="{Texte alternatif}" width="{largeur}" height="{hauteur}" /> Pour davantage d'informations sur les attributs possibles de la balise ''<img>'', voir cette page sur [[https://www.w3schools.com/tags/tag_img.asp|w3schools.com]]. ==== Exemples ==== <webcode height=300> * Code HTML <code html> <img src="https://noordover.fr/img/lycee_noordover_aerienne1_500x300.jpg" alt="Vue aérienne Noordo" /> </code> </webcode> <webcode height=300> * Code HTML <code html> <img src="https://noordover.fr/img/lycee_noordover_aerienne1_500x300.jpg" alt="Vue aérienne Noordo" width="300px" /> </code> </webcode>