Rappel HTML

Identification

Infoforall

2 - Rappels sur le HTML, le retour


La première partie des rappels a traité des points suivants

  • Structure globale d'une page HTML, organisée par ses balises
  • Les balises de type block comme p ou h1
  • La balise générique div
  • La balise de lien a pour créer des liens sur le Web

Nous allons continuer en regardant maintenant les points qui nécessitent de savoir où sont enregistrés les fichiers :

  • La balise de lien a pour créer des liens vers un fichier de la même machine
  • Les balises orphelines img permettant d'afficher des images

Vous verez également quelques points importants pour la réalisation de pages HTML.

Logiciels : Il faudra utiliser un éditeur de code. On propose ici d'utiliser Atom produit par Githhub, aujourd'hui possédé par Google, ou Notepad ++ (Notepadqq sur Linux). Sublim Text est également une alternative de qualité.

Evaluation ✎ : 05-11

1 - Gérer les liens vers les pages locales

Pour l'instant, vos liens ne désignent que des pages situées sur le Web.

Mais lorsqu'on crée une page et qu'on la place sur un serveur, elle peut facilement joindre les autres pages de votre site sans avoir besoin de donner le nom du serveur : vous êtes déjà sur la machine qui contient les fichiers HTML.

Dans ce cas, il suffit de ne donner que la dernière partie de l'URL.

Passons à l'exercice pratique : voici la structure de trois pages légérement différentes l'une de l'autre.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <title>TEST DES LIENS</title> <link rel="stylesheet" href="style_1.css" /> </head> <body> <main> <h1>Voici la page 1</h1> </main> </body> </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <title>TEST DES LIENS</title> <link rel="stylesheet" href="style_1.css" /> </head> <body> <main> <h1>Voici la page 2</h1> </main> </body> </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <title>TEST DES LIENS</title> <link rel="stylesheet" href="style_1.css" /> </head> <body> <main> <h1>Voici la page 3</h1> </main> </body> </html>

01° Dans l'un de vos dossiers de travail, reproduire la structure ci-dessous en créant un dossier et un sous-dossier. Créer les trois pages HTML nommées page_1.html, page_2.html, et page_3.html à l'aide des trois codes ci-dessus.

📁 test_liens

📁 pages_test

📄 page_1.html

📄 page_2.html

📄 page_3.html

Sauvegardez bien les pages dans le même dossier pages_test. C'est important pour la localisation de vos pages via les liens.

02° Créer maintenant des liens permettant d'atteindre les trois autres pages depuis chacune des pages. Il faudra par exemple placer les liens suivants dans une balise <nav>.

<p><a href="page_1.html">PAGE 1</a></p> <p><a href="page_2.html">PAGE 2</a></p> <p><a href="page_3.html">PAGE 3</a></p>

...CORRECTION...

Voici le code de la page 1. Pour la page 2 et 3, on a la même chose en corrigeant la ligne 17 pour afficher le bon numéro de la page.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <title>TEST DES LIENS</title> <link rel="stylesheet" href="style_1.css" /> </head> <body> <nav> <p><a href="page_1.html">PAGE 1</a></p> <p><a href="page_2.html">PAGE 2</a></p> <p><a href="page_3.html">PAGE 3</a></p> </nav> <main> <h1>Voici la page 1</h1> </main> </body> </html>

Normalement, cela marche sans aucun problème en donnant juste le nom du fichier de la page à atteindre. Pourquoi ? Tout simplement car on donne un chemin relatif à la position de la page qui contient le lien. Si vous regardez bien l'adresse fournie, vous pourrez voir qu'elle ne commence pas par un slash  / .

Chemin relatif - Cas des fichiers placés dans un même dossier

Imaginons un code situé dans page_1.html.
Un lien sur cette page indique href="page_2.html" sans plus d'indication.
Cela veut dire de chercher un fichier html nommé "page_2.html" dans le même dossier que celui de la page page_1.html.

📁 test_liens

📁 pages_test

📄 page_1.html

📄 page_2.html

📄 page_3.html

Ici, il existe bien un document page_2.html dans le même dossier que page_1.html.

Compliquons les choses : nous voudrions créer une quatrième nommée page_4.html qui se trouvera dans un sous-sous dossier qu'on nommera encore_plus_loin.

03° Créer le fichier page_4.html au bon endroit (c'est à dire dans le dossier encore_plus_loin). Il faudra customiser cette 4e page pour la distinguer des trois premières.

Voilà la structure des enregistrements :

📁 test_liens

📁 pages_test

📄 page_1.html

📄 page_2.html

📄 page_3.html

📁 encore_plus_loin

📄 page_4.html

04° Rajouter les liens entre les quatre pages.

Normalement, cela ne fonctionne pas pour la page 4. Pourquoi ?

...CORRECTION...

Simplement parce que le fichier page_4.html ne se situe pas au même endroit que les trois autres. Ainsi, si on cherche page_4.html dans le dossier pages_test, on ne le trouve pas.

📁 test_liens

📁 pages_test

📄 page_1.html

📄 page_2.html

📄 page_3.html

📁 encore_plus_loin

De la même façon, lorsqu'on est sur la page page_4.html, on ne parvient pas à trouver page_1.html, page_2.html et page_3.html puisqu'on cherche dans le dossier encore_plus_loin.

📁 encore_plus_loin

📄 page_4.html

Il faut falloir indiquer le chemin à suivre pour retrouver page_4.html, à savoir : aller dans le sous-répertoire encore_plus_loin.

Il faut écrire le lien en rajoutant l'accès relatif.

Chemin relatif - Cas des fichiers placés dans des dossiers différents

Un chemin est dit chemin relatif lorsque son point de départ est le fichier actuel, celui dans lequel on fournit le chemin.

📁 test_liens

📁 pages_test

📄 page_1.html

📄 page_2.html

📄 page_3.html

📁 encore_plus_loin

📄 page_4.html

Si on fournit une adresse relative dans le fichier page_1.html, on part de pages_test.

Si on fournit une adresse relative dans le fichier page_4.html, on part de encore_plus_loin.

Atteindre un fichier situé dans un sous-dossier

Il suffit de fournir le chemin à suivre, en utilisant des slashs après chaque nom de dossier.

Ainsi, pour atteindre page_4.html situé dans encore_plus_loin à partir d'un lien fourni dans page_1.html, il faut indiquer ceci :

1
<a href="encore_plus_loin/page_4.html">Vers la page 4</a>

Cela veut donc dire :

  • Partant du dossier pages_test (car le lien est dans le code de page_1.html)
  • Aller dans le dossier encore_plus_loin
  • Et tenter d'y trouver le fichier page_4.html

Atteindre un fichier situé hors du dossier actuel

Si on part d'un lien fourni dans html_4.html, on ne doit pas descendre dans les dossiers pour atteindre les autres fichiers html. Au contraire, il faut remonter.

Pour signaler qu'on doit remonter l'arborescence, il faut simplement noter  ..  puis un slash  /  et ensuite la suite du chemin ou le fichier à trouver.

Par exemple, pour trouver page_1.html à partir d'un lien donné dans page_4.html, il faut écrire ceci :

1
<a href="../page_1.html">Vers la page 1</a>

Cela veut dire :

  • Partant du dossier encore_plus_loin (car c'est le dossier de page_4.html)
  • Remonter dans le dossier supérieur ou dossier parent
  • Et tenter d'y trouver le fichier page_1.html

✎ 05° Finaliser les quatre pages pour que les liens fonctionnent.

...CORRECTION...

Exemple de code pour le fichier page_1.html :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <title>TEST DES LIENS</title> <link rel="stylesheet" href="style_1.css" /> </head> <body> <nav> <p><a href="page_1.html">PAGE 1</a></p> <p><a href="page_2.html">PAGE 2</a></p> <p><a href="page_3.html">PAGE 3</a></p> <p><a href="encore_plus_loin/page_4.html">PAGE 4</a></p> </nav> <main> <h1>Voici la page 1</h1> </main> </body> </html>

Exemple de code pour le fichier page_4.html :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <title>TEST DES LIENS</title> <link rel="stylesheet" href="style_1.css" /> </head> <body> <nav> <p><a href="../page_1.html">PAGE 1</a></p> <p><a href="../page_2.html">PAGE 2</a></p> <p><a href="../page_3.html">PAGE 3</a></p> <p><a href="page_4.html">PAGE 4</a></p> </nav> <main> <h1>Voici la page 4</h1> </main> </body> </html>

2 - Les images

Maintenant que vous savez créer des adresses relatives à la position du fichier qui lance l'appel, vous allez pouvoir afficher des images.

Pour insérer des images dans une page html, il va falloir utiliser la balise img.

HTML gère par exemples les formats suivants :

  • les png : compression mais sans perte de qualité de l'image, couche de transparence possible
  • les jpeg (ou .jpg) : plus de compression mais une dégradation de la qualité de l'image, pas de transparence
  • les gif : peu de qualité mais possibilité de transparence et de créer des gif animés

Comme on veut afficher une image, il faut lui donner le nom et la localisation de l'image à travers l'attribut src, pour source.

Nous allons faire quelques exemples avec l'image du sigle Creative Commons et du sigle des codes OpenSource. Nous en profiterons pour donner quelques indications sur ces licences.

06° Téléchargez les images ci-dessus (clic-droit, enregistrer sous) et placez les comme indiqué ci-dessous : en gros, on met la première au même endroit que la page html et l'autre dans un sous-dossier nommé mes_images.

📁 travail

📄 page_1.html

📄 cc.png

📁 mes_images

📄 Open_Source.png

Adressage relatif

Pour afficher cc.png à partir d'un code source situé dans fichier page_1.html, c'est facile : comme l'image est dans le même dossier que le fichier html, donnez simplement son nom (src="cc.png") permet de la trouver avec l'adressage relatif.

Pour afficher Open_Source.png à partir d'un code dans fichier page_1.html, c'est plus délicat : il faut indiquer la position du dossier contenant l'image à l'aide de son adresse relatif, sachant qu'on part du dossier travail où se trouve la page html d'appel : src="mes_images/Open_Souce.png"

07° Rajouter les lignes suivantes dans votre fichier HTML pour afficher correctement les deux images sur votre page.

1 2
<img src="cc.png"> <img src="mes_images/Open_Source.png">

Normalement, nous avons :

Les deux images sont l'une à côté de l'autre : il s'agit donc d'une balise inline (comme la balise a) plutôt qu'une balise block (comme la balise p).
Enfin presque : en réalité, nous verrons que c'est une balise inline-block.

On voit également que la balise img est une balise orpheline : elle ne contient que des attributs. Elle ne possède pas de balise de fermeture.

En HTML4, elle devait finir par /, comme sur la ligne 2.

1 2
<img src="cc.png" /> <img src="mes_images/Open_Source.png" />

Avec HTML5, ce n'est plus obligatoire, comme sur la ligne 1. On peut le mettre mais ça ne sert à rien.

Enfin, l'attribut src peut également contenir une URL pointant vers un site externe distribuant l'image.

08° Rajoutez une ou deux images en utilisant directement l'URL d'une image distribuée par un site sur le Web. Pour trouver son adresse, il suffit souvent de faire un clic droit et de rechercher le choix 'Copier l'adresse de l'image'.

Tentez de récupérer une image ayant une adresse courte. Pour cela, ne restez pas sur la page présentant l'ensemble de images du moteur de recherche. Il faut cliquer sur l'image et tenter de prendre son adresse sur le site Web sur laquelle elle apparaît.

Si votre adresse est très très longue, c'est qu'il s'agit d'une adresse intégrant directement les données dans l'URL de la ressource. Ca évite au serveur de fournir les données lorsqu'on utilise cette adresse : les données de l'image sont directement stockées dans l'adresse !

Exemple d'adresse d'image en version URL

http://detechter.com/wp-content/uploads/2013/08/python.png

En insérant une URL de ce type, vous utiliserez les ressources du serveur detechter.com.

Exemple d'adresse d'image en version longue, données intégrées

Ce que vous allez voir ci-dessous est juste la succession d'octets en base 64, un ensemble de 64 chiffres.

Comme vous pouvez le voir, cette fois, on n'utilise pas le protocole http mais un protocole data : on reste en local, les données de l'image sont directement codées dans l'URL.

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw0SDQ0NDRAQDQ8QEBAQDQ0PEBAQDg0NFxEWFhYTFRMYHSggGRolHRUVIT0jJSkrLy8uFx8zODMtOCgtLisBCgoKDg0OGxAQGzAiHSIrLS0tLS0tKystKzArLS0tMCsrKy0vLSstLS0tLS0rKzAtLSsrKy0tLy0tKy0rLSstK//AABEIAOEA4QMBEQACEQEDEQH/xAAcAAEBAAMBAQEBAAAAAAAAAAAAAQQFBgcDAgj/xABHEAACAQEDBQgOCQMFAQAAAAAAAQIDBAUREiExQVEGB1JhcZGT0RMUFRciMjNTcnOBkrHhFiM0oaKys8HTJEKCNWJ0wvBD/8QAGwEBAQADAQEBAAAAAAAAAAAAAAEDBAUCBgf/xAAzEQEAAQICBwUHBQEBAAAAAAAAAQIDBBESFCExMlFxBVKRsdEVM0FhocHhEyI0gfByQv/aAAwDAQACEQMRAD8A9xAAAAAAAAAfitVhCLnOUYRisZSk1GMVtbegsRM7ISZiNsuTvXfBsdNuNCMrVJa4+BSx9N537E0bVGDrq4tjVrxlEcO1zFt3wbwniqXYrOtWTDLmvbLFPmNmnB2437WtVi7k7tjTWjdJeM/HtVf/AAm6a5oYGaLNuN1MMU3rk76pYVS3V5eNWqy9KpN/FnrRpj4PGnVzl8JSb0tvleJ6RFJrQ2uR4EV96dvtEfErVoejVnH4Mk0U/GF06ucs2zbp7yp+Jaq3+cuy/nxMc2bc76XuL1yN1TdWHfFt0MFWhStEdeZ05v8Ayjm/CYasHRO7YzU4uuN+11d0bvrBWajVcrLN+dw7G3xVFmS9LA1q8LXTu2tmjFUVb9jqoyTSaaaaxTWdNbTWbKgAAAAAAAAAAAAAAAAADCvm9KVmoTtFZ+DHMorxqk3ojFbX8z3btzXVow8XLkUU6UvH7/3QWm1zyq0smmnjToRb7HDZ6UuN/doOvas0242eLk3b1Vydvg1RlYkIIACoBCAFAIQArebm91Fpsckot1KGPh2eT8HDW4P+1/c9aMN2zTc682a1eqt9OT1+6ryo2mhC0UJZUJeyUZa4yWpo5ddE0TlLp0VxVGcMw8vQAAAAAAAAAAAAAAAA8w3z7fKVrpWbHwKVNTa21Zt53yRS52dPBURFE1c3NxlWdcU8nGG403oO4/cTRnRharanN1EpUqGLjGMHnUp4Z23pw0YPPxc+/ipidGhv2MLExpVuitu467akHHsEaT1To/Vzi9ubM/ama9OJuROebYqw1uY3ZdHlm6G56lktM7PN5SwUqdRLBVKbxweGp5msNqZ07VyLlOlDm3bc26tGWsMjGhACgEIAVAIRXW7218So21WeT+qtPg4ao1kvBl7cMnjxWw1sVb0qM/jDYw1ejXl8JeuHNdIAAAAAAAAAAAAAAAAeR743+p1PV0vynWwnunKxfvHLz0PkNmGtL36xVYTpUp08HCUISg1oyHFNfccGqJiZiXdpmJiJh9iK8z316sHaLJBePGlNz25MpLJ/LI6OCidGZc/GzGlEOFNxpAUAhACoBCKAZV0Satdla0q0UWuVVI4HmvhnpL1RxR1h7+cZ2AAAAAAAAAAAAAAAAB5Hvj/6nU9XS/KdXCe6crF+8cubLWdVuV3aVLLBUKsHXoJvIweFSljnajjma4nhp06jVvYaLk5xsltWcTNuMp2w39t3yqGQ+16FWU9XZsiEE9ryZSb5M3KYKcFVn+6WerG05bIee3hbqtetOvWll1JvGT0JakktSSzG/TTFMZQ0aqpqnOWMVACEAKgEIoBAMq6vtVl9fR/UieK+Gej1RxR1h/QBx3YAAAAAAAAAAAAAAAAHke+R/qdT1VL4M6uE925WL95/TlzZa6AQgBQCEAKgEIoBABBlXV9qsvr6P6kTzXwz0e6OKOsP6AOO64AAAAAAAAAAAAAAAA0N8bkrHaazr11Uy2oxeTPJWC0ZjPbxFdEZQw14eiuc5YXe+u3ZW6V9R71u48apbTve3bsrdK+oa3cNUtne9u3ZW6V9RNbuGqWzve3bsrdK+oa3cNUtne9u3ZW6V9Q1u4apbO95duyt0r6hrdw1W28vvqzRpWu00YY5FOtUhDF4vJjJpYs6FFUzTEy0K6YiqYhhHp5AIAIIFZV0/arL6+j+pE818M9Fo4o6w/oE47sAAAAAAAAAABpr93TWSyZqs8qphiqFPCVRra1oiuVozWrFdzduYbl+i3v38nF27fHtUm+16NKlHbUyqs+XNgl95uU4KmOKc2nVjap4Yya/6eXn5yn0UT3qlp41u4fT28+HT6KI1S0a3cPp7efnKfRRGqW11u4n09vPzlPoojVLZrdw+n15+cp9FEapbNauJ9Pr085T6KJNVtmtXD6fXp5yn0URqttdauH0+vTzlPoojVbZrVxPp9ennKfRRGq2zWrh9P704dPook1W2a1cc5bLTOrVqVqmDnUnKc2lgnKTxeYzxERGUMMzMznL4lRABBAqAZd0/arL6+j+pE818M9HqjijrD3u1tqnUazPJeDWlZj57GTMYeuY2TlPk7dqM646tF2epw5+9I+Q1m936vGfV0tCnlHgdnqcOfvSGs3u/V4z6r+nTyjwFaai0Tl7zZacXfpnOK58Z+6Tbon4Qy7PeslmqLKXCWaS9mhnSw3bNdM5XozjnG/0n6MFeFieHY21OpGSUovFPWfQ2rtF2mK6JziWlVTNM5S/RkeQAByG7jdX2su1rM12xJYynmas8HoeHCepe16sdvDYfT/dVu82picRoftp3+Ty2pOUpOUm5Sk25Sk25Sk9LbelnT3bIc1+QiAAqAQgBQCEAKgEIoBABBAqAAMq6ftVl9fR/Uiea+Gej1RxR1e+W3yVT0X8D53Hfxrn/M+Tt2uOOrnj4p1UCoAAyLDa3Tlti/GX7rjN3A4yrDXM/wDzO+Pv182K9ai5T83QRaaTWdPOntR9jTVFURMbpcuYy2SpUYF+XlGzWWtaZZ8iPgx4dR5ox9raPduia6oph4uVxRTNUvELVaJ1Kk6tSWVOcnKcnrk/2O3EREZQ4szMznL5BEABUAhACgEIAVAIRQCACCBUAAAMm6ftVl9fR/UieK+Gej1RxR1h77bfJVPRl8D57Hfxrn/M+Tt2eOOrnT4p1kAAQKEG4uWvjF03pjnj6L+fxPpexcRpUTanfTu6T6T5w5+Lt5TpR8WyO21Hnm+peGezWRPU69Rc8Yf9/uOhgqN9X9NDG17qf7efm80EABUAhACgEIAVAIRQCACCBUAAAIRWfueoudusUFnxtFHH0VUTb5kzxcnKiej3bjOqOr3e2+Sqei/gfP47+Nc/5l2bPHHVzx8U6yAQKAQisi7quTWg9TeS+R5vjgbvZ139PE0zz2eP5yYb9Olbl0Z9m5LxrdzauyXnanjioONOPEoxSa97KOxhqcrUORias7ktAZmACoBCAFAIQAqAQigEAEECoAAAQioB2m9bdTqW12qS+rs8Xg9TrzTilx4RcnxeDtNbE15U6PNs4ajOrS5PTr1nhRa4TSXPj8EfO9rXNDDTHPKPv5Q6+GpzudGiPknSQKAQioAxwzrStHKImY2wZZuh7egfZa9bcr9Cp4je1TKtVpnwq9aXPUkz6qjZTEfKHzte2qessQ9PKAQgBQCEAKgEIoBABBAqAAAEIqAbTc/cNptlXsdCPgprstaS+rpLjet/7VnfJnWO5cpojOXu3bqrnKHtdx3TRstnhZqK8GOeUn41Sb0zlxvqWo5tdc1znLpUURRGUMS97RlTUFohp9LX/wC5T5PtfE/qXf06d1Pn+PV1MLb0adKfi15yW0AQioAAgUxZdKUyeU1JYyk9rb52frkPhn5KIQAoBCAFQD72Kw160siz0p1pa1CLlk8behLjZ5qqimM5l6ppmqcoh0Nm3v7zmsZQpUeKpVWP4FIwTircM8YW5LJ72t4ecsvSVf4zzrdHKXrVK/l/v6O9reHnLL79X+Ma3Ryk1Sv5He1vDzll6Sr/ABjW6OUmqV/JO9peHnLL0lX+Mmt0cpNUr+R3tLw85ZekrfxjW6OUmq1/L/f0ne0vHztl6St/GNbo5SarX8jvZ3j52y9JW/jGtUfM1Wv5PrQ3sbY39ZXs8Fth2So+ZqJJxdPwh6jC1fGW9uve1scGpWipUtTX9vkqT/xi8r8RiqxVU7tjLThaY37XZWWzU6cI06MI0oRzRhCKjFciRrTMzOctiIiIyhh2+8FFOFN4y0OS0R+Zxe0O06bcTbtTnVz5fny+PJt2cPNW2rc0x8y6IBCCBQCBUAEV5VNYNrY2j9efCy/AQCgEIAVAOs3F7kHa/wCotGVCyp4JLNO0STzpPVFaG/Ytq1b9/Q2RvbNixp7Z3PVbFY6VGnGlQhGlCOiEEkuXjfGc6qqapzl0aaYpjKErWynHM3i9izs0b/aFizsqnOeUbf8Af2zUWa6t0MaV6LVDneBzq+24/wDNHjOXqzRhecvx3VfAXvfI8e3Ku59fw9arHM7qvgL3vkPblXc+v4NUjmd1XwF73yHtyrufX8GqRzO6z4C975E9uVdz6/g1SOad1nwF73yHtyrufX8GqRzO6z4C975D25V3Pr+F1SOZ3XfAXvfIe3Ku59fwapHN+JXvPVGK5W2eKu27s8NMR4z6LGEp+Msavbass0pZtizI0b+PxF7ZVVs5RsZqLNFO6GMabMAQggUAgVABFAPMb0p5NptMODWqx5qjX7H65ROdMT8nw1fFPWWKekAIQAqAZ9w3ZK02ujZo4pTl4cl/ZTSxk+XBP24GO5XoUzUyW6NOqKXulnoQp04U6cVCEIqMIrRGKWCRx6qs9sutEZRlDXWy3OTcYPCO3XL5HzGP7TquTNFqcqefxn8N+1YinbVvYRyGygEABUABUIAVAIBAoBCCBQCBUAEVAGBcpHBbs7P2O87ZHbU7IuPLip/GTP1exOduHxV+MrktKZmJCAFQCEV3+9LY06trtDXiQhSg/SblL8sOc08ZVsiluYOnbNTvb0rYQUVplp9HWfM9r4ibdqLcb6vL4uth6M6s+TUnzDfQCAAqAAqACKgEAgUAhBAoBAoBCKgBJvMtLzLlLETOyN8meTpO0IH2WoW3I1ip53vq2HJtNC0pZqtN05bMuDxz8qn+E7+Dq/bNLkYynKqKnDm20wKgEIoB6jvTL+itL19stexUqfWzn4zjjo38Jwz1+0OhvWX1iWyK+LPjO2as78RyiPu7WGj9jCOS2EABUABUAEVAIBAoBCCBQCBQCEVAAGVdVHKrQ2R8J+zR9+Bv9m2f1cTTHwjbP9fnJhxNejbn57HSn2TjtDu2ul2mwVYQWVVp4VaK1ucccYrjcXJcrRmw9zQriZ3MN+3p0ZRveK4nWcoAhFAIB6nvTfYbR/ypfo0jn4zjjp95b+E4Z6/aG+vTyr5EfE9r/wAmekO3huBiHMZ0CoACoAIqAQCBQCEECgECgEIqAAIFb+5bNk08t6Z51xR1dfMfVdj4X9K1+pVvq8vh6uXi7ulVoxuhsTrtQA8n3wdzToVpWujH+nqyxmlooVm86eyMno43hsOlhr2lGjO+HOxNnRnSjdLjjZawBABB6nvS/YbR/wAqX6NI0MXxx09W/hOGev2hvr08q+RHxPa/8mekO3huBhnMbCAAqACKgEAgUAhBAoBAoBCKgACBWwuu73Nqc19WtC4b6jrdm9nTfmLlyP2ef4589zUxOI0I0ad/k6A+rcsAAfitShOEqdSKnCScZQkk4yi9KaelFiZic4SYiYyl5xui3u6icql3tTi8/a05YTjxQm8zXFLDlZvW8XG6vxaVzCzvo8HFWy7LTSbVahVpNcOnJJ8jwwfsNqK6Z3S1ZoqjfDGyJbHzMuaZJkS2PmYzMnqW9MmrDaMU1/VS0+ppHPxfHHT1b+E4Z6/aG9vTyr5EfFdr/wAmekO3huBhnMZwKgAioBAPurFWaTUHg86zrRzm5HZ+JqjOKNn9erFN+3GzNe0K3AfOusvs7FdyfGPU/Xt807QrcB866x7NxXc+seq/r2+adoV+A+ePWT2biu5PjHqaxb5naFfgPnj1j2biu5PjHqaxb5naFfgPnj1j2biu5PjHqusW+adz6/AfPHrHs3FdyfGPU1i3zO59fgPnj1j2biu5PjHqaxa5p3Pr+bfPHrHs3FdyfGPVdYtc07n1/Nvnj1j2biu5P09TWLXN+6d1V3/ao8cpL9sTJR2Tiqt9OXWY+2bzVirUfHNsLLc8I56jy3s0R+Z1cN2NbonSuzpTy+H58vk1bmMqq2U7GzSO1GxpgAAAAAAAAABpb18q+RHyna/8mekOjhuBhnMbCACCBUAgVvKN4UVGKcs6ik/Blpw5D6u12nhabdMTVtiI+E+jm1Ye5NUzl5P33SocP8Muoye1cJ3/AKT6POrXeXkd0qHD/DLqHtXCd/6T6GrXeXkd0qHD/DLqHtXCd/6T6GrXeXkd06HD/DLqJ7Vwnf8ApV6GrXeXkndOhw/wy6h7Vwnf+lXoatd5eSxvKg2kp528F4MtPMeqe1MLVMRFW2flPoThrsbcvJlm+wAAAAAAAAAAAAAAAADSXr5V8iPlO1/5M9IdHDe7YZzGwEECoAAgVCCBQCBQCEV+6Pjw9KPxMtn3tPWPN5r4Z6OrPvHDAAAAAAAAAAAAAAAAGkvbyr5EfKdr/wAmekOjhvdsM5bYQKgACBUIIFAIFbGzXTOSUpvIx0Rwxl7dh2cN2NcuU6VydH5b5/DUuYummcqYzS1XTOKcoPLS0rDCWHFtJiex7lunStzpRy+P5LeLpqnKqMmuOM3H6o+PD0o/Ey2feU9Y83mvhno6w+8cMAAAAAAAAAAAAAAAAaS9vKv0UfKdr/yZ6Q6WG92wjlthAAECoQQKAAr73dFOtTT0Y48yb/Y3Oz6IrxNFM7s/KJn7MN+Zi3Mw6U+0cgA5i8IJVqiWjK+Of9z4nHURRia6ad2fntdmxMzbiZfGj48PSj8TBZ95T1jzZK+GejrT71wgAAAAAAAAAAAAAAABrL5o5o1Fq8GXJq/9xnB7aw8zEXo+Gyft/vm3MJXvpak+ebwBAqEAKgAKgFp1HGSlHSmmj1buVW64rp3xtSqmKoyl0NmvClNLwlGWuMng8eLafX4btGxep35Tyn/bXKuYeuid2cJarxpQTwanLVGLxz8ewmJ7SsWaZynSq5R9+Rbw9dc7soc7Um5ScnpbbfKz5Cuua6pqq3ztdamIiMofSxU3KrTiuEm+RZ2ZsHam7fopjnHhG2Xm7Vo0TLqj7lxAAAAAAAAAAAAAAAABJRTTTWKeZrajzVTFVM01RnErEzE5w0dusMoYyj4UNuuPL1nymO7Orw8zVTto8uvq6Vm/Feyd7COa2EIAVAAVAIQAqAQKsINtRim29CWlnqiiquqKaYzmUmYpjOXQXZYOxrKlnnLTsitiPrOzuz4w1OlVxz9Pl6uViL/6k5RuZ502sAAAAAAAAAAAAAAAAAADCtF2U5Z14D/26OY5mI7JsXdtP7Z+W7w9MmxRia6dk7Wvq3VVXi4TXE8HzM5F3sfEUcOVX0n6+rapxdE79jFnZqi0wkvY2uc0a8Jfo4qJ8GeLlE7ph8nx5jXnZslkhMSZiYjNUxJnA/UYSfipy5E2ZKbddfDEz0jNJqiN8vvTu+vLRBr0sI/E2rfZ2Jr3UTHXZ57WKrEW6fizKFyP/wCk8OKGd876jo2ew6p23av6j1n0a9eNj/zHi2lnstOCwhFLa9LfKzt4fC2rEZW4y8/Fp3LtVc/ul9jYYwAAAAAAAAAAAAAAAAAAAAAAB86+gxXuF7o3tbWOPd3tuh8omKne9yzbMdHDte4zjotYAAAAAAAAAAAAAB//2Q==

Texte alternatif 

L'attribut alt permet d'afficher un texte alternatif si l'image ne peut s'afficher correctement pour une raison ou une autre (ici, j'ai volontairement fait l'erreur de remplacer les .png par des .gif).

1 2
<img src="cc.gif" alt="Logo CC"> <img src="mes_images/Open_Source.gif" alt="Logo Open Source">

09° Testez le code fourni juste au dessus.Ca devrait donner le test ci-dessous.

Logo CC Logo Open Source

Width et heigth 

Autres attributs qui sont normalement obligatoires si vous voulez que votre page ne bouge pas constamment au fur et à mesure du téléchargement des images : les attributs width et height.

Ainsi, normalement, il faut noter ceci dans votre code:

1 2
<img src="cc.png" alt="Logo CC" width="150" height="150"> <img src="mes_images/Open_Source.png" alt="Logo Open Source" width="165" height="165">

Les valeurs à fournir sont en pixels. Il suffit d'aller les chercher dans les propriétés de l'image.

Attention, si vous dimensionnez l'image avec des valeurs plus petites, l'image reste aussi lourde qu'avant en terme d'octets ! Il s'agit uniquement des dimensions d'affichage.

Mais c'est assez lourd à faire. C'est quelque chose qu'un générateur automatique de page html (en Php ou en Pyhton) pourrait faire de façon automatique par contre.

Title : texte au survol 

L'attribut title qui permet d'afficher un texte lorsqu'on survole l'image.

1 2
<img src="cc.png" alt="Logo CC" width="150" height="150" title="LOGO CC"> <img src="mes_images/Open_Source.png" alt="Logo Open Source" width="165" height="165" title="LOGO OPEN SOURCE">

10° Testez.Ca devrait donner le résultat ci-dessous.

Logo CC Logo Open Source

Image et Lien 

Plutôt que de placer un texte à l'intérieur d'une balise a de lien, on peut utiliser une image.

A titre d'exemple, voilà une image-lien permettant d'accéder à la page Wikipédia traitant de l'Open Source. Si vous cliquez dessous, vous allez être transporté là-bas. Et, il faudra revenir ici à la main...

https://fr.wikipedia.org/wiki/Open_source
1 2 3
<a href="https://fr.wikipedia.org/wiki/Open_source"> <img src="mes_images/Open_Source.png" alt="https://fr.wikipedia.org/wiki/Open_source" width="165" height="165" title="https://fr.wikipedia.org/wiki/Open_source"> </a>

✎ 11° Créer deux liens en utilisant des images. Votre choix.

3 - Balise br

Nous avons vu une première balise orpheline  la balise img.

Nous allons voir deux autres balises orphelines.

La balise br qui permet de passer à la ligne dans un paragraphe et la balise hr qui permet de placer une barre de séparation dans votre page.

1 2 3 4 5
<p>Nous pouvons écrire une phrase et passez simplement à la ligne.<br> Nous pouvons ainsi avoir un vrai paragraphe avec des passages à la ligne sans espace.</p> <p>Par contre, le prochain paragraphe est bien séparé du précédent.</p> <hr> <p>L'élément séparateur est bien visible je pense.</p>

Ce qui donne :

Nous pouvons écrire une phrase et passez simplement à la ligne.
Nous pouvons ainsi avoir un vrai paragraphe avec des passages à la ligne sans espace.

Par contre, le prochain paragraphe est bien séparé du précédent.


L'élément séparateur est bien visible je pense.

4 - Balise générique inline : span

Nous avons vu que la balise div permet de créer un conteneur pour agir sur plusieurs balises à la fois. Mais c'est une balise block. On passe à la ligne avant la balise d'ouverture et après la balise de fermeture.

Mais comment faire pour afficher un texte en rouge sur plusieurs mots, mais pas tout le paragraphe ?

Et bien, il faut entourer votre sélection par un balise permettant de créer un conteneur, mais un conteneur qui ne passe pas à la ligne : la balise span.

12° Utiliser l'exemple ci-dessous et le modifier pour être certain d'avoir compris le principe.

1 2 3 4 5
<p>Nous pouvons <span style="color:green;">écrire une phrase</span> et passez simplement à la ligne.<br> Nous pouvons ainsi avoir un vrai paragraphe avec des passages à la ligne sans espace.</p> <p>Par contre, <span style="color:red;">le prochain</span> paragraphe est bien séparé du précédent.</p> <hr> <p>L'élément séparateur est bien visible je pense.</p>

Vous devriez obtenir ceci

Nous pouvons écrire une phrase et passez simplement à la ligne.
Nous pouvons ainsi avoir un vrai paragraphe avec des passages à la ligne sans espace.

Par contre, le prochain paragraphe est bien séparé du précédent.


L'élément séparateur est bien visible je pense.

Balises génériques

Retenons donc que la balise-conteneur générique block (avec passage à la ligne) est la balise div.

La balise-conteneur générique inline est la balise span (sans passage à la ligne).

5 - Web sémantique

Il reste encore quelques balises importantes. Pas pour l'apparence qu'elles engendrent mais pour le sens que le moteur de recherche va leur donner.

Nous n'allons en voir que quelques unes, pour comprendre le principe uniquement.

Les trois balises que nous allons voir sont des balises inline.

Si vous voulez mettre un bout de texte en emphase, il suffit de le placer dans une balise em. Vous transmettez alors l'idée que ce bout de phrase à une certaine importance dans votre article. Par défaut, ce texte va apparaître en italique, mais nous verrons qu'on peut en faire ce qu'on veut avec le CSS.

Si vous voulez indiquer qu'un bout de texte est très important, il suffit de le placer dans une balise strong. Par défaut, ce texte va apparaître en gras.

Si vous voulez indiquer qu'un bout de texte est extrêmement important, il suffit de le placer dans une balise mark. Par défaut, ce texte va apparaître surligné en jaune. Difficile de faire plus visible.

13° Utiliser l'exemple ci-dessous et le modifier pour être certain d'avoir compris le principe.

1 2 3 4 5
<p>Nous pouvons <em>écrire une phrase</em> et passez simplement à la ligne.<br> Nous pouvons ainsi avoir un vrai paragraphe avec des passages à la ligne sans espace.</p> <p>Par contre, <strong>le prochain</strong> paragraphe est bien séparé du précédent.</p> <hr> <p>L'élément séparateur est bien <mark>visible</mark je pense.</p>

Vous devriez obtenir ceci

Nous pouvons écrire une phrase et passez simplement à la ligne.
Nous pouvons ainsi avoir un vrai paragraphe avec des passages à la ligne sans espace.

Par contre, le prochain paragraphe est bien séparé du précédent.


L'élément séparateur est bien visible

On ne peut pas ouvrir et fermer les balises dans n’importe quel ordre  :

On commence par <p> donc il faut finir par </p>.

Ainsi <p><em></em></p> est une structure correcte : <p> englobe bien <em>.

Par contre, <p><em></p></em> n’est pas une structure correcte : <p> et <em> sont imbriquées l’une dans l’autre sans que l’une englobe l’autre.

6 - Commentaires

Il reste à voir comment insérer un commentaire qui sera présent dans le code mais qui ne sera pas affiché à l’écran.

<!-- Commentaires -->

Les commentaires dans un fichier HTML sont indiqués par des chevrons. Les voici  :

Le début du commentaire est codé par <!--.

La fin de la zone de commentaire est codée par -->.

Voici un exemple d'utilisation de commentaires sur une ligne puis sur plusieurs lignes :

<p>Je veux mettre un <mark>élément</mark> en balise mark</p> <!-- Ici je place un commentaire, une explication --> <p>Et ici, je reviens sur un contenu à afficher</p> <!-- Le plus beau, c'est qu'on peut faire des commentaires sur plusieurs lignes <p>Ah ah ah</p> Et que les balises contenues dans le commentaire n'auront aucun effet --> <p>C'est la fin, avec un nouvel affichage</p>

Ce code va provoquer l'affichage suivant :

Je veux mettre un élément en balise mark

Et ici, je reviens sur un contenu à afficher

C'est la fin, avec un nouvel affichage

14° Rajouter un commentaire signalant où se trouve le début de votre code et un autre pour signaler le début de votre liste. Le commentaire devrait apparaître dans une couleur différente du reste du texte sur votre éditeur.

7 - FAQ

Structure de la balise main

Un petit complément pour la forme :

On peut aller encore plus loin dans la codification des informations à afficher en fournissant des balises à l'intérieur de la balise <main> :

Contenu possible de la balise main

La balise <main> peut contenir par exemple les balises suivantes :

  • D'autres balises <header>, <nav> ou <footer> pour l'introduction, un menu de navigation spécifique et une conclusion
  • Des balises <article> pour les parties quasi-indépendantes du reste
  • Des balises <section> pour délimiter les différentes parties de la page (I-II-III ect ...)
  • Des balises <aside> pour les petits textes traitant d'un sujet presque annexe au sujet principal.

Avec une balise <main> composée d'autres balises, on peut obtenir ceci :

<body> <header>Header de la page</header> <main> <header>Introduction de la page</header> <nav>Navigation du main</nav> <section>Contenu principal</section> <footer>Conclusion de la page</footer> </main> <footer>Bas de page</footer> </body>

Si votre page comporte plusieurs parties, vous pourriez aussi utiliser cette structure :

<body> <header>Header de la page</header> <main> <header>Introduction de la page</header> <nav>Navigation du main</nav> <section> <h2>Première partie</h2> <p>Bla bla</p> </section> <section> <h2>Seconde partie</h2> <p>Bla bla aussi</p> </section> <footer>Conclusion de la page</footer> </main> <footer>Bas de page</footer> </body>

Heureusement pour nous, il n'est pas obligatoire de suivre cela dans le détail. Par contre, structurer un minimum sa page est nécessaire. D'ailleurs la différence d'utilisation des différentes balises est parfois suffisamment floues pour être interchangées sans trop de problèmes.

Outils trouver-modifier

Et si on décide de changer le nom d'un fichier html, il faut changer son nom dans toutes les pages ? Oui. Et ça peut être long.

Pour l'instant, vous n'avez pas la possibilité de créer un menu générique dont on donnerait le code à un endroit. Ce serait plus simple : il suffirait de modifier ce code pour modifier toutes les pages (un peu comme avec le CSS). Il faut pour cela utiliser un langage de progammation générant automatiquement la page html à envoyer à l'utilisateur. Or, pour l'instant, vous savez coder vous même la page, pas le faire écrire par un autre programme.

Comment faire alors ?

C'est là qu'intervient l'une des fonctionnalités importantes d'un bon éditeur de code : la recherche et le remplacement automatique d'un ensemble de caractères par un autre ensemble.


Dans Notepad++ ou Notepadqq :

Aller dans le menu RECHERCHE puis REMPLACER.

menu remplacer

En choisissant l'onglet Rechercher dans les fichiers d'un dossier ET en choisissant correctement le dossier à traiter et en sélectionnant sous-dossier, vous pouvez alors modifier (dans tous les fichiers du répertoire sélectionné) automatiquement une chaîne de caractères pour la remplacer pour une autre.


Avec Atom, il faut :

  • appuyer sur  Alt  de façon à afficher le menu.
  • Dans le menu Find, vous trouverez deux fonction de recherche : Find in Buffer vous permet de chercher une séquence de mots dans le fichier actuel et Find in Project vous permet de chercher cette séquence dans tous les fichiers contenus dans un dossier et ses sous-dossiers.
  • menu remplacer atom

Puissant mais dangereux parfois. Pensez toujours à vous demander si d'autres choses ne risquent pas d'être modifiées au passage avant d'appuyer sur OK...

Dans la prochaine activité, nous allons revoir rapidement le CSS, langage qui gère l'apparence de votre contenu HTML.

Activité publiée le 11 12 2019
Dernière modification : 25 01 2020
Auteur : ows. h.