A.F.L.I.M. Formation HTML5 et CSS3 - Pour des sites Responsive Web Design

Transcription

1 A.F.L.I.M. Ateliers de Formations Linguistique Informatique Multimédia Formation HTML5 et CSS3 - Pour des sites Responsive Web Design Formation : Présentation du HTML5 Bref historique du HTML5 Lignes de force du HTML5 Les nouveautés du HTML5 Le HTML5 est un langage de balises Le bon usage des balises Les balises et attributs HTML 4.0 disparus Les navigateurs de notre étude Le document HTML5 minimum La façon de procéder La validation du code HTML5 Premiers éléments de feuilles de style avec HTML5 Les propriétés de style Les sélecteurs L'incorporation du style Le texte avec HTML5 Le texte simple Le contrôle de passage à la ligne La mise en gras La mise en italique La mise en exposant et en indice Les autres balises de texte Les commentaires Les caractères spéciaux Les balises Html 4.0 supprimées Le formatage du texte avec les feuilles de style La structuration du document avec HTML5 Les titres Les paragraphes Les citations Les séparateurs horizontaux Les listes Les divisions de page 1/7

2 Les liens pour HTML5 L'insertion d'un lien Le lien vers une autre page Le lien à l'intérieur d'une page Le lien vers un autre site Le lien vers une adresse Le lien pour télécharger un fichier Le lien vers une fenêtre spécifique La couleur et le soulignement des liens Une infobulle sur un lien Les nouvelles possibilités de liens Les tableaux avec HTML5 La création d'un tableau Les cellules de tableaux La fusion des cellules Les cellules d'en-tête La légende d'un tableau Le groupement de colonnes La structuration d'un tableau Les images et arrière-plans avec HTML5 Les formats d'image L'insertion d'une image L'insertion d'un lien sur une image L'insertion d'une couleur d'arrière-plan L'insertion d'une image d'arrière-plan Les balises sémantiques et d'organisation (HTML5) Les anciennes balises sémantiques Les nouvelles balises d'organisation De nouvelles balises sémantiques 2/7

3 Les formulaires HTML5 Présentation La déclaration de formulaire La ligne de texte La zone de texte La liste déroulante Les boutons de choix unique (radio) Les boutons de choix multiples (checkbox) Le bouton d'envoi Le bouton d'annulation Le bouton de commande Les formulaires cachés Les formulaires de transfert de fichiers Les formulaires de mot de passe L'organisation des champs de formulaires L'étiquetage des champs de formulaires La ligne de texte avec liste de suggestions La ligne de texte d adresse La ligne de texte d url La ligne de texte de format numérique La ligne de texte de format de date La ligne de texte de recherche La ligne de texte de couleur Les curseurs Une application complète Le multimédia pour HTML5 L'insertion d'un fichier audio L'insertion d'un fichier vidéo Présentation des feuilles de style HTML5 Concept des feuilles de style Utilité des feuilles de style Bref historique Compatibilité avec les navigateurs Outils pour les feuilles de style Notions de base des CSS La déclaration de style CSS Les sélecteurs de base Les commentaires Les unités de mesure La notation des couleurs Une convention d'écriture Les CSS intégrées à un élément Html5 Les CSS internes au document Html5 Les CSS externes au document Html5 CSS importée (@import) La notion de cascade La notion d'héritage 3/7

4 La police de caractères Type de police Italique Petites majuscules Graisse Taille des caractères Raccourci font Les polices système Le texte en CSS Couleur Décoration Transformation Indentation Espace entre les lettres Espace entre les mots Interligne Espaces vides Alignement horizontal Alignement vertical Direction du texte Longueur et hauteur Les listes et les tableaux CSS Sortes de marqueurs Marqueur graphique Retrait Écriture de liste raccourcie Espace entre les cellules de tableaux Les bordures des tableaux Les cellules vides de tableaux Position de la légende Les arrière-plans CSS Couleur d'arrière-plan Insertion d'une image d'arrière-plan Répétition de l'image Positionnement de l'image Défilement de l'image Écriture raccourcie 4/7

5 Les propriétés de boîte CSS Concept du modèle de boîte Élément bloc ou en ligne Largeur et hauteur Marges externes Marges internes Couleur de la bordure Épaisseur de la bordure Style de la bordure Écriture raccourcie de bordure Les pseudo-classes CSS Notion de pseudo-classe Pseudo-classes de lien Pseudo-classes de paragraphe Insérer un contenu Les propriétés d'affichage CSS Positionnement Flottement Dégagement Superposition Dépassement Découpage Affichage Visibilité Curseur de la souris Numérotation automatique Les propriétés d'impression CSS Utilité des feuilles de style pour l'impression Feuilles de style selon le média de sortie Optimiser une page d'impression Saut de page avant Saut de page arrière Éviter les sauts de page Le 5/7

6 Les feuilles de style CSS3 Les sélecteurs CSS3 Les bords arrondis Les bordures imagées Les ombres Les polices personnalisées Les lettres creuses Traiter les longs intitulés La césure automatique Redimensionner un élément Ajuster la hauteur des caractères Les arrière-plans multiples Le dégradé de couleurs L'opacité ou la transparence Les colonnes multiples Transformations Les transitions Du texte défilant Les filtres graphiques Les masques Effet de reflet ou de miroir Les fondus d'images Le dessin 2D CSS Introduction La balise <canvas> Appel de l'api de dessin Dessiner un rectangle Ajouter de la couleur Tracer une ligne droite Dessiner des formes géométriques Importer des images Ajouter du texte Ajouter de l'ombre Transformations La géolocalisation CSS Concept et utilité Le fonctionnement Les navigateurs Protection de la vie privée Longitude et latitude Localisation sur une carte Suivre les déplacements 6/7

7 Le stockage de données en local CSS Présentation Le stockage persistant Le stockage temporaire Les applications en mode déconnecté (offline) CSS HTML 5 Présentation et enjeux Le fichier de mise en cache (manifest) Exemple complet 7/7