Introduction à la programmation web

Transcription

1 Introduction à la programmation web Nouvelles Technologies Dr. Thé Van LUONG HEIG-VD Switzerland 8 octobre /34 8 octobre / 34

2 Plan 1 État de l art des langages orientés web 2 Le langage HTML 2/34 8 octobre / 34

3 Plan 1 État de l art des langages orientés web 2 Le langage HTML 2/34 8 octobre / 34

4 Plan 1 État de l art des langages orientés web 2 Le langage HTML 3/34 État de l art des langages orientés web 8 octobre / 34

5 État de l art des langages orientés web Technologies web Voici les différentes techniques de programmation web : Le langage HTML Les feuilles de style CSS Le langage Javascript Le langage PHP Macromedia Flash Les applets Java Ajax XHTML, XML et Java 4/34 État de l art des langages orientés web 8 octobre / 34

6 État de l art des langages orientés web Le langage HTML Qu est-ce que c est le HTML? HTML (Hypertex Markup Language) est le langage universel utilisé pour communiquer sur le Web. Il s agit d un langage constitué de balises conçu pour écrire des pages webs. Le HTML omniprésent sur le web. La majorité des pages web sont au format HTML. Le navigateur internet interprète le code HTML de chaque page web, pour le transmettre sous forme d informations visuelles. 5/34 État de l art des langages orientés web 8 octobre / 34

7 État de l art des langages orientés web Le langage HTML Qu est-ce que c est le HTML? HTML (Hypertex Markup Language) est le langage universel utilisé pour communiquer sur le Web. Il s agit d un langage constitué de balises conçu pour écrire des pages webs. Le HTML omniprésent sur le web. La majorité des pages web sont au format HTML. Le navigateur internet interprète le code HTML de chaque page web, pour le transmettre sous forme d informations visuelles. 5/34 État de l art des langages orientés web 8 octobre / 34

8 État de l art des langages orientés web A quoi ressemble du code HTML? On appelle balise tout ce qui est de la forme <blabla>... </blabla>. 6/34 État de l art des langages orientés web 8 octobre / 34

9 État de l art des langages orientés web A quoi ressemble du code HTML? Et le résultat de ce code interprété : 6/34 État de l art des langages orientés web 8 octobre / 34

10 État de l art des langages orientés web Le langage CSS HTML = fond Dans le langage HTML, on va se concentrer sur le texte et le fond. CSS = forme Dans le langage CSS (Cascading Style Sheets), on se concentra sur la forme, c est à dire tout ce qui correspond à la mise en page et au style. 7/34 État de l art des langages orientés web 8 octobre / 34

11 État de l art des langages orientés web Le langage CSS 7/34 État de l art des langages orientés web 8 octobre / 34

12 État de l art des langages orientés web Le langage Javascript A quoi cela sert? Javascript est un langage de scripts qui permet d ajouter des programmes simples à une page HTML. Les programmes sont exécutés du «côté client». Interactivité côté client Contrairement au langage HTML, on peut parler de programmation dynamique. L action de l utilisateur entraine l affichage à l écran de nouveaux menus. 8/34 État de l art des langages orientés web 8 octobre / 34

13 État de l art des langages orientés web Le langage PHP Qu est-ce que c est? PHP est aussi un langage de scripts, mais cette fois cela se passe du «côté serveur». Il y a souvent une interaction avec une base données. Interactivité côté serveur Par exemple imaginez un site amateur de sondages qui stocke dans une base de données tous les avis des utilisateurs. 9/34 État de l art des langages orientés web 8 octobre / 34

14 État de l art des langages orientés web Le langage PHP 9/34 État de l art des langages orientés web 8 octobre / 34

15 État de l art des langages orientés web Le langage Flash Qu est-ce que c est? En bref, Flash est une technologie web permettant de créer des sites interactifs très soignés. Par exemple, on peut trouver Flash dans toutes les vidéos en Streaming. Mais aussi dans des sites très soignés comme les sites de cinéma. 10/34 État de l art des langages orientés web 8 octobre / 34

16 État de l art des langages orientés web Le langage Flash 10/34 État de l art des langages orientés web 8 octobre / 34

17 État de l art des langages orientés web Les applets java Qu est-ce que c est? Java est un langage de programmation, permettant de concevoir des vrais programmes informatiques. Le principe des applets Java est de mettre ces programmes Java directement sur le web. 11/34 État de l art des langages orientés web 8 octobre / 34

18 État de l art des langages orientés web Le langage Ajax Qu est-ce que c est? Ajax est une nouvelle technologie web, qui se base sur du Java et du Javascript. Elle permet de gérer une plus forte dynamicité des pages web côté client. Exemples Gmail et Facebook sont des sites fortement conçus en Ajax : Le fait de cliquer sur des onglets fait apparaitre des menus déroulants. 12/34 État de l art des langages orientés web 8 octobre / 34

19 État de l art des langages orientés web Le langage XML Qu est-ce que c est? Le XML est un langage pour informaticiens experts. Ce langage associé à du Java, permet de générer dynamiquement des pages web. Exemple : Moteur de recherche Lorsqu on tape une recherche sur Google, une page HTML est générée automatiquement et nous renvoye les résultats de la recherche. 13/34 État de l art des langages orientés web 8 octobre / 34

20 Plan 1 État de l art des langages orientés web 2 Le langage HTML 14/34 Le langage HTML 8 octobre / 34

21 Fonctionnement La majorité des pages web sont au format HTML. Le navigateur internet interprète le code HTML de chaque page web, pour le transmettre sous forme d informations visuelles. Votre travail Il ne s agit plus d utiliser le navigateur internet pour naviguer, mais d écrire du code HTML. 15/34 Le langage HTML 8 octobre / 34

22 Fonctionnement La majorité des pages web sont au format HTML. Le navigateur internet interprète le code HTML de chaque page web, pour le transmettre sous forme d informations visuelles. Votre travail Il ne s agit plus d utiliser le navigateur internet pour naviguer, mais d écrire du code HTML. 15/34 Le langage HTML 8 octobre / 34

23 Langage interprété Un outil de traitement de texte comme Word, restitue exactement votre document au moment où vous le tapez avec telle police de caractères. HTML : langage interprété En HTML au moment où vous écrivez le code, vous ne saurez jamais exactement ce que le navigateur affichera à l écran. Conséquences logiques Vous n avez pas la maîtrise totale du document. La mise en page et le style d un document en HTML sont des opérations fastidieuses. 16/34 Le langage HTML 8 octobre / 34

26 Définition de code On appelle balise tout ce qui est de la forme <blabla>... </blabla>. 17/34 Le langage HTML 8 octobre / 34

27 Définition de code Et le résultat de ce code interprété : 17/34 Le langage HTML 8 octobre / 34

28 Editeur web? Le langage html semble fastidieux et réservé à première vue pour des informaticiens. Pourquoi ne pas utiliser plutôt un éditeur web? On peut ainsi discuter longtemps sur plusieurs points : Intérêts pédagogiques d apprendre à se servir d un éditeur web en Master 2? Logiciel gratuit aussi performant que DreamWeaver/FrontPage? Code généré compatible entre les navigateurs? (Internet Explorer, Mozilla Firefox, Chrome, Opera, Safari... ) Si je veux intégrer du code javascript, php et flash pour mon site web, comment je fais çà facilement? 18/34 Le langage HTML 8 octobre / 34

33 Editeur web? Quel est vraiment l avantage de faire du code HTML? On peut là aussi discuter longtemps : Difficile d apprentissage seul mais une compétence recherchée dans le monde industriel. Si respects standards W3C, code compatible sur tous les navigateurs. Un simple éditeur texte comme notepad suffit et code compatible tout système d exploitation (Mac, Windows, Linux). Conception du document de A à Z (chirurgie) => Compréhension totale du document web. Intégration de code dans des sites web populaires (myspace, ebay,... ). 19/34 Le langage HTML 8 octobre / 34

39 Editeur web? En ce qui concerne le projet final de création de site web? Tolérance quant à la création d un site web à l aide d un éditeur web. Intolérance quant à la qualité du code généré et compatibilité navigateurs. Est-ce que l utilisation d un éditeur web produit de meilleurs sites internet? 20/34 Le langage HTML 8 octobre / 34

42 Si les discussions sont terminées, on peut maintenant passer à la partie dure... 21/34 Le langage HTML 8 octobre / 34

43 Balises Une balise est une instruction qui marque une action à interpréter pour le navigateur. <html> <head> < t i t l e > T i t r e de l a page < / t i t l e > < / head> <body> <h2> Un document HTML < / h2> V o i c i un <b> exemple simple < / b> de < i > ce que l on peut f a i r e < / i > avec l e langage HTML. < / body> < / html> 22/34 Le langage HTML 8 octobre / 34

44 Balises propriétés Une balise s ouvre et se ferme toujours. ex : <html>... </html>. Une balise peut être écrite en minuscules ou en majuscules. ex : <B>... </b> Les espaces et sauts de lignes sont ignorés. Dans le HTML, il n y a pas de mise en page. 23/34 Le langage HTML 8 octobre / 34

47 Balises de structure de document Voila les trois balises obligatoires qui définissent le document HTML : 1 La balise <html>. Tout page HTML doit débuter par <html> et se finir par </html>. Cette balise définit le type du document. 2 La balise <head>. Il s agit de l entête du document HTML. On peut y ajouter des informations diverses (exemple CSS ou Javascript). 3 La balise <body>. Il s agit du corps du document. C est ici que l on va mettre tout le contenu du document. 24/34 Le langage HTML 8 octobre / 34

50 Balises de structure de document <html> <head> i c i du code css / j a v a s c r i p t... < / head> <body> Tout l e contenu de notre page web va ê t r e i c i. < / body> < / html> 25/34 Le langage HTML 8 octobre / 34

51 création d un document HTML Document HTML La création se fait avec un éditeur de texte (exemple : Notepad) Étape de création 1 Ouvrir Bloc-notes. (Démarrer -> Exécuter -> Notepad) 2 Fichier -> Enregistrer sous 3 Nom du fichier : nomdocument.html ; Type : Tous les fichiers 26/34 Le langage HTML 8 octobre / 34

52 création d un document HTML Exercice Créer sa page HTML avec les balises de structure <html>, <head>, <body> Ecrire du texte dans la balise <body> </body> 26/34 Le langage HTML 8 octobre / 34

53 La balise <head> Dans l entête du document, on peut placer diverses informations comme du code CSS, ou du code Javascript. (entre <head>... </head>) Titre au document La balise <title> qui se met exclusivement entre <head>... </head> permet de mettre à l extérieur de la fenêtre du document web. Exercice Mettre un titre. Le voyez-vous? 27/34 Le langage HTML 8 octobre / 34

56 Les balises de style Contenu de <body> Dans la balise <body>, on va mettre tout le contenu de notre document. Balises de styles La balise <b> permet de mettre du texte en gras. La balise <i> permet de mettre du texte en italique. 28/34 Le langage HTML 8 octobre / 34

57 Gras et italique Exercice Reproduire la phrase ci-dessous. Voici un exemple simple de ce que l on peut faire avec le langage HTML. 29/34 Le langage HTML 8 octobre / 34

58 Gras et italique Exercice bold : <b>...</b> italic : <i>...</i> underline :?? 29/34 Le langage HTML 8 octobre / 34

59 Titres dans un document Balises de titres Les balises <h1>, <h2>, <h3>, <h4> permettent de mettre des titres dans le document. Exercice Pouvez-créer une nouvelle page html depuis le début avec une utilisation des balises de titres? 30/34 Le langage HTML 8 octobre / 34

60 Titres dans un document Balises de titres Les balises <h1>, <h2>, <h3>, <h4> permettent de mettre des titres dans le document. Exercice Pouvez-créer une nouvelle page html depuis le début avec une utilisation des balises de titres? 30/34 Le langage HTML 8 octobre / 34

61 Mise en page Les espaces en HTML n étant pas comptabilisés, on a des balises de saut de ligne : Balises de saut de lignes <p></p> permet de sauter une ligne. <br></br> permet d aller à la ligne. 31/34 Le langage HTML 8 octobre / 34

62 Mise en page Remarque Comme logiquement il n y a rien à mettre entre ces balises, la syntaxe appropriée devrait être : <p /> <br /> 31/34 Le langage HTML 8 octobre / 34

63 Attributs Notion d attributs Certaines balises possèdent des attributs. Il y a des balises qui ont des attributs obligatoires et d autres qui ont des attributs facultatifs. <balise attribut1="valeur1" attribut2="valeur2" etc.>... </balise>. Exemple d attribut facultatif <body bgcolor="red">... </body> Exemple d attributs facultatifs <body bgcolor="red" text="yellow">... </body> Exemple d attribut obligatoire <img src="mesimages/lettre.jpg" /> 32/34 Le langage HTML 8 octobre / 34

67 Balises de texte Balise <font> <font>... </font> spécifie une balise de texte. Elle doit avoir un attribut : color="... " pour spécifier une couleur. size="... " pour spécifier une taille. 33/34 Le langage HTML 8 octobre / 34

68 Balises de séparation Trait de séparation <hr /> pour tracer une ligne horizontale. Attributs facultatifs size="nbpixels". Épaisseur du trait où nbpixels décrit un nombre de pixels. width="nombre". Longueur du trait où nombre peut être un nombre de pixels ou un pourcentage. color="couleurs". 34/34 Le langage HTML 8 octobre / 34