Différences

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

--- web:html:text-structure [2023/03/18 19:45] – [Niveaux de titre] 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 13: / Ligne 13: @@
 Ils sont définis au travers des balises ''h1'', ''h2''...
-| <sxh html;gutter:false>
+<html>
-<h1>Titre de niveau 1</h1>
+<table border=0>
+<tr><td></html>
+ <sxh html;gutter:false>
+<h1>Niveaux de titre</h1>
 <h2>Titre de niveau 2</h2>
 <h3>Titre de niveau 3</h3>
@@ Ligne 20: / Ligne 23: @@
 <h5>Titre de niveau 5</h5>
 <h6>Titre de niveau 6</h6>
-</sxh> | <html><div class="imageB"></html>{{:web:html:pasted:20230318-182424.png}}<html></div></html> |
+</sxh>
+<html></td><td><div class="imageB"></html>{{:web:html:pasted:20230318-200848.png}}
+<html></div></td></tr></table></html>
+===== Paragraphes =====
+Balise **p**
+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 =====
+==== Liste non ordonnée ====
+Unordered List => **ul**
+<html>
+<table border=0>
+<tr><td></html>
+ <sxh html;gutter:false>
+<ul>
+    <li>1er élément</li>
+    <li>2ème élément</li>
+    <li>3ème élément</li>
+</ul>
+</sxh>
+<html></td><td><div class="imageB"></html>{{:web:html:pasted:20230318-200730.png}}
+<html></div></td></tr></table></html>
+==== Liste ordonnée ====
+Ordered List => **ol**
+<html>
+<table border=0>
+<tr><td></html>
+ <sxh html;gutter:false>
+<ol>
+    <li>Elément A</li>
+    <li>Elément B</li>
+    <li>Elément C</li>
+</ol>
+</sxh>
+<html></td><td><div class="imageB"></html>{{:web:html:pasted:20230318-201127.png}}
+<html></div></td></tr></table></html>
+==== Imbrication de listes ====
+<html>
+<table border=0>
+<tr><td></html>
+ <sxh html;gutter:false>
+<ul>
+    <li>1er élément
+        <ul>
+            <li>elm 1.a</li>
+            <li>elm 1.b</li>
+        </ul>
+    </li>
+    <li>2ème élément
+        <ul>
+            <li>elm 2.a</li>
+            <li>elm 2.b</li>
+        </ul>
+    </li>
+</ul>
+</sxh>
+<html></td><td><div class="imageB"></html>{{:web:html:pasted:20230318-201450.png}}
+<html></div></td></tr></table></html>
+==== 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|]]