Découvez les bases de HTML et XHTML dans ce tutoriel.
Dans ce tutoriel, nous allons voir quels sont les informations à compléter dans la balise head.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- Définition de l'encodage de la page en "UTF-8", qui permet d'encoder toutes les langues, du français au japonais en passant par l'arabe-->
<title>Apprendre HTML / XHTML></title> <!-- Titre affiché dans la barre de votre navigateur et utilisé comme titre lorsque vous faîtes une recherche dans Google -->
<meta name="Description" content="Je vous propose de découvrir les bases du HTML, notamment les éléments que nous allons mettre dans la balise head dans ce tutoriel" /> <!-- Description reprise dans un moteur de recherche -->
<link href="css/bootstrap-tutoriels.css" rel="stylesheet" type="text/css"><!-- Lien vers la feuille de style CSS -->
<script src="js/bootstrap.min.js" type="text/javascript"></script> <!-- Facultatif, lien vers un Javascript-->
</head>
Indique le début de la balise head
<head> <!--Balise head entrante -->
Tout document contenant du texte, et c'est le cas également des fichiers « texte brut » en .txt ou .html, sont enregistrés avec un jeu de caractères précis. Ce jeu de caractères, utilisé pour créer ou enregistrer le document, correspond à l'encodage réel du document.
Il existe un grand nombre de type d'encodage, je vous en donne 2 pour ce qui vont nous intéresser.
qui vous seront utilesPermet de définir le type d'encodage utiliser ISO-8859-1 pour la France (Nous avons des caractéres accentuées etc ..., que nous n'avons pas par exemple en anglais
| Encodage | Description |
| UTF-8 | Permet d'encoder tout type de langue, de l'anglais, du français et de l'arabe si vous le souhaitez |
| ISO-8859-1 | Spécifique à la Francaise, nous avons un grand nombre de caractéres accentués, des cédilles, des accents circonflexes ... La contrainte avec cette encodage, il va falloir écrire les caractères en HTML Exemples : é : é ç : ç |
UTF-8
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Permet de définir le type d'encodage de la page-->
ISO-8859-1
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<!-- Permet de définir le type d'encodage de la page-->
Les balises marquées d'une étoile * ne sont pas à négliger, elles ont de l'importance pour le référencement de votre site web.
| Balise meta | Description de la balise |
| <title>Le titre de la page</title> * | Si techniquement il ne s'agit pas d'une balise Meta, cette balise est souvent utilisée en association avec la "description". Le contenu de cette balise est généralement affiché comme titre dans les résultats de recherche (et bien sûr dans le navigateur des internautes). En savoir plus |
| <meta name="description" content="Une description de la page" /> * | Cette balise fournit une brève description de la page. Dans certains cas, cette description est incluse dans l'extrait qui s'affiche avec les résultats de recherche. En savoir plus |
| <meta name="robots" content="..., ..." /> <meta name="googlebot" content="..., ..." /> |
Ces balises Meta permettent de contrôler l'exploration et l'indexation effectuées par les moteurs de recherche. La balise Meta robots concerne tous les moteurs de recherche. En revanche, la balise Meta "googlebot" est spécifique à Google. Les valeurs par défaut sont "index, follow" (équivalent à "tous") et il n'est donc pas nécessaire de les spécifier. Nous acceptons les valeurs suivantes (si vous insérez plusieurs valeurs, séparez-les par des virgules) :
Désormais, vous pouvez également spécifier ces informations dans l'en-tête de vos pages à l'aide de l'instruction d'en-tête HTTP "X-Robots-Tag". Cette instruction est particulièrement utile pour limiter l'indexation de fichiers non HTML comme les images ou d'autres types de documents. En savoir plus sur les balises Meta |
| <meta name="google" content="nositelinkssearchbox" /> | Lorsque des internautes recherchent votre site, les résultats de recherche Google affichent parfois un champ de recherche spécifique à votre site, ainsi que d'autres liens directs vers ce dernier. Cette balise Meta nous indique de ne pas afficher le champ de recherche associé aux liens sitelink. En savoir plus sur le champ de recherche associé aux liens sitelink. |
| <meta name="google" content="notranslate" /> | Lorsque le contenu d'une page n'existe pas dans la langue choisie par l'internaute, nous fournissons généralement dans les résultats de recherche un lien permettant d'accéder à une traduction. Ainsi, vous avez la possibilité de proposer un contenu unique et utile à un groupe d'internautes plus large. Toutefois, cela peut ne pas être souhaitable dans certains cas. Cette balise META indique à Google que vous ne souhaitez pas fournir une traduction de votre page. |
| <meta name="google-site-verification" content="..." /> | Vous pouvez utiliser cette balise sur la page de niveau supérieur de votre site pour confirmer que vous en êtes le propriétaire pour Search Console. Notez que les valeurs des attributs "name" et "content", y compris les majuscules et les minuscules, doivent correspondre exactement à l'élément fourni. Cependant, vous pouvez remplacer la balise XHTML par HTML ou utiliser un format de balise adapté à votre page. Cela n'a aucune importance. En savoir plus |
| <meta http-equiv="Content-Type" content="...; charset=..." /> <meta charset="..." > |
Cette balise Meta définit le type de contenu de la page ainsi que le jeu de caractères. Veillez à insérer la valeur de l'attribut de contenu entre des guillemets droits. Dans le cas contraire, l'attribut charset pourrait être interprété de manière inappropriée. Nous vous recommandons d'utiliser un encodage Unicode/UTF-8 quand cela est possible. En savoir plus |
| <meta http-equiv="refresh" content="...;url=..." /> | Cette balise Meta renvoie l'internaute vers une autre URL après un certain temps. Elle est parfois utilisée comme une simple redirection. Toutefois, elle n'est pas prise en charge par tous les navigateurs et peut induire en erreur les internautes. Le site W3C conseille de ne pas l'utiliser. Nous vous recommandons plutôt l'utilisation d'une redirection 301 côté serveur. |
| Balise meta | Description de la balise |
<meta name="Keywords" content="Formation HTML Nord" /> |
Cette balise n'est définitivement plus utilisé par Google, d'autres moteurs de recherche peuvent peut être encore l'utiliser. |
Il esxite bien d'autres balises Meta, je vous donne les plus utiles pour le référencement, si vous voulez trouver une liste compléte, allez sur Rankspirit
Permet de lier une feuille de style CSS externe qui contiendra la mise en forme de nos pages.
<link href="feuille_de_style.css" rel="stylesheet" type="text/css" />
Dans la partie head de votre page, il faudra englober votre code CSS entre les balises <style type="text/css"> et </style> .
<style type="text/css">
.text-green {
color: #336600;
font-weight: bold;
font-size: 14px;
}
</style>
Je vous le déconseille fortement, si la régle est stockée à l'intérieur de la page, vous devrez la Copier et la Coller dans toutes les autres pages,et même chose en cas de modification.
Il est préférable de stocker votre régles dans une feuille de style externe
Qu'est ce que le Javascript ?
JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives mais aussi pour les serveurs. C’est un langage orienté objet à prototype, c’est-à-dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne sont pas des instances de classes, mais qui sont chacun équipés de constructeurs permettant de créer leurs propriétés, et notamment une propriété de prototypage qui permet d’en créer des objets héritiers personnalisés. En outre, les fonctions sont des objets de première classe.
Le langage a été créé en 1995 par Brendan Eich (Brendan Eich étant membre du conseil d'administration de la fondation Mozilla à cette époque) pour le compte de Netscape Communications Corporation. Le langage, actuellement à la version 1.8.2, est une implémentation de la 3e version de la norme ECMA-262 qui intègre également des éléments inspirés du langage Python. La version 1.8.5 du langage est prévue pour intégrer la 5e version du standard ECMA3.
Source Wikipédia
Pour faire simple, le Javascript vous permettra de réaliser des interactions, animations, effets etc ... qui s'éxécuteront sur votre naivigateur.
Lier un fichier javascript contenu dans un fichier externe.
<script src="effet.js" type="text/javascript"></script>
Vous pouvez de même insérer du code Javascript dans le head entre les balises <script type="text/javascript"> et
</script>
<script type="text/javascript">
<!-- Mon code Javascript -->
</script>
Indique la fin de la balise head
</head>
<!-- head sortant -->