====== Les bases de HTML ====== ===== Introduction ===== ==== Qu'est ce que le HTML ? ==== Le HTML (HyperText Markup Language) est un format de présentation de données permettant de créer des pages web pouvant être lues dans les navigateurs (ex : Chrome, Firefox, Internet Explorer, …). L'ensemble de ses pages web constitueront votre site. ==== Qu'est ce qu'une balise HTML ? ==== Une balise HTML est un élément que l'on va ajouter au texte de départ pour dire au navigateur de quelle manière l'afficher. Cette balise ne sera pas affichée telle quelle par le navigateur mais sera interprétée par celui-ci. Une balise est toujours délimitées par les signes < et >.\\ \\ > // Exemple de balise : %%%% // \\ Une balise peut être constituer d'attributs. Les attributs sont des informations complémentaires qui caractérisent la balise. Un attribut se présente sous la forme **nomattribut="valeur"**.\\ \\ > Exemple de balise avec attribut : %%%% //ici la balise est html avec un attribut lang ayant pour valeur fr.//\\ \\ Chaque balise doit être fermée de cette façon %%%%, mais il existe des exceptions, les balises simples.\\ \\ ==== Les balises simples ==== Ce sont des balises qui sont dites « vides », c'est à dire qu'elles ne vont pas contenir d'autre balise. \\ \\ > Exemple : Quelques balises courtes :\\ **
,
, , , , , ** \\ \\ ==== Les balises imbriquées ==== Il est possible d'imbriquer des balises HTML, par contre il est très important de respecter la hiérarchie. C'est à dire que la première balise ouverte soit la dernière fermée.\\ \\ > Exemple :

Ceci est en gras et ceci est normal

\\ ==== Structure d'un document HTML ==== Avant de commencer le développement d'une page, il est important d'en connaître la structure.\\ Voici le modèle de base possédant la structure minimale obligatoire.\\ Titre de la page < !-- Ici votre site - - > La première ligne de cet exemple s'appelle le **DOCTYPE**. C'est la balise la plus importante de votre page. Elle permet de conserver la compatibilité du rendu de votre page sur les différents navigateurs. Il en existe plusieurs, ici c'est le modèle de **DOCTYPE** pour les documents HTML5.\\ \\ Ensuite vient la balise %%%%. Elle encadre l'ensemble des autres balises. \\ La balise %%%% contient deux grandes balises :\\ qui contient l'en-tête de la page, cette partie ne s'affiche pas à l'écran et indique aux navigateurs les spécificités de la page en cours. qui contiendra le corps de votre document. C'est à dire ce qui s'affichera à l'écran de votre visiteur. Petite précision importante, les balises %%, et %% sont uniques. C'est à dire que le code source de votre page ne doit en contenir qu'une. Si votre page possède deux balises %%%%, vous aurez des surprises à l'affichage. ==== Le DOCTYPE en détail ==== Le DOCTYPE sert à déclarer quelle norme s'applique à notre page.\\ Il indique aux navigateurs de quelle manière interpréter telle balise ou telle propriété CSS. En cas d'absence de DOCTYPE ou simplement en cas d'erreur de frappe, le navigateur passera en mode « Quirk » (ou en français non conforme). \\ En mode Quirk le navigateur est seul maître à bord est fait ce qu'il veut, cela impactera l'affichage de votre page. L'image ci-contre montre quelques différences entre le mode « QUIRK » de Internet Explorer et le mode « normal ».Le DOCTYPE se choisi en fonction de vos besoins. La liste des principaux DOCTYPE est disponible sur [[tutoriel-html:doctype-html|cette page]].\\ {{ :tutoriel-html:quirks-mode.gif?direct|}} ==== Les commentaires ==== Les commentaires permettent de laisser des informations ou des descriptions et sont utilisables à n'importe quel endroit de votre document. Ces commentaires ne seront pas affichés à l'écran mais seront présent dans le code source de votre page. Il est donc important de ne pas y mettre des informations confidentielles.\\ \\ > Ils sont délimités par < !-- et --> et peuvent être multi-lignes. \\ Par soucis de compatibilités entre les navigateurs, il est fortement conseillé de se limité à 2 traits d'unions\\ \\ Exemples : ===== Le en détails. ===== ==== La balise ==== Cette balise permet d'indiquer le nom de votre page. C'est une des balises les plus importantes de votre document. C'est son contenu qui sera affiché en titre des résultats de la recherche dans les moteurs de recherche.\\ \\ Exemple : <code html> <title>Cours HTML – Les bases Conseils SEO : Chacune de vos pages de votre site devront posséder un titre unique, toujours en rapport avec le contenu de la page et contenant les mots clés importants présents dans votre contenu. ==== Les balises META ==== === A quoi servent-elles ? === Les balises META sont obligatoirement placées au niveau de la balise . Elles permettent d'apporter aux navigateurs (et aux moteurs de recherche, même si cela à un impact minime) des informations sur la page en cours d'affichage comme son auteur, la date de création, son jeu de caractères (encodage), etc.\\ Il y a deux grandes familles de balises META : * les META name qui apportent des informations simple (auteur, outils utilisés, etc.) * les META http-equiv qui communiquent directement avec le navigateur et qui peuvent influencer celui-ci. \\ Conseils SEO : Depuis quelques années, //GoogleBot// (Robot indexant les pages web pour Google) prend de moins en moins en compte le contenu des balises META. Un grand nombre de celles-ci sont donc désuètes. //GoogleBot// se focalise, notamment pour les pages en //HTML5//, sur les micro-données. Mais, et oui il y a un mais, //GoogleBot//, pour mesurer la pertinence de la page fera une comparaison rapide avec certaines balises META et le contenu de votre document. \\ === La balise === Cette balise est obligatoire pour passer la validation W3C (certification de l'organisme éditeur des normes Web). Elle permet d'indiquer aux navigateurs le type MIME de la page et son encodage (évite que les lettres accentuées soient remplacées par des ? Ou d'autres caractères bizarres.\\ \\ Exemple : === Les balises d'informations === La liste des **balises META** d'information est très longue, certaines ne servent que d'en des cas particulier. Par exemple pour les informations affichées lors d'un partage sur les réseaux sociaux. \\ **Le nom de l'auteur :** S'il y en a plusieurs, les séparés par des virgules. \\ **L'éditeur du site :** Renseigne le nom et prénom de l'éditeur du site. S'il y en a plusieurs, les séparés par des virgules. Dans le cas d'une société, il faut indiquer la raison sociale. \\ **Adresse mail de l'auteur :** A éviter, cette balise est repérée par des robots spammeurs. \\ **Adresse mail de la personne à contacter :** A éviter, cette balise est repérée par des robots spammeurs. \\ **Nom de la personne à contacter :** A éviter, cette balise est repérée par des robots spammeurs. \\ **Nom de la société détentrice :** Indique le nom de la société détentrice du site web. \\ **Indiquer l'adresse :** \\ **Description de la page :** Courte description du contenu de la page. Cette description sera affichée dans les résultats de certains moteurs de recherche. Conseils SEO : Ne pas dépasser les 200 caractères. \\ \\ **Mots-clés :** Contient la liste des mots-clés que vous avez choisi pour votre page web. Ces mots-clés pourront être utilisés par les moteurs de recherche pour « catégoriser » votre site ou pour lui attribuer à votre page un niveau de crédibilité (GoogleBot par exemple) . Conseils SEO : Cette liste de mots-clés ne doit pas dépasser les 500 caractères. \\ \\ **URL principale du site : ** \\ **Sujet du site :** Précise le sujet du site en quelques mots. \\ **Réseau de publication :** Définit le type de réseau de publication. ^ Valeurs ^ Description ^ | global | Visible sur l'internet | | local | Visible uniquement sur un poste local | | iu | Visible sur un intranet | \\ Par défaut, cette valeur est à //global// \\ **Type de public :** indique le type de public visé par le site. Utilisé par les systèmes d'autorisation parentale par exemple. ^ Valeurs ^ Description ^ | general | Tout public | | mature | Réservé aux adultes | | restricted | Accès restreint | | 14years | Accès interdit en-dessous de 14 ans | \\ Par défaut, cette valeur est à //general// \\ **Langue du site :** \\ **Copyright :** Précise le ou les copyrights auxquels la page est soumise \\ **Générateur :** Si plusieurs logiciels sont utilisés, les séparés par des virgules. Balises a évité car des robots s'en servent pour repérer les sites vulnérables ou les sites potentiellement spammables. \\ **Dates de votre page : ** Indique la création de la page sous la forme JJMMAAAA \\ Indique la date de révision (ou modification) sous la forme JJMMAAAA \\ Indique la date d'expiration (date au format anglais), si la page n'expire pas, mettre //never// à la place de la date. Si la page est expirée, le navigateur affichera la page précédente. La valeur pas défaut est //never//. \\ **Type de page :** Précise le langage de scripts utilisé dans la page par son type MIME. \\ **Robots :** Indique aux robots indexeurs si la page doit être indexée ou non. Plusieurs valeurs sont possibles, séparées par une virgule. \\ Par défaut la valeur est //all//. \\ ^ Valeurs ^ Description ^ | index | Autorise les robots à indexer la page | | noindex | Interdit aux robots d'indexer la page | | follow | Autorise les robots à suivre les liens de la page | | nofollow | Interdit aux robots de suivre les liens de la page | | all | Correspond à 'index, follow' | | none | Correspond à 'noindex,nofollow' | | noarchive | Interdit aux moteurs de recherche de proposer une version de cache de la page | \\ \\ **Revisitez nous :** Précise aux robots le nombre de jour (ou de mois) d'intervalle à respecter avant leur prochaine visite sur le site pour relever les nouveautés. A l'heure actuelle, cette balise META n'est absolument pas prise en compte par les robots indexeur. \\ **Rafraichissement de la page :** Précise aux navigateurs de rafraîchir la page toutes les x secondes. Si en plus une URL est renseigné, la navigateur redirigera le visiteur au bout de x secondes vers la page indiquée. \\ Il existe plein d'autre balises META, certaines sont spécifiques a certaines utilisations comme les métadonnées (DublinCore), d'autres spécifiques à un navigateur ou d'autres carrément obsolète. \\ Conseils SEO : Il n'est pas nécessaire de mettre des dizaines de balises META dans votre . Plus votre document contient des caractères (ou des médias), plus votre page sera longue à charger, moins les robots des moteurs de recherche considéreront votre page. Il faut donc trouver un juste milieu, selon votre site, le contenu de votre page et les balises META à utiliser. \\ ==== Les styles CSS ==== Les feuilles de style en cascade ou CSS (Cascading Style Sheets) s'utilise pour mettre en page votre code HTML. Il existe deux manières d'insérer des styles dans votre page. \\ Soit directement dans votre page (méthode styles internes) \\ \\ Soit dans un fichier spécifique (méthode style externe), méthode à privilégier pour un site en production. \\ Le CSS n'étant pas le sujet du jour, d'autres cours seront disponibles sur ce sujet passionnant. \\ ==== Les scripts ==== Les scripts sont des petits programmes en JavaScript ou en VBScript exécutés « côté client ((Côté client : s'exécute sur le navigateur du visiteur et est entièrement indépendant du serveur.)) » qui augmentent l'ergonomie de vos pages. \\ Comme pour les feuilles de style en cascade, nous pouvons incorporer les scripts des deux même manières. \\ Soit en interne (méthode script interne) : \\ Soit en externe (méthode script externe) : \\ \\ Le choix entre les deux méthodes dépendent si le script doit être exécuté sur toute les pages ou seulement sur une seule. Pour éviter la répétition fastidieuse de code et pour éviter les oublis en cas de modifications ultérieures, on privilégiera la méthode externe. Dans les autres cas, on utilisera bien sûr la méthode interne. Cette réflexion est valable aussi pour les feuilles de style. \\ Conseils SEO: Il est préconisé, pour accélérer la vitesse de chargement de votre page, de mettre l'ensemble des scripts JS en fin de page juste avant . Et oui, le temps de chargement de votre page influence la notation de votre site auprès des moteurs de recherche. \\ ===== Le dans le détail ===== La balise est le corps de votre document. C'est à cet endroit que vous allez mettre tout le texte et toutes les images qui apparaîtront lorsqu'un visiteur consultera votre page ? \\ ==== Les types de balises ==== Il existe différents type de balises : Les **types « block »**, **les types « inline »** et **les types « none »**. Le type de la balise influence l'affichage des différents éléments de votre page. === Type « block » === Les éléments de type « block » sont généralement ceux que l'on utilise pour la mise en page.\\ La balise de type « block » occupe toute la largeur disponible. Lorsque 2 éléments « blocks » se suivent sur une page, ils sont positionnés (par défaut) l'un sous l'autre.\\ Voici quelques éléments de type « block »\\ \\ > %%
%% : Balise multi-usage. Cette balise est souvent utilisée pour positionner un contenu dans la page. > %%

%%…%%

%% : Hiérarchie de titre. > %%

%% : Paragraphe. > %%