Uw websites verfraaien door afbeeldingen toe te voegen. U kunt afbeeldingen invoegen in HTML-bestanden met behulp van de tag, die kunt u de locatie opgeven van de afbeelding op het Internet, de hoogte en breedte van de afbeelding en alternatieve tekst die als de afbeelding verschijnt niet laden of als iemand een schermlezer gebruikt om de pagina te bekijken. Drie gemeenschappelijke afbeeldingsbestandstypen gebruikt op het Web zijn GIF, PNG en JPEG.
Stap 1
Open het HTML-bestand voor de webpagina die u wilt toevoegen van een afbeelding in een teksteditor zoals Kladblok of Web development software.
Stap 2
Voeg een tag naar het bestand. Plaats de label na het element dat u een afbeelding weergeven wilt onder wanneer het HTML-bestand wordt geopend in een browser. De tag hoeft niet een aparte afsluitende tag. Binnen de tag, moet u opgeven de bron van de afbeelding die u weergeven wilt door het intikken van de locatie van de afbeelding op het internet met het kenmerk src . Als de afbeelding is opgeslagen in dezelfde map als het HTML-bestand, typt u de naam en de extensie van de afbeelding. Als de afbeelding is die elders is opgeslagen, typt u de volledige URL van de afbeelding.
Stap 3
Voeg het alt -kenmerk toe aan uw label. In HTML5 is het alt-attribuut vereist. Gebruik dit kenmerk om te beschrijven van de afbeelding in het geval dat het niet laden. Als een afbeelding niet kunt laden, wordt in de browser de tekst die u na het alt-attribuut invoert weergegeven. Bovendien, is het alt-attribuut belangrijk voor de software van de lezer scherm gebruikt door mensen met een visuele handicap. De software leest de tekst in de alt attribute, zodat de persoon met een visuele handicap bekijken van uw website wat er op de foto horen kan, hoewel ze niet kunnen zien.
Stap 4
Geef de afmetingen van de afbeelding in pixels met de kenmerken van de hoogte en breedte . Als u niet dat de afmetingen opgeeft, weet de browser niet hoeveel ruimte te laten voor de afbeelding als de pagina laadt. Dit resulteert in een pagina laden choppily, aangezien de tekst eerst laadt, verlaten van een kleine ruimte voor de afbeelding, dan springt uit elkaar, zoals de afbeelding laadt en zorgt ervoor dat de ruimte uit te breiden. Met de afmetingen die opgegeven, laat de browser precies de juiste hoeveelheid ruimte tussen de andere elementen op de pagina voor de afbeelding in te vullen wanneer het laden is voltooid.
Stap 5
Testen van uw code om er zeker van dat de afbeelding wordt weergegeven in de juiste locatie door uw HTML-bestand te openen in een browser.
Tips & waarschuwingen
- Gebruik CSS om een afbeelding aan de linker- of rechterkant van het scherm verplaatsen of de tekstomloop eromheen hebben. U kunt bijvoorbeeld stijl = "float: left;" of stijl = "float: rechts;" binnen de label.
- Als u zowel de hoogte en de breedte van een afbeelding niet weet, is het fijn om gewoon gebruik maken van de hoogte of de breedte kenmerk alleen. U kunt ook CSS om op te geven van de hoogte en breedte; bijvoorbeeld, met een afbeelding van 100 x 100 pixels, gebruik het kenmerk style: stijl = "hoogte: 100px; breedte: 100px."
- Maak de afbeelding in een klikbare link door het plaatsen van de -tag in een "href" tag-paar. Bijvoorbeeld, als u wilt dat een afbeelding link naar Facebook, typt u het volgende.
- Gebruik het alt-attribuut niet te willen verhogen van uw pagina's SEO. Zoekmachines reeds lang bewust ben dat sommige webontwerpers proberen om spullen van het alt-attribuut met extra zoekwoorden, en dus ze de tekst in het alt-attribuut negeren.