HTML 4 et CSS 2 Cours 2 Faire acquérir à l'étudiant des connaissances de niveau intermédiaire en programmation HTML et de l'initier aux feuille de style CSS

Aujourd’hui Intégrer contenu son, vidéo, animations Les images interactives Applets Java Contrôles ActiveX Valider sa page web et l’indexation

Balise Applet La balise est dépréciée en faveur de la balise Utilisée auparavant pour inclure des applets java.

Balise Applet Exemple déprécié Le code réécrit Basic Applet

ActiveX Microsoft ActiveX Data Objects (ADO) Propose un interface de haut niveau pour travailler avec des sources de données variées (fichiers texte, base de données Oracle, les feuilles Excel, Access et des bases de données SQL). C’est un peu comme un applet java. Ça peut afficher des animations ou récolter des données. Produit par Microsoft, ActiveX a été spécialement conçu pour fonctionner avec les systèmes Windows. ActiveX n'est donc pas supporté par les autres systèmes d'exploitation, tels que Mac ou Linux.

Intégrer contenu son, vidéo, animations Il n’existe pas de balises pour intégrer du contenu multimédia en HTML 4. Il faut passer par des plug-ins flash, activex et java. Le HTML 5 corrigera cette situation.

Vidéo La balise n'a pas été reprise dans les spécifications officielles du HTML 4.0 (W3C) : elle est remplacée par la balise. Balise propriétaire Netscape à l'origine.

Vidéo La balise n’est pas bien supportée non plus. Le format vidéo FLV vous permet d’afficher votre animation avec le plugin Flash (s’il est installé). Il n’est pas supporté sur tous les gadgets portables. Envoyer votre vidéo sur Youtube et utiliser le code HTML d’intégration (embed). Il y a des inconvénients. Vous pouvez y aller par HTML 5 en utilisant la balise. IE ne le supporte pas avant ie 9. Il y a un seul codec vidéo qui est supporté.

Vidéo

La balise Attributs autoplay – commence a jouer aussitôt qu’il est téléchargé. controls – fait apparaitre des boutons de controles (pause, recule, avance etc) loop preload - pre download le vidéo pourqu’il soit prêt quand l’utilisateur veut le visionner. poster – Définit l’image que vous voulez afficher lorsque le vidéo est arrêté.

Vidéo Vous devriez avoir un vidéo qui fonctionne dans Firefox 3.5, Safari 4, Opera 10 et Chrome 1. Mais pas dans ie.

Vidéo Le seul paramètre obligatoire est

Vidéo Paramètres controller - true ou false. Fait apparaitre les boutons de controles. autoplay - true ou false. Exemple:

Vidéo Il faut ensuite utiliser la balise. Exemple:

Vidéo

Son Même chose

Intégration multimédia Démonstration avec Dreamweaver d’un.flv,.swf,.mp3

Laboratoire Faire une page avec trois vidéos - Un qui fonctionne avec la balise « embed » - Un qui est hébergé sur Youtube - Un codé en HTML 5

Images interactives Avec Dreamweaver Insert > Image object > rollover image Utilise du javascript qui est placé automatiquement. Voir le “tag inspector” pour modifier les paramètres

Images interactives sans javascript a { background: url("button.gif") top left no- repeat; } a:hover { background-image: url("button-over.gif"); } a:active { background-image: url("button-active.gif"); }

Images interactives Voir les exemples

Laboratoire Reproduire l’exemple

Autres notes Voir comment extraire le code HTML Le référencement

Référencement L’inscription a des moteurs de recherche Voir google.com/addurl Google Webmasters tools Source: bintou-mariko.com/ajouter-un- site.htm.

Valider sa page web Le W3C validator permet de vérifier votre code HTML, d’identifier les erreurs et de faire des suggestions. Cependant, les navigateurs afficheront vos pages web peu importe si elles sont plein d’erreurs. Quelle est l’utilité de la validation?

Valider sa page web Outil de debug: Permet de s’assurer que vos pages s’affichent de la même façon sur plusieurs plateformes ou support différents. Bon pour le futur: La validation est la meilleure garantie que les prochaines plateforme web seront compatible.

Valider sa page web Facilite la maintenance: Particulièrement important si un autre développeur doit poursuivre votre travail. Enseigne de bonnes habitudes. C’est un signe de professionnalisme.

Le W3C validator validator.w3.org