Quel langage de programmation pour web ?
La programmation web est la programmation informatique qui permet d'éditer des sites web.
Elle permet la création d'applications, destinées à être déployées sur Internet ou en Intranet.Quel est le but de la programmation web ?
Le code HTML (pour HyperText Markup Language) est un code qui permet aux développeurs de donner des indications quant à la composition des pages web.
C'est ce code qui permet de créer des interfaces digitales avec lesquelles sont en lien les internautes.C'est quoi la programmation en HTML ?
Quels sont les différents types de programmation ?
La programmation orientée objet (POO) La programmation impérative. La programmation fonctionnelle. Apprendre la programmation informatique dynamique. La programmation itérative. Langage informatique : La programmation récursive. La programmation logique.
Technologies Web
LES TECHNOLOGIES DU WEB
Programmation Web
Programmation Web
Quelques bases de programmation informatique
Initiation à la programmation orientée-objet avec le langage Java
Résumé du cours de Programmation Java
Les bases de la programmation orientée objet avec Java
Cours programmation
1Programmation webProgrammation webPARTIE 1 :PARTIE 1 :Codes Codes exexéécutcutéésspar les clientspar les clients(HTML(HTML--CSSCSS--JAVASCRIPT)JAVASCRIPT)Nhan LE THANH Nhan LE THANH --Brice COVESBrice COVESUniversitUniversitééde Technologie de Nicede Technologie de NicePlanFEUILLES DE STYLE CSS2INTRODUCTIONDEFINITIONSCLASSES, IDENTIANTUNITESBOITES ET COUCHESLANGAGE JAVASCRIPTINTRODUCTIONJAVASCRIPT ET HTMLELEMENTS DE JAVASCRIPTOBJETS DOMAUTRES OBJETSEVENEMENTSDHTMLDEFINITIONSSERVICE HTTP ET NOTION URLMODELE CLIENT/SERVEURMODELE CLIENT SERVEUR VIA LE SERVICE HTTPARCHITECTURE 3-TIERS LANGAGE HTMLINTRODUCTIONBALISES DE BASEBALISES MULTIMEDIASIMAGES CLIQUABLES FORMULAIRESCADRES2PROGRAMMATION WEBLe service HTTP : modèle de basePROGRAMMATION WEBModèle de document dynamique avec CGILe serveur HTTP dispose d'une interface CGI (Commun Gateway Interface), permettant d'invoquer l'exécution d'un programme sur le serveur :L'ordre sera transmis par le client (navigateur) sous la forme d'un hyperlien Ce lien contiendra des paramètres www.test.com?parametre1=toto¶m2=titiLe serveur HTTP reçoit cet ordre, il organisera ensuite l'exécution du programme demandé.
La communication entre le programme et le serveur HTTPD est assurée par : les entrées/sorties standard (STDIN et STDOUT) et un ensemble de variables d'environnement du serveur HTTPDLe résultat de l' exécution sera envoyé au client webProtocoles web :http:// pour la consultation de pages web ftp:// pour la consultation de sites FTPtelnet:// pour la connexion à un terminal distant mailto:// pour l'envoi d'un courrier électronique NavigateurHTMLHTTPDProtocole HTTPTCP/IP80CGIUn prog.Machine serveurRequête CGIDocument généré3PROGRAMMATION WEBL' URL ou l'ADRESSE WEBNOTION d'URL (Uniform Resource Locator) :Un URL représente une identification d'un endroit où stocke une ressource sur le réseau Internet Une ressource peut-être stockée à plusieurs endroits, elle possède dont un ou plusieurs URLFormat d'un URL : (note : le symbole [xxx] signifie que xxx est facultatif) [?Paramètres][Chemin privé][#Ancre]NomChemin[:Port]HôteProtocole://?nom=dupont&prenom=pierreindex.php/pages/:8080www.site2.frhttp://#chapitre2index.htm?/home/www.site1.frhttp://Exemple 1 : une ressource statique est un fichier htmlExemple 2 : une ressource dynamiquePROGRAMMATION WEBNOTION d'URI (Uniform Resource Identificator) :Un URI représente une identification de l'origine d'une ressource sur le réseau Internet Une ressource peut-être stockée à plusieurs endroits, mais ces copies ont la même origine.
Une ressource a donc un et un seul URIFormat d'un URI : 2) Final//EN">La version XHTML impose la spécification de l'URI de définition de ce langage (un DTD) suivante : 0) Transitional//EN" " http//www.w3.org/xhtml1/DTD/xhtml1-transitional.dtd">4PROGRAMMATION WEBLe passage de paramètres à une page de scripts :Modes de passage de paramètres :GET: la chaîne de paramètres est envoyée avec l'URL après le caractère '?' et sera déposée dans une variable d'environnement, appelé QUERY_STRING du service HTTP (sur la machine serveur).chaque paramètre comprend 2 opérandes un nom et une valeur les paramètres sont reliés par le symbole '&'index.php?Nom-de-variable='Valeur-de-variable'Convention : certaines règles de transformation automatique sont appliquées : le caractère d'espace (' ') est remplacé par Avantage : simple, dans frames, liens cliquablesInconvénients : limitée à 200 car., sécuritéPOST: la chaîne de paramètre sera envoyée indépendamment de l'URL et dirigé vers le fichier STDIN (Standard INPUT) du programme CGI.Avantage : taille illimitée, traitement standard Inconvénients: nécessite un formulaire
Dans le cas où la requête d'un client se limite àdemander au serveur de lui fournir un fichier, le serveur se base sur l'extension de ce fichier pour déterminer son type (headers) Conformément au protocole HTPP, il faut alors transmettre ce type dans l'en-tête, avec la clause 'Content-type: typeDocument', pour que le navigateur sache comment décrypter les informations qui lui proviennent par la suiteExemple: Pour un fichier HTML par exemple, l'extension est le plus souvent .html, et la valeur de typeDocument est 'text/html'5Rappel du modèle de programmation Client/Serveur sur Internet :une application CL/SV sur le réseau Internet est constitué de 2 parties :Un programme Client de l'application etUn programme Serveur de l'applicationPROGRAMMATION WEBProgramme Client•Interface d'utilisateur•Non permanent•Orienté graphique•Langage intermédiaireProgramme Serveur•Réalisation de services•Processus permanent•Orienté traitement•Ports TCP exclusifsProgrammeClient de l'app.ProgrammeServeur de l'app.Protocole de l'app.TCP/IPPremière approche programmation CL/SV via web :Utilisation l'interface CGI pour activer la partie Serveur de l'applicationLe programme Client est un script (X)HTML (HyperText Markup Language) Le programme Serveur est un programme CGILe protocole de l'application doit respecter les restriction de HTTPPROGRAMMATION WEBNavigateurHTMLHTTPDProtocole HTTPTCP/IP80Partie serveur de l'applicationPartie serveur de l'applicationProtocole de l'applicationCGI6Les limites de la première approche Côté Client : absence des outils de programmation et les outils de présentation sont limités à la capacité du langage (X)HTMLCôté Serveur : absence des outils de développement adaptés, la communication avec le serveur HTTP est à automatiser Côté Protocole : les paramètres sont passés en mode texte avec un format imposé (absence de sécurité et capacité limitée) et deux modes de récupération fixes (GET et POST) PROGRAMMATION WEBRenforcer les outils de programmation et de présentation du côté CLIENTNormaliser les outils de développementdu côtéSERVEURAutomatiser le processus de communicationClient/ServeurPROGRAMMATION WEBModèle de programmation web à 2-tiers :Tiers Client : Programme interface comprenant des outils de présentation et de programmation : (X)HTML, Plug-in, JavaScript, Style, Applet JavaTiers Serveur : Programme de services, appelé " objets de métiers ", développé depuis un environnement de développement normalisé, dit préprocesseur de HTTP, Par exemple : PHP, JSP, ASPHTMLHTTPDHTTPTCP/IP80Partie client de l'applicationPartie serveur de l'applicationProtocole App.PréprocesseurOutilsProg.NavigateurTCP/IP7Modèle de programmation web à 2-tiers :Outils de présentation pour CLIENT :HTML/XML : Langage cadre permet d'une présentation de base et une intégration des différents modes de programmation et de présentation multimédiaCSS2 : Langage de définition de style de présentation pour les balises (X)HTML.
Il permet d'une présentation plus fine et paramétrablePlug-in : Des programmes d'interprétation des types de données multimédia permettant au navigateur d'afficher ces données (word, excel, ) Flash animations dynamiques utilisant la technologie MacromédiaOutils de programmation pour CLIENT :JavaScript : Langage de programmation intégré dans le (X)HTML, permettant de manipuler les objets documentaires de (X)HTML, de créer et capturer et manipuler des évènements sur interface et d'effectuer des calculsApplets Java : des programmes java qui sont exécutés par une machine virtuelle Java intégrée dans le navigateur.
Ces programmes échangent les données avec (X)HTML par les zones variables partagées.PROGRAMMATION WEBPROGRAMMATION WEBModèle de programmation web à 3-tiers :HTMLHTTPDHTTPTCP/IP80Partie client de l'applicationPartie serveur de l'applicationProtocole App.PréprocesseurOutilsProg.NavigateurTCP/IPMédiateurde base dedonnéesTCP/IPSGBDPartie SGBDde l'applicationSQL3e-Tiers de "Bases de données ": Programmation des sources de données pour l'application (mysql,sql ) 2e-Tiers d' "Objets de métier ": Programmation de services liés à l'application réelle (Langages : asp/php/servlet/cgi ) 1er-Tiers de " Client ": Programmation interfaced'utilisateur (html/css/js/flash/applet) TCP/IP8PROGRAMMATION WEBLangage HTMLINTRODUCTIONLangage à balises : chaque balise est une instruction de mise en forme de texte contenu dans cette baliseUne balise peut contenir des textes et/ou des autres balises autoriséesPermet d'expliciter les/la manière(s) de mettre en forme de textesLiens hypertexte :Chaque document HTML peut-être représenté par un URL comme une ressource sur Internet. Cliquer iciUn document HTML peut contenir des liens vers les autres documents HTML ou les autres sources de données (multimédia, programme)̀Introduction : Premier exemple de HTMLPROGRAMMATION WEBLangage HTML
Mon premier document HTML
Je suis étudiant(e) de l'Université de Nice et Sophia-Antipolis.
Je travaille à l'IUT au sein du département Informatique.9BALISES DE BASE du langage HTMLFormat général de balise : Les balises conteneurs : les balises contiennent du texte et éventuellement des balises.
Une balise conteneur est utilisée pour présenter ou structurer le texte et les balises qui lui appartiennent.
Exemple :
PROGRAMMATION WEBLangage HTMLBalises conteneur
Ajout d'une ligne horizontale
Ajout d'un paragraphe ou d'une nouvelle ligne
ou
Titre dont la taille est dans l'ordre décroissent
donne une épaisseur au trait.
donne la longueur du trait
le trait peut être aligné à droite, à gauche ou centré
le trait n'a pas d'ombre
Utilisation de P et BR : (paragraphe/retour à la ligne)
CLEAR quand il a la valeur leftva faire le même saut de ligne et fait un déplacement vers le bas en respectant la marge gauche.
Ceci permet aussi de mettre des images autour de texte. L'attribut CLEAR peut être utilisé dans la balise
PROGRAMMATION WEBLangage HTMLBalises de structuration (suite)
- Outre les numéros 1, 2, 3 etc vous pouvez accéder aux numéros A,B,C etc et pouvez commencer à un autre rang que le premier (START).
- Niveau 1
- Niveau 2
- Niveau 2
- Niveau 1
COMPACT permet l'écriture de numéros plus compacts.
- Ainsi il est possible de décider que la puce sera un disque vide, un cercle ou un carré. Les listes peuvent être emboîtées en niveaux.
Par exemple les lignes suivantes seront emboîtées:
L'argument optionnel PROMPT permet d'afficher un texte avant le champs de recherche.
Cette balise doit être unique pour respecter la norme HTML 3.2 et elle est obligatoire établit un lien avec un autre document (de style en particulier)̀PROGRAMMATION WEBLangage HTMLBalises entêtes : donne à votre document des informations qui seront lues par le serveur http.
Ces informations sont généralement votre nom (NAME), le nom de l'auteur (AUTHOR), le contenu (CONTENT), une directive HTTP-EQUIV qui prend souvent la valeur Expires, Keywords, Reply_to.
La directive Expiresest utilisée par la plupart des navigateurs pour donner une date à partir de laquelle la page ne doit plus être conservée dans le cache de votre logiciel mais bien rechargée sur le serveur à chaque passage sur la page.
Utilisée pour les moteurs de recherche.
LINK=couleur - Définit la couleur des URL non visités VLINK=couleur - Définit la couleur des URL visités ALINK=couleur - Définit la couleur des URL lorsqu'on clique dessus PROGRAMMATION WEBLangage HTMLQUELQUES BALISES DE BASE : balises de style entre
et Texte exposant Texte clignotantTexte gras épais >STRONG>Texte souligné Texte rayéCentrer les éléments (textes, images)
Six tailles sont disponibles et la valeur par défaut est 3, la plus grosse étant de valeur 7Une partie de texte dans la page peut voir sa taille modifiée si elle est entourée de la balise FONT qui contient un attribut size: Valeursert à spécifier , ici encore, 7 tailles de polices (le défaut étant .
3) La syntaxe SIZE=+i ou i peut être compris entre 1 et 7 est admise, elle permet de donner une taille relative par rapport à la taille en cours Exemple :permet de colorier les caractères (ici en rouge) donne comme résultat :permet de colorier les caractères (ici en rouge) PROGRAMMATION WEBLangage HTMLQUELQUES BALISES MULTIMEDIA : Liens et Ancres entre
et Liens: Un lien permet de définir une région sensible au clic souris dans un document et en même temps, l'endroit ou l'on va se retrouver après ce clic.Cette adresse peut être un document différent, par exemple, mais également un endroit précis (défini par une ancre) dans le document Syntaxe d'un lien : texte où les attributs rel, rev, et title sont peu usités et ont les mêmes significations que celles exposées dans la balise Syntaxe d'un Ancre : définit un ancre avec le nom_ancre dans le document.
Ex: chapitre 1Pour faire référence à une ancre : une ancre 14PROGRAMMATION WEBLangage HTMLQUELQUES BALISES MULTIMEDIA : Liens et Ancres entre
et Exemple d'un ancre dans un même document HTML :Définition : Référencer depuis d'un autre endroit du document :Chapitre 1Exemple de référence à un autre document HTML : Chapitre 1Rappels: une URL est toujours de la forme : protocole ://host.domaine:port/pathname où protocole peut être : file, http, news, gopher, telnet, wais ou mailto.Les éléments port et pathname sont optionnelscliquez ici pour charger le fichierA Sur un PC on peut utiliser la ressource "file" pour référencer à un fichier, par exemple, mais cela n'est pas valable sur un serveur : fichier sur c: PROGRAMMATION WEBLangage HTMLQUELQUES BALISES MULTIMEDIA : Images entre
etHSPACE contrôle l'espacement horizontal en pixels à droite et à gauche de l'image ISMAP et USEMAP pour utiliser l'image comme un ou des liens cliquables15PROGRAMMATION WEBLangage HTMLQUELQUES BALISES MULTIMEDIA : Images entre
et Charger une image du serveur nyx à votre document
Charger une image de votre répertoire courant en spécifiant la taille
Afficher en grande d'une image en cliquant sur l'image : 
PROGRAMMATION WEBLangage HTMLIMAGES CLIQUABLES entre et Une image cliquable est une image contenant des zones servant les liens vers les autres documentsPour la mise en place d'une image cliquable, on doit composer 2 balises :une balise Image IMG pour charger l'image Une balise MAP pour définir les zones et les liens concernésla référence à la balise Map est faite par attribut USEMAPBalise MAP : Syntaxe :