Pour concevoir un site web correctement, il faut maîtriser quelques notions fondamentales que nous allons présenter ici.
Cours XHTML et CSS en quelques heures (2e version)
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.
2# XHTML et CSS selon votre profil
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…
3# Le langage à balises
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 !
4# Une page HTML type
Nous allons maintenant voir la structure type d’une page en XHTML, et enfin, réaliser notre première page.
5# Trois catégories de balises
Il existe trois principales catégories de balises en HTML, qui auront une influence sur le sens et sur l’affichage.
6# Les blocs usuels
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 !
7# Les éléments en-ligne usuels
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.
8# Les formulaires
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).
9# Les tableaux
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.
10# La balise <link />
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…
11# Quelques balises utiles
Avant de s’attaquer au langage CSS, il nous reste quelques balises utiles à étudier.
Complément# XHTML et le type MIME
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.
12# Premiers pas avec les CSS
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.
13# La syntaxe des CSS
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.
14# Les sélecteurs et les combinaisons
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.
15# Les pseudo-sélecteurs
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,…).
16# Cascade de propriétés
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.
17# La mise en forme du texte
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,
18# Les blocs
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.
Complément# Modèle des blocs W3C et Quirks mode
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.
page 1 de 2 - Page suivante
»