S'initier au HTML et aux feuilles de style CSS Cours 5.

Présentation au sujet: "S'initier au HTML et aux feuilles de style CSS Cours 5."— Transcription de la présentation:

1 S'initier au HTML et aux feuilles de style CSS Cours 5

2 Retour intégrer un vidéo qui fonctionne avec la balise « embed »

3 Retour En intégrant un vidéo Youtube

4 Retour Qui est codé en HTML 5 ex:

5 Retour W3C validator Outil de debug Bon pour le futur Facilite la maintenance Enseigne de bonnes habitudes. C’est un signe de professionnalisme.

6 Aujourd’hui Les types MIME HTML dynamique - DHTML - Ajax - PHP - ASP - Jquery

7 Type MIME Un identifiant de format de données Divisé en deux parties: un type et un sous-type Exemples: - audio/mp3 : MP3 ou autres MPEG - image/jpeg : JPEG image JFIF - text/html : HTML http://fr.wikipedia.org/wiki/Type_MIME

8 Type MIME Exemple commun: Ou

9 DHTML HTML dynamique, de l'anglais Dynamic HTML, souvent abrégé DHTML, est un nom générique donné à l'ensemble des techniques utilisées par l'auteur d'une page web pour que celle-ci soit capable de se modifier elle-même en cours de consultation dans le navigateur web. trois technologies utilisées : –HTML (ou XTML) –CCS –JavaScript

10 DHTML Avec la standardisation du DOM et l'apparition de nouvelles technologies comme XML, le nom dynamic HTML est un peu passé de mode. Les procédés restent cependant, et l'AJAX ou le Jquery n'est pas fondamentalement différent du DHTML.

11 DOM Le Document Object Model (ou DOM) est une recommandation du W3C qui décrit une interface permettant à des scripts de mettre à jour le contenu d’un document. Le document peut ensuite être traité et les résultats de ces traitements peuvent être réincorporés dans le document tel qu'il sera présenté.

12 DOM Chaque document HTML affiché dans un navigateur devient un DOM. L’objet Document donne accès à tous les éléments HTML dans une page à partir d’un script (Javascript)

13 DOM function getValue() { var x=document.getElementById("myHeader"); alert(x.innerHTML); } cliquez moi

14 AJAX À l'image de DHTML, AJAX n'est pas une technologie en elle-même, mais un terme qui évoque l'utilisation conjointe d'un ensemble de technologies libres couramment utilisées sur le Web: HTML (ou XHTML) pour la structure sémantique des informations ; CSS pour la présentation des informations ; DOM et JavaScript pour afficher et interagir dynamiquement avec l'information présentée ; L'objet XMLHttpRequest pour échanger et manipuler les données de manière asynchrone avec le serveur Web.

15 PHP PHP (PHP: Hypertext Preprocessor), est un langage de script libre. Il est utilisé principalement côté serveur. La machine qui héberge la page Web en question va interpréter le code PHP et générer du code qui pourra être interprété par un navigateur.

16 PHP PHP peut également générer d'autres formats en rapport avec le Web, comme le WML, le SVG, le format PDF, ou encore des images bitmap telles que JPEG, GIF ou PNG.

17 ASP Active Server Pages (ASP) est un ensemble de logiciels développés par Microsoft et utilisés dans la programmation et destinée à créer des sites web dynamiques, concurrente de PHP. Elle nécessite pour fonctionner une plate-forme Windows avec IIS (Internet Information Services) installé, ou encore une plate-forme Linux ou Unix avec une version modifiée d'Apache.

18 Laboratoire Suivez les instructions du fichier laboratoire.doc

19 Jquery Le Jquery c’est encore une fois un ensemble de technologies utilisé ensemble. C’est aussi une façon différente de programmer en javascript. Trois technologie utilisées : –HTML (ou XTML) –CCS –JavaScript

20 Jquery Pour que ça marche, ça prend trois choses: 1.Le moteur jquery (la librairie) disponible en téléchargement libre sur jquery.com. C’est un fichier avec l’extension js. Les fichiers contenant du code javascript doivent avoir cette extension.

21 Jquery 2.Le moteur jquery (la librairie) de l’effet désiré. 3.Vous devrez ensuite suivre les instructions, souvent très simples, pour réaliser l’effet. Vous pouvez aussi vous inspirer (voire plagier) un exemple en vous basant sur son code source.

22 Jquery Pour lier les fichiers javascript à votre page html, utilisez la balise script dans le head de votre page. Ex:

23 Jquery Exemple

24 Laboratoire Réalisez un effet jquery que vous aurez choisi dans la série disponible.