Formation intégrer des pages simples avec HTML5 & CSS3

Objectifs

Cette formation vous permet de décrire les balises HTML et les feuilles de styles CSS, de gérer le référencement naturel et l'accessibilité, d'intégrer en HTML et CSS avec un positionnement sans tableau et de lister les standards W3C, les bons outils et les bonnes pratiques.

Public

Graphistes, webdesigners, webmasters, intégrateurs, développeurs, chefs de projet, ou toute autre personne en charge de la création de pages web.

Durée

21 heures en présentiel sur 2 jours

Pré-requis

Utilisation d'un poste de travail et d'Internet.

Formateur

Formateur expérimenté, développeur de site Web, et spécialiste du Web.

Méthode pédagogique

8 participants maximum, un poste par stagiaire et un support de cours est remis en fin de stage. La formation est constituée d'apports théoriques, de démonstrations et de mises en pratique basées sur des exercices.

Modalité de validation des acquis

Évaluation en ligne des acquis via un questionnaire. Attestation de fin de stage.

Programme de la formation

Introduction

• Standards W3C et bonnes pratiques
• Outils et méthodologies de développement et de debug
• Compatibilité : doctype et normalisation CSS

HTML sémantique

• Balises title et meta
• Insertions des feuilles de styles CSS et des scripts JavaScript
• Les balises principales de contenu : titres, paragraphe, listes,...
• Hiérarchie et mise en valeur pour le référencement

HTML multimédia

• Les images
• Gestion de l'accessibilité et des performances

HTML interactif

• Les liens
• Formulaires accessibles
• Les différents types de champs

Sélecteurs CSS

• Sélecteurs de base : balises, class, ID
• ID vs class
• Sélection par descendance
• Sélecteurs d’attributs
• Pseudoclasses
• Règles de priorité
• Bonnes pratiques de nommage, de factorisation et de performance

Graphisme

• Polices et textes
• Unités de mesure
• Couleurs
• Fonds
• Styles des listes

Positionnement : les bases

• Display : inline / block / inlineblock
• Dimensions, marges, espacements et bordures
• Les pièges des dimensions et marges

Les différents positionnements

• Positionnement classique : float / clear
• Les pièges des float et l'astuce du clearfix
• Positionnements spéciaux (relatif, absolu, fixe)