Hur till bädda in bilder i en Instructable

nyligen, jag har försökt ut att göra Instructables med foto-bara instruktioner (se min rosett och Mesh dekolletage Instructables). För enkel Instructables tror jag det är ett format som ser bra ut, och jag gillar tanken på ordlös instruktioner.

Om du vill prova detta själv, är här en snabb tutorial på bädda in bilder i din text utrymme. Det är inte bara knapp att klicka på; du kommer att lära lite grundläggande HTML. Men om du har aldrig gjort någon kodning innan, inte vara rädd! Det är inte så svårt och du behöver bara lära sig en liten bit för att bädda in ett foto.

Och här är det: < img src="photourl.jpg"/ >

Förutom att du kommer att ersätta photourl.jpg med bildens URL.
Men vad är bildens URL? Låt oss ta ett steg tillbaka.

För detta Instructable, jag kommer att arbeta med denna bild av en robot t-shirt:

Du bör följa med i ett annat fönster och prova alla de saker som jag visa dig.

Steg 1: Ladda upp fotot
Ladda upp bilden till Instructables normalt. Du behöver inte ens koppla den till Instructable, bara få det på plats. (Det kan faktiskt vara en bild från var som helst på internet, men jag tänker bara att arbeta från insidan på Instructables webbplats.)
Du bör ladda upp en ganska stor bild så att du kommer att kunna se alla alternativ.

Steg 2: Kopiera bildens URL
Högerklicka på miniatyren av bilden och välj "Kopiera bild URL".

Steg 3: Spela runt med URL
Vi kommer att ta att URL och spela med det lite, så sätt igång och klistra in URL strängen i en ny flik i webbläsaren. Instructables har några olika versioner av fotot.
Eftersom vi kopierat från miniatyren, URL-strängen bör avslutas för nuvarande med ". THUMB.jpg". Bilden är så liten, så här:

Nu ändra. THUMB.jpg till. TINY.jpg att göra det ännu mindre.

VINKELHAKE, SQUARE2 och SQUARE3:

Försök MEDIUM.

Prova stora.

Så du ser att du har en massa standardalternativ för storlek och även formen, av ditt foto.

Steg 4: Att sätta in i källkoden

Tillbaka i din Instructable, klicka på knappen Source . Nu ser du den HTML som din Instructable använder. Vi ska bara vara jävlas med bilder, så du kan ignorera det mesta. Navigera till den plats där du vill sätta ditt foto och använda koden vi lärde oss tidigare: < img src="photourl.jpg"/ >

Men i stället för photourl.jpg, i din egen Foto-URL. Detta är exempelvis
< img src = " / >

Steg 5: Bredd och höjd
Du behöver inte vara begränsad av de standardstorlekar som vi utforskade i steg 3. Du kan också ange en särskild bredd eller höjd (eller båda!) i HTML. Det är lätt! Försök:

< img src="photourl.jpg" bredd = "200" / >

< img src="photourl.jpg" höjd = "200" / >

< img src="photourl.jpg" bredd = "200" höjd = "200" / > eller < img src="photourl.jpg" höjd = "200" width = "200" / >

Men när du vill begränsa både bredd och höjd, du kan förvränga bilden.

Bredden på en Instructable är oftast 650px. Du bör ange din image URL stor i de flesta fall så att du har hög upplösning. Annars kan det se ut såhär:

Och det är allt du behöver veta!
Att bädda in en bild här, ändå. Men om du haft denna lilla smak av makt från kodning, bör du lära dig mer! Det är praktiskt ibland. Förmodligen är det enklaste sättet att lära sig codeacademy.org. Klicka på länken! Prova det! Bara sluta om du blir uttråkad.