TD1 HTML5 : De la structure avant toute chose...

Premature optimization is the root of all evil (or at least most of it) in programming.

Donald Knuth

Internet n'est pas (que) le « web »

Commençons par un peu d'histoire et de vocabulaire.

La naissance du réseau des réseaux

Les origines d'Internet remontent à la fin des années 1960, lorsque la DARPA (agence gérant les projets de recherche de l'armée américaine) invente Arpanet, un réseau décentralisé reliant à l'origine quelques universités américaines.

Dans la foulée, durant les années 1970, plusieurs grands réseaux décentralisés naissent aux États-Unis et en Europe.

En 1977, Vinton Cerf crée un nouveau protocole de communication, TCP/IP, qui permet de gérer les communications de manière beaucoup plus souple : il tolère les erreurs de transmission, supporte des changements de configuration du réseau en temps réel, etc.

À partir de 1983, le protocole TCP/IP s'impose progressivement au reste du monde, et va permettre d'unifier les différents réseaux publics existants qui se raccordent peu à peu à Arpanet.

Celui-ci prend alors le nom d'Internet.

Depuis 1998, Internet est placé sous la tutelle de l'ICANN, un organisme dont le siège est en Californie.

Au fil des années, Internet prenant de l'importance, le rattachement de l'ICANN à l'administration américaine a été vu d'un mauvais œil par de nombreux pays. En 2016, l'ICANN est enfin devenue indépendante.

Quelques principes de base

Chaque ordinateur (PC, smartphone, objet connecté, etc.) possède une adresse IP unique permettant de l'identifier sur le réseau.

Cette adresse est traditionnellement (IPv4) de la forme N.M.P.Q où N, M, P et Q sont des nombres entiers entre 0 et 255.

Exemple : 130.42.1.61

Cela donc offre 256⁴ ≈ 4 milliards de possibilités.

Avec la multiplication des objets connectés, ce nombre est devenu insuffisant.

Le nouveau protocole IPv6 offre 2¹²⁸ adresses possibles, soit environ 3×10³⁸ possibilités (c-à-d. 300 milliards de milliards de milliards de milliards d'adresses différentes).

La notation décimale pointée employée pour les adresses IPv4 (par exemple 172.31.128.1) est abandonnée au profit d’une écriture hexadécimale, où les 8 groupes de 2 octets (16 bits par groupe) sont séparés par un signe deux-points : 2001:0db8:0000:85a3:0000:0000:ac1f:8001 par exemple.

So we could assign an IPV6 address to EVERY ATOM ON THE SURFACE OF THE EARTH, and still have enough addresses left to do another 100+ earths. It isn't remotely likely that we'll run out of IPV6 addresses at any time in the future.

Bref, problème résolu.

Comme les adresses IP sont difficilement mémorisables par des humains, on utilise des noms de domaine à la place, qui sont convertis ensuite en adresses IP (et vice-versa) par des serveurs DNS.

Il existe 13 « serveurs racines » (en réalité environ 1000 serveurs physiques dans 53 pays) qui dépendent d'une composante de l'ICANN, l'IANA, mais qui sont gérés par 12 organisations : 2 sont européennes (RIPE NCC et Autonomica, une division de Netnod), une japonaise (WIDE), les autres étant américaines.

Exemple : fr.wikipedia.org désigne le sous-sous-domaine fr du sous-domaine wikipedia du domaine org.

Internet possède de nombreuses applications : mail (via les protocoles smtp, pop et imap), transfert de fichier (via ftp ou sftp), synchronisation horaire (protocole ntp), diffusion multimédia (protocole rtp), etc.

Mais l'application la plus connue d'Internet est bien sûr le « Web ».

Le web, késako ?

Le World Wide Web a été inventé en 1990 par Tim Beners-Lee, qui travaillait alors au CERN à Genève.

Il cherchait alors un moyen simple de partager des informations avec ses collègues.

Le web consiste en un ensemble de documents accessibles à tout ordinateur relié au réseau (Internet en l'occurrence), et reliés entre eux par des liens hypertextes.

On accède aux pages web hébergées par un ordinateur du réseau en utilisant le protocole http (ou https pour chiffrer la communication).

L'ordinateur qui cherche à accéder à une page web s'appelle le client ; celui qui héberge la page web s'appelle le serveur : le serveur répond à la requête du client.

Pour accéder à une page web, l'ordinateur client utilise un navigateur (Firefox, Chrome, Edge, Safari...) dont le moteur de rendu (Gecko, Blink, Webkit, se chargera d'afficher le contenu.

Pour que différents navigateurs puissent consulter différentes pages web, il faut que les créateurs de pages et les concepteurs de navigateur se mettent d'accord sur un langage commun. Tim Berners-Lee crée dans ce but le HTML, un langage de balisage inspiré du GML d'IBM (1969).

Aujourd'hui, un consortium d'entreprises et d'institutions, le W3C, gère les spécifications du langage et œuvre pour assurer leur respect par les différents navigateurs.

On note qu'entre HTML4 et HTML5, 15 ans se sont écoulés.

La domination écrasante d'Internet Explorer, installé d'office avec Windows, bloque pendant de nombreuses années l'innovation sur le web. Il s'écoule notamment plus de 5 ans entre la sortie d'Internet Explorer 6 et celle d'IE7 fin 2006...

Les grands principes du HTML

Structure, contenu et mise en forme

À l'origine, le code HTML gérait à lui seul tout l'affichage de la page.

Rapidement, on s'aperçut que cela posait de nombreux problèmes, en particulier :

• code moins lisible et moins évolutif
• difficulté pour adapter le rendu au support (écran de smartphone ou écran de télé, navigateur braille, ...)

Les feuilles de styles (CSS) ont été inventées pour résoudre ce problème.

Le code HTML ne s'occupe désormais que de la structure du document. Toute la mise en forme s'effectue via une (ou plusieurs) feuilles de style, complètement séparées.

Cette séparation en deux langages aux finalités bien distinctes a permis au HTML et au CSS d'évoluer et de gagner énormément en fonctionnalité au fil des versions, tout en restant bien lisibles.

En bref : on structure un contenu (texte, images...) à l'aide du HTML. On le met ensuite en forme à l'aide du CSS.

On peut voir également les balises HTML comme des métadonnées, c'est-à-dire des informations supplémentaires concernant les données (c-à-d. le contenu) : on précise que tel morceau de texte est important, que tel autre est une citation, qu'une partie du contenu sert de menu de navigation, etc.

Le HTML sert ainsi de support au web sémantique, à travers des extensions comme RDF qui permettent aux robots parcourant le web d'extraire facilement des informations des pages web.

HTML : un langage de balisage

Le code HTML consiste en des balises, délimitant le plus souvent des portions de texte.

Une balise ordinaire s'ouvre et se ferme autour d'un contenu (qui peut contenir lui-même d'autres balises...) :

			    <balise>        ← balise ouvrante
    contenu
    </balise>       ← balise fermante

		

Il existe également quelques balises auto-fermantes :

			    <balise />   ← pensez à la barre oblique à la fin

		

Cas particulier, on commente le code en utilisant la syntaxe suivante :

			    <!--
    Ceci est un commentaire, et n'apparaîtra donc pas dans le document.
    -->

		

Une balise peut posséder un ou plusieurs attributs, permettant de paramétrer son fonctionnement.

			
    <balise attribut1="valeur" attribut2="autre valeur">
        
        

Voici un premier exemple de code HTML :

			
    <h2 id="elephants">Les éléphants</h2>
    <p>On distingue 3 espèces d'éléphants : deux vivent en Afrique ; la dernière vit en Asie.</p>
    <img src="images/elephants.jpg" alt="photo d'éléphant"/>
        
        

Dans cet exemple, on observe trois balises :

• les balises h2 et /h2 délimitent un titre (de niveau 2) ; elle a un attribut nommé id.
• les balises p et /p délimitent un paragraphe.

• la balise img/ sert à insérer une image. Elle a deux attributs (src et alt).

  On remarque qu'elle est auto-fermante : en effet, elle sert à insérer un objet, et non à délimiter un contenu.

HTML et XHTML

Le langage HTML a inspiré la création de XML, un format permettant de construire des langages à balisages faciles à traiter par ordinateur.

Les langages respectant les spécifications XML ont une syntaxe simple et régulière, qui les rend à la fois simple à manipuler par ordinateur et facile à lire par un humain au besoin.

Par ailleurs, comme c'est le standard de documents le plus répandu, l'immense majorité des langages de programmation usuels possèdent des bibliothèques permettant de lire ou d'écrire très facilement du code XML.

HTML étant antérieur au XML, sa syntaxe est moins stricte. Cependant, on peut très bien écrire du code HTML respectant la syntaxe XML : on parle alors de XHTML.

Écrire du XHTML ne change rien au niveau affichage, mais permet d'avoir un code plus lisible.

Cela permet également d'utiliser les nombreuses bibliothèques XML disponibles pour modifier automatiquement le code par exemple.

Au travail !

Environnement de travail

Premier exemple

Voici un premier exemple de code HTML :

        
        <!DOCTYPE html>
        <html>
        <body>
            <h1>TD 1 - À la découverte de HTML</h1>
            <p>Voici un 
            
            premier 
            
            paragraphe.</p>
            <p>En voici un autre.</p>
        </body>
        </html>
        
		

Test de Brackets

Copiez ce code HTML dans le fichier que vous venez de créer.

Enregistrez (Ctrl+S), puis activez l'aperçu en direct dans Brackets à l'aide du bouton en forme de zigzag en haut à droite de l'éditeur ou du raccourci clavier Ctrl+Alt+P (ou encore depuis le menu Fichier).

Vous devriez voir votre page se charger dans Chrome.

Modifiez le contenu de la page, et vérifiez que l'affichage dans Chrome se met à jour en temps réel.

Validation et rendu

Tester la validité sur le site du W3C

Le W3C (consortium chargé de définir les normes du web) a créé un site web permettant de vérifier la validité d'une page HTML.

Vous remarquez que le validateur affiche des erreurs et des avertissements, alors que le rendu de la page est correct dans le navigateur.

Le validateur du W3C vous indique où se situe le problème (ligne et colonne), et vous donne des explications détaillées... (yet only in english of course !)

Ici, le problème vient du fait qu'une page HTML doit avoir une entête, précisant un certain nombre d'informations relatives à la page (titre, langue, encodage, feuille de style...)

Nous y reviendrons.

Validation vs rendu

La validation d'une page HTML est indispensable, même lorsque son rendu semble correct.

En effet, les navigateurs internet sont très tolérants, leur but étant de procurer à l'utilisateur une expérience de navigation la plus satisfaisante possible. Ainsi, si la page web ne contient pas trop d'erreurs, le navigateur arrive en général à les corriger.

Ce n'est cependant pas une raison pour écrire du code incorrect, d'autant que les erreurs, souvent faciles à corriger au départ, peuvent en s'accumulant finir par provoquer des bugs plus compliqués à résoudre.

À l'inverse, il se peut que votre code HTML soit correct, mais qu'un ou plusieurs navigateurs ne le rende pas correctement. En effet, comme le HTML et surtout le CSS évoluent très rapidement, certaines nouveautés ne sont pas (encore) implémentées dans tous les navigateurs - ou parfois mal implémentées.

Ceci sera particulièrement vrai pour le CSS. Le site Can I Use permet de savoir, pour chaque fonctionnalité HTML/CSS, quels sont les navigateurs qui l'implémentent, et à partir de quelle version. Il indique également les parts de marché de ces différents navigateurs pour chaque version. (C'est une information importante : si une vieille version d'un navigateur n'est presque plus utilisée, on peut économiser du temps de développement en arrêtant de la supporter.)

Le cœur du navigateur est son moteur de rendu. Les moteurs de rendus principaux sont :

• Gecko (navigateur Firefox)
• Webkit (navigateur Safari)
• Blink (navigateur Chrome) qui est dérivé de Webkit (on parle de fork)
• EdgeHTML (navigateur Edge) qui est dérivé de Trident (Internet Explorer)

Il existe un grand nombre de navigateurs exotiques, mais ils utilisent presque tous un de ces 4 moteurs de rendu, car le développement d'un moteur de rendu original serait un travail considérable.

Fichier par défaut

Lorsque votre site web est hébergé par un serveur, il est fortement recommandé de créer un fichier index.html à la racine de votre site web.

En effet, si quelqu'un tape l'adresse de votre site web sans spécifier de page web précise, c'est le fichier que votre serveur va chercher à afficher (il est possible cependant de paramétrer différemment le serveur).

Exemple : si l'utilisateur tape dans la barre de son navigateur http://www.monsite.com, le serveur affichera par défaut la page http://www.monsite.com/index.html, si elle existe.

En l'absence de ce fichier, le serveur renvoie en général la liste des fichiers du répertoire.

        
        <h1>HTML et CSS</h1>
        <p>Voici la page d'accueil du site web regroupant mes différents TD.</p>
        
			

L'entête d'un document HTML

Présentation générale

En plus du contenu à afficher sur la page, un document HTML doit comporter un certain nombre d'informations utiles au navigateur et aux moteurs de recherche.

Ces informations ne seront pas affichées sur la page web, mais aideront le navigateur à effectuer un rendu correct de celle-ci. Elles servent aussi aux moteurs de recherche pour l'indexation de la page.

Tout d'abord, on doit préciser qu'il s'agit d'un document HTML5.

À cet effet, le document doit systématiquement commencer par la balise spéciale !DOCTYPE html.

Ensuite, le reste du document est contenu entre les balises html et /html. On en profitera pour préciser la langue du document :

			
    <!DOCTYPE html>    ← c'est un document HTML5
    <html lang='fr'>    ← il est en français
        <head> 
        ...                 ← l'entête
        </head> 
        <body> 
        ...                 ← le corps du document
        </body> 
    </html>
        
		

Intéressons nous maintenant à l'entête, qui est délimitée par les balises head et /head.

L'entête doit au minimum préciser :

• l'encodage, bien que celui-ci soit systématiquement en utf-8 sur les sites web modernes
• le titre du document, qui sera affiché en haut de la fenêtre du navigateur (et non dans la page elle-même !)
• l'emplacement d'une ou plusieurs feuilles de styles
• l'emplacement d'éventuels fichiers Javascript

D'autres information peuvent y figurer, notamment un résumé du contenu de la page.

Voici un exemple complet d'entête.

        
    <head> 
        <!-- Partie obligatoire -->
        <meta charset = 'utf-8'/>              ← encodage (toujours en premier !)
        <title>Le lac de Paladru</title>       ← titre
        
        <!-- Partie facultative -->
        <meta name = 'description' 
              content = 'Histoire du lac de Paladru, du néolithique à nos jours.'/>       ← résumé
        <meta name = 'author' content = 'A. Jaoui'/>       ← auteur
        <link rel = 'stylesheet' href = '../styles/dark.css'/>             ← feuille de styles CSS
        <script src = '../js/menu.js'/></script>       ← fichier Javascript
    </head> 
        
        

Autres usages

L'entête sert également au référencement et à l'affichage des résultats par les moteurs de recherche :

Quelques mots sur l'encodage

L'encodage est la manière dont on stocke un texte sur un ordinateur.

Pour être stocké dans la mémoire de l'ordinateur, chaque caractère doit être représenté par un nombre binaire.

Historiquement, les textes étaient encodés en ASCII (American Standard Code for Information Interchange), standard développé dans les années 60. Chaque caractère était stocké sur 7 bits, ce qui permettait uniquement d'afficher 2⁷=128 caractères.

L'ASCII permettait d'écrire de l'anglais et d'afficher des calculs simples, mais avec le développement d'Internet dans le monde, de nombreuses extensions de l'ASCII ont été créées, permettant d'afficher différents alphabets.

Ces extensions, généralement codées sur 8 bits (2⁸=256 caractères) étaient incompatibles entre elles, provoquant fréquemment des problèmes d'affichage, dans les mails ou sur les sites web notamment. Par ailleurs, certaines langues (comme le chinois) nécessitaient plus de 256 caractères ; de même l'affichage de textes scientifiques nécessitait beaucoup de symboles différents.

C'est pour ces raisons que fut créé en 1991 une table de caractères universelle, nommée Unicode. La version 11 (juin 2018) énumère 137 374 caractères différents !

Il existe plusieurs implémentations d'Unicode (UTF-16, UTF-32), mais la plus connue est UTF-8. C'est un encodage à longueur variable, c'est-à-dire que tous les caractères ne sont pas encodés sur le même nombre de bits. Ceci permet à UTF-8 d'offrir une implémentation complète d'Unicode tout en consommant peu de mémoire lorsqu'on n'utilise que les caractères courants (un texte ASCII convertit en UTF-8 ne consomme que 14% de mémoire supplémentaire, contre +129% en UTF-16 et +357% en UTF-32).

Bref, de nos jours, l'UTF-8 est devenu le standard pour l'encodage de documents (seul Microsoft, par inertie, persiste encore à privilégier l'UTF-16).

Si vous parlez bien anglais, cette page explique plus en détail l'histoire d'Unicode et les avantages de l'UTF-8.

Le contenu à proprement parler du document se situera entre les balises body et /body : c'est ce qu'on appelle le corps du document.

Voici le contenu minimal d'une page web vierge valide :

        
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Titre de mon document</title>
    </head>
    <body>

    </body>
</html>
        
        

Enregistrer ce document sous le nom page_vierge.html ; celui-ci vous servira de template (c-à-d. de modèle) à chaque fois que vous créerez un nouveau document.

Le corps du document

Voyons maintenant les balises les plus courantes permettant de structurer le corps du document.

Les balises structurelles

La première étape consiste à réfléchir à l'architecture de votre page web. Comment sera organisé son contenu ?

Une page web typique possède des titres, des sous-titres (le contenu sera subdivisé en sections), un menu de navigation...

Les titres

Les balises h1, h2... h6 permettent de définir des titres de niveau 1, niveau 2,... niveau 6.

Voici un exemple de code HTML :

        
<main>
<h1>Les éléphants</h1>    ← Titre de la page (unique donc !)
    <section>
    <h2>Les éléphants d'Afrique</h2>  ← Un sous-titre
    <p>Il existe deux espèces d'éléphants d'Afrique.</p>
        <section>
        <h3>L'éléphant d'Afrique de savane</h3>  ← Un sous-sous-titre
        <p>C'est le plus gros mammifère terrestre.</p>
        <p>Même les enfants le connaissent.</p>
        </section>
        <section>
        <h3>L'éléphant d'Afrique de forêt</h3>  ← Un 2e sous-sous-titre
        <p>Plus petit que son cousin des savanes, il est en danger critique d'extinction.</p>
        </section>
    </section>
    <section>
    <h2>Les éléphants d'Asie</h2>  ← Un autre sous-titre
    <p>L'éléphant d'Asie est plus petit et plus calme que celui d'Afrique.</p>
    </section>
</main>

		

Les moteurs de recherche utilisent également les titres pour savoir de quoi parlent principalement une page web.

Les principales parties du page web

Voici une des architectures les plus courantes pour le corps de texte d'un document HTML :

Les balises utilisées ici sont :

• header qui indique l'entête visible du document (à ne pas confondre avec head !).

  C'est là qu'on place généralement le titre principal (balise h1) de la page.

• nav correspond à un menu ou une barre de navigation.

• main indique la partie principale de la page.

  Elle sera subdivisée en sections (balise section) (éventuellement imbriquées) comportant généralement des titres secondaires

• aside est utilisé pour des annexes (par exemple, une liste de liens externes sur un blog).

• footer correspond au pied de page.

  On peut s'en servir pour afficher des informations légales sur le site par exemple.

D'autres balises structurelles

• La balise article sert à créer des articles (si !) c'est-à-dire des contenus indépendants entre eux. On utilisera la balise article pour les posts d'un blog par exemple.

  Il ne faut pas confondre un article avec une section, qui est une partie seulement d'un unique contenu (les différentes parties d'un texte par exemple).

• La balise menu sert à créer des menus interactifs, permettant d'effectuer des actions sur la page.

  Elle est donc essentiellement utile pour créer des applications Web.

  Elle ne doit pas être confondue avec la balise nav, qui sert à créer des menus de navigation.

Les balises de texte

Une fois notre page structurée, il est temps de nous intéresser au contenu.

Les balises suivantes servent à structurer non plus la page, mais un morceau de texte.

Attention, ce sont souvent d'anciennes balises qui existaient déjà en HTML3 ou 4, mais dont l'usage a changé en HTML5. Lorsque vous cherchez de la documentation ou des exemples sur Internet, faites attention à la date... s'ils sont antérieurs à 2014 (publication de HTML5), ils risquent fort de ne pas être à jour !

Voici les balises les plus courantes :

• p indique un paragraphe

  					
                  <p>L'idée du Web est née d'un mémo rédigé par Tim Berners-Lee  en mars 1989,
                  intitulé : "gestion de l'information: une proposition".</p>
                  <p>Il expliquait comment un système basé sur les liens hypertextes 
                  et des ordinateurs connectés entre-eux pouvait aider les chercheurs
                  du Cern à mieux partager leurs informations, et à mieux y accéder.</p>
                  
  				

• strong indique quelque chose d'important

  					
                  <strong>Veuillez valider les conditions générales de vente.</strong>
                  
  				

• em (« emphase ») permet d'insister sur quelque chose

  					
                  Le format AAC n'est <em>pas</em> supporté.
  				

• La balise b servait en HTML3 à mettre en gras. Elle sert désormais à mettre en valeur certains mots (par exemple, des mots-clés, des noms de produits, etc.) sans qu'on cherche spécialement à insister dessus.
• La balise i servait en HTML3 à mettre en italique. Elle sert désormais à indiquer qu'un mot doit avoir une typographie différente (par exemple un mot en langue étrangère dans un texte).

• La balise sup sert à mettre en exposant, et la balise sub sert à mettre en indice.

  					
                  On pose u<sub>n</sub>=2<sup>n</sup>.
  				

• code permet de citer un extrait de code informatique.

  					
  <code>var a = 2;</code>
  
  				

• q introduit une courte citation (un morceau de phrase)

  					
  <q>être ou ne pas être</q>,
  disait <cite>Shakespeare</cite>,
      <q>voilà la question</q>.
  
  				

• blockquote est utilisé pour une citation longue (un ou plusieurs paragraphes).

  					
  <blockquote>
  <p>Science is what we understand well enough to explain
  to a computer. Art is everything else we do.</p>
  <p><cite>Donald Knuth</cite></p>
  </blockquote>
  
  				

Insertion d'une image

La balise img/ permet d'insérer une image :

			
        <img src='mondossier/monimage.gif' width='50' height='60' alt="exemple d'image"/>
        
		

Les formats d'image acceptés par tous les navigateurs récents sont PNG, JPG, GIF et SVG.

D'autres formats ont un support partiel : par exemple APNG est désormais supporté par tous les navigateurs sauf Edge.

Remarque : il est possible de rajouter le support d'autres formats (comme FLIF, qui est un format d'image moderne très performant) en intégrant des bibliothèques Javascript à sa page web.

Vous pouvez visualiser sur cette page les différences de rendu de plusieurs formats d'image avec perte.

L'attribut src

L'attribut src indique l'adresse de l'image dans l'arborescence du site.

Soit l'arborescence suivante d'un site situé sur un serveur « monsite.com » dans un dossier « www/ » :

		+- www
			+- img
			|  +- monimage.jpg
			+- dossier
				+- page.html ← page contenant la balise img/
		

Cette adresse peut-être :

• Relative à notre fichier page.html.

  Par exemple, ../img/monimage.jpg. Le chemin s'écrit comme sous UNIX - en particulier les .. indiquent qu'en partant de notre fichier HTML, il faut commencer par remonter d'un niveau dans l'arborescence pour trouver img/monimage.jpg :

• Absolue
  • soit l'adresse locale sur le serveur (exemple : /img/monimage.png)
  • soit l'URL c-à-d. l'adresse internet (exemple : http://monsite.com/img/monimage.png).

Lorsqu'on a le choix (images hébergées localement), il faut privilégier les adresses relatives, qui permettent de changer facilement l'emplacement du site, sans avoir à réécrire toutes les adresses.

Par ailleurs, il est conseillé de regrouper toutes vos images dans un même dossier (img/ ou images/ par exemple) pour plus de clarté.

L'attribut alt

L'attribut alt sert à indiquer un texte de remplacement, au cas où l'image ne soit pas affichée.

À quoi cela sert-il ?

• Il se peut que lien vers l'image soit cassé.
• Certains navigateurs n'affichent pas les images. En particulier, les navigateurs à synthèse vocale pour les personnes aveugles peuvent ainsi « lire l'image ».
• Cela facilite le référencement de la page par les moteurs de recherche.

Pour toutes ces raisons, vous devrez toujours donner un attribut alt à toutes vos images.

Exemple :

			
        <img src='img/campus.png' alt="Vue d'ensemble du campus."/>
        
		

Dimensions de l'image

Les dimensions de l'image sont données en pixels (en HTML5, on ne précise plus l'unité).

Il est possible de spécifier seulement la hauteur ou seulement la largeur. Dans ce cas, le ratio hauteur/largeur est automatiquement conservé (c-à-d. que l'image n'est pas déformée).

Par défaut, si aucune dimension n'est donnée, l'image est affichée en taille réelle.

Il est cependant conseillé de toujours préciser les dimensions :

			
        <img src='img/campus.png' width="160" height="90" "alt="Vue d'ensemble du campus."/>
        
		

Cela permet :

• de ne pas casser la mise en page si jamais le lien vers l'image est cassé ;
• d'accélérer le rendu de la page (le navigateur peut commencer à afficher la page avec son rendu définitif sans avoir encore téléchargé toutes les images).

Remarque : on peut aussi donner les dimensions avec CSS, mais dans ce cas le rendu sera moins rapide. Par contre, CSS permet de donner les dimensions de l'image en pourcentage (ce qui n'est pas autorisé en HTML5).

Créer des liens

Principe

Les liens hypertextes, appelés aussi ancres ou hyperliens, sont l'idée principale à l'origine des documents HTML ; HTML étant l'acronyme de HyperText Markup Language.

On crée un lien à l'aide de la balise a (a comme ancre).

L'attribut href (Hypertext Reference) indique l'URL de la cible (c-à-d. son adresse internet).

Cette dernière peut être une autre page internet, mais également un fichier à télécharger, une adresse FTP, une adresse mail...

Exemple :

			
        <a href="page2.html">Cliquez ici</a>
        
		

Comme pour les images, l'adresse peut être relative...

			
        <a href="../index.html">Revenir à l'accueil</a>
        
		

...ou absolue :

			
        Cette <a href="https://fr.wikipedia.org/wiki/B%C3%A9po">page</a> est très intéressante.
        
		

On peut remplacer le texte cliquable par une image :

			
        <a href="http://fr.wikipedia.org"><img src='img/wikipedia.png' alt='Wikipédia'/></a>
        
		

L'attribut target

L'attribut target sert à spécifier la cible du lien, c'est-à-dire où est-ce que doit s'ouvrir la nouvelle page lorsqu'on clique sur le lien.

Les valeurs les plus courantes sont :

• "_self" : affiche la page dans l'onglet actuel (comportement par défaut)

  					
          <a href="utilisateur.html" target='_self'>manuel d'utilisation</a>
          	
  				

• "_blank" : affiche la page dans un nouvel onglet

  					
          <a href="installateur.html" target='_blank'>manuel avancé pour l'installateur</a>
          	
  				

• on peut aussi spécifier un nom personnalisé ; tous les liens qui ont pour cible ce même nom s'ouvriront dans un même onglet.

			
        <a href="utilisateur.html" target='doc'>manuel d'utilisation</a>
        <a href="installateur.html" target='doc'>manuel avancé pour l'installateur</a>
        
		

Dans l'exemple précédent, les deux liens ont une même cible (nommée « doc »). Si l'on clique sur le premier lien, la page utilisateur.html se chargera dans un nouvel onglet. Mais si l'on clique ensuite sur le 2e lien, la page installateur.html s'affichera à la place de utilisateur.html, dans le même onglet, puisque ces deux liens ont la même cible.

Courrier électronique

Il est également possible de mettre en lien une adresse mail.

Ceci est fréquemment utilisé dans la section « Contact » d'un site web.

        
        <a href="mailto:donald.knuth@unice.fr">Contacter M. Knuth</a>
        
        

Pour que cela fonctionne, il faut cependant que le navigateur soit configuré pour autoriser et prendre en charge l'envoi de courriels.

Attention, c'est également le meilleur moyen de livrer votre adresse mail aux robots de SPAM.

Pour contourner ce problème, on peut essayer de ruser, par exemple :

Il est également possible de préciser le sujet et le corps de texte du courriel :

        
        <a href="mailto:bugs.bunny@cartoon.univ-cotedazur.fr?subject=Hello Bunny&body=What's up doc ;)">Contacter Bugs Bunny !</a>
        
        

• Écrire l'adresse en toute lettres. Par exemple, prenom point nom at unice point fr au lieu de prenom.nom@unice.fr.

  Inconvénient : on perd le lien. Par ailleurs, certains robots spammeurs peuvent avoir des algorithmes de détection relativement sophistiqués pour traduire ce genre d'écriture.

• Utiliser un script JavaScript pour encoder l'adresse mail.

  Inconvénient : le robot peut être suffisamment sophistiqué pour interpréter le code Javascript.

• Insérer une image compréhensible seulement par un humain.

  Inconvénient : cela diminue l'accessibilité du site aux personnes malvoyantes.

On trouve sur SuperUser un comparatif intéressant (quoiqu'un peu daté) de différentes méthodes de lutte contre la collecte automatique d'adresses mail et leur efficacité relative.

Les listes

Il existe deux types de listes : ordonnées et non ordonnées.

Là encore, ce n'est pas d'abord une question d'affichage : on peut afficher une liste avec ou sans numéros, qu'elle soit ou non ordonnée. Il s'agit plutôt de savoir si fondamentalement, l'ordre d'énumération est important.

• ol crée une liste ordonnée
• ul crée une liste non ordonnée
• li indique un élément d'une liste (ordonnée ou non)

Les listes peuvent être imbriquées.

Voici un exemple :

        
    <ol>
        <li>Retirer de l'argent</li>
        <li>Faire les courses
            <ul>
                <li>pain</li>
                <li>riz</li>
                <li>œufs x 6</li>
                <li>haricots</li>
            </ul>
        </li>
        <li>Faire le plein d'escence</li>
    </ol>
        
		

Ce qui donne :

1. Retirer de l'argent
2. Faire les courses
   • pain
   • riz
   • œufs x 6
   • haricots
3. Faire le plein d'escence

Plus de balises

Les balises "neutres"

Si vous regardez le code source d'un site web (Ctrl+U dans votre navigateur préféré), vous remarquerez des nombreuses balises div et span.

Ces balises n'ont aucune signification sémantique ou structurelle (elle n'apportent pas d'informations sur le contenu de la page), mais servent juste de support pour la mise en page (ou pour Javascript).

Elles ne nous intéressent donc pas pour l'instant.

Nous en reparlerons par contre lorsque nous aborderons le CSS.

The Never Ending Tour...

Il existe au total un peu plus d'une centaine de balises HTML5.

En voici une liste complète (les balises grisées ne sont plus utilisées en HTML5).

Parmi les balises importantes non abordées dans ce TD, notons les balises de multimédia, de formulaires, ainsi que celles permettant de faire des tableaux.

Elles seront l'objet de TD ultérieurs.

Les entités HTML

Certains caractères ont une signification spéciale en HTML. Par exemple, le caractère < sert à signaler le début d'une balise.

Pour afficher ces caractères spéciaux, on utilise alors des séquences spéciales de caractères appelées HTML entities (entités HTML). Ces séquences de caractères sont toutes construite de la même manière : &nom;.

Historiquement, les entités HTML servaient également pour afficher un grand nombre de caractères non représentables en ASCII (par exemple &eacute; pour le « é », mais depuis l'utilisation d'UTF-8, cet usage n'a plus beaucoup d'utilité.

Les entités HTML vraiment utiles de nos jours sont :

Un espace insécable sert à indiquer que le navigateur ne doit pas effectuer de retour à la ligne à cet endroit. On l'utilise par exemple avant certains signes de ponctuation (en français, devant le point d'exclamation ou d'interrogation, les deux-points ou le point-virgule notamment).

    Il est préférable d'utiliser un espace insécable ( ) avant le point
    d'exclamation, pour éviter que ce dernier se retrouve tout seul à la ligne 
    !

La liste complète des entités HTML est disponible sur cette page.