Différences

Ci-dessous, les différences entre deux révisions de la page.

--- tutoriel-html:les-bases-html [04/03/2016 18:21] – zonewebmaster
+++ tutoriel-html:les-bases-html [08/10/2019 17:03] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 12: / Ligne 12: @@
 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"**.\\
 \\
-> 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.//\\
 \\
-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 ====
@@ Ligne 57: / Ligne 57: @@
 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.
 	<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%>
-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>
@@ Ligne 315: / Ligne 315: @@
 \\
 ==== Les scripts ====
-Les scripts sont des petits programmes en JavaScript ou en VBScript exécutés « côté client1 » qui augmentent l'ergonomie de vos pages.
+Les scripts sont des petits programmes en JavaScript ou en VBScript exécutés « côté client ((Côté client : s'exécute sur le navigateur du visiteur et est entièrement indépendant du serveur.)) » qui augmentent l'ergonomie de vos pages.
 \\
 Comme pour les feuilles de style en cascade, nous pouvons incorporer les scripts des deux même manières.
@@ Ligne 339: / Ligne 339: @@
 Conseils SEO: Il est préconisé, pour accélérer la vitesse de chargement de votre page, de mettre l'ensemble des scripts JS en fin de page juste avant </body>. Et oui, le temps de chargement de votre page influence la notation de votre site auprès des moteurs de recherche.
 </WRAP>
+\\
+===== Le <body> dans le détail =====
+La balise <body> est le corps de votre document. C'est à cet endroit que vous allez mettre tout le texte et toutes les images qui apparaîtront lorsqu'un visiteur consultera votre page ?
+\\
+==== Les types de balises ====
+Il existe différents type de balises : Les **types « block »**, **les types « inline »** et **les types « none »**. Le type de la balise influence l'affichage des différents éléments de votre page.
+=== Type « block » ===
+Les éléments de type « block » sont généralement ceux que l'on utilise pour la mise en page.\\
+La balise de type « block » occupe toute la largeur disponible. Lorsque 2 éléments « blocks » se suivent sur une page, ils sont positionnés (par défaut) l'un sous l'autre.\\
+Voici quelques éléments de type « block »\\
+\\
+> %%<div>%% : Balise multi-usage. Cette balise est souvent utilisée pour positionner un contenu dans la page.
+> %%<h1>%%…%%<h6>%% : Hiérarchie de titre.
+> %%<p>%% : Paragraphe.
+> %%<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.
+> %%<table>%% : Tableau.
+> %%<blockquote>%% : paragraphe indenté (décalé à droite).
+> %%<pre>%% : Bloc de code préformaté.
+> %%<form>%% : Formulaire de saisie.
+\\
+=== Type « inline » ===
+\\
+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).
+\\
+Voici quelques éléments de type « inline »
+\\
+> %%<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.
+> %%<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.
+> %%<img />%% : place une image.
+> %%<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.
+> %%<abbr>%% : signale une abbréviation.
+\\
+=== Type « none » ===
+Ce type de balise ne s'affiche pas à l'écran. Elles sont présentes pour apporter des informations invisibles pour l'internaute (par exemple la balise <meta>.
+==== Emboîter les balises ====
+Quésako ((Qu'est-ce que c'est en langue occitane.)) ?  Emboîter les balises sera une pratique courante dans la réalisation de vos pages. Il existe des règles qu'il vous faut suivre.\\
+\\
+=== Les règles ===
+Vous devez déjà avoir à l'esprit la règle d'imbrication vue [[#les-balises-imbriquees|plus haut]].
+\\
+La règle générale est celle-ci : \\
+Un « block » peut contenir des « inline » et d'autres « block ». De l'autre côté, les « inline » ne peuvent contenir que d'autres balises « inline »
+\\
+Voici un exemple d'emboîtement autorisé :
+\\
+<code html>
+<p>
+Phrase avec un <strong> mot </strong> important.
+</p>
+</code>
+\\
+Et voici un emboîtement interdit:
+\\
+<code html>
+<strong>
+  <p>Première phrase</p>
+  <p>Deuxième phrase</p>
+</strong>
+</code>
+\\
+Interdit ne veut pas dire que cela ne fonctionne pas, mais il n'est pas conforme aux conventions concernant les emboîtements d'éléments et ne doit pas être utilisé dans vos pages.
+\\
+=== Les cas particuliers ===
+Comme toutes règles, il existe des cas particuliers pour les contredire.
+\\
+Éléments de type « block »
+\\
+> %%<address>%% : Cette balise ne peut contenir que des éléments de type « 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 ».
+> %%<dl>%% : Ne peut être parent direct que des balises <dt> et/ou <dd>
+> %%<dt>%% : Ne peut pas contenir d'éléments de type « block »
+> %%<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>
+> %%<h1>,<h2>, … <h6>%% : Ne peut contenir que des éléments « inline »
+> %%<hr />%% : Ne peut pas contenir d'éléments
+> %%<noscript>%% : Ne peut contenir que des éléments de type « block »
+> %%<ol>, <ul>%% : Ces balises ne peuvent contenir que des balises <li>.
+> %%<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>
+> %%<table>%% : Ne peut contenir que des balises <tr>, <caption>, <thead>, <tfoot>, <tbody>, <col>, <colgroup>
+\\
+Éléments de type « inline »
+\\
+> %%<a>%% : Ne peut contenir d'autres balises <a>
+> %%<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>.
+> %%<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>.
+> %%<select>%% : Peut être parent direct des balises <optgroup> ou <option>. 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 titres ===
+Il existe différents niveaux de titre, du H1 à H6 et ont chacun leur importance.
+\\
+>Exemple : <h1>Titre de ma page</h1>
+\\
+Il est important de respecter la hiérarchie des différents niveaux de titres, sachant que l'éléments le plus haut est le <h1>. En effet, un titre <h2> ne se retrouvera jamais au dessus d'une balise <h1> dans un document.
+\\
+<WRAP center round tip 60%>
+Conseils SEO : La balise <h1> étant la plus importante, il convient également de ne le faire apparaître qu'une seule fois dans votre document.
+</WRAP>
+\\
+<WRAP center round info 60%>
+Allez plus loin : Le rendu du titre se fera à l'aide du CSS.
+</WRAP>
+\\
+===  Les paragraphes ===
+\\
+En HTML, vous devez préciser où commence un paragraphe et où il se termine. Ceci est le rôle de la balise <p>.
+\\
+<code html>
+<p>Voici un premier paragraphe.</p>
+<p>Voici un second paragraphe.</p>
+</code>
+\\
+=== La mise en forme ===
+\\
+> Mise en gras : %%<strong>%%
+> 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.
+\\
+Exemple :
+<code html>
+<span style="color : red;">Ce texte est en rouge.</span>
+</code>
+\\
+=== 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.\\
+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.\\
+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" />%%
+\\
+<WRAP center round tip 60%>
+Conseils SEO : L'attribut alt permet au moteur de recherche de référencer l'image et les déficients visuels à savoir ce que l'image représente. Le format BMP est à éviter, car trop lourde donc augmente le temps de chargement de votre page.
+</WRAP>
+\\
+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 />%%.
+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 :
+<code html>
+<img src="adresse/image" alt="Description de l'image" usemap="#nomDeLaMap" />
+</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.
+\\
+<code html>
+<map name="nomDeLaMap">
+    <area ...>
+    <area ...>
+</map>
+</code>
+\\
+Les différents attributs de la balise //<area>// sont :
+\\
+> **coords** : qui va contenir les différentes coordonnées de notre zone.
+> **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).
+\\
+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.
+\\
+=== Les liens hypertextes ===
+Un lien hypertexte est un élément HTML permettant d'envoyer le visiteur vers une nouvelle page. On distingue deux types de liens, les liens externes et les liens internes.\\
+Les liens externes sont des liens hypertexte qui renvoie vers une autre page de votre site ou sur le page d'un site tiers.\\
+Pour les liens internes c'est un peu plus compliqué.\\
+Il existe les ancres, ce lien pointe vers un endroit de la page en cours.\\
+\\
+Exemple :
+<code html>
+<a href="#motCle">Texte de mon ancre</a>
+<h2 id="motCle">Texte vers lequel l'ancre est renvoyé</h2>
+</code>
+\\
+Nous pouvons aussi pointer vers une ancre présente sur une autre page.
+\\
+Exemple :
+<code html>
+<a href="http://www.chg-web.com/index.php#motCle">Texte de mon ancre</a>
+</code>
+\\
+Vous pouvez permettre à vos visiteurs d'écrire sur votre adresse e-mail avec la syntaxe « mailto : »
+\\
+Exemple :
+<code html>
+<a href="mailto:miel@chg-web.com">Contacter par mail</a>
+</code>
+\\
+=== Les listes ===
+Elles servent, comme leur nom l'indique, à créer une liste d'items, plus précisément à les énumérer, comme dans le cas d'un sommaire par exemple.\\
+On distingue 5 types de listes différentes, chacun prévu pour un usage bien précis :\\
+  * Les listes non ordonnées, ou à puces.
+  * Les listes ordonnées.
+  * Les listes de définitions.
+  * Les listes de répertoires.
+  * Les listes de menus.
+\\
+Exemple de liste non ordonnées
+<code html>
+<p>Ma liste de courses : </p>
+<ul>
+<li>Champignons</li>
+<li>Avocat</li>
+<li>Dentifrice</li>
+<li>Céréales</li>
+</ul>
+</code>
+\\
+Résultat :\\
+<html>
+<p>Ma liste de courses : </p>
+<ul>
+<li>Champignons</li>
+<li>Avocat</li>
+<li>Dentifrice</li>
+<li>Céréales</li>
+</ul>
+</html>
+\\
+Exemple de liste ordonnées\\
+<code html>
+<p>Top 3 des lettres grecs : </p>
+<ol>
+<li>Alpha</li>
+<li>Beta</li>
+<li>Gamma</li>
+</ol>
+</code>
+\\
+Résultat :
+\\
+<html>
+<p>Top 3 des lettres grecs : </p>
+<ol>
+<li>Alpha</li>
+<li>Beta</li>
+<li>Gamma</li>
+</ol>
+</html>
+\\
+Exemple de listes de définitions
+\\
+<code html>
+<dl>
+    <dt>Orteils</dt>
+    <dd>Définition de orteils</dd>
+    <dt>Doigts</dt>
+    <dd>Définition de doigts</dd>
+</dl>
+</code>
+\\
+Résultat :
+\\
+<html>
+<dl>
+    <dt>Orteils</dt>
+    <dd>Définition de orteils</dd>
+    <dt>Doigts</dt>
+    <dd>Définition de doigts</dd>
+</dl>
+</html>
+\\
+//Les deux autres types de liste sont rarement utilisées.//\\
+Il est possibles d'imbriquer les listes pour obtenir une présentation claire et détaillée d'un menu.\\
+Nous pouvons utiliser les listes pour effectuer des menus déroulants.
+\\
+=== Les tableaux ===
+Les tableaux sont une suite de lignes et de colonnes qui forment un ensemble de cellules.\\
+Autre utilisation des tableaux sont la mise en page de documents. Cette méthode est à éviter mais, à néanmoins, le mérite d'être simple à mettre en œuvre.\\
+Le tableau est délimité par la balise <table>. Le contenu d'un tableau HTML est généré horizontalement. C'est à dire qu'il n'est pas créé colonne par colonne mais ligne par ligne.\\
+Pour créer un tableau, nous commençons par créer les lignes grâce aux balises <tr>. Puis dans ces lignes nous insérons les colonnes grâce aux balises <td>.\\
+Exemple :
+\\
+<code html>
+<table>
+<tr>
+<td>Colonne 1</td><td>Colonne 2</td><td>Colonne 3</td>
+</tr>
+</table>
+</code>
+\\
+<WRAP center round important 60%>
+Attention à bien avoir le même nombre de <td> pour chaque ligne, sinon le navigateur risque de mal interpréter le tableau.
+Nous pouvons insérer un titre dans un tableau avec la balise <caption>
+</WRAP>
+\\
+<code html>
+<table>
+<caption>Titre du tableau</caption>
+<tr>
+<td>Colonne 1</td><td>Colonne 2</td><td>Colonne 3</td>
+</tr>
+</table>
+</code>
+\\
+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 =====
+  * [[:accueil|Accueil]]
+  * [[:gestion-site-internet]]
+  * [[:tutoriel-javascript]]
+  * [[:tutoriel-html]]
+  * [[:tutoriel-php-mysql]]
+  * [[:tutoriel-referencement-seo]]
+<nspages -h1 -exclude:subNs: -textPages="Autres liens rapides pouvant vous intéresser">