Het toevoegen van afbeeldingen aan uw website of sociale netwerkprofiel is een geweldige manier om uw pagina op te fleuren. De HTML-code voor het toevoegen van afbeeldingen is eenvoudig en vaak een van de eerste lessen voor een HTML-beginner.

Deel een van de twee:
De afbeelding invoegen

  1. 1 Upload je afbeelding. Er zijn veel gratis imagehostingservices, zoals Picasa Web Albums, Imgur, Flickr of Photobucket. Lees de voorwaarden zorgvuldig door. Sommige diensten zullen de beeldkwaliteit verminderen of uw afbeelding onderdrukken als te veel mensen het bekijken (aangezien dit de bandbreedte van de host opgebruikt).
    • Met sommige bloghostingservices kunt u afbeeldingen uploaden met behulp van de blogbeheerderstools.
    • Als u een betaalde webhost heeft, uploadt u de afbeelding naar uw eigen site met behulp van een FTP-service. Het is raadzaam een ​​"afbeeldingen" -directory aan te maken om uw bestanden georganiseerd te houden.[1]
    • Als u een afbeelding op een andere website wilt gebruiken, vraagt ​​u de maker om toestemming. Als ze het toestaat, download je de afbeelding en upload je de afbeelding naar een hostsite voor afbeeldingen.
  2. 2 Open uw HTML-bestand. Open het HTML-document voor de webpagina waar de afbeelding wordt weergegeven.
    • Als u een afbeelding op een forum probeert in te voegen, kunt u rechtstreeks in de post typen. Veel fora gebruiken een aangepast systeem in plaats van HTML. Vraag om hulp van andere forumbezoekers als dit niet werkt.
  3. 3 Begin met de img-tag. Zoek het punt in uw HTML-hoofdgedeelte waar u een afbeelding wilt invoegen. Schrijf de tag hier. Dit is een lege tag, wat betekent dat het op zichzelf staat, zonder sluitingstag. Alles wat u nodig heeft om uw afbeelding weer te geven, gaat binnen de twee punthaken.
  4. 4 Zoek de URL van je afbeelding. Ga naar de webpagina waar uw afbeelding wordt gehost. Klik met de rechtermuisknop op de afbeelding (Ctrl + klik op Mac) en selecteer "Afbeeldingslocatie kopiëren". U kunt ook op "Afbeelding bekijken" klikken om de afbeelding alleen op een pagina te bekijken en vervolgens de URL in uw adresbalk kopiëren.
    • Als je de afbeelding hebt geüpload naar een afbeeldingenmap op je eigen website, koppel er dan naartoe met / images /yourfilenamehere. Als dit niet werkt, bevindt de afbeeldingenmap zich waarschijnlijk in een andere map. Verplaats het naar de hoofdmap.
  5. 5 Plaats de URL in een src-attribuut. Zoals u wellicht al weet, gaan HTML-attributen in een tag om deze aan te passen. De src attribuut is een afkorting voor "source" en vertelt de browser waar hij moet zoeken om de afbeelding te vinden. Schrijf en plak de afbeeldings-URL tussen de aanhalingstekens. Hier is een voorbeeld:
  6. 6 Voeg een alt-attribuut toe. Technisch gezien heeft jouw HTML alles wat nodig is om de afbeelding weer te geven, maar het is het beste om een alt attribuut ook. Dit vertelt de browser welke tekst moet worden weergegeven als de afbeelding niet kan worden geladen. Wat nog belangrijker is, dit helpt zoekmachines om uit te zoeken waar je afbeelding over gaat, en laat schermlezers het beeld beschrijven aan visueel beperkte bezoekers.[2] Volg dit voorbeeld en verander de tekst binnen de aanhalingstekens:
    • Als de afbeelding niet belangrijk is voor de pagina-inhoud, neemt u het alt-attribuut zonder tekst op (alt = "").[3]
  7. 7 Sla uw wijzigingen op. Sla het HTML-bestand op uw website op. Ga naar de pagina die u zojuist hebt bewerkt of vernieuw de pagina als u deze al had geopend. Je zou nu je afbeelding moeten zien. Als het de verkeerde maat is of je bent er om een ​​andere reden niet gelukkig mee, ga dan door naar het volgende gedeelte.

Deel twee van twee:
Optionele aanpassingen

  1. 1 Wijzig de grootte van de afbeelding. Voor de beste resultaten, verklein de afbeelding met behulp van gratis bewerkingssoftware en upload de nieuwe versie. Het instellen van breedte en hoogte met HTML wordt de browser geïnstrueerd de afbeelding te verkleinen of uit te breiden, wat niet consistent kan zijn in browsers en (zelden) weergavemoeilijkheden kan veroorzaken.[4] Als u een snelle en bruikbare aanpassing wilt, gebruik dan dit formaat:
    • (Aantal pixels of meer telefoonvriendelijke CSS-pixels in HTML5.)[5][6]
    • of (Percentage dimensies van webpagina's, of percentage HTML-element dat de afbeelding bevat.)
    • Als u slechts één kenmerk (breedte of hoogte) invoert, moet de browser de verhouding width: height behouden.
  2. 2 Voeg een tooltip toe. De titel kenmerk kan worden gebruikt om een ​​extra opmerking of informatie over de afbeelding toe te voegen. U kunt hier bijvoorbeeld de artiest crediteren. In de meeste gevallen wordt deze tekst weergegeven wanneer de bezoeker de cursor over de afbeelding beweegt.
  3. 3 Maak er een link van. Als u een afbeelding wilt maken die ook een koppeling is, plaatst u de afbeeldingstag in de hyperlink-tag. Hier is een voorbeeld:

Voorbeeld HTML voor het invoegen van afbeeldingen

HTML-code voor het invoegen van afbeeldingen