| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
| tutoriel-html:les-bases-html [05/03/2016 09:49] – zonewebmaster | tutoriel-html:les-bases-html [08/10/2019 17:03] (Version actuelle) – modification externe 127.0.0.1 |
|---|
| Une balise HTML est un élément que l'on va ajouter au texte de départ pour dire au navigateur de quelle manière l'afficher. Cette balise ne sera pas affichée telle quelle par le navigateur mais sera interprétée par celui-ci. Une balise est toujours délimitées par les signes < et >.\\ | Une balise HTML est un élément que l'on va ajouter au texte de départ pour dire au navigateur de quelle manière l'afficher. Cette balise ne sera pas affichée telle quelle par le navigateur mais sera interprétée par celui-ci. Une balise est toujours délimitées par les signes < et >.\\ |
| \\ | \\ |
| > // Exemple de balise : <html> // | > // Exemple de balise : %%<html>%% // |
| \\ | \\ |
| Une balise peut être constituer d'attributs. Les attributs sont des informations complémentaires qui caractérisent la balise. Un attribut se présente sous la forme **nomattribut="valeur"**.\\ | Une balise peut être constituer d'attributs. Les attributs sont des informations complémentaires qui caractérisent la balise. Un attribut se présente sous la forme **nomattribut="valeur"**.\\ |
| \\ | \\ |
| > Exemple de balise avec attribut : <html lang="fr"> | > Exemple de balise avec attribut : %%<html lang="fr">%% |
| //ici la balise est html avec un attribut lang ayant pour valeur fr.//\\ | //ici la balise est html avec un attribut lang ayant pour valeur fr.//\\ |
| \\ | \\ |
| Chaque balise doit être fermée de cette façon </html>, mais il existe des exceptions, les balises simples.\\ | Chaque balise doit être fermée de cette façon %%</html>%%, mais il existe des exceptions, les balises simples.\\ |
| \\ | \\ |
| ==== Les balises simples ==== | ==== Les balises simples ==== |
| Ensuite vient la balise %%<html>%%. Elle encadre l'ensemble des autres balises. \\ | Ensuite vient la balise %%<html>%%. Elle encadre l'ensemble des autres balises. \\ |
| La balise %%<html>%% contient deux grandes balises :\\ | La balise %%<html>%% contient deux grandes balises :\\ |
| %%<head>%% qui contient l'en-tête de la page, cette partie ne s'affiche pas à l'écran et indique aux navigateurs les spécificités de la page en cours. | <head> qui contient l'en-tête de la page, cette partie ne s'affiche pas à l'écran et indique aux navigateurs les spécificités de la page en cours. |
| %%<body>%% qui contiendra le corps de votre document. C'est à dire ce qui s'affichera à l'écran de votre visiteur. | <body> qui contiendra le corps de votre document. C'est à dire ce qui s'affichera à l'écran de votre visiteur. |
| |
| <WRAP center round important 60%> | <WRAP center round important 60%> |
| > %%<ol>, <ul>%% : Ces balises ne peuvent contenir que des balises <li>. | > %%<ol>, <ul>%% : Ces balises ne peuvent contenir que des balises <li>. |
| > %%<p>%% : Cette balise ne peut contenir que des éléments de type « inline ». | > %%<p>%% : Cette balise ne peut contenir que des éléments de type « inline ». |
| > %%<pre>% : Cette balise ne peut contenir que des éléments de type « inline », sauf les balises <img />, <object>,<applet> et <sub> | > %%<pre>%% : Cette balise ne peut contenir que des éléments de type « inline », sauf les balises <img />, <object>,<applet> et <sub> |
| > %%<table>%% : Ne peut contenir que des balises <tr>, <caption>, <thead>, <tfoot>, <tbody>, <col>, <colgroup> | > %%<table>%% : Ne peut contenir que des balises <tr>, <caption>, <thead>, <tfoot>, <tbody>, <col>, <colgroup> |
| \\ | \\ |
| === La mise en forme === | === La mise en forme === |
| \\ | \\ |
| >Mise en gras : <strong> | > Mise en gras : %%<strong>%% |
| >Mise en italique : <em> | > Mise en italique : %%<em>%% |
| \\ | \\ |
| pour le souligné, le texte barré, l'exposant, l'indice, la police, la taille du texte ou la couleur, il est conseillé d'utiliser la balise <span> et les propriétés CSS. | pour le souligné, le texte barré, l'exposant, l'indice, la police, la taille du texte ou la couleur, il est conseillé d'utiliser la balise %%<span>%% et les propriétés CSS. |
| \\ | \\ |
| Exemple : | Exemple : |
| === Les images et les zones réactives === | === Les images et les zones réactives === |
| |
| Pour afficher une image, on utilise la balise <img />. Elle admet différents attributs, dont les plus importants sont src et alt.\\ | Pour afficher une image, on utilise la balise %%<img />%%. Elle admet différents attributs, dont les plus importants sont src et alt.\\ |
| L'attribut src permet de renseigner le chemin (l'URL) de l'image. Cette URL peut être absolue ou relatif.\\ | L'attribut src permet de renseigner le chemin (l'URL) de l'image. Cette URL peut être absolue ou relatif.\\ |
| L'attribut alt affiche un texte alternatif à la place de l'image dans le cas où, pour une raison ou une autre, celle-ci ne peut être chargée.\\ | L'attribut alt affiche un texte alternatif à la place de l'image dans le cas où, pour une raison ou une autre, celle-ci ne peut être chargée.\\ |
| Les différents formats d'images supportés par cette balise sont : le GIF, le JPG, le PNG ou le BMP.\\ | Les différents formats d'images supportés par cette balise sont : le GIF, le JPG, le PNG ou le BMP.\\ |
| >Exemple : <img src="addresse/de/l/image" alt="Description de l'image" /> | > Exemple : %%<img src="addresse/de/l/image" alt="Description de l'image" />%% |
| \\ | \\ |
| <WRAP center round tip 60%> | <WRAP center round tip 60%> |
| \\ | \\ |
| Le HTML permet de créer des zones réactives sur les images, afin de définir plusieurs liens différents sur une seule et même image, ou de ne rendre qu'une seule partie de l'image cliquable. On appelle l'ensemble de ces zones une carte, ou map.\\ | Le HTML permet de créer des zones réactives sur les images, afin de définir plusieurs liens différents sur une seule et même image, ou de ne rendre qu'une seule partie de l'image cliquable. On appelle l'ensemble de ces zones une carte, ou map.\\ |
| Les balises qui permettent de faire ces zones réactives sont <map> et <area> étroitement liées avec la balise <img />. | Les balises qui permettent de faire ces zones réactives sont %%<map> et <area>%% étroitement liées avec la balise %%<img />%%. |
| L'attribut de la balise <img/> qui va contenir le nom de la « map » dont elle fait référence est usemap. Le nom de cette map est précédé du signe #. | L'attribut de la balise %%<img/>%% qui va contenir le nom de la « map » dont elle fait référence est usemap. Le nom de cette map est précédé du signe #. |
| \\ | \\ |
| Exemple : | Exemple : |
| </code> | </code> |
| \\ | \\ |
| La balise qui va contenir l'ensemble de nos zones réactives pour cette image est la balise <map>, qui doit obligatoirement avoir l'attribut //name// renseigné et qui aura pour valeur le nom de la map, le même renseigné dans l'attribut //usemap// de l'image. | La balise qui va contenir l'ensemble de nos zones réactives pour cette image est la balise %%<map>%%, qui doit obligatoirement avoir l'attribut //name// renseigné et qui aura pour valeur le nom de la map, le même renseigné dans l'attribut //usemap// de l'image. |
| \\ | \\ |
| <code html> | <code html> |
| Les différents attributs de la balise //<area>// sont : | Les différents attributs de la balise //<area>// sont : |
| \\ | \\ |
| >**coords** : qui va contenir les différentes coordonnées de notre zone. | > **coords** : qui va contenir les différentes coordonnées de notre zone. |
| >**href** : qui va défenir l'adresse de destination du lien. | > **href** : qui va défenir l'adresse de destination du lien. |
| >**shape** : qui va renseigner le type de zone que l'on souhaite afficher (rectangle, rect, circle, circ, polygon, poly). | > **shape** : qui va renseigner le type de zone que l'on souhaite afficher (rectangle, rect, circle, circ, polygon, poly). |
| \\ | \\ |
| On peut évidemment avoir autant de zones que l'on veut sur une map, et on peut également combiner les différents types de zones sur une seule et même image. Attention toutefois à ne pas faire se chevaucher les zones. En cas de chevauchement, c'est la zone définie la première qui s'affichera au-dessus. | On peut évidemment avoir autant de zones que l'on veut sur une map, et on peut également combiner les différents types de zones sur une seule et même image. Attention toutefois à ne pas faire se chevaucher les zones. En cas de chevauchement, c'est la zone définie la première qui s'affichera au-dessus. |
| Exemple : | Exemple : |
| <code html> | <code html> |
| <a href="mailto:contact@chg-web.com">Contacter par mail</a> | <a href="mailto:miel@chg-web.com">Contacter par mail</a> |
| </code> | </code> |
| \\ | \\ |
| \\ | \\ |
| Résultat :\\ | Résultat :\\ |
| | <html> |
| <p>Ma liste de courses : </p> | <p>Ma liste de courses : </p> |
| <ul> | <ul> |
| <li>Céréales</li> | <li>Céréales</li> |
| </ul> | </ul> |
| | </html> |
| \\ | \\ |
| Exemple de liste ordonnées\\ | Exemple de liste ordonnées\\ |
| Résultat : | Résultat : |
| \\ | \\ |
| | <html> |
| <p>Top 3 des lettres grecs : </p> | <p>Top 3 des lettres grecs : </p> |
| <ol> | <ol> |
| <li>Gamma</li> | <li>Gamma</li> |
| </ol> | </ol> |
| | </html> |
| \\ | \\ |
| Exemple de listes de définitions | Exemple de listes de définitions |
| Résultat : | Résultat : |
| \\ | \\ |
| | <html> |
| <dl> | <dl> |
| <dt>Orteils</dt> | <dt>Orteils</dt> |
| <dd>Définition de doigts</dd> | <dd>Définition de doigts</dd> |
| </dl> | </dl> |
| | </html> |
| \\ | \\ |
| //Les deux autres types de liste sont rarement utilisées.//\\ | //Les deux autres types de liste sont rarement utilisées.//\\ |
| Si vous pouvez éviter l'utilisation d'un tableau, pensez à utiliser d'autres méthodes plus adaptées. | Si vous pouvez éviter l'utilisation d'un tableau, pensez à utiliser d'autres méthodes plus adaptées. |
| \\ | \\ |
| | |
| | ===== Notes de version ===== |
| | |
| | * [18/11/2017] : Harmonisation de la page |
| | |
| | ===== Auteurs et sources ===== |
| | |
| | * Auteur : [[:user:montuy337513]] |
| | |
| ===== Navigation ===== | ===== Navigation ===== |
| |
| * [[:accueil|Accueil]] | * [[:accueil|Accueil]] |
| | * [[:gestion-site-internet]] |
| | * [[:tutoriel-javascript]] |
| * [[:tutoriel-html]] | * [[:tutoriel-html]] |
| | * [[:tutoriel-php-mysql]] |
| | * [[:tutoriel-referencement-seo]] |
| |
| ===== Crédits et sources ===== | <nspages -h1 -exclude:subNs: -textPages="Autres liens rapides pouvant vous intéresser"> |
| | |
| * Auteur : [[user:montuy337513]] | |