Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

HTML5, CSS3 & jQuery Michel Martin Table des matières III Table des matières In

HTML5, CSS3 & jQuery Michel Martin Table des matières III Table des matières Introduction......................................................................................................VII Les sources de l’ouvrage .................................................................................................................VII Site compagnon..................................................................................................................................VII Rubriques spéciales de ce livre.................................................................................................... VIII Joindre l’auteur................................................................................................................................. VIII 1. Avant de commencer......................................................................................1 Mais, au fait, qu’est-ce qu’un site Web ?.........................................................................................1 Qu’apporte chaque langage ? .........................................................................................................2 Vocabulaire et conventions d’écriture............................................................................................3 Compatibilité HTML5/CSS3...............................................................................................................4 Les outils de développement............................................................................................................6 Votre première page HTML avec Notepad++...............................................................................7 Premier contact avec le langage CSS3........................................................................................ 12 Pourquoi préférer CSS à HTML pour la mise en forme ?......................................................... 15 Premier contact avec jQuery........................................................................................................... 16 HTML, CSS et jQuery : deux approches....................................................................................... 18 2. Premiers pas en HTML, CSS et jQuery..................................................... 21 Les bases du HTML ........................................................................................................................... 21 Les bases du CSS.............................................................................................................................. 29 Les bases de jQuery..........................................................................................................................37 Exercice 1............................................................................................................................................. 42 3. Éléments textuels........................................................................................43 Les balises permettant d’afficher du texte ..................................................................................43 Listes HTML .........................................................................................................................................44 Personnaliser une liste..................................................................................................................... 45 Choisir la police du texte..................................................................................................................47 Taille des caractères......................................................................................................................... 48 Attributs des caractères................................................................................................................... 49 Utiliser des polices de caractères non conventionnelles....................................................... 50 Mise en forme des liens hypertexte............................................................................................. 54 Exercice 2.............................................................................................................................................57 4. Couleur des éléments.................................................................................59 Couleur du texte................................................................................................................................ 59 Couleur d’arrière-plan d’un élément............................................................................................ 59 Définir une couleur par son code RGB........................................................................................ 60 IV Table des matières Transparence et opacité des éléments........................................................................................ 61 Gradient linéaire................................................................................................................................ 62 Gradient radial.....................................................................................................................................67 Exercice 3.............................................................................................................................................72 5. Images ..........................................................................................................75 Insérer une image dans une page.................................................................................................75 Une image en arrière-plan d’une page ........................................................................................76 Une image en arrière-plan d’un conteneur.................................................................................77 Utiliser une image comme lien hypermédia................................................................................78 Légender une image.........................................................................................................................78 Centrer une image dans un conteneur ........................................................................................79 Modifier les caractéristiques d’une image lorsqu’elle est survolée...................................... 81 Empiler des images .......................................................................................................................... 82 Préchargement d’images................................................................................................................ 83 Images réactives................................................................................................................................ 84 Album photos..................................................................................................................................... 85 Exercice 4............................................................................................................................................ 88 6. Ombrages et arrondis.................................................................................89 Ombrer des objets non textuels.................................................................................................... 89 Ombrer des objets textuels............................................................................................................ 92 Arrondir les coins d’un élément de type block.......................................................................... 93 Exercice 5.............................................................................................................................................97 7. Menus............................................................................................................99 Menu vertical flottant en HTML5................................................................................................... 99 Menu horizontal en HTML5...........................................................................................................100 Amélioration du menu avec quelques propriétés CSS ..........................................................102 Menu déroulant.................................................................................................................................103 Exercice 6.............................................................................................................................................111 8. Formulaires et stockage local de données.............................................113 Définir un formulaire.........................................................................................................................113 Envoi d’un formulaire par mail .......................................................................................................114 Les différents éléments utilisables dans un formulaire...........................................................116 Quelques exemples de formulaires .............................................................................................118 Focus...................................................................................................................................................124 Validation de données....................................................................................................................127 Modifier le style d’un champ en fonction de sa validité.........................................................132 Stockage local de données...........................................................................................................134 Exercice 7 ........................................................................................................................................... 137 Exercice 8...........................................................................................................................................138 Table des matières V 9. Tableaux ......................................................................................................141 Définir un tableau en HTML............................................................................................................141 Définir un tableau en CSS..............................................................................................................142 Bordures autour des cellules ........................................................................................................144 Fusionner et séparer des bordures ............................................................................................145 Espacer les cellules .........................................................................................................................146 Fusionner des cellules.................................................................................................................... 147 Ajouter une légende au tableau...................................................................................................149 Arrière-plan des cellules.................................................................................................................150 Alignement dans les cellules.........................................................................................................152 Différencier lignes paires et lignes impaires.............................................................................153 Mise en forme des cellules vides.................................................................................................154 Arrondis et ombrages .....................................................................................................................155 Exercice 9...........................................................................................................................................157 10. Mise en page............................................................................................159 inline, block ou les deux ?.............................................................................................................159 Nouvelle organisation des documents.......................................................................................160 Positionner les éléments affichés sur une page......................................................................164 Faire flotter un élément ..................................................................................................................170 Mise en page sur plusieurs colonnes .........................................................................................172 Marges ................................................................................................................................................175 Responsive Web Design (Media Queries CSS) ........................................................................ 177 Optimiser les pages d’un site Web..............................................................................................179 Exercice 10 ..........................................................................................................................................181 Exercice 11............................................................................................................................................181 Exercice 12 ..........................................................................................................................................181 11. Gestion événementielle...........................................................................183 Gestion événementielle en HTML ...............................................................................................183 Gestion événementielle en CSS ..................................................................................................184 Gestion événementielle en jQuery..............................................................................................185 Événements liés à la fenêtre.........................................................................................................185 Événements liés au clavier ............................................................................................................ 187 Événements liés à la souris ...........................................................................................................188 Événements liés aux formulaires .................................................................................................190 Événements liés aux médias.........................................................................................................192 Événements liés à l’orientation.....................................................................................................196 Exercice 13..........................................................................................................................................199 VI Table des matières 12. Multimédia................................................................................................201 Insérer un élément audio...............................................................................................................201 Piloter une balise <audio> en jQuery......................................................................................203 Insérer un élément vidéo ..............................................................................................................205 Piloter une balise <video> en jQuery......................................................................................207 Exercice 14.........................................................................................................................................209 13. Transformations, transitions et animations...........................................211 Transformations .................................................................................................................................211 Transitions .........................................................................................................................................223 Quelques animations classiques.................................................................................................228 Animations personnalisées...........................................................................................................232 Différer une animation ...................................................................................................................233 Mettre en place un timer...............................................................................................................234 Exercice 15 ........................................................................................................................................236 14. Mise à jour avec AJAX ............................................................................237 Charger un fichier............................................................................................................................ 237 $.get() ...........................................................................................................................................239 $.post().........................................................................................................................................242 $.ajax().........................................................................................................................................244 Exercice 16 ........................................................................................................................................249 15. Mise en ligne d’un site............................................................................251 Choisir un hébergeur ......................................................................................................................251 Créer un nom de domaine............................................................................................................252 Transférer les fichiers en FTP.......................................................................................................253 Index............................................................................................................... 257 Introduction VII Introduction Vous n’avez jamais créé de pages Web, mais vous rêvez de le faire ? Vous utilisez un CMS et vous aimeriez améliorer les pages qui y ont été créées ? Ce livre est fait pour vous ! Au fil des pages, vous découvrirez : ■ ■les bases des langages HTML, CSS et jQuery ; ■ ■comment afficher des éléments textuels en HTML ; ■ ■les techniques permettant de modifier la couleur des éléments affichés ; ■ ■comment afficher des images, les mettre en page et réaliser un album photos ; ■ ■les techniques d’ombrage et d’arrondi du CSS3 ; ■ ■comment mettre en place des menus en HTML5 et CSS3 ; ■ ■la définition de formulaires (simples et évolués) en HTML5 ; ■ ■le stockage local de données en HTML5 ; ■ ■la définition et la mise en forme de tableaux en HTML5 et CSS3 ; ■ ■les techniques de mise en page CSS ; ■ ■la gestion événementielle en HTML, CSS et jQuery ; ■ ■l’utilisation d’éléments multimédia dans des pages HTML5 ; ■ ■les transformations et animations en CSS3 et jQuery ; ■ ■la mise à jour d’une portion de page HTML avec Ajax ; ■ ■la mise en ligne d’un site Web. Les sources de l’ouvrage Les éditions Pearson mettent à disposition sur le site www.moneformation.fr l’ensemble des codes passés en revue dans cet ouvrage. Ces codes sont rassemblés dans une archive au format ZIP. Pour accéder aux fichiers correspondants, il vous suffit de déziper cette archive en double-cliquant dessus dans l’Explorateur de fichiers et en cliquant sur Extraire tout dans la barre d’outils. Site compagnon Cet ouvrage est accompagné d’un site Web sur lequel se trouvent tous les corrigés des exercices en vidéo. Pour accéder à ces derniers, rendez-vous à l’adresse www. moneformation.fr, inscrivez-vous pour activer votre compte et accéder aux corrigés des exercices. Vous aurez besoin de consulter le présent ouvrage pour créer votre compte et répondre à la question de sécurité. Chaque fois que vous voudrez réaliser un exercice de l’ouvrage, vous pourrez vous référer à la page correspondante de l’exercice sur le site Web. VIII Introduction Rubriques spéciales de ce livre Astuce Elles fournissent des remarques particulières ou des raccourcis inhabituels du langage. Info Elles donnent des informations complémentaires sur le sujet étudié, sans être indispensables pour la tâche en cours. Attention Elles attirent votre attention sur des points particulièrement importants ou qui demandent une relecture pour être correctement assimilés. Joindre l’auteur Une question ? Une remarque ? Une suggestion ? N’hésitez pas à me joindre en vous rendant sur le site www.mediaforma.com et en sélectionnant l’onglet Contact. 1 Avant de commencer Cet ouvrage est consacré aux langages de programmation HTML5, CSS3 et jQuery. Vous vous demandez certainement s’il est absolument nécessaire d’apprendre ces trois langages, ou si vous pouvez vous limiter au HTML. Cette question est tout à fait licite, car les pages Web sont écrites en HTML. Ce langage devrait donc suffire ! S’il est vrai que, contrairement au HTML, les langages CSS et jQuery ne sont pas obligatoires, vous verrez qu’ils apportent un confort non négligeable et que, tout bien considéré, ils sont quasiment incontournables pour quiconque désire créer un site Web bien structuré, facilement maintenable et agréable à utiliser… Mais, au fait, qu’est-ce qu’un site Web ? Un site Web est constitué d’une ou de plusieurs pages Web. Attention Je dis bien "site Web" et non "site Internet" ! Beaucoup de personnes considèrent qu’Internet se limite au Web et parlent tout naturellement de sites Internet. Mais alors, est-ce que l’échange de messages e-mail, les téléchargements FTP et les dialogues en direct ne font pas partie d’Internet ? Bien sûr que si ! Comme vous lisez cet ouvrage, vous allez acquérir une certaine expérience dans le développement de sites Web et, en tant qu'"expert", il est important que vous utilisiez le bon vocabulaire. Lorsqu’un site est constitué d’une seule page, il se contente d’afficher un nombre réduit d’informations, ou il utilise une technique qui lui permet d’afficher plusieurs pages dans une seule. Ceci est possible en mettant en place un système d’onglets qui contiennent chacun une partie des informations à afficher. Lorsqu’un site est constitué de plusieurs pages, ces dernières sont reliées entre elles par des liens hypertexte ou hypermédia. Dans la Figure 1.1, par exemple, cet extrait de page contient plusieurs liens hypertexte et hypermédia. 2 Chapitre 1 Figure 1.1 Cette figure représente une partie de la page principale du site www.microsoft.com. Vous l’aurez compris, les liens hypertexte sont des éléments textuels sur lesquels on peut cliquer pour accéder à d’autres pages. Quant aux liens hypermédia, ils sont également cliquables, mais représentés par des éléments non textuels (des images en général). La page principale d’un site est appelée "page d’accueil" ou "homepage". C’est elle qui donne accès aux autres pages du site, en utilisant une structure arborescente dans laquelle les pages de tous les niveaux peuvent faire référence aux pages des autres niveaux. Figure 1.2 La structure arborescente d’un site composé de six pages. Qu’apporte chaque langage ? Les langages HTML, CSS et jQuery sont utilisés dans des domaines très différents : ■ ■Le HTML permet uploads/s3/ html5-css3-jquery-de-michel-martin-pdf.pdf