Formation HTML & CSS, l'Essentiel

Apprenez les standards et les bonnes pratiques du HTML, importantes pour le référencement et l'accessibilité, et maîtrisez enfin le graphisme et le positionnement en CSS, afin de réaliser efficacement la découpe et l'intégration web d'une maquette graphique.

Durée 3 jours soit 21.00 heures de formations de 9h30 à 18h00.

Qualité 8 stagiaires par session maximum. 1 poste Mac ou Windows par stagiaire. Support de cours accessible en ligne.

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

Objectifs

  • Connaître les balises HTML et les feuilles de styles CSS
  • Gérer le référencement naturel et l'accessibilité
  • Intégrer en HTML et CSS avec un positionnement sans tableau
  • Mettre en page un site web depuis une maquette Photoshop existante
  • Connaître les standards W3C, les bons outils et les bonnes pratiques

Pré-requis Utilisation d'un poste de travail et d'Internet.

Formation HTML & CSS, l'Essentiel

1 - Introduction

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

2 - 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

3 - HTML multimédia

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

4 - HTML interactif

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

5 - 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

6 - Graphisme

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

7 - Positionnement : les bases

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

8 - Les différents positionnements

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