Hypertext Markup Language
Le HTML Hypertext Markup Language est le langage "de balises" utilisé pour construire des documents (pages web) pouvant être visualisés sur internet par un navigateur ou explorateur (Internet Explorer, Firefox,…). Une page HTML peut incorporer du texte, des images, de l'animation et du son. Pour coder, nous avons simplement besoin du logiciel bloc-notes de Windows et d'un explorateur pour visualiser le rendu web.
Pour les plus érudits, le meilleur tutoriel sur le langage HTML 5 avec la liste de tous les TAGS HTML (niveau avancé) : http://www.startyourdev.com/html/tag-html-index
Quelques règles de base :
- Un fichier HTML "standard" doit impérativement avoir un nom de fichier (à ne pas confondre avec le titre de la page) qui se termine par l'extension .html. La page d'accueil doit s'appeler index.html
- Les balises HTML ont une marque de début et une marque de fin. Certaines marques de fin sont facultatives.
- Les commandes HTML utilisent les caractères < et > comme délimiteurs.
- Les commandes HTML peuvent être écrites en minuscules ou en majuscules.
- Tout ce qui n'est pas compris entre "<" et ">" est tout simplement considéré comme du texte à afficher.
1. La première balise est celle qui définit le langage utilisé
Vous devez toujours placer cette balise <HTML> au début de votre page ensuite la page doit se terminer par</HTML>.
Nous devons par la suite placer d'autres balises à l'intérieur…
Nous devons par la suite placer d'autres balises à l'intérieur…
2. L'en-tête du document <HEAD>
Cette partie non visible pour le visiteur contient des informations dont celles permettant aux moteurs de recherche d'indexer votre site.
Vous devez placer la balise <HEAD> qui se termine par </HEAD>.
Cette balise contient une autre balise qui est le titre de votre page, ce titre apparaîtra sur la barre en haut de votre navigateur et permet aussi aux moteurs de recherche de vous trouver. Il est donc important d'y placer un titre explicite !
Cette balise est <title> qui se termine par </title>.
Vous devez placer la balise <HEAD> qui se termine par </HEAD>.
Cette balise contient une autre balise qui est le titre de votre page, ce titre apparaîtra sur la barre en haut de votre navigateur et permet aussi aux moteurs de recherche de vous trouver. Il est donc important d'y placer un titre explicite !
Cette balise est <title> qui se termine par </title>.
3. Les balises META
A placer entre <HEAD> et </HEAD> : Contiennent les descriptions et mots clés qui sont lus par les moteurs de recherche !
A voir : le Générateur de BALISES META sur ce site
Exemple :
<meta name="Description" content="Le site web et l'album photo du voyage scolaire dans le sud de la France">
Le contenu de ce meta name comme son nom l'indique est une description de votre site. Certains moteurs de recherche ont besoin de ce meta name pour scruter la page.
<meta name="keywords" content="voyage scolaire, voyage d'étude, voyage sud de la France, voyage d'études, Var, Gorges du Verdon, photos du Verdon">
Ce meta name contient tous les mots clés de votre site, la plupart des moteurs de recherche vont lire ce meta name.
<meta http-equiv="Content-Language" content="fr"> Ce meta name indique la langue principale du site.
<meta name="Author" content="Guy Cuvelier"> Ce meta name référence l'auteur du site.
A voir : le Générateur de BALISES META sur ce site
Exemple :
<meta name="Description" content="Le site web et l'album photo du voyage scolaire dans le sud de la France">
Le contenu de ce meta name comme son nom l'indique est une description de votre site. Certains moteurs de recherche ont besoin de ce meta name pour scruter la page.
<meta name="keywords" content="voyage scolaire, voyage d'étude, voyage sud de la France, voyage d'études, Var, Gorges du Verdon, photos du Verdon">
Ce meta name contient tous les mots clés de votre site, la plupart des moteurs de recherche vont lire ce meta name.
<meta http-equiv="Content-Language" content="fr"> Ce meta name indique la langue principale du site.
<meta name="Author" content="Guy Cuvelier"> Ce meta name référence l'auteur du site.
4. Le corps de la page <BODY>
Il s'agit de la balise <BODY> qui se termine par </BODY>.
C'est dans cette dernière balise que se trouvent tous les éléments visibles pour l'internaute.
C'est dans cette dernière balise que se trouvent tous les éléments visibles pour l'internaute.
5. Les commentaires propres au webmaster
Les commentaires propres au programmateur s'écrivent :
<!--ceci est un commentaire--> les commentaires ne sont pas visibles par l'internaute, il faut éditer le code source pour voir les commentaires.
Exemple d'une page HTML simple :
<html>
<!--début de la page HTML-->
<head>
<!--En-tête de la page-->
<title>Titre de la page</title>
</head>
<!--fermeture de l'en-tête-->
<body>
<!--début du corps de la page-->
Je viens de créer ma première page !
<!--votre texte-->
</body>
<!--fermeture du corps de la page-->
</html>
<!--fermeture du fichier HTML-->
Sauvegardez votre travail et donner le nom suivant à votre fichier : index.html
Ouvrez ensuite ce fichier .html avec le navigateur de votre choix pour visualiser le rendu de votre page web.
<!--ceci est un commentaire--> les commentaires ne sont pas visibles par l'internaute, il faut éditer le code source pour voir les commentaires.
Exemple d'une page HTML simple :
<html>
<!--début de la page HTML-->
<head>
<!--En-tête de la page-->
<title>Titre de la page</title>
</head>
<!--fermeture de l'en-tête-->
<body>
<!--début du corps de la page-->
Je viens de créer ma première page !
<!--votre texte-->
</body>
<!--fermeture du corps de la page-->
</html>
<!--fermeture du fichier HTML-->
Sauvegardez votre travail et donner le nom suivant à votre fichier : index.html
Ouvrez ensuite ce fichier .html avec le navigateur de votre choix pour visualiser le rendu de votre page web.