Hoe foto's insluiten in een Instructable

onlangs, ik heb geprobeerd Instructables maken met alleen-foto instructies (zie mijn rozet en Mesh Decolletage Instructables).  Voor eenvoudige Instructables, ik denk dat dit is een indeling die er goed uitziet, en ik hou van het idee van woordeloze instructies.

Als u proberen dit zelf willen zou, is hier een snelle tutorial over het insluiten van foto's in uw tekst-ruimte. Het is niet alleen knop te klikken; u zult leren een beetje basis HTML. Maar als je nog nooit hebt gedaan eventuele codering, wees niet bang! Het is niet zo moeilijk, en u hoeft alleen te leren een klein beetje om het insluiten van een foto.

En hier is het: < img src="photourl.jpg"/ >

Behalve u Vervang photourl.jpg met uw foto's URL.
Maar wat is de URL van uw foto's? Laten we een stap terug te nemen.

Voor dit Instructable, I 'm gonna werken met deze foto van een robot t-shirt:

U moet volgen in een ander venster en probeer alle van de dingen die ik je laten zien.

Stap 1: Upload de foto
De foto uploadt naar Instructables normaal. U hoeft zelfs te koppelen aan de Instructable, gewoon op de site krijgen. (Het daadwerkelijk kan een afbeelding vanuit een willekeurige locatie op het internet, maar ik ben gewoon gaan om te werken binnen de Instructables website.)
U moet een vrij grote foto uploaden zodat u zult kunnen zien van alle opties.

Stap 2: Kopieer de URL van de afbeelding
Klik met de rechtermuisknop op de miniatuur van de afbeelding en selecteer "Copy Image URL".

Stap 3: Stoeien met de URL
We gonna nemen dat URL en spelen met het een beetje, dus ga je gang en plak deze URL-reeks in een nieuw tabblad van uw browser. Instructables heeft een paar verschillende versies van uw foto.
Omdat we gekopieerd uit de miniatuur, de URL-reeks momenteel moet eindigen met ". THUMB.jpg". Het beeld is zo klein, zoals dit:

Nu wijzigen. THUMB.jpg aan. TINY.jpg het zelfs om kleiner te maken.

Probeer SQUARE, SQUARE2 en SQUARE3:

Probeer MEDIUM.

Probeer grote.

Zo zie je dat je een heleboel standaardopties voor de grootte en zelfs de vorm van uw foto.

Stap 4: Invoegen in de broncode

Terug in uw Instructable, klikt u op de knop bron . Je ziet nu de HTML-code die uw Instructable is gebruikt. We gaan gewoon worden knoeien met beelden, dus u de meeste hiervan negeren kunt. Ga naar de plaats waar u wilt uw foto en gebruik van die code die we eerder geleerd: < img src="photourl.jpg"/ >

Maar in plaats van photourl.jpg, in uw eigen URL van de foto te zetten. Dit is bijvoorbeeld
< img src = " / >

Stap 5: Breedte en hoogte
U hoeft niet te worden beperkt door de standaardformaten die we in stap 3 verkenden. U kunt ook een specifieke breedte of hoogte (of allebei!) in de HTML-code. It's easy! Try:

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

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

< img src="photourl.jpg" width = "200" hoogte = "200" / > of < img src="photourl.jpg" hoogte = "200" width = "200" / >

Maar wanneer u zowel hoogte als breedte beperken, kunt u uw afbeelding vervormen.

De breedte van een Instructable is meestal 650px. U moet uw afbeeldings-URL ingesteld op LARGE in de meeste gevallen zodat u hoge resolutie hebben. Anders zou het als volgt uitzien:

En dat is alles wat die u moet weten!
Om het insluiten van een afbeelding hier, anyway. Maar als je genoten hebt van dit kleine smaak van de macht van de codering, je moet leren meer! Het komt handig soms. Waarschijnlijk is de eenvoudigste manier om te leren codeacademy.org. Klik op de link! Probeer het! Gewoon stoppen als je vervelen.