Outils pour utilisateurs
html:liens-images
Différences
Ci-dessous, les différences entre deux révisions de la page.
| Prochaine révision | Révision précédente | ||
|
html:liens-images [2017/03/08 18:59] noordo créée |
html:liens-images [2018/02/02 15:56] (Version actuelle) noordo [Exemples] |
||
|---|---|---|---|
| Ligne 3: | Ligne 3: | ||
| ===== Lien ===== | ===== Lien ===== | ||
| - | ==== Syntaxe ==== | + | ==== 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> | <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 ==== | ==== Exemples ==== | ||
| <webcode> | <webcode> | ||
| * Code HTML | * Code HTML | ||
| - | <code HTML> | + | <code html> |
| - | <a href="http://noordover.fr">Lien vers le site noordover.fr</a> | + | <a href="https://noordover.fr">Lien vers le site noordover.fr</a> |
| + | <br /><br /> | ||
| + | <a href="https://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> | </code> | ||
| </webcode> | </webcode> | ||
html/liens-images.1488995992.txt.gz · Dernière modification: 2017/03/08 18:59 par noordo
Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International
