2803 webdesign | webdesign, css, graphisme, scripts... CSS Débutant : cours et tutoriels sur les feuilles de style CSS 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>...
Ce qu'il faut et ne pas faire en CSS : Les balises Si vous voulez vraiment entrer dans les standards Web, vous découvrirez bientôt que la chose la plus importante est le codage. Un code correct, solide et bien structuré. Le HTML, XHTML, les balises, les attributs, la structure...C'est tout ce dont il s'agit réellement. Nous sommes attachés aux termes des standards Web et CSS. La clé des documents conformes aux standards Web est leur structure. La plupart des documents ont différentes sections (navigation, contenu principal, contenu latéral, le droit d'auteur, zone de contact, etc.). La section la plus importante doit être aussi élevée que possible dans le flux, mais l'importance de certaines sections est également définie par la position des balises d'en-tête (h1, h2, h3, h4, h5, h6). Dans le monde des standards Web, on entend souvent parler d'un syntagme "séparant la présentation du contenu". Il existe une multitude de possiblité dans le choix des balises. La validation a son importance dans l'analyse de votre code. À faire
Galeries CSS, télécharger des thèmes libres de droits Pour qu'un site soit lu il vaut mieux privilégier le contenu au design, cela ne fait aucun doute. En revanche un design bancal, un contraste trop faible, peuvent nuire à la clarté de l'information et de ce fait faire fuir les visiteurs. Voici donc une sélection de quelques sites où vous pouvez télécharger des thèmes (design ou templates en anglais) librement. Il est important de noter que ces thèmes sont prêts à être utilisés. Vous n'avez besoin d'aucune connaissance en CSS ou HTML pour les installer, vous avez juste l'embarras du choix. Open Web Design Ce site vous propose une galerie de thèmes avec un moteur de recherche et des filtres sur la version (HTML ou XHTML strict, transitional), le contraste (clair sur foncé, foncé sur clair), couleurs primaires et secondaires... Open Design Community Un groupe de web designers est à l'origine de ce site. CSS Design Templates Ce site est composé d'une section pour les sites classiques ainsi que de plusieurs autres pour des plateformes. Solucija
Kit CSS gratuit à télécharger La maquette du site que vous êtes en train de consulter fait largement appel aux CSS et propose une mise en page en « pseudo-frames » permettant de faire défiler le contenu tout en préservant des menus et un bandeau fixes. Cette mise en page particulière est gérée par plusieurs feuilles de styles conditionnelles qui rendent ce système compatible avec l’ensemble des navigateurs du marché. Elle comporte également des « présentations alternatives » (Changer l’apparence du site, dans le menu de gauche). Elle comporte enfin des menus « pop-up » offrant un accès facile aux nombreuses pages du site. Les kits que nous proposons en téléchargement sont destinés à faciliter l'application de certaines ou de l'ensemble de ces fonctionnalités sur votre site. Ces kits ne doivent surtout pas être considérés comme des "modèles" irréprochables. Ces kits se déclinent en plusieurs versions permettant d’approfondir tel ou tel aspect technique. Pseudo-frames : comment ça marche ? Pop-up universel.
JavaScript Garden Although JavaScript deals fine with the syntax of two matching curly braces for blocks, it does not support block scope; hence, all that is left in the language is function scope. function test() { // a scope for(var i = 0; i < 10; i++) { // not a scope // count } console.log(i); // 10} There are also no distinct namespaces in JavaScript, which means that everything gets defined in one globally shared namespace. Each time a variable is referenced, JavaScript will traverse upwards through all the scopes until it finds it. The Bane of Global Variables // script Afoo = '42'; // script Bvar foo = '42' The above two scripts do not have the same effect. Again, that is not at all the same effect: not using var can have major implications. // global scopevar foo = 42;function test() { // local scope foo = 21;}test();foo; // 21 Leaving out the var statement inside the function test will override the value of foo. // global scopevar items = [/* some list */];for(var i = 0; i < 10; i++) { subLoop();}
Functional Programming in Javascript This is an interactive learning course with exercises you fill out right in the browser. If you just want to browse the content click the button below: This is a series of interactive exercises for learning Microsoft's Reactive Extensions (Rx) Library for Javascript. So why is the title "Functional Programming in Javascript"? Well it turns out that the key to learning Rx is training yourself to use functional programming to manipulate collections. map filter concatAll reduce zip Here's my promise to you: if you learn these 5 functions your code will become shorter, more self-descriptive, and more durable. Finishing the Interactive Exercises This isn't just a tutorial, it's a series of interactive exercises that you can fill out right in your browser! Note: Use the "F4" key to toggle full screen mode for each editor. This tutorial is on GitHub, and is asymptotically approaching completion. Your answers will be saved in local storage. Working with Arrays This section will follow a pattern.
Top news - Echo JS Index des balises HTML Structure Sections Références Cadres Listes Liens Multimédia Tableaux Formulaires Rendus visuels Textes - mise en forme Textes - sémantique <abbr> <acronym> <address> <blockquote> <cite> <code> <del> <dfn> <em> <h1>... My First Site | creating your first website, basic HTML for beginners Path // → MY FIRST SITE We’ll begin very easily here, because I’m assuming you are just starting out. No one likes to look back on My First Site, but hopefully your experience can be made slightly less traumatic with a push in the right direction. You did Start Here first, right? It’s not a necessity, but it helps. Note: Because of the way HTML is learnt, you should probably read these in order. My First Page Learn the basic structure of a HTML page, a tag, and how to save it as a webpage. Basic Formatting Now that you have the ability to write a page, you might want to jazz it up with some code. Basic Links By now you should have written a few simple pages. Basic Images Add some pretty pictures and your site will look much nicer. <body> Attributes Add some colour to your text, links, background and set an image as the background of your page. Basic Web Design This is a collection of tips that will start you off on the right path to being a good web designer. drop me a line.
color gradient generator At first, I was using the hexagonal color-cube in WORD to create gradients, but that didn't have the resolution nor flexibility that I wanted. This PHP app takes 3 input parameters: beginning color, ending color, and the number of steps requested and interpolates between them. Step 0 is always the beginning color, and step n is the ending color. theory of operation The beginning and ending colors are captured from the GET request to the server. The color values are provided on each row in both decimal and hexadecimal. Source code for the color gradient generator may be found here. usage Provide values for color begin, color end, and number of steps, and click on the 'generate color gradient' button. values are: (color begin: 0x99FFCC), (color end: 0x6633CC), (number of steps: 100)
HTML Help by The Web Design Group