HTML5 - 1 Introduction

Bienvenue dans ce cours d'HTML5. Dans cette introduction, nous verrons ce qu'on peut faire avec HTML : créer notre premier projet, le tester sur un téléphone mobile, ajouter une expérience de réalité virtuelle et finaliser une première application. Avec HTML5, on peut concevoir des sites internet et même des applications. Il existe deux types principaux d'applications web : les Progressive Web Apps (PWA), qui s'adaptent au téléphone ou à la tablette comme une vraie app installée depuis l'App Store ou Google Play ; et les applications natives, développées spécifiquement pour un OS comme iOS ou Android.

Premier projet : balises de base

Pour ce projet, nous utiliserons codehtml.online afin d'éviter toute installation locale. Le squelette de départ contient quatre lignes : le <!DOCTYPE> (chaque page HTML commence par lui), le meta charset (pour gérer les accents, caractères spéciaux et emojis), le <title> de la page, et la balise meta viewport pour optimiser le rendu mobile. Commençons par ajouter un titre avec la balise <h1> (le titre le plus important) : par exemple « Travel Log ». On ajoute ensuite un sous-titre avec <h2> « List of visited countries » et une liste avec la balise <ul> contenant des <li> pour chaque pays (Argentine, Brésil, Colombie, USA, France, Italie).

Pour afficher une image, on utilise la balise <img src="photo.jpg" width="100%"> : l'attribut width à 100% adapte sa taille au conteneur. On peut faire la même chose avec un GIF animé. Le menu Help liste les ressources disponibles (photo.jpg, animation.gif). On peut zoomer/dézoomer la page de code et redimensionner la zone de résultat : le contenu s'adapte. En cliquant sur New project, on accède à un projet plus complet avec un fichier HTML, JavaScript, CSS et un GIF. On y colle notre code et on remonte les liens externes en haut pour plus de lisibilité.

Le fichier CSS permet d'ajouter du style : dans la balise body, color: yellow change la couleur du texte, et background-color change le fond. Pour ajouter une vidéo : <video src="video.mp4" width="300" height="200" controls> affiche un lecteur avec contrôles. Pour une expérience de réalité virtuelle, on importe le framework A-Frame via <script src="aframe.js">, puis on ajoute une balise <a-scene> de 100% de largeur sur 300 pixels de hauteur contenant un <a-sky src="pano.jpg"> : on obtient un panorama 360° navigable à la souris ou en bougeant le téléphone, avec même un mode lunettes VR.

On termine en ajoutant des liens de contact avec la balise <a href="..."> : lien Twitter (twitter.com/@dev), lien tel: qui déclenche un appel sur Android ou iOS, et lien WhatsApp whatsapp://send?text=Look at my travel log qui ouvre WhatsApp avec un message pré-rempli. Enfin, on ajoute du son sur le GIF avec onclick="speak()". Dans script.js, on définit la fonction speak : une variable voice = new SpeechSynthesisUtterance(), voice.text = "This is the shoreline at Shanghai", et speechSynthesis.speak(voice). Au clic sur le GIF, la synthèse vocale se déclenche.

En résumé

Cette leçon introductive à HTML5 présente les fondamentaux du langage de balisage et les possibilités qu'il offre pour créer des sites web et des applications (Progressive Web Apps et applications natives). Elle couvre les éléments essentiels (DOCTYPE, meta charset, viewport) et démontre la création d'un premier projet pratique en utilisant l'éditeur en ligne HTML.online, incluant l'ajout de titres, listes, images et GIFs avec adaptation responsive.

Points clés

• HTML5 permet de créer des sites web et des applications (Progressive Web Apps adaptatifs et applications Web natives spécifiques à chaque OS)
• Chaque page HTML commence par un DOCTYPE et inclut les balises essentielles : meta charset pour l'encodage, titre de la page, et viewport pour l'optimisation mobile
• Les balises de structure (H1, H2, UL, LI) organisent le contenu de manière hiérarchique et sémantique
• Les balises multimédias (IMG, GIF) permettent d'intégrer des ressources visuelles avec adaptation responsive via la propriété width en pourcentage
• L'éditeur HTML.online offre un environnement pratique avec prévisualisation en temps réel et accès aux ressources disponibles
• Le CSS permet de styler le contenu (couleur, fond) directement dans la balise body pour améliorer l'apparence

Questions fréquentes

Quelle est la différence entre les Progressive Web Apps et les applications Web natives ?

Les Progressive Web Apps s'adaptent à l'appareil utilisateur (téléphone, tablette) et s'affichent comme une application téléchargée, tandis que les applications Web natives sont développées spécifiquement pour un système d'exploitation particulier (iOS, Android).

Pourquoi faut-il toujours inclure le meta charset dans une page HTML ?

Le meta charset définit l'encodage des caractères de la page et évite les problèmes d'affichage des accents, caractères spéciaux et emojis.

Comment rendre une image responsive en HTML5 ?

On peut utiliser la propriété width avec une valeur en pourcentage (par exemple width="100%") pour adapter l'image à la largeur du conteneur et aux différentes tailles d'écran.