FORUM D’ENTRAIDE INFORMATIQUE (FEI)Site d’assistance et de sécurité informatique

[Thomas571999/]

Bonsoir,

Je me suis récemment décidé à m'investir dans un projet de Wiki existant par le biais de Wiki Fandom, et la modification / création de pages se fait grâce à un éditeur visuel (pour être accessible) dans lequel on peut aussi éditer directement le "code source" (si ça se dit comme ça ?) en html. Depuis quelques jours je m'amuse et je découvre de nombreuses choses sur ce langage de programmation (bien que ce ne soit que les "bases très basiques", que je tente d'assimiler petit à petit. Hors je suis bloquer depuis presque deux heures sur un point : je ne sais pas comment insérer une image de très petite taille (30x30 pixels) au milieu d'une phrase. Ca peut paraître bête mais j'ai tout essayé : border=o, align=left/right pour le texte, l'image etc, <img src=nom.png> et même <img src=http://adressedelimage>. Je ne m'en sors malheureusement pas Je précise que l'image en question est sur mon PC et que je l'ai importée dans la galerie du Wiki également. Je vais essayer d'insérer une image pour illustrer mon problème :

Spoiler: Afficher

Spoiler: Afficher

Spoiler: Afficher

Voici le résultat que je souhaiterai pouvoir obtenir en fin de compte (il ne s'agit que d'un grossier "montage"
fait avec Paint pour illustrer mon objectif). Bien sûr normalement l'image a une finition "ronde"
et se fond donc avec le fond (x2) de la page.

J'espère que vous comprendrez ce que j'ai essayé d'expliquer x)

Si quelqu'un aurait une idée et serait prêt à la partager avec moi, je l'en remercie par avance


Merci beaucoup par avance

[KeRR_@]

Bonjour,

Peux-tu poster ton code pour voir , merci.
J'édit:
Bon, Je modifier que les balises <img> et rajouter les accessoires qui vont bien ensemble, tu vas
remarqué un tout ti changement.
Change le(s) nom(s) de tes liens pour correspondre à ton architecture.
Copie l'ensemble du texte avec la balise <p> et rafraichie la page HTML.

Code : Tout sélectionner

	<p>Je me suis récemment décidé à m'investir dans un projet de Wiki <a href="imge/site.png"><img src="..\Desktop\nom.png" width="30" height="30" alt="Photo du site" title="Il faut se concentrer  !"/></a> existant par le biais de Wiki Fandom, et la modification / création de pages se fait grâce à un éditeur visuel (pour être accessible) dans lequel on peut aussi éditer directement le "code source" (si ça se dit comme ça ?) en html. Depuis quelques jours je m'amuse et je découvre de nombreuses choses sur ce langage de programmation (bien que ce ne soit que les "bases très basiques", que je tente d'assimiler petit à petit. Hors je suis bloquer depuis presque deux heures sur un point : je ne sais pas comment insérer une image de très petite taille (30x30 pixels) au milieu d'une phrase. Ca peut paraître bête mais j'ai tout essayé : border=o, align=left/right pour le texte, l'image etc, et même <img src="http://nsa38.casimages.com/img/2017/08/16/mini_170816113808429139.png"  alt="Image héberger  sur un site" />. Je ne m'en sors malheureusement pas :( Je précise que l'image en question est sur mon PC et que je l'ai importée dans la galerie du Wiki également. Je vais essayer d'insérer une image pour illustrer mon problème :</p>

Un tuto de chez SDZ de M@teo
@ te lire

[Thomas571999/]

Bonjour,

J'ai essayé de copier le code que vous m'aviez fourni pour tenter de comprendre mais je ne vois pas de changement ... j'ai fourni mon code sur une capture d'écran, peut-être ne l'avez-vous pas vu. Comme demandé je vous l'inscrit ci-dessous :

Code : Tout sélectionner

Ci dessous se trouve également une liste des '''[[Slimes]]''' présents dans chaque '''[[Régions du Far Far Range|Région du Far Far Range]]'''. Les '''[[Slimes]]''' en gras sont les '''[[Slimes]]''' spécifiques de la '''[[Régions du Far Far Range|Région]]''' indiquée (ainsi que dans le '''[[Ranch]]''' si vous en avez capturés et mis dans des '''Corrals''').

<br>'''Slimes du [[Récif Desséché]] :'''
#[[Slime Rose]]
#[[Slime Rocheux]]
#[[Slime Phosphore]]
#[[Slime Tigré]]
#[[Slime Aqueux]]
#[[Slime Chanceux]]
#[[Slime Doré]]
#[[Goudrron]]

'''Slimes de la [[Nappe de Mousse]] :'''
#[[Slime Rose]]
#[[Slime Rocheux]]
#[[Slime Phosphore]]
#[[Slime Tigré]]
#[[Slime Aqueux]]
#[[Slime Boum|'''Slime Boum''']]
#[[Slime Mieleux|'''Slime Mielleux''']]
#[[Slime Chasseur|'''Slime Chasseur''']]
#[[Slime Chanceux]]
#[[Slime Doré]]

Mon but est d'insérer mon image en 30x30 pixels ici :

Code : Tout sélectionner

<br>'''Slimes du IMAGE À INSÉRER[[Récif Desséché]] :'''

Merci.

[KeRR_@]

Bonjour,

Je te poste un fichier HTML basique avec toutes les BALISES pour que cela fonctionne.

Tu peux enregistrer ton HTML sur ton bureau il fonctionnera aussi mais si tu vas lui ajouter plus tard un autre langage, il faudra instaler un server.
Seléctionne tout le code tu vas le copier / coler dans la page de test HTML que tu creer dans le Bloc-note
ou Notepad++ ensuite enregistre le et charge le dans un onglet dans ton navigateur, ou bien tu fait un double clique sur l'icone de FF ou IE et ou Chrome.
Dis moi ce que tu as comme affichage ou erreur.
Le fichier HTML

Code : Tout sélectionner

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Nom de ton site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles  -->
	<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

    <!--link href="../assets/css/bootstrap.css" rel="stylesheet"-->
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
		text-align: center;
		width: 0 auto;
		height: 0 auto;
		background-color: lightblue;
		font-size: 25px;
		font-weight: bold;
      }

    </style>
  </head>
  <body> 
  <h1>Une page HTML basique</h1>
  <img src="nom.png" /><br />
  <img src="nom.png" style="font-size:24px;" /><br />
  	<p>	Image de  30px sur 30px <br /><img src="http://image.noelshack.com/fichiers/2017/33/3/1502839374-probleme-3.png" width="30" height="30" alt="Photo du site" title="Il faut se concentrer  !"/></p>
<br />
	<section>
limes du Récif Desséché :
<img src="Slime_Rose" width="30" height="30" alt="Photo du site" title="Il faut se concentrer  !"/><br />
<img src="Slime_Rocheux" width="30" height="30" alt="Photo du site" title="Il faut se concentrer  !"/><br />
<img src="Slime_Phosphorewidth="30" height="30" alt="Photo du site" title="Il faut se concentrer  !"/><br />
<img src="Slime_Tigré" width="30" height="30" alt="Photo du site" title="Il faut se concentrer  !"/><br />
<img src="Slime_Aqueux" width="30" height="30" alt="Photo du site" title="Il faut se concentrer  !"/><br />
<img src="Slime_Chanceux" width="30" height="30" alt="Photo du site" title="Il faut se concentrer  !"/><br />
<img src="Slime_Doré" width="30" height="30" alt="Photo du site" title="Il faut se concentrer  !"/><br />
<img src="Goudrron" width="30" height="30" alt="Photo du site" title="Il faut se concentrer  !"/><br />

Nappe de Mousse :
 <img src="Slime_Rose"  width="30" height="30" alt="Photo du site" title="Il faut se concentrer  !"/><br />
 <img src="Slime_Rocheux"  width="30" height="30" alt="Photo du site" title="Il faut se concentrer  !"/><br />
 <img src="Slime_Phosphore"  width="30" height="30" alt="Photo du site" title="Il faut se concentrer  !"/><br />
 <img src="Slime_Aqueux"   width="30" height="30" alt="Photo du site" title="Il faut se concentrer  !"/><br />
 <img src="Slime_Boum"  width="30" height="30" alt="Photo du site" title="Il faut se concentrer  !"/><br />
 <img src="Slime_Mieleux"  width="30" height="30" alt="Photo du site" title="Il faut se concentrer  !"/><br />
 <img src="Slime_Chasseur"  width="30" height="30" alt="Photo du site" title="Il faut se concentrer  !"/><br />
 <img src="Slime_Chanceux"  width="30" height="30" alt="Photo du site" title="Il faut se concentrer  !"/><br />
 <img src="Slime_Doré"  width="30" height="30" alt="Photo du site" title="Il faut se concentrer  !"/><br />
</section>
  </body>
</html>