Si vous souhaitez essayer vous-même, voici un rapide tutoriel sur l’incorporation des photos dans votre espace de texte. Il n’est pas le bouton just en cliquant sur ; vous apprendrez un peu de HTML de base. Mais si vous n’avez jamais fait n’importe quel codage avant, n’ayez pas peur ! Il n’est pas difficile, et vous ne devrez apprendre un tout petit peu pour incorporer une photo.
Et c’est ici : < img src="photourl.jpg"/ >
Sauf que vous allez remplacer photourl.jpg avec l’URL de votre photo.
Mais quelle est l’URL de votre photo ? Nous allons faire un pas en arrière.
Pour ce Instructable, je vais travailler avec cette photo d’un robot t-shirt :
Vous devez suivre le long dans une fenêtre différente et essayer tous les trucs que je vous montre.
Étape 1: Télécharger la Photo
Télécharger la photo sur Instructables normalement. Vous n’avez même pas à joindre à l’Instructable, juste l’obtenir sur le site. (Il peut effectivement être une image de n’importe où sur l’internet, mais je vais me contenter de travailler de l’intérieur le site Instructables.)
Vous devez télécharger une photo assez grande pour que vous serez en mesure de voir toutes les options.
Étape 2: Copiez l’URL de l’image
Faites un clic droit sur la vignette de l’image et sélectionnez « Copier l’Image URL ».
Etape 3: Jouer avec l’URL
Nous allons prendre que URL et jouer avec lui un peu, alors allez-y et collez cette chaîne de l’URL dans un nouvel onglet de votre navigateur. Instructables a quelques versions différentes de votre photo.
Parce que nous avons copié de la miniature, la chaîne d’URL doit actuellement se terminer par ". THUMB.jpg". Si l’image est petite, comme ceci :
Maintenant changer. THUMB.jpg à. TINY.jpg pour le rendre encore plus petit.
ÉQUERRE, SQUARE2 et Carré3 :
Essayez le milieu.
Essayez le grand.
Donc vous voyez que vous avez beaucoup d’options par défaut pour la taille et même la forme, de votre photo.
Étape 4: Insertion dans le code source
Mais au lieu de photourl.jpg, mettre dans l’URL de votre propre photo. Par exemple, il s’agit
< img src = « » / >
Étape 5: Largeur et hauteur
Il ne faut pas être limité aux tailles par défaut que nous avons exploré à l’étape 3. Vous pouvez également spécifier une largeur spécifique ou hauteur (ou les deux!) dans le code HTML. C’est facile ! Essayez :
< img src="photourl.jpg" width = "200" / >
< img src="photourl.jpg" height = "200" / >
< img src="photourl.jpg" width = "200" height = "200" / > ou < img src="photourl.jpg" hauteur = "200" width = "200" / >
Mais quand vous contraindre la largeur et la hauteur, vous pouvez déformer votre image.
La largeur d’une Instructable est habituellement 650px. Vous devez définir l’URL de votre image à LARGE dans la plupart des cas afin que vous ayez à haute résolution. Dans le cas contraire, il pourrait ressembler à ceci :
Et c’est tout ce que vous devez savoir !
Pour intégrer une image ici, de toute façon. Mais si vous avez aimé ce petit goût de puissance de codage, vous devriez apprendre plus ! Il est très pratique parfois. Probablement la meilleure façon d’apprendre est codeacademy.org. Cliquez sur le lien ! Essayez-le ! Juste arrêter si tu t’ennuies.