Web
Client

Texte, balises et concept de base

Concept de base

Dans la page d'introduction au HTML, nous avons brièvement étudié les balises de base permettant de créer une page Web sans aucun contenu. Dans ce document, nous commencerons à regarder les balises permettant d'ajouter du contenu à notre page Web. Toutes ces balises doivent être ajouté à l'intérieur de la balise <body>. En effet, la balise <body> contient le contenu d'une page Web. Donc, la majorité des balises que nous ajouterons seront toujours cette balise.

Il est important de comprendre que le HTML est un langage de balisage hiérarchique. Ceci veut dire que l'on peut généralement mettre des balises dans une autre balise. Ce principe est éssentiel au bon fonctionnement du HTML et sera utilisé très fréquemment. Vous aurez donc très souvent à mettre des balises dans une autre balise et cela est normal. Habituez-vous rapidement!

Il faut tout de fois faire attention. Lorsque nous mettons des balises à l'intérieur d'une autre, il est parfois possible de faire des erreurs et de croiser les balises. C'est un énorme problème que vous devez régler le plus rapidement possible. Le croisement de balise peut générer des erreurs et des problèmes sévères dans vos pages web.

HTML
Attention:
Le HTML sert uniquement à structurer nos pages Web. Il ne sert donc aucunement à faire une "belle" page Web. Vous ne devez pas utiliser le HTML pour styliser vos interfaces. Nous utiliserons le CSS pour cela dans quelques semaines. Attendez-vous donc à ce que vos premières pages Web ne soit pas très belle pour le moment.

Texte

Le texte fait partie intégrante du web et du HTML. En effet, les premières page web constitait simplement à afficher de l'information textuel. Encore aujourd'hui, la majorité des sites web sont basé sur l'affichage de texte. Dans le HTML, vous pouvez insérer du texte presque n'importe où. Il vous suffit de taper du texte normalement et celui-ci sera affiché dans la page web.

HTML

Il est important de noter que le texte devra généralement être insérer dans certaines balises particulière si on veut bien respecter les bonnes pratiques de programmation web. Bien que cela soit valide, on ne devrait jamais mettre de texte directement dans le <body>.

Attention:
Le HTML gère les caractères blanc (espaces, tabulations et retours de lignes) de façon particulière. En effet, si le navigateur voit plusieurs caractères blancs de suite, il les combinera simplement en un espace. Bref, si vous mettez plusieurs espaces entre 2 mots ou si vous faites plusieurs retours de ligne entre 2 phrase, un seul espace sera affiché. Faites attentionm puisque cela peut parfois être déroutant lorsque nous commençons à utiliser le HTML.

Commentaires

Les commentaires, comme dans les langages de programmation, servent à aider à organiser le code dans un fichier. Les commentaires ne sont pas affichés lorsque la page HTML est affiché dans un navigateur Web. Pour faire un commentaire en HTML, vous devez simplement mettre du texte entre les balises <-- et -->.

HTML

Texte important

Si vous désirez spécifier qu'une partie du texte de votre page Web est important, vous pouvez utiliser la balise <strong>. Par défaut, la plupart des navigateur Web afficheront les éléments dans une balise <strong> en gras. Toutefois, n'utilisez pas cette balise pour mettre du contenu en gras. Cette balise ne sert qu'à indiquer l'importance d'un morceau de texte. Comme mentionné ci-dessus, le CSS que nous apprendrons dans quelques semaines nous permettra de mettre du contenu en gras pour le côté visuel de notre site Web.

HTML

Entête

Les balises d'entête (header), servent à mettre des titres dans les pages Web. Essentiellement, le texte ou les balises qui se trouve dans les balises d'entête seront considéré comme un titre dans la page. Le numéro dans le <h?> est un nombre de 1 à 6 représentant l'importance du titre. Ainsi, un titre <h1> est un titre plus important, ou plus global qu'un titre <h2>. En général, vous n'aurez qu'à utiliser les 3 premiers niveaux des entêtes.

HTML
Attention:
Vous devez toujours utiliser les titres dans le bon ordre. Ainsi, un <h4> devrait toujours être après un <h3> qui devrait toujours être après un <h2>, ainsi de suite. Vous ne devez donc pas passer directement d'un <h1> à un <h5>.

Paragraphe

Les paragraphes servent à mettre un bloque de texte dans le HTML. Même si vous n'avez que quelques mots à écrire, le paragraphe peut être une bonne idée. Il y a toutefois d'autres balise qui peuvent nous être utile pour le texte. Pour créer un paragraphe, nous utiliserons la balise <p>.

HTML

Liste ordonnée

Les listes ordonnées <ol> servent principalement à afficher une liste de texte avec un numéro devant chacun d'eux. On l'utilise conjointement avec la balise <li> qui représente un élément de la liste.

HTML

Liste non ordonnée

Les listes non ordonnées <ul> servent principalement à afficher une liste de texte simplement avec des points ou barres. On l'utilise lui-aussi conjointement avec la balise <li> qui représente un élément de la liste, comme pour la liste ordonnée.

HTML
Attention:
La balise <li> doit absolument se retrouver à l'intérieur d'une balise <ol> ou <ul>. Si vous ne respectez pas cette règle, votre HTML ne sera pas valide et il vous causera des problèmes plus tard.

Liste imbriquée

Les listes, ordonnées ou non peuvent être mises l'une dans l'autre pour créer plusieurs niveau dans la liste. Il est même possible de mélanger les listes ordonnée et non ordonnée ensemble. Pour ce faire, nous mettrons simplement des listes à l'intérieur des <li>.

HTML
Attention:
Les listes imbriquées doivent toujours être ajouté à l'intérieur d'un <li>. Certaines personnes ont parfois tendance à les mettre directement dans la liste parente, ce qui n'est pas du HTML valide. À l'affichage, la liste semblera peut-être correcte, mais cela peut causer d'énormes problèmes plus tard.

Liste de description

Les listes de description <dl> sont utilisé pour afficher un terme ou une courte phrase, suivi de sa description. On l'utilisera conjointement avec les balises <dt> pour donner le terme et <dd> pour donner la description.

HTML
Attention:
La balise <dt> doit toujours être suivie de la balise <dd>. De la même façon, la balise <dd> doit toujours être précédé de la balise <dt>. Si vous ne suivez pas cette règle, votre HTML ne sera pas valide et risque de vous créer des erreurs plus tard.