HTML - Formatage
Si vous utilisez un traitement de texte, vous devez être familiarisé avec la possibilité de mettre du texte en gras, en italique ou souligné; ce ne sont que trois des dix options disponibles pour indiquer comment le texte peut apparaître en HTML et XHTML.
Texte en gras
Tout ce qui apparaît à l'intérieur <b>...</b> élément, est affiché en gras comme indiqué ci-dessous -
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>Cela produira le résultat suivant -
Texte en italique
Tout ce qui apparaît à l'intérieur <i>...</i> L'élément est affiché en italique comme indiqué ci-dessous -
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>
</html>Cela produira le résultat suivant -
Texte souligné
Tout ce qui apparaît à l'intérieur <u>...</u> élément, est affiché avec souligné comme indiqué ci-dessous -
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>
</html>Cela produira le résultat suivant -
Texte d'avertissement
Tout ce qui apparaît à l'intérieur <strike>...</strike> L'élément est affiché barré, qui est une fine ligne à travers le texte comme indiqué ci-dessous -
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>Cela produira le résultat suivant -
Police à espacement fixe
Le contenu d'un <tt>...</tt>L'élément est écrit en police monospace. La plupart des polices sont appelées polices à largeur variable car les différentes lettres sont de largeurs différentes (par exemple, la lettre «m» est plus large que la lettre «i»). Dans une police à espacement fixe, cependant, chaque lettre a la même largeur.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>Cela produira le résultat suivant -
Texte en exposant
Le contenu d'un <sup>...</sup>l'élément est écrit en exposant; la taille de police utilisée est la même que celle des caractères qui l'entourent mais est affichée à la moitié de la hauteur d'un caractère au-dessus des autres caractères.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>Cela produira le résultat suivant -
Texte en indice
Le contenu d'un <sub>...</sub>l'élément est écrit en indice; la taille de police utilisée est la même que celle des caractères qui l'entourent, mais elle est affichée à la moitié de la hauteur d'un caractère sous les autres caractères.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>Cela produira le résultat suivant -
Texte inséré
Tout ce qui apparaît à l'intérieur <ins>...</ins> L'élément est affiché sous forme de texte inséré.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>Cela produira le résultat suivant -
Texte supprimé
Tout ce qui apparaît à l'intérieur <del>...</del> élément, s'affiche sous forme de texte supprimé.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>Cela produira le résultat suivant -
Texte plus grand
Le contenu du <big>...</big> L'élément est affiché une taille de police plus grande que le reste du texte qui l'entoure comme indiqué ci-dessous -
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>Cela produira le résultat suivant -
Texte plus petit
Le contenu du <small>...</small> L'élément est affiché une taille de police plus petite que le reste du texte qui l'entoure comme indiqué ci-dessous -
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>Cela produira le résultat suivant -
Regrouper le contenu
le <div> et <span> Les éléments vous permettent de regrouper plusieurs éléments pour créer des sections ou des sous-sections d'une page.
Par exemple, vous souhaiterez peut-être placer toutes les notes de bas de page sur une page dans un élément <div> pour indiquer que tous les éléments de cet élément <div> sont liés aux notes de bas de page. Vous pouvez ensuite attacher un style à cet élément <div> afin qu'il apparaisse à l'aide d'un ensemble spécial de règles de style.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>
<div id = "content" align = "left" >
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>Cela produira le résultat suivant -
L'élément <span>, d'autre part, peut être utilisé pour regrouper uniquement des éléments en ligne. Donc, si vous avez une partie d'une phrase ou d'un paragraphe que vous souhaitez regrouper, vous pouvez utiliser l'élément <span> comme suit.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style = "color:green">span tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>
</html>Cela produira le résultat suivant -
Ces balises sont couramment utilisées avec CSS pour vous permettre d'attacher un style à une section d'une page.