| 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 01:04] – 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 ==== |
| La première ligne de cet exemple s'appelle le **DOCTYPE**. C'est la balise la plus importante de votre page. Elle permet de conserver la compatibilité du rendu de votre page sur les différents navigateurs. Il en existe plusieurs, ici c'est le modèle de **DOCTYPE** pour les documents HTML5.\\ | La première ligne de cet exemple s'appelle le **DOCTYPE**. C'est la balise la plus importante de votre page. Elle permet de conserver la compatibilité du rendu de votre page sur les différents navigateurs. Il en existe plusieurs, ici c'est le modèle de **DOCTYPE** pour les documents HTML5.\\ |
| \\ | \\ |
| 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%> |
| Petite précision importante, les balises <html>,<body> et <head> sont uniques. C'est à dire que le code source de votre page ne doit en contenir qu'une. Si votre page possède deux balises <body>, vous aurez des surprises à l'affichage. | Petite précision importante, les balises %%<html>,<body> et <head>%% sont uniques. C'est à dire que le code source de votre page ne doit en contenir qu'une. Si votre page possède deux balises %%<body>%%, vous aurez des surprises à l'affichage. |
| </WRAP> | </WRAP> |
| |
| Voici quelques éléments de type « block »\\ | Voici quelques éléments de type « block »\\ |
| \\ | \\ |
| ><div> : Balise multi-usage. Cette balise est souvent utilisée pour positionner un contenu dans la page. | > %%<div>%% : Balise multi-usage. Cette balise est souvent utilisée pour positionner un contenu dans la page. |
| ><h1>….<h6> : Hiérarchie de titre. | > %%<h1>%%…%%<h6>%% : Hiérarchie de titre. |
| ><p> : Paragraphe. | > %%<p>%% : Paragraphe. |
| ><ul>,<ol>,<dl> : listes (non ordonnée, ordonnée ou avec définition). | > %%<ul>,<ol>,<dl>%% : listes (non ordonnée, ordonnée ou avec définition). |
| ><li>,<dt>,<dd> : éléments de liste, définition, et titre de définition. | > %%<li>,<dt>,<dd>%% : éléments de liste, définition, et titre de définition. |
| ><table> : Tableau. | > %%<table>%% : Tableau. |
| ><blockquote> : paragraphe indenté (décalé à droite). | > %%<blockquote>%% : paragraphe indenté (décalé à droite). |
| ><pre> : Bloc de code préformaté. | > %%<pre>%% : Bloc de code préformaté. |
| ><form> : Formulaire de saisie. | > %%<form>%% : Formulaire de saisie. |
| \\ | \\ |
| === Type « inline » === | === Type « inline » === |
| | \\ |
| Les éléments de type « inline » sont essentiellement utilisés pour attribuer un style à une portion de texte. | Les éléments de type « inline » sont essentiellement utilisés pour attribuer un style à une portion de texte. |
| N'occupe que la largeur indispensable à l'affichage du contenu et ne provoque pas de retour à la ligne. Lorsque 2 éléments en-ligne se suivent sur une page, ils sont positionnés (par défaut) l'un à côté de l'autre (si la largeur de page le permet). | N'occupe que la largeur indispensable à l'affichage du contenu et ne provoque pas de retour à la ligne. Lorsque 2 éléments en-ligne se suivent sur une page, ils sont positionnés (par défaut) l'un à côté de l'autre (si la largeur de page le permet). |
| Voici quelques éléments de type « inline » | Voici quelques éléments de type « inline » |
| \\ | \\ |
| ><span> : balise multi-usage, très pratique pour appliquer un style CSS à une portion de texte. | > %%<span>%% : balise multi-usage, très pratique pour appliquer un style CSS à une portion de texte. |
| ><a> : ancre, permet de créer un lien sortant ou permet de spécifier un point précis de la page vers lequel on veut créer un lien. | > %%<a>%% : ancre, permet de créer un lien sortant ou permet de spécifier un point précis de la page vers lequel on veut créer un lien. |
| ><strong> : utlisé pour marquer l'importance particulière d'une portion de texte. Tous les navigateurs actuels afficheront cette portion de code en gras. | > %%<strong>%% : utlisé pour marquer l'importance particulière d'une portion de texte. Tous les navigateurs actuels afficheront cette portion de code en gras. |
| ><em> : utilisé pour accentuer l'importance d'une portion de texte (de façon moins forte que <strong>). Tous les navigateurs actuels afficheront cette portion de code en italique. | > %%<em>%% : utilisé pour accentuer l'importance d'une portion de texte (de façon moins forte que <strong>). Tous les navigateurs actuels afficheront cette portion de code en italique. |
| ><img /> : place une image. | > %%<img />%% : place une image. |
| ><br /> : Saut de ligne. Ceci est un car particulier d'éléments « inline », il provoque un saut de ligne. | > %%<br />%% : Saut de ligne. Ceci est un car particulier d'éléments « inline », il provoque un saut de ligne. |
| ><input /> : Champs de saisie dans un formulaire. | > %%<input />%% : Champs de saisie dans un formulaire. |
| ><abbr> : signale une abbréviation. | > %%<abbr>%% : signale une abbréviation. |
| \\ | \\ |
| === Type « none » === | === Type « none » === |
| Éléments de type « block » | Éléments de type « block » |
| \\ | \\ |
| ><address> : Cette balise ne peut contenir que des éléments de type « inline ». | > %%<address>%% : Cette balise ne peut contenir que des éléments de type « inline ». |
| ><body> : Ne peut être parent direct d'éléments « inline ». | > %%<body>%% : Ne peut être parent direct d'éléments « inline ». |
| ><blockquote> : Cette balise ne peut être parente que d'éléments de type « block ». | > %%<blockquote>%% : Cette balise ne peut être parente que d'éléments de type « block ». |
| ><dl> : Ne peut être parent direct que des balises <dt> et/ou <dd> | > %%<dl>%% : Ne peut être parent direct que des balises <dt> et/ou <dd> |
| ><dt> : Ne peut pas contenir d'éléments de type « block » | > %%<dt>%% : Ne peut pas contenir d'éléments de type « block » |
| ><fieldset> : Cette balise doit contenir en premier une balise <legend> | > %%<fieldset>%% : Cette balise doit contenir en premier une balise <legend> |
| ><form> : Ne peut être parent direct que d'éléments de type « block ». Cette balise ne peut pas contenir d'autres balise <form> | > %%<form>%% : Ne peut être parent direct que d'éléments de type « block ». Cette balise ne peut pas contenir d'autres balise <form> |
| ><h1>,<h2>, … <h6> : Ne peut contenir que des éléments « inline » | > %%<h1>,<h2>, … <h6>%% : Ne peut contenir que des éléments « inline » |
| ><hr /> : Ne peut pas contenir d'éléments | > %%<hr />%% : Ne peut pas contenir d'éléments |
| ><noscript> : Ne peut contenir que des éléments de type « block » | > %%<noscript>%% : Ne peut contenir que des éléments de type « block » |
| ><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> |
| \\ | \\ |
| Éléments de type « inline » | Éléments de type « inline » |
| \\ | \\ |
| ><a> : Ne peut contenir d'autres balises <a> | > %%<a>%% : Ne peut contenir d'autres balises <a> |
| ><br /> : ne peut pas contenir d'autres éléments. | > %%<br />%% : ne peut pas contenir d'autres éléments. |
| ><img /> : Ne peut pas contenir d'autres éléments. Ne peut pas être contenu dans un élément <pre>. | > %%<img />%% : Ne peut pas contenir d'autres éléments. Ne peut pas être contenu dans un élément <pre>. |
| ><input /> : Ne peut pas contenir d'éléments. Ne peut pas être contenu dans une balise <button>. | > %%<input />%% : Ne peut pas contenir d'éléments. Ne peut pas être contenu dans une balise <button>. |
| ><label> : ne peut pas contenir d'autre balise <label>. Ne peut pas être contenu dans une balise <button>. | > %%<label>%% : ne peut pas contenir d'autre balise <label>. Ne peut pas être contenu dans une balise <button>. |
| ><select> : Peut être parent direct des balises <optgroup> ou <option>. Ne peut pas être contenu dans une balise <button>. | > %%<select>%% : Peut être parent direct des balises <optgroup> ou <option>. Ne peut pas être contenu dans une balise <button>. |
| ><textarea> : Ne eput contenir que du texte simple et des entités. Ne peut pas être contenu dans une balise <button>. | > %%<textarea>%% : Ne peut contenir que du texte simple et des entités. Ne peut pas être contenu dans une balise <button>. |
| \\ | \\ |
| ==== Les balises les plus courantes. ==== | ==== Les balises les plus courantes. ==== |
| === 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> |
| \\ | \\ |
| 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]] | |