Summary
Highlights
Découvrez HTML, le langage fondamental pour structurer les sites web. Ce tutoriel couvre les bases, de l'installation de Visual Studio Code (VS Code), l'éditeur de code recommandé, à la création de votre premier fichier HTML. Apprenez à organiser votre espace de travail et à écrire votre première ligne de code affichée sur une page web. Le formateur explique l'importance des balises et la structure de base d'un document HTML.
Configurez VS Code pour une efficacité maximale avec des plugins comme Live Server pour le rechargement automatique de la page et Prettier pour le formatage du code. Le formateur montre comment définir les paramètres de sauvegarde automatique et d'habillage de texte. Il aborde également l'importance du 'head' d'un document HTML, la balise 'title' pour le titre de l'onglet, et l'ajout d'une icône de raccourci (favicon) à votre page web, en soulignant l'utilisation des balises 'meta' essentielles.
Explorez la structure du 'body' d'une page HTML. Le formateur explique les balises sémantiques comme 'nav', 'header', 'main', et 'footer'. Il vous montre comment créer une navigation avec des listes non ordonnées ('ul' et 'li'), et comment utiliser les balises de titre (H1 à H6) et de paragraphe ('p'). Le concept d'éléments 'bloc' et 'en ligne' est introduit, ainsi que l'utilisation de 'lorem ipsum' pour générer du faux texte.
Apprenez à intégrer des images avec la balise 'img', à définir leur source ('src') et leur attribut 'alt' (important pour l'accessibilité). Le formateur montre ensuite comment créer des tableaux complexes avec 'table', 'thead', 'tbody', 'tr', 'th' et 'td', en utilisant des attributs comme 'border', 'cellpadding' et 'cellspacing'. Enfin, cette partie couvre la création de liens hypertextes avec la balise 'a' et l'attribut 'target="_blank"' pour ouvrir des liens dans de nouveaux onglets, ainsi que les liens internes à la page.
Découvrez comment intégrer des vidéos sur votre site via la balise 'video', en utilisant des options comme 'autoplay', 'muted' et 'loop' pour contrôler leur comportement. Le cœur de cette section est dédié aux formulaires HTML avec la balise 'form'. Le formateur explique les différents types d'inputs (texte, nombre, select, radio, checkbox), l'intérêt des labels et des attributs 'for' et 'id' pour lier les champs. Il explique aussi 'placeholder' pour les indications de saisie et la balise 'textarea' pour les zones de texte plus grandes. Le role de l'input 'submit' est expliqué.
Approfondissez la création de formulaires avec les input de type radio et checkbox, en expliquant comment rendre ces éléments interactifs et bien groupés avec l'attribut 'name'. La logique de base pour les éléments 'checked' (cochés par défaut) est aussi couverte. Le formateur montre comment créer des liens vers des adresses e-mail ('mailto:') et comment proposer des fichiers en téléchargement direct à l'utilisateur, ce qui constitue des bonus pratiques. Le formateur conclut en rappelant l'importance de la pratique et met en avant la suite de son programme de formation.