Aperçu des sections

  • Généralités

    Tout replier Tout déplier

    Le HTML est un des premiers langages que l'on apprends lorsque l'on veut travailler dans le web. C'est un des plus simples, mais aussi l'un des plus important, pour ne pas dire la clé de voûte de toute application web. Le découvrir et le manipuler est assez aisé, mais pour un novice, il va tout de même y avoir pas mal de choses à intégrer.

    Voici quelques conseils pour bien démarrer en HTML :

    • être à l'aise avec l'outils informatique
    • être à l'aise avec son navigateur web
    • aller jeter un œil sur les principaux sites d'informations et de tutos pour voir à quoi ressemble le HTML
    • découvrir "l'inspecteur" du navigateur web, qui va vous permettre de voir le code HTML d'une page web (touche F12, ou clic droit + inspecter)
    • trouver un logiciel d'édition de code (éditeur de code) à votre goût (ex : sublime, brackets, notepad++, atom,...), il y en a de nombreux. C'est indispensable.




    Le HTML s'utilise rarement seul, car cela donne un rendu très moche. C'est un langage de "structuration" et de "sémantique" qui est très peu orienté graphisme. C'est un peu comme le gros oeuvre d'une maison. Les finitions se feront alors avec d'autres langages intimement liés à HTML, tel que CSS ou Javascript.


    Voici quelques sites de référence concernant le HTML :


    Malgré la facilité d'apprentissage du HTML, il y a tout de même beaucoup de choses à savoir suivant vos besoins et votre niveau. Donc l'essentiel c'est de bien comprendre le fonctionnement et les possibilités du langages, afin d'aller à la pêche aux informations selon vos besoins techniques.


    Avant de commencer le HTML, et de rentrer dans "le dur", il faut connaitre un minimum le fonctionnement d'Internet, et de certains aspects généralistes du métier :

    1. Internet et réseaux
    2. Architecture client/serveur
    3. Les protocoles
    4. L'éditeur de code
    5. Client FTP
    6. Le métier de développeur

  • Présentation

    Définition

    HTML veux dire HyperText Markup Language, pour "langage de balises hypertexte". Décortiquons un peu cela :

    • langage : le HTML est une forme de langage informatique très simple, donc il mérite cette dénomination. En revanche, le HTML n'est pas un langage de programmation.
    • balise : quand on écrit du HTML, tout est structuré sous forme de balises. Si par exemple on souhaite intégrer une image, on utilisera ceci : <img src="/chemin/vers/mon/image/image.jpg" />. On parle alors d'une "balise" image.
    • hypertext : cela veux dire que l'on va donner des fonctionnalités "en plus" à un texte classique. Par exemple, le concept de "lien hypertexte" n'existe pas dans un texte "à l'ancienne" (ex : un livre papier). Le concept du lien hypertexte n'a été possible que par l'invention de langage informatique permettant ce genre de choses. Donc "hypertext" pourrait se traduire par "texte enrichi".

    Historique

    HTML est né avec le web, et réciproquement, le web est né grâce à un langage tel qu'HTML. Internet existe bien avant le web, mais avant, il fallait être assez calé en informatique pour pouvoir utiliser Internet. L'usage n’était pas aisé, et la barrière technique assez élevé, pour la simple est bonne raison qu'il n'y avait pas de réels standards. Internet était plutôt réservé à un usage professionnel, et plutôt pour des structures qui avaient les moyens et de réels besoins d'investir dans ce domaine (banques, gouvernements, grosses entreprises, etc...).


    La préhistoire du web
    Oui c'est bien un téléphone à touche que vous voyez...
    		 ...et c'était pas pour "le fun"


    Avec la démocratisation de la micro-informatique dans les 90's, des technologies plus accessibles aux masses sont apparues, et le besoin de créer des standards faciles à utiliser s'est grandement fait sentir.

    C'est le grand Monsieur Tim Berners-Lee, chercheur au CERN, qui a inventé tout cela au début des 90's (en plus du protocole HTTP). Il avait besoin d'accéder facilement à l'énorme base de documents nécessaire à son travail au centre de recherche nucléaire européen. Et le web n'est en réalité que cela, une énorme base de documents accessibles facilement. Et ces documents sont écrits en ...... HTML ! 

    Le gars a dû faire quelques heures sup'... :)




    Evolution

    Le HTML a grandement évolué depuis sa création. Aujourd'hui, la version utilisée est le HTML5. HTML5 a apporté de très nombreuses nouvelles fonctionnalités qui correspondent à l'usage massifs et à l’explosion de l'utilisation du web (balises pour la vidéo, le son, balises orientées SEO, balises de structuration sémantique du document, etc..). HTML5 est sorti au début des années 2010, et il s'est imposé comme un nouveau standard, très fiable et novateur, surtout face à la concurrence de Flash.

    Historique des principaux navigateurs web :




    Utilisation

    Aujourd'hui, le HTML est le seul langage existant pour la structuration de document web. Et c'est plutôt une bonne nouvelle. Flash était concurrent d'HTML depuis très longtemps, mais pour diverses raisons, cela emmenait plus de complications qu'autre chose. Aujourd'hui, tout le monde s'est mis d'accord sur le HTML, Flash a été abandonné, et est entrain de disparaître du web.




    Comme nous l'avons vu dans la présentation générale du web, le langage HTML est un langage de balisage. Cela veux dire qu'il permet de formater des données suivant une certaine norme. C'est ce document qui va permettre de générer une page web telle que vous la voyez dans votre navigateur.

    Pour écrire en HTML, vous devez commencer par créer un fichier HTML. C'est à dire qu'il comporte l'extension ".html". 

    Exemple :

    page-accueil.html

    Généralement, la "première" page d'un site se nomme index.html, par convention. Ce nommage permettra à votre serveur web de trouver automatiquement la page d'accueil. Index.html est donc la page qui sera chargé par défaut par votre serveur.

    Il y a d'autres façons de générer des fichiers HTML, mais la plus simple reste de créer un fichier HTML standard.

    Le HTML se compose donc de nombreuses balises. Chacune d'entre elles joue un rôle différent dans votre page web. Quand vous naviguez sur un site, et que vous voyez des images par exemple, et bien il y a certainement une balise image dans le code source de la page web. Dans notre exemple la balise aura cette forme : 

    <img src="/chemin/vers/image.jpg" />
    Ici, "img" signifie que nous avons à faire à la balise image, et src est un des attributs possibles de cette balise. En développement, src signifie souvent "source" en abrégé, et désigne un chemin d'accès vers une ressource. Dans notre cas : l'emplacement du fichier correspondant à l'image. Certaines balises ne disposent d'aucun attribut (ex: <br />) tandis que d'autres en acceptent de nombreux :

    <input type="text" name="prenom" value="" placeholder="Veuillez saisir votre prénom" />

    Note : vous devez garder en tête que le fichier HTML est envoyé au client par le serveur, suite à une requête HTTP de la part du client. Mais vous pouvez aussi ouvrir des fichiers HTML depuis votre propre ordinateur par le biais de votre éditeur de code (si vous voulez l'éditer), ou par votre navigateur web (si vous voulez l'exécuter).

  • Syntaxe et conventions

    Dans tous les langages que vous utiliserez, il y a de nombreuses règles - plus ou moins importantes - qui permettent d'écrire un code propre et lisible. C'est un peu comme les règles de ponctuations et de syntaxe en Français.


    Laquelle de ces deux phrases préférez-vous lire :

    bonjourjesuisunstagiaireendeveloppementwebetjesaispastropcommentecriremoncode

    ou bien ?

    Bonjour ! Je suis un stagiaire en développement web et je sais pas trop comment écrire mon code...

    Comprenez-vous maintenant l'importance de la syntaxe et des conventions d'écritures ?

    HTML n'étant pas un langage de programmation en tant que tel, les règles de syntaxes et les conventions sont assez simples, et partagées par la plupart des autres langages. Nous n'aborderons que les plus importantes, votre pratique et votre expérience feront le reste.



    L'indentation

    Règle généralisée à tout ce qui ressemble à une ligne de code, l'indentation est le fait de décaler certaines lignes par rapport à d'autres afin que le code soit plus clair et plus facile à lire. En général, on indentera une ligne quand elle est "imbriquée" à la ligne du dessus. 

    Voici un exemple avec une liste :

    <ul>
        <li>Tomate</li>
        <li>Banane</li>
        <li>Cerise</li>
    </ul>

    L'indentation se fait avec la touche "Tabulation" (tab) de votre clavier, ce qui équivaut normalement à 2 ou 4 espaces selon vos réglages ou préférences. Vous devez prendre ce pli le plus tôt possible. Le HTML est un langage ou vous allez énormément imbriquer des éléments les uns dans les autres, donc vos pages seront naturellement fortement indentées.

    Voici un exemple d'indentation propre, cela doit ressembler à une sorte de vague verticale :



    Les commentaires

    Présent dans tous les langages aussi, les commentaires sont très utiles. Ils vous permettent d'annoter votre code avec des remarques écrites en Français. Ils peuvent servir à différentes choses :

    • expliquer ce que vous souhaiter faire
    • mettre des annotations pour ne pas oublier de faire quelque chose en particulier
    • laisser des informations pour d'autres développeurs
    • etc...


    La particularité des commentaires, c'est qu'ils ne sont pas interprétés lors de l'exécution de votre page. Ils seront bien présent dans votre code, mais ne seront pas affichés à l'utilisateur. Pratique.

    En HTML, les commentaires s'écrivent comme ceci :

    <!-- Tout ce qui est écrit là est un commentaire, et sera invisible pour l'utilisateur -->

    • <!-- : ouvre un commentaire
    • --> : ferme un commentaire


    Majsucule / miniscule

    En HTML, évitez l'utilisation de la majuscule dans votre code. La grande majorité du code sera écrit en minuscule.

    Bien :

    <input type="text" name="email" value="" required />

    Pas bien :

    <INPUT TYPE="TEXT" NAME="EMAIL" VALUE="" REQUIRED />

    Il y a peut être quelques exceptions qui confirment la règle, mais honnêtement elles sont très rares. Les deux écritures (min/maj) fonctionneront, mais rappelez vous l'exemple des deux phrases au début de cette section.


    Autres règles

    Voici un lien vers une page beaucoup plus complète sur les bonnes pratiques d'écriture de code HTML (en anglais), essayez de vous y rendre le plus souvent possible lorsque que vous douterai de votre style d'écriture.


    Attention : vous verrez de nombreux exemples sur Internet qui contrediront toutes ces "bonnes pratiques", donc ne prenez pas tout comme argent comptant sur Internet, et essayez de trouver des sources fiables lorsque vous ne savez pas comment trancher entre deux approches.

  • Structuration d'un fichier HTML

    Voici un exemple de fichier HTML très simple :

    <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="script.js"></script>
</head>

<body>
    <h1>Exemple de page HTML très simpe</h1>
    <p>Vous trouverez ici quelques exemple de balises, et la forme général d'un fichier html. Voici quelques exemples :</p>
    <ul>
        <li>le header</li>
        <li>le body</li>
        <li>les balises</li>
    </ul>
    <br />
    <div>Si vous souhaitez en savoir plus, vous pouvez consulter le site <a href="http://google.fr">Google</a>.</div>
</body>

</html>

    Analyse : 

    • il y a deux zones principales : le header, le body. Marqués via les balises <head> et <body>. Le header contient des "méta-données", tandis que le body contient le contenu qui s'affichera à l'écran.
    • les balises sont toutes composées de chevrons (< et >) et d'un signe de fermeture (/)
    • certaines balises s'imbriquent dans d'autres (ex: <ul> <li>texte</li> </ul>)
    • certaines balises marchent par paire ouvert/fermé (ex : <p>texte</p>), tandis que d'autres se ferment "toute seule" (ex <br />)
    • certaines balises ne contiennent rien, mais pointent vers un fichier (link et script)


    Voici comment cette structure est "perçue" par le navigateur qui ouvre un fichier HTML (c'est ce qu'on appel le DOM) :


    Le header

    Le header (ou l'entête), sert à décrire votre fichier. Vous allez y placer des informations qui ne seront pas affichées dans le contenu de votre page web, mais qui sont toutefois nécessaires à son bon fonctionnement. La gestion du header est très importante, c'est pour cela qu'il est est géré "à part" du contenu principal. Le header va être interprété en premier par le navigateur web client qui va effectuer certains traitements en fonction de son contenu. Voici quelques balise importantes :

    • les balises <meta> : elles vont permettre d'initialiser ce que l'on appel les "méta données" de votre fichier HTML. Vous allez par exemple définir l'encodage de votre jeu de caractères, une description brève de votre page, l'auteur de la page ou certains paramètres de mise en cache par exemple.
    • les appels de fichiers : il y en a principalement deux : les appels JS, et les appels CSS. Vous pouvez voir leur forme dans la section précédente. Elles servent à dire au navigateur que la page en cours à besoin de ressources extérieures (fichiers JS et CSS) pour fonctionner. Résultat, le navigateur va relancer une requête supplémentaire pour télécharger chaque fichier en plus de la page initiale. Vous pouvez avoir de nombreux appels de fichier dans votre page web. Vous pouvez aussi appeler des fichiers extérieurs à votre site.
    • les insertions de code JS ou CSS : si vous ne souhaitez pas appeler un autre fichier dans votre page web (cela peut arriver pour diverses raisons), vous pouvez écrire du CSS ou du JS directement dans votre header. Les balises sont respectivement <style> et <script>.

    Il y a d'autres balises possibles que vous découvrirez à l'usage. Je vous propose de jeter un œil au header de cette page web afin de confirmer la présence de ces balises.

    Attention : avec HTML5, il y a une balise <head> et une balise <header>. Les deux sont différentes, il ne faut pas les confondre.


    Voici quelques exemples de balises contenues dans le <head> :


    <title>Page d'accueil</title>
    Représente le "titre" de la page. Très important, surtout en SEO (premiere ligne des résultats de recherche Google). C'est cette balise qui sert à nommer les onglets dans votre navigateur.

    <link rel="icon" type="image/png" href="ma_favicon.png" />

    Permet de rajouter une "favicon" à votre page. La petite icône représentative de votre site, visible dans les onglets aussi.


    <meta name="description" content="description de la page" />
    Permet de rajouter une méta description à la page. Crucial en SEO (petit texte de présentation après le titre dans les résultats de recherche Google).


    Même si les balises pouvant être présentent dans le header sont moins nombreuses que celles pouvant exister dans le contenu "réel" de votre page (body), elles n'en sont pas moins ultra important, car elle définissent des informations absolument essentielles au bon fonctionnement de votre page.


    Le body

    Le body (le corps), représente le contenu visible de votre page. C'est dans le body que vous allez coder l'ensemble des balises qui comporte votre document. 

    Si vous regardez le body dans votre console de débugage, vous verrez qu'il prends l'intégralité de la fenêtre de votre navigateur.

    Il n'y a qu'une seul balise body par page web. Elle contient assez peu d'informations intéressantes, et on ne la modifie généralement que très peu en comparaison à d'autres balises, mais elle est le point d'entrée de tout le reste de votre contenu.

  • Les balises HTML

    Nous allons découvrir quelques balises HTML5 et leur fonctionnement, mais il y en a de très nombreuses à votre disposition.

    Vous pouvez voir la structure de base d'une balise HTML dans l'image ci-contre. 

    Ce schéma représente vraiment l'idée de base. Il y a de nombreuses variantes qui existe, selon les cas de figures, et les balises employées. Mais vous retrouverez toujours :

    • des chevrons < et >
    • un nom de balise
    • un slash de fermeture


    Les balises HTML ont toutes des fonctions différentes, mais on peux les regrouper en grandes familles.


    Ces balises sont très importantes car elles sont la base de la compréhension de votre document par un logiciel client (ex : un navigateur web, mais pas que !). En plus de structurer votre contenu, ces balises vont permettre de le styliser (graphisme et animation) et de lui donner un sens (la sémantique). Et cela est absolument crucial pour que votre page soit bien comprise par les différents logiciels qui la liront (navigateurs, Google, etc...). Par exemple : une phrase n'aura pas la même importance aux yeux de Google si elle est placée dans un paragraphe ou dans un titre. Logique.

    Bien que la mise en place de balises HTML soit relativement simple hors-contexte, c'est une toute autre histoire quand on va implémenter une structure HTML sur un vrai site. 

    Voici quelques exemples des utilisations connexes des balises HTML :

    • c'est la base de votre charte graphique et de votre style CSS
    • c'est la base de votre sémantique, et donc de votre SEO
    • bien utilisées, elles vont vous permettre d'optimiser grandement les performances de votre site
    • mal utilisées, elles seront un poids pour le développeur ou l'intégrateur
    • elles sont la base de toute animation graphique dynamique JS
    • etc...

    Vous devrez donc utiliser consciencieusement les balises HTML de votre site ou de votre application, afin de bénéficier d'une base propre et efficace pour toutes les problématiques qui vont se greffer dessus.

    Exemples de balises HTML:

    • <h1>, <h2>, <h3>,.......,<h6> : titres de différentes importances
    • <br /> : saut à la ligne
    • <p> : paragraphe
    • <a> : lien hypertexte
    • <img> : image
    • <b>, <strong>, <em> : mise en avant d'une portion de texte (gras, mot important, emphase)
    • <ul>, <ol>, <li> : liste
    • <table> <tr> <td>: tableau


    Exemple de balises HTML simples
    Paragraphe de texte Mot en gras Insertion d'image



    A savoir : même si c'est assez peu répandu, vous pouvez créer vos propres balises HTML. Par exemple : <cours>...cours sur le HTML...</cours> est accepté par le navigateur et 100% valide. Mais cela se fait assez peu, surtout lorsque l'on débute...


    Les attributs

    Les attributs sont des propriétés que l'on va pouvoir rajouter à notre guise, et selon nos besoins, dans les balises HTML. Ils vont servir à différentes choses, tel que :

    • pouvoir identifier un élément dans l'ensemble des balises qui compose une page
    • donner des classes CSS afin d'améliorer le style
    • définir certains paramètres obligatoire (ex : url d'un lien, chemin d'un fichier image)
    • etc...


    Ils sont très utiles et vous ne pourrez pas vous en passer. Voici deux exemples d'attributs sur des balises HTML :

    Attributs dans les balises HTML
    Identification d'une balise via son l'attribut "id" Changer la couleur d'un texte


    Et deux autres exemples sur les liens et les images :

    <a href="http://google.fr">Lien vers google</a>  <!--Ici, a est la balise, et href est l'attribut-->
    <img src="julien/images/mon-image.jpg" />   <!--Ici, img est la balise, et src est l'attribut-->


    Il y a pas mal d'attributs différents, et certains sont vraiment très utilisés :

    • id
    • href
    • class
    • src
    • alt
    • title
    • style
    • type
    • value
    • name
    • etc...


    Certains attributs fonctionnent avec tous les types de balises (ex : <h2 id="sous_titre_1">), tandis que d'autres sont réservés à certaines balises (ex : <input type="text" />). Vous pouvez aussi créer vos propres attributs, notamment avec l'utilisation des data-*.


  • Encodage du jeu de caractère

    UTF-8

    L'encodage du jeu de caractère est un des fondements de l'informatique. Il faudrait voir un cours entier la dessus, mais concernant le HTML, c'est assez simple. Il suffit juste de spécifier au navigateur que votre page HTML est encodée selon la norme UTF-8. Ce qui est le cas dans la majorité des cas. 

    Voici comment le spécifier :

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    Ou bien plus simplement :

    <meta charset="UTF-8" />


    Cela vous permettra d'avoir un affichage correct de vos accents et tout caractères "spéciaux".

    Note : pour que cela fonctionne bien, votre fichier doit être encodé en UTF-8, donc faites bien attention au format d'encodage par défaut de votre éditeur de texte.


  • Favicon


    Le favicon est la petite icône que vous voyez dans les onglets du navigateur. Elle permet aux internautes de reconnaître votre site en un coup d’œil.

    Si vous l'omettez, chaque navigateur va mettre une icône par défaut, partagée avec tous les autres sites. C'est donc un bon point de le rajouter, et ça fait parti des choses à ne pas oublier quand l'on souhaite bien faire et fignoler un site.

    De plus, le favicon peux être automatiquement repris dans certains cas de figure :

    • visible dans les favoris
    • visible sur un raccourci (icone sur le bureau, raccourci sur un smartphone, etc...)
    • résultats de recherches sur Internet
    • etc...


    Il y a plusieurs façons d'intégrer un favicon, voici un exemple :

    <link rel="shortcut icon" type="image/png" href="/favicon.png"/>

    Bien évidement, le fichier correspondant à votre icône doit être présent dans l’arborescence du dossier contenant votre site.

    Historiquement, le favicon doit respecter certaines règles de dimensionnement (16*16, 32*32) et de format (.ico, .png, etc...), mais aujourd'hui, les navigateurs se débrouillent plutôt bien pour prendre le "tout-venant". Attention toutefois, votre favicon doit rester une icone, ne cherchez pas à faire quelque chose de trop détaillé, car l'utilisateur ne le verra pas (image trop petite).


    Favicon du Moodle :


  • Balises liées au SEO

    Le SEO, c'est une des clés de voûte du web. Pour ceux qui n'en ont jamais entendu parler, le SEO veux dire Search Engine Optimization. Et c'est l'art de bien positionner son site dans les moteurs de recherche afin que ls internautes vous trouvent facilement. Voici quelques balises qui ont attrait au SEO dans le head.

    • <title>Titre de la page</title> : c'est ce que vous voyez dans les onglets de navigations de votre navigateur. C'est aussi la balise que ce sert Google pour afficher le lien bleu dans les pages de recherches. Cette balise est cruciale en SEO.
    • <meta name="description" content="Description de la page" /> : c'est le petit texte qu'il y a sous le lien bleu de la page de résultat (SERP). Doit être assez condensé, et doit être un résumé du contenu de la page. Cruciale aussi pour le SEO.
    • <meta name="keywords" content="motclé1, motclé2, etc"> : cette balise permet d'associer quelques mots clés à votre page. Attention, elle a eu son heure de gloire au début de Google, mais elle ne rentre quasiment plus en ligne de compte dans le calcul du page rank d'une page. On peux quand même l'utiliser, mais avec parcimonie.



  • Chargement de fichiers CSS et Javascript externes


    Un des grands rôles de la balise <head>, c'est de charger tous les fichiers CSS et Javascript qui sont nécessaires au bon fonctionnement de votre page web. Nous approfondirons ça dans les cours sur CSS et Javascript, mais voici comment charger des fichiers extérieurs à votre document HTML :

    CSS

    <link rel="stylesheet" href="/chemin/vers/votre/fichier.css" />


    Javascript

    <script type="text/javascript" src="/chemin/vers/votre/fichier.js"></script>


    Ces balises vont être lus par le navigateur lors du chargement de la page, vont déclencher une nouvelle requête HTTP pour les charger en parallèle du contenu réel, et le navigateur s'en servira pour styliser ou dynamiser votre contenu HTML statique.

    Il y a d'autres variantes de ce genre de balises que vous pourrez rencontrer au grès de votre expérience, mais les deux que nous venons de voir sont vraiment les plus simples.

  • Titres

    Les balises de titre (heading) permettent de représenter les grandes sections d'une page web. Il y a 6 niveaux de titre, le <h1> étant le titre le plus important, jusqu'au <h6>. En plus d'avoir une taille de police différentes, les titres ont une dimension sémantique qui permettra aux robots de mieux comprendre la structure et le sens du contenu de votre page. Un moteur de recherche se basera sur les titres contenus dans votre page pour déterminer le sens général d'un texte.



    Théoriquement, vous devrez essayer de respecter une certaines hiérarchie dans l'organisation de vos titres. Certaines règles s'imposent lorsque l'on vise des objectifs SEO, et les balises de titre deviennent alors un élément stratégique pour organiser votre contenu.

    Exemple :

    <h1>Mes recettes de pâtes</h1>
    <h2>Pâtes bolognaises</h2>
    <p>Blablablablabla....mmmmmmhhh !!</p> <!-- La balise p représente ici un paragraphe de texte sous le titre -->
    <h2>Pâtes carbonara</h2>
    <p>Blablablabla....mmmmmh !!</p>

  • Liens hypertexte


    Les liens hypertextes sont un élément central du web. C'est grâce à eux que la toile peut se tisser "toute seule", et ça a été un des éléments les plus "disruptif" entre un format papier et un format web. Le lien hypertexte, que tout le monde connait, c'est le fait de pouvoir accéder à une nouvelle page en cliquant sur un texte ou une image (ou n'importe quel type d’élément). Mais c'est principalement du texte en général (pour des raisons liées au SEO, le nerf de la guerre).


    Le lien hypertexte va permettre aux utilisateur de naviguer facilement entre plusieurs pages (ou plusieurs sites), sans avoir à saisir l'URL au clavier. En 2019, cela nous parait acquis, voir naturel, mais en tant que développeur web, il va falloir voir comment ça se passe sous le capot.


    Anatomie d'un lien hypertexte



    C'est aussi simple que ça ! Ce qu'il faut bien comprendre, c'est que lorsque l'utilisateur va cliquer sur la zone délimitée par le lien, le navigateur va générer une nouvelle requête HTTP vers la page demandée.

    L'attribut href doit comporter le chemin vers une ressource web, cela peut-être :

    • un chemin relatif : chemin calculé relativement au fichier qui est en cours d'exécution 
    • un chemin absolu : qui correspond à l'emplacement précis d'une ressource dans votre serveur web
    • une URL : vous pouvez pointer vers un site extérieur (ex : https://google.fr)
    • une ancre : qui va pointer sur un élément à l'intérieur de la page en cours (ex : #section-3 => cliquez sur une des sections dans le menu de gauche)
    • du code Javascript : choses possible, mais à proscrire
    • etc...


    Autres possibilités

    Il y a différentes options que l'on peut configurer en plus du fonctionnement classique d'un lien. Par exemple, si vous voulez ouvrir un lien dans un nouvel onglet :

    <a href="https://google.fr" target="_blank">Lien vers Google</a>

    Grâce à l'attribut target="_blank", le lien s'ouvrira automatiquement dans un nouvel onglet.


    Un autre attribut important : title. Rajouter un title sur un lien permettra 2 choses :

    • afficher une tooltip lorsque l'utilisateur va passer sa souris sur le lien (passer votre souris sur les images en haut à droite du Moodle)
    • améliorer le SEO

    L'attribut title est sensé donner une information complémentaire au texte contenu dans un lien.

    Exemple :

    <a href="chat.html" title="Découvrez toutes les races de chats : siamois, maincoon, gouttière, etc...">Voir les chats</a>


  • Images

    Pour intégrer des images à vos pages, c'est très simple, il vous suffit d'utiliser la balise <img>, de lui donner le bon chemin vers le fichier qui correspond à votre image, et le navigateur se charge d'insérer votre fichier image à l'intérieur de votre page.

    Comme nous l'avons vu plus haut, voici l'anatomie simple d'une balise image :


    Une image fonctionne de la même manière qu'un lien : on va renseigner le chemin vers l'image, puis le navigateur va la télécharger via une nouvelle requête HTTP, puis l'afficher dans la page web.

    Vous croiserez souvent d'autres types d'attributs présent dans une image, tel que "width" par exemple, qui sert à déterminer la largeur de l'image à l'affichage. Dans l'exemple ci-dessus, l'attribut alt permet d'afficher un texte à la place de l'image au cas ou il y ai eu un problème lors du chargement de l'image. C'est fait surtout pour les gens qui ont un problème d'accessibilité (mal-voyants, etc...), mais ça sert aussi à améliorer le SEO d'une page.

    Attention : la balise <img> est auto-fermante, donc pensez à respecter cette syntaxe afin d'être dans les conventions :

    <img src="/chemin/vers/image.png" />   <!-- cette balise est auto-fermante, il n'y a pas de </img> -->

    Vous pouvez faire "clic-droit -> inspecter" sur l'image ci-dessus, afin de voir la balise image correspondante.


    Poids des images

    Les images constituent généralement la partie la plus lourde d'un site. Et c'est loin d'être un détails car :

    site lourd => temps de chargement long => utilisateurs insatisfaits => google insatisfait => baisse du trafic => mort du site

    Donc l'optimisation de vos images est loin d'être un détail. Ça n'est pas du HTML "pur", mais cela fait parti des problématiques que vous aurez à gérer en tant que technicien.

  • Listes

    Les balises de liste sont très utilisées en HTML. Comme nous l'avons vu avec les autres types de balises, elles permettent :

    1. d'avoir un affichage en cohérence avec ce que l'on souhaite exprimer
    2. de structurer l'information, et de lui donner un sens aux yeux des robots d'explorations


    Les listes peuvent être utilisées dans plusieurs cas de figure :

    • afficher une simple liste de choses en lien avec un contenu (tel que vous avez sous les yeux)
    • faire le sommaire des grands points d'une page
    • faire un menu de navigation
    • etc...


    Ce sera à vous de juger - avec votre expérience - si l'utilisation d'une liste est appropriée à ce que vous souhaitez faire. Mais retenez bien une chose : si vous avez du contenu qui s'apparente à une liste de choses, alors privilégiez les balises de liste, cela aidera grandement à améliorer la compréhension sémantique de votre page.


    Types de listes


    Il y a plusieurs balises permettant de structurer une liste dans votre page HTML. Elles ont chacune des nuances, mais elles partagent une chose : ce sont des balises imbriquées dans d'autres balise. 

    On aura donc :

    1. une balise pour "l'ouverture" de la liste
    2. une balise pour chaque point de liste


    La liste non-ordonnée
    <ul>    <!-- ul veux dire : unordered list -->
    <li>Acheter du pain</li>
    <li>Faire le ménage</li>
    <li>Aller voir les copains</li>
</ul>


    La liste ordonnée
    <ol>   <!-- ol veux dire : ordered list -->
        <li>Faire bouillir l'eau</li>
        <li>Plongez les pâtes dans l'eau</li>
        <li>Attendre 10 minutes</li>
        <li>Egouter les pâtes</li>
    </ol>


    La liste de description
    <dl>   <!-- description list -->
        <dt>Norvège</dt>  <!-- description term -->
        <dd>Un pays froid</dd>  <!-- description définition -->
        <dt>Colombie</dt>
        <dd>Un pays chaud</dd>
        <dt>France</dt>
        <dd>Un pays tempéré</dd>
    </dl>

    Note : les listes peuvent être imbriquées les unes dans les autres. Cela peut être utile dans certains cas, mais c'est aussi très utilisé pour faire des menu de navigation ayant des sous-menus.


  • Tableaux

    Les tableaux HTML permettent de présenter et structurer des informations sous forme de lignes et de colonnes. Les balises de tableaux sont donc un peu plus complexe que les balises standard tel que les titres ou les paragraphes. Il va vous falloir jongler entre différentes balises imbriquées les unes dans les autres pour créer un tableau propre, autant sur le plan technique que sémantique.


    Balises structurant un tableaux

    Balises de base :

    • <table> : permet "d'ouvrir" un nouveau tableau
    • <caption> : permet de définir la légende du tableau (optionnel, mais pain béni pour la sémantique)
    • <tr> : ouverture d'une nouvelle ligne dans le tableau (Table Row)
    • <td> : ouverture d'une nouvelle cellule dans la ligne (Table Data)
    • <th> : pareil que <td>, mais correspond à une cellule d'entête (Table Head)

    Balises complémentaires :

    • <thead> : permet de regrouper tous les éléments composant l'entête du tableau
    • <tbody> : permet de regroupe tous les éléments constituant le corps du tableau
    • <tfoot> : permet de regroupe tous les éléments constituant le footer du tableau



    Exemple de tableaux HTML


    Structure de base d'un tableau en HTML

    Voici un exemple du code HTML d'un tableau simple :


    Vous verrez à l'usage qu'il y a beaucoup de possibilités de personnalisation des tableaux, via des attributs ou des balises particulières, utilisées plus ou moins fréquemment par les développeur web :
    • colspan : fusion de plusieurs colonnes sensées être séparées
    • rowspan : fusion de plusieurs lignes sensées être séparées
    • scope : qui permet de spécifier si une entête est dédié à une ligne ou bien à une colonne
    • etc...


    Attention : dans des temps reculés d'Internet (il y a une dizaine d'années), beaucoup de concepteurs de sites web se servaient des tableaux pour structurer l'ensemble d'une page web (à l'époque, c'était tentant). C'est une pratiques totalement obsolète, et à proscrire absolument. Mais ne vous étonnez pas si vous voyez encore des sites conçus de cette manière. En revanche, votre conscience professionnelle ne peux pas vous autoriser à utiliser cette approche dans vos projets.


    Quand dois-je utiliser des tableaux ?

    La question est simple, mais la réponse l'est un peu moins. De manière générale, un tableau est fait pour présenter des données très structurées - et bien souvent chiffrées - comme on l'a vu dans les exemples précédents (résultats, statistiques, etc...). En revanche, étant donnée que les tableaux offrent aux moteurs de recherche des données très lisibles, faciles à analyser et à comprendre, on va pouvoir détourner l'usage d'un tableau pour "tricher" un peu avec les robots, et viser une optique SEO.

  • Structuration du contenu

    Une autre grande famille de balises, ce sont les balises de structuration. Elles servent à créer des zones de contenu spécifique dans votre page. Elles vont vous permettre de découper votre site en plusieurs zones réservées à un usage particulier. Si on utilise seulement du HTML, c'est balise sont quasiment invisible par nature. Elles servent seulement à dire "ici c'est mon header, ici c'est mon menu de navigation, etc...".


    Les <div> et les <span>

    Les deux grandes balises de structuration historique sont les <div> et les <span>. La différence entre les deux, c'est qu'une div va prendre toute la largeur d'une page, tandis qu'un span prends la largeur de ce qu'il contient. Ce sont les propriétés block et inline que nous verrons plus tard en CSS. Pour faire une analogie, quand vous avez créé votre paragraphe avec des mots en gras, et bien une div, c'est le paragraphe, tandis qu'un span c'est les mots en gras. Sauf que div et span n'ont aucun sens sémantique ou de rendu graphique particulier.




    Les nouvelle balises de structuration HTML5

    Jusqu'en 2011/2012, les seules balises de structuration disponibles étaient peu ou prou les div et les span. Et étant donné que la structure d'un site web peut théoriquement contenir de nombreux éléments, on avait de très nombreuses répétitions de balise div et span. Vous en verrez un exemple plus bas. Les gens qui conçoivent le HTML ont donc décidé d'intégrer de nouvelle balises depuis la version HTML5, qui permettent de structurer son code de manière plus logique et plus adaptée. Ces balises ont un nom qui sera dédié à un usage spécifique, et qui empêchera donc la redondance des div et des span, avec des identifiants différents pour chacune d'elle :

    • <header> : définira l'en-tête de votre site
    • <nav> : définira le menu de navigation de votre site
    • <article> : définira un article de blog (par exemple)
    • <footer> : définira le pied de page de votre site
    • etc...


    Il y en a pas mal, et il faut en abuser ! De plus, les logiciels qui analyse votre code HTML (les robots de Google par exemple) comprendront mieux votre site, et pourront facilement voir si un bloc est important pour la compréhension de votre contenu, ou pas. Voici un lien qui en recensent quelques unes.

    Note : vous pourrez toujours croiser des sites qui utilisent la "vieille méthode" (avant HTML5, avec plein de div partout). Cela peut arriver sur certains projets, mais aujourd'hui c'est clairement une mauvaise pratique. Il vous faudra vous adapter aux habitudes prises par les collaborateurs des projets sur lesquels vous serez emmené à travailler.


    Voici quelques représentations de la structure d'un document HTML via des balises adaptées :

    Attention : les exemples de codes fournis ici ne permettent pas de gérer la taille et la position des block qui sont côte à côte. C'est seulement avec une couche de CSS en plus que vous pourrez faire ça.

    Exemple simple HTML4 vs HTML5



    Exemple de template plus fourni


    Exemple d'une "sous-structure"


  • Formulaires

    Les formulaire sont des éléments très importants dans la conception d'un site web. C'est grâce à eux que l'utilisateur va pouvoir interagir avec l'application en saisissant des informations qui vont pouvoir être envoyées au serveur, puis traitées et stockées. Il y a de nombreuses balises permettant de concevoir des formulaires divers et variés, mais elles fonctionnent toutes à peu près de la même manière. En revanche, leur rendu graphique dans le navigateur pourra être très différents.

    Voici une liste de balise en rapport avec les composants de formulaires :

    • <form> : déclaration d'une zone qui contiendra des éléments de formulaire
    • <input /> : élément de formulaire
    • <textarea> : grande zone de texte
    • <select> : liste déroulante
    • etc...


    Il y a assez peu de balises qui permettent de générer des formulaires. En revanche il y a de très nombreuses nuances. On utilisera l'attribut type="xxx" afin de déterminer le type de balise que l'on souhaite faire apparaître à l'écran.


    Éléments de base

    Voici un exemple simple de formulaire :

    <form>
        <label>Prénom : </label>
        <input type="text" name="prenom" placeholder="Saisir votre prénom" required /> <!-- Voici un champ de saisi de texte -->
        <br />
        <label>E-mail : </label>
        <input type="email" name="email" placeholder="Saisir votre e-mail" required /> <!-- E-mail -->
        <br />
        <label>Note :</label>
        <input type="range" min="0" max="10" step="1" value="5" name="note" /> <!-- Curseur -->
        <br />
        <input type="submit" value="Soumettre le formulaire" />  <!--Élément important : bouton de soumission du formulaire -->
    </form>


    => Copier/coller ce code dans votre sandbox pour voir le rendu dans votre navigateur.

    Exemples de formulaires


    Select, radio, checkbox

    Voici d'autres type d'éléments de formulaires importants : les select, les boutons radio, et les checkbox.

    <form>
        <label>Sélectionnez votre langages préféré :</label>
        <select name="langage">        <!-- Type liste déroulante (une seule option sélectionnable) -->
            <option value="html">HTML</option>
            <option value="css">CSS</option>
            <option value="js">Javascript</option>
            <option value="php">PHP</option>
        </select>
        <hr />
        <label>Vous l'aimez :</label>
        <br />
        <input type="radio" name="love" value="0" /> Un peu   <!-- Type bouton radio (une seule case cochable) -->
        <br />
        <input type="radio" name="love" value="1" /> Beaucoup
        <br />
        <input type="radio" name="love" value="2" /> Passionnément
        <br />
        <input type="radio" name="love" value="3" /> A la folie !
        <hr />
        <label>Vous avez déjà codé :</label>
        <br />
        <input type="checkbox" name="sites" /> Des sites web  <!-- Type checkbox (plusieurs cases cochable) -->
        <br />
        <input type="checkbox" name="ecommerce" /> Des sites e-commerce
        <br />
        <input type="checkbox" name="appliweb" /> Des applications web
        <br />
        <input type="checkbox" name="applimobile" /> Des applications mobile
    </form>


    => Copier/coller ce code dans votre sandbox pour voir le rendu dans votre navigateur.



    La balise <form>

    La balise form permet de régler certains paramètres qui concerne l'envoi d'un formulaire. Elle est indispensable dans certains cas, surtout si l'on souhaite envoyer les données saisies par l'utilisateur vers le serveur. Nous en reparlerons sur des cours Javascript ou PHP, mais sachez qu'il y a deux attributs importants :

    • action : permet de déterminer vers quel page au souhaite envoyer des informations. Par défaut c'est celle "en cours"
    • method : permet de déterminer la méthode HTTP d'envoi des données. Par défaut c'est la méthode GET


    Pour l'instant, vous pouvez l'utiliser simplement, de cette manière :

    <form>
    ....éléments de formulaires....
    </form>


    Soumission d'un formulaire

    Un formulaire sert à envoyer des informations du client vers le serveur. On dit alors que l'on "soumet" un formulaire. Cela passe par le clic sur un bouton dédié à cette action. Quand l'utilisateur cliquera dessus, cela fonctionnera un peu comme un lien, dans le sens ou le navigateur va envoyer une nouvelle requête HTTP en direction du serveur. Et il en profitera pour y adjoindre les données saisies par l'utilisateur afin de les traiter via un langage de programmation.

    Exemple de bouton de soumission standard :

    <input type="submit" value="Envoyer" />

    Pour fonctionner correctement, cette balise doit être comprise dans une balise <form>

    Exemple :

    <form>
       <input type="submit" value="Envoyer" />
    </form>



    => Copiez/collez ce code dans votre sandbox, remplissez le formulaire, puis soumettez le et constatez ce qui se passe dans la barre d'url de votre navigateur :

    <form>
        Prénom : <input type="text" name="prenom" placeholder="Saisir votre prénom" required />
        <br />
        E-mail : <input type="email" name="email" placeholder="Saisir votre e-mail" required />
        <br />
        <input type="range" min="0" max="10" step="1" value="5" name="note" />
        <br />
        <input type="submit" value="Soumettre le formulaire" />    
    </form>


    La balise <label>

    Vous croiserez souvent une balise associé aux champs de formulaires, c'est la balise <label>. Elle sert la plupart dut temps a écrire le nom des champs dans une balise appropriée, et elle possède quelques caractéristiques adaptées aux formulaires. On utilisera pour cela l'attribut for, associé à l'id de l'élément de formulaire.

    <input type="checkbox" name="checkbox" id="checkbox_id" value="value">
    <label for="checkbox_id">Text 1</label>
    <br />
    <input type="checkbox" name="checkbox" id="checkbox_id2" value="value">
    <label for="checkbox_id2">Text 2</label>
    <br />
    <input type="checkbox" name="checkbox" id="checkbox_id3" value="value">
    <label for="checkbox_id3">Text 3</label>


    => Copiez/collez ce code dans votre sandbox pour voir le rendu dans votre navigateur.


    Inter-compatibilité entre navigateurs (cross-browser)

    Comme beaucoup d'autres balises HTML, les composants de formulaires peuvent avoir des rendus différents selon les navigateurs. Les formulaires sont particulièrement affectés par ces différences.  Ils fonctionnent de la même manière, mais le style graphique est légèrement différent.

    Exemple de rendus de formulaires par différents navigateurs :


    Vous pouvez essayer d'ouvrir vos futurs formulaires avec différents navigateurs afin de constater cela.

  • TP

    Pour finaliser ce cours sur HTML, voici deux TP à réaliser :