Sådan sætter du et billede ind ved hjælp af html kode

Nu er det efterhånden blevet et must, at man skal sætte billeder ind rundt omkring på nettet med Html-kode, i gæstebøger, tagwall's osv. Det er tit svært at forklare, men jeg vil da gøre et ihærdigt forsøg i denne guide.

Det første man skal gøre, for ikke at krænke ophavsretten på andres billeder, er at oprette en hjemmeside, hvor man kan uploade sine billeder. Det skal understreges, at det IKKE er tilladt at bruge link til billeder, som ikke ligger på ens egen server/hjemmeside.

Problemet er dog ikke så stort, da man i langt de fleste tilfælde har gratis hjemmesideplads hos udbyderen, hvor man har sit Internet. Det eneste man skal bruge er enten de oplysninger man har fået fra udbyderen, eller kundenummer og evt. password til Internettet.

Du behøver IKKE at have det store kendskab til opsætning og design for at lægge billeder op på din gratis hjemmesideplads. Rent faktisk kan du nøjes med at bruge din stifinder i Windows eller en browser. I dette tilfælde skal du blot bruge ftp:// i stedet for http:// i adresselinien.

Dog skal du i de fleste tilfælde lige oprette en ftp-side hos udbyderen eller oprette en gratis side via f.eks. webbyen.dk eller 1go.dk. Du kan oprette en gratis webbyen-hjemmeside via grineflip.dk HER

Lad os fiktivt sige at du har fået oprettet en ftp-side med disse oplysninger:

Hostname: webbyen.dk
Brugernavn: james_bond
Password: agent007

Så vil du i de fleste tilfælde skulle finde ud af at bruge et ftp-program for at uploade filer, men det er ikke altid nødvendigt:

I dette eksempel viser jeg, hvordan du kan indtaste oplysningerne i stifinder eller browser. (jeg bruger som regel selv stifinder)
ftp://brugernavn:password@hostname
ftp://james_bond:agent007@webbyen.dk

Bemærk at jeg har indsat oplysningerne således:
(ftp://) (brugernavn) (kolon) (password) (snabela) (hostname)
Det er vigtigt, at du indtaster det helt korrekt og ikke laver nogen mellemrum i adressen.

Når du nu har fået oprettet din hjemmeside, er det tid til at få lagt nogle billeder op på den. Hvis du bruger stifinder, kan du bruge træk/slip til at trække billeder over på din ftp-side. Ellers bruger du et ftp-program, som f.eks. Cute-ftp eller Bulletproof-ftp.

Skal du "låne" f.eks. en animeret gif fra en side med gif-animationer, så kan du som hovedregel højreklikke på billedet og vælge "gem billede som". Derefter kan du lægge billedet ud på din ftp-side og bruge det i koden som du får her:

<img src="http://adresse til billede.gif">

Adressen til billedet kan du evt. finde således:
Når billedet er åbent i din browser, højreklik og vælg "egenskaber"
Prøv evt. på dette billede:

Som du sikkert kan se, er adressen til dette billede: http://www.grineflip.dk/pics/animated/oeffe.gif

Indsætter du adressen i koden fra før, vil den komme til at se således ud:
<img src="http://www.grineflip.dk/pics/animated/oeffe.gif">

Ovenstående kode er selv samme kode, som er brugt til at indsætte billed-eksemplet.

Udvidede kodeeksempler:

Link:

Du kan vælge at lave et link til en internetadresse, når folk klikker på dit billede.

Koden til dette billede indeholder, ud over billed-koden fra før, følgende:

<a href="http://adresse_til_side.html"><img src="http://adresse_til_billede.gif"></a>
<a href="http://www.grineflip.dk"><img src="http://www.grineflip.dk/pics/animated/oeffe.gif"></a>

Grundkoden til et link er følgende:

<a href="http://www.grineflip.dk">Link_titel</a>
Eksempel: Link_titel

Det eneste jeg har gjort er derfor at sætte billedkoden ind, der hvor Link_titel ellers ville have stået.
Dermed bliver teksten skiftet ud med et billede, som man kan klikke på, i stedet for en tekst.

Der er flere koder, som sagt på en pæn måde følges ad. Og selv om det ser indviklet ud, så er det ikke særlig svært at finde ud af.

Når du indsætter et link på et billede vil der komme en kant (border) rundt om billedet. Det er efter min mening ikke særlig kønt, og kan fjernes ved hjælp af endnu en kode.

Koden til dette er blot: border="0" og indsættes blot i koden efter adressen til billedet:

Som sidste eksempel i denne omgang, vil jeg demonstrere, hvordan man laver en mouse-over tekst (tekst som kommer frem, når du fører musen henover billedet)
Du kan prøve på billedet ovenover... Koden til dette er blot: title="tekst_beskrivelse"

Indsat i vores test-eksempel og færdige eksempel, bliver det følgende:

Bemærk venligst en vigtig ting: Mellemrummene... Du må ikke lave mellemrum hvor det passer dig bedst, men kun imellem hvert "tag" (kode-skift). Jeg har sat (o) alle steder, hvor der skal være mellemrum i denne kode her:

<a(o)href="http://www.grineflip.dk"(o)title="tekst_beskrivelse"><img(o)src="http://www.grineflip.dk/pics/animated/oeffe.gif"(o)border="0"></a>

Reelt kan du også lave mellemrum/linieskift imellem ><
Et eksempel kunne være:

Alle andre mellemrum kan forårsage, at din kode ikke virker.

Nu har du fået et lille lynkursus, som forhåbentlig har givet dig mod på at sætte billeder ind, rundt omkring.
Hvis du stadig ikke helt har forstået det og bare vil have et sjovt billede eller en smiley at sætte ind, så har jeg været så venlig, at lave en kopi-venlig side, hvor du kan kopiere koden og sætte den ind, hvor du har lyst.

Se siden ved at klikke her: