logo alezan

Bienvenue chez AlezanWeb !

09/01/25

un site qui avance !

logo alezan Retour à la page d'accueil

Exercices de mise en page html 5


Aller en bas de la page

La Police...

Voir les bases du cours sur les polices et leur utilisation

Italique, gras, souligné…

Les balises HTML em et strong ne sont pas réellement destinées à l'italique ni à la mise en gras du texte. C'est le navigateur qui interprête ainsi ce qu'on veut faire ressortir dans le texte.

Pour mettre le texte en italique, gras, souligné, etc., voici les propriétés CSS à utiliser :

  • font-style (italic,oblique, normal,...)
  • font-weight (bold, normal, ...)
  • text-decoration (underline, line-through, overline, none) : ceci sert pour souligner, barrer, mettre une ligne au-dessus et annuler tous les effets

Alignement du texte :

On utilise la propriété text-align et on indique l'alignement désiré :

left,

center,

right,

justify


ATTENTION

On ne peut pas modifier l'alignement du texte d'une balise inline (comme span, a, em, strong,…). L'alignement ne fonctionne que sur des balises de type block (p, div, h1, h2, …) et c'est un peu logique, quand on y pense : on ne peut pas modifier l'alignement de quelques mots au milieu d'un paragraphe ! C'est donc en général le paragraphe entier qu'il vous faudra aligner.

Exercices avec "float" :

Image flottante Ceci est un texte normal de paragraphe, écrit à la suite de l'image et qui l'habillera car l'image est flottante.

Il faut placer l'élément flottant en premier dans le code HTML. Si on place l'image après le paragraphe, l'effet ne fonctionnera pas.

Ce texte est écrit (avec un clear both) sous l'image flottante.

On peut aussi bien utiliser la propriété float sur des balises block que sur des balises inline.

Il est courant de faire flotter une image pour qu'elle soit habillée par du texte, comme on le voit avec ce gif.

Notation raccourcie pour les couleurs : on peut écrire une couleur avec seulement trois caractères. Par exemple : #FA3 équivaut à écrire #FFAA33.

On pourrait parfois penser qu'il y a un conflit entre des balises contradictoires ou concurrentes. Le CSS décide que c'est la déclaration la plus précise qui l'emporte.


Rendez-vous pour la suite des exercices, Page 4 !

Faire valider mon code en ligne par W3C (http://validator.w3.org/) en cliquant sur le logo ci-dessous :

CSS Valide !

Remonter en haut de la page

A suivre...
Retour à la page d'accueil !
Retour à la page d'accueil !