Лист за преговор: Introduction au Web et HTML

📋 Plan du Cours

1. Organisation et modalités du cours INFO401 Web et bases de données
2. Introduction au web : pages web, fichiers HTML et rôle du navigateur
3. Notion de client/serveur et fonctionnement d’Internet et du Web
4. Historique et évolution du Web et des standards HTML
5. Structure et rôle des URL, résolution DNS et interaction client-serveur
6. Création et lecture de pages web avec éditeur de texte et navigateur
7. Langage HTML : balises, syntaxe, balises ouvrantes, fermantes et autofermantes
8. Balises HTML courantes pour structurer le contenu : liens, titres, paragraphes
9. Éléments multimédias en HTML5 : images, audio et vidéo avec leurs attributs
10. Particularités des langages web et compatibilité entre navigateurs
11. Code minimal d’une page HTML5 valide et importance des balises sémantiques
12. Outils pour le développement web : éditeur, navigateur, documentation MDN

📖 1. Organisation et modalités du cours INFO401 Web et bases de données

🔑 Notions clés & Définitions

• Cours magistraux : Séances d'enseignement où un professeur expose le contenu du cours à l'ensemble des étudiants, d'une durée de 1h30 chacune, au nombre de 4 dans ce cours.
• Travaux dirigés : Séances interactives de 1h30 chacune, au nombre de 6, permettant d'approfondir et d'appliquer les notions vues en cours.
• Travaux pratiques : Séances de 3h chacune, au nombre de 5, dédiées à la mise en pratique concrète des concepts via des exercices ou projets.
• Bases de données : Enseignement portant sur la gestion, la structuration et l'interrogation de données à l'aide du langage SQL, abordé dans le cours.
• INFO401 - web - CM1 - HTML : Module introductif sur la création de pages web en HTML, comprenant une introduction, la structure d'une page, et la notion de client/serveur.

📝 Points essentiels

• Le cours comprend 4 cours magistraux de 1h30 chacun, 6 séances de travaux dirigés de 1h30, et 5 séances de travaux pratiques de 3h.
• L'évaluation théorique se fait par QCM, et l'évaluation pratique par travaux pratiques ou projet.

💡 À retenir

Le cours comprend 4 cours magistraux de 1h30 chacun, 6 séances de travaux dirigés de 1h30, et 5 séances de travaux pratiques de 3h.

📖 2. Introduction au web : pages web, fichiers HTML et rôle du navigateur

🔑 Notions clés & Définitions

• Pages web : fichiers texte contenant du code, généralement au format HTML, destinés à être affichés sur un navigateur web.

• Page web : document numérique constitué d’un fichier texte, souvent en HTML, qui peut être lu, interprété et affiché par un navigateur web.

• Navigateur web : logiciel qui interprète le code contenu dans un fichier HTML pour afficher la page à l’écran, permettant ainsi la visualisation du contenu.

• Crée des pages : processus consistant à rédiger un fichier texte, souvent en HTML, à l’aide d’un éditeur de texte pour produire une page web consultable en ligne ou localement.

📝 Points essentiels

• Une page web est un fichier texte contenant du code, généralement au format HTML. Ce fichier est conçu pour être lu, interprété et affiché par un navigateur web, qui transforme le code en une représentation visuelle à l’écran.

• Le fichier HTML d’une page web est destiné à être lu par un navigateur web. Lorsqu’on ouvre une page web, le navigateur interprète le contenu du fichier HTML pour générer l’affichage visible à l’utilisateur.

• Le navigateur web joue un rôle central : il interprète le fichier HTML pour afficher la page à l’écran. Il ne modifie pas le fichier source, mais lit et affiche son contenu.

• Une page web peut être ouverte avec un éditeur de texte, permettant de visualiser son code source. Cependant, pour consulter la page dans un contexte normal, on utilise un navigateur web.

• Créer des pages web implique l’utilisation d’un éditeur de texte pour rédiger le code HTML, puis de tester la page en l’ouvrant dans un navigateur. Cela permet de vérifier l’affichage et le fonctionnement de la page.

💡 À retenir

Une page web est un fichier texte contenant du code HTML destiné à être interprété et affiché par un navigateur web, qui en assure la visualisation sans modifier le fichier source.

📖 3. Notion de client/serveur et fonctionnement d’Internet et du Web

🔑 Notions clés & Définitions

• Internet : Réseau informatique mondial matériel constitué d’ordinateurs, tablettes, smartphones et objets connectés, tous reliés entre eux et possédant une adresse IP.
• Serveur : démo « Hello World » ● Espace sur un « serveur web » + « nom de domaine » ● Vous pouvez maintenant consulter la page !

📝 Points essentiels

• Le Web est un service utilisant Internet pour consulter des pages web via le protocole HTTP.
• Un client est un ordinateur ou navigateur qui demande une page web au serveur.
• ● Commençons par préciser la différence entre internet et web INFO401 - web - CM1 - HTML Internet ● Internet (interconnected network) est un réseau informatique mondial ● C’est donc un réseau matériel constitué d’ordinateurs, de tablettes, de smartphones, d’objets connectés.

💡 À retenir

Le Web est un service utilisant Internet pour consulter des pages web via le protocole HTTP.

📖 4. Historique et évolution du Web et des standards HTML

🔑 Notions clés & Définitions

• Naissance du Web : Événement survenu en 1989 au CERN où Tim Berners-Lee a créé le Web.
• HTML5 : Version du langage HTML dont le premier brouillon a été publié en 2008 et qui est devenue un standard reconnu par tous les acteurs du Web.
• HTML ● A quelle décennie associez : Question portant sur la décennie à laquelle on associe les débuts du Web, notamment les années 1980.

📝 Points essentiels

• Le Web a été créé en 1989 au CERN par Tim Berners-Lee.
• Le W3C a été fondé en 1994 par Tim Berners-Lee pour standardiser le Web.
• Le WhatWG a été créé en 2004 pour développer les standards du Web.
• Le premier brouillon du standard HTML5 date de 2008, et il est devenu un standard reconnu.

💡 À retenir

L'évolution historique du Web illustre l'importance des organismes de standardisation tels que le W3C et le WhatWG dans le développement des standards du Web.

📖 5. Structure et rôle des URL, résolution DNS et interaction client-serveur

🔑 Notions clés & Définitions

• Serveur DNS : Un ordinateur connecté à internet qui traduit les noms de domaine (URL) en adresses IP numériques pour localiser le serveur hébergeant une page web.
• HTML URL et résolution : L'adresse URL saisie par l'utilisateur pour accéder à une page web, qui nécessite une traduction en adresse IP pour identifier le serveur hébergeant la page.

📝 Points essentiels

• Le serveur est identifié par une adresse IP numérique.
• Le serveur DNS traduit l'URL en adresse IP via la résolution DNS.
• La résolution DNS est une étape clé pour localiser le serveur hébergeant la page web.
• Le client utilise l'adresse IP obtenue pour demander la page au serveur.

💡 À retenir

Comprendre comment les URL sont traduites en adresses IP pour permettre la communication client-serveur.

📖 6. Création et lecture de pages web avec éditeur de texte et navigateur

🔑 Notions clés & Définitions

• Éditeur de texte : Un logiciel permettant d'écrire et de modifier du texte brut, utilisé pour créer des fichiers contenant du code HTML.

📝 Points essentiels

• Pour créer une page web, un simple éditeur de texte suffit.
• Le navigateur sert à tester et lire la page web créée.
• Une page web peut être créée localement puis affichée dans un navigateur.
• Le fichier texte contenant le code HTML est interprété par le navigateur pour affichage.

💡 À retenir

Maîtriser les outils de base pour créer et visualiser une page web.

📖 7. Langage HTML : balises, syntaxe, balises ouvrantes, fermantes et autofermantes

🔑 Notions clés & Définitions

📝 Points essentiels

• Les balises ouvrantes marquent le début d'un élément HTML.
• Les balises fermantes marquent la fin d'un élément HTML.

💡 À retenir

Comprendre la syntaxe fondamentale des balises HTML et leur rôle dans la structuration du contenu.

📖 8. Balises HTML courantes pour structurer le contenu : liens, titres, paragraphes

🔑 Notions clés & Définitions

• Servent à structurer le contenu : Action d'organiser le contenu d'une page web à l'aide de balises HTML pour améliorer sa compréhension et son traitement par des robots comme ceux d'indexation ou de web sémantique.

📝 Points essentiels

• Les balises sont imbriquées et doivent être correctement fermées pour une structure valide.
• Les balises structurent le contenu pour une meilleure compréhension et indexation.

💡 À retenir

Savoir utiliser les balises essentielles pour organiser et naviguer dans le contenu d'une page web.

📖 9. Éléments multimédias en HTML5 : images, audio et vidéo avec leurs attributs

🔑 Notions clés & Définitions

• Balise autofermante : Élément HTML qui ne nécessite pas de balise de fermeture et se termine par /> ou simplement >.

📝 Points essentiels

• Les éléments multimédias améliorent l'interactivité et le contenu visuel d'une page web.
• La balise <img> est autofermante et utilise l'attribut src pour la source de l'image.

💡 À retenir

L'intégration des médias enrichis en HTML5 utilise des balises spécifiques avec des attributs adaptés pour améliorer l'interactivité et la présentation des pages web.

📖 10. Particularités des langages web et compatibilité entre navigateurs

🔑 Notions clés & Définitions

• Test en navigateur croisé : Méthode permettant de vérifier que les pages web s'affichent et fonctionnent correctement sur différents navigateurs et leurs versions afin d'assurer une large compatibilité.

📝 Points essentiels

• Les langages web sont interprétés différemment selon les navigateurs et leurs versions.
• Le développeur doit assurer la compatibilité des pages web avec le plus grand nombre de navigateurs.
• Les tests en navigateur croisé permettent de vérifier l'affichage et le fonctionnement sur différents clients.
• L'évolution des navigateurs a réduit les incompatibilités mais la vigilance reste nécessaire.

💡 À retenir

La diversité des navigateurs et de leurs versions impose au développeur web de tester ses pages sur plusieurs environnements pour garantir une expérience utilisateur cohérente.

📖 11. Code minimal d’une page HTML5 valide et importance des balises sémantiques

🔑 Notions clés & Définitions

• Code minimal : Structure de base nécessaire pour qu'une page HTML5 soit valide et fonctionnelle, incluant le doctype, les balises html, head avec meta charset et title, et body.

📝 Points essentiels

• Les balises ne sont pas affichées mais organisent le document.
• Le respect du code minimal garantit la validité et la compatibilité de la page.

💡 À retenir

Une structure HTML5 correcte et sémantique est essentielle pour assurer la qualité, la validité et l'accessibilité des pages web.

📖 12. Outils pour le développement web : éditeur, navigateur, documentation MDN

🔑 Notions clés & Définitions

• Navigateur avec outils de développement : Un logiciel permettant d'afficher les pages web et intégrant des fonctionnalités pour inspecter, déboguer et analyser le code HTML, CSS et JavaScript.
• Balise ouvrante : Une séquence de caractères en HTML qui marque le début d'un élément, généralement composée du nom de l'élément entouré de chevrons et pouvant contenir des attributs.

📝 Points essentiels

• L'éditeur de texte est l'outil principal pour écrire le code HTML.
• Le navigateur permet de visualiser la page et dispose d'outils de développement pour déboguer.
• La documentation MDN est une ressource essentielle pour apprendre et vérifier les standards web.
• L'utilisation d'outils adaptés facilite la création et la maintenance des pages web.
• La recherche d'informations fiables est cruciale pour respecter les standards.

💡 À retenir

Valoriser l'usage des outils et ressources pour un développement web efficace et conforme aux standards.

🧩 Compléments de couverture

1. Détail source à réviser : - web - CM1 - HTML INFO401 Web et bases de données INFO401 - web - CM1 - HTML Organisation ● 4 cours magistraux (4 x 1h30) ● 6 séances de travaux dirigés (6 x 1h30) ● 5 séances de travaux pratiques (5 x 3h) INFO401 - web (Source: "- web - CM1 - HTML INFO401 Web et bases de données INFO401 - web - CM1 - HTML Organisation ● 4 cours magistraux (4 x 1h30) ● 6 séances de travaux dirigés (6 x 1h30) ● 5 séances de travaux pratiques (5 x 3h) INFO401 - web - CM1 - HTML Évaluation ● Note théorique : QCM ● Note pratique : TP/projet INFO401 - web - CM1 - HTML Plusieurs langages ● CM1 :")
2. Détail source à réviser : cours magistraux (4 x 1h30) ● 6 séances de travaux dirigés (6 x 1h30) ● 5 séances de travaux pratiques (5 x 3h) INFO401 - web - CM1 - HTML Évaluation ● Note théorique : QCM ● Note pratique : TP/projet INFO401 - web - CM1 (Source: "cours magistraux (4 x 1h30) ● 6 séances de travaux dirigés (6 x 1h30) ● 5 séances de travaux pratiques (5 x 3h) INFO401 - web - CM1 - HTML Évaluation ● Note théorique : QCM ● Note pratique : TP/projet INFO401 - web - CM1 - HTML Plusieurs langages ● CM1 : HTML ● CM2 : CSS, JavaScript ● CM3 : Bases de données, SQL ● CM4 : PHP INFO401 - web - CM1 - HTML CM1 :")
3. Détail source à réviser : INFO401 - web - CM1 - HTML Plusieurs langages ● CM1 : HTML ● CM2 : CSS, JavaScript ● CM3 : Bases de données, SQL ● CM4 : PHP INFO401 - web - CM1 - HTML CM1 : HTML ● Introduction ● Page web ● Notion de client/serveur ● HT (Source: "INFO401 - web - CM1 - HTML Plusieurs langages ● CM1 : HTML ● CM2 : CSS, JavaScript ● CM3 : Bases de données, SQL ● CM4 : PHP INFO401 - web - CM1 - HTML CM1 : HTML ● Introduction ● Page web ● Notion de client/serveur ● HTML INFO401 - web - CM1 - HTML Page web ● Vous allez apprendre à créer des pages web ● Une page web c’est quoi ? – C’est un fichier")
4. Détail source à réviser : web ● Notion de client/serveur ● HTML INFO401 - web - CM1 - HTML Page web ● Vous allez apprendre à créer des pages web ● Une page web c’est quoi ? – C’est un fichier texte (format html mais pas que…) qui contient du « co (Source: "web ● Notion de client/serveur ● HTML INFO401 - web - CM1 - HTML Page web ● Vous allez apprendre à créer des pages web ● Une page web c’est quoi ? – C’est un fichier texte (format html mais pas que…) qui contient du « code » – Destiné à être lu, interprété et affiché sur l’écran d’un navigateur web ● Voir pages web TD INFO401 - web - CM1 - HTML Démos ●")
5. Détail source à réviser : que…) qui contient du « code » – Destiné à être lu, interprété et affiché sur l’écran d’un navigateur web ● Voir pages web TD INFO401 - web - CM1 - HTML Démos ● Ouvrir une page web (TD) avec un éditeur de texte ● Ouvrir (Source: "que…) qui contient du « code » – Destiné à être lu, interprété et affiché sur l’écran d’un navigateur web ● Voir pages web TD INFO401 - web - CM1 - HTML Démos ● Ouvrir une page web (TD) avec un éditeur de texte ● Ouvrir une image jpeg avec l’éditeur de texte (fichier binaire rappel INFO201) ● Lire (interpréter) le fichier texte avec le navigateur web")
6. Détail source à réviser : un éditeur de texte ● Ouvrir une image jpeg avec l’éditeur de texte (fichier binaire rappel INFO201) ● Lire (interpréter) le fichier texte avec le navigateur web INFO401 - web - CM1 - HTML Créer une page web ● À l’aide d (Source: "un éditeur de texte ● Ouvrir une image jpeg avec l’éditeur de texte (fichier binaire rappel INFO201) ● Lire (interpréter) le fichier texte avec le navigateur web INFO401 - web - CM1 - HTML Créer une page web ● À l’aide d’un éditeur de texte démo « Hello World » INFO401 - web - CM1 - HTML Lire une page web ● A l’aide d’un navigateur web démo « Hello World »")
7. Détail source à réviser : une page web ● À l’aide d’un éditeur de texte démo « Hello World » INFO401 - web - CM1 - HTML Lire une page web ● A l’aide d’un navigateur web démo « Hello World » ● Je peux la lire mais pas vous ! INFO401 - web - CM1 - (Source: "une page web ● À l’aide d’un éditeur de texte démo « Hello World » INFO401 - web - CM1 - HTML Lire une page web ● A l’aide d’un navigateur web démo « Hello World » ● Je peux la lire mais pas vous ! INFO401 - web - CM1 - HTML Consulter une page web ● En général lorsque vous consultez une page web à l’aide d’un navigateur web, celle-ci ne se trouve pas sur")
8. Détail source à réviser : vous ! INFO401 - web - CM1 - HTML Consulter une page web ● En général lorsque vous consultez une page web à l’aide d’un navigateur web, celle-ci ne se trouve pas sur votre ordi ! ● Vous la récupérez « quelque part » sur (Source: "vous ! INFO401 - web - CM1 - HTML Consulter une page web ● En général lorsque vous consultez une page web à l’aide d’un navigateur web, celle-ci ne se trouve pas sur votre ordi ! ● Vous la récupérez « quelque part » sur le « web » grâce à une « adresse » ● Exemple, INFO401 - web - CM1 - HTML Publier une page web ● Comment la page que vous consultez")
9. Détail source à réviser : « quelque part » sur le « web » grâce à une « adresse » ● Exemple, INFO401 - web - CM1 - HTML Publier une page web ● Comment la page que vous consultez s’est-elle retrouvée « quelque part » sur le « web » ? démo « Hello (Source: "« quelque part » sur le « web » grâce à une « adresse » ● Exemple, INFO401 - web - CM1 - HTML Publier une page web ● Comment la page que vous consultez s’est-elle retrouvée « quelque part » sur le « web » ? démo « Hello World » ● Espace sur un « serveur web » + « nom de domaine » ● Vous pouvez maintenant consulter la page ! INFO401 - web - CM1 - HTML")
10. Détail source à réviser : » sur le « web » ? démo « Hello World » ● Espace sur un « serveur web » + « nom de domaine » ● Vous pouvez maintenant consulter la page ! INFO401 - web - CM1 - HTML Notion de client/serveur ● Que se passe-t-il entre le m (Source: "» sur le « web » ? démo « Hello World » ● Espace sur un « serveur web » + « nom de domaine » ● Vous pouvez maintenant consulter la page ! INFO401 - web - CM1 - HTML Notion de client/serveur ● Que se passe-t-il entre le moment où vous soumettez l’adresse au navigateur et le moment où la page s’affiche à l’écran ? ● Commençons par préciser la différence")
11. Détail source à réviser : Que se passe-t-il entre le moment où vous soumettez l’adresse au navigateur et le moment où la page s’affiche à l’écran ? ● Commençons par préciser la différence entre internet et web INFO401 - web - CM1 - HTML Internet (Source: "Que se passe-t-il entre le moment où vous soumettez l’adresse au navigateur et le moment où la page s’affiche à l’écran ? ● Commençons par préciser la différence entre internet et web INFO401 - web - CM1 - HTML Internet ● Internet (interconnected network) est un réseau informatique mondial ● C’est donc un réseau matériel constitué d’ordinateurs, de")
12. Détail source à réviser : - web - CM1 - HTML Internet ● Internet (interconnected network) est un réseau informatique mondial ● C’est donc un réseau matériel constitué d’ordinateurs, de tablettes, de smartphones, d’objets connectés... tous reliés (Source: "- web - CM1 - HTML Internet ● Internet (interconnected network) est un réseau informatique mondial ● C’est donc un réseau matériel constitué d’ordinateurs, de tablettes, de smartphones, d’objets connectés... tous reliés entre eux ● Et possédant une adresse IP INFO401 - web - CM1 - HTML ● A quelle décennie associez vous les débuts d’internet ?  1960  1970")
13. Détail source à réviser : connectés... tous reliés entre eux ● Et possédant une adresse IP INFO401 - web - CM1 - HTML ● A quelle décennie associez vous les débuts d’internet ?  1960  1970  1980  1990 INFO401 - web - CM1 - HTML ● A quelle déce (Source: "connectés... tous reliés entre eux ● Et possédant une adresse IP INFO401 - web - CM1 - HTML ● A quelle décennie associez vous les débuts d’internet ?  1960  1970  1980  1990 INFO401 - web - CM1 - HTML ● A quelle décennie associez vous les débuts du web ?  1970  1980  1990  2000 INFO401 - web - CM1 - HTML Importance de l’historique quelques dates ●")
14. Détail source à réviser : - CM1 - HTML ● A quelle décennie associez vous les débuts du web ?  1970  1980  1990  2000 INFO401 - web - CM1 - HTML Importance de l’historique quelques dates ● 1989 Naissance du web au Cern (Tim Berners- Lee) ● 199 (Source: "- CM1 - HTML ● A quelle décennie associez vous les débuts du web ?  1970  1980  1990  2000 INFO401 - web - CM1 - HTML Importance de l’historique quelques dates ● 1989 Naissance du web au Cern (Tim Berners- Lee) ● 1994 Tim fonde le W3C ● 2004 Création du WhatWG ● 2008 Premier brouillon HTML5 INFO401 - web - CM1 - HTML Web ● Le réseau internet peut")
15. Détail source à réviser : (Tim Berners- Lee) ● 1994 Tim fonde le W3C ● 2004 Création du WhatWG ● 2008 Premier brouillon HTML5 INFO401 - web - CM1 - HTML Web ● Le réseau internet peut notamment être utilisé pour la consultation de page web (mais p (Source: "(Tim Berners- Lee) ● 1994 Tim fonde le W3C ● 2004 Création du WhatWG ● 2008 Premier brouillon HTML5 INFO401 - web - CM1 - HTML Web ● Le réseau internet peut notamment être utilisé pour la consultation de page web (mais pas que !) ● Chaque utilisation du réseau à son propre protocole, http pour les pages web ● L’ensemble des pages web reliées entre elles")
16. Détail source à réviser : consultation de page web (mais pas que !) ● Chaque utilisation du réseau à son propre protocole, http pour les pages web ● L’ensemble des pages web reliées entre elles par des hyperliens constitue ce que l’on appelle le (Source: "consultation de page web (mais pas que !) ● Chaque utilisation du réseau à son propre protocole, http pour les pages web ● L’ensemble des pages web reliées entre elles par des hyperliens constitue ce que l’on appelle le www, la toile ou simplement le web INFO401 - web - CM1 - HTML Serveur ● La page web que vous consultez se trouve sur un ordinateur connecté")
17. Détail source à réviser : ce que l’on appelle le www, la toile ou simplement le web INFO401 - web - CM1 - HTML Serveur ● La page web que vous consultez se trouve sur un ordinateur connecté à internet et configuré de manière à pouvoir vous « servi (Source: "ce que l’on appelle le www, la toile ou simplement le web INFO401 - web - CM1 - HTML Serveur ● La page web que vous consultez se trouve sur un ordinateur connecté à internet et configuré de manière à pouvoir vous « servir » des pages web. ● Cet ordinateur est appelé serveur INFO401 - web - CM1 - HTML source INFO401 - web - CM1 - HTML Client ● Votre")
18. Détail source à réviser : manière à pouvoir vous « servir » des pages web. ● Cet ordinateur est appelé serveur INFO401 - web - CM1 - HTML source INFO401 - web - CM1 - HTML Client ● Votre ordinateur/navigateur est appelé client ● Il demande au ser (Source: "manière à pouvoir vous « servir » des pages web. ● Cet ordinateur est appelé serveur INFO401 - web - CM1 - HTML source INFO401 - web - CM1 - HTML Client ● Votre ordinateur/navigateur est appelé client ● Il demande au serveur de lui « servir » une page web INFO401 - web - CM1 - HTML URL et résolution DNS ● Pour accéder à une page web stockée, hébergée sur")
19. Détail source à réviser : client ● Il demande au serveur de lui « servir » une page web INFO401 - web - CM1 - HTML URL et résolution DNS ● Pour accéder à une page web stockée, hébergée sur un serveur, l’utilisateur saisi une adresse appelée URL ● (Source: "client ● Il demande au serveur de lui « servir » une page web INFO401 - web - CM1 - HTML URL et résolution DNS ● Pour accéder à une page web stockée, hébergée sur un serveur, l’utilisateur saisi une adresse appelée URL ● Comprendre les URL et leur structure INFO401 - web - CM1 - HTML URL et résolution DNS ● Or le serveur sur lequel est stockée la page est")
20. Détail source à réviser : une adresse appelée URL ● Comprendre les URL et leur structure INFO401 - web - CM1 - HTML URL et résolution DNS ● Or le serveur sur lequel est stockée la page est identifié par une adresse IP ● Le client demande donc à u (Source: "une adresse appelée URL ● Comprendre les URL et leur structure INFO401 - web - CM1 - HTML URL et résolution DNS ● Or le serveur sur lequel est stockée la page est identifié par une adresse IP ● Le client demande donc à un serveur « spécial » (serveur DNS) l’adresse IP correspondant à l’URL, c’est ce qu’on appelle la résolution DNS ● voir vidéo INFO401 -")
21. Détail source à réviser : IP ● Le client demande donc à un serveur « spécial » (serveur DNS) l’adresse IP correspondant à l’URL, c’est ce qu’on appelle la résolution DNS ● voir vidéo INFO401 - web - CM1 - HTML Créer des pages web ● Revenons à ce (Source: "IP ● Le client demande donc à un serveur « spécial » (serveur DNS) l’adresse IP correspondant à l’URL, c’est ce qu’on appelle la résolution DNS ● voir vidéo INFO401 - web - CM1 - HTML Créer des pages web ● Revenons à ce qui va nous occuper : créer des pages web ● Comme on vient de le voir, pour créer des pages web vous n’avez besoin que d’un simple éditeur")
22. Détail source à réviser : pages web ● Revenons à ce qui va nous occuper : créer des pages web ● Comme on vient de le voir, pour créer des pages web vous n’avez besoin que d’un simple éditeur de texte et d’un navigateur web pour tester INFO401 - w (Source: "pages web ● Revenons à ce qui va nous occuper : créer des pages web ● Comme on vient de le voir, pour créer des pages web vous n’avez besoin que d’un simple éditeur de texte et d’un navigateur web pour tester INFO401 - web - CM1 - HTML HTML ● Hypertext Markup Language ● A quoi ça ressemble ? Exemple ● Langage de balisage (SGML, Latex...) ● Démo avec")
23. Détail source à réviser : web pour tester INFO401 - web - CM1 - HTML HTML ● Hypertext Markup Language ● A quoi ça ressemble ? Exemple ● Langage de balisage (SGML, Latex...) ● Démo avec balise <a> INFO401 - web - CM1 - HTML Particularités des lang (Source: "web pour tester INFO401 - web - CM1 - HTML HTML ● Hypertext Markup Language ● A quoi ça ressemble ? Exemple ● Langage de balisage (SGML, Latex...) ● Démo avec balise <a> INFO401 - web - CM1 - HTML Particularités des langages web ● Différence avec python où tous les environnements interprètent de la même manière stricte les dernières versions du langage ●")
24. Détail source à réviser : HTML Particularités des langages web ● Différence avec python où tous les environnements interprètent de la même manière stricte les dernières versions du langage ● En tant que développeur web vous devez faire en sorte q (Source: "HTML Particularités des langages web ● Différence avec python où tous les environnements interprètent de la même manière stricte les dernières versions du langage ● En tant que développeur web vous devez faire en sorte que vos pages puissent être vues par le plus de monde possible et donc par le plus de clients possible çàd le plus de navigateurs possibles")
25. Détail source à réviser : vous devez faire en sorte que vos pages puissent être vues par le plus de monde possible et donc par le plus de clients possible çàd le plus de navigateurs possibles et le plus de versions possibles ! ● prendre en compte (Source: "vous devez faire en sorte que vos pages puissent être vues par le plus de monde possible et donc par le plus de clients possible çàd le plus de navigateurs possibles et le plus de versions possibles ! ● prendre en compte les différentes interprétations ou non interprétations – Évolution de l'usage des navigateurs web – Introduction au test en navigateur")
26. Détail source à réviser : ! ● prendre en compte les différentes interprétations ou non interprétations – Évolution de l'usage des navigateurs web – Introduction au test en navigateur croisé ● Même si aujourd’hui c’est moins compliqué INFO401 - we (Source: "! ● prendre en compte les différentes interprétations ou non interprétations – Évolution de l'usage des navigateurs web – Introduction au test en navigateur croisé ● Même si aujourd’hui c’est moins compliqué INFO401 - web - CM1 - HTML de HTML1 à HTML5 ● HTML5 est un standard reconnu maintenant par tous les acteurs du web démo validation des pages ●")
27. Détail source à réviser : c’est moins compliqué INFO401 - web - CM1 - HTML de HTML1 à HTML5 ● HTML5 est un standard reconnu maintenant par tous les acteurs du web démo validation des pages ● Page HTML1 texte et hyperlien première page web de l’hi (Source: "c’est moins compliqué INFO401 - web - CM1 - HTML de HTML1 à HTML5 ● HTML5 est un standard reconnu maintenant par tous les acteurs du web démo validation des pages ● Page HTML1 texte et hyperlien première page web de l’histoire ● Page HTML5 véritable application en ligne python en ligne ● HTML5 = HTML + CSS + JavaScript INFO401 - web - CM1 - HTML A quoi")
28. Détail source à réviser : première page web de l’histoire ● Page HTML5 véritable application en ligne python en ligne ● HTML5 = HTML + CSS + JavaScript INFO401 - web - CM1 - HTML A quoi servent les balises ? ● Les balises ont un rendu par défaut (Source: "première page web de l’histoire ● Page HTML5 véritable application en ligne python en ligne ● HTML5 = HTML + CSS + JavaScript INFO401 - web - CM1 - HTML A quoi servent les balises ? ● Les balises ont un rendu par défaut mais ne servent pas à mettre en forme (CSS pour la mise en forme) Exemple TP ● Elles servent à structurer le contenu et à le rendre")
29. Détail source à réviser : ont un rendu par défaut mais ne servent pas à mettre en forme (CSS pour la mise en forme) Exemple TP ● Elles servent à structurer le contenu et à le rendre compréhensible par des robots ! ● De quels robots parle-t-on ? i (Source: "ont un rendu par défaut mais ne servent pas à mettre en forme (CSS pour la mise en forme) Exemple TP ● Elles servent à structurer le contenu et à le rendre compréhensible par des robots ! ● De quels robots parle-t-on ? indexation, web sémantique... INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8">")
30. Détail source à réviser : ! ● De quels robots parle-t-on ? indexation, web sémantique... INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!- (Source: "! ● De quels robots parle-t-on ? indexation, web sémantique... INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> INFO401 - web - CM1 - HTML Code minimal ● Démo affichage code minimal ● Les balises ne sont pas affichées")
31. Détail source à réviser : </head> <body> ... <!-- contenu --> ... </body> </html> INFO401 - web - CM1 - HTML Code minimal ● Démo affichage code minimal ● Les balises ne sont pas affichées ! INFO401 - web - CM1 - HTML Code minimal <!doctype html> (Source: "</head> <body> ... <!-- contenu --> ... </body> </html> INFO401 - web - CM1 - HTML Code minimal ● Démo affichage code minimal ● Les balises ne sont pas affichées ! INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html>")
32. Détail source à réviser : Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Standard HTML5 <html> <body><head> INFO401 - web - CM1 - (Source: "Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Standard HTML5 <html> <body><head> INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ...")
33. Détail source à réviser : INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Balise ouvrante < nomElementH (Source: "INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Balise ouvrante < nomElementHTML> Balise fermante </ nomElementHTML> INFO401 - web - CM1 - HTML Lorsque les balises sont imbriquées, si une balise A est")
34. Détail source à réviser : Balise ouvrante < nomElementHTML> Balise fermante </ nomElementHTML> INFO401 - web - CM1 - HTML Lorsque les balises sont imbriquées, si une balise A est ouverte avant une balise B alors la balise A sera fermée après la b (Source: "Balise ouvrante < nomElementHTML> Balise fermante </ nomElementHTML> INFO401 - web - CM1 - HTML Lorsque les balises sont imbriquées, si une balise A est ouverte avant une balise B alors la balise A sera fermée après la balise B INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la")
35. Détail source à réviser : la balise A sera fermée après la balise B INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </b (Source: "la balise A sera fermée après la balise B INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Attribut nom = " valeur" INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta")
36. Détail source à réviser : ... <!-- contenu --> ... </body> </html> Attribut nom = " valeur" INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... (Source: "... <!-- contenu --> ... </body> </html> Attribut nom = " valeur" INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Balise autofermante < nomElementHTML> ou < nomElementHTML /> INFO401 - web - CM1 - HTML Code minimal")
37. Détail source à réviser : </head> <body> ... <!-- contenu --> ... </body> </html> Balise autofermante < nomElementHTML> ou < nomElementHTML /> INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> (Source: "</head> <body> ... <!-- contenu --> ... </body> </html> Balise autofermante < nomElementHTML> ou < nomElementHTML /> INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Commentaires < !-- commentaires --> INFO401")
38. Détail source à réviser : <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Commentaires < !-- commentaires --> INFO401 - web - CM1 - HTML Liens ● <a> ● Démo <a href="https://dev (Source: "<head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Commentaires < !-- commentaires --> INFO401 - web - CM1 - HTML Liens ● <a> ● Démo <a href="https://developer.mozilla.org/fr/">Le lien que vous devez absolument connaître</a> ● Balise ouvrante, balise fermante, attribut, adresse")
39. Détail source à réviser : <a> ● Démo <a href="https://developer.mozilla.org/fr/">Le lien que vous devez absolument connaître</a> ● Balise ouvrante, balise fermante, attribut, adresse hyperlien, texte affiché ● Naviguer dans une page INFO401 - web (Source: "<a> ● Démo <a href="https://developer.mozilla.org/fr/">Le lien que vous devez absolument connaître</a> ● Balise ouvrante, balise fermante, attribut, adresse hyperlien, texte affiché ● Naviguer dans une page INFO401 - web - CM1 - HTML Texte ● <h1> <h2> <h3> … <p> ● Démo <h1>HTML5</h1> <p>La dernière version stable du HTML, <strong>HTML5</strong>, transforme")
40. Détail source à réviser : dans une page INFO401 - web - CM1 - HTML Texte ● <h1> <h2> <h3> … <p> ● Démo <h1>HTML5</h1> <p>La dernière version stable du HTML, <strong>HTML5</strong>, transforme le HTML qui était un simple balisage pour structurer d (Source: "dans une page INFO401 - web - CM1 - HTML Texte ● <h1> <h2> <h3> … <p> ● Démo <h1>HTML5</h1> <p>La dernière version stable du HTML, <strong>HTML5</strong>, transforme le HTML qui était un simple balisage pour structurer des documents en une plate-forme complète de développement d'applications. Parmi ses autres caractéristiques, HTML5 comporte de nouveaux")
41. Détail source à réviser : balisage pour structurer des documents en une plate-forme complète de développement d'applications. Parmi ses autres caractéristiques, HTML5 comporte de nouveaux éléments et des API JavaScript pour améliorer le stockage, (Source: "balisage pour structurer des documents en une plate-forme complète de développement d'applications. Parmi ses autres caractéristiques, HTML5 comporte de nouveaux éléments et des API JavaScript pour améliorer le stockage, le multimédia et l'accès au matériel.<br> https://developer.mozilla.org/fr/docs/Glossary/HTML5</p> ● Balise ouvrante, balise fermante,")
42. Détail source à réviser : pour améliorer le stockage, le multimédia et l'accès au matériel.<br> https://developer.mozilla.org/fr/docs/Glossary/HTML5</p> ● Balise ouvrante, balise fermante, balises imbriquées, <strong> balise sémantique, <br> INFO (Source: "pour améliorer le stockage, le multimédia et l'accès au matériel.<br> https://developer.mozilla.org/fr/docs/Glossary/HTML5</p> ● Balise ouvrante, balise fermante, balises imbriquées, <strong> balise sémantique, <br> INFO401 - web - CM1 - HTML Image ● <img> ● Démo <img src="modem-56k.jpg"> ● Balise autofermante, attribut INFO401 - web - CM1 - HTML Audio ●")
43. Détail source à réviser : balise sémantique, <br> INFO401 - web - CM1 - HTML Image ● <img> ● Démo <img src="modem-56k.jpg"> ● Balise autofermante, attribut INFO401 - web - CM1 - HTML Audio ● <audio> ● Démo <audio controls src="dial_up_modem_noise (Source: "balise sémantique, <br> INFO401 - web - CM1 - HTML Image ● <img> ● Démo <img src="modem-56k.jpg"> ● Balise autofermante, attribut INFO401 - web - CM1 - HTML Audio ● <audio> ● Démo <audio controls src="dial_up_modem_noises.ogg"></audio> ● Balise ouvrante, balise fermante, attributs (dont un sans valeur) INFO401 - web - CM1 - HTML Vidéo ● <video> ● Démo")
44. Détail source à réviser : src="dial_up_modem_noises.ogg"></audio> ● Balise ouvrante, balise fermante, attributs (dont un sans valeur) INFO401 - web - CM1 - HTML Vidéo ● <video> ● Démo <video controls width="640"> <source src="lhistoire-des-femmes (Source: "src="dial_up_modem_noises.ogg"></audio> ● Balise ouvrante, balise fermante, attributs (dont un sans valeur) INFO401 - web - CM1 - HTML Vidéo ● <video> ● Démo <video controls width="640"> <source src="lhistoire-des-femmes-qui-ont-fait-linternet.mp4" type="video/mp4"> <source src="L'histoire des femmes qui ont fait l'Internet.webm" type="video/webm">")
45. Détail source à réviser : <source src="lhistoire-des-femmes-qui-ont-fait-linternet.mp4" type="video/mp4"> <source src="L'histoire des femmes qui ont fait l'Internet.webm" type="video/webm"> <p>Votre navigateur ne prend pas en charge les vidéos HT (Source: "<source src="lhistoire-des-femmes-qui-ont-fait-linternet.mp4" type="video/mp4"> <source src="L'histoire des femmes qui ont fait l'Internet.webm" type="video/webm"> <p>Votre navigateur ne prend pas en charge les vidéos HTML5.</p> </video> ● Balise ouvrante, balise fermante, attributs INFO401 - web - CM1 - HTML Compléments formats")
46. Détail source à réviser : pas en charge les vidéos HTML5.</p> </video> ● Balise ouvrante, balise fermante, attributs INFO401 - web - CM1 - HTML Compléments formats https://developer.mozilla.org/fr/docs/Web/Media/G uides/Formats INFO401 - web - CM (Source: "pas en charge les vidéos HTML5.</p> </video> ● Balise ouvrante, balise fermante, attributs INFO401 - web - CM1 - HTML Compléments formats https://developer.mozilla.org/fr/docs/Web/Media/G uides/Formats INFO401 - web - CM1 - HTML Les outils ● Éditeur de texte ● Navigateur avec outils de développement ● MDN pour l’aide et les compléments importance des «")
47. Détail source à réviser : INFO401 - web - CM1 - HTML Les outils ● Éditeur de texte ● Navigateur avec outils de développement ● MDN pour l’aide et les compléments importance des « bonnes » recherches / standards ! INFO401 - web - CM1 - HTML ● Avan (Source: "INFO401 - web - CM1 - HTML Les outils ● Éditeur de texte ● Navigateur avec outils de développement ● MDN pour l’aide et les compléments importance des « bonnes » recherches / standards ! INFO401 - web - CM1 - HTML ● Avant 1999 56 kb/s https://ladsl.com/faq/histoire-ladsl-france (27h pour télécharger un film de 700Mo) abonnement + facturation du")
48. Détail source à réviser : l’aide et les compléments importance des « bonnes » recherches / standards ! INFO401 - web - CM1 - HTML ● Avant 1999 56 kb/s https://ladsl.com/faq/histoire-ladsl-france (27h pour télécharger un film de 700Mo) abonnement (Source: "l’aide et les compléments importance des « bonnes » recherches / standards ! INFO401 - web - CM1 - HTML ● Avant 1999 56 kb/s https://ladsl.com/faq/histoire-ladsl-france (27h pour télécharger un film de 700Mo) abonnement + facturation du temps de communication ! ● 2002 ADSL 512 kb/s (3h) ● 2004 ADSL2+ 16Mb/s (6 min) ● 2007 début de la fibre 100Mb/s (56")
49. Détail source à réviser : INFO401 - web - CM1 - HTML INFO401 Web et bases de données INFO401 - web - CM1 - HTML Organisation ● 4 cours magistraux (4 x 1h30) ● 6 séances de travaux dirigés (6 x 1h30) ● 5 séances de travaux pratiques (5 x 3h) INFO4 (Source: "INFO401 - web - CM1 - HTML INFO401 Web et bases de données INFO401 - web - CM1 - HTML Organisation ● 4 cours magistraux (4 x 1h30) ● 6 séances de travaux dirigés (6 x 1h30) ● 5 séances de travaux pratiques (5 x 3h) INFO401 - web - CM1 - HTML Évaluation ● Note théorique : QCM ● Note pratique : TP/projet INFO401 - web - CM1 - HTML Plusieurs langages ● CM1 :...")
50. Détail source à réviser : SQL ● CM4 : PHP INFO401 - web - CM1 - HTML CM1 : HTML ● Introduction ● Page web ● Notion de client/serveur ● HTML INFO401 - web - CM1 - HTML Page web ● Vous allez apprendre à créer des pages web ● Une page web c’est quoi (Source: "SQL ● CM4 : PHP INFO401 - web - CM1 - HTML CM1 : HTML ● Introduction ● Page web ● Notion de client/serveur ● HTML INFO401 - web - CM1 - HTML Page web ● Vous allez apprendre à créer des pages web ● Une page web c’est quoi ? – C’est un fichier texte (format html mais pas que…) qui")
51. Détail source à réviser : r web INFO401 - web - CM1 - HTML Créer une page web ● À l’aide d’un éditeur de texte démo « Hello World » INFO401 - web - CM1 - HTML Lire une page web ● A l’aide d’un navigateur web démo « Hello World » ● Je peux la lire (Source: "r web INFO401 - web - CM1 - HTML Créer une page web ● À l’aide d’un éditeur de texte démo « Hello World » INFO401 - web - CM1 - HTML Lire une page web ● A l’aide d’un navigateur web démo « Hello World » ● Je peux la lire mais pas vous ! INFO401 - web - CM1 - HTML C")
52. Détail source à réviser : ouve pas sur votre ordi ! ● Vous la récupérez « quelque part » sur le « web » grâce à une « adresse » ● Exemple, INFO401 - web - CM1 - HTML Publier une page web ● Comment la page que vous consultez s’est-elle retrouvée « (Source: "ouve pas sur votre ordi ! ● Vous la récupérez « quelque part » sur le « web » grâce à une « adresse » ● Exemple, INFO401 - web - CM1 - HTML Publier une page web ● Comment la page que vous consultez s’est-elle retrouvée « quelque part » sur le « web » ? démo « H")
53. Détail source à réviser : CM1 - HTML Publier une page web ● Comment la page que vous consultez s’est-elle retrouvée « quelque part » sur le « web » ? démo « Hello World » ● Espace sur un « serveur web » + « nom de domaine » ● Vous pouvez maintena (Source: "CM1 - HTML Publier une page web ● Comment la page que vous consultez s’est-elle retrouvée « quelque part » sur le « web » ? démo « Hello World » ● Espace sur un « serveur web » + « nom de domaine » ● Vous pouvez maintenant consulter la page ! INFO401 - web - CM1 - H")
54. Détail source à réviser : Et possédant une adresse IP INFO401 - web - CM1 - HTML ● A quelle décennie associez vous les débuts d’internet ?  1960  1970  1980  1990 INFO401 - web - CM1 - HTML ● A quelle décennie associez vous les débuts du web (Source: "Et possédant une adresse IP INFO401 - web - CM1 - HTML ● A quelle décennie associez vous les débuts d’internet ?  1960  1970  1980  1990 INFO401 - web - CM1 - HTML ● A quelle décennie associez vous les débuts du web ?  1970  1980  1990  2000 INFO401 - web - CM1 - HTML Imp")
55. Détail source à réviser : 1960  1970  1980  1990 INFO401 - web - CM1 - HTML ● A quelle décennie associez vous les débuts du web ?  1970  1980  1990  2000 INFO401 - web - CM1 - HTML Importance de l’historique quelques dates ● 1989 Naissance (Source: "1960  1970  1980  1990 INFO401 - web - CM1 - HTML ● A quelle décennie associez vous les débuts du web ?  1970  1980  1990  2000 INFO401 - web - CM1 - HTML Importance de l’historique quelques dates ● 1989 Naissance du web au Cern (Tim Berners- Lee) ● 1994 Tim fonde le W3C ●")
56. Détail source à réviser : tocole, http pour les pages web ● L’ensemble des pages web reliées entre elles par des hyperliens constitue ce que l’on appelle le www, la toile ou simplement le web INFO401 - web - CM1 - HTML Serveur ● La page web que (Source: "tocole, http pour les pages web ● L’ensemble des pages web reliées entre elles par des hyperliens constitue ce que l’on appelle le www, la toile ou simplement le web INFO401 - web - CM1 - HTML Serveur ● La page web que")
57. Détail source à réviser : ez se trouve sur un ordinateur connecté à internet et configuré de manière à pouvoir vous « servir » des pages web. ● Cet ordinateur est appelé serveur INFO401 - web - CM1 - HTML source INFO401 - web - CM1 - HTML Client (Source: "ez se trouve sur un ordinateur connecté à internet et configuré de manière à pouvoir vous « servir » des pages web. ● Cet ordinateur est appelé serveur INFO401 - web - CM1 - HTML source INFO401 - web - CM1 - HTML Client ● Votre ordinateur/navigateur est appelé")
58. Détail source à réviser : st stockée la page est identifié par une adresse IP ● Le client demande donc à un serveur « spécial » (serveur DNS) l’adresse IP correspondant à l’URL, c’est ce qu’on appelle la résolution DNS ● voir vidéo INFO401 - web (Source: "st stockée la page est identifié par une adresse IP ● Le client demande donc à un serveur « spécial » (serveur DNS) l’adresse IP correspondant à l’URL, c’est ce qu’on appelle la résolution DNS ● voir vidéo INFO401 - web - CM1 - HTML Créer des pages web ● Reveno")
59. Détail source à réviser : Comme on vient de le voir, pour créer des pages web vous n’avez besoin que d’un simple éditeur de texte et d’un navigateur web pour tester INFO401 - web - CM1 - HTML HTML ● Hypertext Markup Language ● A quoi ça ressemble (Source: "Comme on vient de le voir, pour créer des pages web vous n’avez besoin que d’un simple éditeur de texte et d’un navigateur web pour tester INFO401 - web - CM1 - HTML HTML ● Hypertext Markup Language ● A quoi ça ressemble ? Exemple ● Langage de balisage (SGML, Latex...) ● Démo ave")
60. Détail source à réviser : - CM1 - HTML Particularités des langages web ● Différence avec python où tous les environnements interprètent de la même manière stricte les dernières versions du langage ● En tant que développeur web vous devez faire (Source: "- CM1 - HTML Particularités des langages web ● Différence avec python où tous les environnements interprètent de la même manière stricte les dernières versions du langage ● En tant que développeur web vous devez faire")
61. Détail source à réviser : ● prendre en compte les différentes interprétations ou non interprétations – Évolution de l'usage des navigateurs web – Introduction au test en navigateur croisé ● Même si aujourd’hui c’est moins compliqué INFO401 - web (Source: "● prendre en compte les différentes interprétations ou non interprétations – Évolution de l'usage des navigateurs web – Introduction au test en navigateur croisé ● Même si aujourd’hui c’est moins compliqué INFO401 - web - CM1 - HTML de HTML1 à HTML5 ● HTML5 est un standard reconnu maintenant par tous les acteurs du web démo validation des pages ● Page HTM...")
62. Détail source à réviser : Page HTML1 texte et hyperlien première page web de l’histoire ● Page HTML5 véritable application en ligne python en ligne ● HTML5 = HTML + CSS + JavaScript INFO401 - web - CM1 - HTML A quoi servent les balises ? ● Les ba (Source: "Page HTML1 texte et hyperlien première page web de l’histoire ● Page HTML5 véritable application en ligne python en ligne ● HTML5 = HTML + CSS + JavaScript INFO401 - web - CM1 - HTML A quoi servent les balises ? ● Les balises ont un rendu par défaut mais ne servent pas à mettre e")
63. Détail source à réviser : , web sémantique... INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> INFO401 - (Source: ", web sémantique... INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> INFO401 - web - CM1 - HTML Code minimal ● Démo affichage code mi")
64. Détail source à réviser : ont pas affichées ! INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Standard (Source: "ont pas affichées ! INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Standard HTML5 <html> <body><head> INFO401 - web - CM1 - HTML Co")
65. Détail source à réviser : </body> </html> Balise ouvrante < nomElementHTML> Balise fermante </ nomElementHTML> INFO401 - web - CM1 - HTML Lorsque les balises sont imbriquées, si une balise A est ouverte avant une balise B alors la balise A sera f (Source: "</body> </html> Balise ouvrante < nomElementHTML> Balise fermante </ nomElementHTML> INFO401 - web - CM1 - HTML Lorsque les balises sont imbriquées, si une balise A est ouverte avant une balise B alors la balise A sera fermée après la balise B INFO401 - web - CM1 - HTML Code minimal <")
66. Détail source à réviser : e après la balise B INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Attribut (Source: "e après la balise B INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Attribut nom = " valeur" INFO401 - web - CM1 - HTML Code minimal")
67. Détail source à réviser : web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Commentaires < !-- commentaires --> INF (Source: "web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Commentaires < !-- commentaires --> INFO401 - web - CM1 - HTML Liens ● <a> ● Démo <a href="https://developer.mozilla.org/fr/">Le lien que vous devez absolument connaître</a> ●...")
68. Détail source à réviser : /h1> <p>La dernière version stable du HTML, <strong>HTML5</strong>, transforme le HTML qui était un simple balisage pour structurer des documents en une plate-forme complète de développement d'applications. (Source: "/h1> <p>La dernière version stable du HTML, <strong>HTML5</strong>, transforme le HTML qui était un simple balisage pour structurer des documents en une plate-forme complète de développement d'applications.")
69. Détail source à réviser : <strong> balise sémantique, <br> INFO401 - web - CM1 - HTML Image ● <img> ● Démo <img src="modem-56k.jpg"> ● Balise autofermante, attribut INFO401 - web - CM1 - HTML Audio ● <audio> ● Démo <audio controls src="dial_up_mo (Source: "<strong> balise sémantique, <br> INFO401 - web - CM1 - HTML Image ● <img> ● Démo <img src="modem-56k.jpg"> ● Balise autofermante, attribut INFO401 - web - CM1 - HTML Audio ● <audio> ● Démo <audio controls src="dial_up_modem_noises.ogg"></audio> ● Balise ouvrante, b")
70. Détail source à réviser : ofermante, attribut INFO401 - web - CM1 - HTML Audio ● <audio> ● Démo <audio controls src="dial_up_modem_noises.ogg"></audio> ● Balise ouvrante, balise fermante, attributs (dont un sans valeur) INFO401 - web - CM1 - HTML (Source: "ofermante, attribut INFO401 - web - CM1 - HTML Audio ● <audio> ● Démo <audio controls src="dial_up_modem_noises.ogg"></audio> ● Balise ouvrante, balise fermante, attributs (dont un sans valeur) INFO401 - web - CM1 - HTML Vidéo ● <video> ● Démo <video controls width="640"> <so")
71. Détail source à réviser : ource src="lhistoire-des-femmes-qui-ont-fait-linternet.mp4" type="video/mp4"> <source src="L'histoire des femmes qui ont fait l'Internet.webm" type="video/webm"> <p>Votre navigateur ne prend pas en charge les vidéos HTML (Source: "ource src="lhistoire-des-femmes-qui-ont-fait-linternet.mp4" type="video/mp4"> <source src="L'histoire des femmes qui ont fait l'Internet.webm" type="video/webm"> <p>Votre navigateur ne prend pas en charge les vidéos HTML5.</p> </video> ● Balise ouvrante, balise fermante, attributs INFO401 - web - CM1")
72. Détail source à réviser : 1999 56 kb/s https://ladsl (Source: "1999 56 kb/s https://ladsl")
73. Détail source à réviser : 1970  1980  1990  2000 INFO401 - web - CM1 - HTML Importance de l’historique quelques dates ● 1989 Naissance du web au Cern (Tim Berners- Lee) ● 1994 Tim fonde le W3C ● 2004 Création du WhatWG ● 2008 Premier brouillon (Source: "1970  1980  1990  2000 INFO401 - web - CM1 - HTML Importance de l’historique quelques dates ● 1989 Naissance du web au Cern (Tim Berners- Lee) ● 1994 Tim fonde le W3C ● 2004 Création du WhatWG ● 2008 Premier brouillon HTML5 INFO401 - web - CM1 - HTML Web ● Le réseau internet peut notamment être utili")
74. Détail source à réviser :  1970  1980  1990  2000 INFO401 - web - CM1 - HTML Importance de l’historique quelques dates ● 1989 Naissance du web au Cern (Tim Berners- Lee) ● 1994 Tim fonde le W3C ● 2004 Création du WhatWG ● 2008 Premier brouill (Source: " 1970  1980  1990  2000 INFO401 - web - CM1 - HTML Importance de l’historique quelques dates ● 1989 Naissance du web au Cern (Tim Berners- Lee) ● 1994 Tim fonde le W3C ● 2004 Création du WhatWG ● 2008 Premier brouillon HTML5 INFO401 - web - CM1 - HTML Web ● Le réseau internet peut notamment être utilisé pour la consultation de page web (mais pas que")
75. Détail source à réviser : 1960  1970  1980  1990 INFO401 - web - CM1 - HTML ● A quelle décennie associez vous les débuts du web (Source: "1960  1970  1980  1990 INFO401 - web - CM1 - HTML ● A quelle décennie associez vous les débuts du web")
76. Détail source à réviser : vigateur avec outils de développement ● MDN pour l’aide et les compléments importance des « bonnes » recherches / standards ! INFO401 - web - CM1 - HTML ● Avant 1999 56 kb/s https://ladsl.com/faq/histoire-ladsl-france (2 (Source: "vigateur avec outils de développement ● MDN pour l’aide et les compléments importance des « bonnes » recherches / standards ! INFO401 - web - CM1 - HTML ● Avant 1999 56 kb/s https://ladsl.com/faq/histoire-ladsl-france (27h pour télécharger un film de 700Mo) ab")
77. Détail source à réviser : 2002 ADSL 512 kb/s (3h) ● 2004 ADSL2+ 16Mb/s (6 min) ● 2007 début de la fibre 100Mb/s (56 s) (Source: "2002 ADSL 512 kb/s (3h) ● 2004 ADSL2+ 16Mb/s (6 min) ● 2007 début de la fibre 100Mb/s (56 s)")
78. Détail source à réviser : INFO401 - web - CM1 - HTML ● Avant 1999 56 kb/s https://ladsl (Source: "INFO401 - web - CM1 - HTML ● Avant 1999 56 kb/s https://ladsl")
79. Détail source à réviser : e des « bonnes » recherches / standards ! INFO401 - web - CM1 - HTML ● Avant 1999 56 kb/s https://ladsl.com/faq/histoire-ladsl-france (27h pour télécharger un film de 700Mo) abonnement + facturation du temps de communica (Source: "e des « bonnes » recherches / standards ! INFO401 - web - CM1 - HTML ● Avant 1999 56 kb/s https://ladsl.com/faq/histoire-ladsl-france (27h pour télécharger un film de 700Mo) abonnement + facturation du temps de communication ! ● 2002 ADSL 512 kb/s (3h)")
80. Détail source à réviser : tandards ! INFO401 - web - CM1 - HTML ● Avant 1999 56 kb/s https://ladsl.com/faq/histoire-ladsl-france (27h pour télécharger un film de 700Mo) abonnement + facturation du temps de communication ! ● 2002 ADSL 512 kb/s (Source: "tandards ! INFO401 - web - CM1 - HTML ● Avant 1999 56 kb/s https://ladsl.com/faq/histoire-ladsl-france (27h pour télécharger un film de 700Mo) abonnement + facturation du temps de communication ! ● 2002 ADSL 512 kb/s")
81. Détail source à réviser : nt la page que vous consultez s’est-elle retrouvée « quelque part » sur le « web » ? démo « Hello World » ● Espace sur un « serveur web » + « nom de domaine » ● Vous pouvez maintenant consulter la page ! INFO401 - web - (Source: "nt la page que vous consultez s’est-elle retrouvée « quelque part » sur le « web » ? démo « Hello World » ● Espace sur un « serveur web » + « nom de domaine » ● Vous pouvez maintenant consulter la page ! INFO401 - web - CM1 - HTML Notion de client/serveur ● Que se")
82. Détail source à réviser : est-elle retrouvée « quelque part » sur le « web » ? démo « Hello World » ● Espace sur un « serveur web » + « nom de domaine » ● Vous pouvez maintenant consulter la page ! INFO401 - web - CM1 - HTML Notion de client/serv (Source: "est-elle retrouvée « quelque part » sur le « web » ? démo « Hello World » ● Espace sur un « serveur web » + « nom de domaine » ● Vous pouvez maintenant consulter la page ! INFO401 - web - CM1 - HTML Notion de client/serveur ● Que se passe-t-il entre le moment où vo")
83. Détail source à réviser : « quelque part » sur le « web » ? démo « Hello World » ● Espace sur un « serveur web » + « nom de domaine » ● Vous pouvez maintenant consulter la page ! INFO401 - web - CM1 - HTML Notion de client/serveur ● Que se passe- (Source: "« quelque part » sur le « web » ? démo « Hello World » ● Espace sur un « serveur web » + « nom de domaine » ● Vous pouvez maintenant consulter la page ! INFO401 - web - CM1 - HTML Notion de client/serveur ● Que se passe-t-il entre le moment où vous soumettez l’adress")
84. Détail source à réviser : sans valeur) INFO401 - web - CM1 - HTML Vidéo ● <video> ● Démo <video controls width="640"> <source src="lhistoire-des-femmes-qui-ont-fait-linternet.mp4" type="video/mp4"> <source src="L'histoire des femmes qui ont fait (Source: "sans valeur) INFO401 - web - CM1 - HTML Vidéo ● <video> ● Démo <video controls width="640"> <source src="lhistoire-des-femmes-qui-ont-fait-linternet.mp4" type="video/mp4"> <source src="L'histoire des femmes qui ont fait l'Internet.webm" type="video/webm"> <p>Votre")
85. Détail source à réviser : controls width="640"> <source src="lhistoire-des-femmes-qui-ont-fait-linternet.mp4" type="video/mp4"> <source src="L'histoire des femmes qui ont fait l'Internet.webm" type="video/webm"> <p>Votre navigateur ne prend pas e (Source: "controls width="640"> <source src="lhistoire-des-femmes-qui-ont-fait-linternet.mp4" type="video/mp4"> <source src="L'histoire des femmes qui ont fait l'Internet.webm" type="video/webm"> <p>Votre navigateur ne prend pas en charge les vidéos HTML5.</p> </video>")
86. Détail source à réviser : " type="video/mp4"> <source src="L'histoire des femmes qui ont fait l'Internet.webm" type="video/webm"> <p>Votre navigateur ne prend pas en charge les vidéos HTML5.</p> </video> ● Balise ouvrante, balise fermante, attrib (Source: "" type="video/mp4"> <source src="L'histoire des femmes qui ont fait l'Internet.webm" type="video/webm"> <p>Votre navigateur ne prend pas en charge les vidéos HTML5.</p> </video> ● Balise ouvrante, balise fermante, attributs INFO401 - web - CM1 - HTML Compléments")
87. Détail source à réviser : Exemple, INFO401 - web - CM1 - HTML Publier une page web ● Comment la page que vous consultez s’est-elle retrouvée « quelque part » sur le « web » ? démo « Hello World » ● Espace sur un « serveur web » + « nom de domaine (Source: "Exemple, INFO401 - web - CM1 - HTML Publier une page web ● Comment la page que vous consultez s’est-elle retrouvée « quelque part » sur le « web » ? démo « Hello World » ● Espace sur un « serveur web » + « nom de domaine » ● Vous pouvez maintenant consulter la page ! INFO401 - we")
88. Détail source à réviser : INFO401 - web - CM1 - HTML Notion de client/serveur ● Que se passe-t-il entre le moment où vous soumettez l’adresse au navigateur et le moment où la page s’affiche à l’écran ? ● Commençons par préciser la différence entr (Source: "INFO401 - web - CM1 - HTML Notion de client/serveur ● Que se passe-t-il entre le moment où vous soumettez l’adresse au navigateur et le moment où la page s’affiche à l’écran ? ● Commençons par préciser la différence entre internet et web INFO401 - web - CM1 - HTML Internet ● Inte")
89. Détail source à réviser : des API JavaScript pour améliorer le stockage, le multimédia et l'accès au matériel.<br> https://developer.mozilla.org/fr/docs/Glossary/HTML5</p> ● Balise ouvrante, balise fermante, balises imbriquées, <strong> balise sé (Source: "des API JavaScript pour améliorer le stockage, le multimédia et l'accès au matériel.<br> https://developer.mozilla.org/fr/docs/Glossary/HTML5</p> ● Balise ouvrante, balise fermante, balises imbriquées, <strong> balise sémantique, <br> INFO401 - web - CM1 - HTML Ima")
90. Détail source à réviser : World » INFO401 - web - CM1 - HTML Lire une page web ● A l’aide d’un navigateur web démo « Hello World » ● Je peux la lire mais pas vous ! INFO401 - web - CM1 - HTML Consulter une page web ● En général lorsque vous consu (Source: "World » INFO401 - web - CM1 - HTML Lire une page web ● A l’aide d’un navigateur web démo « Hello World » ● Je peux la lire mais pas vous ! INFO401 - web - CM1 - HTML Consulter une page web ● En général lorsque vous consultez une page web à l’aide d’un navigateur w")
91. Détail source à réviser : ’aide d’un navigateur web, celle-ci ne se trouve pas sur votre ordi ! ● Vous la récupérez « quelque part » sur le « web » grâce à une « adresse » ● Exemple, INFO401 - web - CM1 - HTML Publier une page web ● Comment la pa (Source: "’aide d’un navigateur web, celle-ci ne se trouve pas sur votre ordi ! ● Vous la récupérez « quelque part » sur le « web » grâce à une « adresse » ● Exemple, INFO401 - web - CM1 - HTML Publier une page web ● Comment la page que vous consultez s’est-elle retrouvée « q")
92. Détail source à réviser : TML Client ● Votre ordinateur/navigateur est appelé client ● Il demande au serveur de lui « servir » une page web INFO401 - web - CM1 - HTML URL et résolution DNS ● Pour accéder à une page web stockée, hébergée sur un se (Source: "TML Client ● Votre ordinateur/navigateur est appelé client ● Il demande au serveur de lui « servir » une page web INFO401 - web - CM1 - HTML URL et résolution DNS ● Pour accéder à une page web stockée, hébergée sur un serveur, l’utilisateur saisi une adresse a")
93. Détail source à réviser : <html> <body><head> INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Balise ou (Source: "<html> <body><head> INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Balise ouvrante < nomElementHTML> Balise fermante </ nomElementH")
94. Détail source à réviser : ge</title> </head> <body> ... <!-- contenu --> ... </body> </html> Attribut nom = " valeur" INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</ (Source: "ge</title> </head> <body> ... <!-- contenu --> ... </body> </html> Attribut nom = " valeur" INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Balise autofermante < nomElementHTML>")
95. Détail source à réviser : but nom = " valeur" INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Balise au (Source: "but nom = " valeur" INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Balise autofermante < nomElementHTML> ou < nomElementHTML /> INF")
96. Détail source à réviser : < nomElementHTML /> INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Commentai (Source: "< nomElementHTML /> INFO401 - web - CM1 - HTML Code minimal <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> </head> <body> ... <!-- contenu --> ... </body> </html> Commentaires < !-- commentaires --> INFO401 - web - CM1 - HTML L")

📅 Repères chronologiques

Date	Événement
1989	Naissance du Web
1994	Fondation du W3C
2004	Création du WhatWG
2008	Publication du premier brouillon HTML5

📊 Tableaux de Synthèse

Évolution du Web et des standards HTML

Année	Événement
1989	Naissance du Web au CERN
1994	Fondation du W3C
2004	Création du WhatWG
2008	Publication du brouillon HTML5

⚠️ Pièges & Confusions Fréquentes

1. Confusion entre pages web et fichiers HTML.
2. Oublier le rôle du navigateur dans l'affichage.
3. Confusion entre URL et adresse IP.
4. Mauvaise compréhension de la résolution DNS.
5. Confusion entre balises autofermantes et non autofermantes.
6. Oublier l'importance des balises sémantiques.
7. Ne pas tester la compatibilité entre navigateurs.

✅ Checklist Examen

1. Comprendre la différence entre pages web et fichiers HTML.
2. Savoir créer une page web simple avec éditeur de texte.
3. Connaître le rôle du navigateur dans l'affichage.
4. Maîtriser la structure minimale d'une page HTML5.
5. Savoir utiliser les balises HTML courantes.
6. Comprendre la résolution DNS et le rôle du serveur DNS.
7. Identifier les éléments multimédias en HTML5.
8. Tester la compatibilité des pages web sur différents navigateurs.
9. Connaître l'évolution historique du Web.
10. Savoir créer une structure sémantique correcte.
11. Utiliser des outils de développement web.