Insertion image en html depuis mon ordi

Insertion image en html depuis mon ordi - HTML/CSS - Programmation

Marsh Posté le 02-02-2022 à 13:26:16    

Bonjour,
 
Nouveau sur ce forum, et également en utilisation du langage HTML et CSS, mon souhait est de pouvoir créer une page Web, avec quelques images, et du texte.
Je débute depuis une semaine, en utilisant les balises de base concernant le texte.
Là où cela se complique, je voudrais insérer une image dans la page, depuis mon PC, avec <img> et <scr>, sans succès malgré le visionnage de quelques tutos relatant le sujet.  
Je me demande si c'est possible ...
Mon image Hélico.jpg se situe dans Images, sur le disque C, je n'arrive pas à la charger dans la page.
 
Un autre problème; si j'insère dans <head> <style type="text/css"> la couleur de fond de la page, et le titre du 1er paragraphe disparaissent. Je me retrouve avec une page vierge de son contenu.
Comment activer CSS correctement dans une page ?
 
J'utilise Notepad++; un essai avec Komodo m'a dérouté ... je parle pas couramment anglais, ce qui est parfois un handicap.  
 
Je ne sais pas encore quel niveau je pourrai atteindre ... la suite me le dira.
 
Merci pour votre réponse.


---------------
Harmo61
Reply

Marsh Posté le 02-02-2022 à 13:26:16   

Reply

Marsh Posté le 02-02-2022 à 14:05:00    

Salut,
 
Si tu veux afficher ton image depuis ton PC, en local, il faut mettre le lien d'accès absolu, par exemple C:\Users\TonNom\Pictures\Hélico.jpg, donc en HTML :
 

Code :
  1. <img src="C:\Users\TonNom\Pictures\Hélico.jpg" alt="Un hélico"/>


 
Suivant ou se trouve ton fichier html, tu peux aussi utiliser des liens relatifs, si par exemple ton fichier html se trouve dans C:\Users\TonNom, alors tu peux utiliser :
 

Code :
  1. <img src="Pictures\Hélico.jpg" alt="Un hélico"/>


 
Attention a bien spécifier l'encodage aussi, sinon tu risques de te retrouver avec "Hélico.jpg", donc bien mettre dans ton head :
 

Code :
  1. <meta charset="utf-8">


 
Concernant l'ajout du style, il faudrait voir comment tu l'a intégré, as-tu bien fermé la balise ? Cela devrait ressembler à ça :

Code :
  1. <head>
  2.   <meta charset="utf-8">
  3.   <style>
  4.     body {
  5.       background-color:red;
  6.     }
  7.   </style>
  8. </head>


 
Tu n'es pas obligé de spécifier type="text/css" pour la balise style avec HTML5 puisque c'est la valeur par défaut.


Message édité par yann39 le 02-02-2022 à 14:16:00

---------------
Topic achats/ventes | Feed-back | Worklog
Reply

Marsh Posté le 02-02-2022 à 15:42:21    

Bonjour yann39,
 
Merci pour tes indications, qui vont m'être utiles.
En ce qui concerne <meta charset="utf-8">, j'ai placé cette balise dans le head, mais il y a un problème avec les caractères avec accent;
j'ai un point d'interrogation. Je suis obligé d'aller chercher le caractère spécial correspondant, et c'est OK. Problème de Notepad++ ?
Je ne sais pas; je l'utilise depuis peu.
 
Je vais mettre en application tes données, et je te tiens au courant des résultats.
 
Pour l'image, je l'ai réduite en dimensions (1090 px par 800 px) pour 900 ko ça m'évite d'utiliser la réduction en html.
Je pense que la méthode est bonne ... je préfère avancer petit à petit.


---------------
Harmo61
Reply

Marsh Posté le 02-02-2022 à 16:09:14    

<!DOCTYPE html>
<html>
 
<head>
 <title>Vol en h&eacute;lico en html</title>
 <metacharset="utf-8"/>
</head>
<body  
 style="background-color:#1c87c9;"><!--Couleur de fond de la page en bleu-->
  <h1 style="color:yellow">VOL EN HELICOPTERE RADIOCOMMANDE</h1><!--Colore le titre de h1 en jaune-->
  <br>
  <br>
  <br>
  <img src="C:\Users\DESKTOP-FSE6J8D\Pictures\HelicoA.jpg" alt=""/>
</body>
</html>
 
alt="Un hélico" s'affiche bien; je l'ai vidé de son contenu, mais l'image ne s'affiche pas... TonNom correspond bien au nom de l'ordinateur ?

Reply

Marsh Posté le 02-02-2022 à 16:23:27    

<!DOCTYPE html>
<html>
 
<head>
 <title>Vol en h&eacute;lico en html</title>
 <metacharset="utf-8"/>
</head>
<body  
 style="background-color:#1c87c9;"><!--Couleur de fond de la page en bleu-->
  <h1 style="color:yellow">VOL EN HELICOPTERE RADIOCOMMANDE</h1><!--Colore le titre de h1 en jaune-->
  <img src=Pictures\HelicoA.jpg" alt=""/>
</body>
</html>
J'ai essayé ça ... pas d'image sur la page. HelicoA.jpg est la même image que Helico.jpg mais avec une bordure; pour que tu ne te poses pas de question sur le titre de l'image.

Reply

Marsh Posté le 02-02-2022 à 19:18:45    

Dans l'url d'un fichier local, en général, faut mettre file:// devant le chemin du fichier.
 
Ex : <img src="file://C:\Users\DESKTOP-FSE6J8D\Pictures\HelicoA.jpg" alt=""/>


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 02-02-2022 à 19:48:39    

Bonsoir rufo,
 
Merci pour ta réponse.
Je viens de tester, toujours pas d'image qui s'affiche ....
La page bleue s'affiche, le h1 s'affiche, mais pas l'image.
Si je mets une lettre dans alt, elle s'affiche.
Je ne pensais pas qu'insérer une image dans une page était aussi compliqué ... je suis désolé.
 
Est-ce qu'il y a un autre moyen d'insérer une image ?
Je me souviens que sur un site de photos, il fallait passer par un serveur, pour afficher les photos.
J'aurais voulu éviter une telle procédure.

Reply

Marsh Posté le 02-02-2022 à 20:26:53    

SI t'as mis ça : <img src=Pictures\HelicoA.jpg" alt=""/>
C'est normal :o
Il faut mettre :  
<img src="Pictures\HelicoA.jpg" alt=""/>
Après, ça suppose que le fichier html soit dans un répertoire et que dans ce répertoire, on trouve le sous-répertoire "Pictures".
 
Au passage, ne mets pas de CSS dans ton HTML. Il faut séparer le fond de la forme. Le css, ça se met dans un fichier .css qui est appelé par la page HTML.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 02-02-2022 à 20:28:45    

ça devrait fonctionner, même sans file://
Es-tu sûr d'avoir le bon lien ?
 
Dans le répertoire ou il y a ton image, clic droit sur l'image -> Propriétés et vérifie l'Emplacement (le chemin d'accès).
Ce n'est pas le nom de ton ordinateur qui doit apparaître dans le chemin mais le nom du l'utilisateur avec lequel tu es connecté.
 
En ce qui concerne l'UTF-8, il me semble que Notepad++ est par défaut en UTF-8, tu peux le vérifier via le menu "Encodage".


Message édité par yann39 le 02-02-2022 à 20:29:42

---------------
Topic achats/ventes | Feed-back | Worklog
Reply

Marsh Posté le 02-02-2022 à 20:33:15    

De toute façon, faut pas mettre d'accents dans les url :o


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 02-02-2022 à 20:33:15   

Reply

Marsh Posté le 02-02-2022 à 20:35:49    

On est d'accord :D, mais des fois c'est pas toi qui gère les fichiers :o


---------------
Topic achats/ventes | Feed-back | Worklog
Reply

Marsh Posté le 02-02-2022 à 20:46:33    

Effectivement, en remplaçant le nom de l'ordi par Perso, qui est le nouveau nom, suite à un remplacement disque dur relatif à un crash.
OK ça fonctionne !
Merci à vous deux, c'est sympa.
Notepad++ a deux modes  utf-8 et utf-8-bom que je devrais peut être essayer, pour avoir les bons caractères avec accent ?

Reply

Marsh Posté le 02-02-2022 à 21:01:03    

Non pas besoin du BOM, et cela peut poser des problèmes dans certains cas (même si maintenant HTML5, les navigateurs, etc. gèrent bien ça).
Pour être bien sûr d'avoir ton document en utf8 tu peux utiliser le menu "Encodage -> Convertir en utf-8", et tu devrais pouvoir sauver correctement ton fichier avec les caractères accentués.


---------------
Topic achats/ventes | Feed-back | Worklog
Reply

Marsh Posté le 02-02-2022 à 21:05:31    

Harmo88 a écrit :

Effectivement, en remplaçant le nom de l'ordi par Perso, qui est le nouveau nom, suite à un remplacement disque dur relatif à un crash.
OK ça fonctionne !
Merci à vous deux, c'est sympa.
Notepad++ a deux modes  utf-8 et utf-8-bom que je devrais peut être essayer, pour avoir les bons caractères avec accent ?


C'est  <meta charset="UTF-8"> en deux mots.
Et avant title

Reply

Marsh Posté le 02-02-2022 à 22:22:54    

David Boring a écrit :


C'est  <meta charset="UTF-8"> en deux mots.
Et avant title


 
Oui d'accord, respectons les balises  ;)  
Apparemment, après title, ça fonctionne aussi ... J'ai vu ça sur le tuto d'un professionnel  :jap:  ... je ne me suis pas posé de question ...
 :hello:  

Reply

Marsh Posté le 02-02-2022 à 22:30:20    

yann39 a écrit :

Non pas besoin du BOM, et cela peut poser des problèmes dans certains cas (même si maintenant HTML5, les navigateurs, etc. gèrent bien ça).
Pour être bien sûr d'avoir ton document en utf8 tu peux utiliser le menu "Encodage -> Convertir en utf-8", et tu devrais pouvoir sauver correctement ton fichier avec les caractères accentués.


 
C'est ce qui est activé, mais il y a quand même des problèmes avec les accents, ce qui n'existait pas avec Notepad simple ... par contre la présentation de celui-ci est moins bonne.
Il me semble que j'avais commencé cette page avec Notepad, et continué avec ++.
Je vais tout recommencer avec ++, il se pourrait que le problème vienne de là; simple supposition de ma part, à vérifier.

Reply

Marsh Posté le 02-02-2022 à 22:34:50    

David Boring a écrit :


C'est  <meta charset="UTF-8"> en deux mots.
Et avant title


 
OK, j'ai vu ça sur le tuto d'un pro  :jap: je ne me suis pas posé de question, j'ai appliqué. Ça fonctionne avant ou après....
Merci pour l'info, je vais rectifier.
Petit à petit, on va progresser.

Reply

Marsh Posté le 02-02-2022 à 23:01:56    

Harmo88 a écrit :


 
C'est ce qui est activé, mais il y a quand même des problèmes avec les accents, ce qui n'existait pas avec Notepad simple ... par contre la présentation de celui-ci est moins bonne.
Il me semble que j'avais commencé cette page avec Notepad, et continué avec ++.
Je vais tout recommencer avec ++, il se pourrait que le problème vienne de là; simple supposition de ma part, à vérifier.


 
Tout dépend comment tu as enregistré ton fichier avec Notepad.
Mais par défaut, sous Windows 10 et 11 en tous cas, c'est bien de l'utf-8, sans BOM.
Quand tu fais Fichier -> Enregistrer sous, tu peux choisir l'encodage à côté du bouton Enregistrer.
 
Concernant l'ordre des balises, je ne sais pas qui est le "pro" dont tu parles, mais dans le <head> il faut quand même bien placer la balise <meta> en premier si possible, la spécification HTML5 indique bien que cela doit apparaître en début de document (dans les 1024 premiers octets).
Donc ça fonctionne dans ton cas car le document est petit, mais c'est une bonne pratique de toujours mettre cette balise en premier, avant le <title>, car si tu ajoutes trop de choses avant elle pourrait ne plus être considérée.
A savoir que lorsque tu vas servir cette page via HTTP, c'est le contenu du header Content-type qui va être utilisé (par exemple "Content-Type: text/html; charset=utf-8" ), la balise <meta> dans ton document n'aura donc plus d'incidence, mais c'est une bonne pratique de la mettre quand même, dans le cas ou le header n'est pas spécifié.


---------------
Topic achats/ventes | Feed-back | Worklog
Reply

Marsh Posté le 03-02-2022 à 10:00:59    

yann39 a écrit :


 
Tout dépend comment tu as enregistré ton fichier avec Notepad.
Mais par défaut, sous Windows 10 et 11 en tous cas, c'est bien de l'utf-8, sans BOM.
Quand tu fais Fichier -> Enregistrer sous, tu peux choisir l'encodage à côté du bouton Enregistrer.
 
Concernant l'ordre des balises, je ne sais pas qui est le "pro" dont tu parles, mais dans le <head> il faut quand même bien placer la balise <meta> en premier si possible, la spécification HTML5 indique bien que cela doit apparaître en début de document (dans les 1024 premiers octets).
Donc ça fonctionne dans ton cas car le document est petit, mais c'est une bonne pratique de toujours mettre cette balise en premier, avant le <title>, car si tu ajoutes trop de choses avant elle pourrait ne plus être considérée.
A savoir que lorsque tu vas servir cette page via HTTP, c'est le contenu du header Content-type qui va être utilisé (par exemple "Content-Type: text/html; charset=utf-8" ), la balise <meta> dans ton document n'aura donc plus d'incidence, mais c'est une bonne pratique de la mettre quand même, dans le cas ou le header n'est pas spécifié.


 
Oui, tu as raison pour l'ordre des balises, c'est important, ça évite des dysfonctionnements.
Mes dernières notions de programmation remontent à .......... 50 ans .... en assembleur, à partir du graphset, autant dire que j'ai tout oublié, ou presque ... à part que si on ne respectait pas la syntaxe, ça plantait.  
Grâce à vous, je vais retrouver mes 20 ans  :pt1cable:  
Maintenant, je vais centrer l'image, plutôt que la laisser à gauche.

Reply

Marsh Posté le 03-02-2022 à 10:04:03    

yann39 a écrit :


 
Tout dépend comment tu as enregistré ton fichier avec Notepad.
Mais par défaut, sous Windows 10 et 11 en tous cas, c'est bien de l'utf-8, sans BOM.
Quand tu fais Fichier -> Enregistrer sous, tu peux choisir l'encodage à côté du bouton Enregistrer.
 
Concernant l'ordre des balises, je ne sais pas qui est le "pro" dont tu parles, mais dans le <head> il faut quand même bien placer la balise <meta> en premier si possible, la spécification HTML5 indique bien que cela doit apparaître en début de document (dans les 1024 premiers octets).
Donc ça fonctionne dans ton cas car le document est petit, mais c'est une bonne pratique de toujours mettre cette balise en premier, avant le <title>, car si tu ajoutes trop de choses avant elle pourrait ne plus être considérée.
A savoir que lorsque tu vas servir cette page via HTTP, c'est le contenu du header Content-type qui va être utilisé (par exemple "Content-Type: text/html; charset=utf-8" ), la balise <meta> dans ton document n'aura donc plus d'incidence, mais c'est une bonne pratique de la mettre quand même, dans le cas ou le header n'est pas spécifié.


Reply

Marsh Posté le 03-02-2022 à 11:14:17    

Merci pour vos conseils avisés.
J'ai centré l'image, c'est mieux que la laisser à gauche.
 
                <center><!--Centre l'image horizontalement-->
  <img src="file://C:\Users\Perso\Pictures\HelicoBA.jpg"alt""/><!--Affiche l'image-->
  </center>
 
Il y a plusieurs façons de la faire, apparemment, celle-ci fonctionne bien.

Reply

Marsh Posté le 03-02-2022 à 11:33:03    

N'utilise pas la balise <center>, c'est une vielle balise, elle est dépréciée, même si les navigateurs la supporte encore.
Utilise plutôt la propriété CSS text-align :
 

Code :
  1. <div style="text-align: center;">
  2.   <img src="C:\Users\Perso\Pictures\HelicoBA.jpg" alt="Une image d'hélicoptère bleu"/>
  3. </div>


 
Je te conseil aussi de toujours mettre une valeur dans le alt pour afficher un texte alternatif à l'image si celle-ci ne charge pas, et aussi pour l'accessibilité (un lecteur d'écran par exemple va lire le contenu de l'attribut alt), c'est une bonne pratique.


---------------
Topic achats/ventes | Feed-back | Worklog
Reply

Marsh Posté le 03-02-2022 à 11:54:52    

Et si je veux centrer du texte, c'est la même balise ?
OK pour <center> je ne l'utiliserai plus.
Avec <alt> je ne veux pas toujours voir du texte ... je peux peut-être l'utiliser sans contenu "" ?

 

Une autre question: j'ai envoyé par mail le fichier de la page. Si je clique sur l'icône, dans le message, la page s'ouvre mais seul le texte apparait et la page est colorée seulement là où il y a du texte.
Est-ce normal, ou faut-il que la page soit publiée sur le Web pour voir tout son contenu ?


Message édité par Harmo88 le 03-02-2022 à 12:16:02
Reply

Marsh Posté le 03-02-2022 à 13:59:08    

alt, c'est pour un message à afficher à la place de l'image sur les terminaux qui ne peuvent afficher l'image :o
Ce que tu veux, c'est l'attribut title.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 03-02-2022 à 14:08:32    

Ce n'est pas une balise, c'est la propriété CSS text-align, tu peux l'utiliser sur n'importe quel élément block, afin de centrer son contenu, donc aussi bien pour centrer du texte que pour centrer une image (j'ai utilisé un élément <div> mais j'aurais pu utiliser <p> ou n'importe quel élément block) :
 

Code :
  1. <div style="text-align: center;">
  2.   <img src="C:\Users\Perso\Pictures\HelicoBA.jpg" alt="Une image d'hélicoptère bleu"/>
  3.   <span>Mon texte centré aussi</span>
  4. </div>


 
Même si elle s’appelle "text" align, elle affecte pas seulement le texte mais tous les éléments contenus dans le bloc (s'ils sont inline ou inline-block).
 
Pour centrer un bloc en lui-même (et non son contenu), tu utiliseras plutôt la propriété margin en mettant les valeurs left et right à "auto" :
 

Code :
  1. margin-left: auto;
  2. margin-right: auto;


 
Concernant l'attribut "alt" sur l'image, sa valeur ne s'affichera que si l'image ne s'affiche pas, c'est un texte alternatif, donc ça ne changera rien à l'affichage normal.
Mais encore une fois c'est important pour l'accessibilité, pour les personnes mal/non voyantes par exemple qui utilisent des lecteurs d'écran. Je pense que c'est une bonne chose de prendre l'habitude de le mettre systématiquement.
Si tu ne met pas l'attribut alt, les lecteurs d'écrans liront par défaut le nom du fichier (dans ton cas HelicoBA.jpg), si tu mets une valeur vide (alt="" ) alors il ne lieront rien.
 
Et pour l'envoi par mail, oui c'est normal que les images ne s'affichent pas puisque tu as mis des liens vers tes images en local.


Message édité par yann39 le 03-02-2022 à 14:10:54

---------------
Topic achats/ventes | Feed-back | Worklog
Reply

Marsh Posté le 03-02-2022 à 14:41:17    

"Et pour l'envoi par mail, oui c'est normal que les images ne s'affichent pas puisque tu as mis des liens vers tes images en local."

 

Ce qui sous-entend que si je mets cette page sur le Web, l'image ne se verra pas non plus ?
Il faut mettre l'image dans un serveur, en indiquant l'URL dans img src ?

 

Je vais m'accorder une petit pause, pour aller m'oxygéner ... et reposer un peu les neurones.
Je reprendrai ce soir.


Message édité par Harmo88 le 03-02-2022 à 14:43:23
Reply

Marsh Posté le 03-02-2022 à 15:13:19    

Ben si tu met cette page sur le web, il faudra que tu y mettes l'image aussi (sinon c'est sur que les gens ne la verront que si ils ont le même fichier dans le même dossier sur leur ordinateur).
 
Envoyer des images dans un mail c'est faisable (en pièces jointe puis en l'incluant dans le contenu, ou en faisant référence à une image via une url publique), mais c'est assez compliqué à faire donc vu ton niveau, on va commencer par plus simple ! ^^
 
As tu déjà lut des tutoriels pour l'html && css, je penses qu'en une après-midi tu pourrais déjà faire un grand chemin vers la compréhension de ce média.
https://www.google.com/search?clien [...] e+l%27html
https://openclassrooms.com/fr/cours [...] l5-et-css3
https://www.apprendre-html-et-css.com/


---------------
D3
Reply

Marsh Posté le 03-02-2022 à 17:46:50    

mechkurt a écrit :

Ben si tu met cette page sur le web, il faudra que tu y mettes l'image aussi (sinon c'est sur que les gens ne la verront que si ils ont le même fichier dans le même dossier sur leur ordinateur).
 
Envoyer des images dans un mail c'est faisable (en pièces jointe puis en l'incluant dans le contenu, ou en faisant référence à une image via une url publique), mais c'est assez compliqué à faire donc vu ton niveau, on va commencer par plus simple ! ^^
 
As tu déjà lut des tutoriels pour l'html && css, je penses qu'en une après-midi tu pourrais déjà faire un grand chemin vers la compréhension de ce média.
https://www.google.com/search?clien [...] e+l%27html
https://openclassrooms.com/fr/cours [...] l5-et-css3
https://www.apprendre-html-et-css.com/


 
Merci pour l'info; le 3e me parait bien.
Le problème, lorsqu'on débute, c'est la diversité des instructions que les auteurs donnent. D'un à l'autre le contenu pour un même résultat, varie. C'est un peu déroutant.
Je suppose que celui qui a appris le HTML il y a dix ans code différemment de celui qui code actuellement, le langage HTML ayant surement évolué ...
Cela fait seulement quelques jours que je pratique, je ne peux pas prétendre avoir les acquis de quelqu'un qui pratique depuis des années.
Mon objectif n'est pas de devenir pro dans l'utilisation(je suis en retraite  :wahoo: ), simplement le sujet m'intéresse. Peu importe le niveau que j'atteindrai.
J'avais, il y a quelque temps déjà suivi des stages pour Word, Excel, Acces; quand on ne pratique plus, après des années, on perd l'acquis.
Si je devais refaire une gestion de stock, ou autre, avec Access, il me faudrait réapprendre son fonctionnement ... qui a du évoluer aussi, certainement plus automatisé qu'il y a une trentaine d'années.
C'est pour toutes ces raisons que je me suis inscrit sur ce site, pour obtenir de l'aide; je ne le regrette pas, c'est plutôt sympa  :)  

Reply

Marsh Posté le 03-02-2022 à 17:57:53    

On a tous été débutant un jour...
 
Rassure toi le langage html change peu.
La dernière norme (html5) à presque 10 ans et n'a pas été une grande révolution.
Il faut (je pense) surtout que tu familiarises avec la notion de client / serveur et les chemins d'accès au fichiers (image, vidéo, son).
Après tu verras les liens hypertexte pour passer d'une page à l'autre, qui eux aussi auront besoin d'un chemin (relatif ou absolut).
 
Avance avec ces cours et reviens plus tard avec tes questions, tu trouveras surement quelqu'un pour aider sur ce forum ! ^^


---------------
D3
Reply

Marsh Posté le 03-02-2022 à 20:21:26    

mechkurt a écrit :

On a tous été débutant un jour...
 
Rassure toi le langage html change peu.
La dernière norme (html5) à presque 10 ans et n'a pas été une grande révolution.
Il faut (je pense) surtout que tu familiarises avec la notion de client / serveur et les chemins d'accès au fichiers (image, vidéo, son).
Après tu verras les liens hypertexte pour passer d'une page à l'autre, qui eux aussi auront besoin d'un chemin (relatif ou absolut).
 
Avance avec ces cours et reviens plus tard avec tes questions, tu trouveras surement quelqu'un pour aider sur ce forum ! ^^


 
Débuter à 74 ans ..... c'est pas facile  :pt1cable: mais on y arrive, à son rythme(un peu plus rapide que l'escargot  :lol: ).
Ce soir j'ai appris à centrer un titre, mettre une marge dans du texte, et augmenter la taille de la police. Content, ça avance.
Pour les liens et tout ce qui "tourne" autour, bien sur il faudra que je m'y attèle; c'est un peu tôt, il y a tellement à me familiariser avant. J'y viendrai ...  
 
Question: J'écris du texte; y a-t'il un moment où la page sera remplie, ou elle défile selon son remplissage, sans qu'il y ait besoin d'indiquer un changement ?
J'espère bien me faire comprendre ...
 :hello:  
 

Reply

Marsh Posté le 03-02-2022 à 21:18:52    

Oui, ça se positionne tout seul en fonction de la taille des éléments (le balises).
Si tu fixe pas de largeur particulière à une balise de type block (ex : <div>, <p> ), par défaut, elles vont se mettre les unes en-dessous des autres et prendre la largeur de l'élément parent qui les contient. Donc, si c'est dans le <body>, ça prendra la largeur du navigateur. Le texte dans ce type d'élément va aller jusqu'au bout de la ligne et passer à la ligne ensuite (sauf si tu mets un <br /> ).
Je te recommande le site alsacreations qui est très bien pour apprendre tout ça ;)


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 03-02-2022 à 22:03:31    

rufo a écrit :

Oui, ça se positionne tout seul en fonction de la taille des éléments (le balises).
Si tu fixe pas de largeur particulière à une balise de type block (ex : <div>, <p> ), par défaut, elles vont se mettre les unes en-dessous des autres et prendre la largeur de l'élément parent qui les contient. Donc, si c'est dans le <body>, ça prendra la largeur du navigateur. Le texte dans ce type d'élément va aller jusqu'au bout de la ligne et passer à la ligne ensuite (sauf si tu mets un <br /> ).
Je te recommande le site alsacreations qui est très bien pour apprendre tout ça ;)


 
Merci pour le tuyau; j'irai voir ce site. Il y en a tellement ... certains sont plutôt réservés à ceux qui maîtrisent bien la question, donc pas encore pour moi.
Ceux pour débutants me conviennent mieux. Apprenti n'est pas maître.

Reply

Marsh Posté le 04-02-2022 à 22:07:57    

:hello:  
Je rencontre un problème avec le positionnement d'une image, et de texte ...
Après quelques tentatives piochées sur des sites, je fais appel à vous.
 
Je voudrais décaler une image sur sa droite de 10 mm environ, pour qu'elle soit alignée avec du texte placé au dessus.
A droite de cette image, je voudrais placer du texte expliquant le fonctionnement de l'objet dans l'image.
Ensuite, en dessous de l'image, revenir placer du texte à gauche de la page.
 
</h3>
 <div style="margin-right:8px">  Non, ça ne fonctionne pas
 <img src="file://C:\Users\Perso\Pictures\Plat-TrexA.jpg"alt""/><!--Affiche l'image-->  OK, ça c'est bon
</div>
 
Merci d'avance pour votre réponse.
En voulant poster ce message, j'ai eu un message d'alerte me demandant de vider le cache du navigateur; impossible d'afficher le message.
C'est la deuxième fois, depuis que je poste, en une semaine. Je n'avais jamais rencontré ce problème avant.
Si quelqu'un a une idée, elle sera la bienvenue.  :hello:  

Reply

Marsh Posté le 05-02-2022 à 14:17:34    

margin-right ajoute une marge à droite, si tu veux mettre une marge à gauche (pour décaler l'image vers la droite), utilise margin-left.
 
Tu peux d'ailleurs l'appliquer directement sur l'image, les marges gauche/droites fonctionnent sur les éléments inline :
 

Code :
  1. <img src="C:\Users\Perso\Pictures\Plat-TrexA.jpg" alt="" style="margin-left:8px"/>


 
La bonne pratique est de ne pas mettre les styles CSS directement sur les éléments (dans l'attribut style), mais de les centraliser dans le header, ou dans un fichier séparé, par exemple :
 

Code :
  1. <head>
  2.   <style>
  3.     .imgOffset {
  4.       margin-left:8px;
  5.     }
  6.   </style>
  7. </head>
  8. <body>
  9.   <img src="C:\Users\Perso\Pictures\Plat-TrexA.jpg" alt="" class="imgOffset"/>
  10. </body>


 
Mais tu n'en est peut-être pas encore là.


---------------
Topic achats/ventes | Feed-back | Worklog
Reply

Marsh Posté le 05-02-2022 à 18:29:50    

yann39 a écrit :

margin-right ajoute une marge à droite, si tu veux mettre une marge à gauche (pour décaler l'image vers la droite), utilise margin-left.
 
Tu peux d'ailleurs l'appliquer directement sur l'image, les marges gauche/droites fonctionnent sur les éléments inline :
 

Code :
  1. <img src="C:\Users\Perso\Pictures\Plat-TrexA.jpg" alt="" style="margin-left:8px"/>


 
La bonne pratique est de ne pas mettre les styles CSS directement sur les éléments (dans l'attribut style), mais de les centraliser dans le header, ou dans un fichier séparé, par exemple :
 

Code :
  1. <head>
  2.   <style>
  3.     .imgOffset {
  4.       margin-left:8px;
  5.     }
  6.   </style>
  7. </head>
  8. <body>
  9.   <img src="C:\Users\Perso\Pictures\Plat-TrexA.jpg" alt="" class="imgOffset"/>
  10. </body>


 
Mais tu n'en est peut-être pas encore là.


 
Non, je n'en suis pas là  :fou: Bonsoir yann
Ce truc me rend fou  :pt1cable:  
J'ai essayé le décalage de l'image sur la droite; j'ai recopié ta ligne, l'image s'affiche bien, sans décalage ...
Si je mets la valeur des px en négatif, l'image est bien rognée à gauche, donc, il en manque une petite partie; dans l'autre sens, ça ne fonctionne pas ...
Entre le HTML, et le CSS, je bog.  
Il faut un seul head, si je mets la 2e partie de code que tu m'as indiquée dedans, est-que cela ne va pas modifier une image qui est centrée ? Ce qui ne serait pas le but.
Pour l'instant, je reste sur le décalage à droite de l'image; il faut bien que j'y arrive  :pt1cable:  

Reply

Marsh Posté le 05-02-2022 à 19:45:17    

Cela devrait fonctionner, mais tout dépend de la structure de ta page, il nous faudrait voir le code complet.
 
J'ai reproduit un exemple en ligne pour te montrer : https://jsfiddle.net/Yann39/qrn2a0bh/1/
L'image a bien une marge de 80 pixels à gauche (décalage de 80 pixels vers la droite).
 
Il y a plusieurs moyen d'identifier un élément HTML depuis le CSS, les 3 de base sont :

  • directement via la balise : Par exemple avec le HTML <img src="..." alt="..."/> tu peux utiliser le CSS img { margin-left:8px; }
  • via un identifiant unique : Par exemple avec le HTML <img id="image1" src="..." alt="..."/> tu peux utiliser le CSS #image1 { margin-left:8px; }
  • via une classe : Par exemple avec le HTML <img class="image1" src="..." alt="..."/> tu peux utiliser le CSS .image1 { margin-left:8px; }


Dans le 1er cas cela va s'appliquer à toutes les balises <img> de la page.
Dans le 2ème cas cela va s'appliquer seulement à l'image qui aura l'identifiant "image1" (l'identifiant doit être unique sur la page).
Dans le 3ème cas cela va s'appliquer à tous les éléments qui auront la classe "image1" (tu peux appliquer la même classe à plusieurs éléments).
 
Le HTML et le CSS sont 2 langages différents, même s'ils peuvent s'écrire dans le même document.
Il est conseillé de bien les séparer, principalement pour bien séparer sémantiquement le contenu (HTML) du design (CSS), et faciliter la maintenance.
La bonne pratique est même de séparer le CSS dans un ou plusieurs fichiers séparés, qui pourront être mis en cache par les navigateurs, mais là encore je vais peut-être un peu trop loin pour le moment ;)


---------------
Topic achats/ventes | Feed-back | Worklog
Reply

Marsh Posté le 05-02-2022 à 19:56:32    

Merci pour ta réponse, et pour le temps que tu me consacres; je vais essayer de décortiquer ça.
Voilà la page; est-ce qu'il y a un blocage quelque part ? Possible, mais je ne suis pas encore capable de trouver où.
 
<!DOCTYPE html>
<html>
 
<head>
 <metacharset="utf-8"/>
 <title>Vol en h&eacute;lico en html</title>
</head>
<body  
  style="background-color:#1c87c9;"><!--Couleur de fond de la page en bleu-->
  <h1
   <p align=center  
   style="color:yellow">VOL EN HELICOPTERE RADIOCOMMANDE<!--Colore le titre en jaune/ Titre centré avec p align=center-->
   </p>
  </h1>  
  <div style="text-align: center;"><!--Centre l'image horizontalement-->
   <img src="file://C:\Users\Perso\Pictures\HelicoBA.jpg"alt""/><!--Affiche l'image-->
  </div>
  <h3  
   style="color:yellow">RECOMMANDATIONS AUX DEBUTANTS<!--Couleur jaune-->
  </h3>
   <ul><!--Liste à puces-->
   <FONT size="4pt">
    <li>Faire évoluer un modèle radiocommandé n'est pas sans danger. L'hélicoptère peut provoquer des blessures, voir des amputations graves, selon la taille des rotors.</li>
    <li>Respecter les distances de sécurité, concernant le public, ou des visiteurs éventuels.</li>
    <li>Maintenir le modèle en état, mécanique et électronique.</li>
    <li>Choisir un terrain bien dégagé, avec une aire de décollage/atterrissage adéquate.</li>
    <li>Avant le vol, toujours vérifier l'état du modèle, de la charge des accus, y compris ceux de la radio.</li>
    <li>Avant de décoller, tester toutes les commandes de vol; au besoin, effectuer un test de portée de la radio.</li>
    <li>Après vol vérifier l'état du modèle, surtout après un incident, une touchette.</li>
   </FONT>
  </ul>
  <h3  
   style="color:yellow">CHOIX DU MODELE
  </h3>
   <FONT size="4pt"> <!--Augmente la taille de la police-->
   <blockquote><!--Crée une marge pour le texte-->  
    <p>Selon l'aptitude de chacun, en fonction de ses connaissances techniques concernant le fonctionnement d'un hélicoptère, de ses réflexes, on peut démarrer avec un petit modéle; personnellement, pas en dessous d'un 450; pour moi, ce fut un 500, d'abord de chez Align, puis un X5 de chez Gaui. Modèle plus robuste, un peu moins réactif que le Trex, mais qui permet de belles évolutions en accrobatie. Je n'ai pas pratiqué la 3D, plus destructrice pour le matériel, notamment au niveau des roues dentées, pignons, qui s'usent plus rapidement, vu les efforts qu'ils subissent.<br>
    Sans négliger le risque augmenté de crash. <br>
    Intervient dans ce choix, le budget que l'on peut raisonnablement investir, quant à l'achat du modèle lui-même, le coût de la radio, des accus, des pièces détachées qui s'usent, qui cassent lors d'un crash (quasiment inévitable en débutant).<br>
    Plus le modèle est grand, plus l'investissement est lourd, c'est une évidence.<br>
    Ne pas hésiter à consulter le prix des pièces détachées, accus, pales, auprès des différents fournisseurs.<br>
    Préférer des pales, et des accus de qualité, surtout si le modéle est de grande taille; crasher un grand modèle, pour vouloir trop économiser, n'est pas une bonne approche.<br>
    En ce qui concerne les pales, éviter les réparations de fortune, lorsqu'elles ont subi un crash qui les a fissurées ou cassées. Elles ne seraient plus équilibrées ce qui provoquerait des vibrations, ennemies des roulements à billes; sur un gros modèle, cela pourrait être source d'un crash supplémentaire.
    <br>
    Le modéle peut être acheté en kit(ce choix implique de bonnes connaissances techniques)le montage mécanique et électronique étant éxécuté par l'acheteur, ce qui sous-entend les réglages de pas du rotor principal qui peut se révéler complexe pour un débutant.<br>
    L'autre option, est d'acheter le modèle en ordre de vol; le coût est un peu plus élevé, mais les réglages sont déjà effectués.<br>
    L'avantage du kit est qu'il apprend comment est constitué un hélicoptère, comment on le régle(se faire accompagner par un pilote confirmé ayant déjà accompli cette tâche.)
   </blockquote>
   </FONT>
  <h3
   style="color:yellow">IMPORTANT
  </h3>
   <FONT size="4pt"><!--Augmente la taille de la police-->
   <blockquote><!--Crée une marge pour le texte-->
    <p>Lors d'un montage, ou après un démontage, remonter les vis métalliques au frein filet moyen, pour éviter le desserrage de celles-ci.<br>
    Beaucoup de modéles se crashent à cause de vis qui se desserrent en vol, ce qui est bien regrettable, alors que l'on peut éviter ce désagrément.<br> Le prix d'une vis qui se desserre est-il équivalent au montant des réparations qu'elle va occasionner ? Certes, non.</p>
   </blockquote>
   </FONT>
  <h3>
   <FONT size="3pt"
   style="color:yellow">CONSEIL LORS DE L'ACHAT D'UN MODELE
   </FONT>
  </h3>
   <FONT size="4pt">
   <blockquote>
    <p>Pour limiter le coût à l'achat d'un modèle, il est possible de le choisir en occasion, ce qui ne présente pas que des avantages.<br>
    Selon l'entretien du modèle, l'utilisation, le nombre de crash, son état général, il n'est pas certain que le modèle sera intéressant.<br>
    Les réglages du modèle, si le pilote est confirmé, ne conviendront pas à un débutant, le modèle étant trop réactif en début.<br>
    Ne pas hésiter à demander au vendeur d'effectuer un vol de démonstration; dans le cas d'un refus de sa part, ne pas conclure l'achat.<br>
    Si malgré tout l'achat est conclu, demander à un pilote confirmé de procéder aux réglages pour débutant, pour éviter un crash quasi certain.<br>
    A ce sujet, je prends en compte mon expèrience personnelle. Il m'est arrivé d'acheter des modèles qui révélaient des vices cachés.<br>
    Par correspondance, il n'est pas toujours facile d'obtenir un remboursement de la part d'un vendeur indélicat; donc prudence.<br>
    </p>
   </FONT>
   </blockquote>
  <h3>
   <FONT size="3pt"
   style="color:yellow">CONCERNANT L'APPRENTISSAGE DU PILOTAGE
   </FONT>
  </h3>
   <FONT size="4pt">
   <blockquote>
    <p> Personnellement, afin d'acquèrir les bons gestes, et les bons réflexes, je conseille de débuter en utilisant un simulateur de vol.<br>
    Malgré le surcoût que cela reprèsente, je suis convaincu que cela se traduira par une économie non négligeable, en évitant les crash dus au manque de pratique du vol.<br>
    Le simulateur m'a permis, en 6 mois de pratique, de commencer l'accrobatie, boucles, tonneaux, renversements, ce qui a étonné bien des pilotes confirmés, qui me reprochaient de vouloir griller les étapes.<br>
    Ce qu'ils ne savaient pas, j'ai eu une formation concernant la théorie de l'hélicoptère dans l'aéronavale, ce qui m'a beaucoup aidé, dans le fonctionnement, les réglages, et le pilotage.<br>
    <br>
    Commencer l'apprentissage par le décollage en douceur, à une altitude inférieure à 1 mètre; maintenir le modèle en stationnaire, ce qui, au début, ne parait pas évident.<br>
    Ne pas commencer les translations, avant, droite, gauche, arrière, avant de maîtriser le stationnaire, que certains ne dépassent jamais.<br>
    Dans tous les cas, la manoeuvre des manettes doit se faire en douceur; pas de mouvements brusques, pour éviter des embardées incontrôlables du modèle qui finiront en crash, bien souvent.<br>
    En cela, je trouve le simulateur d'un grand secours. Avec de la pratique, on peut se mettre en situation scabreuse et tenter de la corriger. Si on n'y parvient pas, ce n'est qu'un crash virtuel.<br>
    Naturellement, sur le terrain, la réaction du pilote débutant sera différente; cela est du à l'environnement différent, mais également à l'appréhension éprouvée par le pilote, à faire évoluer un modèle pour la première fois.<br>
    En avion,cette appréhension est la même, les premières fois. Elle disparait au fur et à mesure des progrés réalisés.<br>
    </p>
   </blockquote>
   </FONT>
   <h3>
    <FONT size="3pt"
    style="color:yellow">LE PLATEAU CYCLIQUE
    </FONT>
   </h3>
   <img src="C:\Users\Perso\Pictures\Plat-TrexA.jpg" alt="" style="margin-left:-14px"/><!--Affiche l'image du plateau cyclique et la décale sur la droite-->
   </h3>
</body>
</html>
 

Reply

Marsh Posté le 05-02-2022 à 20:27:32    

Tu peux mettre ton code entre les balises [code] et [/ code] (sans l'espace) pour poster ton code ici, cela sera plus lisible.
 
Il y a plusieurs problèmes dans ta page, notamment de syntaxe :

  • <metacharset="utf-8"/> doit être <meta charset="utf-8"/> (il faut séparer le nom de la base de l'attribut)
  • <h1 doit être <h1> (tu as oublier de fermer la balise ouvrante)
  • <img src="file://C:\Users\Perso\Pictures\HelicoBA.jpg"alt""/> doit être <img src="file://C:\Users\Perso\Pictures\HelicoBA.jpg" alt=""/>
  • <p align=center doit être <p align="center" (même si cela fonctionne sur la plupart des navigateurs il vaut mieux mettre les guillemets)
  • Tu as oublié de fermer la balise <p> dans ton premier paragraphe
  • La balise <font> a été retiré en HTML5, il ne faut plus l'utiliser, si tu veux changer la taille du texte, applique la propriété CSS font-size, par exemple style="font-size:10px"
  • Tu as une balise fermante </h3> en trop à la fin


A terme je te conseil d'utiliser un vrai éditeur de code (par exemple Visual Studio Code qui est gratuit, mais il y en a d'autres), qui va automatiquement t'indiquer ce genre d'erreurs de syntaxe, c'est beaucoup plus pratique que d'utiliser notepad (même si c'est bien aussi pour apprendre sans l'autocomplétion).


---------------
Topic achats/ventes | Feed-back | Worklog
Reply

Marsh Posté le 05-02-2022 à 21:21:45    

Après correction, la première image n'était plus centrée; elle était revenue à gauche ...
J'ai donc remis la même ligne qu'auparavant soit :
 
  <div>
                         style="text-align: center;"><!--Centre l'image horizontalement-->
   <img src="file://C:\Users\Perso\Pictures\HelicoBA.jpg"alt""/><!--Affiche l'image-->
  </div>
Si je retire le ; elle revient à gauche. Heureusement, j'avais fait une copie d fichier. Une bizarrerie de Notepad ?
 
Pour <h1, je suppose que comme j'avais activé la fermeture automatique, je dois parfois effacer la balise de fermeture, et je vais trop loin, en effaçant une partie de la balise ouvrante.
Je vais désactiver l'automatisme, et ne pas oublier de fermer la balise ouverte.
 
Je vais télécharger l'éditeur que tu m'as indiqué, autant le faire maintenant.
Bon, je continue  :lol:

Reply

Marsh Posté le 05-02-2022 à 21:34:33    

Pareil pour <p si je ferme la balise, avant le titre s'affiche style="color yellow"> c'est curieux; j'avais bien remarqué que le balise n'était pas fermée, et j'avais corrigé mais le problème décrit précédemment s'affichait.
Je suis donc revenu à:
 
<h1>
   <p align=center  
   style="color:yellow">VOL EN HELICOPTERE RADIOCOMMANDE<!--Colore le titre en jaune/ Titre centré avec p align=center-->
   </p>
</h1>  
 
Et là, le titre s'affiche normalement. Peut être que cette ligne que j'avais copié sur un site, était aussi éditée avec Notepad ? Je ne sais pas.
C'est  :pt1cable:
La programmation en autodidacte devient un sport  :lol: c'est pire que l'assembleur de mes débuts .... mais j'étais plus jeune  :sweat:  

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed