HTML - Balises de base
Balises d'en-tête
Tout document commence par un en-tête. Vous pouvez utiliser différentes tailles pour vos titres. HTML a également six niveaux de titres, qui utilisent les éléments<h1>, <h2>, <h3>, <h4>, <h5>, et <h6>. Lors de l'affichage d'un en-tête, le navigateur ajoute une ligne avant et une ligne après cet en-tête.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Cela produira le résultat suivant -
Balise de paragraphe
le <p>La balise offre un moyen de structurer votre texte en différents paragraphes. Chaque paragraphe de texte doit être placé entre une balise d'ouverture <p> et une balise de fermeture </p> comme indiqué ci-dessous dans l'exemple -
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>Cela produira le résultat suivant -
Balise de saut de ligne
Chaque fois que vous utilisez le <br />élément, tout ce qui le suit commence à partir de la ligne suivante. Cette balise est un exemple deempty élément, où vous n'avez pas besoin de balises d'ouverture et de fermeture, car il n'y a rien entre elles.
La balise <br /> comporte un espace entre les caractères bret la barre oblique. Si vous omettez cet espace, les anciens navigateurs auront du mal à rendre le saut de ligne, tandis que si vous manquez la barre oblique et utilisez simplement <br>, il n'est pas valide en XHTML.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>Cela produira le résultat suivant -
Contenu de centrage
Vous pouvez utiliser <center> pour placer n'importe quel contenu au centre de la page ou dans n'importe quelle cellule du tableau.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>Cela produira le résultat suivant -
Lignes horizontales
Les lignes horizontales sont utilisées pour séparer visuellement des sections d'un document. le<hr> La balise crée une ligne de la position actuelle dans le document vers la marge droite et coupe la ligne en conséquence.
Par exemple, vous pouvez donner une ligne entre deux paragraphes comme dans l'exemple ci-dessous -
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>Cela produira le résultat suivant -
Encore <hr /> tag est un exemple de empty élément, où vous n'avez pas besoin de balises d'ouverture et de fermeture, car il n'y a rien entre elles.
le <hr /> l'élément a un espace entre les caractères hret la barre oblique. Si vous omettez cet espace, les anciens navigateurs auront du mal à rendre la ligne horizontale, tandis que si vous manquez la barre oblique et utilisez simplement<hr> il n'est pas valide en XHTML
Conserver le formatage
Parfois, vous voulez que votre texte respecte le format exact de la façon dont il est écrit dans le document HTML. Dans ces cas, vous pouvez utiliser la balise préformatée<pre>.
Tout texte entre l'ouverture <pre> tag et la fermeture </pre> La balise conservera la mise en forme du document source.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>Cela produira le résultat suivant -
Essayez d'utiliser le même code sans le garder à l'intérieur <pre>...</pre> Mots clés
Espaces insécables
Supposons que vous vouliez utiliser l'expression «12 hommes en colère». Ici, vous ne voudriez pas qu'un navigateur divise le "12, Angry" et "Men" sur deux lignes -
An example of this technique appears in the movie "12 Angry Men."Dans les cas où vous ne souhaitez pas que le navigateur client coupe le texte, vous devez utiliser une entité d'espace insécable au lieu d'un espace normal. Par exemple, lorsque vous codez les "12 hommes en colère" dans un paragraphe, vous devez utiliser quelque chose de similaire au code suivant -
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>Cela produira le résultat suivant -