| Soyons un peu curieux |
|
|
Une page html bob.
|
Ouvrez cette page dans un autre onglet (Ctrl+clic)
|
|
Regardons le code source de la page html, avec firefox : Crtl+U
|
- Sur la page en question utilisez le racourci, et regardez le contenu du nouvel onglet ouvert.
- Repérez les balise déjà connue, comme head body
- Y a-t-il des p ?
- Pouvez-vous trouver la balise fermante pour chaque balise ouverte ?
|
|
Tentons de le rendre plus lisible, avec notepad++ et html-tidy : > Plugins > tidy2
|
- Sélectionnez tout le code source (Ctrl+A) ; copiez-le (Ctrl+C)
- Ouvrez notepad++ et collez-y le code html (Ctrl+V)
- Afin que notepad++ reconnaisse qu'il s'agit de code html, sauvegardez avec un nom en .html (Ctrl+S et bob.html, par exemple)
- Remarquez la coloration automatique mise en place par notepad++ (tags, attributs, valeurs, contenus)
- Remarquez que si vous sélectionnez à la souris une balise (ouvrante ou fermante), elle devient surlignée, ainsi que l'autre extrémité du parenthésage (s'il est visible dans la fenêtre)
- Dans le mennu Plugins (barre en haut), sélectionnez Tidy 2, puis une configuration au hasard. (si le menu ne contient pas tidy, ajoutez le en choisissant Plugins Admin..)
- Quelques secondes tout au plus, et constatez le résultat : ça doit être mieux, mais vous devriez pouvoir repérer des imperfections
- Sauvegardez dans un autre fichier (Ctrl+Alt+S et bob_indent.html, par exemple)
|
|
Explorons et modifions le code, avec firefox inspector : Crtl+Shift+I
|
- Le code traduit par firefox en DOM est visible et modifiable en live
- Retournez sur la page originale de bob, et lancez l'inspecteur : Ctrl+Shift+I
-
Déplacez-vous dans l'inspecteur ou sur la page, pour voir les parties correspondantes passer en surlignement
- Tentez une modification (par exemple, changez "Newest Albums Added" en "Newest oldschool Albums Added"
|