Pour concevoir un site web correctement, il faut maîtriser quelques notions fondamentales que nous allons présenter ici.
A l'affiche

Une réecriture presque complète du cours sur les langages XHTML et CSS qui a fait le succès de MartiusWeb.net ! Cette version se veut actualisée, plus complète et plus claire que la précédente.
Pour concevoir un site web correctement, il faut maîtriser quelques notions fondamentales que nous allons présenter ici.
Selon votre profil, vos connaissances en informatique ou vos besoins, XHTML et CSS n’auront pas le même sens. Si vous cherchez à apprendre XHTML et CSS pour concevoir un site internet dans les règles de l’art, alors vous n’aurez pas grand chose à faire des subtilités de la norme. Si au contraire, vous cherchez à répondre à des besoins professionnels, à des exigences répondant à votre système d’informations alors l’utilisation de XHTML prendra un sens beaucoup plus critique…
Les langages (X)HTML sont des langages dits “à balises” (ou balisés), c’est à dire qu’ils correspondent à une syntaxe qui consiste à encadrer les données à l’aide d’un marqueur au début et à la fin d’un élément donné. Ce résumé en deux ligne n’est pas très clair, mais c’est le moment de détailler tout cela !
Nous allons maintenant voir la structure type d’une page en XHTML, et enfin, réaliser notre première page.
Il existe trois principales catégories de balises en HTML, qui auront une influence sur le sens et sur l’affichage.
Voici une liste des balises bloc les plus courantes et utiles. Certaines d’entre elles sont parfois même un peu oubliées des intégrateurs XHTML/CSS. Ce chapitre est donc une découverte pour certains, une piqure de rappel pour d’autres ! Nous ne parlerons pas des tableaux et des formulaires ici !
après les blocs, voici les balises en-ligne les plus courantes, qui permettent d’indiquer le sens de certains passages du contenu d’un bloc.
Les formulaires permettent à l’utilisateur de transmettre des données via le protocole HTTP. Le code HTML permet d’afficher ces formulaires, mais pas de les traiter : pour cela, il faut utiliser une application installée sur le serveur (comme un script PHP).
Les tableaux ont eu une enfance heureuse dans le petit monde des designers web, ils permettaient de proposer une mise en forme de la page originale assez facilement. Le résultat était une soupe de code particulièrement indigeste, d’autant plus que les tableaux n’étaient pas destinés à ce rôle. En réaction, le web les a presque bannis, malgré le fait qu’ils restent utile pour au moins un besoin : présenter des données tabulaires. Seul bémol : même si la norme est toujours très permissive, de nombreux attributs ne devraient plus être utilisés.
Cet élément méconnu est utilisé pour lier des documents ou des informations à une page web, une feuille de style CSS par exemple. Mais elle permet de faire beaucoup plus, et elle est malheureusement sous-exploitée. Découvrons ensemble les services que cette balise peut vous rendre…
Avant de s’attaquer au langage CSS, il nous reste quelques balises utiles à étudier.
Selon le W3C, organisme fixant, entre autres, les standards HTML, et XHTML le type mime à utiliser avec XHTML n’est plus text/html, type historique utilisé pour le HTML. Essayons de faire le point.
Les CSS permettent de gérer la manière dont le contenu sera affiché ou lu. Malgré leur fort potentiel et l’intérêt qu’ils représentent pour les intégrateurs, leur utilisation souffre de quelques défauts de conception et surtout d’un support incomplet par la plupart des navigateurs.
Dans ce chapitre, nous allons nous intéresser aux bases de la syntaxe et aux structures du langage CSS : les règles et les propriétés.
Les sélecteurs permettent de déterminer les éléments pour lesquels s’appliquent vos règles CSS. Leur syntaxe est à la fois puissante et souple, et une fois maîtrisé, vous aurez accompli une bonne partie de votre apprentissage.
Les pseudo-sélecteurs permettent d’interagir avec des données qui ne sont pas identifiés dans l’arbre des éléments HTML : comme la première ligne ou la première lettre du contenu d’un élément, ou encore son état (actif, survolé par la souris de l’utilisateur,…).
Dans une feuille de style, il est possible que certaines propriétés entrent en concurrence : c’est à dire que deux valeurs différentes sont assignées pour une même propriété et un même élément. CSS introduit un mécanisme permettant de déterminer la valeur qui sera retenue, selon la spécificité du sélecteur de la règle.
Le langage CSS offre un module très complet permettant de mettre en forme le texte : gérer les polices, la couleur, le style, mais aussi l’espacement des caractères,
Les blocs possèdent des propriétés de mise en forme communes, afin de personnaliser leur aspect. Nous allons les étudier avant d’apprendre comment les positionner.
Internet explorer a introduit sa propre méthode pour gérer les dimensions d’un bloc, qui diffère du modèle officiellement soutenu par la norme. Ainsi, dans certaines configurations, il est nécessaire d’adapter votre feuille de style pour la rendre conforme sous Internet Explorer.
Notes de pied de page
Martius Web, conception de sites internet, développement web et services est cuisiné par Martin Richard, servi par Dotclear.
Ces pages se doivent valides XHTML et CSS 2.
Mentions légales - Plan du site - Contactez-nous
Les tutoriaux et articles mis à disposition sur ce site sont placés sous licence Creative Commons BY-NC-SA (France).