Différences

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

--- web:html:text-structure [2023/03/18 20:28] – [Paragraphes] jcheron
+++ web:html:text-structure [2024/09/05 07:27] (Version actuelle) – [Imbication de listes] jcheron
@@ Ligne 1: / Ligne 1: @@
-====== HTML - structuration de texte ======
+====== Structuration de texte ======
 ===== Niveaux de titre =====
@@ Ligne 42: / Ligne 42: @@
     Eum quasi dolores aut possimus minima et praesentium reiciendis aut provident corrupti et accusantium galisum!
 </p>
+</sxh>
+<html></td><td><div class="imageB"></html>{{:web:html:pasted:20230318-202524.png}}
+<html></div></td></tr></table></html>
 <wrap important>Les sauts de lignes passés dans le code n'ont aucune influence sur le document HTML produit.</wrap>
-__Utilisation du **br**__
+==== Sauts de ligne forcés ====
-La balise br est une balise orpheline permettant de forcer le passage à la ligne d'une partie du texte, sans quitter le paragraphe. Elle ne doit pas être utilisée pour modifier la présentation du texte, mais sa structure.
+La balise **br** est une balise orpheline permettant de forcer le passage à la ligne d'une partie du texte, sans quitter le paragraphe. \\
+Elle ne doit pas être utilisée pour modifier la présentation du texte, mais sa structure.
+===== Mise en avant =====
+==== Emphase ====
+Pour mettre l'accent sur une partie du texte, utiliser la balise **em** :
+<sxh html;gutter:false>
+<p>Scaleway est un hébergeur web aux <em>pratiques douteuses</em>.</p>
 </sxh>
-<html></td><td><div class="imageB"></html>{{:web:html:pasted:20230318-202524.png}}
-<html></div></td></tr></table></html>
-===== Mise en avant =====
+==== Accentuation ====
+Pour insister sur une partie du texte, utiliser la balise **strong** :
+<sxh html;gutter:false>
+<p>Il est important de lire les <strong>conditions générales de vente</strong>.</p>
+</sxh>
+<WRAP info round>
+La présentation des parties mises en avant avec **em** et **strong** pourra ensuite être adaptée avec la feuille de style associée.\\
+Eviter l'usage des anciennes balises **b**, **i**, **u** permettant de mettre respectivement en gras, italique, souligné.
+</WRAP>
 ===== Listes =====
@@ Ligne 90: / Ligne 107: @@
 <html></div></td></tr></table></html>
-==== Imbication de listes ====
+==== Imbrication de listes ====
 <html>
@@ Ligne 115: / Ligne 132: @@
 ==== div et span ====
+Ce sont 2 balises non sémantiques sans vocation particulière autre que celle de cibler des parties de documents, de façon à leur appliquer un style et une mise en forme.
+  * La balise **div** est de type block et permet de créer une zone regroupant d'autres éléments (paragraphes, autres div...).
+  * La balise **span** est inline et permet de cibler une zone particulière de texte.
+<sxh html;gutter:false>
+<div>
+    <p>Ah ouais, la blague de développeur elle est… spéciale !</p>
+    <p>C’est l’histoire d’un administrateur qui configure ses variables d’environnement, et là……… <span>PATH le chemin !</span></p>
+    <p>Un développeur comme les autres… <span>Mais sûrement un dev J2E</span> !</p>
+</div>
+</sxh>
+Pour aller plus loin : [[web:html:semantic|]]