Structurer une page Web avec le HTML5
Adresses derrière les liens

Structurer une page Web
Écran 2
  1. HTML5 http://www.w3.org/TR/html5/
  2. HTML 4.01 http://www.w3.org/TR/html4/
  3. XHTML 1.0 http://www.w3.org/TR/xhtml1/
  4. HTML5 http://www.w3.org/TR/html5/
HTML5 : éléments
Écran 3
  1. W3C (World Wide Web Consortium) http://www.w3.org/
  2. liste de tous les éléments HTML5 sur MDN https://developer.mozilla.org/fr/docs/Web/HTML/Element
Bases d'HTML5 : règles pour éléments et attributs
Écran 5
  1. attribut booléen http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes
Coquille vide de document HTML5
Écran 8
  1. HTML5 Boiler Plate (h5bp) https://html5boilerplate.com/
Quelques notes sur la coquille vide du HTML5
Écran 9
  1. écritures à la XHTML http://www.w3.org/TR/html5/the-xhtml-syntax.html
  2. HTML5 differences from HTML4 http://www.w3.org/TR/html5-diff/
Morceaux essentiels à mettre dans l'élément head
Écran 10
  1. champs Open Graph http://ogp.me/
  2. cartes Twitter https://dev.twitter.com/cards/overview
  3. Annoter ses pages Web pour optimiser la présentation de la propagation sur les médias sociaux https://www.espacecourbeformation.com/fr/articles/facebook-open-graph-twitter-cards/
Exercice : prévisualiser la page dans le navigateur
Écran 12
  1. outil de validation sans DTD pour le HTML5 http://validator.w3.org/nu/
Encodage des caractères
Écran 38
  1. iso-8859-1 aussi appelé ISO Latin-1 ou Latin1 http://czyborra.com/charsets/iso8859.html#ISO-8859-1
  2. table visuelle http://www.w3.org/MarkUp/Wilbur/latin1.gif
  3. table avec mnémoniques adresse privée
  4. iso-8859-15 aussi appelé ISO Latin-9 ou Latin9 http://czyborra.com/charsets/iso8859.html#ISO-8859-15
  5. windows-1252 de Microsoft appelé parfois CP1252 ou WinLatin1 http://czyborra.com/charsets/iso8859.html#CP1252
  6. Unicode http://www.unicode.org/
  7. tableaux de caractères en français http://hapax.qc.ca/Tableaux-5.0.htm
  8. The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!) http://www.joelonsoftware.com/articles/Unicode.html
Illustrer un problème d'interprétation d'encodage
Écran 39
  1. Le cyberblog du coyote http://www.apprendre-en-ligne.net/bloginfo/index.php/2009/01/21/151-martine-ecrit-en-utf-8
Caractères accentués : exemples
Écran 41
  1. liste complète des entités XHTML http://www.digitalmediaminute.com/reference/entity/
  2. mettre les caractères en entités HTML ou non https://mothereff.in/html-entities
Caractères typographiques communs à retoucher
Écran 42
  1. Common HTML entities used for typography http://www.w3.org/wiki/Common_HTML_entities_used_for_typography
Nouveaux éléments structuraux (p. 1/2)
Écran 44
  1. HTML5 Sectioning Element Flowchart http://html5doctor.com/resources/
Attributs personnalisés : data-*
Écran 51
  1. Custom data attributes http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data-with-the-data-attributes
  2. HTML5 Custom Data Attributes (data-*) http://html5doctor.com/html5-custom-data-attributes/
Exemple d'usage d'attributs data-*
Écran 52
  1. jQuery Cycle 2 http://jquery.malsup.com/cycle2/demo/basic.php
Exercice : ajouter un carrousel sur les promotions
Écran 53
  1. documentation pour débuter avec Cycle2 http://jquery.malsup.com/cycle2/demo/basic.php
Protocoles pour les URL
Écran 56
  1. Forger un lien mailto: avec des paramètres http://www.espacecourbeformation.com/fr/articles/lien-mailto-avec-parametres/
Exemples d'URL
Écran 57
  1. http://www.cnn.com/ http://www.cnn.com/
  2. http://www.facebook.com/EspaceCourbeFormation http://www.facebook.com/EspaceCourbeFormation
  3. mailto:badaduc@hotmail.ca adresse privée
Ajout d'hyperliens en HTML
Écran 61
  1. ancre adresse privée
Ajout d'hyperliens en HTML : attributs optionnels
Écran 62
  1. valeurs pour l'attribut rel http://www.w3.org/TR/html5/links.html#linkTypes
Cadres en ligne
Écran 69
  1. référence sur MDN https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe
Exercice : insérer une carte Google
Écran 70
  1. Google Maps https://www.google.ca/maps/
Images pour le Web
Écran 72
  1. formats supportés par les navigateurs http://www.webstyleguide.com/wsg3/11-graphics/5-web-graphics-formats.html
  2. GIF http://fr.wikipedia.org/wiki/Graphics_Interchange_Format
  3. JPEG http://fr.wikipedia.org/wiki/Joint_Photographic_Experts_Group
  4. PNG https://fr.wikipedia.org/wiki/Portable_Network_Graphics
Attributs de l'élément img
Écran 74
  1. section des images dans le guide HTML adresse privée
Banques d'images
Écran 77
  1. Getty Images http://www.photodisc.com/
  2. Photodisc http://www.photodisc.com/
  3. ImageBank http://www.imagebank.com/
  4. Corbis http://www.corbis.com/
  5. Dreamstime http://www.dreamstime.com/
  6. Masterfile http://www.masterfile.com/
  7. recherche sur Flickr https://www.flickr.com/
Méthode facile pour insérer une vidéo : passer par un service
Écran 85
  1. YouTube https://www.youtube.com/
  2. Viméo https://vimeo.com/fr/
  3. vidéos de Vimeo sur la www.chairepersonneagee.umontreal.ca https://www.chairepersonneagee.umontreal.ca/
Exercice : ajouter une vidéo YouTube
Écran 86
  1. https://www.youtube.com/embed/fYuXu35BO5I https://www.youtube.com/embed/fYuXu35BO5I
Attributs pour l'élément video
Écran 89
  1. attributs pour élément video http://www.w3.org/TR/html-markup/video.html
  2. attributs pour élément audio http://www.w3.org/TR/html-markup/audio.html
Formats audio et vidéo
Écran 90
  1. codec http://fr.wikipedia.org/wiki/Codec
Méthode facile pour insérer un clip audio : passer par un service
Écran 94
  1. SoundCloud https://soundcloud.com/
  2. Zone baladodiffusion de l'A.P.E.S. https://www.apesquebec.org/zone-medias/baladodiffusion
Exercice : ajouter un lecteur SoundCloud
Écran 95
  1. https://bit.ly/2MJXz5g https://bit.ly/2MJXz5g
Prendre en charge le rendu
Écran 96
  1. VideoJS http://videojs.com
  2. MediaElementJS http://mediaelementjs.com/
  3. JW Player http://www.longtailvideo.com/jw-player/
Demandes souvent nécessaires
Écran 111
  1. zebra tables http://www.alistapart.com/articles/zebratables/
  2. tableau de la politique du 1% sur le site Art pour tous http://www.artpourtous.umontreal.ca/decouvrir/politique.html
  3. interactivité avec le JavaScript pour trier ou filtrer https://github.com/Mottie/tablesorter/wiki
Tous droits réservés 2018, Espace Courbe Formation inc. —23 août 2018 — 18:35:37