Attractive.1fr1.net - Inscrit-Toi , clique ici !
 
AccueilAccueil  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 [XHTML] Les images

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
scooby snacks
.
.
avatar

Age : 25
Messages : 86

♣ O.M.G journal (presque) intime ♣
Racontage de vie.:

MessageSujet: [XHTML] Les images   Ven 26 Fév - 15:42

    Voici un petit - ou grand je ne sais pas encore xD - tuto sur les images. (: Car en effet, un site sans images c'est moche fade. Et justement... Je suis là pour le défader (O_o) un peu. xD


    Déjà, vous devez savoir qu'une image peut être de plusieurs formats mais qu'elle n'en a qu'un seul. Le plus léger des formats est le jpeg. Mais il en existe beaucoup d'autres comme le gif, le png et le bmp. Pour les sites on se sert beaucoup du png car ce format gère ce que l'on appelle la transparence, mais c'est une autre histoire. (x

    On retiendra que le jpg est le plus répandu et le plus utilisé pour ce qui est photo.
    Le png est utilisé pour ce qui n'est pas "photo". Il existe deux versions 8 bits et 24 bits ce qui apporte un changement au niveau des couleurs. On note qu'il gère la transparence et que c'est le format le plus récent. IE 6 ne gère pas la transparence.
    Le gif est vieux et très répandu par habitude. Le png est mieux que le gif car l'image est plus légère et les couleurs plus jolies. Toutefois, le gif est - ou peut être - animé contrairement au png.

    Le bmp est à bannir car il est mal supporté sur le web.

    Pensez à enregistrer vos images de la manière suivante :
  • pas de majuscules
  • pas d'accent
  • pas de caractères spéciaux
  • pas d'espace
  • extension en minuscule



    Insérer une image dans une page web.

    Ouuuuuais ! Ca devient enfin intéressant xD

    Pour mettre une image sur un site on utilise une balise seule <img />
    Deux attributs sont indispensables pour cette balise.
  • src : qui indique où est l'image. En général elle se trouve dans un dossier séparé appelé images. Ca marche comme pour un lien ; donc le chemin est soit relatif soit.. Absolu. C'est bien, vous suivez. (x
  • alt : ou texte alternatif. C'est un bidule qui décrit rapidement votre image. Lorsque que votre image ne s'affiche pas, c'est ce petit texte qui apparaîtra. Il est notamment utile pour les personnes handicapées.


    Pour l'exemple, je vous demande d'enregistrer dans le bon dossier et avec un bon nom cette image : https://i.servimg.com/u/f64/13/84/03/86/476610.jpg

    Code:
    <p>
      oooooh ! Les jolis n'arbres :D<br />
      <img src="images/palmiers.jpg" alt="Photo de Palmiers" title="C'est beau hein ? (:"/>
    </p>


    Simple non ? (:
    Comme dans l'exemple ci dessus, vous pouvez ajouter une bulle d'aide. C'est à ça que sert l'attribut title.


    Une image peut-être cliquable. Pour cela il suffit d'entourer son code par un lien comme ceux que l'on a vu précédemment.

    Code:
    <p>
      Et voici une image cliquable :<br />
      <a href="http://attractive.1fr1.net/"><img src="images/palmiers.jpg" alt="Photo de Palmiers" title="Clique pour voyager !" /></a>
    </p>


    Taaaaaaaaaadaaaaaaaaaaaam !
    Le petit ennui est le cadre autour de la photo. Heureusement, on peut l'enlever... Avec du CSS ! Very Happy
    *faut que je pense à écrire ce tuto xD*

[/font][/color]
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://seattlespecificinstitute.skyrock.com
 

[XHTML] Les images

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: T u t o r i a u x :: HTML/WEB-