background preloader

Tous les gabarits — Gabarits HTML-CSS

Tous les gabarits — Gabarits HTML-CSS

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

Related:  Sites de FORMATION, TUTORIELSTUTORIELSHTML5 & CSS3html5 cssMise en page, agencement, Layout etc

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.

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. Exploiter n'importe quelle police dans vos pages HTML avec FLIR FLIR est une solution axée sur une combinaison PHP/Javascript. Elle génère dynamiquement une image à partir d'un texte contenu dans votre page web dans une police de caractère déposée sur votre serveur et qui, autrement, ne pourrait pas être vue par vos visiteurs. L'image générée sera automatiquement insérée dans votre page à l'aide de Javascript et visible sur tous les navigateurs modernes. N'importe quel élément contenant du texte peut être remplacé depuis les headers (<h1>, <h2>, etc...) jusqu'aux éléments <span>. Avant de vous jeter les yeux fermés dans l'éxecution de ce tutoriel, sachez que désormais CSS offre la possibilité - beaucoup plus souple et accessible - d'inclure une police "exotique" dans une page web grâce à la propriété @font-face. Par ailleurs, l'utilisation de FLIR requiert un serveur web supportant PHP et la librairie GD.

Comprendre l'UX Design en 10 images Ca fait quelques temps qu’on parle de plus en plus d’UX Designer et de design d’expérience. Ces notions peuvent te sembler assez floues au premier abord, ce qui est normal au vu des confusions qui se font régulièrement sur les réseaux sociaux et portfolios, sans parler des offres d’emploi. En effet, tu vois souvent sur Twitter ou Dribbble des gens qui se définissent comme UX/UI Designer ou User Experience Designer. Alors toi, tu comprends que ça a vaguement un rapport avec le design, en voyant les créations de la personne ou en lisant ses tweets.

margin La propriété margin permet de définir la taille des marges sur les quatre côtés de l'élément. C'est une propriété raccourcie qui permet de manipuler les autres propriétés de marges : margin-top, margin-right, margin-bottom and margin-left. Il est possible d'utiliser des valeurs négatives pour chacun des côtés. SyntaxeEdit 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.

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.

Osez HTML5 et CSS3 ! Un site perso en fil rouge Pour étayer cet article, nous allons nous servir d'un fil rouge : mon site personnel Goetter.fr dont l'intégration a été réalisée en plusieurs étapes, et destiné à servir de passerelle entre mes différentes activités. Puisqu'il s'agit d'un site sans grande portée médiatique ni contraintes, j'ai pu en profiter pour tester HTML5 et moult règles CSS2 et CSS3 (border-radius, rgba, inline-block, transitions, rotations, @font-face, text-shadow, opacity, :before/:after et autres joyeusetés...). Méthode Daisy : les CSS feuille à feuille Bienvenue chez vous ! C’est le bazar, n’est-ce pas, dans votre code CSS ? Le CSS ? C’est une vraie galère dès qu’on doit y revenir, dès qu’on repasse derrière quelqu’un d’autre et même quand on doit replonger dans son propre code après longtemps... et ce n’est vraiment pas aisé de coder à plusieurs mains, en équipe. Mais comment diable s’y prend-on ?

<length> Résumé Le type de données CSS <longueur> correspond à une mesure de distance. C'est un <number> immédiatement suivi par une unité de longueur (px, em, pc, in, mm, …). Tutoriel HTML - Table des matièresfretutorial Connexion | Inscription | FAQ Accueil » Tutoriels » Tutoriel HTML - Table des matières Tutoriel HTML - Table des matières 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.

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. 5 sites majeurs d'e-learning/dev, graphisme, webdesign [Total : 1 Moyenne : 5/5] Pour notre plus grand bonheur les sites proposant des tutoriels et des cours d’e-learning autour du web se multiplient. Aujourd’hui l’auto-apprentissage n’est plus une option pour celui où celle qui se veut créatif, surprenant ou simplement curieux. A l’heure où les MOOC (Massive Open Online Cours) fleurissent, il m’a semblé bon de vous proposer un listing de 5 sites d’e-learning à conserver dès maintenant dans vos marques-page. Une découverte pour certains, et disons une piqûre de rappel pour les autres.

Related: