Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
991 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Insertion image en html depuis mon ordi

 


 Mot :   Pseudo :  
  Aller à la page :
 
 Page :   1  2  3  4  5  ..  16  17  18  19  20  21
Page Précédente
Auteur Sujet :

Insertion image en html depuis mon ordi

n°2408734
Harmo88
Il n\\
Posté le 02-02-2022 à 13:26:16  profilanswer
 

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
mood
Publicité
Posté le 02-02-2022 à 13:26:16  profilanswer
 

n°2408740
yann39
⛅⏰♫♪☹☕
Posté le 02-02-2022 à 14:05:00  profilanswer
 

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
n°2408751
Harmo88
Il n\\
Posté le 02-02-2022 à 15:42:21  profilanswer
 

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
n°2408761
Harmo88
Il n\\
Posté le 02-02-2022 à 16:09:14  profilanswer
 

<!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 ?

n°2408767
Harmo88
Il n\\
Posté le 02-02-2022 à 16:23:27  profilanswer
 

<!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.

n°2408787
rufo
Pas me confondre avec Lycos!
Posté le 02-02-2022 à 19:18:45  profilanswer
 

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
n°2408791
Harmo88
Il n\\
Posté le 02-02-2022 à 19:48:39  profilanswer
 

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.

n°2408798
rufo
Pas me confondre avec Lycos!
Posté le 02-02-2022 à 20:26:53  profilanswer
 

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
n°2408799
yann39
⛅⏰♫♪☹☕
Posté le 02-02-2022 à 20:28:45  profilanswer
 

ç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
n°2408801
rufo
Pas me confondre avec Lycos!
Posté le 02-02-2022 à 20:33:15  profilanswer
 

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
mood
Publicité
Posté le 02-02-2022 à 20:33:15  profilanswer
 

n°2408802
yann39
⛅⏰♫♪☹☕
Posté le 02-02-2022 à 20:35:49  profilanswer
 

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


---------------
Topic achats/ventes | Feed-back | Worklog
n°2408804
Harmo88
Il n\\
Posté le 02-02-2022 à 20:46:33  profilanswer
 

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 ?

n°2408805
yann39
⛅⏰♫♪☹☕
Posté le 02-02-2022 à 21:01:03  profilanswer
 

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
n°2408806
David Bori​ng
Posté le 02-02-2022 à 21:05:31  profilanswer
 

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

n°2408808
Harmo88
Il n\\
Posté le 02-02-2022 à 22:22:54  profilanswer
 

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:  

n°2408811
Harmo88
Il n\\
Posté le 02-02-2022 à 22:30:20  profilanswer
 

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.

n°2408812
Harmo88
Il n\\
Posté le 02-02-2022 à 22:34:50  profilanswer
 

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.

n°2408814
yann39
⛅⏰♫♪☹☕
Posté le 02-02-2022 à 23:01:56  profilanswer
 

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
n°2408824
Harmo88
Il n\\
Posté le 03-02-2022 à 10:00:59  profilanswer
 

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.

n°2408825
Harmo88
Il n\\
Posté le 03-02-2022 à 10:04:03  profilanswer
 

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é.


n°2408845
Harmo88
Il n\\
Posté le 03-02-2022 à 11:14:17  profilanswer
 

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.

n°2408850
yann39
⛅⏰♫♪☹☕
Posté le 03-02-2022 à 11:33:03  profilanswer
 

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
n°2408853
Harmo88
Il n\\
Posté le 03-02-2022 à 11:54:52  profilanswer
 

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
n°2408859
rufo
Pas me confondre avec Lycos!
Posté le 03-02-2022 à 13:59:08  profilanswer
 

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
n°2408860
yann39
⛅⏰♫♪☹☕
Posté le 03-02-2022 à 14:08:32  profilanswer
 

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
n°2408861
Harmo88
Il n\\
Posté le 03-02-2022 à 14:41:17  profilanswer
 

"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
n°2408866
mechkurt
Posté le 03-02-2022 à 15:13:19  profilanswer
 

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
n°2408900
Harmo88
Il n\\
Posté le 03-02-2022 à 17:46:50  profilanswer
 

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  :)  

n°2408902
mechkurt
Posté le 03-02-2022 à 17:57:53  profilanswer
 

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
n°2408927
Harmo88
Il n\\
Posté le 03-02-2022 à 20:21:26  profilanswer
 

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:  
 

n°2408928
rufo
Pas me confondre avec Lycos!
Posté le 03-02-2022 à 21:18:52  profilanswer
 

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
n°2408936
Harmo88
Il n\\
Posté le 03-02-2022 à 22:03:31  profilanswer
 

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.

n°2409021
Harmo88
Il n\\
Posté le 04-02-2022 à 22:07:57  profilanswer
 

: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:  

n°2409056
yann39
⛅⏰♫♪☹☕
Posté le 05-02-2022 à 14:17:34  profilanswer
 

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
n°2409076
Harmo88
Il n\\
Posté le 05-02-2022 à 18:29:50  profilanswer
 

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:  

n°2409083
yann39
⛅⏰♫♪☹☕
Posté le 05-02-2022 à 19:45:17  profilanswer
 

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
n°2409085
Harmo88
Il n\\
Posté le 05-02-2022 à 19:56:32  profilanswer
 

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>
 

n°2409087
yann39
⛅⏰♫♪☹☕
Posté le 05-02-2022 à 20:27:32  profilanswer
 

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
n°2409090
Harmo88
Il n\\
Posté le 05-02-2022 à 21:21:45  profilanswer
 

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:

n°2409092
Harmo88
Il n\\
Posté le 05-02-2022 à 21:34:33  profilanswer
 

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:  

mood
Publicité
Posté le   profilanswer
 

 Page :   1  2  3  4  5  ..  16  17  18  19  20  21
Page Précédente

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Insertion image en html depuis mon ordi

 

Sujets relatifs
Signature e-mail en HTML adaptative mode clair/sombre ?Exercice html, php, mysql, javascript
hébergement de page htmlresponsive scroll pas quand je glisse l'image
Probleme d'edition d'image dans DjangoEnvoi image sur blog impossible
Aligner le background au milieu de l'imageun problème de lien php dans le html
Affichage d'une image en infobulle au survol d'un lien (hover)HTML Select et OnClick() ne fonctionne pas sur Safari
Plus de sujets relatifs à : Insertion image en html depuis mon ordi


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR