Cours HTML & CSS

HTML

Le squelette

Le squelette est constitué de 3 parties :

  1. Le prologue (DOCTYPE)
  2. L'entête (élément HEAD)
  3. Le contenu (élément BODY)

Les éléments HEAD et BODY sont obligatoires et se trouvrent regroupés dans l'élément HTML.

Les éléments de bloc

Les éléments de bloc réalisent des ruptures dans le flux du document, ils sont précédés et suivis d'un retour à la ligne.

Les éléments intégrés

Les éléments intégrés servent à marquer visuellement ou logiquement une partie du texte. Les plus utilisés modifient la typographie : gras, italique, et souligné.

CSS

Les Cascading Style Sheets (feuilles de style en cascade) permettent de modifier le rendu visuel des pages HTML. Pour cela on peut procéder de plusieurs façons : en surchargeant le rendu par défaut des éléments, en définissant des classes d'éléments ayant un rendu commun ou en définissant des styles ponctuels ne servant qu'une fois dans un document.

Les propriétés

Chaque type de rendu modifiable est codé sous la forme d'une propriété, par exemple la propriété color permet de définir la couleur des caractères. La syntaxe à respecter pour définir une propriété de style est la suivantte :

propriété : valeur ;

L'utilisation du point-virgule est indispensable pour cloturer la définition de la propriété. Notons également que certains propriétés nécessitent l'utilisation d'une unité de mesure avec la valeur, notamment les polices de caractères, et les différentes tailles modifiables.

Les propriétés de bloc

Le contenu de chaque élément de bloc est constitué de trois couches : le padding (espacement entre contenu et bordure, la bordure, et le margin (espacement entre la bordure et le bloc englobant. Ces propriétés sont illustrés sur les divisions suivantes :

division
  

La définition des css

Les feuilles de styles css peuvent être définie dans trois endroits différents : directement dans le code html en ajoutant un attribut style aux éléments concernés, dans l'entête du document à l'intérieur de l'élément STYLE ou dans un fichier séparé indiqué dans l'entête. L'intérêt de cette dernière méthode est de pouvoir donner un style identique à plusieurs page web (notion de charte graphique)


dominique . fournier @ univ-lehavre . fr