◎ Formation complète HTML 5◎

➲ Section 1 : Introduction HTML5

⁂ HTML5 - 1 Introduction

➔ Première vidéo d'introduction où je vais vous présentez l'utilité de HTML5, des outils gratuits afin de pouvoir concevoir du code en effectuant des tests afin de se familiariser avec les outils présentés.

➲ Section 2 : Se familiariser avec HTML5

⁂ HTML5 - 2.1 Les premiers pas avec HTML

➔ Dans cette vidéo de réalisation, nous allons voir ensemble la prise en main de notre éditeur de texte et nous allons commencer à coder en insérant diverses balises comme "title", "input" et même l'insertion de commentaire.

⁂ HTML5 - 2.2 Comment valider votre code ?

➔ Dans cette vidéo, nous allons savoir comment notre code peut être en erreur et les solutions afin de valider notre code intégral.

⁂ HTML5 - 2.3 Le rendu du texte avec des éléments de bloc

➔ Pour les éléments de blocs, qui nous permettront d'insérer du texte, un paragraphe ou bien même des titres qui peut être personnalisé en fonction de son importance.

⁂ HTML5 - 2.4 Spécifier la sémantique des mots et des phrases

➔ Nous allons voir ensemble que nous pouvons mettre en valeur notre paragraphe, comme lorsqu'on édite un fichier texte, nous pouvons insérer des balises qui auront le pouvoir de mettre une partie du texte en gras, en itallique, en plus petit, entre guillemets et bien d'autres encore.

⁂ HTML5 - 2.5 Associez vos données des listes

➔ Nous poursuivons dans notre édition et dans cette vidéo, nous allons voir comment insérer des listes, comment elles s'organisent mais aussi les diffénrents types.

⁂ HTML5 - 2.6 Regrouper des éléments dans des conteneurs

➔ Il est possible de regrouper des éléments de votre page, dans des contenurs afin de bien organisé l'architecture de votre code. Par exemple avec la balise "section" ou même "aside", vous allez pouvoir ranger les éléments de vos pages. Vous avez également votre tête de page et votre pied de page. Vous pouvez également regrouper des éléments avec la balise "div" qui vous serviront de contenaires.

➲ Section 3 : Insertion d'objets et médias

⁂ HTML5 - 3.1 Préparer les images pour le web

➔ Si vous souhaitez insérer des images, il est important de choisir le bon format pour le bon foctionnement lors de l'affichage. Il est également possible de vérifier la suppression des metadata qui ne sont pas utiles à l'aide d'un site web que je vais vous indiqué dans cette vidéo, alors c'est parti !

⁂ HTML5 - 3.2 Le rendu de photos et d'images

➔ Maintenant que nous avons toutes les bonnes informations pour afficher des images, nous pouvons tester l'affichage sur notre propre page. Pour se faire, vous pouvez suivre les instructions que je vous propose dans cette vidéo.

⁂ HTML5 - 3.3 Créer un lecteur audio et vidéo

➔ Suite à l'insertion de nos image, nous alors voir ensemble comment créer un lecteur audio et vidéo. Pour se faire vous aurez besoin d'enregistrer un fichier de format mp3 et également de mp4, qui une fois inséré, sera formater afin d'obtenir le meilleur affichage possible aisni que son bon fonctionnement.

⁂ HTML5 - 3.4 Tableau et affichage

➔ Nous allons voir dans cette vidéo comment insérer un tableau. Afin d'assurer son affichage, il est primordiale d'indiquer le nombre de colonne et de cellule à ce tableau. Donc dans cette vidéo, je vous invite à suivre la réalisation où nous allons tester en remplissant nos cellules de données que nous souhaitons inscrire à l'intérieur.

➲ Section 4 : Maitriser le style et les positions des objets

⁂ HTML5 - 4.1 Comment appliquer les styles de bases ?

➔ Pour insérer du style, il est fortement recommandé d'utiliser un fichier de type CSS qui s'en chargera. Cependant, il est tout de même possible d'appliquer du style directement sur notre fichier HTML. Pour se faire, il suffit d'insérer la balise "style" qui appliquera le style que vous souhaitez. Nous allons donc tester quelques styles applicables dans cette vidéo.

⁂ HTML5 - 4.2 Cibler des balises HTML avec des selecteurs

➔ Pour cibler nos balises HTML, nous aurons besoin de les regrouper. C'est avec l'utilisation des ID que nous pourrons cibler les balises que nous souhaitons personnalisées.

⁂ HTML5 - 4.3 Comment ajouter des marges et des bordures ?

➔ Afin de bien structurer notre mise en page, nous auront besoin de formater le contenu. Pour se faire, nous allons jouer avec l'espacement de bordure, de notre marge dans lesquels nous pouvons définir l'espacement de l'air.

⁂ HTML5 - 4.4 Le style du texte et des couleurs.html

➔ Nous allons également incorporer du style dans notre fichier CSS, concernant le style et les couleurs du texte. Dans cette vidéo, je vous montre le code qui définit le style, mais vous pouvez personnaliser en fonction de vos désirs.

⁂ HTML5 - 4.5 Les images et tableaux de disposition

➔ La disposition de nos objets ont besoin d'être bien orientée. Par exemple, notre logo, nous souhaitons qu'il soit situé à un emplacement précis. Pour se faire, nous allons utliser "float" afin de lui indiquer une position. Nous allons également déplacer les images de chaque article afin qu'elles partagent l'espace avec le texte.

⁂ HTML5 - 4.6 Les listes de mise en page avec flexbox

➔ Dans cette vidéo, nous allons utiliser "flexbox" qui a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Nous allons voir ensemble comment cela peut être adapté.

⁂ HTML5 - 4.7 Comment ajouter des images ou des arrieres plans

➔ Dans cette vidéo, nous allons voir comment nous pouvons insérer une image en fond dans notre page, ou bien même, insérer un arrière plan. Cependant, il est important de garder de la lisibilité dans notre page. Nous allons donc faire attention à notre style pour ne pas avoir de défaillances à ce sujet.

➲ Section 5 : Insertion de contenu audiovisuel

⁂ HTML5 - 5.1 Les liens

➔ Dans cette vidéo, nous allons voir comment ajouter un lien. Les liens ont pour but de nous redirigé vers un autre endroit. Cela peut être un fichier ou bien même un site web par exemple. Nous allons donc indiqué un chemin à indiquer IDE afin de bien redirigé vers la page souhaité.

⁂ HTML5 - 5.2 Qu'est-ce que les URL expliquées ?

➔ Les URL, Unique Ressources Location, vont vous permettre de trouver une ressource au sein d'un réseau. Vous avez plusieurs types d'URL, internes, relatives, absolues. Je vous propose de suivre cette vidéo afin de bien comprendre leur fonctionnement.

⁂ HTML5 - 5.3 Les options de liens avançées

➔ Nous avons les options de liens avancées, c'est à dire des options supplémentaires avec divers attributs. Nous allons voir dans des exemples que je vous proposes, la liste de toutes ces options. C'est parti !

⁂ HTML5 - 5.4 Comment incorporer des vidéos et du contenu ?

➔ Maintenant nous pouvons incorporer des vidéos et du contenu. Pour se faire, nous allons éditer dans un premier temps notre fichier HTML, et nous irons sur "Youtube", où nous allons partager une vidéo. JE vais vous montrer les étapes afin de l'incorporer sur notre page.

⁂ HTML5 - 5.5 Projet activité personnelle

➔ Il est temps de vous proposer un projet à effectuer qui sera une activité personnelle. Nous allons donc créer un nouveau dossier projet dans lequelle nous allons renseigné nos activitées personnelles et nous allons appliqués du style que nous avons pu voir ensemble lors de nos premiers pas. Donc c'est parti !

⁂ HTML5 - 5.6 Créer votre activité personelle

➔ Suite à notre première vidéo, nous allons encore modifier et personnaliser notre projet, en essayant d'insérer du contenu plus ludique et professionnel. On va effectuer un affiche comme dans une application où on va jouer avec es localisations.

⁂ HTML5 - 5.7 Ouvrez la messagerie et les appels téléphoniques

➔ Dans la suite de notre projet, nous allons voir comment ouvrir nos applications de messagerie, nos appels téléphoniques, et les applications de nos réseaux sociaux. C'est parti !

➲ Section 6 : Publier un projet

⁂ HTML5 - 6.1 Sélectionner un fournisseur et une URL publique.

➔ Dans cette vidéo, nous allons voir comment séléctionner un fournisseur et une URL publique. Pour se faire, nous aurons besoin d'un domaine ou bien d'un sous domaine. Nous aurons également besoin d'un hébergeur, nous allons voir qu'il y en a des payants mais aussi des gratuits. Donc c'est parti !

⁂ HTML5 - 6.2 Publier gratuitement sur Firebase

➔ Maintenant que nous avons les principes de publications, nous allons voir comment publier gratuitement notre contenu gratuitement avec Firebase. Je vous propose donc de suivre mes actions afin de publier instantanément.

⁂ HTML5 - 6.3 Distribuer les QR codes

➔ Dans cette vidéo, nous allons voir comment ditribuer les QR codes, utiles pour les cartes, les URL, et même le texte. Imprimable ou bien scannable via un smartphone, le QR code s'est démocratisé, permettant un accès rapide pour une redirection vers une page souhaités. Nous allons voir ensemble le process.

➲ Section 7 : Gestion du contenu

⁂ HTML5 - 7.1 Comment rendre votre contenu partageable ?

➔ Dans cette vidéo, nous allons voir comment rendre notre contenu partageable via les Snippets. Vous pouvez par exemple, partager le contenu d'un site web. On appelle cela un Snippet, donc nous allons voir quelles sont les méthodes utilisés pour en insérer dans notre page.

⁂ HTML5 - 7.2 Intégrer un site à votre Facebook

➔ Dans cette vidéo, nous allons intégrer Facebook, donc un contenu qui sera intégrable. A l'aide de plugin, que nous pouvons consulter dans la documentation specifié de Facebook, nous allons pouvoir réaliser cette intégration.

⁂ HTML5 - 7.3 Intégrer avec Twitter

➔ Cette fois ci, nous allons intégrer Twitter dans notre projet. Pour se faire, nous allons également suivre la documentation à ce sujet, tout en suivant le protocole que je vous propose dans cette vidéo, donc c'est parti !

👍 Bon à savoir

💻 HTML5 a été créé pour répondre à un besoin d’unification de ce qui peut aujourd’hui être utilisé pour réaliser des sites Web, à savoir le HTML, les feuilles de style (CSS) pour la partie graphique, et le JavaScript pour l’interactivité. Il doit également répondre à un besoin de simplification de ce qui peut aujourd’hui exister, en minimisant à la fois l’utilisation de plugins externes (comme Flash) et l’écriture de scripts dédiés à l’interactivité (en les remplaçant par des balises qui font déjà ce travail). Le langage répond également à un besoin d’être multiplateformes, ce qui permet d’amener plus facilement le monde du Web sur les plateformes mobiles par exemple.