background preloader

HTML5 : le guide du débutant

HTML5 : le guide du débutant
La capacité à créer de belles et convaincantes pages web est une compétence utile qu'il faut avoir. Elle vous permet de présenter des informations qui vous intéressent tout en capturant l'attention des personnes qui visitent votre page web. Si vous ne souhaitez pas utiliser les gestionnaires de contenu (tels que WordPress, Drupal et Joomla) pour mettre sur pied votre site web et que vous voulez apprendre les bases du HTML5, alors ce guide est fait pour vous ! Et au fait, une fois que vous aurez appris les ficelles du métier pour le HTML5, je vous suggère de jeter un œil à ma « Fiche de révision HTML5Fiche de révision HTML5 » ci-dessous. Historiquement, les sites web sont créés à partir du HTML, du CSS et du JavaScript. Ce renouveau est appelé HMTL5, et il est utilisé avec beaucoup d'enthousiasme par les entreprises et les développeurs. Même si tout ça peut sembler intimidant au premier abord, ça ne l'est pas du tout. Ici on trouve beaucoup de choix VI-A. VI-B. VI-C. VI-D. VI-E. <! <! Related:  outils numHTML/CSS

Des outils simples pour créer rapidement des capsules vidéos - Sciences de la Vie et de la Terre L’augmentation des débits aidant, la vidéo est devenue un média très important sur internet. Il paraît donc très naturel d’insérer des contenus vidéos dans les espaces en ligne proposés à nos élèves, par exemple dans une pédagogie inversée. On peut trouver des supports vidéos existants, comme les vidéos Corpus ou celles de la banque de vidéos SVT. On se heurte toutefois rapidement au problème de l’adéquation du contenu avec nos besoins et au problème des droits d’utilisation de ces vidéos. De là l’envie de produire soi-même les contenus nécessaires, mais qui peut facilement s’effacer devant la difficulté matérielle (caméra, micro), technique (montage) et la crainte de devoir y consacrer trop de temps. Voici quelques outils, plus ou moins connus, qui permettent de produire des capsules vidéos simplement et rapidement, avec quelques exemples d’usages. Une vidéo en 5 minutes avec Screencast-O-Matic Présentation Les TNI peuvent aussi proposer cette fonction de capture d’écran. Exemples Exemple

HTML Cheat Sheet (Updated With New HTML5 Tags) - WebsiteSetup You want to learn HTML, right? Having a proper cheat sheet will make your life a ton of easier. When I started out with web development (back in 2004), I used to have a cheat sheet, too. Now it’s all in my head, though. Whether you’re a savvy web developer or just a trying to experiment a little, feel free to use this HTML cheat sheet below. I originally made it for my self, but since the launch of HTML5, I decided to update it, make it look better and share it on my website. I’ve listed out all the mainstream HTML tags as well as the new HTML5 tags. Enjoy! If you wish to download .pdf, click here (237kb) – This version is based on the HTML Cheat Sheet in .PNGAlternate HTML Cheat Sheet in .pdf, optimal for tabloid paper size (11x17in) printing, click here (138kb) to downloadIf you wish to use this as an image, click here (3508 x 2717) 1. 2. If you wish to download this as .pdf, use this link (right click, “Save link as”). 3.

HTML/Elements NOTE: THE MATERIAL ON THIS WIKI PAGE IS BEING MIGRATED ONTO THE WEB EDUCATION COMMUNITY GROUP'S DEDICATED WIKI PAGE, AT ITEMS MARKED WITH (MOVED) HAVE ALREADY BEEN MOVED. This is the list of HTML and related Elements from the past to the present. The root element (MOVED) html (MOVED) head (MOVED) title (MOVED) base (MOVED) isindex (MOVED) link (MOVED) meta (MOVED) style Scripting (MOVED) script (MOVED) noscript Sections (MOVED) body (MOVED) section (MOVED) nav (MOVED) article (MOVED) aside (MOVED) h1, h2, h3, h4, h5, and h6 (MOVED) hgroup (MOVED) header (MOVED) footer (MOVED) address Grouping content (MOVED) p (MOVED) hr (MOVED) pre (MOVED) blockquote (MOVED) ol (MOVED) ul (MOVED) li (MOVED) dl (MOVED) dt (MOVED) dd (MOVED) figure (MOVED) figcaption (MOVED) div (MOVED) center (MOVED) main Text-level semantics Edits (MOVED) ins (MOVED) del Embedded content Tables Forms Interactive (MOVED) details (MOVED) summary (MOVED) command (MOVED) menu See also

Bien utiliser le texte alternatif Par WebAIM Donner aux images un texte alternatif est la première chose à faire pour l'accessibilité. C'est également l'une des plus difficiles à bien faire. Les images au texte alternatif absent, incorrect, ou mal choisi sont malheureusement légion sur le web. Et comme beaucoup d'autres points concernant l'accessibilité, c'est un domaine où l'interprétation personnelle compte pour beaucoup. Cet article présente des exemples et, pour chaque exemple, le texte alternatif approprié tel que nous le dicterait notre expérience personnelle. Contenu de l'article Les bases du texte alternatif Le texte alternatif offre une alternative textuelle au contenu non textuel d'une page web. Le texte alternatif a plusieurs rôles : Il est annoncé par les logiciels de revue d'écran, à la place de l'image, rendant le contenu ou la fonction de l'image accessibles aux utilisateurs ayant des troubles visuels ou cognitifs. Le texte alternatif peut être présent de deux manières : Dans l'attribut alt de la balise img.

H5P. Créer des vidéos interactives – Les Outils Tice Article mis à jour le 26 janvier 2017 par Fidel Navamuel H5P est une boite à outils en ligne qui permet d’insérer de l’interactivité dans une vidéo. Un outil formidable pour rendre actifs vos élèves quand vous leur proposez un support en vidéo. H5P est une boite à outils d’une grande richesse qui fait bien plus que des simples vidéos interactives. L’outil dont la prise en main est assez simple s’utilise directement depuis n’importe quel navigateur, mais vous pouvez aussi installer un plug-in pour WordPress, Drupal ou encore Moodle et ainsi avoir accès à l’outil directement depuis ces différents CMS. L’utilisation de l’éditeur en ligne est assez simple. Une fois la vidéo installée sur H5P, vous allez pouvoir y insérer des interactions en cliquant sur l’onglet de l’éditeur qui le permet. Vous pouvez ajouter du texte, des images, des liens menant vers d’autres ressources, des boutons pour ouvrir des formulaires, etc. Un excellent outil, idéal pour la classe inversée et entièrement gratuit.

Design fluide et design responsive | Clic Story à Lure (70) Design fluide et design responsive sont souvent confondus. Pourtant, si l’objectif est le même : adapter l’affichage aux dimensions de l’écran, les moyens sont différents. Design fluide Le design fluide existe depuis l’invention du web : on définit les dimensions des éléments structurels de la page (grille, colonnes…) proportionnellement à la largeur de l’écran. Par exemple, une colonne de texte de largeur 75% et une colonne latérale de largeur 25%. Ainsi, le site s’adapte automatiquement aux dimensions de l’écran. Avantage : on utilise toute la largeur de l’écran, quelle que soit sa taille. Inconvénient : sur les écrans de tailles extrêmes, les colonnes peuvent devenir trop larges ou trop étroites et nuire à la lisibilité du texte, voire désorganiser la mise en page du site. Design responsive Le design « responsive » est apparu avec les appareils mobiles et la nécessité d’adapter l’affichage à des écrans très petits. Combiner les deux En pratique

Les attributs universels - HTML (HyperText Markup Language) Les attributs universels sont des attributs communs à l'ensemble des éléments HTML. Ces attributs peuvent donc être ajoutés sur tous les éléments (dans certains cas, les attributs n'auront aucun effet). Les attributs universels peuvent être définis sur tous les éléments HTML, y compris pour les éléments non définis dans le standard. Autrement dit, les éléments non-standards doivent pouvoir accepter ces attributs. Cela permettra au navigateur de les gérer selon certains des aspects de la spécification. Par exemple, pour un navigateur conforme, un élément <toto hidden>... En plus des attributs universels HTML, il existe également les attributs universels suivants : xml:lang et xml:base : ces attributs proviennent des spécifications XHTML. Liste des attributs universels accesskey Cet attribut fournit une indication permettant de générer un raccourci clavier pour l'élément courant. autocapitalize Cet attribut contrôle la façon dont le texte saisi est automatiquement converti en majuscules. class

Nouvelle formule pour les inspirations pour intégrateurs #83 : Illustrations CSS Premier article d'un nouveau format pour les inspirations pour intégrateurs, qui se renouvelle pour 2017 ! Pour ce premier chapitre, revenons sur les illustrations et animations en CSS. Les inspirations pour intégrateurs changent de formules ! Dans quelques mois les inspirations pour intégrateurs atteindront l'âge respectable de 4 ans, et ont très peu évolué depuis leurs débuts. Tous les premiers jeudis du mois, vous retrouverez un article d'inspirations pour les intégrateurs dans le style des anciens, avec des ressources sélectionnées, et ordonnée selon leur complexité. Puis, les semaines suivantes, nous prendrons des exemples de cette liste et les décortiquerons, parfois ligne à ligne, pour aider le plus de monde possible à comprendre les techniques mises en place, dans un article de techniques d'intégration. Créations et animations en CSS "traditionnelle" Que pensez-vous de ce nouveau format ?

UTellStory. Créer des diaporamas sonores – Les Outils Tice UtellStory est un outil en ligne qui permet de créer facilement des diaporamas sonores. Véritable petit studio en ligne, Utellstory peut générer de véritables objets multimédia mixant son et images mais aussi textes et vidéos. Un des atouts de UTellStory c’est sa prise en main relativement simple qui le met à la portée de tous les publics. Une fois inscrit, vous pourrez créer votre premier diaporama multimédia. Vous pouvez créer une diapo après l’autre ou uploader tous vos fichiers puis les réorganiser en ligne. L’outil UtellStory offre encore la possibilité de choisir une musique de fond et d’habiller graphiquement vos diapositives. [clickToTweet tweet= »Un bon outil en ligne pour créer des diaporamas multimédias. UtellStory peut être utilisé gratuitement, mais le nombre de diapos est limité à 20. Lien: UtellStory

Style CSS - Déclaration des styles css Index des styles Les styles CSS peuvent être appliqués de différentes façons aux éléments contenus dans un document html : - avec l'emploi de l'attribut style d'une balise html - en déclarant les styles dans la balise html <style> - en créant une feuille de style dans un fichier .css - avec l'utilisation du javascript de façon dynamique Nous allons décrire ces différentes syntaxes à travers des exemples employant des styles simples. Utilisation de l'attribut style : L'emploi de l'attribut style permet de définir rapidement et intuitivement un style sur un élément html. Exemple de style appliqué dans la balise label <div style="border:solid 1px black; background-color:silver; width:350px; padding:10px;"> Exemple de style appliqué dans la balise div </div> Exemple de style appliqué dans la balise div Utilsation de la balise <style> : Voici un exemple de dcoument complet mettant ces explications en pratique : <p class="texte-en-forme">Texte du paragraphe utilisant l'attribut "class"</p>

Utiliser les attributs de données - Apprendre le Web HTML5 est conçu avec le souci de l'extensibilité pour les données qui doivent être associées avec un élément particulier sans qu'on leur donne une signification spécifique. Les attributs data-* nous permettent de stocker des informations supplémentaires sur les éléments sémantiques standard sans avoir recours à des attributs non-standard ni à des propriétés supplémentaires du DOM, ni à Node.setUserData(). Syntaxe HTML La syntaxe est simple. Tout attribut d'un élément dont le nom commence par data- est un attribut de données (data attribute). Si par exemple vous avez un article pour lequel vous souhaitez stocker des informations supplémentaires et qui n'ont pas de représentation visuelle, il vous suffit d'utiliser des attributs de données pour cela : <article id="voitureelectrique" data-columns="3" data-index-number="12314" data-parent="voitures"> ... Accéder via du code JavaScript Lire les valeurs de ces attributs avec du JavaScript est également très simple. Accéder via du code CSS

Les nouveautés de l'HTML 5.1 Le World Wide Web Consortium (W3C) qui est une communauté internationale qui développe des standards pour l'évolution du Web a officialisé la version 5.1 du langage HTML. Le développement de cette spécification a débuté en décembre 2012 et a été validée en tant que recommandation par le W3C le 1er novembre 2016. Nous allons voir ensemble les ajouts importants de cette recommandation. picture et srcset Ce nouvellement a pour but d'améliorer le chargement des images en sélectionnant l'image à charger suivant la taille de l'écran de l'utilisateur. On utilise une media query sur l'élément fils "source" via l'attribue "media". Dans le cas où un navigateur n'est pas compatible, alors on affiche une image par défaut via <img>. details et summary Ces 2 balises permettent de générer un widget permettant d'afficher et de masquer du contenu sans JavaScript. <details> Ceci est un texte. Menu contextuel Cette fonctionnalité ne fonctionne pour le moment que sur Firefox. Voir la démo. Autres Vers HTML 5.2

2 Logiciels d’animation vidéo (présentation intéractive) | OUTILS ET FORMATION TICE Moovly (Vidéo pour apprendre à l’utiliser : ICI) et Explee ( Vidéo expliquant ce qu’il permet : ICI ) sont 2 logiciels d’animation vidéos en ligne très simples d’utilisation et permettent des présentations interactives. Selon Laurène Castor, chargée de missions innovations pédagogiques chez France Business School : « Ce qui est super avec ces logiciels, c’est surtout la main qui dessine et qui écrit. Dans Moovly, les dessins (de notre création) que l’on importe ne peuvent pas avoir l’animation « drawing », c’est-à-dire que l’on ne peut pas les faire dessiner par la main. C’est en revanche possible avec Explee, même s’il faut faire attention à ce qu’ils soient de bonne qualité et assez grands pour que cela donne un bon résultat. Ce contenu a été publié dans OUTILS / ASTUCES, Présentations Intéractives.

Related: