Interaction entre l'homme et la machine sur le Web

« Interaction entre l'homme et la machine sur le Web Sommaire I- Un peu d'histoire .....................................................................................................................

2 II- Un nouveau langage : le HTML .....................................................................................

3 A. Premiers pas en HTML......................................................................................

3 B. URL et arborescences........................................................................................

5 1. URL .......................................................................................................................................

5 2. Chemin absolu et chemin relatif ..............................................................................

5 C. Créer une page web ...........................................................................................

6 1. Une page basique ............................................................................................................

6 2. Quelques balises utiles..................................................................................................

7 a. Le lien hypertexte : la balise ..............................................................................

7 b. Les images : la balise ........................................................................................

7 c. Les tableaux : la balise table.......................................................................................

8 d. Les formulaires et les entrées : la balise form ....................................................

8 III- Créer l'interactivité avec le Javascript ...................................................................

10 A. Les bases .............................................................................................................10 B. Les événements..................................................................................................11 1. Les événements de curseur .......................................................................................

11 2. Les événements de formulaire.................................................................................

12 C. Javascript avec HTML DOM ...........................................................................13 D. Exercices .............................................................................................................13 IV- Les requêtes HTTP ...........................................................................................................

15 A. Le principe du modèle Client-Serveur..........................................................15 B. Les requêtes .......................................................................................................16 C. Introduction au langage PHP .........................................................................19 D. Conclusion ..........................................................................................................26 I- Un peu d'histoire Le "World Wide Web", plus communément appelé "Web" a été développé au CERN (Conseil Européen pour la Recherche Nucléaire) par le Britannique Sir Timothy John Berners-Lee (photo du haut) et le Belge Robert Cailliau (photo du bas) au début des années 90. À cette époque les principaux centres de recherche mondiaux étaient déjà connectés les uns aux autres, mais pour faciliter les échanges d'information Tim Berners-Lee met au point le système hypertexte. Celui-ci permet, à partir d'un document, de consulter d'autres documents en cliquant sur des mots clés.

Ces mots "cliquables" sont appelés hyperliens (ou encore lien hypertexte) et sont souvent soulignés en bleu.

Ces hyperliens sont plutôt connus aujourd'hui sous le simple terme de "liens". Voici un aperçu de la première page web sur laquelle les hyperliens apparaissent en bleus : Cette première page web est toujours consultable à l'adresse suivante : http://info.cern.ch/hypertext/WWW/TheProject.html Tim Berners-Lee développe le premier navigateur web (logiciel permettant de lire des pages contenant des hypertextes), il l'appelle simplement "WorldWideWeb".

Il faudra attendre 1993 et l'arrivée du navigateur web "NCSA Mosaic" pour que le web commence à devenir populaire en dehors du petit monde de la recherche. En 1994, Tim Berners-Lee est nommé président du World Wide Web Consortium (W3C) qui est une organisation non lucrative permettant de définir des standards pour les technologies liées aux web.. En 2009, il crée une fondation indépendante du W3C, baptisée « World Wide Web Foundation » dans le but d'étendre le Web aux pays en voie de développement et de garantir un Web ouvert, utilisable par tous II- Un nouveau langage : le HTML L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web.

C’est un langage de balisage permettant d’écrire de l’hypertexte, d’où son nom.

HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias, dont des images, des formulaires de saisie, et des programmes informatiques.

Il permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l’accessibilité du web.

Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de style en cascade). Source: Wikipédia Pour l'instant, nous allons retenir deux éléments de cette définition "conçu pour représenter les pages web " et " un langage de balisage ". Grâce au HTML il est possible d'afficher dans un navigateur (Firefox, Chrome, Opera,....), du texte, des images, de proposer des hyperliens (liens vers d'autres pages web), d'afficher des formulaires et même maintenant d'afficher des vidéos (grâce à la dernière version du HTML, l'HTML5). HTML n'est pas un langage de programmation (comme le Python par exemple), ici, il n'y a pas de conditions, de boucles....c'est un langage de description. A.

Premiers pas en HTML Activité 1 Pour aborder le HTML, nous allons, dans un premier temps utiliser le site jsfiddle.net. Après avoir lancé votre navigateur web, tapez http://jsfiddle.net/ dans la barre d'adresse. Une fenêtre partagée en quatre parties (HTML, CSS, Javascript, Result) apparait. Dans la partie consacrée au HTML, saisir le code suivant : Hello World! Ceci est un titre Ceci est un paragraphe.

Avez-vous bien compris ? Quel est l'affichage obtenu dans la partie Result ? En HTML tout est une histoire de balise que l'on ouvre et que l'on ferme.

Une balise ouvrante est de la forme , les balises fermantes sont de la forme . Toute balise ouverte doit être refermée à un moment ou un autre.

La balise ouvrante et la balise fermante peuvent être sur la même ligne ou pas, cela n'a aucune importance. Il est important de savoir qu'une structure comme celle de gauche est interdite, la balise2 a été ouverte après la balise1, elle devra donc être refermée avant la balise1. La structure de droite est correcte. Structure erronée Structure correcte Dans l'activité 1, cette règle « d'imbrication » des balises est appliquée avec la balise et la balise . Il est important de comprendre que chaque balise a une signification qu'il faut bien respecter (on parle de la sémantique des balises).

Par exemple, le texte situé entre la balise ouvrante et fermante est obligatoirement un titre important (il existe des balises , ......qui sont aussi des titres, mais des titres moins importants (sous-titre)).

La balise permet de définir des paragraphes, enfin, la balise permet de mettre en évidence un élément important. Vous devez aussi savoir qu'il existe des balises qui sont à la fois ouvrantes et fermantes () : un exemple, la balise permettant de sauter une ligne, la balise (balise qu'il faut d'ailleurs éviter d'utiliser pour différentes raisons que nous n'aborderons pas ici). Il est possible d'ajouter des éléments à une balise ouvrante, qui sont appelés attribut.

Une balise peut contenir plusieurs attributs : Il existe beaucoup d'attributs différents, nous allons nous contenter de 2 exemples avec l'attribut id ( pour identifiant) et class.

Nous verrons l’intérêt de ces attributs dans l'activité suivante. Activité 2 : Le CSS Le HTML n'a pas été conçu pour gérer la mise en page (c'est possible, mais c'est une mauvaise pratique).

Le HTML s'occupe uniquement du contenu et de la sémantique, pour tout ce qui concerne la mise en page et l'aspect « décoratif » (on parle du « style » de la page), on utilisera le CSS (Cascading Style Sheets). Dans JSFIDDLE, il est possible d'écrire du CSS dans la fenêtre en haut à droite. 1) Dans la partie consacrée au HTML, saisir le code suivant : Ceci est un titre Ceci est un sous titre Ceci est un paragraphe. Ceci est un autre paragraphe. Dans la partie consacrée au CSS, saisir le code suivant : h1 { text-align: center; background-color: red; } h2 { font-family: Verdana; font-style: italic; color: green; } Quel changement sont apparus dans l'affichage ? p { color: red; } Avec le code CSS ci-dessus, les propriétés « text-align » et «background-color» seront appliquées au contenu de toutes les balises de type h1 (avec respectivement les valeurs «center» et «red»)..... 2) Ajouter au code CSS les lignes suivantes : #para_1 { font-style: italic; color: blue; } Quels sont les nouveaux changements ? Il est donc possible de cibler un paragraphe et pas un autre en utilisant l'id du paragraphe (en CSS l'id se traduisant par le signe #). Il est aussi possible d'utiliser l'attribut class à la place de l'id.

Dans le CSS on utilisera le point .

à la place du #. La différence entre "id" et "class" n'est pas très importante. L'attribut "class" permet de donner le même nom à plusieurs reprises dans une même page. Si nous avions eu un troisième paragraphe, nous aurions pu avoir : Voici un 3e paragraphe, mais nous n'aurions pas pu avoir : Voici un 3e paragraphe , car le nom para_1 a déjà été utilisé pour le 1er paragraphe. JSFIDDLE est un très bel outil, mais il ne peut pas être utilisé pour la réalisation d'un vrai site internet (ou d'une vraie application web).

Pour cela, nous allons utiliser un éditeur de texte tel que Notepad++, ou bien encore Visual Studio Code. Avant de créer un site internet, il est important de comprendre le fonctionnement et l'organisation de l'arborescence d'un site. B.

URL et arborescences 1.

URL Dans la barre d'adresse de votre navigateur web vous trouverez, quand vous visitez un site, des choses du genre : "http://info.cern.ch/hypertext/WWW/History.html".

"http" désigne le protocole utilisé, "info.cern.ch" est le nom du domaine, "/hypertext/WWW/History.html" est le chemin indiquant où se trouve le fichier "History.html", ce chemin s'appelle l'URL. Une URL (Uniform Resource Locator) permet d'identifier une ressource (par exemple un fichier) sur un réseau.

Elle indique « l'endroit » où se trouve une ressource sur un ordinateur. Un fichier peut se trouver dans un dossier qui peut lui-même se trouver dans un autre dossier...

Il s’agit d’une structure en arborescence, car elle ressemble à un arbre à l'envers comme le montre l'image ci-contre. La base de cet arbre s'appelle la racine et est représentée par.... »