Résumé Théorique M104 - Développement de Sites Web Statiques PDF

RÉSUMÉ THÉORIQUE – FILIÈRE DÉVELOPPEMENT DIGITAL M104 – Développer des sites web statiques 100 heures  01 Créer une page web en HTML Introduction au langage HTML Utiliser l'environnement d...

RÉSUMÉ THÉORIQUE – FILIÈRE DÉVELOPPEMENT DIGITAL M104 – Développer des sites web statiques 100 heures  01 Créer une page web en HTML Introduction au langage HTML Utiliser l'environnement de développement Définir des éléments basiques d'une page SOMMAIRE HTML 02 Implémenter une page web statique Réaliser une page web statique Intégrer des formulaires dans une page web 03 Mettre en forme une page web avec les feuilles de style CSS Introduire le CSS Utiliser les propriétés CSS Manipuler le positionnement Adapter une page web au dispositif d’affichage Créer des animations Adapter des templates HTML/CSS avec un site Web 04 Maîtriser Bootstrap Intégrer Bootstrap Maitriser les classes CSS de base Utiliser les composants Bootstrap 05 Héberger un site Web Déployer en intranet Déployer en ligne  MODALITÉS PÉDAGOGIQUES 1 2 3 4 5 LE GUIDE DE LA VERSION DES DU CONTENU DES SOUTIEN PDF CONTENUS INTERACTIF RESSOURCES Il contient le Une version TÉLÉCHARGE Vous disposez EN LIGNES résumé PDF est mise ABLES de contenus Les ressources théorique et le en ligne sur Les fiches de interactifs sous sont manuel des l’espace résumés ou forme consultables en travaux apprenant et des exercices d’exercices et synchrone et pratiques formateur de la sont de cours à en asynchrone plateforme téléchargeable utiliser sur pour s’adapter WebForce Life s sur WebForce WebForce Life au rythme de Life l’apprentissage Copyright - Tout droit réservé - OFPPT 3  PARTIE 1 Créer une page web en HTML Dans ce module, vous allez : Découvrir l’historique du web et du langage HTML Manipuler les outils de création d’une page web Connaître et manipuler les éléments de base d'une page web 20 heures  CHAPITRE 1 INTRODUCTION AU LANGAGE HTML Ce que vous allez apprendre dans ce chapitre : L’historique de l’HTML La mission du W3C L’utilisation des navigateurs 2 heures  CHAPITRE 1 INTRODUCTION AU LANGAGE HTML 1. Historique de l’HTML 2. Rôle du W3C 3. Propriétés des navigateurs  01- INTRODUCTION AU LANGAGE HTML Historique de l’HTML Définitions Le World Wide Web (WWW), abrégé le Web, est le principal service de partage et de recherche d'informations sur Internet (le réseau informatique mondial). Le Web donne aux utilisateurs l’accès à une vaste gamme de pages et de documents (appelés ressources) qui sont connectés au moyen de liens hypertextes (hyperliens) et accessibles via un navigateur. Les ressources du web correspondent aux entités informatiques comme le texte, les image, les vidéos, d’autres ressources. Pour chaque ressource sur le web, une adresse en ligne appelée URL (Uniform Resource Locator) est attribuée. Un document hypertexte (composé du texte et des liens hypertextes) est écrit en langage de balisage hypertexte (HTML). Le Web fonctionne dans le mode client-serveur : Les serveurs sont des programmes informatiques qui stockent et transmettent des documents à d'autres ordinateurs sur le réseau Les clients sont des programmes qui demandent des documents à un serveur Le navigateur est le logiciel qui permet aux utilisateurs de visualiser les documents récupérés PARTI E1 Copyright - Tout droit réservé - OFPPT 7  01- INTRODUCTION AU LANGAGE HTML Historique de l’HTML Historique du web 1980 : un physicien nommé Tim Berners-Lee , chercheur au CERN (Conseil européen pour la recherche nucléaire, aujourd'hui l'Organisation européenne pour la recherche nucléaire), a proposé un système aux chercheurs pour leur permettre de partager facilement les documents. L’objectif du projet, baptisé « World Wide Web », a été de permettre à des scientifiques travaillant dans des universités et des instituts du monde entier de s'échanger des informations instantanément 1990 : Robert Cailliau (ingénieur et informaticien belge) et Tim Berners-Lee ont collaboré pour travailler ensemble sur HTML ( HyperText Markup Language) mais le projet n'a pas été formellement adopté par le CERN. Le tout premier HTML était disponible sous la forme d'un document appelé "balises HTML" en 1991 et a été partagé par Tim Berners-Lee. Les balises HTML comprenaient initialement 18 éléments. Le web a connu une grande évolution depuis son apparition : PARTI E1 Copyright - Tout droit réservé - OFPPT 8  01- INTRODUCTION AU LANGAGE HTML Historique de l’HTML Le web a connu une grande évolution depuis son apparition : 19 19 19 19 89 90 91 96 Invention du Tim Berners-Lee Lancement Publication www (Tim développe le du 1er site du langage Berners- HTML web CSS Lee) mi 20 20 200 19 15 10 0s 98 PARTI Déploiement Apparition Adaptation Lancement de la mise à du terme E1 du mobile officel de jour «mobile- “sponsive Google friendly» par Web Design” Google Copyright - Tout droit réservé - OFPPT 9  01- INTRODUCTION AU LANGAGE HTML Historique de l’HTML Évolution Langage HTML HTML1 (1990 - 1992) Première publication du langage HTML 1994 : Apports de Netscape Navigator : support de nombreux éléments de présentation est ajouté : attributs de texte, clignotement, centrage, etc HTML 2.0 (1995 - 1996) HTML 3.2 et 4.0 (1997) : Le 14 janvier 1997, le W3C publie la spécification HTML 3.2. Ses plus importantes nouveautés sont la standardisation des tables et de nombreux éléments de présentation. Le 18 décembre 1997, le W3C publie la spécification HTML 4.0 qui standardise de nombreuses extensions supportant les styles et les scripts, les cadres (frames) et les objets (inclusion généralisée de contenu). XHTML (2000- 2006) : Le développement de HTML en tant qu’application du Standard Generalized Markup Language(SGML) est officiellement abandonné au profit de XHTML, application de Extensible Markup Language(XML). Figure 1 : Logo du langage HTML5 HTML 5 (2007 à nos jours) PARTI E1 Copyright - Tout droit réservé - OFPPT 10 1.CHAPITRE 1 1.INTRODUCTION AU LANGAGE HTML 1. Historique de l’HTML 2. Rôle du W3C 3. Propriétés des navigateurs  01- INTRODUCTION AU LANGAGE HTML Rôle du W3C Le W3C (World Wide Web Consortium) est un organisme international à but non lucratif. Sa mission est de définir les standards techniques liés au web pour assurer l'accessibilité, l'interopérabilité et la pérennité et des documents Web La valeur sociale du Web vient du fait qu'il permet la communication et le partage des connaissances entre les humains. L'un des principaux objectifs du W3C est de mettre ces avantages à la disposition de tous, quels que soient leur infrastructure matérielle et logicielle, et leur langue. Donc, tous les sites web doivent respecter une norme afin de garantir une meilleure cohérence de données, de formats et de fonctionnalités Figure 2 : logo du W3C En l’absence des standards et des normes, chaque navigateur web aura ses propres règles d'interprétation des données Web. Or, le rôle du W3C est de standardiser les technologies du web et mettre en accord tous les navigateurs ainsi que les développeurs sur un ensemble de règles à respecter par tout le monde. PARTI E1 Copyright - Tout droit réservé - OFPPT 12  CHAPITRE 1 INTRODUCTION AU LANGAGE HTML 1. Historique de l’HTML 2. Rôle du W3C 3. Propriétés des navigateurs  01- INTRODUCTION AU LANGAGE HTML Propriétés des navigateurs Le rôle d’un navigateur Récupérer le code (généralement écrit en HTML, PHP, JavaScript ou d'autres langages de programmation Web), à partir du serveur, puis l’interpréter et le restituer sous forme de page Web graphique pour l'affichage. Interpréter l'adresse d'un site web (URL) et gérer les requêtes client / Serveur. Faciliter le développement et le test des pages Web. Le fonctionnement d’un navigateur En utilisant le navigateur Web, l'utilisateur envoie une requête dite "Requête HTTP" au serveur qui héberge le site web. Le serveur Web reçoit la requête de l'utilisateur qui PARTI contient l'adresse IP du serveur, le port sur lequel tourne le serveur Web, la ressource demandée et la méthode avec E1 Figure 3 : Communication client-serveur web en HTTP laquelle on exploite cette ressource. Le navigateur reçoit la page web demandée sous forme de code appelé : "code HTML" et l'interprète pour afficher des objets visuels. Copyright - Tout droit réservé - OFPPT 14  CHAPITRE 2 UTILISER L’ENVIRONNEMENT DE DÉVELOPPEMENT POUR PRODUIRE DU HTML Ce que vous allez apprendre dans ce chapitre : Utiliser Visual Studio Code comme éditeur de code Installer des extensions de VS Code 1 heure  CHAPITRE 2 UTILISER L’ENVIRONNEMENT DE DÉVELOPPEMENT POUR PRODUIRE DU HTML 1. Utilisation de Visual Studio Code 2. Installation des extensions de VS Code  02- UTILISER L’ENVIRONNEMENT DE DÉVELOPPEMENT POUR PRODUIRE DU HTML Utilisation de Visual Studio Code Le logiciel Visual studio Code Visual Studio Code est un logiciel gratuit qui permet l’édition, la correction et le débogage du code source dans plusieurs langages informatiques : Visual Basic, JavaScript, XML, Python, HTML, CSS, …. VS code offre : Une présentation sophistiquée du code. Une auto-complétion du code source. Un ensemble d'extensions permettant de simplifier la programmation. La détection du langage de programmation par l'extension du fichier. Figure 4 : Logo du logiciel VS Code PARTI E1 Copyright - Tout droit réservé - OFPPT 17  02- UTILISER L’ENVIRONNEMENT DE DÉVELOPPEMENT POUR PRODUIRE DU HTML Utilisation de Visual Studio Code Pour installer les extensions Terminal pour écrire les commandes PARTI Explorateur des E1 fichiers Figure 5 : Environnement de travail de VS Code Copyright - Tout droit réservé - OFPPT 18  CHAPITRE 2 UTILISER L’ENVIRONNEMENT DE DÉVELOPPEMENT POUR PRODUIRE DU HTML 1. Utilisation de Visual Studio Code 2. Installation des extensions de VS Code  02- UTILISER L’ENVIRONNEMENT DE DÉVELOPPEMENT POUR PRODUIRE DU HTML Installation des extensions VS Code Les extensions de VS Code Les extensions de Visual Studio Code permettent d’accélérer le développement et favorisent le partage entre les membres de l’équipe de développement. Le modèle d'extensibilité riche de VS Code permet aux «auteurs d'extensions» ainsi qu’aux utilisateurs d’intégrer facilement à l’environnement de développement de VS code. Parmi les extensions connues de VS code : Bracket Pair Colorizer Better Comments Snippets CSS Peak Icons GitLens Import Cost PARTI E1 Copyright - Tout droit réservé - OFPPT 20  02- UTILISER L’ENVIRONNEMENT DE DÉVELOPPEMENT POUR PRODUIRE DU HTML Installation des extensions VS Code Écrivez un mot clé et taper "Entrer" pour voir les extensions disponibles PARTI E1 Figure 6 : Installation des extensions dans VS Code Copyright - Tout droit réservé - OFPPT 21  CHAPITRE 3 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Ce que vous allez apprendre dans ce chapitre : Les balises HTML permettant de concevoir une page Web statique Les balises de structuration des pages web 17 heures  CHAPITRE 3 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML 1. Normes W3C 2. Squelette d’une page HTML 3. Balises de bases (contenu) 4. Couleurs 5. Listes en HTML 6. Liens en HTML 7. Balises multimédia (images, audio, vidéo) 8. Tableaux en HTML 9. Balises de structuration  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Normes W3C Les normes du W3C W3C est chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XML, RDF, CSS,PNG, SVG, … Parmi les normes W3C concernant HTML on cite : Les balises , , , et sont obligatoires Les éléments doivent être correctement imbriqués Les éléments doivent toujours être fermés Les éléments HTML doivent être en minuscules Les documents HTML doivent avoir un élément racine Les noms d'attributs doivent être en minuscules Les valeurs des attributs doivent être indiqués Validation du code HTML avec W3C Validator: http://validator.w3.org/ PARTI E1 Copyright - Tout droit réservé - OFPPT 24  CHAPITRE 3 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML 1. Normes W3C 2. Squelette d’une page HTML 3. Balises de bases (contenu) 4. Couleurs 5. Listes en HTML 6. Liens en HTML 7. Balises multimédia (images, audio, vidéo) 8. Tableaux en HTML 9. Balises de structuration  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Squelette d’une page HTML Squelette d’une page Web Déclaration du type de document (HTML 5) Contient des informations descriptives sur le document Élément racine qui contient tous les éléments du document HTML Contient tout ce que nous voulons afficher dans la fenêtre du navigateur PARTI E1 Figure 7 : Structure minimale d’un document html Copyright - Tout droit réservé - OFPPT 26  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Squelette d’une page HTML Notion de balise Une balise est un élément de texte encadrée par les caractères inférieur () Une balise correspond à un élément du code HTML d'une page web (un objet, une mise en forme,..) Une balise a généralement la forme suivante : Contenu Balise ouvrante On change ces valeurs pour modifier l'apparence de l'objet Balise fermante PARTI Figure 8 : Forme d’une balise HTML E1 Copyright - Tout droit réservé - OFPPT 27  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Squelette d’une page HTML Notion d’encapsulation Les balises doivent être correctement encapsulées : Paragraphe Paragraphe div Exemple 1 : Code correct Exemple 2 : Code incorrect div titre h1 div racin un sous titre un paragraphe avec e des mots importants h2 pour terminer avec une image h1 h2 p nœud PARTI p em E1 im img em feuill g e Exemple 3 : Code correct Figure 9 : Encapsulation des balises HTML Copyright - Tout droit réservé - OFPPT 28  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Squelette d’une page HTML Les types d’éléments HTML Il existe deux types d'éléments : bloc (bloc) et en ligne (inline) Les éléments « bloc » s'étendent en largeur pour remplir totalement l'espace offert par son conteneur. Par défaut, la boîte devient aussi large que son conteneur, occupant 100% de l'espace disponible. Le nouvel élément bloc commence dans une nouvelle ligne. Les éléments « inline » se suivent en ligne Bloc Inline h1 img span a p div PARTI E1 Figure 10 : Exemples d’éléments « bloc » Figure 11 : Exemples d’éléments « inline » Copyright - Tout droit réservé - OFPPT 29  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Squelette d’une page HTML Les types d’éléments HTML Éléments de niveau bloc en HTML : H6> Éléments de niveau inline en HTML : PARTI E1 Copyright - Tout droit réservé - OFPPT 30  CHAPITRE 3 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML 1. Normes W3C 2. Squelette d’une page HTML 3. Balises de bases (contenu) 4. Couleurs 5. Listes en HTML 6. Liens en HTML 7. Balises multimédia (images, audio, vidéo) 8. Tableaux en HTML 9. Balises de structuration  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Balises de base Rappel: …. PARTI E1 Figure 12 : Structure générale d’une page HTML Copyright - Tout droit réservé - OFPPT 32  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Balises de base L’entête du document HTML Cette balise spécifie la version du langage HTML (HTML5 dans notre cas). < html lang="fr" dir="rtl"> L'élément racine d'une page web. Peut spécifier un certain nombre de métadonnées comme la langue et l'orientation de la page. PARTI C'est l'élément entête qui contient les métadonnées d'une page web. E1 Cet élément n’est pas visible sur la page web. Copyright - Tout droit réservé - OFPPT 33  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Balises de base La balise Les métadonnées meta sont des données (informations) sur les données. La balise fournit des métadonnées sur le document HTML. Les métadonnées ne seront pas affichées sur la page, mais seulement interprétables par les machines. Exemples de balises meta : Spécifie le format d'encodage du contenu. Cet élément est indispensable pour avoir une page web responsive (qui s'adapte la taille de l'écran utilisé). PARTI E1 Ces éléments fournissent des informations sur le document html (utilisées par les moteurs de recherche) Copyright - Tout droit réservé - OFPPT 34  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Balises de base La balise Mon document Définit le texte à afficher sur la barre du titre. Figure 13 : Titre du document HTML La balise C'est l'élément qui contient tous les composants visibles de la page web : les textes, les paragraphes, les images, les tableaux, les animations… PARTI E1 Copyright - Tout droit réservé - OFPPT 35  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Balises de base Exemple d’une page HTML vide Mon document PARTI E1 Copyright - Tout droit réservé - OFPPT 36  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Balises de base Les paragraphes en HTML La balise désigne un nouveau paragraphe L'attribut "title" permet d'afficher un infobulle quand la souris survole le paragraphe. Exemple de déclaration d’un paragraphe : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim tortor at auctor urna. Dignissim enim sit amet venenatis. Varius sit amet mattis vulputate enim. Urna et pharetra pharetra massa massa. PARTI E1 Copyright - Tout droit réservé - OFPPT 37  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Balises de base Les titres en HTML Il existe 6 niveaux de titres (headers) en HTML. Les balises , , … permettent l'affichage de ces titre. Exemple Niveau1 Niveau1 Niveau2 Niveau2 Niveau3 Niveau3 Niveau4 Niveau5 Niveau4 Niveau6 Niveau5 Niveau6 PARTI Figure 14 : les titres en HTML E1 Copyright - Tout droit réservé - OFPPT 38  CHAPITRE 3 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML 1. Normes W3C 2. Squelette d’une page HTML 3. Balises de bases (contenu) 4. Les couleurs 5. Listes en HTML 6. Liens en HTML 7. Balises multimédia (images, audio, vidéo) 8. Tableaux avec du HTML 9. Balises de structuration  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Les couleurs Les couleurs en HTML En HTML, On peut spécifier les couleurs de 3 manières différentes : En utilisant la valeur Hex : HEX est un système de numérotation hexadécimale des couleurs (basé sur les chiffres décimaux de 0 à 9 et les lettres latines A à F). La conception Web utilise le code de couleur hexadécimal sous forme #RRGGBB : RR est le rouge, GG est le vert et BB est le bleu. Chaque fraction de couleur est comprise entre 00 et FF. En utilisant les noms des couleurs : Les noms des couleurs doivent être spécifiés en anglais (blue, red, etc.). En utilisant la valeur RGB (Red, Green, Blue) : Le code couleur RGB est représenté sous forme de 3 couples de codes en chiffres compris entre 0 et 255. Les trois codes représentent respectivement le dosage du rouge, du vert et du bleu. Couleurs du web : Exemples de sites pour avoir les codes des couleurs PARTI https://www.w3schools.com/colors/colors_picker.asp E1 https://htmlcolorcodes.com/ Copyright - Tout droit réservé - OFPPT 40  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Les couleurs Les couleurs en HTML (Exemples) L’attribut bgcolor : permet de préciser la couleur utilisée pour le fond du document : La balise (obsolète) Le code #FF0000 est la même chose que la couleur rouge notée « red ». Balise >p> o C'est un texte vert o Le texte est maintenant en rouge. o Voici le code pour le vert olive foncé. o Le code 745 est l'abréviation de 774455. PARTI E1 Copyright - Tout droit réservé - OFPPT 41  CHAPITRE 3 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML 1. Normes W3C 2. Squelette d’une page HTML 3. Balises de bases (contenu) 4. Les couleurs 5. Listes en HTML 6. Liens en HTML 7. Balises multimédia (images, audio, vidéo) 8. Tableaux avec du HTML 9. Balises de structuration  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Les listes Les listes en HTML Les listes sont utiles pour apporter de la clarté et de l’ordre aux documents web. En HTML, il est possible de définir trois types de listes : les listes ordonnées, les listes non ordonnées, et les listes de définition. Les balises et les attributs utilisées sont: Balise ul : définir une liste non ordonnée Balise ol : définir une liste ordonnée Balise dl : définir une liste de définition Balise li : définir un élément de liste L'attribut "type" permet de préciser le type de numérotation utilisée pour présenter la liste L'attribut "value" permet d'initialiser le numéro courant par la valeur souhaitée PARTI E1 Copyright - Tout droit réservé - OFPPT 43  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Les listes Les listes ordonnées et non ordonnées : Élément1 Exemple de liste non Élément2 ordonnée Élément3 Figure 15 : Liste non ordonnée Élément1 Élément2 Exemple 1 de liste Élément3 ordonnée Élément4 Figure 16 : Liste ordonnée 1 PARTI Élément1 Élément2 E1 Exemple 2 de liste Élément3 ordonnée Élément4 Figure 17 : Liste ordonnée 2 Copyright - Tout droit réservé - OFPPT 44  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Les listes Les listes de définition La liste de définition est délimitée par les balises (Definition List), L'élément DT (Definition Title) est utilisé pour donner le titre de la définition et l'élément DD pour donner la définition. Pour les deux éléments DT et DD, la balise fermante est optionnelle. Exemple Langages C++ Java Python SGBD MySQL MS SQL Server Oracle PARTI E1 Figure 18 : Liste de définition Copyright - Tout droit réservé - OFPPT 45  CHAPITRE 3 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML 1. Normes W3C 2. Squelette d’une page HTML 3. Balises de bases (contenu) 4. Les couleurs 5. Listes en HTML 6. Liens en HTML 7. Balises multimédia (images, audio, vidéo) 8. Tableaux avec du HTML 9. Balises de structuration  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Les liens La balise La balise permet de créer un lien hypertexte, c'est-à-dire rendre une partie du texte active suite au clic de l’utilisateur. Pour chaque lien on associe une adresse destination où l'utilisateur sera envoyé après son clic. Cette balise permet également de créer des liens à l'intérieur d'un document ainsi que l'envoi d'un mail. Les principaux attributs des liens hypertextes sont : href : la cible du lien title : affiche une info bulle sur le lien. Target : _blank : ouverture de la page cible dans une nouvelle fenêtre. _parent : ouverture de la page cible dans le cadre parent (de niveau immédiatement supérieur). PARTI _self : (valeur par défaut), ouverture de la page cible dans le cadre d'appel. E1 _top : ouverture de la page cible dans la fenêtre hôte (par-dessus le FRAMESET). Copyright - Tout droit réservé - OFPPT 47  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Les liens Exemples de liens Lien vers un autre document HTML(Lien relatif) Cliquer ici pour aller à la page Lien vers une url (Lien absolu) Site officiel de l'OFPPT Un lien qui s'ouvre dans une nouvelle fenêtre Site officiel de l'OFPPT Lien vers un emplacement dans le même document (Lien interne) titre de la page … PARTI E1 haut de la page Copyright - Tout droit réservé - OFPPT 48  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Les liens Exemples de liens Lien pour envoyer un mail Contactez-moi par email en cliquant sur ce lien Lien hypertexte sur une image PARTI E1 Copyright - Tout droit réservé - OFPPT 49  CHAPITRE 3 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML 1. Normes W3C 2. Squelette d’une page HTML 3. Balises de bases (contenu) 4. Les couleurs 5. Listes en HTML 6. Liens en HTML 7. Balises multimédia (images, audio, vidéo) 8. Tableaux avec du HTML 9. Balises de structuration  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Les balises multimédia (images, audio, vidéo) La balise La balise permet d’insérer une image dans une page web. L’attribut src définit le chemin de l'image source l’attribut alt le texte alternatif si l'image n'est pas affichée. Les attributs width et height définissent la taille de l’image (en pixels) Exemple : PARTI E1 Copyright - Tout droit réservé - OFPPT 51  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Les balises multimédia (images, audio, vidéo) La balise L'élément HTML permet d'afficher différentes images pour différents appareils ou tailles d'écran. Le navigateur choisira la source la plus pertinente selon : La disposition de la page L'appareil utilisé Les formats pris en charge Si aucune correspondance n'est trouvée parmi les éléments , c'est le fichier défini par l'attribut src de l'élément qui sera utilisé. Exemple : PARTI Si la largeur de l'écran dépasse 600 px, c'est la source « ofppt.jpg » qui prend l'objet. E1 Copyright - Tout droit réservé - OFPPT 52  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Les balises multimédia (images, audio, vidéo) La balise L'élément permet de lire un fichier audio dans la page HTML Controls : pour afficher les boutons play, stop, preview… Autoplay : pour démarrer la lecture automatique de l'audio lors du chargement de la page web. Le navigateur essaie de lire la première source. En cas d'erreur, il passe à la deuxième source. Si le navigateur ne prend pas en charge l'élément , il affiche le message en bas. Exemple : Votre navigateur ne supporte pas la balise "audio". PARTI E1 Copyright - Tout droit réservé - OFPPT 53  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Les balises multimédia (images, audio, vidéo) La balise L'élément permet d'incorporer une vidéo dans une page Web. Controls : pour afficher les boutons play, stop, … Autoplay : pour démarrer la lecture automatique de la vidéo lors du chargement de la page web. Le navigateur essaie de lire la première source. En cas d'erreur, il passe à la deuxième source. Si le navigateur ne prend pas en charge l'élément , il affiche le message en bas. Exemple : Votre navigateur ne supporte pas la balise "video". PARTI E1 Copyright - Tout droit réservé - OFPPT 54  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Les balises multimédia (images, audio, vidéo) La balise La balise permet d’afficher une vidéo Pour ce faire, on peut utiliser l’identifiant de la vidéo pour y faire référence dans le code HTML. Exemple : PARTI E1 Copyright - Tout droit réservé - OFPPT 55  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Les balises multimédia (images, audio, vidéo) La balise L'élément est une solution polyvalente pour inclure des objets génériques. Cet élément permet aux auteurs HTML de spécifier tout ce qui est requis par un objet pour sa présentation par un agent utilisateur. Exemple 1 : intégrer un document HTML dans un autre document HTML alt : test.html Ici, l'attribut « alt » apparaitra si le navigateur ne prend pas en charge la balise d'objet. Exemple 2 : intégrer un document PDF dans un document HTML alt : test.html PARTI E1 Copyright - Tout droit réservé - OFPPT 56  CHAPITRE 3 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML 1. Normes W3C 2. Squelette d’une page HTML 3. Balises de bases (contenu) 4. Les couleurs 5. Listes en HTML 6. Liens en HTML 7. Balises multimédia (images, audio, vidéo) 8. Tableaux avec du HTML 9. Balises de structuration  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Les tableaux La balise Pour insérer un tableau, on utilise la balise. À l’intérieur de la balise , la balise (table row) signifie une ligne. Chaque ligne est composée d’une ou plusieurs cellules de données définies par la balise. Pour l’entête du tableau, on utilise la balise (table header). L’attribut Border permet de fixer la largeur des bordures des cellules. Exemple : Liste des employés NomPrénomAge ENAANAIAdil40 SAFIRLaila32 HAMIMMohamed39 PARTI E1 Figure 19 : Exemple de tableau en HTML Copyright - Tout droit réservé - OFPPT 58  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Les tableaux Espacement ses cellules L’attribut "cellspacing" permet de définir l'espacement entre les cellules du tableau. l'attribut "cellpadding" permet de définir l'espacement entre le contenu de la cellule et ses bords. Exemple : cellspacin g cellpaddin g PARTI E1 Figure 20 : Espacement des cellules du tableau Copyright - Tout droit réservé - OFPPT 59  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Les tableaux Division des lignes et des colonnes (fusion des cellules) Les attributs colspan et rowspan indiquent sur combien de colonnes et de lignes s'étend la cellule Exemple : On souhaite que la première cellule du tableau prenne toute la largeur de la ligne. Elle doit donc déborder sur 3 cellules horizontales. Figure 21 : Exemple de tableau avec fusion des colonnes cellule 1 cellule 1 cel 2 3 PARTI E1 Colspan=3 signifie que la cellule prendra la place de 3 autres cellules sur 3 colonnes. Copyright - Tout droit réservé - OFPPT 60  CHAPITRE 3 DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML 1. Normes W3C 2. Squelette d’une page HTML 3. Balises de bases (contenu) 4. Les couleurs 5. Listes en HTML 6. Liens en HTML 7. Balises multimédia (images, audio, vidéo) 8. Tableaux avec du HTML 9. Balises de structuration  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Balises de structuration Les balises La balise HTML (ou division) est un conteneur générique : elle peut contenir n’importe quel élément HTML. Cet élément, de type bloc, n'a aucun effet sur le contenu ou la mise en page tant qu'il n'est pas mis en forme d'une manière explicite (en utilisant un style CSS). est très souvent utilisé avec la mise en page CSS d'une page Web. La balise La balise ne produit aucun effet visuel mais sert à appliquer un effet de style CCS aux éléments qu’elle contient (un texte par exmeple). PARTI E1 Copyright - Tout droit réservé - OFPPT 62  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Balises de structuration Les balises sémantiques Une page web est souvent composée d'un menu, d'une sidebarre et d'un pied de page. Tous ces ensembles peuvent (et doivent) être compris dans des balises qui vont structurer la page. Un élément sémantique décrit clairement son sens au navigateur et au développeur. Des exemples d'éléments non-sémantiques: et - ne disent rien sur leur contenu. Des exemples d'éléments sémantiques: , et - contenu clairement défini. PARTI E1 Copyright - Tout droit réservé - OFPPT 63  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Balises de structuration Les balises sémantiques Plusieurs sites Web utilisent les balises comme : , , ou , pour indiquer les liens de navigation, en-tête, pied de page. HTML5 propose des éléments sémantiques permettant de définir clairement les différentes parties d'une page web : / / PARTI Figure 22 : Les éléments sémantiques E1 Copyright - Tout droit réservé - OFPPT 64  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Balises de structuration Les balises et Une page est généralement composée d'un header et d'un footer. Le header peut comprendre (liste non exhaustive) : un menu, un logo, des liens vers des réseaux sociaux, … Exemple : Le footer reprend en général des liens vers les crédits et les mentions légales, et aussi vers certaines pages qui ne sont pas listées dans le menu : PARTI E1 Copyright - Tout droit réservé - OFPPT 65  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Balises de structuration La balise La balise (utilisée avec une balise ou ) permet de spécifier les éléments de navigation de la page (le menu). Le menu consiste en une liste d'éléments permettant de naviger entre plusieurs pages du même site, ou bien vers plusieurs sections de la page. Exemple : Accueil Inscription À propos Contact PARTI E1 Copyright - Tout droit réservé - OFPPT 66  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Balises de structuration Les balises et La balise spécifie le contenu principal de la page web. La balise permet de segmenter le contenu en plusieurs sections. Exemple : Texte d'introduction de mon contenu. Titre de ma section Texte de ma section. Titre de ma section Texte de ma section. PARTI E1 Copyright - Tout droit réservé - OFPPT 67  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Balises de structuration La balise La balise permet d'incorporer du contenu annexe, comme par exemple : des articles de blog, des produits, des commentaires, … Exemple : Texte de mon contenu. Voilà des articles liés à ma page : Titre de mon article Texte de mon article. PARTI Titre de mon article E1 Texte de mon article. Copyright - Tout droit réservé - OFPPT 68  03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE PAGE HTML Balises de structuration La balise La balise permet d'afficher du contenu qui n'a pas de rapport direct avec le contenu principal, souvent représenté comme une sidebarre : Exemple : Texte de mon contenu. Texte sans rapport direct. PARTI E1 Copyright - Tout droit réservé - OFPPT 69  PARTIE 2 Implémenter une page web statique Dans ce module, vous allez : Avoir une connaissance exacte du fonctionnement d’une page web statique Réaliser correctement un site web statique Intégration appropriée d’un formulaire dans une page web 20 heures  CHAPITRE 1 RÉALISER UNE PAGE WEB STATIQUE Ce que vous allez apprendre dans ce chapitre : Comprendre le fonctionnement d’une page web statique Réaliser un site web statique avec HTML5 2 heures  CHAPITRE 1 RÉALISER UNE PAGE WEB STATIQUE 1. Fonctionnement d’une page web statique 2. Réalisation d’un site web statique avec HTML5  01- Fonctionnement d'une page web statique Fonctionnement d’une page web Fonctionnement d’une page web Reprenons le schéma présenté dans la partie 1 (slide 14) : Lors de la consultation d'une page web statique, le serveur HTTP envoie le contenu du fichier qui contient les composants de la page à afficher. Le navigateur interprète le contenu (sous forme de balises HTML) et l’affiche au client. PARTI E2 Copyright - Tout droit réservé - OFPPT 73  CHAPITRE 1 RÉALISER UNE PAGE WEB STATIQUE 1. Fonctionnement d’une page web statique 2. Réalisation d’un site web statique avec HTML5  01- Réalisation d’un site web statique Réalisation d’un site web statique avec HTML5 En HTML, Il existe cinq façons différentes de créer des dispositions des éléments : Tableaux HTML (non recommandé) Propriété float CSS (méthode ancienne) Flexbox CSS Framework CSS (W3.CSS ou Bootstrap) Grille CSS Le Responsive Web Design consiste à utiliser HTML et CSS pour redimensionner, masquer, rétrécir ou agrandir automatiquement un site Web afin de le rendre compatible à tous les appareils (ordinateurs de bureau, tablettes et téléphones) PARTI E2 Copyright - Tout droit réservé - OFPPT 75  01- Réalisation d’un site web statique Réalisation d’un site web statique avec HTML5 Exemple : Afficher différentes images en fonction de la largeur du navigateur NB : n’oubliez pas de mettre la balise suivante dans la balise PARTI E2 Copyright - Tout droit réservé - OFPPT 76  01- Réalisation d’un site web statique Réalisation d’un site web statique avec HTML5 Exemple : Taille du texte réactif La taille du texte peut être définie avec une unité "vw", ce qui signifie la "largeur de la fenêtre". De cette façon, la taille du texte suivra la taille de la fenêtre du navigateur : Hello World C’est un pourcentage PARTI E2 Copyright - Tout droit réservé - OFPPT 77  CHAPITRE 2 INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Ce que vous allez apprendre dans ce chapitre : Créer des formulaires HTML Gérer les paramètres d’envoi des données 18 heures  CHAPITRE 2 INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB 1. Balise 2. Champs de saisie (Input, TextArea) 3. Balises de choix (RadioButton, CheckBox, Select) 4. Balises HTML5 pour les formulaires 5. Validation automatique 6. Boutons  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Balise Balise Un formulaire est une section d'un document web qui permet à un utilisateur de fournir des informations via des contrôles interactifs L'élément HTML permet de déclarer un formulaire L'attribut "action" spécifie la ressource qui va recevoir les données du formulaire pour les traiter (un script). L'attribut "method" spécifie la méthode d'envoi des données. On distingue deux méthodes : GET : permet d'envoyer les données sous forme de chaine de paramètres à travers l'URL. Les données sont visibles dans la barre d'adresse. POST : permet d'envoyer les données (invisibles) à travers une requête HTTP. Exemple : PARTI E2 Copyright - Tout droit réservé - OFPPT 80  CHAPITRE 2 INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB 1. Balise 2. Champs de saisie (Input, TextArea) 3. Balises de choix (RadioButton, CheckBox, Select) 4. Balises HTML5 pour les formulaires 5. Validation automatique 6. Boutons  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Champs de saisie Champ de saisie L'élément Permet de coder différents types d'entrée pour un formulaire, selon la valeur de l'attribut type. Exemple : Types d’Input HTML PARTI type="password"> E2 Copyright - Tout droit réservé - OFPPT 82  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Champs de saisie Champ de saisie Pour retourner à la ligne Type texte First name : Last name : Figure 23 : Champ input Type password Username : PARTI Password : E2 Figure 24 : Champ de mot de passe Copyright - Tout droit réservé - OFPPT 83  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Champs de saisie Champ de saisie L'éléments permet d'afficher et saisir un texte en plusieurs ligne. Exemple : L'Office de la formation professionnelle et de la promotion du travail (OFPPT) est un opérateur public en formation professionnelle. Figure 25 : Champ textarea PARTI E2 Copyright - Tout droit réservé - OFPPT 84  CHAPITRE 2 INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB 1. Balise 2. Champs de saisie (Input, TextArea) 3. Balises de choix (RadioButton, CheckBox, Select) 4. Balises HTML5 pour les formulaires 5. Validation automatique 6. Boutons  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Balises de choix (RadioButton) Type radio Les boutons radio permettent à un utilisateur d’en sélectionner SEULEMENT UN parmi un nombre limité de choix : Masculin Féminin Figure 26 : Champ bouton radio Type number Quantité : Figure 27 : Champ number E2 Copyright - Tout droit réservé - OFPPT 86  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Balises de choix (CheckBox) Type checkbox définit une case à cocher. Les cases à cocher permettent à un utilisateur de sélectionner ZERO ou PLUS d'options d'un nombre limité de choix. J'ai un vélo J’ai un vélo J’ai une J'ai une voiture voiture J’ai un J'ai un bateau bateau Figure 28 : Champ Checkbox PARTI E2 Copyright - Tout droit réservé - OFPPT 87  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Balises de choix (select) Type select L'élément HTML représente un contrôle qui fournit un menu d'options : L’attribut id associe un identifiant unique à la liste L’attribut name représente le nom du point de données associé lors de la soumission au serveur. L’attribut multiple spécifie si plusieurs options peuvent être sélectionnées, et size spécifie combien d'options doivent être affichées à la fois. L’élément définit une option de la liste. Chaque élément doit avoir un attribut value contenant la valeur de données à soumettre au serveur lorsque cette option est sélectionnée. L’attribut selected sur un élément le rend sélectionné par défaut lors du premier chargement de la page. Sélectionner un langage de programmation: --Choisir - Python C# PARTI java E2 Copyright - Tout droit réservé - OFPPT 88  CHAPITRE 2 INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB 1. Balise 2. Champs de saisie (Input, TextArea) 3. Balises de choix (RadioButton, CheckBox, Select) 4. Balises HTML5 pour les formulaires 5. Validation automatique 6. Boutons  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Balises HTML5 pour les formulaires Type button définit un bouton : Type color Select your favorite color : Type date Birthday : PARTI E2 Copyright - Tout droit réservé - OFPPT 90  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Balises HTML5 pour les formulaires Type datetime-local Le spécifie un champ de saisie de date et d'heure sans fuseau horaire. Birthday (date and time) : Type email Essentiellement utilisé pour bénéficier de la possibilité de validation d'Email et de voir les boutons raccourcis d'un clavier spécifique si on utilise la page web sur un smartphone. Enter your email : PARTI E2 Copyright - Tout droit réservé - OFPPT 91  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Balises HTML5 pour les formulaires Type file Le définit un champ de sélection de fichier et un bouton « Parcourir » pour les téléchargements de fichiers. Select a file : Type month Birthday (month and year) : Type tel Le est utilisé pour les champs de saisie qui doivent contenir un numéro de téléphone. PARTI Enter your phone number : E2 Copyright - Tout droit réservé - OFPPT 92  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Balises HTML5 pour les formulaires Type time Select a time : Type url Le est utilisé pour les champs de saisie qui doivent contenir une adresse URL. Add your homepage : Type week PARTI Select a week : E2 Copyright - Tout droit réservé - OFPPT 93  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Balises HTML5 pour les formulaires Type range Le définit un contrôle pour entrer un nombre dont la valeur exacte n'est pas importante (comme un contrôle curseur). Plage par défaut est de 0 à 100. Volume (between 0 and 50) : Type search Search Google : PARTI E2 Copyright - Tout droit réservé - OFPPT 94  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Balises HTML5 pour les formulaires L'attribut value L'attribut value spécifie une valeur initiale pour un champ d'entrée. First name : Last name : L'attribut readonly L'attribut readonly spécifie qu'un champ d'entrée est en lecture seule. First name : PARTI Last name : E2 Copyright - Tout droit réservé - OFPPT 95  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Balises HTML5 pour les formulaires L'attribut maxlength L'attribut maxlength spécifie le nombre maximum de caractères autorisés. First name : PIN : L'attribut multiple L'attribut multiple spécifie que l'utilisateur est autorisé à saisir plusieurs valeurs. Il fonctionne avec les types d'entrée suivants : e-mail et fichier. Select files : PARTI E2 Copyright - Tout droit réservé - OFPPT 96  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Balises HTML5 pour les formulaires L'attribut pattern L'attribut pattern spécifie une expression régulière par rapport à laquelle la valeur du champ de saisie est vérifiée lorsque le formulaire est soumis. L'attribut pattern fonctionne avec les types d'entrée suivants : texte, date, recherche, URL, tél, e-mail et mot de passe. Country code : L'attribut placeholder L'attribut placeholder spécifie brièvement un indice qui décrit la valeur attendue d'un champ de saisie (une valeur d'échantillon ou une brève description du format attendu). L'attribut placeholder fonctionne avec les types d'entrée suivants : texte, recherche, URL, tél, e-mail et mot de passe. Enter a phone number : PARTI Copyright - Tout droit réservé - OFPPT 97  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Balises HTML5 pour les formulaires L'attribut required L'attribut required spécifie qu'un champ de saisie doit être rempli avant de soumettre le formulaire. L'attribut required fonctionne avec les types d'entrée suivants : texte, recherche, URL, tél, e-mail, mot de passe, sélecteurs de date, numéro, case à cocher, radio et fichier. Username : L'attribut step L'attribut step spécifie les intervalles de numéros légaux pour un champ de saisie. Exemple : si step = "3", les nombres légaux peuvent être -3, 0, 3, 6, etc. L'attribut step fonctionne avec les types d'entrée suivants : nombre, plage, date, datetime-local, mois, heure et semaine. PARTI E2 Points : Copyright - Tout droit réservé - OFPPT 98  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Balises HTML5 pour les formulaires L'attribut autofocus L'attribut autofocus spécifie qu'un champ de saisie doit automatiquement obtenir le focus lorsque la page est chargée. First name : Last name : L'attribut list L'attribut list fait référence à un élément qui contient des options prédéfinies pour un élément. PARTI E2 Copyright - Tout droit réservé - OFPPT 99  CHAPITRE 2 INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB 1. Balise 2. Champs de saisie (Input, TextArea) 3. Balises de choix (RadioButton, CheckBox, Select) 4. Balises HTML5 pour les formulaires 5. Validation automatique 6. Boutons  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Validation automatique Types de validation des formulaires HTML La validation d’un formulaire consiste à vérifier si les données saisies par l’utilisateur sont correctes et conformes au fonctionnement attendu. Si ce n'est pas le cas, la page doit émettre des messages d'erreur. Exemples de critères de validation : champ de saisi obligatoire, format de l’email ou du numéro de téléphone correct, taille et format d’un champ de mot de passe (nombre de caractères, présence d’un caractère spécial, lettre majuscule, …) Les types de validation : La validation côté client : effectuée au niveau du navigateur, avant de soumettre les données au serveur. Cette validation peut être mise en œuvre de deux manières : La validation JavaScript La validation par les fonctions intégrées dans HTML5. PARTI La validation côté serveur : opérée sur le serveur, après soumission des données ont été soumises et avant l’enregistrement des données dans la base de données. E2 Copyright - Tout droit réservé - OFPPT 101  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Validation automatique Validation des formulaires par les fonctions intégrées dans HTML5 1. Utilisation de l’attribut required : rendre une entrée obligatoire et empêcher la soumission du formulaire si l’entrée est vide. 2. Validation selon une expression régulière avec l’attribut pattern : utile pour valider le numéro de téléphone par exemple 3. Limitation de la taille des entrées avec les attributs minlength et maxlength (pour les champs input et textarea) et les attributs min et max pour le champ number 4. L’attribut Novalidate du formulaire (lorsqu'il est présent) précise que les données du form ne doivent pas être validées lors de son envoi PARTI E2 Copyright - Tout droit réservé - OFPPT 102  CHAPITRE 2 INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB 1. Balise 2. Champs de saisie (Input, TextArea) 3. Balises de choix (RadioButton, CheckBox, Select) 4. Balises HTML5 pour les formulaires 5. Validation automatique 6. Boutons  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Boutons Type submit définit un bouton pour soumettre des données de formulaire à un gestionnaire de formulaire. Le gestionnaire de formulaires est généralement une page de serveur avec un script pour le traitement des données d'entrée. First name : Last name : Figure 29 : Bouton Submit PARTI E2 Copyright - Tout droit réservé - OFPPT 104  02- INTÉGRER DES FORMULAIRES DANS UNE PAGE WEB Boutons Type reset définit un bouton de réinitialisation qui réinitialisera toutes les valeurs du formulaire à leurs valeurs par défaut. First name : Last name : Figure 30 : Bouton reset PARTI E2 Copyright - Tout droit réservé - OFPPT 105  PARTIE 3 Mettre en forme une page web avec les feuilles de style CSS Dans ce module, vous allez : Maitriser le CSS pour la mise en forme d’une page web Utiliser correctement des positionnements pour l’organisation d’une page web avec CSS Ajouter des animations Adapter des templates HTML/CSS à un site web statique 30 heures  CHAPITRE 1 INTRODUIRE LE CSS Ce que vous allez apprendre dans ce chapitre : Présenter les éléments CSS Gérer les types d’intégration du CSS Utiliser les différents CSS 10 heures  CHAPITRE 1 INTRODUIRE LE CSS 1. Présentation du CSS 2. Codification des couleurs 3. Unités de mesure 4. Positions (center, left, right) 5. Fonts 6. Types d’intégration du CSS 7. Sélecteurs simples (element, class, id) 8. Sélecteurs complexes 9. Pseudo classes  01- INTRODUIRE LE CSS Présentation du CSS (Cascading Style Sheets) Application d’un style à un code HTML Il existe 3 manières pour introduire le style à une balise donnée : Dans une balise, avec l'attribut style Dans l'en-tête, après la balise title (dans la partie head) Dans un fichier d’extension.css La troisième méthode, basée sur l’utilisation du langage CSS dans un fichier séparé, est la technique recommandée PARTI E3 Copyright - Tout droit réservé - OFPPT 109  01- INTRODUIRE LE CSS Présentation du CSS (Cascading Style Sheets) Présentation du CSS Le langage CSS (Cascading Style Sheets) est destiné à gérer le contenu et la structure d’une page web. CSS permet de gérer la mise en forme du contenu d’une page : le texte (couleur, taille, casse, etc.), les images, les tableaux, les formulaires, etc. CSS permet également de dimensionner et positionner les éléments dans la page web CSS est utilisé aussi pour gérer les animations. Figure 31 : Logo du CSS PARTI E3 Copyright - Tout droit réservé - OFPPT 110  01- INTRODUIRE LE CSS Présentation du CSS (la syntaxe de CSS) Syntaxe du CSS Une déclaration CSS a la forme suivante : Le sélecteur est un élément clé qui C’est l’ensemble de paramètres de mise en indique sur quels éléments HTML forme à appliquer sur l’élément identifié par vont s’appliquer les propriétés CSS le sélecteur. définies entre { } Chaque propriété de mise en forme est suivie de deux points et de sa valeur. Exemple de propriétés : la couleur, la taille, le style, etc. Exemple : PARTI E3 Dans cet exemple, on spécifie la couleur rouge comme couleur par défaut de tous les éléments h1. Copyright - Tout droit réservé - OFPPT 111  CHAPITRE 1 INTRODUIRE LE CSS 1. Présentation du CSS 2. Codification des couleurs 3. Unités de mesure 4. Positions (center, left, right) 5. Fonts 6. Types d’intégration du CSS 7. Sélecteurs simples (element, class, id) 8. Sélecteurs complexes 9. Pseudo classes  01- INTRODUIRE LE CSS Codification des couleurs Codification des couleurs (Rappel) Les navigateurs admettent 3 méthodes possibles pour la déclaration d'une couleur : Méthode Exemple Notes Couleurs La couleur est désignée par son nom en anglais. background-color : grey nommées Il n'y a que 16 noms de couleurs normalisés par le W3C La couleur est désignée par son code hexadécimal : les deux premiers Couleurs en background-color : #808080 digits correspondent à la valeur de rouge, les deux suivants le vert et les hexadécimal deux derniers le bleu PARTI La couleur est définie par trois nombres décimaux qui peuvent prendre les Couleurs background-color : RGB( 128,128,128 ) valeurs de 0 à 255 indiquant respectivement le taux de rouge, le taux de décomposées E3 vert et le taux de bleu. Copyright - Tout droit réservé - OFPPT 113  CHAPITRE 1 INTRODUIRE LE CSS 1. Présentation du CSS 2. Codification des couleurs 3. Unités de mesure 4. Positions (center, left, right) 5. Fonts 6. Types d’intégration du CSS 7. Sélecteurs simples (élément, class, id) 8. Sélecteurs complexes 9. Pseudo classes  01- INTRODUIRE LE CSS Unités de mesure Les unités absolues Les unités absolues ne sont influencées par aucune autre dimension. Elles sont utilisées pour exprimer une longueur, comme un padding, une hauteur de bloc, la taille des caractères, etc. Les unités absolues sont les suivantes : Les pixels (px) Les pouces (in) Les centimètres (cm) div { Les millimètres (mm) width : 150px ; Les picas (pc) height : 150px ; } Les points (pt) Le pixel et le point sont les unités les plus utilisées. PARTI Relation entre les unités de mesure : 1 in = 96 px, 1 cm = 37,8 px et 1 mm = 3,78 px. E3 Copyright - Tout droit réservé - OFPPT 115  01- INTRODUIRE LE CSS Unités de mesure Les unités relatives au texte Les unités relatives font varier la taille d’un élément en fonction de la taille de la police ou de l’élément parent. Les unités dites « relatives au texte » sont utilisées pour harmoniser les éléments d’un design. Ces unités sont les suivantes: Em : proportionnelle à la taille de la police de l’élément parent ou du document. Par défaut, 1 em = 16 px si aucune taille de police n’est définie. Rem : fait toujours référence à la taille de la police de l’élément racine. Elle dépend du font-size définit par défaut. Ex : relative à la hauteur de la police actuelle en minuscule (très rarement utilisée). Ch : relative à la largeur du caractère “0” (peu utilisée). PARTI E3 Copyright - Tout droit réservé - OFPPT 116  01- INTRODUIRE LE CSS Unités de mesure Les unités relatives au viewport Les unités relatives au viewport permettent aux éléments de s’adapter à la taille de la fenêtre du navigateur. Elle sont essentielles pour mettre en place un design responsive : La hauteur du viewport (vh) La largeur du viewport (vw) Le viewport minimum (vmin) Le viewport maximum (vmax) PARTI E3 Copyright - Tout droit réservé - OFPPT 117  CHAPITRE 1 INTRODUIRE LE CSS 1. Présentation du CSS 2. Codification des couleurs 3. Unités de mesure 4. Positions (center, left, right) 5. Fonts 6. Types d’intégration du CSS 7. Sélecteurs simples (élément, class, id) 8. Sélecteurs complexes 9. Pseudo classes  01- INTRODUIRE LE CSS Positions Alignement du texte La propriété text-align est utilisée pour définir l'alignement horizontal d'un texte. Un texte peut être aligné à gauche ou à droite, centré ou justifié. l'alignement à gauche est par défaut si la direction du texte est de gauche à droite, et l'alignement à droite est par défaut si la direction du texte est de droite à gauche L'exemple suivant montre le texte aligné au centre et aligné à gauche et à droite : h1 { text-align : center; } h2 { text-align : left; } h3 { text-align : right; } PARTI E3 Copyright - Tout droit réservé - OFPPT 119  01- INTRODUIRE LE CSS Positions Alignement du texte Lorsque la propriété text-align est définie sur la valeur "justify", toutes les lignes sont étirées de manière à avoir la même largeur et les marges gauche et droite sont droites (texte justifié): div { text-align : justify; } PARTI E3 Copyright - Tout droit réservé - OFPPT 120  01- INTRODUIRE LE CSS Positions Orientation du texte Les propriétés direction et unicode-bidi sont utilisées pour changer la direction du texte d'un élément : p{ direction : rtl; unicode-bidi : bidi-override; } PARTI E3 Copyright - Tout droit réservé - OFPPT 121  01- INTRODUIRE LE CSS Positions Alignement vertical La propriété vertical-align définit l'alignement vertical d'un élément. img.a { vertical-align : baseline; } img.b { vertical-align : text-top; } img.c { vertical-align : text-bottom; } img.d { vertical-align : sub; } img.e { PARTI vertical-align : super; } E3 Copyright - Tout droit réservé - OFPPT 122  CHAPITRE 1 INTRODUIRE LE CSS 1. Présentation du CSS 2. Codification des couleurs 3. Unités de mesure 4. Positions (center, left, right) 5. Fonts 6. Type d’intégration CSS 7. Sélecteurs simples (élément, class, id) 8. Sélecteurs complexes 9. Pseudo classes  01- INTRODUIRE LE CSS Fonts Propriétés du texte en CSS3 Taille du texte : font-size Peut être spécifiée de 4 manières : En pixels : ou en mm, cm. En valeur relative : xx-small, x-small, small, medium, large, x-large xx-large. En em : par exemple, 1em signifie "Taille normale", 1.3em signifie un texte de taille 1,3 fois plus grande, 0.8em signifie que votre texte aura une taille 0,8 fois plus petite. En % : par exemple, 100% : le texte aura une taille "normale", 130% : le texte aura une taille correspondant à 130% de la taille normale Exemple : p{ font-size : 16px; } PARTI E3 Copyright - Tout droit réservé - OFPPT 124  01- INTRODUIRE LE CSS Fonts Propriétés du texte en CSS3 Type de la police: font-family C’est une suite de noms de polices. Cinq familles sont distinguées : serif (Times, etc.), sans-serif (Arial, Helvetica, etc.), cursive, monospace, Fantasy. Les polices sont associées de préférence « en pile ». Dans l’exemple suivant, si le visiteur du site n’a pas la police Helvetica Neue sur sa machine, on passe automatiquement à la suivante et ainsi de suite. p { font-family:'Helvetica Neue',Helvetica,sans-serif; } @font-face { font-family: 'newFont'; src: url('PARCHM.ttf'); } Règle @font-face : permet d’importer un font (extension.ttf) p PARTI { font-family:'newFont'; E3 } Copyright - Tout droit réservé - OFPPT 125  CHAPITRE 1 INTRODUIRE LE CSS 1. Présentation du CSS 2. Codification des couleurs 3. Unités de mesure 4. Positions (center, left, right) 5. Fonts 6. Types d’intégration du CSS 7. Sélecteurs simples (élément, class, id) 8. Sélecteurs complexes 9. Pseudo classes  01- INTRODUIRE LE CSS Types d'intégration Dans la même page HTML Pour intégrer une feuilles de style CSS dans une page HTML, il faut placer le code CSS dans la balise. Exemple : #myDiv1{ width : 100px; height : 100px; border : 1px solid red; background-color : yellow; } PARTI E3 Copyright - Tout droit réservé - OFPPT 127  01- INTRODUIRE LE CSS Types d'intégration Dans un fichier externe La balise permet d’intégrer une feuilles de style CSS dans une page HTML. La balise doit être placée dans la balise. Exemple : Style.css index.html #myDiv1{ width : 100px; height : 100px; border : 1px solid red; background-color : yellow; } PARTI E3 Copyright - Tout droit réservé - OFPPT 128  CHAPITRE 1 INTRODUIRE LE CSS 1. Présentation du CSS 2. Codification des couleurs 3. Unités de mesure 4. Positions (center, left, right) 5. Fonts 6. Types d’intégration du CSS 7. Sélecteurs simples (élément, class, id) 8. Sélecteurs complexes 9. Pseudo classes  01- INTRODUIRE LE CSS Les sélecteurs simples Les sélecteurs de type Ce sélecteur permet de cibler les éléments qui correspondent au nom indiqué. (nom de la balise) Exemple : Le sélecteur "div" permet de sélectionner tous les éléments "div" de la page web et leur appliquer le style. div { background-color : yellow; } PARTI E3 Copyright - Tout droit réservé - OFPPT 130  01- INTRODUIRE LE CSS Les sélecteurs simples Les sélecteurs de classe "." Ce sélecteur de type « class » permet de cibler les éléments en fonction de la valeur de leur attribut class. Exemple : NomprénomAge MANSOURIHassan23 SAFIRLaila22 BICHRIKarim21 HAMIMmohamed24 Nom Prénom Age MANSOU Hassan 23 Le code CSS suivant signifie que tous les éléments qui appartiennent à la classe "impaire" auront un arrière-plan jaune claire. RI.impaire{ SAFIR Laila 22 PARTI background-color : rgba(255, 255, 0, 0.2); } BICHRI Karim 21 E3 HAMIM Mohame 24 d Figure 32: Exemple de classe CSS Copyright - Tout droit réservé - OFPPT 131  01- INTRODUIRE LE CSS Les sélecteurs simples Les sélecteurs d'identifiant "#" Le sélecteur de type identifiant permet de cibler un élément d'un document en fonction de la valeur de son attribut id. Dans un document, il ne doit y avoir qu'un seul élément pour un identifiant donné. Exemple : NomprénomAge MANSOURIHassan23 SAFIRLaila22 Nom Prénom Age BICHRIKarim21 MANSOU Hassan 23 RI HAMIMmohamed24 SAFIR Laila 22 Le code CSS suivant signifie que l'élément de id="sel" aura un arrière plan jaune. BICHRI Karim 21 PARTI #sel{ HAMIM Mohame 24 background-color : rgba(255, 255, 0, 0.2); d E3 } Figure 33: Exemple de ID CSS Copyright - Tout droit réservé - OFPPT 132  CHAPITRE 1 INTRODUIRE LE CSS 1. Présentation du CSS 2. Codification des couleurs 3. Unités de mesure 4. Positions (center, left, right) 5. Fonts 6. Types d’intégration du CSS 7. Sélecteurs simples (élément, class, id) 8. Sélecteurs complexes 9. Pseudo classes  01- INTRODUIRE LE CSS Les sélecteurs complexes Le sélecteur universel "*" Ce sélecteur permet de cibler tous les nœuds d'un document. Exemple : le code suivant permet de colorier tous les textes du document en marron. *{ color : brown; } PARTI E3 Copyright - Tout droit réservé - OFPPT 134  01- INTRODUIRE LE CSS Les sélecteurs complexes Les sélecteurs d'attribut "[ ]" Ce sélecteur permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs. [attr] : cible un élément qui possède un attribut attr. [attr=valeur] : cible un élément qui possède un attribut attr dont la valeur est exactement valeur. [attr~=valeur] : cible un élément qui possède un attribut attr dont la valeur est égale à la valeurs spécifiée. [attr|=valeur] : cible un élément qui possède un attribut attr dont la valeur est exactement égale à valeur ou dont la valeur commence par valeur suivi immédiatement d'un tiret. [attr^=valeur] : cible un élément qui possède un attribut attr dont la valeur commence par valeur. [attr$=valeur] : cible un élément qui possède un attribut attr dont la valeur se termine par valeur. PARTI [attr*=valeur] : cible un élément qui possède un attribut attr et dont la valeur contient au moins une occurrence de valeur dans la E3 chaine de caractères. Copyright - Tout droit réservé - OFPPT 135  01- INTRODUIRE LE CSS Les sélecteurs complexes Les sélecteurs d'attribut "[ ]" Exemple : a[title] { color : purple; } a[href="https ://example.org"] { color : green; } a[href*="example"] { font-size : 2em; } a[href$=".org"] { font-style : italic; } a[class~="logo"] { padding : 2px; } PARTI E3