Tutoriels XHTML, CSS, Accessibilité, JavaScript - Alsacréations Proposez votre tutoriel Niveaux : Débutant Confirmé Expert Langages hypertexte (HTML, HTML5), 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 Vue & Nuxt Vue.js et Nuxt Formats, encodage, XML Formats variés, XML et microformats, sémantique Web Le monde du web et d'internet en général Dans les cas les plus extrêmes, on se retrouve à chercher une aiguille dans une meute de foin.
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>...
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
Pseudo Elements en CSS Les pseudos-éléments font rélérence à des parties de texte qui ne sont pas forcément délimités par des balises HTML. D'accord mais donne des exemples ! : prenons first-line qui permet de mettre la premiàre ligne en majuscule. Ou first-letter pour mettre une capitale à la première lettre. Vous apprendrez aussi à définir un fond pour le texte avec CSS, mettre un espacement entre les lettres ou les mots. La syntaxe du CSS La syntaxe des pseudo éléments est un peu différente du CSS simple, mais sans grand changement. selecteur:pseudo-element Les pseudos-éléments font rélérence à des parties de texte qui ne sont pas forcément délimités par des balises HTML. Par exemple le pseudo-élément :First-Letter désigne la première lettre d'un paragraphe. First Line first-line Désigne la première lettre de tous les blocs de texte (titres H1 et autres, paragraphes...) Au lieu de : On va mettre : Voir un exemple : Lorem ipsum dolor sit amet, consectetuer adipiscing elit. First Letter
CSS : on reprend tout à zéro ! (épisode 3) Par Joe Gillespie Cet article est le troisième d'une série qui en compte 15. Chaque épisode sera publié bimensuellement dans nos pages. Troisième étape : appliquer du style au texte Nous nous sommes déjà débarrassés du côté brut du noir et blanc pour le remplacer par quelque chose de plus doux, mais on peut faire beaucoup plus. La police d'écriture Nous allons commencer par le style de police, dans la mesure où c'est ce qui va apporter le plus grand changement. Ci-dessus : quelques polices courantes sur les ordinateurs Windows et Mac. Voici une indication courante de famille de polices sans-serif : font-family: Verdana, Geneva, Arial, sans-serif; Voici une famille de polices serif : font-family: Georgia, "Times New Roman", Times, serif; Remarquez que lorsque le nom d'une police contient plus d'un mot, l'ensemble doit être placé entre guillemets à l'anglaise : "Times New Roman". Ajoutons les polices sans-serif à nos styles et voyons ce que ça donne. Notre page en police sans-serif >> Les titres
Design, CSS : les rollover CSS, un must ! Les feuilles de style CSS (pour Cascading Style Sheets) sont un outil merveilleux pour tout créateur web. Leur puissance est (presque) sans limite, dans le respect des standards du moins. J’initie une petite série (vous me direz encore une série !) sur les feuilles de style et leurs fondamentaux. Plus qu’une définition qui n’aurait pas de sens, je tenterais de vous proposer quelques bonnes astuces à connaître qui pourront : Vous faire gagner du temps dans le process de développement. Je vais débuter par une astuce de mise en forme : le rollover CSS. Exemple #1 : cahier des charges Dans ce premier exemple nous allons réaliser un jeu de deux bouton, alignés verticalement, qui possèderont le même état au repos mais afficheront une image personnalisée au survol. La base Html Nous appliquerons le style sur une base html très simple : une liste. <li id="item<? Le fichier image utilisé Voici le fichier utilisé : La mise en forme CSS On matérialise une bordure de couleur différente sur le hover.
Couleurs et fonds - MDC Doc Center Fond translucide Même si opacity (translucidité) est une propriété de style définie dans la spécification CSS3, module CSS3 Color, chapitre 3.2, des navigateurs la gèrent déjà. D'après la spécification, l'opacité peut être considérée conceptuellement comme une opération de post-traitement, par conséquent le niveau de transparence choisi est appliqué à tout le contenu. Cela signifie que si vous avez un DIV contenant du texte, il est impossible d'avoir du texte opaque sur un fond translucide, car si vous définissez la propriété opacity pour l'élément DIV, tout son contenu hérite de la transparence, et il est impossible de l'enlever… par des moyens normaux. Si vous essayez cet exemple de code, vous découvrirez que texteopaque n'est pas opaque, il a hérité de l'attribut opacity de son parent et les redéfinitions de style sont ignorées pour la raison donnée ci-dessus. <div id="conteneur"><div id="texteopaque"> Ceci est un texte normal sur un fond translucide </div></div> Hiérarchie réarrangée
Learn CSS Positioning in Ten Steps: position static relative absolute float 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Let's move div-1 down 20 pixels, and to the left 40 pixels: Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. It appears that position:relative is not very useful, but it will perform an important task later in this tutorial. 3. position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. Let's move div-1a to the top right of the page: What I really want is to position div-1a relative to div-1. Footnotes 10.
Introduction aux CSS