Apprendre le CSS avec HTML
Apprendre le CSS avec HTML guide de formation complet
...
Le HTML signifie HyperText Markup Langage. C'est un langage de balisage, qui permet de créer de l'hypertexte et de structurer sémantiquement le contenu d'une page web.
Le web trouve son origine dans les années 1989, lorsque Tim Berners-Lee rédige un document hypertexte au CERN. L'année suivante on pouvait compter dans le monde entier 130 sites web...
À partir de 1990, Tim Berners-Lee développe les trois principales technologies du web : les adresses web, le Hypertext Transfer Protocol (HTTP) et le Hypertext Markup Language (HTML) . Puis dans la période de 1991 à 1994 un nombre considérable de sites Internet sont créés.
Le W3C ( World Wide Web consortium ), naît sous l'impulsion de Tim Berners-Lee en 1994. Il a pour objectif de donner de la cohérence au projet de standardisation des langages pour le web comme le HTML, XML,CSS, PNG, SVG (graphique vectoriel adaptable ),...
Les standards du web ont mis du temps à s'imposer et, on a pu assister durant toutes ces années à ce que l'on appelle « la guerre des navigateurs ». Aujourd'hui on peut dire que les standards définis par le W3C sont mieux intégrés par les navigateurs.
En France le collectif Openweb, où l'on peut trouver Tristan Nitot, actuellement président de Mozilla-Europe, se charge de promouvoir les normes du W3C.
L'évolution des normes
Le XHTML est né en 1998, c'est le langage que l'on utilise actuellement. Il a des aspects assez complexes, notamment il se veut une reformulation du XML pour donner le XHTML.. On peut cependant lui accorder un point fondamental : c'est la grande rigueur qu'il impose dans son écriture.
A partir de 2004, un tournant s'est opéré, et un nouveau groupe de travail « dissident », le WHATWG ( Web Hypertext Application Technology Working Group ) se forme parallèlement au W3C. Il travaille sur une nouvelle version du HTML.
Le W3C intègre en 2007 officiellement le WHAT afin de créer le HTML 5. Les travaux sur la norme du XHTML 2 sont alors abandonnés.
La moralité de cette histoire, c'est que le XHTML demeure tout à fait standard et aura pour successeur le HTML 5.
Les navigateurs
Les navigateurs web ont évolué depuis le début du web.
Microsoft s'implique dans les recommandations du W3C depuis 3 ans. Il sort en 2006 IE7 , puis IE8 en 2009, et aujourd'hui : IE9. Il faut se rappeler que IE6 s'est imposé pendant plus de 6 ans, sans réelle évolution...
Depuis 2005, on observe cependant une baisse de l'utilisation d'IE au profit des navigateurs dits alternatifs comme Mozilla Firefox. Fin 2008 Google sort son propre navigateur : Chrome, basé sur le même moteur de rendu que Safari . Ces derniers navigateurs sont très respectueux des normes du W3C.
On peut tester le bon respect des recommandations du W3C de son navigateur préféré à l'aide du test Acid3 (ce test est élaboré par le WaSP, groupe de concepteurs de site Internet professionnels qui respectent et promeuvent les normes du W3C).
Il existe quatre groupes de navigateurs web :
– IE qui est basé sur le moteur de rendu Trident
– Mozilla Firefox,..basé sur Gecko – Opéra,.. basé sur Presto
– Chrome, Safari,.. basé sur Webkit
Remarques :
Aujourd'hui IE6 n'est utilisé que par 5% des internautes. C'est un navigateur comportant un grand nombre de bugs, que l'on ne considérera pas dans ce cours.
Il faut ensuite créer un dossier html sur le bureau, dans lequel on créera les sous-dossiers correspondant aux différents chapitres du cours.
Nommage des fichiers
Pour qu'une page web et un fichier css soient reconnus par les navigateurs, il faut mettre les bonnes extensions aux fichiers HTML et CSS. Attention au nommage des fichiers, le nom des fichiers est en alphanumérique, sans espace, sans accent et ne commence pas par un chiffre. Pour créer un fichier HTML, il faut indiquer l'extension .html
Pour les fichiers CSS on indiquera l'extension .css
→ exemple
index.html pour un fichier HTML et global.css pour un fichier CSS
Introduction
Le cours porte sur le (X)HTML 1.0 strict. Ce langage de balise sert à structurer les pages web en parties ou blocs, ayant un sens précis : paragraphe, listes, tableaux, etc.
Les CSS (Cascading Style Sheet ou feuille de style en cascade) décrivent la présentation, la forme et l'habillage du document HTML.
Ces deux langages s'utilisent ensemble pour constituer des pages web graphiques.
Initiation au HTML
Structure d'une page HTML
Un document HTML est constitué :
– d'un DTD (voir définition ci-dessous),
– d'un <head>, en-tête du document HTML,
– d'un <body> corps du document ;
Ces deux derniers étant contenus dans l'élément HTML <html>, racine du document.
Définition DOCTYPE ou DTD
C'est une contraction de Document Type Declaration. Il est nécessaire pour le bon fonctionnement des pages : il indique au navigateur la grammaire que l'on utilise pour construire les pages. Il informe, également, le validateur W3C de la version du HTML utilisée pour les pages.
Si on a pas de DTD, les navigateurs se mettent en mode « Quirk », ce qui peut se traduire par « habitudes bizarres » en français ; dans ce cas les pages web ne s'affichent pas correctement.
Les 5 règles du XHTML 1.0 strict
– Chaque élément HTML comporte une balise ouvrante et fermante. Toute balise ouvrante doit obligatoirement être fermée. De même, les balises toute seule se ferme : <img />, <br />, <hr />,...
– Les balises et les attributs de balises s’écrivent en lettres minuscules.
<a href= "page.html " title="aller à la page nom " >Un nom de la page</a> – Les valeurs d’attributs de balise sont dans des côtes simples ou doubles
<span class="orange" id='banane'>je suis une orange ou une banane</span> – Chaque attribut à une valeur
<input type= "radio " checked=" checked" />
– Les éléments doivent être correctement imbriqués. <p>Je suis un paragraphe <em>un peu long</em></p>
Remarques
Pour le XHTML1.0 strict les attributs et éléments de présentation ne sont plus autorisés. Ils doivent être remplacés par des styles CSS ; l’attribut target des liens et les iframe ne sont pas autorisés (ni frameset et frame).
Encodage des caractères
Les caractères sont encodés en UTF-8 (unicode). Il faut préciser l'encodage des caractères dans le <head> et enregistrer le fichier HTML en UTF-8.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Et enregistrer le fichier dans le même encodage de caractères. → voir exemple 1
Entités HTML
Les entités HTML servent à afficher des caractères spéciaux, ou des caractères du langage HTML lui-même.
< : < ( lt : less than ) > : > ( gt : gretter than ) … : ...
On trouvera une liste des entités HTML ici → voir exemple 2
Les types des éléments HTML
Il existe deux familles d'élément HTML, la famille de rendu de type en ligne et la famille de rendu de type bloc.
Définition des éléments de type de rendu blocs (ou de type bloc)
Ils distinguent des parties entières comme des paragraphes, titres, etc. Ils occupent/réservent tout l'espace de leur conteneur.
Leur propriété permet de les dimensionner. On peut également les positionner, dans le flux du document.
Définition des éléments de type de rendu en ligne (ou de type en ligne)
Ils sont prévus pour enrichir localement des portions de texte (liens hypertextes, emphase, etc). Ils se dimensionnent par leur contenu.
→ voir exemple 3
Contenus autorisés selon les types des éléments HTML
Un élément de type bloc peut contenir un ou plusieurs éléments de type bloc et/ou des éléments de type en ligne, à l'exception des éléments suivants :
<p>,<h1>,<h2>,...En effet, ces derniers n'acceptent que des éléments de type en ligne.
Un élément de type en ligne ne peut contenir que des éléments de type en ligne.
Il existe deux sortes d'éléments de type en ligne : remplacés et non remplacés.
Les éléments de type remplacés acceptent des attributs de dimensions ( height et width ). Il s'agit des éléments : <img />, <input />, <textarea>, <select> et <object> Les autres éléments n'ont pas de dimension à proprement parler, ils n'occupent que l'espace nécessaire à leur contenu. C'est le cas de <strong>, <em>, <a>.
On peut passer d'une structure de type en ligne en type bloc à l'aide de la propriété CSS display, que l'on verra plus loin.
Les principales balises HTML standards type en ligne
<a> : lien hypertexte, elle s’accompagne de la balise href qui renferme la cible du lien et title qui renseigne la destination du lien.
Exemple : <a href="page.html" title="voir le contenu de page" >Ouvrir la page</a>
<em> mettre en emphase un texte Exemple : <em>important</em>
<img /> inclut une image dans le document html. Elle s'accompagne des attributs alt (pour un texte alternatif) et src( pour indiquer le chemin vers l'image).
Exemple :<img src="images/poisson.jpg " alt="un poisson rouge" width="120" height="50" />
<q> : à utiliser pour les citations courtes.
Exemple<q>Quand on est intelligent, il est plus facile de faire l'imbécile que l'inverse. </q>
<span> : conteneur en ligne dépourvu d'un sens précis. Il permet de regrouper d'autres éléments au fil du texte.
Exemple : <span class="orange" >Un texte </span>
<strong> : indique un renforcement du texte.
Exemple :<strong> Je suis un texte en gras </strong>
type bloc
<blockquote> : à employer pour une citation longue
Exemple :<blockquote><p> Bien que tout vice verse dans le coeur humain le poison de l'adversaire, c'est l'envie qui permet au serpent de cracher son venin le plus secret et de vomir la peste de sa méchanceté pour la faire partager.</p>
<p>Grégoire Le Grand</p>
</blockquote>
<div> : conteneur générique de type bloc. Elle est utilisée pour structurer le document HTML Exemple :<div id="banner"></div>
<dl> : liste de définition. Permet de distinguer les titres des définitions <dt> des éléments de définition <dd>
Exemple :
<dl>
<dt> Une définition précise</dt>
<dd>Une description de la définition</dd>
</dl>
<form> : balise délimitant un formulaire. Elle s'accompagne de l'attribut action qui donne le chemin vers le fichier qui traitera le formulaire, de l'attribut name qui permet de donner un nom au formulaire et de l'attribut method qui permet de spécifier la manière dont on échange les données avec le serveur.
Exemple :<form action="changer.php" name="form" method="post" >
<h2><input type="text" value="" name="nom" size="15" /></h2>
<p><input type="submit" value="modifier" name="modifier" /> </form>
<h1>,<h2>,<h3>,...<h6> : le HTML prévoit 6 niveaux de titres, hiérarchiquement placés sous un seul et unique titre principale <h1>
<h1>Le titre du site</h1>
<h2>Sous titre</h2>
<ol>, <ul> : désignent respectivement les listes ordonnées et les listes à puce. Elles comportent les éléments de liste <li>
Exemple :
<ul>
<li> item 1</li> <li> item 2</li>
</ul>
<p> : désigne un paragraphe
Exemple : <p> je suis un paragraphe</p>
<table> : tableau contenant des données ou résultats. Elle comporte les éléments <tr> pour les lignes du tableau et <td> pour les cellules du tableau.
Exemple :
<table >
<tr>
<td> Cellule </td><td> Cellule </td>
</tr>
<tr>
<td> Cellule </td><td> Cellule </td>
Le modèle de boîte des éléments HTML
Définition du modèle de boîte
Selon la spécification W3C, tout élément structuré par une balise HTML se présente sous forme d'une boîte définie par :
– une largeur et une hauteur : height et width, c'est la zone de contenu
– une bordure : border
– une marge interne : padding, elle fait partie de l'arrière plan de la boîte.
– une marge externe : margin, elle se situe hors de la boîte.
Définition du calcul de la largeur d'une boîte
Pour calculer la largeur d'une boîte, il faut additionner les valeurs suivantes :
largeur, marges interne gauche et droite et bordures gauche et droite. Les marges externes ne sont pas prise en compte dans ce calcul.
Le flux du document ou flux courant
L'ordre dans lequel apparaissent les éléments HTML est celui dans lequel les boîtes sont affichées et s'empilent (verticalement ou l'une à la suite de l'autre) dans le document. Ce mécanisme de positionnement est propre au flux du document.
Définition du positionnement dans le flux
Un élément se place dans un conteneur le plus haut possible et le plus à gauche possible. Il est dépendant de son élément frère.
Si on a des éléments de type bloc, ils se placent l'un en dessous de l'autre,
Si on a des éléments de type en ligne ils se placent l'un à la suite de l'autre si ils ont la place et sinon, ils vont à la ligne en dessous.
→ Exemple de l'occupation des éléments HTML dans le flux courant.
Ancêtre, Parents, Enfants, Frères
Chaque élément HTML est imbriqué dans une hiérarchie de conteneur.
Définitions ancêtre
Un élément ancêtre est un élément qui contient un élément ou une hiérarchie d'éléments.
Définitions parent
Un élément qui contient directement un autre élément, ou le premier ancêtre dans la hiérarchie.
Définitions enfant
Un élément contenu directement dans un autre élément
Définitions frère
Un élément contenu avec d'autres éléments dans un même conteneur, possède des frères.
Ci-dessous, on a <body> est un ancêtre de <div>, <h1> et <p>. <body> est parent de <div> .<h1> et <p> sont frères. <h1> et <p> sont enfants de <div>.
Initiation au CSS
Définitions de base en CSS
Les CSS s'écrivent dans une syntaxe particulière. Elle commence par un sélecteur, suivi d'un bloc de déclaration qui comporte les propriétés, l'ensemble constituant une règle. Les commentaires dans le code CSS s'écrivent entre les symboles suivants : /* je suis un commentaire */
Définition simple Cascading Style Sheet
La cascade est la résolution du problème des différentes sources de styles qui s'appliquent à un même document. Chaque origine des styles a une priorité bien définie : auteur, utilisateur et agent utilisateur (navigateur ).
Les styles de l'agent utilisateur (navigateur) n'agiront que dans les domaines où rien n'est spécifié par l'auteur ou l'utilisateur.
On retiendra par ordre de priorité : utilisateur (internaute) > auteur ( notre feuille de style ) > agent utilisateur ( navigateur )
Définition propriété
C'est une syntaxe définie explicitement par la spécification CSS. Elle définit la mise en forme de l'élément auquel elle s'applique. Syntaxe : « clef : valeur ».
Définition sélecteur
Il indique l'élément sur lequel vont s'appliquer les déclarations des propriétés CSS. On distingue plusieurs types de sélecteurs :
– le sélecteur d'élément comme p, h1, div, etc
– le sélecteur de classe : .orange (il commence nécessairement par un point)
– le sélecteur d'identifiant : #container (il commence nécessairement par un #)
– le sélecteurs d'attribut : a[title]
Plusieurs sélecteurs peuvent précéder un bloc de déclaration. Exemple :
Résumé
- Mise en place des styles
Insertion des styles dans le <head>
On écrira les styles entre les balises <style>
<head>
...
<style type="text/css">
...
</style>
</head>
L'inconvénient de cette méthode est sa portée limitée au document html dans lequel on l'écrit.
Lier les styles à partir d'une feuille de style séparée
On écrira dans le <head>
<head>
...
<link rel="stylesheet" type="text/css" href="css/global.css" media="screen" />
...
</head>
Dans ce cas, il faut créer un fichier avec l'extension .css. L'intérêt de la méthode est que l'on factorise les CSS pour l'ensemble d'un projet en utilisant la même feuille de style pour autant de fichiers html que l'on veut.
L'attribut media désigne le type de média souhaité : screen pour l'écran du PC, print pour imprimer la page web, etc.
Classes et identifiants
Définition classe
Une classe est un nom que l'on choisit librement (caractères alphanumériques, sans accent ni espace et commençant par une lettre). C'est un sélecteur qui s'applique sur les éléments HTML possédant cette classe. Convention : dans le code une classe commence par un point
Exemple :
.orange{
color:#FF6141 ;
}
<span class="orange">Je suis un texte</span>
Définition identifiant
C'est un sélecteur unique qui ne s'applique qu'à un seul élément HTML
Exemple :
#banner{
background-color:#CCC ;
}
<div id="banner"> Je suis la bannière du site </div>
Positionnement absolu
C'est une propriété CSS très bien interprétée par l'ensemble des navigateurs. Pour positionner un élément en absolu, il faut mettre la propriété postion:absolute ;
#col-left{
postion:absolute ;
Définition position absolu
Lorsqu'un élément est positionné en absolu il sort du flux courant et se positionne par rapport à son premier ancêtre positionné.
Pour positionner un élément il faut également lui fixer des valeurs sur ses axes des x et des y. On utilise les valeurs top, left, right ou bottom pour positionner l'élément.
Exemple :
l'élément HTML p#elem est positionné par rapport au body
Remarque :Un élément positionné en absolu, quel que soit son rendu, possède alors des caractéristiques particulières : boîtes dimensionnables ( width, height,...), boîte qui occupe exactement l'espace de son contenu, pas de fusion des marges.
Définition position relative
Un élément positionné en relatif, ne sort pas du flux courant. Il possède par contre la propriété « positionné » et peut alors servir de repère pour d'autres éléments contenus et positionnés en absolu.
Les éléments positionnés en absolu, contenu dans le <div#container> positionné en relatif, se positionnent par rapport à ce dernier.
Définition z-index
Les éléments positionnés se placent en fonction d'un repère (x,y,z) où z est la profondeur. La propriété z-index a pour valeur un nombre entier qui représente l'ordre d'empilement. Plus cet entier est grand plus la couche (profondeur) sera haute.
Plus l'index est grand, pour un élément positionné en absolu, plus l'élément HTML sera au dessus
Faire un site sur deux colonnes en absolu
On peut utiliser la position absolu pour structurer un site sur deux colonnes. On donne ici, à titre d'exemple, un code qui permet de faire un site fluide sur deux colonnes.
Inclure des images dans un document HTML
Inclure directement une image dans le document : <img />
Pour inclure une image dans un document HTML, on utilise l'élément HTML suivant : <img src="images/poisson.jpg" alt="texte alternatif'' width="150" height="20" />
Attention au chemin : il peut être relatif ou absolu. Dans l'exemple ci-dessus, il est relatif. Un chemin absolu donnerait : http//www.monsite/images/poisson.jpg, par exemple.
L'attribut alt est nécessaire dans les cas suivants :
– si l'image est cassée (non accessible), alors le texte alternatif s'affiche ;
– dans le cas de l'accessibilité : les malvoyants ne voient pas les sites avec des navigateurs classiques, ils ont des navigateurs qui affichent le contenu du site en mode texte, seul son texte alternatif apparaît. Il est donc important pour l'accessibilité de bien renseigner une image.
Notons également que l'attribut alt est un renseignement important dans le référencement des contenus par les moteurs de recherche, une image en elle-même n'étant pas référencée.
Pour les images, on utilisera, la propriété CSS vertical-align qui agit sur le positionnement vertical du texte. Les valeurs possibles de la propriété sont : top, left, right, bottom ou une valeur en px. Par exemple, pour descendre une image tout en bas dans un conteneur on utilisera : img{
vertical-align:bottom ;
}
Conseil : on mettra une image dans le code à partir du moment où elle apporte une information qui complète un texte ou l'illustre.
Mettre une image en arrière plan
Dans le cas d'une image décorative on utilisera plutôt une image d'arrière plan.
#fond-banner {
background:url(../images/fond.jpg) no-repeat;
}
Attention au chemin : il faut sans doute sortir du dossier css où théoriquement se trouve la feuille de style. Dans ce cas, on pensera à bien écrire le chemin relatif vers l'image. On doit sortir du
dossier css et aller dans le dossier image, ce qui se traduit par "../" pour sortir du dossier.
Polices
La propriété ci-dessous indique quelle police on doit utiliser. Il faut mettre plusieurs choix, dans le cas où la première police ne serait pas disponible dans le système d'exploitation de l'internaute, on prendrait le choix 2 etc. :
font-family: "Choix 1", choix2, "Choix 3", générique;
Ci-dessous, la liste des polices que l'on pourra utiliser. Attention : les polices composées sont entre des côtes simples ou doubles :
Polices à empattements sans-sérif
Arial, Helvetica, "Trebuchet MS", Verdana, "Arial Black", sans-serif.
Polices à empattements sérif
"Times New Roman", Times, Georgia, serif.
Pour aller plus loin on pourra voir cet article sur alsacréation.
Unités
On utilisera les unités relatives suivantes px ou em « cadratin » (1 em = taille M dans la police de référence). Attention : la propriété font-size qui donne une taille pour le texte s'hérite. Sa valeur est donc transmise à tous les éléments descendants de l'élément considéré.
La particularité des em est d'être une taille de référence. Ainsi si un élément possède une taille de texte de 2em, et qu'un descendant possède une taille de texte de 3em, alors par rapport à son ancêtre il aura une taille 2*3 = 6 em.
Idem pour les %. Ce mécanisme n'existe pas avec les pixels (px). On peut également utiliser les % pour dimensionner les blocs. Par contre, on préférera définir en pixel ou em la taille du texte.
Les flottants
Initialement prévue pour les images ou les textes, on utilise cette propriété, pour positionner les éléments HTML en général. Elle est assez délicate à mettre en place, et nécessite une bonne compréhension de sa définition pour l'utiliser correctement.
Définition : flottant
Un élément flottant est ôté du flux et placé à l’extrême gauche ou droite ( float:left ; ou float:right) de son conteneur, tout en demeurant sur sa hauteur de ligne initiale dans le flux.
Remarque :
Attention :un élément flottant ne sort que partiellement du flux. Les éléments précédant le bloc flottant ne sont pas affectés par celui-ci. Les éléments qui suivent, quant à eux, sont affectés et se réorganisent dans le flux en conséquence. En effet, ils n’interagissent plus avec lui, sauf leurs contenus textuels ou images qui « coulent » autour de la boîte flottante.
Contexte de formatage
On peut positionner deux blocs côté à côte en flottant, cependant, ils n'auront plus d'influence sur les éléments qui suivent. De même, les conteneurs de ces flottants n'occuperont plus l'espace dimensionné par les contenus des blocs flottants.
Deux blocs flottants dans un conteneur (div#container).
Dans l'exemple ci-dessus, il y a dépassement des flottants. Le conteneur ne calcule pas sa hauteur en fonction des hauteurs des flottants, car ils ne sont plus dans le flux.
On peut utiliser pour contourner ce « problème » un contexte de formatage. Il permet d'étendre le calcul de hauteur du conteneur à ses enfants flottants. Ainsi, une solution consiste à attribuer au conteneur la propriété « overflow:hidden; » ou « overflow:auto; ». Dans tous les cas, il est préférable de ne pas mettre de marge latérale au div#container, les résultats pouvant être d'un navigateur à l'autre différents.
Deux flottants, dans un div#container avec un contexte de formatage : overflow:hidden ;
On peut également créer un contexte de formatage en utilisant la propriété « clear ».
Elle interdit à un élément de se placer sur la même ligne qu'un bloc flottant et force celui-ci à se placer en dessous.
Si on a deux blocs dans le flux d'un élément, la premier bloc étant flottant et le deuxième sans propriété de positionnement et sans contexte de formatage on a la situation suivante :
On introduira, entre le bloc jaune et vert, un saut de ligne avec la règle suivante :
hr.clear{
clear:both ;
visibility:hidden ;
}
<p class="jaune >...</p> <hr class="clear" /> <p class="vert >...</p>