HTML5 et CSS3 Maîtrisez les standards de la création de sites Web (3e édition)

Dimension: px

Commencer à balayer dès la page:

Download "HTML5 et CSS3 Maîtrisez les standards de la création de sites Web (3e édition)"

Juliette Blanchard
il y a 7 ans
Total affichages :

1 Le HTML5 et les CSS 1. L'évolution de HTML L'évolution des CSS La notion de module L'évolution des statuts Les préfixes vendeurs Utiliser les préfixes vendeurs La compatibilité des navigateurs La validation du code HTML Les navigateurs 23 Les bonnes pratiques 1. Séparer le contenu de la mise en forme La structure sémantique Optimiser le code et organiser vos fichiers Exemples de pages HTML/CSS bien formées 29 Présentation du HTML5 1. Un bref historique du HTML5 33 1/20

2 2. Les lignes de force du HTML Les nouveautés du HTML Le HTML5 est un langage à balises Les balises Les attributs de la balise Le bon usage des balises Les éléments HTML 4 obsolètes Au niveau des balises Au niveau des attributs 41 La structure des documents 1. La déclaration doctype L élément <html> L'élément <head> L élément <title> L'encodage des caractères L élément <body> Les commentaires 50 2/20

3 Les conteneurs sémantiques 1. Les objectifs L'élément <div> L'élément <span> L'élément <header> L'élément <footer> L'élément <aside> L'élément <nav> L'élément <main> L'élément <section> L'élément <article> Deux exemples de structure sémantique de page Un exemple de structure sémantique d'un article 56 Les conteneurs de texte 1. Les objectifs 59 3/20

4 2. Les titres Les paragraphes Les citations Les listes Les listes ordonnées Les listes non ordonnées Les listes imbriquées Les listes de définitions Le texte préformaté Les lignes horizontales Deux exemples de mise en forme des conteneurs avec les CSS 74 La mise en forme sémantique du texte 1. Les objectifs Les caractères spéciaux La mise en gras La mise en italique La mise en indice et en exposant 81 4/20

5 6. Le souligné Le barré Réduire la taille de caractère Les titres et les citations courtes Les insertions et suppressions La direction du texte D'autres mises en forme sémantiques 86 Les liens 1. L'insertion d'un lien Le lien vers une autre page Lien vers une page située dans le même dossier Lien vers une page située dans un autre dossier Lien à partir de index.htm vers page1.htm Lien à partir de page1.htm vers page2.htm Lien à partir de page2.htm vers index.htm Le lien à l'intérieur d'une page Le lien vers un autre site Le lien vers une adresse 96 5/20

6 6. 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 100 Les tableaux 1. Préambule La création d'un tableau La largeur du tableau Les bordures du tableau L'alignement du tableau L'alignement des cellules du tableau Les cellules de tableaux La largeur des cellules L'alignement horizontal L'alignement vertical La marge intérieure des cellules L'arrière-plan de couleur La fusion des cellules La fusion de colonnes La fusion de lignes 120 6/20

7 5. Les cellules d'en-tête La légende d'un tableau Le groupement de colonnes La structuration d'un tableau 126 Les images 1. Les formats d'image L élément <img> Les éléments <figure> et <figcaption> L'insertion d'un lien sur une image L'insertion d'une image d'arrière-plan 139 Les formulaires 1. Présentation La déclaration de formulaire La ligne de texte La zone de texte 148 7/20

8 5. 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 173 8/20

9 21. La ligne de texte de recherche La ligne de texte de couleur Les curseurs Une application complète 182 Le multimédia 1. L'insertion d'un fichier audio La balise <audio> Les formats de fichier audio La balise <source> Des convertisseurs audio Compatibilité avec les anciens navigateurs L'insertion d'un fichier vidéo La balise <video> Les formats de fichier vidéo La balise <source> Des convertisseurs vidéo Compatibilité avec les anciens navigateurs 204 Présentation des feuilles de style 1. Le concept des feuilles de style L utilité des feuilles de style 208 9/20

10 3. Un bref historique Les modules CSS L'évolution des statuts L'utilité des préfixes vendeurs La compatibilité avec les navigateurs Des outils pour les feuilles de style 218 La syntaxe des CSS 1. Intégrer les styles CSS Les CSS intégrées à un élément HTML Les CSS internes au document HTML Les CSS externes au document HTML Les CSS importées La déclaration de style CSS Les sélecteurs Les sélecteurs de type /20

11 9. Les sélecteurs de classe Les sélecteurs d'identification Les sélecteurs hiérarchiques Les pseudo-classes Les pseudo-classes de lien a:link a:visited a:hover a:active Les pseudo-classes de paragraphe :first-letter :first-line Les pseudo-classes d insertion :before :after Les pseudo-classes de sélection Les sélecteurs d'attributs La notion de cascade La notion d'héritage Les commentaires /20

12 21. Les unités de mesure La notation des couleurs 254 Les propriétés CSS pour les polices de caractères 1. Les CSS pour les polices de caractères Appliquer une police de caractères Embarquer une police de caractères Appliquer l italique Passer en petites majuscules Modifier la graisse des caractères Gérer la taille des caractères Regrouper les propriétés de caractères Les polices système 272 Les propriétés CSS pour le texte 1. Appliquer une couleur Les décorations sur le texte /20

13 3. Changer la casse Le retrait de première ligne L espace entre les lettres L espace entre les mots Gérer l interligne des paragraphes Contrôler les espaces vides Les alignements de texte Le positionnement vertical du texte Gérer le sens de lecture du texte Appliquer une ombre portée sur le texte Gérer le texte en excès Utiliser les règles de césure Ajuster la hauteur des caractères Le texte en colonnes 297 Les propriétés CSS pour les listes et les tableaux 13/20

14 1. Les CSS pour les listes Les symboles des listes Les symboles en image Le retrait du symbole La syntaxe courte pour les listes Les CSS pour les tableaux L espace entre les cellules des tableaux Les bordures des tableaux Les cellules vides de tableaux La position de la légende des tableaux 309 La mise en forme des boîtes 1. Le concept du modèle de boîte Les boîtes en bloc ou en ligne La largeur et la hauteur des boîtes Les marges externes /20

15 5. Le remplissage interne Appliquer une couleur d'arrière-plan Les dégradés de couleurs Les dégradés linéaires Les dégradés circulaires L'opacité des boîtes Les bordures des boîtes Les styles des bordures L épaisseur des bordures Les couleurs des bordures La syntaxe courte Les bordures imagées Les coins arrondis des boîtes Les images d arrière-plan Appliquer une image d'arrière-plan La répétition de l'image La position de l'image Le défilement de l'image La syntaxe courte Les arrière-plans multiples Les ombres portées des boîtes Redimensionner les boîtes /20

16 La mise en page des boîtes 1. La mise en page Web Le positionnement des boîtes Positionnement statique Positionnement relatif Positionnement absolu Positionnement fixe Le flottement des boîtes Interdire le flottement La superposition des boîtes Le débordement du contenu Découper une boîte L'affichage des boîtes Les propriétés CSS L'affichage en bloc et en ligne L'affichage en tableau Afficher et masquer les boîtes La mise en page flexible 378 Les requêtes de média 16/20

17 1. Le Responsive Web Design et les requêtes de média Les requêtes de média Les critères La syntaxe Les valeurs minimales et maximales Les opérateurs logiques La taille des écrans Un design responsive Le site sur écran large Le site responsive 389 Les propriétés d'impression 1. Utilité des feuilles de style pour l'impression Feuilles de style selon le média de sortie Présentation Incorporation Optimiser une page d'impression Saut de page avant Saut de page arrière Éviter les sauts de page Le /20

18 Les modules graphiques CSS3 en devenir 1. Des modules pour les graphistes Les transformations Les transitions Les animations Les filtres graphiques Les masques L'habillage du texte 428 Le dessin 2D 1. Introduction La balise <canvas> Appel de l'api de dessin Dessiner un rectangle Ajouter de la couleur Tracer une ligne droite /20

19 7. Dessiner des formes géométriques Importer des images Ajouter du texte Ajouter de l'ombre Transformations 453 La géolocalisation 1. Concept et utilité Le fonctionnement Les navigateurs Protection de la vie privée Longitude et latitude Localisation sur une carte Suivre les déplacements 463 Le stockage de données en local 1. Présentation /20

20 2. Le stockage persistant Le stockage temporaire 476 Les applications en mode déconnecté (offline) 1. Présentation et enjeux Le fichier de mise en cache (manifest) Exemple complet 487 Les autres API JavaScript du HTML5 1. Les lignes de force Les API opérationnelles Les API en développement 496 Index /20

Documents pareils

HTML5 et CSS3 pour des sites Responsive Web Design

HTML5 et CSS3 pour des sites Responsive Web Design Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Le lâcher-prise 12 E. Les objectifs du livre 13 F. Les outils de l intégrateur