Problème code HTML

Fermé
YannickLC Messages postés 4 Date d'inscription vendredi 8 avril 2016 Statut Membre Dernière intervention 17 avril 2016 - 16 avril 2016 à 17:42
YannickLC Messages postés 4 Date d'inscription vendredi 8 avril 2016 Statut Membre Dernière intervention 17 avril 2016 - 17 avril 2016 à 18:11
Bonjour à tous,
Je souhaiterai mettre un lien sur mon site internet (code HTML) mais l'image qui apparaît est beaucoup trop grande et je voudrais la réduire.
Voici ce code :
<a rel="nofollow" href="https://www.iha.fr/location-maison-plomeur_16010"><img style="border:none;" src="https://secure.iha.com/IHA_widget_s_56846=m281g4715233A038:9867144D.iml2TYBs2i.png"></a><script src="https://secure.iha.com/IHA_widget_s_56846=m281g4715233A038:9867144D.iml2TYBs2i.js" language="javascript"></script>
Je ne trouve pas les dimensions dans ce code. (ce n'est pas moi qui est fait ce code bien entendu ...)
Si quelqu'un pouvait m'aider, ce serait bien cool !!!
Je vous remercie par avance.
A voir également:

1 réponse

Utilisateur anonyme
16 avril 2016 à 17:57
Bonjour,

Il vaut mieux réduire la taille de l'image dans un éditeur d'images, car même si tu réduit l'affichage, la taille du fichier resterait la même.

Dans ton style tu peux mettre width:200px;height:200px par exemple pour faire 200x200
0
En effet il n'y a pas de dimension indiqué et cela veut dire que l'image va s'afficher à la taille qu'elle a.

Pour modifier les dimensions d'affichage vous devez ajouter des règles CSS pour celles ci(width et height pour hauteur/largeur, le redimensionnement de l'un fera celui de l'autre de façon homothétique si on ne donne qu'une des 2 valeurs).
Voir exemple de Rocky_123 sauf qu'une seule dimension est à indiquée surtou si l'image n'est pas un carrée elle sera déformée ou ne s'affichera pas si on donne des valeurs qui ne sont pas proportionnelle pour garder l'homothétie.

Toutefois comme dit Ropcky_123 si l'image a une taille vraiment grande il est mieux de redimensionner celle ci, le chargement sera plus rapide.

Avec le logiciel d'édition d'images que vous préférzez quand vous changez la taille il y a la hauteru et largeur à prendre en compte mais aussi sa résolution exprimée en pixel par pouce(ppp), anciennement dpi faisant références aux imprimantes.

Pour le web la résolution d'image(indépendamment de ses dimensions longueur et hauteur) doit être grand maximum de 150 ppp, ce qui correspond à une photo jpeg en qualité moyenne/basse.

L'idéal c'est 72 ppp ou un peu au dessus pour garder une qualité d'affichage(tout dépends de l'image et de la finesse qui est nécessaire pour celle ci).
0
YannickLC Messages postés 4 Date d'inscription vendredi 8 avril 2016 Statut Membre Dernière intervention 17 avril 2016
17 avril 2016 à 04:32
Je vous remercie déjà de prendre un peu de temps pour me répondre.
J'ai PSP pour modifier la taille de l'image, mais comment, à partir du code HTML je peux envoyer l'image sur le logiciel ???
Sinon, pour ajouter des règles CSS, où faut il les placer et avec guillemets, sans, ...???
Vous allez rigoler mais je ne maitrise pas trop ce langage comme vous pouvez le voir ...
En tout cas, merci encore.
0
YannickLC Messages postés 4 Date d'inscription vendredi 8 avril 2016 Statut Membre Dernière intervention 17 avril 2016
17 avril 2016 à 06:20
Rebonjour,
Merci les gars, j'ai réussi à entrer les dimensions sur le code HTML, donc l'image est redimensionnée. TOP
Mais je ne sais toujours pas obtenir l'image sur mon logiciel Paint Shop Pro à partir du code HTML pour améliorer la qualité. (je ne dispose pas de l'image)
0
Sur le CSS:

CSS permet d'indiquer des propriétés d'affichage(appellés style en cascade).
Dans le code que vous montrez ce n'est pas la meilleure façon de faire du tout mais on va rester là dessus(le mieux est d'écrire les styles dans un fichier à part qui est chargée par la page HTML-toujours l'hypertexte- afin de pouvoir réutiliser celui ci et modifier celui ci indépendamment du HTML.

Dans la méthode que vous employez pour indiquer le CSS(les 2 autres sont beaucoup mieux pour les raisons indiquées ainsi que la clarté à la lecture) vous utilisez l'attribut de balise style.

Chaque propriétés CSS s'écrit bien, comme ceci
nomdelapropriété : valeur;
Don si l'on veut écrire plusieurs propriétés à la suite il faudra indiquer celle ci sans oublier d'e mettre le point virgule qui sépare et indique la fin de la propriété.


Votre code devrait ressembler à ceci:
<img src="https://secure.iha.com/IHA_widget_s_56846=m281g4715233A038:9867144D.iml2TYBs2i.png" style="border:none;width:100px;">


Sauf qu'il comporte un problème.

Les écrans ont une résolution qui correspond au nombre de pixels en largeur et hauteur.
Par exemple 1600X1200, 940X480, 1024X768
au passage le ratio entre longueur et hauteur donne le format de l'image(4/3, 16/9 etc...)

Cela veut dire qu'un écran de 800X600 n'affichera pas les mêmes dimensions pour une image qui ferais 100pixels de largeur.
Sur un écran de 800X600(cela n'existe plus mais pour l'exemple) 100 pixels représente un huitième de la largeur et 1/6ème de la hauteur tandis que sur un écran de 1600X1200 qui affiche plus de pixels et aura une image plus détaillée les proportions seront largement plus petite. La plupart des visites de sites se font maintenant sur des appareils mobiles qui on des dimensions variées mais beaucoup plus petites que celle d'un écran sur la table du bureau. Donc la page s'affichera pas entiérement ou très mal si on utilise le px uniquement comme unité.

Que faire pour y remédier?
Avec CSS on peut utiliser d'autres unités que le pixel, c'est même à éviter la plupart du temps d'utiliser le px.

Parmi ces autres unités il y a le pourcentage et le quadratin.
Les 2 fonctionnent de la même façon et ne ferait qu'évoquer le quadratin(unité écrite em).:

Si on indique qu'un bloc contenant du texte fait 100% de la page celui ci sera de 100% sur tout les écrans, sans distinction de la résolution de celui ci. Ainsi la page s'affichera avec les mêmes proportions, donc pareil pour tout le monde.


Si vous voulez continuer le mieux serait de passer par un cours en ligne gratuit sur HTML et CSS. qui sont très simple à utiliser et comprendre. Il faudra par contre pratiquer un peu(tous les cours seront pratiques ou ne serviront à rien).
Sans les bases vous pourrez pas faire grand chose, et mes explications sont un peu plus avancée que les bases, l'écriture et inutilisation de HTML et CSS à proprement parler ou même le principe de fonctionnement d'Internet dont j'ai dit l'essentiel à savor pour débuter:
il y a un serveur web qui envoie des pages avec leur contenu et un client(le navigateur) qui les demandent et les reçoit.
0
YannickLC Messages postés 4 Date d'inscription vendredi 8 avril 2016 Statut Membre Dernière intervention 17 avril 2016
17 avril 2016 à 18:11
Bonsoir Aerophage et merci pour l'explication que j'ai bien compris !!!
Mon code ressemblait à peut près au votre sauf que j'avais mis les dimensions au début et sans px. Mais ça marchait quand même.

Néanmoins, comme je ne lâche rien, je vais suivre vos conseils et voir un cours en ligne. Je suis sur que ça va me brancher ...
Merci beaucoup pour toutes ces infos.
0