web:html:text-structure

Différences

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

Lien vers cette vue comparative

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:25] – [Paragraphes] jcheronweb: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 ===== ===== Niveaux de titre =====
Ligne 46: Ligne 46:
 <html></div></td></tr></table></html> <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 =====
  
Ligne 83: Ligne 107:
 <html></div></td></tr></table></html> <html></div></td></tr></table></html>
  
-==== Imbication de listes ====+==== Imbrication de listes ====
  
 <html> <html>
Ligne 108: Ligne 132:
  
 ==== div et span ==== ==== 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|]]
  
  
  
  
  • web/html/text-structure.1679167527.txt.gz
  • Dernière modification : il y a 2 ans
  • de jcheron