Ces vidéos s'adressent à toute personne débutant dans la création ou le développement de sites Web basés sur les langages HTML5 et CSS3. Elles sont extraites de la formation « Création de contenus pour le Web en HTML5 et CSS3 » animée par Nicolas PLOQUIN chez ENI Service.

Après une introduction aux langages et outils de création de contenus pour le Web, nous aborderons les notions fondamentales du langage HTML5, comme les balises et attributs HTML. Nous verrons comment intégrer des contenus ou groupes de contenus simples tels que les éléments de texte, liste et image. Nous apprendrons à ajouter des liens de navigation vers un autre site ou une autre page. Après avoir présenté le rôle des feuilles de style et sélecteurs CSS dans la mise en forme, nous passerons en revue les principales propriétés de style s'appliquant au texte et aux blocs de texte. Nous étudierons les différents éléments structurants ou conteneurs d'une page Web (section, entête, pied de page, menu) et nous verrons comment vous pouvez positionner ces éléments dans une page Web.

Nous passerons ensuite à l'intégration de contenus plus complexes avec des mises en forme avancées en CSS3, l'intégration de contenus audio et vidéo, la création de tableau et de formulaire HTML5. Nous découvrirons toute la richesse de style apportée par la transformation d'élément, l'application de transition et l'exécution d'animation. Enfin, nous verrons de quelle manière adapter son site web aux nouveaux types d'appareils connectés, communément appelé « Responsive Web Design ».

Outre les informations théoriques, des séquences de mise en application sont proposées pour chaque module afin de faciliter l'assimilation du langage HTML5 et  des concepts CSS3 ainsi que leur mise en œuvre dans le respect des bonnes pratiques.

• Durée totale08h19
• Introduction
  • Exemple de contenu : la fable "La cigale et la fourmi"03:01
  • Les langages et outils de création de contenus pour le Web07:49
  • Aperçu d'un site et de son code03:12
• Notions fondamentales du langage HTML5
  • Syntaxe, balises et attributs HMTL08:26
  • Structure du document HTML05:57
  • Mise en pratique : créer une page HTML07:47
• Intégration de contenu et groupe de contenus simples
  • Éléments texte06:37
  • Éléments liste et image04:45
  • Mise en pratique : intégrer des blocs de texte (La cigale et la fourmi)10:23
• Intégration d'éléments de navigation
  • Liens hypertextes06:02
  • Mise en pratique : créer des liens11:19
• Notions de base de la mise en forme en CSS
  • Styles CSS, sélecteurs CSS et couleurs19:48
  • Mise en pratique : créer une feuille de style12:06
• Mise en forme du texte
  • Police de caractères et autres mises en forme12:27
  • Mise en pratique : mettre en forme du texte14:10
• Mise en forme des blocs
  • Propriétés d'un bloc12:52
  • Mise en pratique : mettre en forme un menu10:21
• Structuration de la page
  • Éléments d'une page07:35
  • Mise en pratique : structurer une page11:55
• Positionnement et dimensionnement des conteneurs
  • Position des éléments dans la page07:51
  • Mise en pratique : effectuer la mise en page21:24
• Mise en forme avancée en CSS3
  • Sélecteurs CSS314:05
  • Mise en pratique : mettre en forme des liens et le menu en-tête21:10
  • Ombres, dégradés et fonds multiples07:13
  • Mise en pratique : mettre en forme l’en-tête20:17
• Intégration du contenu audio et vidéo
  • Documents audio et vidéo09:08
  • Mise en pratique : intégrer des vidéos et du son09:55
• Création de tableaux
  • Disposition et mise en forme08:47
  • Mise en pratique : construire un tableau HTML 12:09
  • Mise en pratique : mettre en forme un tableau HTML 22:03
• Création de formulaires HTML5
  • Structure et champs25:18
  • Contenu d'un formulaire23:33
  • Présentation d'un formulaire20:06
• Création d'animations
  • Transformation et transition12:42
  • Mise en pratique : transformer des éléments et appliquer des transitions25:23
  • Animation en CSS313:45
  • Mise en pratique : exécuter une animation16:02
• Web adaptatif
  • Règle @media12:05
  • Mise en pratique : adapter la présentation aux smartphones et tablettes20:24