Image, ligne horizontale et fond de page
Vous vous demandez comment vous pouvez insérer des images dans vos pages web, comment vous pouvez mettre des lignes horizontales, un fond de page. Eh bien sur ce chapitre nous allons apprendre à faire tous ça.
1) Insérer une image :
Pour insérer une image dans une page web, on utilise la balise img suivie de l’attribut src. La balise img indique au navigateur qu’il s’agit d’une image, l’attribut src sert à indiquer l’emplacement de l’image.
Syntaxe : <img src="emplacement_de_l_image/nom_de_l_image.extension ">
le cas où l’image et la page web se trouvent sur le même emplacement, la syntaxe devient
<img src="nom_de_l_image.extension "> ou
<img src="./nom_de_l_image.extension ">
Exemple :
Dans cet exemple l’image nkourani est dans le dossier images, un dossier qui se trouve sur le même emplacement
que la page web. Il est à noter que jpg est l’extension de l’image. L’extension d’une image peut être jpg, jpeg, png
, gif, bmp… mais il est préférable d’utiliser des images jpeg, jpg, png ou gif et surtout éviter d’utiliser de bmp.
Dans ce même exemple, moroni.png se trouve sur le même emplacement que la page web.
Il faut savoir que l’exemple ci-dessus, les images sont affichées avec la taille par défaut.
Il faut savoir qu’on peut apporter quelques améliorations en indiquant la taille de l’image…
Pour déterminer la taille de l’image, il suffit de déterminer la largeur et la hauteur en utilisant respectivement width et weight.
Syntaxe: <img src="emplacement_de_l_image/nom_d_image.extension” width:X height:Y alt="texte" >
X: doit être un nombre réel qui peut ne pas être suivi de px ou %.
Y : doit être un nombre réel qui peut ne pas être suivi de px ou %.
Texte : c’est juste une petite description de l’image. Quand on déposera le curseur sur l’image, ce texte
apparaîtra.
Exemple:
Il est aussi possible de faire en tel sorte que l’image soit cliquable : c'est-à-dire l’utiliser comme un lien.
Syntaxe :
<a href="emplacement_du_ficher"><img src="emplacement_de_l’image/nom_d_image.extension"alt="texte "
title="texte_du_titre" ></a>
Exemple:
2) Ligne horizontale :
Pour insérer une ligne horizontale, on utilise la balise hr. Il est à noter qu’il est aussi possible de déterminer la longueur de la ligne.
Exemple : nous allons insérer deux lignes dont l’une aura une longueur de 400px.
Code html:3) fond de page
Comme vous le savez, l’arrière plan d’une page web est toujours blanc. Peut-être que l’arrière plan par défaut ne plait pas certains personnes. Par bonne chance on peut changer l’apparence de l’arrière plan quand on veut. Il faut savoir que cette fois ci, nous allons travailler avec la balise body.
Pour changer l’apparence de l’arrière plan, soit on utilise une couleur d’arrière plan ou une image de fond de page.
Pour le cas d’une couleur de fond de page, voici la syntaxe :
<body bgcolor="couleur">
Exemple pour un fond de page de couleur rouge :
Pour le cas d’une image, voici la syntaxe:
<body background="emplacement_de_l_image/nom_de_l_image.extension">
