Langage #1 : HTML

Langage #2 HTML

Langage #1 : HTML

Sur internet, on trouve le Web ! Avec des contenus mis en pages en HTML grâce à ses nombreuses balises. On peut surfer de pages en pages via des hyperliens. Le HyperText Markup Language est soumis au W3C pour sa standardisation.

Voici quelques informations sur le langage de description HTML, quelques dates, le format de fichier, l'édition, et la documentation. On trouvera aussi quelques notes sur le debugage de page HTML dans les butineurs WEB. Seul, HTML peut déjà faire pas mal de chose, mais avec CSS et javascript, on ajoutera de nouvelles dimensions de design et d'interactivité.
Quelques mots sur le langage HTML ​

HTML (HyperText Markup Language) est un langage de balisage sémantique, permettant de structurer des informations.  Pour chaque langage, on doit parler de leur date de création et de leur version. Oui avec le temps les versions changent  et des BUGS dus aux incompatibilités peuvent être visibles! La version 1 de HTML a été créée en 1993, et la version de 2014 est le HTML5.

Chacune des versions possède des spécifications très précises. Ces dernières sont utiles pour les sociétés qui créent des navigateurs web. En effet, ces derniers doivent implémenter des interpréteurs HTML dans leurs navigateurs. Selon la spécification utilisée, les développeurs web et les créateurs de contenu doivent faire attention à leurs créations. Ils doivent maintenir leurs codes compatibles avec les navigateurs les plus courant afin de ne pas avoir de BUGS de mise en page.

Aujourd’hui en 2020, on ne sait pas tout le temps quelle version on utilise. Les navigateurs modernes corrigent eux-mêmes la syntaxe et les balises, ce qui peut amener à des résultats surprenants, entraînant des BUGS. (lenteur, affichage explosé, etc) C’est le doc type du document HTML qui permettra au navigateur de l’interpréter et de faire une rendu visuel. Pour débuguer, on utilisera les outils de développement directement intégrés aux navigateurs récents.

On a vécu une obsolescence programmée au niveau de la création web, il fallait faire des exceptions de codages pour tous les navigateurs. Mais aujourd’hui cela se stabilise, des navigateurs comme microsoft internet explorer, netscape, et anciens navigateurs ne sont normalement plus utilisés et les navigateurs récent sont de plus en plus compatibles. Dans la suite de cet article, il faudra avoir des connaissances de bases en informatique. Savoir ce qu’est un dossier, un fichier, un format de fichier, une extension de fichier, un système de formatage de support de données, un chemin, une URL, …


Le format de fichier HTML

Son format est composé d’un en-tête comportant le doctype, puis la structure principale du code html : < html >, < head >, et <  body >. Il possède une extension de fichier .html, ou .htm . L’encodage du fichier est de préférence utf-8 with no BOM si on veut pouvoir utiliser des caractères étendus comme par exemple les accents aigus, circonflexes, ou graves. Le mime type du fichier html est text/html .

Exemple de balisage de base d’une page HTML 
 
<!DOCTYPE html >
<html>
	<head>
		>Langage #1 : HTML - 12H30 Communication - Agence de communication 360
	</head>

	<body>
		Contenu de la page web
   	</body>
</html>


Comment lire ou éditer un document HTML

Dans tous les cas, il faut ouvrir le fichier HTML. Que le fichier soit stocké sur un serveur web, ou en local sur le disque dur interne, ou sur une clé usb, il faut ouvrir le fichier avec un logiciel. On peut soit en tant que dévelopeur ouvrir le fichier avec un éditeur de code ou soit comme utilisateur le consulter avec un client web.
Il existe moultes éditeurs HTML, en voici quelques uns, une petite liste non exhaustive :  notepad ++ + extensions , sublimetext, dreamweaver, Visual studio code, Brackets, Atom, …Il en existe beaucoup d’autres.
Voici une liste non exhaustive de clients / navigateurs web dans le désordre: internet explorer, edge, firefox, google chrome, vivaldi, opera, … Il en existe aussi beaucoup d’autres.


S’équiper

Pour aborder le monde du HTML, il faut s’équiper d’un terminal. Un terminal peut être un ordinateur, une tablette ou un téléphone mobile. Il faut aussi s’équiper de logiciels, et d’une connexion internet. Il y a 4 actions de bases possible. On peut manipuler du HTML, modifier son code, son contenu. On peut consulter la page HTML, la mettre en Favori, la partager, l’imprimer, la lire, et interagir avec elle. La page HTML peut faire partie d’un site internet et est hébergée sur un serveur, ou elle peut être stockée sur un support de masse comme un disque dur, ou une clé usb :

  • 📝Manipuler du HTML via un éditeur de texte 
  • 👁️Voir du HTML via un navigateur 
  • 🌐Héberger / stocker du HTML
  • 🔗Accéder à une page WEB via une URL vers le fichier .html. ou un chemin vers le fichier .html 

Si la page WEB n’est pas sur un disque dur directement accessible par le terminal, donc accessible en local ou offline, pour accéder à cette page, il faut une être connecté au réseau des réseaux WWW et pour cela :

Une connexion au réseau internet est conseillée !!!


Voici quelques notes sur le debugage : 🛠️LET’S GO DEBUG !

Le problème avec le HTML, c’est que même quand c’est mal balisé, on ne voit pas tout le temps la différence entre une page bien écrite et donc valide w3c ou mal écrite donc non valide w3c. Plusieurs erreurs peuvent être faites comme l’oubli de fermeture d’une balise, comme l’imbriquage de deux balises, ou un espace en trop dans les symboles < et >. Pour debugguer, les investigations de base sont à faire directement dans le navigateur.

  • Utiliser les outils de développement web intégrés au navigateur web.
  • Lancer une investigation
  • Observer les messages d’erreurs, d’avertissements de la console de l’outil de développement.
  • Le HTML même quand c’est mal codé, ça marche quand même !

Se documenter📚

Où trouver de la documentation ?

Le plus courant est d’utiliser les moteurs de recherches avec les mots clés “html documentation” et de trouver ainsi tout ce qu’il faut pour coder en HTML.


 

Conclusion

Rédacteurs Web, Frontend dévelopeurs, dévelopeurs web, manipulent le code HTML et luttent contre les erreurs et les éditeurs wysiwyg qui rendent la tâche parfois très difficile.

Un simple retour à la ligne peut de venir une corvée !

Rubriques du 12h30

🛠 Boîte à outil

Codes ASCII
À (a majuscule accent) = Alt+0192
É (e majuscule accent aigu) =Alt+0201
È (e majuscule accent grave) = Alt+0200
Ç (c cédille majuscule) = Alt+0199
Ù (u majuscule accent grave) = Alt+0217

< &lt; &#60; Less-than
> &gt; &#62; Greater than
@ &#64; At sign
© &amp;copy; &amp;#169; Copyright
® &amp;reg; &amp;#174; Registered trademark
« &amp;laquo; &amp;#171; Opening/Left angle quotation mark
» &amp;raquo; &amp;#187; Closing/Right angle quotation mark
♠ &amp;spades; &amp;#9824; Spade
♣ &amp;clubs; &amp;#9827; Club
♥ &amp;hearts; &amp;#9829; Heart
♦ &amp;diams; &amp;#9830; Diamond

🕕🔵▶️🚀✨

☕️ 👍 ❤️ 🌶 🔥 🤯 

📣🎬🎹 🎨 🎵
🕸 🌍💡 ⚗️ 🧪 🔌 🔋
⏳⏱🦄 🐛 🦋🖖🧐

♞DoCumentations

⚠ Suggestions

Showreal Print
Showreal Live
Showreal Web