Tuto HTML #1 - Manipulaton d'images

Voici un petit tutoriel qui vous facilitera la vie pour mettre en forme vos tests.
Plus de problèmes d'images trop petites ou trop grandes.
Vos images seront bien alignés avec le texte à la façon "JV.com".


Voici le code principal d'une image :
Code:
Évidemment tout seul ce code ne sert à rien, c'est pourquoi on va lui ajouter des attributs.
Il en existe plusieurs sortes.


src : permet de mettre le lien de l'image.
Exemple :
Code:
Qui donne ça :



width : permet de donner une largeur à l'image.
height : permet de donner une hauteur.
1 seul de ces codes permet de redimensionner l'image ce qui est super pratique.
Si vous mettez les 2 en même temps vous risquez de déformer l'image.
La valeur de ces attributs sont en pixel.


Exemple :
Code:
Qui donne ça :



Ensuite il existe d'autres attributs très utiles pour bien mettre en forme son test, il s'agit des attributs "style"
Ceux si composent le code CSS (feuilles de styles d'une page HTML). Ici ils seront liés directement au code de l'image.

Si vous voulez faire flotter une image à gauche du texte utliser ce code : style="float:left;"
A droite il suffit de changer "left" par "right" : style="float:right;"


Exemple :
Code:

Qui donne ça :

Lors de sa jeune enfance, Samus vivait avec ses parents (Rodney et Virginia Aran) sur une planète (K-2L) qui fut attaquée par des Pirates de l'espace menés par Ridley qui tua les parents de l'enfant. La jeune fille, seule survivante de sa colonie, fut recueillie par des Chozos, un peuple avancé mi-homme mi-oiseau vivant sur une planète voisine : Zebes. L'héroïne est alors orpheline. Elle y passa toute sa jeunesse, apprenant de ce peuple sage et intelligent qui lui enseigna tout son savoir et lui transmirent de leur ADN. Lorsqu'elle décida de quitter les Chozos, ceux-ci lui donnèrent un cadeau d'adieu qui lui serait très utile étant donné ses buts fixés (venger ses parents en exterminant les pirates de l'espace) : son armure, la Combinaison de Puissance (pouvant être améliorée par la Combinaison Varia, de Gravité…), résistante aux environnements hostiles et dans laquelle circule du sang de Chozos.



Vous l'avez sans doute remarqué, le texte est trop collé à l'image... Voici donc un autre attribut de style CSS qui est bien sympa.
Il s'agit des marges, à gauche ou à droite : style="margin-right:2em;"
Pour ce code, n'utilisez pas de pixels mais des "em", c'est comme les moles, c'est une quantité de pixel.



Voici donc le code final :
Code:

Qui donne ça :



IMPORTANT : Le codage HTML est très rigoureux, veuillez à bien respectez le code car il suffit d'avoir oublié une guillemet pour que le code ne fonctionne plus comme on le souhaite.

Et voilà, vous avez acquis le pouvoir de manipuler les images à votre guise ^^