Tutoriel HTML chapitre 3: balises html

groupetma-html-css-banner

Les balises html de base et leurs attributs

Après avoir passé à travers les deux premiers chapitres, les titres et paragraphes n’ont plus de secrets pour vous… heu… pas tout à fait! Il reste quelques notions à voir mais dans ce chapitres nous verrons plusieurs autres balises de base tel que les images et les hyperliens.

Ce chapitre entier sera consacré au contenu de votre page (ce qui se trouve entre les balises <body>.

Les balises titre

Exercice 3.1: découvrir les titres disponibles

1. Copiez-collez ce code dans une nouvelle page html.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Les balises titres en HTML</title>
</head>
<body>
<h1>Titre h1</h1>
<h2>Titre h2</h2>
<h3>Titre h3</h3>
<h4>Titre h4</h4>
<h5>Titre h5</h5>
<h6>Titre h6</h6>
</body>
</html>

Les balises titre seront, pour le moment, toujours en gras et la taille sera en rapport au chiffre dans la balise.

balises-titre-html

Les différentes balises titre associées au contenu (et non le titre du site).

À ne pas confondre avec la balise <title>

La distinction est importante! Les balises <h1>, <h1>, etc sont utilisées pour votre contenu dans la section body. À ne pas confondre avec la balise title dans la section head.

Une dernière chose concernant les titres de contenu

Normalement, le titre <h1> sert pour le titre principale de la page et même du site. De plus, les <h5> et <h6> sont très rarement utilisés. Mais entre nous, vous faites ce que vous voulez!

Attention! À partir de maintenant, pour simplifier, je ne mettrez plus les balises <!DOCTYPE html>, <html> et <head>. Assurez-vous que dans votre page, ces balises sont présentes.

La balise paragraphe

Comme nous avons vu au chapitre précédent, le langage HTML utilise la balise <p> pour délimiter le début d’un paragraphes, et </p> pour sa fin. Notez que si vous utilisez un outil en ligne comme WordPress ou Blogger, par exemple, les balises paragraphe sont parfois invisible pour alléger le texte.

Exercice 3.2: ajoutons quelques lignes à notre paragraphe

1. Ajoutez ce nouveau paragraphe à votre page web.

<body>
<h1>Mon super site</h1>
<p>Voilà tout ce que ça prends pour faire une page web!</p>
<p>En html, peu importe le nombre d'espace entre mes mots, 
les navigateurs en afficherons qu'un seul. 
Donc, si je mets trois espaces consécutifs entre 
ces parenthèses (   ), il n'en restera qu'un seul!</p>
</body>

2. Faites une sauvegarde et affichez votre page web dans un navigateur.

Vous devriez avoir ce résultat…

html-retours-disparus

Le navigateur a fait de la magie! Non seulement les trois espaces sont devenu un seul espace, mais tous les retours de paragraphe ont étés remplacés par des espaces!!!

Le texte ne s’affiche pas comme prévu!

Une chose importante à savoir: en HTML, les retours sont considérés comme un espace. C’est la raison pourquoi les lignes ne sont pas coupées aux endroits que nous avions prévus.

Comment les espaces sont gérés en HTML

Pour permettre de bien aérer le code et le séparer comme nous le désirons, les navigateurs interprètent les espaces consécutifs et les retours de paragraphe comme un seul espace. Vous vous souvenez de l’indentation de quatre espaces devant nos lignes? Ils n’apparaissent pas dans le navigateur web pour cette raison. De plus, vous pouvez ajouter des retours de paragraphes comme bon vous semble pour séparer les sections de votre code et rien ne paraitra dans le navigateur.

Pour couper une ligne dans un même paragraphe

Pour couper une ligne sans changer de paragraphe, vous devez utiliser la balise de bris de ligne <br />.

Exercice 3.3: couper nos lignes de paragraphe

1. Ajoutez une balise <br / > à la fin de vos lignes de paragraphe.

2. Aérer notre code en ajoutant des espaces.

<body>
<h1>Mon super site</h1>
<p>Voilà tout ce que ça prends pour faire une page web!</p>
<p>En html, peu importe le nombre d'espace entre mes mots,<br />
les navigateurs en afficherons qu'un seul.<br />
Donc, si je mets trois espaces consécutifs entre<br />
ces parenthèses (   ), il n'en restera qu'un seul!</p>
</body>

2. Faites une sauvegarde et affichez votre page web dans un navigateur.

Vous devriez avoir ce résultat… qui est plus ce à quoi on s’attendais!

html-retours-bris-de-ligne

La balise orpheline <br /> permet de couper une ligne tout en restant dans le même paragraphe.

Nos lignes sont maintenant coupées exactement où nous voulions. En ce qui concerne plusieurs espaces consécutifs, nous verrons cela plus tard avec les entities Entities
Caractères réservés (dans ce cas-ci au langage HTML) qui doivent être remplacé par autre chose.
.

Insérer des images

Maintenant que nous sommes des experts en titres et en paragraphes, passons à la suite: insérer une image. Si vous avez lu les chapitres précédents, vous savez que certaines balises ont besoins d’attributs. La balise pour les images en est une.

Exercice 3.4: enregistrez une des deux images dans votre dossier «formation_html»

1. Créez un dossier «_images» dans votre dossier «formation_html».

2. Faites un clique-droit sur l’image de votre choix et choisissez «Enregistrer-sous» pour sauvegardez l’image dans le nouveau dossier «_images».

ashley-greene_350px shanning-tatum_350px grumpy-cat_350px paysage_350px

3. Copiez ce code dans votre document html et faite une sauvegarde.

...
<h2>Ma super image</h2>
<img src="_images/NOM-DE-L'IMAGE-CHOISIE.jpg" alt="image hollywood" />
</body>

Bien évidemment, remplacez la partie de code «NOM-DE-L’IMAGE-CHOISIE» par le nom de l’image que vous aurez choisi en vous assurant que le «.jpg» est bien en place.

Maintenant lorsque vous rafraîchissez votre page dans le navigateur (refresh), le nouveau titre et l’image vont s’afficher.

page-web-avec-image

Si votre image n’apparaît pas, assurez-vous que votre page est bien sauvegardée et que vos fichiers sont placés comme dans l’image ci-dessous.

hierarchie-dossier

Dans cette hiérarchie, le fichier html est au même niveau que le dossier _images.

Attribut source «src»

Cet attribut indique la source d’où se trouve l’image. Présentement, nous lui indiquons que l’image se trouve dans le dossier situé au même niveau que la page html, dans le dossier «_images». Mais cette image aurait pu se trouver sur le web. Dans ce cas, nous aurions inscrit l’adresse web complète de l’image, incluant le http://.

Exercice 3.4b: utiliser un lien absolu comme source d’image

1. Pour le plaisir, remplacez le lien de l’image choisie par celui-ci:

...
<h2>Mon autre super image</h2>
<img src="https://www.groupetma.com/wp-content/uploads/2014/12/image-surprise-300px.jpg" alt="image surprise" />
</body>

Assurez-vous de prendre la ligne au complet (incluant l’attribut alt).

Attribut texte alternatif «alt»

Ce qui se trouve dans cet attribut sera affiché dans le cas où l’image n’est pas disponible. Pour le voir, effacez une partie de l’adresse du lien dans votre page html, sauvegardez puis rafraîchissez votre fenêtre de navigateur.

Ça ne fonctionne pas? C’est que nous n’avons pas défini de largeur à notre image. Passez à l’attribut suivant et tout va devenir clair!

Attribut largeur «width» et hauteur «height»

Normalement, pour ne pas que le temps de chargement soit trop long, vos images devraient avoir la bonne taille. Mais il peut arriver que vous ayez besoin de définir une autre taille dans votre code html à l’aide d’attributs.

Exercice 3.5: définir la largeur de l’image en place

1. Ajoutez un attribut <width> à votre image.

...
<h2>Ma super image</h2>
<img src="_images/NOM-DE-L'IMAGE-CHOISIE.jpg" alt="image hollywood" width="200"/>
</body>

Les dimensions dans ces attributs sont définis en pixels. Donc dans ce cas-ci, l’image sera réduite à 200 pixels de largeur (originalement, elle est de 350 pixels). Par défaut, si l’une ou l’autre de la largeur ou de la hauteur n’ont pas de mesure définie, le tout se fera proportionnellement. Remarquez, vous pouvez décider de préciser la largeur ET la hauteur… mais si vos calculs ne sont pas proportionnels, visuellement, ce ne sera peut-être pas très joli!

L’ordre des attributs

L’ordre dans lequel vous inscrivez les attributs n’a aucune importance. Vous pouvez commencer par alt, ensuite src, tout fonctionnera parfaitement. La seule chose est que la bonne pratique est la constance. Si vous voulez commencer par l’attribut alt pour votre image, vous devriez alors toujours commencer par cet attribut tout au long de votre site. Mais encore une fois, c’est votre site et vous faites ce que vous voulez!

Les hyperliens

À quoi bon avoir une page web sans hyperliens Hyperliens
Notamment utilisés dans le World Wide Web pour permettre le passage d’une page Web à une autre à l’aide d’un clic.
? Un lien peut vous mener sur un autre site complètement différent, sur une autre page de votre site ou même à un endroit précis sur une même page.

Exercice 3.6: créer un hyperlien.

1. Ajoutez un lien à votre page.

...
<h2><a>Lien vers Groupe tma</a></h2>    
</body>

2. Ajoutez un attribut «destination» à votre hyperlien.

Comme vous pouvez le constater, la balise hyperlien fait partie de celles qui ont besoins d’attributs. Sans attributs, le lien mène nulle part. Nous allons rester simple et ajouter une adresse que vous connaissez déjà.

...
<h2><a href="https://www.groupetma.com">Mon super hyperlien</a></h2>
</body>

Maintenant, rafraichissez votre page et cliquez votre hyperlien, il sera actif. Les balises <a> auraient pu être sur la même ligne que <h2>. Je l’ai placé sur une ligne différente pour que l’on puisse bien voir. Souvenez-vous, les retours et espaces ne veulent rien dire en html.

Maintenant, peut-être vouliez-vous que votre lien s’ouvre dans une autre fenêtre?

3. Ajoutez un attribut «cible» à votre hyperlien.

...
<h2><a href="https://www.groupetma.com" target="_blank">Lien vers Groupe tma</a></h2>
</body>

Notez que l’attribut target ne permet pas de contrôler si le lien s’ouvrira dans une nouvelle fenêtre ou un nouvel onglet. Cela appartient au navigateur de décider.

Écrire src ou href en relatifs ou absolus

Il existe deux façon d’écrire une source ou une destination lorsque ceux-ci se trouvent à l’intérieur de votre propre site. Par exemple pour faire un lien vers l’image suivante:

hierarchie-dossier

Dans cette hiérarchie, le fichier html est au même niveau que le dossier _images.

  • absolus: https://www.groupetma.com/wp-content/uploads/2014/12/ashley-greene_350px.jpg
  • relatif: _images/ashley-greene_350px.jpg

Les deux méthodes fonctionnent mais lorsque vous pouvez travailler en relatif, faites-le! C’est beaucoup moins compliqué pour le navigateur et aussi pour vous si jamais votre site change de nom ou d’adresse.

Exercice 3.7: créer des liens entres pages.

1. Créez un nouveau dossier nommé «_html».

2. Copiez votre page html à l’intérieur.

3. Renommez cette nouvelle page «page-02.html».

4. Remplacez le contenu de la page «page-02.html» par ceci.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Page 2</title>
</head>
<body>
<h2>Ma super page 2</h2>
<p>Lien vers la page principale</p>
</body>
</html>

Votre dossier devrait maintenant ressembles à ceci:

hierarchie-deux-niveau-de-pages

5. Ouvrez la page page-web.html et faites un lien relatif vers la page page-02.html.

<a href="_html/page-02.html">
<h2>Lien vers la page 2</h2>    
</a>

6. Ouvrez la page page-02.html et faites un lien relatif vers la page page-web.html.

La page page-web.html se trouve à l’extérieur du dossier _html. Pour sortir du dossier, il suffit d’écrire ../ puis la page vers laquelle le lien doit aller.

<h2>Ma super page 2</h2>
<a href="../page-web.html">
<p>Lien vers la page principale</p>
</a>

Maintenant, après avoir tout sauvegarder, vous pouvez ouvrir votre page page-web.html et cliquer le lien vers la page page-02.html. Une fois cette page ouverte, cliquez le lien vers la page originale pour vérifier que votre lien fonctionne bien… des heures de plaisir!

Les listes à puce et à numéro

Comme dans toutes les applications de mise en page, vous avez accès à des listes. La façon qu’elles sont nommées sont:

  • liste ordonnée <ol> (ordered list);
  • liste non-ordonnée <ul> (unordered list).

Les balises <ol> et <ul> déterminent le tyle de liste. Mais à l’intérieur des liste, chacun des éléments sera placé entre des balises <li>

Exercice 3.8: créer des listes.

1. Ajoutez le code suivant à votre document html.

...
<h2>Mes super listes</h2>
<p>Une liste ordonnée comporte des numéros.</p>
<ol>
<li>Ceci est un élément de liste;</li>
<li>Ceci en est un autre.</li>
</ol>
<p>Une liste non-ordonnée comporte des puces.</p>
<ul>
<li>Ceci est un élément de liste;</li>
<li>Ceci en est un autre.</li>
</ul>
</body>
</html>

Plus tard à l’aide du CSS, nous verrons que les puces peuvent être remplacées par autre chose, et même qu’elles peuvent êtres complètement retirées.

Balises pour mettre en gras et italique

Pour mettre du texte en gras ou italique, simplement utiliser les balises <b> et <i>.

Exercice 3.9: Mettre du texte en gras et italique.

1. Ajoutez le code suivant à votre document html.

...
<h2>Les dernières balises de ce chapitre donnent du styles</h2>
<p>Voici du texte <b>gras</b>!</p>
<p>Voici du texte <i>italique</i>!</p>
</body>
</html>

Deux façon de mettre en gras et italique

Il existe en fait deux façon de faire qui, visuellement, donnent le même résultat. Mais vous vous souvenez lorsque je disais que les balises donnait un sens à leur contenu?

Les balises <b> et <i> disent au navigateur de mettre le texte en gras ou italique. Mais il existe aussi les balises <strong> et <em> qui semblent faire la même chose. Visuellement, en effet, c’est probablement semblable (selon le navigateur).

  • Ce texte utilise la balise <b>
  • Ce texte utilise la balise <strong>
  • Ce texte utilise la balise <i>
  • Ce texte utilise la balise <em>

Dans les fait, la balise <strong> existe pour faire ressortir le texte. La balise <em>, elle, existe pour mettre de l’emphase sur le texte. Donc lorsque les engins de recherche indexeront votre site, ces balises seront pris en considération d’une certaine façon. En tout cas, plus que du simple texte gras ou italique.

En résumé

Les titres

Il existe plusieurs balises titres

  • la balise <h1> est utilisée surtout pour le titre principale du site sue la page d’accueil;
  • les balises <h5> et <h6> ne sont pas souvent utilisées.

Les espaces et retours dans mon code n’apparaissent pas dans la fenêtre du navigateur

Si je désire couper un paragraphe, je dois utiliser la balise

Les images

La balise <img /> (image) a besoin de deux attributs:

  • src: indique où se trouve l’image;
  • alt: ce qui sera affiché si la navigateur ne trouve pas l’image. Par contre, je dois spécifier une largeur pour que le texte s’affiche.

Bien que mon image devrait toujours avoir la bonne grandeur, je peux changer la largeur et/ou la hauteur avec les attributs suivants:

  • width: attribut de largeur d’affichage de l’image;
  • height: attribut de hauteur d’affichage de l’image.

La valeur de ces deux attributs est en pixels et l’ordre des attributs n’a pas d’importance.

Les hyperliens

La balise <a> (hyperlien) a besoin de deux attributs:

  • href: indique où se trouve l’image;
  • target: me permet de décider si le lien s’ouvre dans la même fenêtre du navigateur ou dans une nouvelle.

Je peux écrire la source d’une image ou la destination d’un hyperlien de façon relative ou absolue.

Les liste

Il existe deux types de liste:

  • Liste ordonnée ol: liste avec un numéro;
  • Liste non-ordonnée ul: liste à puce.

Peu importe le type de liste, chacun des éléments doit se trouver dans une balise li.

Gras et italique

La balise pour mettre le texte en gras est <b>. Pour mettre le texte en italique c’est <i>

Visuellement, les balises <strong> et <em> donnent le même résultat mais techniquement, elle ne servent à faire ressortir un texte ou è donner de l’emphase.

Tutoriel HTML chapitre 2  &verbar;  Tutoriel HTML chapitre 4 (bientôt)


Loading...