HTML5 - 1 Introduction

Bonjour et bienvenue pour ce cours de HTML. Dans ce premier nous aborderon l'introduction. Nous verrons ce qu'on peut faire avec HTML 5. On fera un premier projet avec HTML5. On le testera sur notre téléphone mobile. On créera une expérience de réalité virtuelle, et on terminera notre première application mobile.

Tout d'abord que pouvons-nous faire avec HTML5. Et bien vous pouvez très bien créer un site internet ou créer des applications. Dans les applications, nous avons deux types d'applications : les applications Web progressives et les applications Web natives. Les applications Web progressives apparaissent à l'utilisateur de la même manière qu'une application web mobile, c'est-à-dire qu'elle va s'adapter à votre téléphone sur votre tablette de la même manière que si vous aviez téléchargé une application sur l'App Store ou Android. L'application Web native est donc une application mobile développée spécifiquement pour l'un des systèmes d'exploitation utilisé par les smartphones et les tablettes, c'est-à-dire iOS, Android, etc.

Donc notre premier projet HTML5. Et pour ce projet et pour vous éviter d'avoir à télécharger quoi que ce soit sur votre machine, nous allons utiliser codeHTML.online. C'est ici que nous allons coder notre HTML5. Vous pouvez voir que nous avons déjà 4 lignes de code, donc la première le doctype. Chaque page HTML comment sera toujours par un doctype. Vous avez à la deuxième ligne le métal Charset, pardon, ça définira le caractère, si vous ne la mettez pas, imaginez avoir les accents qui ne s'affichent pas correctement ou les caractères spéciaux ou les emojis. Donc la troisième ligne vous avez le titre de votre page et la quatrième ligne va définir si le contenu dans notre page HTML est optimisé pour le mobile.

On va commencer à écrire par exemple un titre. Pour cela, je vais avoir besoin d'utiliser des balises. Je vais venir ouvrir ma balise un titre s'écrit avec la balise H1, donc le plus gros titre avec la balise H1, le titre le plus important. Et je vais venir mettre mon titre donc on va mettre "travel log".

Ensuite, je vais venir mettre un deuxième titre comme un sous-titre. Pour cela, je vais ouvrir une balise et je vais mettre H2. Donc là je vais mettre une liste des pays par exemple que j'ai résidé. Donc "liste". Et donc pour écrire une liste en HTML5, on utilise la balise ul. À l'intérieur, on peut utiliser la balise li pour lister. Et là je vais pouvoir mettre différents pays. Par exemple, je peux mettre l'Argentine, le Brésil, la Colombie, USA, la France, et peut-être même l'Italie.

Je peux également venir mettre une image. Donc on va mettre un titre, et on va mettre une image gala. Donc pour afficher une image, il suffit d'utiliser la balise img. Donc on va mettre la source et on vient donc mettre le nom de la photo qu'on veut utiliser. Ici, on va mettre photo.jpg. Et bien, vous voyez que si on enregistre les modifications, j'ai bien à présent mon image. Donc elle est un petit peu grande, on peut très bien venir modifier donc la taille en utilisant la Width.

Donc là je vais lui dire tout simplement 100 % de ça taille. C'est à présent j'enregistre vous voyez que mon image est très bien adapté. On peut très bien utiliser un gif. Donc on va venir faire la même chose et on va utiliser donc un gif plutôt qu'une image.

Je vais aussi la redimensionner a 100%. Je vais à venir fermer ma balise et enregistrer les modifications. Vous voyez à présent que j'ai bien mon gif. Si jamais vous voulez voir les ressources disponibles il suffit donc de cliquer dans notre petite anglaise. De faire help. Et vous allez voir donc la liste des ressources qui sont disponibles donc nous on a utilisé par exemple photo.JPEG et animation.jif.

Donc on peut également voir qu'on peut zoomer. Si jamais vous avez besoin de sommaire sur votre page de code. Ou dezoomer. Et je peux très bien venir agrandir ou en rétrécir ma page de résultat et vous voyez que son contenu s'adapte à sa dimension.

Ok donc à présent on va venir copier-coller notre code. Vous faite un copier et on va faire new project dans mon petit onglet bleu, vous cliquez sur New project. Donc là on a un nouveau un projet qui s'ouvre qui est beaucoup plus complexe vous voyez qu'on a un fichier HTML un fichier JavaScript un fichier CSS et un fichier un gif.

Donc on va venir copier le code que nous avions. Vous supprimez ça et vous allez coller. Le code qu'on vient de faire vous voyez qu'à la fin on a des liens donc ça à charger des fichiers externe. Bah on va tout simplement venir les déplacer en haut comme cela donc c'est pas obligé hein c'est juste un petit peu plus sympa la lecture.

Donc on va donc on a ici notre fichier JavaScript et ici un autre fichier c'est notre fichier CSS pas nous permettre d'ajouter du style à notre page. Donc pour cela on va ouvrir balises body. On va venir par exemple changer un la couleur de notre site admettons si je mets color yellow. Et que j'enregistre vous voyez à présent que mon site toutes les écritures sont devenus jaune. C'est pas top top mais par exemple si on va mettre background color là ça viendra changer notre font, vous voyez c'est déjà plus sympa très bien venir ajouter par exemple une vidéo donc on va venir mettre un titre h2. On va l'appeler tout simplement vidéo.

On va ouvrir une balise vidéo. On va mettre la source, donc notre source c'est vidéo.MP4. On va à lui définir une taille, on va mettre par exemple une taille de 300, une hauteur de 200. Et on va lui mettre donc des petits contrôles. Donc là si j'enregistre les modifications vous voyez à présent en dans ma page de résultats que nous avons notre petit vidéo notre petite vidéo avec nos contrôles. J'ai ma vidéo je peux très bien mettre également hausse.

Crée une expérience réalité virtuelle avec HTML. Nous allons à présent mettre un panorama de la réalité à virtuel. Pour cela on va utiliser une balise script et nous allons. C'est un framework qui s'appelle aframe. Vous tapez aframe.js. Et en juste en dessous votre titre H1 on va venir mettre un titre h2On va appeler cette vidéo.

On va ouvrir une balise vidéo et y mettre la source, c'est-à-dire vidéo.MP4. On va lui définir une taille de 300 de largeur et 200 de hauteur, ainsi que des petits contrôles. Si l'on enregistre les modifications, on peut voir notre petite vidéo avec les contrôles dans la page de résultats.

Ensuite, pour créer une expérience en réalité virtuelle avec HTML, on va utiliser une balise script et le framework A-Frame. On va ajouter un titre H2 appelé "panoramat". On va ouvrir une balise "a-scene" et y définir une taille de 100% de largeur et 300

pixels de hauteur. À l'intérieur de cette balise, on va ajouter une balise "a-sky" avec la source "panneaux.JPG". Enregistrer les modifications permet de voir un panorama que l'on peut observer à 360° avec la souris ou un téléphone.

Enfin, on peut ajouter des liens de contact et de réseaux sociaux à la fin de la page. Pour cela, on peut ajouter un titre H2 "Contact" et "Social Network". On peut ensuite ajouter des liens en utilisant la balise "a" et l'attribut "href", comme pour un tweet sur Twitter (@dev) ou un numéro de téléphone (07).

C'est pas mon numéro hein, j'ai mis un numéro au hasard quand même, et on va mettre "appelle-moi", donc ça déclenchera l'appel de votre téléphone, que ce soit un Android ou un iPhone. Ensuite, ça déclenchera l'appel de votre téléphone. On va ajouter une balise pour le WhatsApp, si jamais vous utilisez WhatsApp. Donc on met "WhatsApp//send?Texte=look at my travel log". Et là, on va dire par exemple "regarde". On enverra un petit message via WhatsApp, et comme ça on verra ce message à vos contacts ou à une personne que vous aurez sélectionnée via WhatsApp.

Maintenant, si je viens enregistrer ces modifications, vous voyez qu'en bas, j'ai bien mes petits liens qui sont affichés tout en bas de ma page. On peut également rajouter un son, un audio sur notre GIF. Pour cela, on va venir ajouter un "onclick" et on va lui dire "speak". De cette manière, lorsqu'on cliquera sur un autre GIF, notre audio se déclenchera pour, par exemple, donner la description du GIF. Donc là, on va venir dans notre fichier script.js et on va venir écrire notre fonction. On l'a appelée "speak".

Et donc, on va définir une variable qu'on appelle "Voice" et qui sera égale à "new SpeechSynthesisUtterance". Ce sera donc la voix de synthèse par défaut. Ensuite, "Voice.text" est égal à "This is the shoreline at Shanghai". Et enfin, on appelle "speechSynthesis.speak(voice)". Si j'enregistre les modifications et que je viens cliquer sur mon GIF, on a bien notre audio qui se déclenche