![Page 1: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/1.jpg)
S'initier au HTML et aux feuilles de style CSS
Cours 4
![Page 2: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/2.jpg)
Retour sur la semaine dernière
Pour faire un formulaire il vous faut les ingrédients suivants:
1. La balise <form></form> correctement configurée
2. Un ou plusieurs éléments (<input>, <select>, <textarea> etc).
3. Un piton d’envoi
![Page 3: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/3.jpg)
Aujourd’hui
• Conteneurs et codecs
• Intégrer contenu son, vidéo, animations
• Les images interactives
• Valider sa page web et l’indexation
![Page 4: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/4.jpg)
Intégrer du multimédia
• Il n’existe pas de balises pour intégrer du contenu multimédia en HTML 4. Il faut passer par des plug-ins flash, Quicktime, activex et java.
• C’est corrigé avec le HTML 5.
![Page 5: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/5.jpg)
Intégrer du multimédia
Il existe diverses façons d’intégrer du contenu multimédia. En utilisant…
1. les balises HTML4 <object> et <embed>.
2. les balises HTML5 <video> ou <audio>. IE ne le supporte pas avant ie 9.
3. Laisser Youtube ou un autre hébergeur gérer ça
![Page 6: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/6.jpg)
Intégrer du multimédia
![Page 7: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/7.jpg)
Conteneurs et codecs
• Un fichier vidéo est un conteneur composé de divers fichiers (audio et vidéo) encodés différemment.
• L’extension du fichier spécifie le type de conteneur vidéo (.avi, .mp4, etc).
• Les conteneurs vidéo définissent comment les données seront conservées. Ils ne gèrent pas le type de données.
• Imaginez une archive zip.
![Page 8: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/8.jpg)
Conteneurs et codecs
Un fichier vidéo contient habituellement plusieurs “pistes”: une piste vidéo (sans audio) et une piste audio (sans vidéo). Les pistes sont liées entre elles.
![Page 9: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/9.jpg)
Conteneurs et codecs
Quelques conteneurs vidéo populaires•MPEG4 (.mp4 ou .m4v)•Ogg (.ogv) format gratuit sans licence •Audio Video Interleave (.avi)
Ces conteneurs peuvent contenir des métadonnées comme un titre, une couverture d’album, un numéro d’épisode etc.
![Page 10: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/10.jpg)
Conteneurs et codecs
Un codec vidéo est un algorithme qui détermine comment les flux vidéo sont encodés.
Le mot codec est une combinaison du mot « codeur » et « décodeur ».
Un lecteur vidéo décode le flux vidéo selon le codec et affiche une série d’images à l’écran.
Il existe des codecs “avec perte”(lossy) et “sans perte”.
Un bon codec “avec perte” offre la meilleure combinaison qualité/taille.
![Page 11: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/11.jpg)
Conteneurs et codecs
Quelques codecs vidéo populaires.
•H.264, licence propriétaire (patent-encumbered)
•Theora, gratuit non-licencié. Firefox offre un soutien natif.
•VP8, gratuit et non-licencié (royalty and patent free).
![Page 12: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/12.jpg)
Conteneurs et codecs
Les codecs audio peuvent contenir des canaux multiples. Voici les plus populaires.
•MPEG-1 Audio Layer 3 (mp3), licence propriétaire.
•Advanced Audio Coding (aac), licence propriétaire.
•Vorbis, gratuit et sans licence.
![Page 13: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/13.jpg)
Conteneurs et codecsCodecs vidéo supportés selon les navigateurs
![Page 14: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/14.jpg)
Conteneurs et codecs
Browser
Formats supported by different web browsers
Ogg Vorbis WAV PCM MP3 AAC
Google Chrome 9 Yes Yes Yes
Internet Explorer No No 9 9
Mozilla Firefox 3.5 3.5Windows (21.0) and
Linux (24.0) onlyWindows (21.0) and
Linux (24.0) only
Opera 10.50 11.00 14 14
Safari Yes 3.1 3.1 3.1
Codecs audio supportés selon les navigateurs
![Page 15: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/15.jpg)
Conteneurs et codecs
• L’adoption des balises video et audio dans le HTML5 a polarisé les entreprises fabricant les navigateurs en deux tendances: ceux préférant les formats gratuits et ceux préférant les formats licenciés.
• Appel et Microsoft soutiennent les formats AAC et MP3, évoquant une performance supérieure et les problèmes de sécurité liés aux formats gratuits.
• Mozilla et Opera soutiennent le codec gratuit Vorbis dans les conteneurs Ogg et WebM. Ils critiquent les licences MP3 et AAC.
• Google soutient tous ces formats. • En conséquence, pour garantir le fonctionnement audio dans tous
les navigateurs majeurs, il faut utiliser les codecs Vorbis et MP3 ou AAC.
![Page 16: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/16.jpg)
Conteneurs et codecs
Pour tout savoir sur les « conteneurs » et les codecs vidéos, voirdiveintohtml5.info/video.html
Pour connaitre le codec utilisé par un vidéo, ça va vous prendre un utilitaire comme gspothttp://www.headbands.com/gspot/
![Page 17: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/17.jpg)
Intégrer du multimédia
La balise HTML 5 <video></video>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é. • src, width, height
![Page 18: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/18.jpg)
Intégrer du multimédia
• Possible de prendre en charge deux codecs distincts, selon ce que supporte le navigateur.Exemple:
<video controls preload><source src="test.mp4" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2"><source src="test.ogg" type="video/ogg" codecs="theora, vorbis">
</video>
• Le vidéo fonctionnera dans Firefox 3.5, Safari 4, Opera 10 et Chrome 1 mais pas dans ie.
![Page 19: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/19.jpg)
Intégrer du multimédia
La balise HTML 5 <source>
Attributs
•src – chemin vers le fichier
•type – indique le type mime du vidéo (video/ogg, video/mp4, audio/ogg, audio/mpeg, etc)
•Codecs – le codec du vidéo (theora, vorbis, vp8, vorbis, avc1.42E01E, mp4a.40.2)
![Page 20: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/20.jpg)
Intégrer du multimédia
En HTML5
<audio controls="controls"> <source src="song.mp3" type="audio/mpeg" /> <source src="song.ogg" type="audio/ogg" />
</audio>
Chez nous, avec Chrome 18, ça joue les deux formats et dans Firefox 11 ça joue seulement le ogg.
![Page 21: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/21.jpg)
Compatibilité de HTML 5
Source: html5test.com
![Page 22: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/22.jpg)
Intégrer du multimédia
• Il n’y a pas de codecs qui fonctionnent dans tous les navigateurs.
• Pour faire fonctionner votre document audio ou vidéo sur toutes les plateformes, vous devrez encoder le même vidéo en de multiples codecs.
![Page 23: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/23.jpg)
Laboratoire
Faire une page avec
• Un vidéo hébergé sur Youtube
• Un vidéo local codé en HTML 5
• Une chanson codée en HTML5
![Page 24: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/24.jpg)
Référencement
C’est l'ensemble des techniques permettant d'améliorer la visibilité d'un site web :•Indexation: consiste à faire connaître le site auprès des outils de recherche grâce aux formulaires que ceux-ci proposent.•Positionnement: consiste à positionner le site ou certaines pages du site en première page de résultat pour certains mots-clés. •Classement: dont le but est similaire au positionnement mais pour des expressions plus élaborées; une partie du travail étant d'identifier ces requêtes.
![Page 25: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/25.jpg)
Référencement
Il existe quelques techniques de conception de site permettant de donner plus d'efficacité au référencement des pages d'un site :•un contenu original et attractif,•un titre bien choisi,•une URL adaptée,•un corps de texte lisible par les moteurs,•des balises META décrivant précisément le contenu de la page,•des liens bien pensés,•des attributs ALT pour décrire le contenu des images.
![Page 26: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/26.jpg)
Référencement
• Indexation à google: google.com/addurl
• Google Webmasters tools
• Pour plus d’infos: commentcamarche.net/faq/217-referencer-son-site-les-moteurs-de-recherche
![Page 27: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/27.jpg)
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?
![Page 28: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/28.jpg)
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.
![Page 29: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/29.jpg)
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.
![Page 30: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/30.jpg)
Le W3C validator
validator.w3.org
![Page 31: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/31.jpg)
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
![Page 32: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/32.jpg)
Images interactives
.ville_swap {background-image: url(images/ville_up.jpg);height:500px;width:200px;
}.ville_swap:hover {
background-image: url(images/ville_down.jpg);}<div class="ville_swap"></div>
![Page 33: S'initier au HTML et aux feuilles de style CSS](https://reader033.vdocuments.pub/reader033/viewer/2022051620/5681324c550346895d98c2aa/html5/thumbnails/33.jpg)
Laboratoire
Reproduire l’exemple