Résumé théorique - Développement web statique - OFPPT - PDF

RÉSUMÉ THÉORIQUE – FILIÈRE DÉVELOPPEMENT DIGITAL M104 - DÉVELOPPER DES SITES WEB STATIQUES 100 heures  1. Créer une page web en HTML Introduction au langage HTML SOMMAIRE Utiliser l'environnement de développement Défi...

RÉSUMÉ THÉORIQUE – FILIÈRE DÉVELOPPEMENT DIGITAL M104 - DÉVELOPPER DES SITES WEB STATIQUES 100 heures  1. Créer une page web en HTML Introduction au langage HTML SOMMAIRE Utiliser l'environnement de développement Définir des éléments basiques d'une page HTML 2. Implémenter une page web statique Réaliser une page web statique Intégrer des formulaires dans une page web 3. 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 4. Maîtriser Bootstrap Intégrer Bootstrap Maitriser les classes CSS de base Utiliser les composants Bootstrap 5. 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 PDF DES CONTENUS DU CONTENU DES RESSOURCES SOUTIEN Une version PDF TÉLÉCHARGEABLES INTERACTIF EN LIGNES Il contient le est mise en ligne Les fiches de Vous disposez de Les ressources sont résumé théorique sur l’espace résumés ou des contenus consultables en et le manuel des apprenant et exercices sont interactifs sous synchrone et en travaux pratiques formateur de la téléchargeables forme d’exercices asynchrone pour plateforme sur WebForce Life et de cours à s’adapter au WebForce Life utiliser sur rythme de WebForce 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 02 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 hypertexte (hyperliens) et accessibles via un navigateur. Les ressources du web correspondent aux entités informatiques comme le texte, les images, 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 machines (ordinateurs) qui stockent et transmettent des documents à d'autres ordinateurs sur le réseau Les clients sont aussi des machines, sur lesquelles sont installés des programmes qui demandent des documents à un serveur PARTIE 1 Le navigateur est le logiciel qui permet aux utilisateurs de visualiser les documents récupérés. Parmi les navigateurs les plus utilisés on cite : Google Chrome, Internet Explorer, Mozilla Firefox, Opera… Figure 1 : les navigateurs les plus utilisés http://home.cern/fr/science/computing/birth-web Copyright - Tout droit réservé - OFPPT 7  01 - Introduction au langage HTML Historique de l’HTML Le web a connu une grande évolution depuis son apparition : 1989 1990 1991 1996 Invention du Robert Cailliau et Lancement du Publication du “World Wide Web” Tim Berners-Lee 1er site web langage CSS (Tim Berners-Lee) développent le HTML Objectif : s'échanger des informations instantanément 2015 2010 mi 2005 1998 Déploiement de Apparition du Adaptation Lancement PARTIE 1 la mise à jour terme du mobile officel de Google «mobile- “responsive Web friendly» par Design” Google Source : https://www.wddonline.com/2016/09/27/history-world-wide-web/ Copyright - Tout droit réservé - OFPPT 8  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). HTML 5 (2007 à nos jours) : la dernière version du HTML. Figure 2 : Logo du langage HTML5 PARTIE 1 Copyright - Tout droit réservé - OFPPT 9  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 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 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. Figure 3 : logo du W3C PARTIE 1 https://www.w3.org/ https://www.w3.org/Consortium/mission#principles Copyright - Tout droit réservé - OFPPT 11  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 contient l'adresse IP du serveur, le port sur lequel tourne le serveur Web, la ressource demandée et la méthode avec laquelle on exploite cette ressource. Le navigateur reçoit la page web demandée sous forme de code appelé : Figure 4 : Communication client-serveur web en HTTP PARTIE 1 "code HTML" et l'interprète pour afficher des objets visuels. https://delmas-rigoutsos.nom.fr/documents/YDelmas-ArchiWeb/YDelmas-ArchiWeb.html Copyright - Tout droit réservé - OFPPT 13  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 01 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 développé par Microsoft. Il fonctionne sous différents systèmes : Windows, Linus, Mac OS. VS Code permet l’édition, la correction, le débogage et l’exécution 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 5 : Logo du logiciel VS Code PARTIE 1 https://code.visualstudio.com/ Copyright - Tout droit réservé - OFPPT 16  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 PARTIE 1 Explorateur des fichiers Figure 6 : Environnement de travail de VS Code Copyright - Tout droit réservé - OFPPT 17  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 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 : Cette extension permet d'identifier la correspondance entre des caractères et des couleurs. Better Comments : donne la possibilité de personnaliser la police et l'opacité des commentaires Snippets : Un snippet est un modèle qui peut être inséré dans un document. Il est inséré par une commande ou par un texte déclencheur. CSS Peak : Permet de visualiser les ID et les classes CSS dans les fichiers html à partir des fichiers CSS respectifs GitLens : permet de découvrir rapidement qui, pourquoi et quand une ligne ou un bloc de code a été modifié. Autrement dit, permet de remontez dans l'histoire pour mieux comprendre comment et pourquoi le code a évolué. PARTIE 1 https://marketplace.visualstudio.com/VSCode Copyright - Tout droit réservé - OFPPT 19  02 - Utiliser l’environnement de développement pour produire du HTML Utilisation des extensions VS Code Écrivez un mot clé et taper "Entrer" pour voir les extensions disponibles PARTIE 1 Figure 7 : Installation des extensions dans VS Code Copyright - Tout droit réservé - OFPPT 20  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. Types de chemin d’accès 7. Liens en HTML 8. Balises multimédia (images, audio, vidéo) 9. Tableaux en HTML 10. 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 des balises doivent être indiqués Validation du code HTML avec W3C Validator : http://validator.w3.org/ PARTIE 1 Copyright - Tout droit réservé - OFPPT 23  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. Types de chemin d’accès 7. Liens en HTML 8. Balises multimédia (images, audio, vidéo) 9. Tableaux en HTML 10. 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 PARTIE 1 Figure 8 : Structure minimale d’un document html Copyright - Tout droit réservé - OFPPT 25  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 PARTIE 1 Figure 9 : Forme d’une balise 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 d’encapsulation Les balises doivent être correctement encapsulées : Paragraphe Paragraphe Exemple 1 : Code correct Exemple 2 : Code incorrect div div racine titre h1 un sous titre un paragraphe avec h2 des mots importants h1 h2 p nœud pour terminer avec une image p PARTIE 1 em img em img feuille Exemple 3 : Code correct Figure 10 : Encapsulation des balises HTML Copyright - Tout droit réservé - OFPPT 27  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 Figure 12 : Exemples d’éléments « inline » PARTIE 1 div Figure 11 : Exemples d’éléments « bloc » 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 Éléments de niveau bloc en HTML : - < H6> Éléments de niveau inline en HTML : PARTIE 1 Copyright - Tout droit réservé - OFPPT 29  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. Types de chemin d’accès 7. Liens en HTML 8. Balises multimédia (images, audio, vidéo) 9. Tableaux en HTML 10. Balises de structuration  03 - Définir les éléments basiques d’une page HTML Balises de base Rappel: