Différences

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

--- web:html:text-structure [2023/03/18 20:20] – [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 33: / Ligne 33: @@
 Un paragraphe est un bloc de texte, éventuellement sur plusieurs lignes, dont les lignes vont s'ajuster automatiquement en fonction de la largeur du conteneur.
+<html>
+<table border=0>
+<tr><td></html>
+ <sxh html;gutter:false>
+<p>Lorem ipsum dolor sit amet. Hic Quis cupiditate est neque
+    esse non maxime dolor vel voluptate dolorem ad totam galisum et suscipit adipisci.
+    Ut facere laudantium non quaerat exercitationem sed voluptatem minima cum laborum itaque et officia officiis.
+    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>
+==== 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.
 ===== 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>
+==== 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 72: / Ligne 107: @@
 <html></div></td></tr></table></html>
-==== Imbication de listes ====
+==== Imbrication de listes ====
 <html>
@@ Ligne 97: / 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|]]