Tous les articles de la catégorie : Tutoriels Code

Dans ces articles tutoriels, j’aborde la mise en place de code HTML, CSS ou PHP, voire même JavaScript de façon simple et pédagogique. Le code est indispensable à connaître quand on gère un site web, même si ce n’est que les bases. Découvrez les rudiments des langages web et du code à travers ces tutoriels.

Des pseudo-classes pour d’authentiques effets [Article Invité]

Des pseudo-classes pour d’authentiques effets [Article Invité]

J’acceuille aujourd’hui Florian du blog « business-xperience« , sur lequel il partage des connaissances sur la création de business sur internet, le blogging et le webmarketing. Il vient vous expliquer une méthode facile pour faire de beaux effets sur votre site, en deux coups de cuillères à CSS. Dans cet article, nous parlerons des pseudo-classes en CSS. Vous allez voir, c’est quelque chose de très sympa. Cela vous permettra de mettre un peu de dynamisme sur votre site. Par exemple, vous pouvez changer la couleur d’un formulaire en fonction des actions de l’internaute. Sympa, non ? Qu’est-ce que c’est ? Les pseudo-classes permettent de modifier le style appliqué à des balises HTML par rapport à sa position relative ou en réaction à un événement. Ce n’est toujours pas clair ? Pas de panique ! On va apprendre en pratiquant sur des exemples. La syntaxe Les pseudo-classes s’utilisent après un sélecteur selon le format suivant : sélecteur:pseudo-classe Les différents sélecteurs Le sélecteur peut-être soit une balise seule (exemple : p, div, a), soit une classe (exemple : div.warning, .fleft) ou bien un identifiant (div#header, #footer). Les différentes pseudo-classes Il existe un nombre limité de pseudo-classes et il est impossible d’en créer de nouvelles. De nombreuses ont été ajoutés avec CSS3. Dans cet article, je me contenterais des plus anciennes, qui ont l’avantage d’être compatibles avec tous les navigateurs. On peut les classer en 4 catégories : Les pseudo-classes de lien Les pseudo-classes dynamiques Les pseudo-classes structurelles Les autres… Je ne parlerais pas de la dernière catégorie. Les plus intéressantes étant les dynamiques, commençons par cette catégorie : Les pseudo-classes dynamiques Sur un site...

Le sprite rend plus rapide! [Article invité]

Le sprite rend plus rapide! [Article invité]

Article invité rédigé par Marie,
Mais pourquoi utiliser les sprites CSS?
Combiner toutes les images qui participent à la charte graphique de votre site Web en une seule image utilisée en fond accélère le chargement de la page et vous évite de perdre des visiteurs. Voici une méthode qui va vous faciliter la vie dans la composition de vos sprites en CSS.

Les Doigts dans le Web #5 : ressources HTML & CSS

Les Doigts dans le Web #5 : ressources HTML & CSS

Dans cet article, je vous partage la liste des ressources que j’utilise dans le cadre du cours HTML & CSS que je donne sur Marseille. Le temps est une denrée de plus en plus rare! Je suis actuellement bien occupée mais je ne vous abandonne pas. C’est pourquoi j’ai eu l’idée de vous partager cette longue liste de sites web, réalisée au départ pour le cours que je donne à l’INFA. C’est du « brut du brut », vous y trouverez pêle-mêle les liens vers la documentation officielle, des sites d’astuces et d’apprentissage, des articles de ce blog, des outils en ligne, des logiciels… Il s’agit là de la vraie liste que je donne à mes élèves! Prenez le temps de la survoler, je suis sûre que vous trouverez un ou deux « trucs » bien utiles. HTML Documentation officielle http://www.w3.org/TR/html-markup/spec.html Tutoriel très complet (+livre en téléchargement) http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web-avec-html5-et-css3.html Infographies HTML5 http://www.developer-tech.com/news/2012/jul/12/history-html5-infographic/ http://img.skitch.com/20100608-duqwn4s257c6swkrhjur2jbc83.jpg Démo de toutes les fonctionnalités HTML5 (à voir!) http://beta.theexpressiveweb.com/ CSS Documentation officielle http://www.w3.org/wiki/CSS/Properties Support des propriétés par les navigateurs http://www.normansblog.de/demos/browser-support-checklist-css3/ http://caniuse.com/ Templates CSS http://www.freecsstemplates.org/css-templates/ Gabarits CSS http://www.alsacreations.com/static/gabarits/liste.html Utiliser une police originale Comment utiliser une police originale sur son site web? Menu simple en CSS http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html La propriété « Display : inline-block ; » http://www.alsacreations.com/article/lire/1209-display-inline-block.html Technique des portes coulissantes http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html#portescoulissantes Commentaires conditionnels http://www.alsacreations.com/astuce/lire/48-commentaires-conditionnels.html Microformats http://www.alsacreations.com/tuto/lire/1213-microformats-introduction.html Testez la puissance de CSS http://www.csszengarden.com Astuces CSS http://www.css-tricks.com/ Sites références http://www.siteduzero.com/ http://www.pompage.net/ http://alsacreations.com/ http://openweb.eu.org/ Divers Testez n’importe quel CMS http://www.opensourcecms.com Palettes graphiques http://colorschemedesigner.com/ (nouvelle url) http://colourlovers.com/ http://kuler.adobe.com/ Logiciel « la boîte à couleurs » (pipette) http://pourpre.com/colorbox/ Outils pour convertir du pixel vers l’unité « em » http://pxtoem.com/ Consulter les taux de pénétration des navigateurs Le journal du net : http://www.journaldunet.com/solutions/marche-des-navigateurs/ Le W3Schools : http://www.w3schools.com/browsers/browsers_stats.asp...
Page 2 sur 612345Dernière page »