jQuery Mobile Leçon 5: Le texte Formater et ajouter du style au texte est primordial pour tout concepteur Web. Cette leçon vous introduira aux possibilités étonnantes offertes par CSS pour la présentation du texte. Les propriétés suivantes seront décrites : L'indentation du texte [text-indent] La propriété text-indent permet d'ajouter une touche d'élégance aux paragraphes de texte en appliquant une indentation à la première ligne du paragraphe. Dans l'exemple suivant, un alinéa de 30px est appliqué à tous les paragraphes balisés par un élément <p> : Afficher un exemple L'alignement du texte [text-align] La propriété CSS text-align correspond à l'attribut align utilisé dans les versions anciennes de HTML. Dans l'exemple suivant, le texte des titres du tableau <th> est aligné à droite, tandis que les données du tableau <td> sont centrées. Afficher un exemple La décoration du texte [text-decoration] La propriété text-decoration permet d'ajouter des « décorations » ou « effets » différents au texte. Afficher un exemple uppercase
Le contexte de formatage block en CSS Certaines spécifications CSS sont plus obscures que d'autres. Mais il est du devoir d'un intégrateur de les connaître pour être plus efficace dans son métier. Qui n'a jamais pesté contre des éléments flottants qui ne se comportent pas comme espéré ? Ces comportements, comme d'autres, sont décrits et expliqués au sein d'une spécification concernant le “Visual Formatting Model”, qui décrit globalement le concept de flux d’affichage, de boîtes et de modes de rendu visuel. Voyons comment déchiffrer cette ressource cruciale… Block et Inline sont sur un bateau (qui float) Pour commencer, la spécification chamboule nos croyances établies et nous apprend à distinguer les blocks… des blocks. Si vous pensiez qu’un élément block est simplement un élément qui possède la règle display: block, eh bien en fait, non, c’est un peu plus subtil que ça Mais c’est quoi un “contexte de formatage block” ? Des sortes de “super éléments” ? Démonstrations en image… 1- Débordement de flottants : 3- Fusion de marges :
Règles pour l'accessibilité des contenus Web (WCAG) 2.0 Cette publication a été en partie financée par des fonds du gouvernement fédéral des États-Unis du ministère de l'éducation, de l'Institut National pour la recherche sur le handicap et la réadaptation (Institute on Disability and Rehabilitation Research (NIDRR)) sous le numéro de référence ED05CO0039. Le contenu de cette publication ne reflète pas nécessairement les avis ou politiques du ministère américain de l'éducation, la mention de noms de marques, de produits commerciaux ou d'organismes ne signifie pas non plus qu'ils ont été approuvés par le gouvernement des États-Unis. Des informations supplémentaires à propos de la participation au groupe de travail des règles pour l'accessibilité des contenus Web (WCAG WG) sont consultables sur la page d'accueil du groupe de travail (en anglais). Anciens participants dans le groupe de travail des WCAG et autres contributeurs
Apprendre HTML5, CSS3 pour créer un site web À travers de nombreux exemples pratiques et cas concrets, Alsacréations vous propose de découvrir toutes les possibilités offertes par la conception web aux normes, HTML, XHTML, HTML5, les feuilles de style CSS et CSS3, le Web mobile, l'accessibilité, PHP, JavaScript, jQuery, etc. Tutoriel : Guide pas à pas Article : Document d'analyse ou de référence Astuce : Court stratagème toujours utile Cette page présente une sélection de nos ressources. Vous pouvez aussi consulter la liste complète des tutoriels et articles ou des astuces. Comprendre le positionnement en CSS Consolidez et élargissez vos connaissances des différents schémas de positionnement CSS actuellement utilisés ou avant-gardistes (flux, positionnement absolu, fixé, relatif, flottement, inline-block, modèle tabulaire). Découvrez nos formations web, leurs programmes, les dates des sessions et les tarifs sur le site formations.alsacreations.fr
Comment insérer des vidéos Youtube HTML5 sur votre site ? Lorsqu'on insère une vidéo Youtube dans une page web, on se retrouve avec un super player flash et notre vidéo en FLV qui se joue dedans. Impecc... Pour faire ça, il suffit simplement de copier coller le code qui se trouve sous la vidéo youtube. Ce qui donne un truc comme ça : Bon, ça on le savait tous. Mais comment faire pour insérer une vidéo Youtube qui soit affichée en HTML5 (avec la balise vidéo) ou en flash selon le navigateur de vos visiteurs ? Si je prend par exemple l'url de la dernière bande annonce de TRON, voici ce que j'obtiens : J'adapte un peu l'url pour avoir ceci : C'est à dire pour avoir le player directement, qui sera soit du HTML5 si votre navigateur le supporte, soit du flash si votre browser est à la masse ;-) Ensuite, un petit coup de iFrame magique comme ceci : EDIT : Sur les conseils de Diti, j'ai testé avec une balise object et ça à l'air de le faire un peu plus dans les normes. [Source et photo]
Les Media Queries CSS3 La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc. Approche historique Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style. <! screen Écrans handheld print Impression
.mouseleave Description: Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element. This method is a shortcut for .on('mouseleave', handler) in the first two variations, and .trigger('mouseleave') in the third. The mouseleave JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser. This event is sent to an element when the mouse pointer leaves the element. For example, consider the HTML: The event handler can be bound to any element: Now when the mouse pointer moves out of the Outer <div>, the message is appended to <div id="log">. After this code executes, clicks on Trigger the handler will also append the message. The mouseleave event differs from mouseout in the way it handles event bubbling. Demo:
Creating ‘Mono’ HTML5 CSS3 Single Page Layout Creating new HTML5&CSS3 single page layout – Mono Today I want to introduce new great masterpiece – new template with codename: ‘Mono’. This will nice HTML5/CSS3 template with nice light brown colors. Hope that you will like new styles and you will learn some new design methods. I going to start step-by-step tutorial for creating html5-css3 layout. Final Result Live Demo download result Get started Ok, let`s start. css – which will contain our CSS stylesheets (nivo-slider.css, reset.css and style.css)images – which will contain all used imagesjs – will contain JS files (html5.js, jquery.js, jquery.nivo.slider.pack.js and main.js) Head section code Now I am going to give you the usual HTML head area of index.html with the attached CSS/JS. Moving forward – Main layout (body) here are you can see base CSS styles Header section with logo and navigation Our header will contain menu, search bar (at top right) and logo at left side. CSS for header section Main content section CSS for Main content section