Introduction à la programmation web - Nouvelles...

1/33

Introduction à la programmation webNouvelles Technologies

Dr. Thé Van [email protected]

HEIG-VD Switzerland

1er octobre 2017

1er octobre 2017 1 / 33

2/33

Plan

1 État de l’art des langages orientés web

2 Le langage HTML

1er octobre 2017 2 / 33

2/33

Plan


2 Le langage HTML

1er octobre 2017 2 / 33

3/33

Plan


2 Le langage HTML

État de l’art des langages orientés web 1er octobre 2017 3 / 33

4/33

État de l’art des langages orientés webTechnologies web

Voici les différentes techniques de programmation web :Le langage HTMLLes feuilles de style CSSLe langage JavascriptLe langage PHPMacromedia Flash / HTML 5AjaxXML


5/33

État de l’art des langages orientés webLe 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é debalises conçu pour écrire des pages webs.

Le HTML omniprésent sur le web.La majorité des pages web sont au format HTML. Le navigateurinternet interprète le code HTML de chaque page web, pour letransmettre sous forme d’informations visuelles.


5/33

État de l’art des langages orientés webLe 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é debalises conçu pour écrire des pages webs.

Le HTML omniprésent sur le web.La majorité des pages web sont au format HTML. Le navigateurinternet interprète le code HTML de chaque page web, pour letransmettre sous forme d’informations visuelles.


6/33

État de l’art des langages orientés webA quoi ressemble du code HTML ?

On appelle balise tout ce qui est de la forme <blabla> ... </blabla>.


6/33

État de l’art des langages orientés webA quoi ressemble du code HTML ?

Et le résultat de ce code interprété :


7/33

État de l’art des langages orientés webLe langage CSS

HTML = fondDans le langage HTML, on va se concentrer sur le texte et le fond.

CSS = formeDans le langage CSS (Cascading Style Sheets), on se concentra sur laforme, c’est à dire tout ce qui correspond à la mise en page et au style.


7/33

État de l’art des langages orientés webLe langage CSS


8/33

État de l’art des langages orientés webLe langage Javascript

A quoi cela sert ?Javascript est un langage de scripts qui permet d’ajouter desprogrammes simples à une page HTML.Les programmes sont exécutés du « côté client ».

Interactivité côté clientContrairement au langage HTML, on peut parler de programmationdynamique. L’action de l’utilisateur entraine l’affichage à l’écran denouveaux menus.


9/33

État de l’art des langages orientés webLe 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é serveurPar exemple imaginez un site amateur de sondages qui stocke dansune base de données tous les avis des utilisateurs.


9/33

État de l’art des langages orientés webLe langage PHP


10/33

État de l’art des langages orientés webLe langage Flash / HTML 5

Qu’est-ce que c’est ?En bref, Flash / HTML 5 sont des technologies web permettant decréer des sites interactifs très soignés.

Par exemple, on peut trouver HTML 5 dans toutes les vidéos enStreaming (historiquement Flash). Mais aussi dans des sites trèssoignés comme les sites de cinéma.


10/33

État de l’art des langages orientés webLe langage Flash / HTML 5


11/33

État de l’art des langages orientés webLe langage Ajax

Qu’est-ce que c’est ?Ajax est une nouvelle technologie web, qui se base sur du Java(langage de programmation) et du Javascript. Elle permet de gérerune plus forte dynamicité des pages web côté client.

ExemplesGmail et Facebook sont des sites fortement conçus en Ajax : Le fait decliquer sur des onglets fait apparaitre des menus déroulants.


12/33

État de l’art des langages orientés webLe langage XML

Qu’est-ce que c’est ?Le XML est un langage pour informaticiens experts. Ce langageassocié à du Java, permet de générer dynamiquement des pages web.

Exemple : Moteur de rechercheLorsqu’on tape une recherche sur Google, une page HTML estgénérée automatiquement et nous renvoye les résultats de larecherche.


13/33

Plan


2 Le langage HTML

Le langage HTML 1er octobre 2017 13 / 33

14/33

Le langage HTMLFonctionnement

La majorité des pages web sont au format HTML. Le navigateurinternet interprète le code HTML de chaque page web, pour letransmettre sous forme d’informations visuelles.

Votre travailIl ne s’agit plus d’utiliser le navigateur internet pour naviguer, maisd’écrire du code HTML.


14/33

Le langage HTMLFonctionnement

La majorité des pages web sont au format HTML. Le navigateurinternet interprète le code HTML de chaque page web, pour letransmettre sous forme d’informations visuelles.

Votre travailIl ne s’agit plus d’utiliser le navigateur internet pour naviguer, maisd’écrire du code HTML.


15/33

Le langage HTMLLangage interprété

Un outil de traitement de texte comme Word, restitue exactement votredocument 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 jamaisexactement ce que le navigateur affichera à l’écran.

Conséquences logiquesVous n’avez pas la maîtrise totale du document. La mise en page et lestyle d’un document en HTML sont des opérations fastidieuses.


15/33






15/33






16/33

Le langage HTMLDéfinition de code

On appelle balise tout ce qui est de la forme <blabla> ... </blabla>.


16/33

Le langage HTMLDéfinition de code

Et le résultat de ce code interprété :


17/33

Le langage HTMLEditeur web ?

Le langage html semble fastidieux et réservé à première vue pour desinformaticiens.Pourquoi ne pas utiliser plutôt un éditeur web ? On peut ainsi discuterlongtemps sur plusieurs points :

Intérêts pédagogiques d’apprendre à se servir d’un éditeur weben Master 2 ?Logiciel gratuit aussi performant que DreamWeaver/FrontPage ?Code généré compatible entre les navigateurs ? (InternetExplorer, Mozilla Firefox, Chrome, Opera, Safari . . . )Si je veux intégrer du code javascript, php et flash pour mon siteweb, comment je fais çà facilement ?


17/33





17/33





17/33





17/33





18/33


Quel est vraiment l’avantage de faire du code HTML ? On peut là aussidiscuter longtemps :

Difficile d’apprentissage seul mais une compétence recherchéedans le monde industriel.Si respects standards W3C, code compatible sur tous lesnavigateurs.Un simple éditeur texte comme notepad suffit et code compatibletout système d’exploitation (Mac, Windows, Linux).Conception du document de A à Z (chirurgie) => Compréhensiontotale du document web.Intégration de code dans des sites web populaires (myspace,ebay, . . . ).


18/33





18/33





18/33





18/33





18/33





19/33


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 éditeurweb.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 sitesinternet ?


19/33




19/33




20/33

Si les discussions sont terminées, on peut maintenant passer à lapartie dure . . .


21/33

Le langage HTMLBalises

Une balise est une instruction qui marque une action à interpréter pourle 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>Vo i c i un <b> exemple simple < / b> de < i > ce que l ’ onpeut f a i r e < / i > avec l e langage HTML.< / body>< / html>


22/33

Le langage HTMLBalises 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’ya pas de mise en page.


22/33




22/33




23/33

Le langage HTMLBalises 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.


23/33







23/33







24/33


<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 not re page web va ê t re i c i .< / body>< / html>


25/33

Le langage HTMLcréation d’un document HTML

Document HTMLLa création se fait avec un éditeur de texte (exemple : Notepad)

Étape de création1 Ouvrir Bloc-notes. (Démarrer -> Exécuter -> Notepad)2 Fichier -> Enregistrer sous3 Nom du fichier : nomdocument.html ; Type : Tous les fichiers


25/33

Le langage HTMLcréation d’un document HTML

ExerciceCréer sa page HTML avec les balises de structure <html>,<head>, <body>Ecrire du texte dans la balise <body> </body>


26/33

Le langage HTMLLa balise <head>

Dans l’entête du document, on peut placer diverses informationscomme du code CSS, ou du code Javascript. (entre <head> ...</head>)

Titre au documentLa balise <title> qui se met exclusivement entre <head> ... </head>permet de mettre à l’extérieur de la fenêtre du document web.

ExerciceMettre un titre. Le voyez-vous ?


26/33






26/33






27/33

Le langage HTMLLes balises de style

Contenu de <body>Dans la balise <body>, on va mettre tout le contenu de notredocument.

Balises de stylesLa balise <b> permet de mettre du texte en gras.La balise <i> permet de mettre du texte en italique.


28/33

Le langage HTMLGras et italique

ExerciceReproduire la phrase ci-dessous.

Voici un exemple simple de ce que l’on peut faire avec le langageHTML.


28/33

Le langage HTMLGras et italique

Exercicebold : <b>...</b>italic : <i>...</i>underline : ? ?


29/33

Le langage HTMLTitres dans un document

Balises de titresLes balises <h1>, <h2>, <h3>, <h4> permettent de mettre des titresdans le document.

ExercicePouvez-créer une nouvelle page html depuis le début avec uneutilisation des balises de titres ?


29/33

Le langage HTMLTitres dans un document

Balises de titresLes balises <h1>, <h2>, <h3>, <h4> permettent de mettre des titresdans le document.

ExercicePouvez-créer une nouvelle page html depuis le début avec uneutilisation des balises de titres ?


30/33

Le langage HTMLMise en page

Les espaces en HTML n’étant pas comptabilisés, on a des balises desaut de ligne :

Balises de saut de lignes<p></p> permet de sauter une ligne.<br></br> permet d’aller à la ligne.


30/33

Le langage HTMLMise en page

RemarqueComme logiquement il n’y a rien à mettre entre ces balises, la syntaxeappropriée devrait être :

<p /><br />


31/33

Le langage HTMLAttributs

Notion d’attributsCertaines balises possèdent des attributs. Il y a des balises qui ontdes 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" />


31/33







31/33







31/33







32/33

Le langage HTMLBalises de texte

Balise <font><font>. . . </font> spécifie une balise de texte. Elle doit avoir unattribut :

color=". . . " pour spécifier une couleur.size=". . . " pour spécifier une taille.


33/33

Le langage HTMLBalises de séparation

Trait de séparation<hr /> pour tracer une ligne horizontale.

Attributs facultatifssize="nbPixels". Épaisseur du trait où nbPixels décrit un nombrede pixels.width="nombre". Longueur du trait où nombre peut être unnombre de pixels ou un pourcentage.color="couleurs".


Date post:	17-Apr-2018
Category:	Documents
Upload:	lamtruc
View:	217 times
Download:	2 times

Introduction à la programmation web - Nouvelles...

Documents