HTML5 : Éléments <figure> et <figcaption> L'élément <figure> ne devrait pas vous être inconnu puisque son rôle est pareil à celui qu'il joue dans les supports papiers tels que les livres ou magazines afin d'illustrer et de légender des photos, des diagrammes, ou encore des schémas. Illustration légendée Inaugurés avec HTML5, les éléments <figure> et <figcaption> fonctionnent de concert pour associer une légende à une illustration ou un autre élément média. <figure> <img src="image.jpg" alt="" /> <figcaption>Légende associée</figcaption></figure> Élément <figure> <figure> est une unité de contenu, c'est-à-dire que cet élément sert de conteneur dans lequel s'insèrent divers éléments comme des images, des schémas, des vidéos, des tableaux ou encore des blocs de code. Élément <figcaption> Enfant direct de <figure>, son rôle est de légender son parent, sous forme de texte et/ou de liens. Quelques applications dans le monde du livre Compatibilité navigateur des éléments <figure> et <figcaption> Applications sur le web Démonstration Une vidéo
Passer du HTML au XHTML Introduction Depuis le 26 janvier 2000, le XHTML est la nouvelle norme du W3C en matière de langage balisé pour concevoir des documents Web. Que vos pages existantes soient actuellement conformes ou non aux différentes versions du HTML importe peu. Vous allez rapidement constater que les convertir en XHTML n'est pas sorcier du tout. En effet, puisque le XHTML n'est rien de plus que du HTML reformulé de façon à respecter les règles strictes du XML, il ne vous suffit que d'apprendre quelques règles syntaxiques propres à XML pour commencer à coder selon les normes du W3C. Tout ce qui vous sépare de votre but, c'est un peu moins d'une dizaine de petites lois et quelques principes d'application. Cet article n'a qu'un seul but, celui de vous aider à franchir ce pas entre le HTML du siècle dernier et celui d'aujourd'hui ou, si vous préférez, à mettre un peu de X dans votre HTML. Chaque balise nécessite une fermeture Invalide : <p>Lorem ipsum dolor sit amet. Valide : <p>Lorem ipsum dolor sit amet.
Se lancer dans le HTML 5 Nous allons voir ensemble comment se familiariser avec les nouveautés HTML 5. Nous verrons quelques balises importantes de la prochaine version majeure du HTML. » La version 5 de HTML apporte à tous les webdesigners des outils pour simplifier le développement Nous allons tout d’abord parler de compatibilité. Et voici le code : Nous allons voir les différentes déclarations de type de document ou doctype. → Voici à quoi ressemble le doctype de l’HTML 4.01 : → Voici à quoi ressemble le doctype de l’XHTML 1.0 : → Voici le doctype ultra simplifié de l’HTML 5 : Balises meta, script et link → Voila la balise meta d’un document en HTML 4.01 : → Voila la balise meta d’un document en HTML 5 : → Pour la balise script, là ou avant le html 5 il fallait préciser type= »text/javascript », désormais plus besoin de le préciser. → Il est aussi inutile de préciser type= »text/css » pour la balise link en HTML 5 : Balise Canvas → La balise canvas sert à afficher des graphiques. Balise audio Balise video Les formulaires
HTML5 : Nouveaux éléments de section, article, header, footer, aside, nav Les éléments de section HTML5, une nouvelle façon de penser Les éléments de section (section, article, nav, aside, header, footer) segmentent des portions du document ou de l'application web, qui possèdent une valeur sémantique particulière ; contrairement à des éléments génériques comme span ou div qui ont un rôle totalement neutre, et ne servent qu'à regrouper d'autres éléments HTML pour leur affecter un style CSS commun, voire pour interagir avec eux via le DOM... Il ne s'agit donc pas de nouveaux éléments avec des noms génériques : c'est bien plus que ça ! HTML5 inclut la majorité des éléments HTML4 pour assurer une rétro-compatibilité avec les navigateurs. Par exemple, une majorité des sites contiennent des informations supplémentaires relatives ou non au contenu principal (que l'on nomme sidebar ou barre latérale). Liste récapitulative des éléments de section HTML5 Un cas particulier : Internet Explorer <9 Exemples de documents Exemple minimal L'en-tête <header> Le <footer> Remarque
Target=”_blank” — the most underestimated vulnerability ever People using target='_blank' links usually have no idea about this curious fact: The page we're linking to gains partial access to the linking page via the window.opener object. The newly opened tab can, say, change the window.opener.location to some phishing page. Or execute some JavaScript on the opener-page on your behalf... Users trust the page that is already opened, they won't get suspicious. Example attack: create a fake "viral" page with cute cat pictures, jokes or whatever, get it shared on Facebook (which is known for opening links via _blank) and every time someone clicks the link - execute window.opener.location = ' …redirecting to a page that asks the user to re-enter her Facebook password. Add this to your outgoing links. rel="noopener" Update: FF does not support "noopener" so add this. rel="noopener noreferrer" var newWnd = window.open(); newWnd.opener = null; PS.
TOP 14 des répertoires d'images gratuites! (usage commercial) Par Olivier Lambert, dans Design , publié le 2014-11-10 La photo a toujours été partie intégrante de toutes campagnes de communication et de marketing. Comme on dit: "une image vaut mille mots"! Eh bien dans ce cas, vaut mieux choisir la bonne image! Malheureusement, les banques d'images photo "stock" ont été un peu abusées au fil des ans. En surfant sur le web, c'est à croire que toutes les entreprises emploient la même réceptionniste! Non seulement ces images commencent à être clichées, mais ces dernières peuvent coûter cher! Personnellement, j'utilise Dollar Photo Club qui offre ses photos à 1 $ seulement, mais la plupart des autres sites (tels que Shutterstock) offrent leurs images à plus de 10 $ chacune! Merci aux z'Internet, un nombre grandissant de sites web propose de superbes banques d'images libres au téléchargement, et ce, complètement gratuitement! Dans ce billet de blogue, j'ai rassemblé une liste des meilleurs sites d'images stocks gratuites! À propos des droits d'auteurs Unsplash
HTML5 : Les éléments <details> et <summary> Parmi les nouveautés de HTML5 faisant écho à des applications existantes sur le web, les éléments <details> et <summary> ont le rôle de baliser un complément d'information. Un résumé et des détails Élément <details> Cet élément permet de baliser un contenu quelconque (texte, image, listes, tableaux, formulaires, etc) ayant pour rôle d'apporter une information ou des détails supplémentaires. Ceux-ci ne doivent cependant pas être obligatoires pour poursuivre la bonne marche de l'application web ou la compréhension du document HTML. Le navigateur pourra masquer ces informations par défaut, et les déployer à la demande de l'utilisateur (voir exemples visuels ci-après). Attribut open de l'élément <details> Si cet attribut est présent, les détails sont exposés à l'utilisateur dès le chargement. Élément <summary> Cet élément sert d'intitulé à <details>, en cela il doit être pertinent. Exemples pratiques retrouvés sur systèmes d'exploitation Compatibilté navigateur des éléments <details> et <summary>
Exercice d'intégration Html/Css n°2 - Copier coller Un deuxième petit exercice d’intégration, pour une pag type blog, à partir d’un, voici le rendu final: le PSD Comme on le voit la page est découpée en plusieurs lignes, on peut imaginer une grille derrière la page : ici je vais utiliser html5 Boiler, qui utilise 960 grid gs pour découper et organiser la page.Une police particulière pour le titre, un texte d’introduction, un bloc d’ images à la une, trois blocs de rubriques, puis encore trois blocs d’info. Voici le code Ici l’import de la police n’est pa possible donc le titre est mal positionné, si vous répliquez le code, pensez à importer aussi la police.
Généralités sur les couleurs dans le guide de la gestion des couleurs | Arnaud Frich Ce guide se veut une initiation à la gestion des couleurs. Il n'est pas écrit par un "théoricien" des couleurs mais par un photographe passionné qui s'intéresse au sujet depuis quinze ans. Vous n'y trouverez donc pas de tests avec plein de chiffres après la virgule mais bien un retour d'expérience pragmatique, concret. A travers ces dix pages, je souhaite vous accompagner dans le vocabulaire spécifique à la gestion des couleurs. C'est un vocabulaire nouveau le plus souvent qui ne fait pas parti de l'inconscient collectif comme le vocabulaire du tirage argentique. Ici, les sondes d'écran et les profils ICC remplacent les éprouvettes, les bacs de révélateurs et les thermomètres. La gestion des couleurs, voici une étape à ne surtout pas négliger et qui pourtant est encore trop souvent délaissée par les photographes ou les graphistes lorsque qu'ils travaillent leurs images sur un ordinateur. Remerciements... La problématique de la gestion des couleurs Dans un monde parfait (!)
L'élément <mark> pour attirer l'attention Sortez votre feutre jaune Nouveau venu en HTML5, l'élément <mark> est un surligneur de texte. Il marque un , que l'on souhaite mettre en valeur d'une façon particulière, pour attirer l'attention. Son style par défaut est celui d'un texte surligné en jaune (dans les navigateurs qui le reconnaissent). Pour les anciens navigateurs qui ne comprendraient pas ce style par défaut, il suffit de l'ajouter à votre feuille CSS, voire de le personnaliser en choisissant d'autres couleurs. Usages Que peut-on imaginer comme usages pratiques à cette balise ? Démonstration de l'élément mark Marquer les mots trouvés dans des résultats de recherche Par exemple sur la page de résultats, les passages surlignés seront ceux qui correspondent exactement aux termes recherchés. <p>5 résultats pour le mot "HTML"</p><ul><li>... Marquer une portion de texte Marquer une portion de code source Un passage spécifique peut être surligné pour s'y référer ultérieurement. Marquer le jour actif d'un calendrier Prise en charge
HTML5 This specification defines the 5th major version, second minor revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features continue to be introduced to help Web application authors, new elements continue to be introduced based on research into prevailing authoring practices, and special attention continues to be given to defining clear conformance criteria for user agents in an effort to improve interoperability. This section describes the status of this document at the time of its publication. Other documents may supersede this document. This document was published by the Web Platform Working Group as a W3C Recommendation for HTML 5.2 that would obsolete the HTML 5.1 Recommendation. All interested parties are invited to provide implementation and bug reports and other comments through the Working Group's Issue tracker. This document was produced by a group operating under the W3C Patent Policy.
Vectips - Adobe Illustrator® Tutorials, tips, tricks, and resources