World's Strongest Nation
par ici, par ici!!!


AccueilS'enregistrerConnexion

Partagez | 
 

 Tutoriel HTML-partie 9

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Sh@d
Administrateur


Masculin
Nombre de messages : 2066
Age : 30
Humeur Du WSiste :
100 / 100100 / 100

Date d'inscription : 08/01/2006

information WS
niveau: Mangaka & Gamer
Comportement Du WSiste.:
200/200  (200/200)
clan: Kaguya

MessageSujet: Tutoriel HTML-partie 9   Dim 18 Nov 2007, 5:01 pm

Leçon 9 : Les images


Est-ce qu'il ne serait pas formidable d'avoir une photo de l'acteur et légende musicale David Hasselhoff en plein milieu de la page ?
Ça sonne comme un défi ...


Peut-être, mais en réalité c'est très facile à faire. Il vous faut seulement un élément :
Exemple 1 :





Ce qui donne dans le navigateur :


Tout ce dont vous avez besoin est d'abord de dire au navigateur que vous voulez insérer une image (img) puis de lui dire où elle se trouve (src, abréviation de « source »). Vous voyez ?
Remarquez que l'élément img est ouvert et fermé avec la même balise. Comme la balise
, il n'est pas associé à un morceau de texte.
Le nom « david.jpg » est celui du fichier d'image à insérer dans la page, et « .jpg » est le type de fichier de l'image. Tout comme l'extension « .htm » indique qu'il s'agit d'un document HTML, « .jpg » indique au navigateur que ce fichier est une image. Il existe trois sortes de types de fichier d'image que vous pouvez insérer dans vos pages :


  • GIF (Graphics Interchange Format)
  • JPG / JPEG (Joint Photographic Experts Group)
  • PNG (Portable Network Graphics)

Les images GIF conviennent habituellement mieux pour les graphiques et les dessins, et les images JPEG pour les photographies. Deux raisons à cela : premièrement les images GIF se composent seulement de 256 couleurs, tandis que les images JPEG en contiennent des millions, et deuxièmement, le format GIF est mieux adapté pour comprimer des images simples que le format JPEG optimisé pour des images plus complexes. Meilleure la compression, plus petit le poids du fichier d'image, et plus rapide le chargement de la page. Comme l'expérience vous l'a sans doute montré, les pages inutilement « lourdes » peuvent être très gênante pour l'utilisateur.
Traditionnellement, les formats GIF et JPEG ont été les deux types d'images dominants, mais récemment, le format PNG est devenu de plus en plus populaire (principalement aux dépends du format GIF). Le format PNG format représente de beaucoup de points de vue le meilleur des deux formats JPEG et GIF : des millions de couleurs et une compression efficace.
Où trouver des images ?


Pour fabriquer vos propres images, il vous faut un programme d'édition d'images. Un programme de création d'image est l'un des outils essentiels pour créer de jolis sites Web.
Malheureusement, aucun bon programme d'édition d'images n'est fourni avec Windows ou d'autres systèmes d'exploitation. Il faudrait donc envisager d'investir dans l'un des trois meilleurs logiciels d'édition d'images actuellement sur le marché, à savoir « Paint Shop Pro », « PhotoShop » ou « Macromedia Fireworks ».
Quoi qu'il en soit, comme annoncé précédemment, il ne sera pas nécessaire d'acheter des logiciels coûteux pour finir ce tutoriel. Pour l'instant, vous pouvez télécharger l'excellent logiciel d'édition d'images « Irfan View », un gratuiciel (N.d.T. freeware) qui ne coûte donc rien.
Ou vous pouvez juste emprunter des images à d'autres sites en les téléchargeant. Mais faites attention à ce que le téléchargement des images n'enfreigne pas de droits d'auteur. Par contre, il est toujours utile de savoir télécharger des images, et voici comment :


  1. Cliquez sur le bouton de droite après avoir placé le pointeur sur une image, quelle que soit l'image sur Internet ;
  2. Sélectionnez « Sauvegarder l'image sous ... » dans le menu qui apparaît ;
  3. Sélectionnez un emplacement sur votre ordinateur pour l'image et appuyez « Sauvegarder ».

Faites-le avec l'image suivante et sauvegardez-la sur votre ordinateur au même emplacement que vos documents HTML. (Remarquez que le logo est sauvegardé comme fichier PNG : logows-nation.gif :

Vous pouvez maintenant insérer l'image dans l'une de vos pages. Essayez vous-même.
C'est tout ce que je dois savoir pour les images ?


Il y a d'autres choses à connaître concernant les images.
D'abord vous pouvez aisément insérer des images situées dans d'autres dossiers, ou même situées sur d'autres sites Web :
Exemple 2 :





Exemple 3 :





Deuxièmement, les images peuvent être des liens :
Exemple 4 :






Ce qui donnera dans le navigateur (cliquez sur l'image) :



Y a t-il d'autres attributs à connaître ?


Vous aurez toujours besoin d'utiliser l'attribut src, qui indique au navigateur où l'image se trouve. Hormis cela, beaucoup d'autres attributs peuvent être utiles pour insérer des images.
L'attribt alt sert à fournir une description de remplacement de l'image si, pour une raison ou pour une autre, l'image n'était pas affichée à l'utilisateur. C'est particulièrement important pour les utilisateurs aveugles, ou si la page se charge très lentement. Donc, toujours utiliser l'attribut alt :
Exemple 5 :





Certains navigateurs affichent le texte de l'attribut alt sous forme d'un petit dialogue contextuel lorsque l'utilisateur place le curseur sur l'image. Veuillez noter que l'utilisation de l'attribut alt vise à offrir une description de remplacement pour l'image. L'attribut alt ne devrait pas servir à créer des messages contextuels spéciaux pour les utilisateurs car les utilisateurs aveugles entendront le message sans savoir ce que l'image représente.
L'attribut title peut servir pour décrire brièvement l'image :
Exemple 6 :





Ce qui donne dans le navigateur :





Si vous placez le curseur sur l'image sans cliquer, vous verrez apparaître le texte « Apprenez HTML avec HTML.net » comme message contextuel.
Deux autres attributs importants sont width et height :
Exemple 7 :





Ce qui donne dans le navigateur :




On peut utiliser les attributs width et height pour fixer la largeur et la hauteur d'une image. Les valeurs utilisées pour fixer ces dimensions sont en pixels. Le pixel est l'unité de mesure de la résolution des écrans. (Les résolutions d'écrans les plus courantes sont de 800 x 600 et 1024 x 768 pixels). Au contraire des centimètres, les pixels sont des unités de mesure relatives qui dépendent de la résolution de l'écran. Pour une résolution d'écran élevé, 25 pixels peuvent correspondre à l'écran à 1 centimètre, tandis que sur un écran de basse résolution à 1,5 cm.
Si on ne fixe pas sa largeur et sa hauteur, l'image sera insérée dans sa dimension réelle. Mais on peut manipuler ses dimensions avec width et height :
Exemple 8 :





Ce qui donne dans le navigateur :




Par contre, il vaut mieux garder à l'esprit que le poids réel en kilo-octets du fichier d'image reste le même, et qu'il faudra autant de temps pour charger l'image, quoiqu'elle apparaisse plus petite à l'écran. Ainsi vous ne devriez jamais réduire la dimension de l'image avec les attributs width et height. Il faudrait plutôt toujours redimensionner les images avec un logiciel d'édition d'images afin de rendre ses pages plus légères et plus rapides.
Ceci dit, c'est toujours une bonne idée d'utiliser les attributs width et height car le navigateur pourra déterminer l'occupation de l'image dans la page avant son chargement complet. Cela permet au navigateur une mise en page harmonieuse et plus rapide.
Il suffit ici avec David Hasselhoff et les images.

by sh@d


Dernière édition par Sh@d le Ven 14 Mar 2008, 12:27 pm, édité 1 fois
Revenir en haut Aller en bas
http://ws-nation.jeun.fr
ultramadrid
sanin
sanin


Masculin
Nombre de messages : 1850
Age : 30
Localisation : l3assima
Emploi : waloooo
Loisirs : dormir
L’État Du WSiste. :
Humeur Du WSiste :
100 / 100100 / 100

Date d'inscription : 16/10/2007

information WS
niveau:
Comportement Du WSiste.:
200/200  (200/200)
clan: Akatsuki

MessageSujet: Re: Tutoriel HTML-partie 9   Dim 18 Nov 2007, 5:34 pm

bon travail khouya omar l 3eez

_________________
Revenir en haut Aller en bas
soulignis
rookie
rookie


Masculin
Nombre de messages : 1
Age : 28
Humeur Du WSiste :
0 / 1000 / 100

Date d'inscription : 14/03/2008

information WS
niveau:
Comportement Du WSiste.:
200/200  (200/200)
clan: ws-clan

MessageSujet: Re: Tutoriel HTML-partie 9   Ven 14 Mar 2008, 10:54 am


c'est pas une balise Html ne confond pas le Html avec les bbcode des forums Rolling Eyes

La balise Html pour afficher une image est :
moon
Le "alt" est devenu obligatoire dans le norme W3C

a+
Revenir en haut Aller en bas
Sh@d
Administrateur


Masculin
Nombre de messages : 2066
Age : 30
Humeur Du WSiste :
100 / 100100 / 100

Date d'inscription : 08/01/2006

information WS
niveau: Mangaka & Gamer
Comportement Du WSiste.:
200/200  (200/200)
clan: Kaguya

MessageSujet: Re: Tutoriel HTML-partie 9   Ven 14 Mar 2008, 12:26 pm

Code:
<img src="image.gif" align=right>
c le bon code!!!!!!!!!!!!!!!! Shocked

oui bonne remarque merci, Razz tu c que g du faire les 9 partie du tuto en meme temps , à force d'ecrire g du melanger les choses la preuve c que les 8 partie restante sont ts du html lol! ,

et merci encore
Revenir en haut Aller en bas
http://ws-nation.jeun.fr
mrlog10
shuinin+
shuinin+


Masculin
Nombre de messages : 170
Age : 31
L’État Du WSiste. :
Humeur Du WSiste :
0 / 1000 / 100

Date d'inscription : 07/05/2008

information WS
niveau:
Comportement Du WSiste.:
90/200  (90/200)
clan: physiciens

MessageSujet: Re: Tutoriel HTML-partie 9   Dim 18 Mai 2008, 12:28 am

Inclure des images
Si le but du langage HTML est de permettre au lecteur d'accéder le plus facilement possible aux informations complémentaires relatives à l'article qu'il lit, on se rend rapidement compte que le graphisme prend souvent le pas sur le langage, et de nos jours, on ne conçoit plus un site web sans images. Heureusement, l'HTML permet d'intégrer directement une image sans avoir à la dessiner point par point.
Standard
Le langage HTML devant être standardisé pour que n'importe quel browser puisse le déchiffrer, il fallait également définir un standard d'image déchiffrable. Le format GIF étant un format compressé et optimisé pour le transfert, c'est celui-ci qui a été retenu, même si le format JPG est de plus en plus utilisé. L'avantage du format GIF, c'est que les dernières versions permettent de créer des images animées, avantage que ne possède pas le format JPG. D'autre part, ce dernier permet de réaliser des images de taille moindre, a condition de consentir a perdre un peu de qualité. Le choix restera donc la décision de l'auteur, en fonction de la place dont il dispose pour le stockage et de l'importance qu'il donne à la qualité des images qu'il veut afficher.
L'image:
Nous avons vu, dans les pages précédentes, que tout le langage repose sur l'utilisation de balises. La balise < IMG > indique au browser qu'il faut afficher une image. Cette balise s'utilise toujours avec l'attribut SRC (source) qui permet de donner l'adresse de l'image à lire. Cette adresse aura le même format qu'une adresse A HREF="" et pourra donc être soit relative, soit fixe. En principe, l'image résidera toujours sur le même serveur que celui du document HTML, mais il est possible de charger une image depuis un autre serveur, pour autant que celui-ci soit accessible. Notons quand même que cette balise ne possède pas d'équivalent de fin. Nous n'aurons donc jamais de balise



Exemple:
< IMG SRC="../PICT/yc03c.gif" >

Résultat:



Aligner l'image:
Les images sont en général insérée dans du texte. En fonction de l'importance de celui-ci, ou simplement pour le coup d'oeil, on aura souvent envie d'inclure le texte sur le dessus, le milieux ou le dessous de l'image. Cela se fera gràce à l'attribut ALIGN de la balise et les valeurs pourront être TOP MIDDLE ou BOTTOM.

Exemple:
Hello wolrd. < IMG SRC="../PICT/yc03c.gif" align=TOP > Ceci est ma première page en langage html. Ce n'est pas fameux, mais nous< IMG SRC="../PICT/yc03c.gif" align=bottom > allons travailler dessus pour améliorer tout ça.

Résultat:

Hello wolrd. Ceci est ma première page en langage html. Ce n'est pas fameux, mais nous allons travailler dessus pour améliorer tout ça.





Positionner différemment:
Notons que de plus en plus on se sert de valeurs telles que LEFT et RIGHT pour que le texte englobe l'image, et que l'on se sert des attributs VSPACE et HSPACE pour régler la hauteur du texte.

Exemple:
Hello wolrd. < IMG SRC="../PICT/yc03c.gif" > Ceci est ma première < IMG SRC="../PICT/yc03c.gif" align=right vspace=20 hspace=40 > page en langage html. Ce n'est pas fameux, mais nous< IMG SRC="../PICT/yc03c.gif" align=left vspace=40 hspace=20 > allons travailler dessus pour améliorer tout ça.

Résultat:

Hello wolrd. Ceci est ma première page en langage html. Ce n'est pas fameux, mais nous allons travailler dessus pour améliorer tout ça.










De la taille de l'image:

Toujours dans un souci de présentation, il peut être utile de forcer l'image à s'afficher sur une hauteur ou/et une largeur différente que sa taille réelle. En général, cela servira surtout dans le cas d'images plus larges que la taille d'un écran normal, mais cela peut aussi être utile pour obtenir un effet spécial. Dans ce cas, il faudra faire appel aux attributs WIDTH et HEIGHT.

    Note: A propos de width et eight, il est plus que vivement conseillé de les inclure systématiquement dans la balise < img > . En effet, ces attributs ne sont pas définit, le browser ne connaîtra la taille de l'image qu'après son chargement complêt. Dans ce cas, il ne pourra pas réserver l'espace nécessaire pour l'affichage de celle-ci, et, par conséquant, il ne pourra pas continuer d'afficher le reste de la page avant de l'afficher. Inversément, si les attributs sont définits, le browser continuera d'afficher le reste de la page pendant le chargement de l'image.



Exemple:
Hello wolrd. < IMG SRC="../PICT/yc03c.gif" > Ceci est ma première < IMG SRC="../PICT/yc03c.gif" width= 60 height=180> page en langage html. Ce n'est pas fameux, mais nous< IMG SRC="../PICT/yc03c.gif" width=180 height=60 > allons travailler dessus pour améliorer tout ça.

Résultat:

Hello wolrd. Ceci est ma première page en langage html. Ce n'est pas fameux, mais nous allons travailler dessus pour améliorer tout ça.

Pas d'affichage:
Certains utilisateurs du web, afin de gagner du temps lors du chargement des pages, choisissent de faire afficher celles-ci sans image. Dans ce cas, un emplacement blanc de petite taille est généralement réservé pour pouvoir afficher celle-ci. Pour que l'utilisateur puisse faire la relation entre le texte et ce carré blanc, il est possible de faire afficher un texte alternatif à l'image. cela se fera grâce à l'attribut ALT, ce texte étant généralement une description de l'image.

Exemple:
Hello wolrd. < IMG SRC="../PICT/yc03c.gif" ALT="portrait de l'auteur" >

Résultat:
Hello wolrd.




Ce qu'il faut encore savoir:

L'image en tant que lien.
Une image peut servir de lien hyper-texte. Cela s'avère utile lorsque, par exemple, vous affichez dans votre page une petite image de basse résolution, et que vous laissez le lecteur accéder à une image plus grande ou de résolution plus importante (nous ne parlons pas ici des images clickables au format imagemap) . Si on lui adjoint l'attribut border = 0, l'image s'insèrera dans le texte sans le bord habituel aux liens hyper-text.





Exemple:
< A HREF="../PICT/yc03c.gif" >< IMG SRC="../PICT/yc03c.gif" BORDER=0 HEIGHT=126 WIDTH=96 >

Résultat:


L'attribut LOWRES:
Une autre possibilité, c'est d'inclure une image de très basse résolution, pour qu'elle s'affiche rapidement à l'écran gràce à l'attribut LOWSRC. Une fois cette image chargée et affichée, le browser la remplacera (après chargement) par l'image de résolution plus importante. Si ces deux images ont des tailles diffèrentes (largeur et hauteur), on veillera à spécifier les attributs width et height de l'image de haute résolution.

Exemple:
< IMG SRC="../PICT/yc03c.gif" width=80 height=80 LOWSRC="../PICT/gtr28145.gif" ALIGN="left" VSPACE="10" alt="ma photo" >





Bon le dreamweaver est le meilleur logiciel pour HTML vous vous insrer l'image comme vous faites dans le WORD et vous récupérer votre code facilement.
si vous voulez on peux faire une formation de lanage html avec le dreamweaver et feuille de style CSS.

================
Bon lecture
Revenir en haut Aller en bas
http://itimaster.c.la
Sh@d
Administrateur


Masculin
Nombre de messages : 2066
Age : 30
Humeur Du WSiste :
100 / 100100 / 100

Date d'inscription : 08/01/2006

information WS
niveau: Mangaka & Gamer
Comportement Du WSiste.:
200/200  (200/200)
clan: Kaguya

MessageSujet: Re: Tutoriel HTML-partie 9   Dim 18 Mai 2008, 10:15 am

merci
Revenir en haut Aller en bas
http://ws-nation.jeun.fr
Contenu sponsorisé




MessageSujet: Re: Tutoriel HTML-partie 9   Aujourd'hui à 3:44 am

Revenir en haut Aller en bas
 
Tutoriel HTML-partie 9
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Les volcans d'Indonésie (une petite partie)
» Il faut que la Bible fasse partie de la vie des fidèles.... a affirmé Benoît XVI
» 1er partie Baudrier porte briquet.
» L’Egypte ou le Mystère d’Horus - 1ere Partie - L'école des mysteres
» Html pour les nuls

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
World's Strongest Nation :: .·¯(_.·¯(_.·¯(_ WS- Sciences et Technologies _)¯`·._)¯`·._)¯`·. :: WS-Tutoriaux-
Sauter vers:  
Créer un forum | © phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit