background preloader

CSS : on reprend tout à zéro !

CSS : on reprend tout à zéro !
Par Joe Gillespie Cet article est le premier d'une série qui en compte 15. Chaque épisode sera publié bimensuellement dans nos pages. Introduction Si l'idée d'utiliser des Feuilles de Styles en Cascade vous effraie, tranquillisez-vous. Que vous utilisiez un éditeur WYSIWYG sans jamais vous occuper du code source qu'il y a derrière, ou même si vous n'avez jamais créé la moindre page Web, ce tutoriel va vous mettre dans la bonne direction. De quoi aurez-vous besoin? De rien de particulier. Pas de panique ! Ah, vous aurez besoin d'un navigateur, ça va sans dire. Si vous voulez télécharger vos pages vers un serveur Web, vous aurez besoin d'un programme FTP standard, mais ne vous en inquiétez pas pour l'instant, tout va être fait sur votre ordinateur. Première étape : une page de base Avant toute chose, il nous faut une page Web de base. <html><head></head><body> Voici ma page Web </body></html> À l'intérieur de la balise html se trouvent deux autres paires de balises. La partie <head>... Related:  DEVELOPPEMENT (outils web)PHP

Apprendre le HTML : les bases des CSS Les CSS (Cascading Style Sheets) peuvent constituer le point de réference du formatage (couleurs et apparence du texte, des liens, et de certains éléments de la page html) de tout le site web. Si votre site comporte plus d'une centaine de pages HTML, il serait fastidieux de les modifier une à une, si vous décidez de changer la couleur de vos liens sur votre site ! Les CSS vous permettent une maintenance extrèmement simple... Les liens avec les CSS Par exemple, si vous désirez que tous les liens de votre site soient rouges, blancs lorsqu'ils sont survolés par la souris, et orange une fois cliqués, vous utiliserez ce code : Pourquoi "a:" ? Autre exemple, mais ici les liens survolés vont être en gras, soulignés, verts et en taille de 20pt : Le body et les CSS Intégrez la couleur du body dans les CSS et non dans le code HTML de la page : si vous décidez de modifier après coup la couleur du body, vous n'aurez qu'à modifier une ligne dans le fichier CSS et non chaque page HTML !

* Arachnophilia Introduction This is the Arachnophilia Home Page. Download the latest version of Arachnophilia here. Arachnophilia is a Web page development workshop and general programming tool. User Feedback Thanks for Arachnophilia I have requested [ ... ].com to make you a donation (usually $200-$300) and they asked if you have a donation page. I have used Arachnophilia for many years and you richly deserve reward and recognition for this excellent product. Thanks again, and also thanks for undercutting the common perception that free programs can't have more value than their price. Documentation and Download Documentation:Online Documentation (included with Arachnophilia as its help system) Download: Please complete all the steps in the list below (don't leave anything out): Read "A note about Freeware" Acquire the Arachnophilia executable. Installation / Troubleshooting If you have not completed all the steps in the list above, please do not write me to say the program is not working. Bug reports

Template CSS 2 Ajout fin 2004. L'article ci-dessous a été écrit en 2003, il a beaucoup vieilli, et compte tenu de nouvelles astuces découvertes depuis, le modèle présenté pourrait être grandement simplifié. Il mériterait d'être réécrit, en attendant, vous trouverez sur cette autre page quelques hacks CSS récents qui pourront simplifier le travaille du webmaster. Sommaire. Nous présentons dans cette rubrique un template de page web classique. Cette rubrique constitue donc un bon tutorial pour se lancer dans la mise en page web avec CSS. Présentation du modèle Notre page web va se diviser en cinq zones : une entête prenant sur toute la largeur de la page et de hauteur fixe un corps de page de hauteur et largeur variables un pied de page un bandeau vertical à gauche de largeur fixe pour les menus un bandeau vertical à droite de largeur fixe pour des notes Nous souhaitons schématiquement obtenir ceci : Nous posons en plus les contraintes suivantes : Explications et commentaires concernant le code Remarques

PHP : Le tutoriel pour grands débutants pressés Ce tutoriel, comme son nom l'indique, est intégralement conçu pour des grands débutants pressés. Appelons grand débutant celui qui n'a jamais programmé ni entamé aucune initiation sur les notions générales de la programmation. Nous ambitionnons donc de satisfaire ce public, s'il est prêt à travailler régulièrement et à y consacrer une semaine intensive, par exemple... Mais bien entendu, qui peut le plus peut le moins ! Aussi ce tutoriel ne devrait pas rebuter l'informaticien qui connaît déjà un ou plusieurs autres langages, mais souhaiterait se mettre à PHP,langage devenu incontournable pour la programmation web. Ce lecteur-là pourra parcourir à son rythme le tuto qui suit et y trouver réponses à ses questions... Dans tous les cas, bonne lecture ! 125 commentaires Lire l'article. Article lu 197426 fois. Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance.

Réalisation d'un design complet (HTML / CSS) en 4 étapes Dans ce tutoriel nous allons voir étape par étape comment concevoir le code initial HTML et CSS d'une page web, afin d'acquérir quelques techniques de base. Rien de trop ardu pour une page web de ce type : un titre, un menu, le contenu de la page, et un pied de page contenant les informations d'ordre informatif. Voir le résultat final que l'on souhaite obtenir Télécharger les sources des fichiers (zip) Voici le code HTML construit pour cette page : <! Voir le résultat initial Notez qu'aucun style n'a été appliqué à la page, vous remarquerez que le site est tout à fait lisible et utilisable, certes peu agréable à l'œil mais fonctionnel Note : Le support du tutoriel (graphisme et code) est libre d'utilisation à condition de préciser la source (Alsacreations).

Tuto Geek » Tutoriaux » [CSS] Les bases 1) Introduction Bonjour Le langage CSS, Cascade Style Sheet, traduit littéralement Feuille de Style en Cascade sert à la mise en forme. Il est en effet très utile pour séparer mise en forme et contenu du XHTML. 2) Utilisation du CSS Pour pouvoir l'utiliser, vous devez créer une balise <div> ou <span> avec un attribut class ou id. 1. Il faut savoir qu'il y a des différences entre class et id : - Un id s'applique à un objet unique : il ne peut pas y avoir deux mêmes id dans une page - Une classe peut désigner plusieurs objets identiques. Par exemple, il peut avoir 1. 2. Mais il n'est pas correct 1. 2. De même entre <span> et <div> : - Un <div> s'applique à un élément bloc, qui contribue à la mise en page du document. - Un <span> s'applique à un élément en-ligne, qui enrichie du texte. Il est préférable de créer une feuille de style à part en .css pour plus de lisibilité. 1. Vous pouvez spécifier le type de media comme screen, print,... 1. 2. 3. 1. Et ceci dans votre feuille de style CSS: 1. 1. 1.h1

Lorem Ipsum - All the facts - Lipsum generator Tutoriels XHTML, CSS, Accessibilité, JavaScript - Alsacréations Proposez votre tutoriel Niveaux : Débutant Confirmé Expert Langages hypertexte (HTML, HTML5, XHTML), balises, structure des pages web et validation W3C Feuilles de style CSS (Cascading Style Sheet) Accessibilité Accessibilité des sites internet, bonnes pratiques, ergonomie, utilisabilité Javascript Langage de script pour le web dynamique exécuté par le navigateur Développement Langages et technologies du web tels que PHP, MySQL, Ajax Responsive web design Tout pour smartphones et tablettes Design Design et graphisme pour le web Formats, encodage, XML Formats variés, XML et microformats, sémantique Web Le monde du web et d'internet en général Dans DreamWeaver, il y a "Dream", ce qui indique que faire un site avec ce logiciel est du domaine du rêve (Annie Cordy)

Quels sont les logiciels pour programmer en flash AS3 gratuitement ? - FlashDevelop Dans l’article de la semaine dernière, nous avons découvert un éditeur actionscript performant (FDT). Un éditeur comme FDT facilite et accélère grandement la programmation actionscript. Oui c’est bien.. mais cet éditeur n’est pas gratuit. Heureusement, il existe des logiciels entièrement gratuit pour créer des applications swf / flash. Certes cet éditeur est moins performant, mais toujours plus que l’éditeur d’Adobe Flash. Et en attendant d’acquérir une version encore plus efficace, cela vous permet de développer des jeux flash le plus simplement du monde. Voici ce que je vais vous montrer : Comment installer et utiliser cet éditeur sur Windows.Comment exploiter chacune des fonctionnalités pas à pas.La méthode simple pour compiler des applications très rapidement ! Ce cours consiste à vous aider à profiter au maximum des fonctionnalités offertes par cet éditeur actionscript, afin de vous aider à programmer efficacement et GRATUITEMENT Par contre, il ne fonctionne que sur Windows.

XML Francophone Sélecteurs CSS class et id A quoi servent les sélecteurs CSS class et id ? Tout simplement à définir des styles particuliers que l'on voudra reproduire de façon ponctuelle ou récurrente dans les pages HTML.Une fois que la la feuille de style de base n'a plus de secrets, il est temps de passer à la vitesse supérieure. Les sélecteurs class et id sont incontournables et indispensables. Voyons leurs similitudes et leurs différences par deux exemples. Fonctionne avec : Tous les navigateurs Propriétés utilisés : background-color float width margin text-align Le sélecteur class Premier exemple : les pages web sont souvent ponctuées d'ancres permettant de remonter en haut de page, et celles-ci sont souvent placées à droite de la page. Code CSS Code (X)HTML Pour appeler ce style dans la page html, on indique simplement class="haut" à l'intérieur de la balise voulue. <p class="haut"><a href="#haut">Haut de page</a></p> Et voilà, et cette mise en forme peut-être répétée autant de fois que besoin dans la page. Sélecteur id Haut

Related: