Afbeeldingen toe te voegen aan uw website of sociale netwerken profiel is een geweldige manier om sparren-up van uw pagina. HTML (HyperText Markup Language) wordt geleverd met vele web development functies, maar de code die nodig is voor het toevoegen van foto's is vrij eenvoudig.
Stappen
Het invoegen van afbeeldingen met HTML
- 1Upload uw afbeelding naar een gratis image hosting website, zoals photobucket of tinypic, die het mogelijk maakt hot-linking. Hot-linking is een link naar de afbeelding rechtstreeks vanaf de host-server van de website; sommige websites hebben het verboden omdat hot-koppeling maakt gebruik van hun bandbreedte en neemt ruimte op hun servers.
- Als je een betaalde web hosting account, upload uw afbeelding naar die host in plaats daarvan. Het zal betrouwbaarder dan een gratis site.
- 2Open een nieuw document in een teksteditor (e. G., Kladblok) of de pagina op uw website / profiel waar u de HTML kan veranderen.
- 3Begin met de img tag. De img-tag is leeg, wat betekent dat het niet een afsluitende tag nodig. Echter, voor XHTML geldigheid, kunt u een spatie toe te voegen en slash vóór het groter-dan-teken.
- <img />
- 4Er zijn vele beschikbare attributen, maar slechts een is absoluut noodzakelijk: src. Dit is de locatie, of de URL van uw afbeelding.
- <img src="VVJMIG9mIGltYWdl" />
- 5Vervolgens moet je de alt attribuut toe te voegen. Dit specificeert alternatieve tekst, in het geval de afbeelding niet wordt geladen. De alternatieve tekst is ook te lezen op blinde bezoekers die schermlezers gebruiken.
- Als u uw muisaanwijzer over de afbeelding, zal de alternatieve tekst tonen in een tooltip, maar alleen in Internet Explorer. De cross-browser oplossing (werkt in Firefox et al..) Is de eigenschap gebruiken als aanvulling op alt. (Laat dit uit als u niet wilt dat de afbeelding een tool tip te hebben.)
- Bijvoorbeeld:
<img src="VVJMIG9mIGltYWdl" alt="Just in case" title="Tooltip"/>
- 6Nu, zou je eventueel moet u het formaat van uw afbeelding, door gebruik te maken van de hoogte en breedte attributen, en vermelding van de pixels of percentage. Merk op dat door het veranderen van de grootte als dit, je bent alleen het veranderen van het formaat dat het beeld wordt weergegeven. De browser laadt nog steeds de werkelijke grootte van de afbeelding, dus als je een onnodig groot beeld, het is beter om te re-size met behulp van een fotobewerkingsprogramma of PicResize.com in plaats van alleen het veranderen van de beeldgrootte.
- <img src="VVJMIG9mIGltYWdl" alt="Just in case" title="Tooltip" height="50%" width="50%" />
- <img src="VVJMIG9mIGltYWdl" alt="Just in case" title="Tooltip" height="25px" width="50px" />
Tips
- De waarde van deze kenmerken is ofwel een positief pixel waarde of een percentage van 1-100 procent.
- De foto of afbeelding kan worden geplaatst waar in de webpagina met een lijn attribuut, zoals boven, onder, midden, rechts, links, etc.
- Het kenmerk hspace wordt gebruikt om een buffer van horizontale spatie links en rechts van een beeld, waarbij de vspace attribuut wordt gebruikt om een buffer verticale ruimte tussen de boven-en onderkant van het beeld en andere voorwerpen in.
- Niet overboord te gaan met beelden. Het ziet er gewoon rommelig en onprofessioneel.
- Voor logo's of cartoons GIF afbeeldingen zijn goed, terwijl voor complexe beelden, zoals foto's JPEG beelden zijn goed.
- GIF-afbeeldingen ondersteunen alleen 8-bits kleur voor maximaal 256 kleuren met in de afbeelding. Dus een zekere mate van verlies is onvermijdelijk wanneer vertegenwoordigt true color afbeeldingen zoals foto's.
- GIF-afbeeldingen ondersteunen ook transparantie. Een beetje van de transparantie is toegestaan, wat betekent dat een kleur kan worden ingesteld om transparant te zijn.
- Interlacing wordt ook ondersteund door de GIF-afbeeldingen wat betekent het interlacing effect kan een gebruiker een idee van wat een van een beeld eruit ziet voordat het hele beeld heeft gedownload te krijgen.
- GIF-formaat ondersteunt ook animatie.