background preloader

HTML5 : Éléments <figure> et <figcaption>

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 Related:  Apprendre le HTML5

Coding a CSS3 & HTML5 One-Page Website Template Martin Angelov Web development is an area in which you have to keep up with the latest technologies and techniques, so that you are at the top of your game. And no wonder – this is an area which changes with an amazing pace. What is the standard now will be obsolete in just a couple of years. But changes do not come from nowhere. Today we are making a HTML5 web template, using some of the new features brought by CSS3 and jQuery, with the scrollTo plug-in. Step 1 – The Design Every design process starts with an initial idea which you later build upon. Photoshop Design After this, the design is hand coded with HTML and CSS going hand by hand, moving from designing the background, colors and fonts, to detail work on the content section. Step 2 – HTML It is a good time to note, that HTML5 is still a work in progress. In this tutorial, we are using a few of the tags introduced with this new version of HTML: These are used exactly as you would use normal divs. template.html – Head section <!

Les classes conditionnelles en HTML Les cancres du Web, Internet Explorer 6, 7 et parfois 8, nous mènent souvent la vie dure. Même quand on s’abaisse à leur niveau, il leur arrive de ne pas comprendre, ou d’y mettre de la mauvaise volonté. La solution classique (comprendre: à l’ancienne) est d’utiliser des hacks CSS. Ces derniers sont déconseillés car peu fiables; en effet, on ne sait jamais à l’avance quels seront les navigateurs sur le marché dans deux ou cinq ans, et comment ils comprendront ou pas nos hacks CSS. Une deuxième solution, conseillée par Microsoft et Alsacréations (que du beau monde :)), est d’utiliser les commentaires conditionnels. Nous allons voir dans cet article que l’utilisation habituelle des commentaires conditionnels a quelques inconvénients, et proposer une technique qui combine plusieurs avantages : les classes conditionnelles. Le problème des commentaires conditionnels Cependant, dans la pratique, une feuille de style corrective pour Internet Explorer ne suffira pas. Une alternative ?

HTML5 : structure globale du document Pour débuter sereinement avec une nouvelle intégration HTML5 et comprendre ses implications, nous allons commencer par le début : la structure globale d'un document. La conception d'une page web en suivant la philosophie du standard HTML5 spécifié par le W3C (ou du standard vivant tel que désigné par le WhatWG) répond à quelques réflexes de base. La structure d'un document (l'imbrication des balises à la racine) est simplfiiée pour répondre aux attentes pragmatiques des intégrateurs et webdesigners. Un document HTML5 minimal Sans surprise, les bases d'un code HTML5 ressemblent beaucoup à celles rédigées à l'aide des précédentes versions HTML 4 et XHTML 1.x. <! Le doctype La première ligne d'en-tête a été considérablement simplifiée. Ce doctype allégé a été mûrement testé et réfléchi : il permet toujours - pour les anciens navigateurs - de rester dans le mode d'interprétation conforme aux standards et d'éviter le mode quirks. L'élément racine <html> L'attribut lang (sur <html>) Initializr

The ol Element and Related Attributes: type, start, value, and reversed The <ol> element has a new attribute reversed in HTML5. In addition, a couple of related attributes purged in HTML 4 have made a return, namely start and type for <ol>, and value for <li>. Making things more interesting, the returning attributes were removed from HTML 4 for being presentational. So why are they back? Presentational and semantic? As we all know, presentational stuff belongs in CSS, not HTML. The type Attribute # While an ordered list’s counter style is generally presentational, in some documents it can be a part of the document’s meaning, as the specification for the type attribute notes: The type attribute can be used to specify the kind of marker to use in the list, in the cases where that matters (e.g. because items are to be referenced by their number/letter). Examples of this include legal or technical documents, which can contain references to non-decimal list items in prose: We can specify the list’s style using the type attribute, with the following values: <! <! <!

Full Page Image Gallery with jQuery In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse. When a thumbnail is clicked, it moves […] View demoDownload source In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. We will use some CSS3 Webkit properties to enhance the look and jQuery for the functionality. We will be using the awesome jQuery thumbnail scroller by Malihu. Again, we will be showing some amazing photography by Mark Sebastian. So, let’s begin! The Markup The HTML consists of a main wrapper div for the gallery. We will also add a “View Thumbnails” div that will appear when the thumbnails are hidden. The CSS First, we will reset the style and define some main properties for the body: The navigation elements will be styled as follows:

Les commentaires conditionnels pour Internet Explorer Les commentaires conditionnels sont un mécanisme propre à Internet Explorer Windows, qui permettent d'inclure dans une page (X)HTML, de manière valide, du code qui ne sera lu et interprété que par Internet Explorer, ou par l'une ou l'autre de ses versions. Techniquement, il s'agit de simples commentaires HTML, qui seront compris comme tels par la plupart des navigateurs. Cependant, le contenu de ces commentaires a une syntaxe spéciale, qui permet à Internet Explorer de savoir s'il doit interpréter le contenu du commentaire ou bien l'ignorer. Les commentaires conditionnels sont compris par Internet Explorer depuis la version 5.0 mais sont officiellement abandonnés à partir d'Internet Explorer 10. Syntaxe de base L'exemple le plus simple de commentaire conditionnel est le suivant: Rappel: un commentaire conditionnel ne peut être inséré que dans un document (X)HTML, et ne peut contenir que des instructions (X)HTML et non CSS. Exemple d'utilisation: Viser une version ou un éventail de versions

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. Au-delà de ce critère, les groupes de travail qui ont élaboré HTML5 ont su analyser les usages courants et s'adapter aux tendances du web avec (entre autres) les nouvelles façons de trier l'information sur une page web. Liste récapitulative des éléments de section HTML5 Un cas particulier : Internet Explorer <9 Exemples de documents

The output element Across the web, you’ll see a range of sites that feature calculators for working out things like loan repayments, mortgage rates, tax, insurance, and more. Until now, we’ve had no way of semantically marking up the result of those calculations. Enter: the <output> element! In this article, we’ll show you <output> and some related JavaScript tricks. The Definition # The <output> element, new in HTML5, is used in forms. The output element represents the result of a calculation. Along with the standard global attributes, <output> also accepts the following: for A space-separated list containing the IDs of the elements whose values went into the calculation. form Associates the <output> element with its form owner. name The name of the element. Implementing <output> # We’ll start by creating a simple example that adds two whole numbers together (Figure 1). See a live example of the code in Figure 1. As you’d expect, if you only enter a single value, the function returns NaN. Polyfills # Summary #

Créer une galerie photo grâce à CSS3 « Clearideaz Avec l’arrivée des nouvelles propriétés CSS3 (dont la spécification n’est toujours pas finalisée…), il est devenu assez facile de créer des sites internet attrayants sans pour autant avoir recours à Flash ou à JavaScript. Dans la démonstration associée à cet article, vous aller pouvoir visualiser quelques possibilités offertes par CSS3. Le pseudo-selecteur :target C’est de cette manière que j’obtiens la méthode de sélection des images agrandie dans la démo. Les ombres Pour la démo, j’ai utilisé la propriété box-shadow afin de mettre en valeur l’image miniature survolée. -moz-box-shadow:0 0 0 rgba(255,255,255,0.5);-webkit-box-shadow:0 0 0 rgba(255,255,255,0.5); Il est à noter que cette propriété à été retiré pour le moment de la spécification CSS3. La propriété transform Cette propriété permet d’agir sur la forme d’un élément, qu’il s’agisse d’une image ou de toute autre balise standard. Il est par exemple possible d’effectuer une rotation sur un objet via cette syntaxe : Les transitions

Afficher une icône favicon dans le navigateur Une favicon est une icône mise à disposition par un site Web pour enjoliver, en particulier dans les navigateurs Web, les endroits où ce site est mentionné. Cette icône pourra être utilisée dans la barre d'adresses ou de titre, les favoris (le terme est d'ailleurs un mot-valise né de la contraction de « favorites » et « icon »), les onglets, ou autres raccourcis. (source : Wikipedia) Pour avoir une favicon lisible par la plupart des navigateurs, il est préférable que cette image soit au format .ico. Une fois votre fichier favicon.ico en ligne, il ne vous restera plus qu'à l'appeler depuis votre page. Les navigateurs modernes acceptent d'autres types de fichiers d'image comme le PNG qui est un format libre et compressé, mieux adapté au web. Il n'existe pas de type MIME officiel pour les fichiers .ico mais le type image/x-icon est très répandu et conforme au standard de formation des types MIME.

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: How to Use <DETAILS> and <SUMMARY> Tags Among several new tags that are available in HTML5, Specifications (such as: figure, figcaption, and aside), detail and summary tags, in my opinion, are the most useful. With these new tags you can hide some of the long content and display only the summary. We actually often see this effect around, but most of them are still built upon JavaScript or its brother: jQuery, which most people don’t understand. Now, with these new elements – details and summary – things will get easier. So, let’s see how tags work in a real case scenario. Recommended Reading: Beginner’s Guide To: Building HTML5/CSS3 Webpages In this demo we are going to summarize a product description. <details><summary>MacBook Pro Specification</summary><ul><li><strong>13.3-inch LED-backlit glossy widescreen display</strong> with edge-to-edge, uninterrupted glass (1280 x 800-pixel resolution). In that example, I’ve added MacBook Pro specification detail, and now let’s see how the browser renders those tags. Browser Supports

Related: