Inhoud

• Stappen
• Tips
• Waarschuwingen

Het toevoegen van afbeeldingen aan een website of social media-profiel is een uitstekende manier om het visuele aspect van de pagina te verbeteren. De HTML-code (Hypertext Markup Language) voor het toevoegen van afbeeldingen is vrij eenvoudig en is meestal de eerste die een HTML-student leert.

Stappen

Deel 1 van 2: De afbeelding invoegen

1. 

   Stuur de afbeelding. Momenteel zijn er verschillende gratis hostingservices voor afbeeldingen, zoals Picasa Webalbums, Imgur, Flickr of Photobucket. Lees de gebruiksvoorwaarden van elk zorgvuldig. Sommige van deze services kunnen de kwaliteit van de verzonden afbeelding verminderen of deze verwijderen nadat deze een bepaald aantal weergaven heeft bereikt (dit komt omdat de afbeeldingen ruimte innemen op de servers van deze bedrijven).
   • Bij sommige bloghostingservices kan de gebruiker afbeeldingen uploaden met behulp van zijn eigen blogbeheertools.
   • Als u geabonneerd bent op een betaalde hostingservice, uploadt u de afbeeldingen naar uw eigen website met behulp van een FTP-service (File Transfer Protocol). Het wordt aanbevolen om een ​​map "afbeeldingen" te maken om uw bestanden georganiseerd te houden.
   • Als je een afbeelding van een andere site wilt gebruiken, vraag dan de maker om toestemming. Als de bestelling wordt toegekend, download en upload dan de afbeelding naar een hostingsite voor afbeeldingen.

2. 

   
   
   Open je HTML-bestand. Open het HTML-document dat overeenkomt met de webpagina waarop de afbeelding zal worden weergegeven.
   • Als het uw bedoeling is om een ​​afbeelding in een forum in te voegen, typt u de code rechtstreeks in uw bericht. Verschillende internetfora gebruiken een systeem op maat in plaats van HTML. Als dat niet werkt, vraag dan andere gebruikers om hulp.

3. 

   
   
   Begin met de IMG-tag. Zoek de locatie in de hoofdtekst van het HTML-bestand waar u een afbeelding wilt invoegen. Schrijf de tag ​Dit is een lege tag, dat wil zeggen, hij heeft geen afsluitende tag. Alles wat nodig is om een ​​afbeelding weer te geven, moet tussen de twee vierkante haken staan.

4. 

   
   
   Zoek het URL-adres voor uw afbeelding. Bezoek de website waar u de afbeelding heeft gehost. Klik met de rechtermuisknop op de afbeelding (houd op de Mac de Control-toets ingedrukt en klik met de muis) en selecteer "Afbeeldingsadres kopiëren". Klik desgewenst op "Afbeelding bekijken" om deze alleen op een pagina te openen en kopieer de URL in de adresbalk.
   • Als je de afbeelding hebt geüpload naar de afbeeldingenmap op je eigen website, link er dan als volgt naar / images /naamvandebestandhier​Als het niet werkt, bevindt de afbeeldingsmap zich waarschijnlijk in een andere map. Verplaats het naar de hoofdmap.

5. 

   Plaats het URL-adres in het SRC-kenmerk. U weet waarschijnlijk al dat HTML-attributen in tags worden geplaatst om deze te wijzigen. Het attribuut SRC betekent "bron", en hij is het die de browser vertelt waar hij moet zoeken om de afbeelding te vinden. Typ src = "" en plak het URL-adres van de afbeelding tussen de aanhalingstekens. Hier is een voorbeeld:
   • 

6. 

   Voeg een ALT-kenmerk toe. Technisch gezien heeft HTML alles wat je nodig hebt om een ​​afbeelding weer te geven. Het is echter beter om het attribuut toe te voegen alt ook. Het vertelt de internetbrowser de tekst die wordt weergegeven wanneer de afbeelding niet kan worden geladen. Het belangrijkste is dat het zoekmachines helpt om grofweg de inhoud van uw afbeelding te ontdekken, zodat schermlezers de afbeelding kunnen beschrijven aan visueel gehandicapte bezoekers. Volg het onderstaande voorbeeld en verander de tekst tussen de aanhalingstekens:
   • 
   • Als de afbeelding niet belangrijk is voor de inhoud van de pagina, voeg dan het ALT-attribuut toe zonder tekst erin (alt = "").

7. 

   Wijzigingen opslaan. Sla het HTML-bestand van de website op. Ga naar de pagina die u zojuist hebt bewerkt of werk deze bij, als deze al open is. De afbeelding moet worden weergegeven. Als het de verkeerde maat heeft of een ander probleem heeft, ga dan verder met de volgende sectie.

Deel 2 van 2: Optionele instellingen

1. 

   Wijzig de afbeeldingsgrootte. Gebruik voor het beste resultaat beeldbewerkingssoftware om de grootte te wijzigen en upload vervolgens de nieuwe versie. Definieer de attributen breedte (breedte) en hoogte (hoogte) van de HTML zodat de browser de afbeelding verkleint of vergroot, wat in veel internetbrowsers inconsistent kan zijn en zelfs weergavefouten kan veroorzaken (zelden). Als u een snelle en functionele aanpassing wilt maken, gebruikt u het volgende formaat:
   • (Aantal pixels of "CSS-pixels" in HTML5.)
   • Of (Percentage van de grootte van de webpagina of afbeelding.)
   • Als u slechts één van de twee attributen (breedte of hoogte) invoert, moet de browser de breedte: hoogte-verhouding behouden.

2. 

   Voeg een tooltip toe. U kunt het attribuut gebruiken titel (titel) om een ​​extra opmerking of informatie over de afbeelding toe te voegen. U kunt het bijvoorbeeld gebruiken om de auteur van de foto te vermelden. Deze tekst wordt meestal weergegeven wanneer een bezoeker met de muis over de afbeelding beweegt.
   • 

3. 

   Maak een link in de afbeelding. Om van de afbeelding ook een link te maken, plaatst u de afbeeldingscode in de link-tag ​Hier is een voorbeeld:

Tips

• Vergeet niet om de afbeeldingsextensie (.webp, .gif, enz.) In de URL op te nemen.
• GIF-afbeeldingen werken goed voor logo's of tekenfilms; JPEG-afbeeldingen werken goed voor complexe afbeeldingen, zoals foto's.
• In de meeste gevallen is het raadzaam om afbeeldingen te gebruiken met de formaten.gif, .jpeg, .webp of.png. Andere formaten worden waarschijnlijk niet correct weergegeven in alle browsers.
• Bewaar een reservekopie van de afbeelding op uw computer, voor het geval dat.

Waarschuwingen

• Gebruik geen afbeeldingen door de website-URL van iemand anders in te voeren. Dit verbruikt de internetbandbreedte van die persoon zonder bezoeken aan hun website te genereren. Behalve dat het onethisch is, zal het beeld verdwijnen als haar oorspronkelijke website uitvalt. Als de auteur van de pagina erachter komt, kan hij zelfs de afbeelding op uw website wijzigen.