HTML5/CSS3 Initiation

Introduction

• Définition et utilité de HTML/CSS/JavaScript, les langages du web
• Concepts généraux de la conception de documents WEB
• Le navigateur, outil de diffusion et de développement

Hébergement - Publier son document sur le Web

• Notions de serveurs/clients
• Choisir un nom de domaine et un hébergement
• Se connecter via FTP avec Filezilla

HTML – La structure d’un document HTML

• Les balises sémantiques de HTML5
• Différentes parties d'un document HTML (header, footer, main, nav, …)
• Les principales balises et leurs attributs

HTML – Utiliser des balises sémantiques

• Balises title et meta
• Insertions des feuilles de styles CSS et des scripts JavaScript
• Les balises principales de contenu : titres, paragraphe, listes ...

HTML – Multimédia et interactivité

• Notion de lien absolu et de lien relatif
• Créer des menus et des ancres
• Ajouter des formulaires
• Les images et les règles à respecter
• Vidéo et audio (sans Flash)

CSS – Habiller le document

• Les sélecteurs de balise
• Utilisation des attributs HTML « id » et « class »
• Utilisation des pseudo-classes et mise en forme des liens
• Utilisation des sélecteurs d'attributs
• Calculer les règles de priorité

CSS – Positionner les éléments

• Principe des « boites » et leur positionnement
• Display : inline / block / inlineblock
• Dimensions, marges, espacements et bordures
• Positionnement classique : float / clear
• Les pièges des float et l'astuce du clearfix
• Positionnements spéciaux (relatif, absolu, fixe)
• Positionnements par Grille ou via Flexbox

CSS – Animations et effets

• Coins arrondis
• Ombres portées
• Transparence
• Filtres graphiques
• Transformations 2D
• Animations autonomes
• Valeurs dynamiques : calc()

CSS – Adapter la police et ajouter des couleurs

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

CSS – Adapter le document aux appareils

• Principes du Responsive Web Design (RWD)
• Différence entre résolution et taille d'affichage
• Mise en page fluide et adaptative
• Principe des media queries CSS
• Points de rupture et règles conditionnelles
• Menus adaptatifs