Médiaforma

All posts tagged head

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la rubrique précédente, vous avez appris à insérer l’attribut style dans une balise quelconque pour modifier ses caractéristiques. Dans cette rubrique, je vais vous montrer comment définir une feuille de styles interne, entre les balises <head> et </head> de la feuille. Pour cela, vous devez insérer une balise <style type=”text/css”> et terminer cette balise avec une balise </style>. Les styles seront redéfinis entre ces deux balises.

A titre d’exemple, nous allons redéfinir les caractéristiques de la balise <h2>. Pour cela, nous précisons le nom de la balise, sans l’encadrer par les caractères “<” et “>”, puis nous insérons des accolades ouvrante et fermante à sa suite. Les propriétés modifiées seront insérées entre les deux accolades. Ici, nous redéfinissons la couleur et la taille des balises <h2>.

Comme vous pouvez le voir, le simple fait d’insérer une balise <h2> dans le document lui fait adopter la couleur et la taille définie dans la feuille de styles.

SI vous insérez une autre balise <h2>, elle adopte également les caractéristiques redéfinies dans la feuille de styles interne. Tout le document est donc concerné par la feuille de styles.


L’en-tête du document est délimité par les balises <head> et </head>. Il est généralement utilisé pour :

  • définir le titre du document ;
  • décrire le contenu du document et lui associer un ou plusieurs mots-clés ;
  • insérer du code CSS et/ou JavaScript.

Dans cette rubrique, nous allons nous intéresser au premier point.

Le titre du document est affiché dans l’onglet actif du navigateur. Attention à ne pas choisir un titre trop long, sans quoi il sera tronqué. Le titre est également utilisé pour référencer la page dans les moteurs de recherche. Il est donc judicieux de choisir un titre le plus complet possible, ou du moins, qui représente le contenu de la page d’une façon aussi complète que possible.

Etant donné que peu d’internautes s’intéressent aux informations affichées dans les onglets du navigateur, j’ai tendance à vous conseiller de ne considérer que l’aspect moteur de recherche du titre. Définissez donc un titre propre à chaque page et limitez sa taille à 70 caractères, car les titres des pages affichés dans les moteurs de recherche ne dépassent pas cette limite.

Mais au fait, comment définit-on un titre ?

Vous utiliserez pour cela la balise <title></title> :

Appuyez sur Ctrl+S pour sauvegarder le document puis sur Alt+Ctrl+Maj+I pour l’afficher dans Internet Explorer. Comme vous pouvez le voir, le titre est tronqué :

D’autre part, il faut bien avouer que les mots choisis ne sont pas optimisés en ce qui concerne le référencement. Vous auriez pu choisir quelque chose comme “Formation HTML5 – La balise title“.


Voici la structure minimale d’une page HTML 5 :

<!DOCTYPE html>
<html>
     <head>
     </head>
     <body>
     </body>
</html>

La balise <!DOCTYPE> doit toujours apparaître en premier. Elle indique au navigateur les règles d’écriture utilisées dans le code. Cette première ligne indique que la version 5 du langage HTML sera utilisée. Dans les versions précédentes, la balise <!DOCTYPE> était bien plus complexe. Mais cela fait partie du passé, et vous utiliserez uniquement cette version simplifiée.

La balise <html> matérialise le début du document HTML, et la balise </html> la fin de ce document.

Les balises <head> et </head> délimitent l’en-tête du document. Vous verrez ce qui peut être placé entre ces deux balises dans une autre rubrique.

Enfin, les balises <body> et </body> délimitent le corps du document. Tout ce qui est écrit entre ces deux balises apparaîtra dans le navigateur Web.

Lancez la commande Enregistrer dans le menu Fichier, sélectionnez Hyper Text Markup Language dans la liste Type, donnez le nom squelette à la page, choisissez le dossier de stockage du document et cliquez sur Enregistrer.

Déroulez le menu Exécution et lancez la commande :

  • Launch in IE pour ouvrir ce document dans Internet Explorer ;
  • Launch in Chrome pour ouvrir ce document dans Google Chrome ;
  • Launch in Firefox pour ouvrir ce document dans Mozilla Firefox ;
  • Launch in Safari pour ouvrir ce document dans Safari.

Bien entendu, ces commandes supposent que les navigateurs correspondants sont installés sur votre ordinateur. Dans le cas contraire, elles n’auront aucun effet.

Comme vous pouvez le voir, rien ne s’affiche.

Entrez du texte entre les balises <body> et </body>. Ici par exemple, nous entrons le texte “Bonjour“. Sauvegardez le document avec la commande Enregistrer dans le menu Fichier ou avec le raccourci clavier Ctrl+S.

Remarque

Si vous n’avez pas l’habitude des raccourcis clavier, sachez le raccourci Ctrl+S est obtenu en maintenant enfoncée la touche Ctrl, en appuyant puis en relâchant la touche S, puis en relâchant la touche Ctrl. Cela a l’air compliqué, mais une fois que le mécanisme est compris, il est difficile de s’en passer !

Lancez à nouveau la commande Launch in IE dans le menu Exécuter. Cette fois-ci, le texte “Bonjour” est affiché dans le navigateur.

Bravo, vous venez de créer votre premier document HTML5 !