Introduction
  • Présentation du cours HTML5 CSS3
Comment fonctionne un site web ?
  • Rôles du HTML, CSS et autres technologies du web
  • Problématiques transversales : ergonomie, référencement, accessibilité,...
  • L'intégrateur HTML & CSS et les autres métiers du web
  • Connaître son rôle
Outils de travail
  • Introduction : l'outil fait le moine
  • Choisir un navigateur professionnel
  • Choisir un éditeur de code professionnel
  • Standards W3C et compatibilité
  • Les manuels HTML & CSS officiels
Fondations : le squelette d'une page HTML
  • Introduction : création et organisation du projet
  • Le bon doctype HTML
  • Syntaxe HTML : balise et attributs
  • Structure technique : head et body
  • Langue et encodage
  • Titre et description de la page, et règles de référencement
  • Ajouter des feuilles de styles CSS
  • Ajouter du JavaScript
  • Conclusion : le modèle technique d'une page HTML
  • Une bonne ossature HTML
La structure HTML
  • Introduction : y a-t-il un architecte dans l'avion ?
  • Dessine-moi un site web
  • Du dessin au code HTML : les blocs et leurs noms
  • Conclusion : méthodologie de structuration HTML
  • Une bonne structure HTML
Contenu HTML et sémantique
  • Introduction : vous savez déjà le faire !
  • Titres et paragraphes
  • Listes et menus de navigation
  • Valorisation : mots-clés et contenus importants
  • Caractères spéciaux
  • Conclusion : les principales balises HTML à retenir
  • Donner du sens
Contenus multimédia et interactif
  • Introduction : enrichir sa page web
  • Les liens hypertextes
  • Le bon lien
  • Insérer une image, de façon accessible
  • Formats d'image et optimisation
  • Le bon choix d'image
  • Contenus externes : vidéos Youtube, publicités, boutons Like,...
Valider son code HTML
  • Le validateur HTML officiel du W3C
  • Conclusion : vous savez maintenant créer une page HTML !
Sélecteurs CSS
  • Introduction : qu'est-ce qu'un sélecteur CSS ?
  • Identifiants et classes : comment choisir ?
  • Méthodologie pour nommer
  • Sélection arborescente
  • Pseudo-classes
  • La cascade CSS et le piège des priorités
  • Conclusion : organisation de son code CSS
  • Choisir le bon sélecteur
Le graphisme en CSS
  • Introduction : syntaxe CSS
  • Textes et polices
  • Les couleurs et unités
  • Fonds
  • Bordures et arrondis
  • Le bon graphisme CSS
Le positionnement en CSS
  • Introduction : méthodologie obligatoire pour le positionnement CSS !
  • Normalisation CSS
  • Modes d'affichage CSS : les pièges d'inline et block
  • Dimensions CSS : le piège de width et height
  • Margin et padding, et le piège de la fusion des marges
  • Aligner des blocs horizontalement : float et le piège du clear
  • Centrage de blocs et largeur de référence
  • Conclusion : méthodologie de positionnement CSS
  • Les bons réflexes de positionnement CSS
Méthodologie professionnelle d'intégration HTML et CSS
  • Tests multi-navigateurs
  • Méthodologie de debug avec l'Inspecteur
  • Méthodologie complète d'intégration HTML & CSS
  • Conclusion : félicitations, vous savez intégrer en HTML & CSS !
Cas pratique : intégration d'une maquette Photoshop en page HTML & CSS
  • La maquette et les consignes
  • Photoshop : export des images et récupération des informations
  • Correction du dessin de la maquette
  • Correction de l'étape HTML
  • Correction de l'étape CSS
Aller plus loin en HTML
  • Métas pour les réseaux sociaux
  • Liens et menus internes
  • Citations et abréviations
  • Tableaux et ressources pour les newsletters
Formulaires HTML
  • Formulaires et validation
  • Champs libres et labels
  • Les choix : cases à cocher et boîte de sélection
  • Sécurité des formulaires et méthodes HTTP
Aller plus loin en CSS
  • Sélecteur par attribut
  • Positionnements relatif et absolu : l'exemple du bandeau au-dessus d'une image
  • Positionnement fixe : l'exemple de la barre de compte