Afbeeldingen invoegen met HTML

Het toevoegen van afbeeldingen aan uw website of profiel op sociale netwerken is een uitstekende manier om uw pagina te verbeteren. De HTML-code om afbeeldingen toe te voegen is eenvoudig en het is meestal een van de eerste lessen die zijn geleerd door degenen die het net beginnen te gebruiken.

Inhoud

Stappen

Methode 1de afbeelding invoegen
Methode 2optionele instellingen

Tips
Waarschuwingen

stappen

Methode 1
De afbeelding invoegen

Titel afbeelding Afbeeldingen invoegen met HTML Stap 1

Upload je afbeelding Er zijn verschillende gratis image-hostingservices, zoals Picasa Web Albums, Imgur, Flickr of Photobucket. Lees de voorwaarden zorgvuldig door. Sommige services zullen de kwaliteit van uw afbeelding verminderen of wissen als veel mensen het zien (omdat het de bandbreedte van de server gebruikt).

Met sommige bloghostingservices kunt u uw afbeeldingen uploaden met behulp van de beheerderstools van de blog.
Als u voor een server hebt betaald, uploadt u de afbeelding naar uw eigen site met behulp van een FTP-service. We raden u aan om een directory van te maken afbeeldingen om uw bestanden georganiseerd te houden.
Als je een afbeelding van een andere website wilt gebruiken, vraag dan toestemming aan de maker. Als u het kunt gebruiken, downloadt u de afbeelding en uploadt u deze naar een hostwebsite.

Titel afbeelding Afbeeldingen invoegen met HTML Stap 2

Open uw HTML-bestand. Open het HTML-document voor de webpagina waar de afbeelding wordt weergegeven.

Als u probeert een afbeelding in een forum in te voegen, kunt u rechtstreeks in het bericht schrijven. Verschillende fora gebruiken een aangepast systeem in plaats van HTML. Vraag andere forumleden om hulp als dit niet werkt.

Titel afbeelding Afbeeldingen invoegen met HTML Stap 3

Begin met het afbeeldinglabel. Zoek een punt in de tekst van uw HTML waar u een afbeelding wilt invoegen. Schrijf het label hier. Dit is een lege tag, dat wil zeggen, het is single, zonder een afsluitende tag. Alles wat u nodig hebt om uw afbeelding weer te geven, gaat binnen de twee punthaken.

Titel afbeelding Afbeeldingen invoegen met HTML Stap 4

Zoek de URL van je afbeelding. Ga naar de webpagina waar uw afbeelding wordt gehost. Klik met de rechtermuisknop (controle - klik op Mac) en selecteer Kopieer de locatie van de afbeelding. U kunt ook op klikken Zie afbeelding om de enkele afbeelding op de pagina te zien en kopieer de URL vervolgens naar uw adresbalk.

Als je de afbeelding hebt geüpload naar een afbeeldingsdirectory op je eigen website, koppel deze dan met / images /Ik elnombredetuarchivo. Als het niet werkt, bevindt de afbeeldingsdirectory zich waarschijnlijk in een andere map. Verplaats het naar de hoofdmap.

Titel afbeelding Afbeeldingen invoegen met HTML Stap 5

Plaats de URL in een src-kenmerk. Zoals u zou moeten weten, gaan HTML-kenmerken in een tag om wijzigingen aan te brengen. Het kenmerk src is de afgekorte vorm van "bron" en vertelt de browser waar naar moet kijken om de afbeelding te vinden. Schrijf src =" " en plak de URL van de afbeelding tussen de aanhalingstekens. Hier is een voorbeeld:

Titel afbeelding Afbeeldingen invoegen met HTML Stap 6

Voeg een alt-attribuut toe. Technisch gezien heeft je HTML alles wat je nodig hebt om de afbeelding weer te geven, maar het is beter om ook een attribuut toe te voegen alt. Dit vertelt de browser welke tekst moet worden weergegeven wanneer de afbeelding niet kan worden geladen. Bovendien helpt het vooral zoekmachines om te weten waar uw afbeelding over gaat en kunnen schermlezers uw beeld beschrijven aan bezoekers met visuele problemen. Volg dit voorbeeld door de tekst in de aanhalingstekens te wijzigen:

Als de afbeelding niet belangrijk is voor de inhoud van de pagina, bevat deze het alt-attribuut zonder tekst ().

Titel afbeelding Afbeeldingen invoegen met HTML Stap 7

Sla uw wijzigingen op Sla uw HTML-bestand op uw website op. Ga naar de pagina die u zojuist hebt bewerkt of werk de pagina bij als u deze al hebt geopend. Kijk nu naar je afbeelding. Als het niet de juiste maat heeft of je het niet leuk vindt om een andere reden, ga dan naar het volgende gedeelte.

Methode 2
Optionele instellingen

Titel afbeelding Afbeeldingen invoegen met HTML Stap 8

Wijzig de grootte van de afbeelding. Voor de beste resultaten, verkleinen van de afbeelding met behulp van gratis bewerkingssoftware en vervolgens de nieuwe versie uploaden. Stel de breedte en de hoog met HTML vertelt de browser om de afbeelding te verkleinen of vergroten, wat niet consistent is tussen browsers en (zelden) weergavefouten kan veroorzaken. Als u op zoek bent naar een snelle en nuttige instelling, gebruikt u dit formaat:

(Aantal pixels of "CSS-pixels" meer gericht op telefoons in HTML5)
of (Percentage van de afmetingen van de webpagina of percentage van het HTML-element dat de afbeelding bevat)
Als u slechts één kenmerk (breedte of hoogte) invoert, moet de browser de verhouding width: height behouden.

Titel afbeelding Afbeeldingen invoegen met HTML Stap 9

Voeg een beschrijving toe Het kenmerk titel het kan worden gebruikt om extra opmerkingen of informatie over de afbeelding toe te voegen. U kunt hier bijvoorbeeld de kunstenaar citeren. In de meeste gevallen verschijnt deze tekst wanneer de bezoeker de aanwijzer over de afbeelding passeert.

Titel afbeelding Afbeeldingen invoegen met HTML Deel 2 Stap 3

Maak er een link van. Als u van een afbeelding ook een koppeling wilt maken, plaatst u een afbeeldingstag in de hyperlinktag. Hier is een voorbeeld:

tips

Zorg ervoor dat de URL de bestandsindeling van de afbeeldingen bevat (.jpg, .jpg, enz.).
GIF-afbeeldingen werken het beste voor logo`s of tekenfilms, terwijl JPEG-afbeeldingen het beste werken voor complexe afbeeldingen, zoals foto`s.
In de meeste gevallen is het het beste om alleen afbeeldingen met het .jpg-, .jpeg-, .jpg- of .jpg-formaat te gebruiken. Waarschijnlijk verschijnen andere formaten niet correct in alle browsers.
Houd een back-up van de afbeelding op uw computer, alleen als voorzorgsmaatregel.

waarschuwingen

Maak geen "hotlink" door de URL van de webpagina van iemand anders in te voegen, omdat deze de bandbreedte van uw site gebruikt zonder nieuwe bezoeken aan uw pagina te geven. Behalve dat het onjuist is, zal de "hot-linked" afbeelding verdwijnen als de site waaraan het is gekoppeld verdwijnt. Als de beheerder van die pagina ziet wat u doet, kunt u zelfs de afbeelding op uw website wijzigen.

Delen op sociale netwerken:

Verwant