Compte-rendu vidéo : Atelier HTML5
Vous pouvez retrouver les sources de cet atelier réalisé avec Thimble, un éditeur de code en ligne lancé par Mozilla pour enseigner les bases du HTML, CSS et JavaScript.
À propos de HTML5
Html 5 (Hypertext Markup Language) est un langage de base pour la création de site internet, il sert à structurer votre page internet . D’autres langages peuvent s’ajouter lors de la conception, mais tout les sites web contiennent du HTML. Le HTML5 vous permettra de coder votre contenu (titre, paragraphe, menu…). HTML5 désignant la version du langage HTML, elle transforme ce qui était un simple balisage pour structurer des documents en une plate-forme complète de développement d’applications. HTML5 propose en effet de nouveaux éléments, attributs et comportements mais aussi un ensemble plus large de technologies qui permettent des sites web plus variés et puissants, et des applications web.
Introduction
Présentation de l’intervenant et bref présentation des différents langages utilisés pour le côté front (HTML, JavaScript, CSS)
Qu’est-ce que le HTML, HTML5 ?
**Les balises <html>, <head>, , <link />**
On partira d’un projet vierge sur Mozilla Thimble, qui est un éditeur de code en ligne.
On verra dans cette vidéo qu’est ce qu’un fichier html, à quoi correspond le fichier index.html et qu’est ce qu’une balise ? On verra les balises <html>, <head>,
Un document HTML est lié à une feuille de style css, on établiera le lien vers cette feuille de style avec la balise link.
Structure du document HTML avec les balises <header>, <body>, <main>, <footer> et insertion d’une image
Dans cette vidéo on commencera la structure de notre document HTML avec les balises <header>, <body>, <main>, <footer>. Puis on verra comment on insère une image avec la balise et comment la redimensionner.
( description des balises html, head, title, main, footer)
Création d’une deuxième page et de la navigation
Dans cette partie, on créera une deuxième page contact.html avec son lien.
Ici on découvrira les balises navigation <nav> et ancre
Les balises titres <h1>, <h2>, <h3>…
Ici on verra les balises titres “heading1” <h1> et “heading2” < h2> qui définissent l’importance (elles vont jusqu’à h6)
Les listes avec les balises <ul>, <ol>, <li>
- Ici on verra comment faire des listes
- les “bullet point” avec la balise <ul>, et les listes numérotées avec la balise <ol>.
**Balises <footer>, , **
Dans cette vidéo on verra le pied de page avec la balise <footer>, la balise ,
Le tour du Web en 50 ateliers
Cet atelier entre dans le cadre du projet “Le tour du Web en 50 ateliers” qui propose des ateliers d’initiation aux métiers du numérique par la pratique pour permettre aux personnes défavorisées face à l’accès au numérique, de comprendre ce secteur et de s’initier à ses métiers.
Intervenant
Cet atelier était animé par Sourouche Bagherzadeh, Web designer et développeur front freelance spécialisé dans la création de sites internet tous domaines.
