Tous les gabarits — Gabarits HTML-CSS. CSS Débutant : balises html ou xhtml de base. Pour comprendre le fonctionnement du langage CSS, il est nécessaire d'avoir quelques notions en HTML.
Le HTML est un langage simple, fait de balises (du genre <tag>) qui ont toutes une fonction et un sens. C'est ce qu'on appelle la sémantique. Respecter la sémantique, c'est améliorer l'accessibilité... et aussi le référencement. Cela dit, on ne perdra jamais de vue que l'humain passe avant les robots ! On fait un site pour des utilisateurs, pas pour le plaisir de se retrouver en tête de requêtes sur google. Voici donc les quelques balises HTML fondamentales à connaître pour comprendre la structure d'une feuille de style. Sommaire Balises les plus courantes Document <html></html> : document HTML <body></body> : corps du document Titres <h1></h1> : titre 1er niveau <h2></h2> : titre 2ème niveau <h3></h3> : titre 3ème niveau (... et ainsi de suite jusqu'à 6) Éléments de texte <p></p> : paragraphe <ul></ul> : liste à puce <ol></ol> :
CSS Debutant : Tutoriels CSS. Boutons CSS Le bouton élegant qui change d'aspect au passage de la souris est très utilisé sur les pages web.
Longtemps, la majorité de ces boutons étaient animés par un javascript ou pire (car plus lourd) par un applet java. Avec les CSS la légèreté et la simplicité est de mise pour créer de beaux boutons. Plusieurs images de fond Grâce à la propriété background-image, il est très facile de mettre une image de fond dans le corps (body) d'une page web. Pour pouvoir mettre plusieurs images de fond, il faut définir des cadres (des div) auxquels on attribuera une image chacun. Coins arrondis Pour réaliser des blocs (menus ou autres) avec des coins arrondis, il existe principalement trois méthodes en CSS, qui offrent plus ou moins de fluidité et de possibilités graphiques. Créer des coins arrondis avec une seule image, coulissante en hauteur et en largeur, permet une certaine liberté graphique et s'adapte à un design fluide. Zoom d'image Vignettes (Thumbnails) Tableaux à bordures fines Et bien si ! Le Kit du parfait Webdesigner #1 - Blog Du Webdesign Magazine.
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.
Mise en page et CSS. Introduction à la mise en page par les CSS Les CSS permettent de gérer deux aspects relativement distincts de la présentation de vos pages : La présentation des textes, en jouant sur la taille, la couleur, l'interligne, le type de caractère, la graisse, etc.La mise en page, en gérant la disposition des principaux élements (en-tête, menu, pied de page, etc.) et de leurs contenus.
Ce deuxième point est sans aucun doute le plus complexe à maîtriser. Pour vous permettre d'en faire le tour et de réaliser les designs évolutifs que permettent les CSS, nous allons aborder les notions nécessaires une par une : 1- La notion de "flux" Le "flux", c'est l'ordre d'affichage des divers éléments qui composent une page Internet. Par défaut, les navigateurs présentent les éléments dans l'ordre où ils se trouvent dans le code source. Lorsque le navigateur rencontre un élément "bloc", il retourne à la ligne, affiche l'élément bloc puis retourne à nouveau à la ligne pour disposer le reste du contenu. Exemple :