| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
| web:html:text-structure [2023/03/18 20:07] – [Liste non ordonnée] jcheron | web:html:text-structure [2024/09/05 07:27] (Version actuelle) – [Imbication de listes] jcheron |
|---|
| ====== HTML - structuration de texte ====== | ====== Structuration de texte ====== |
| |
| ===== Niveaux de titre ===== | ===== Niveaux de titre ===== |
| <tr><td></html> | <tr><td></html> |
| <sxh html;gutter:false> | <sxh html;gutter:false> |
| <h1>Titre de niveau 1</h1> | <h1>Niveaux de titre</h1> |
| <h2>Titre de niveau 2</h2> | <h2>Titre de niveau 2</h2> |
| <h3>Titre de niveau 3</h3> | <h3>Titre de niveau 3</h3> |
| <h6>Titre de niveau 6</h6> | <h6>Titre de niveau 6</h6> |
| </sxh> | </sxh> |
| <html></td><td><div class="imageB"></html>{{:web:html:pasted:20230318-182424.png}} | <html></td><td><div class="imageB"></html>{{:web:html:pasted:20230318-200848.png}} |
| <html></div></td></tr></table></html> | <html></div></td></tr></table></html> |
| |
| ===== Paragraphes ===== | ===== 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 ===== | ===== 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 ===== | ===== Listes ===== |
| |
| ==== Liste ordonnée ==== | ==== Liste ordonnée ==== |
| Ordered List => **ol** | 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|]] |
| |
| |
| |
| |
jcheron