Tous les gabarits — Gabarits HTML-CSS

http://www.alsacreations.com/static/gabarits/liste.html

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.

width: 100%, tu es le Mal ! – La Tête dans le Flux La propriété CSS width est certainement celle qui porte le plus mal son nom. En effet, elle représente la taille de la composante de contenu uniquement, pas largeur de l’élément. A vrai dire, l’appellation content-width lui conviendrait parfaitement et serait bien moins source de problèmes, mais voilà, elle s’appelle bel et bien width, et c’est ça le drame.

ZONE CSS - Les cours css (Articles CSS V5.0) Les héritages de ciblage Introduction Le but de ce chapitre de comprendre le poids des sélecteurs css. Connaître le poids de votre sélecteur par rapport à un autre, n'est utile que dans le cas où l'on surcharge la css.Surcharger la css, c'est à dire que l'on ajouter des propriétés de feuilles de style ou écraser des propriétés de feuilles de style, c'est ce cas qui nous intéresse dans ce chapitre.En effet, dans le cas où nous ajoutons une propriété, il n'y a pas de notion de poids du sélecteur. 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.

Le point sur les grilles en CSS – La Tête dans le Flux Les grilles en CSS font souvent office de Saint Graal dans nos maquettes : toujours imitées, jamais égalées. Ou énoncé différemment : des fois ça marche, des fois ça marche pas. EDIT : à l’aube de 2016, cet article bénéficie d’une suite dans cette réflexion : « Grid Layout, vers la grille parfaite ». Bonnes pratiques en CSS : BEM et OOCSS Des années durant, j'ai intégré des sites Web et développé des applications JavaScript sans ressentir le besoin d'une méthodologie pour nommer les classes CSS. Puis, les projets grossissant, le code CSS est devenu douloureux… L'épineux sujet du nommage en CSS est loin d'être fermé. Depuis le début de la décennie, plusieurs auteurs majeurs ont partagé leurs recherches. Ils ont apporté un regard nouveau et sont allés à contrecourant, en rupture avec ce qui faisait jusqu'alors consensus.

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.

Ce bon vieux tableau HTML – La Tête dans le Flux Hier, sur Twitter, j’ai conseillé d’utiliser des tableaux HTML pour de la mise en forme. Et je n’ai même pas honte. En 2011 déjà, lors d’un atelier Paris-Web, je vantais les mérites des tableaux HTML pour de l’habillage graphique. Conseils et bonnes pratiques Accueil → La plupart du temps, j'utilise simplement des classes délimités par des traits d'union (ex. .foo-bar, pas .foo_bar ou .FooBar), mais dans certaines circonstances, j'utilise la notation BEM (Block, Élément, Modifieur). BEM est une méthode pour nommer et classifier vos sélecteurs CSS de façon à les rendre beaucoup plus strict, transparent et informatif. La convention de nommage suit ce modèle : .block {}.block__element {}.block--modifieur {} .block représente le niveau supérieur d'une abstraction ou d'un composant. .block__element représente un descendant de .bloc puisqu'il contribue à former .bloc dans son ensemble. .block--modifieur représente un état ou une version différente de .block.

Guide de développement HTML - Guides pour développeurs Web HyperText Markup Language (HTML), ou langage de balisage hypertexte, est le langage au cœur de presque tout contenu Web. La majorité de ce que vous voyez dans votre navigateur est décrit en utilisant HTML. Plus précisément, HTML est le langage qui décrit la structure et la sémantique du contenu d'un document Web. Initiation au positionnement CSS (partie 2) Le positionnement des éléments en CSS est sans aucun doute l'un des aspects les plus intéressants de cette technologie, mais également l'un des plus ardus. Positions, flux et autres flottants sont pourtant des notions essentielles à une bonne maîtrise de la mise en page. Si de plus en plus d'intégrateurs semblent aujourd'hui acquérir les bases du comportement de ces propriétés, les choix des techniques demeurent couramment discutables, tout au plus hasardeux. Voyons ces méthodes de positionnement en détails afin de ne plus se laisser aller à des choix arbitraires incohérents. Sommaire du document

Tombez pour SMACSS Petit tour d'horizon sur ces guidelines qui feront de vous un bûcheron du CSS, un vrai. Timber ! SMACSS est un ensemble de conseils et de lignes de conduite élaborés par Jonathan Snoovvk et dont le but est de vous permettre d’organiser votre CSS de manière claire et intelligente. Le premier principe réside dans la catégorisation : on distingue et regroupe les règles CSS par affinité logique afin de structurer son code (base, layout, module, state, theme). Le second principe relève de la convention de nommage : ne pas utiliser des ID quand une classe fait très bien l’affaire, nommer les classes de manière à faire ressortir la logique qui s’y cache, … Le troisième principe consiste à découpler le HTML du CSS : garder chaque module indépendant du contexte HTML dans lequel il se trouve, utiliser les sélecteurs d’enfants à bon escient, …

Comment indiquer la langue d’un contenu en HTML? Il est important sur une page web d’indiquer clairement la langue du contenu. Les informations données sur la ou les langues du contenu seront utiles pour les outils d’indexation (moteurs de recherche), les outils de traduction automatique ou encore ceux de synthèse vocale. Par exemple, un lecteur d’écran a besoin de connaitre la langue du contenu pour pouvoir le lire correctement, quand cette langue diffère de ses paramètres par défaut. Indiquer la langue de traitement On commencera par veiller à ce que chaque page HTML ait un attribut lang sur l’élément racine, qui indique la langue principale de la page. Guide de survie du positionnement CSS Cet article s'adresse à ceux qui ont déjà quelques notions de positionnement CSS, mais qui se demandent s'ils l'utilisent correctement, ou qui galèrent pour mettre en pratique leurs connaissances encore trop bancales. Comment s'y retrouver dans le machin tentaculaire qu'est le positionnement CSS? C'est un sujet à la fois complet (tant mieux) et complexe (ouille). Pour bien l'appréhender, il faut prendre en compte: les possibilités de CSS 2.1 pour l'affichage et le positionnement des éléments (et à l'avenir de CSS 3); celles qui sont implémentées dans les navigateurs (et donc pas les autres, sauf pour préparer l'avenir); les contraintes de mise en page et d'adaptation aux contenus (le contenu, ça va ça vient… et ça vous surprend toujours d'une manière ou d'une autre); les contraintes du média screen (on ne fait pas tout et n'importe quoi avec les hauteurs et largeurs, le centrage, etc.); les bugs éventuels des navigateurs (ou de certains navigateurs).