Hoe kan ik een afbeelding met HTML invoegen

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.

Gerelateerde Artikelen

Hoe kan ik een keuzelijst met invoervak invoegen in OpenOffice Writer

Hoe kan ik een keuzelijst met invoervak invoegen in OpenOffice Writer

Naast de typen rapporten of documenten, OpenOffice Writer, het tekstverwerkingsprogramma voor OpenOffice.org, u kunt formulieren maken die u aan lezers distribueren kunt. Formulieren hebben een verscheidenheid van Taakspecifieke opties: tekstvelden,
Hoe kan ik een watermerk met Fireworks invoegen

Hoe kan ik een watermerk met Fireworks invoegen

Het Internet heeft gemaakt beelden gemakkelijk te vinden, te delen en te hergebruiken. Helaas, worden afbeeldingen soms gebruikt zonder toestemming in webpagina's, e-mails en social networking sites. Toevoegen van een watermerk aan uw afbeelding maak
Hoe kan ik een kop met kolommen invoegen in Microsoft Word

Hoe kan ik een kop met kolommen invoegen in Microsoft Word

Een standaard, eenvoudige koptekst heeft slechts één sectie, en u de normale kolommen-functie niet gebruiken voor het toevoegen van kolommen aan een koptekst. In plaats daarvan, echter, kunt u een ingebouwde koptekst die wordt geleverd met drie kolom
Hoe maak je een Forum met HTML

Hoe maak je een Forum met HTML

Een forum is een sleutelelement om de exploitatie van een website. In feite, bestaan sommige websites uit een forum en niets anders. Deze forums zijn populair omdat u uw bezoekers een stem op uw website geven, zodat ze kunnen hun gedachten en ideeën
Hoe maak je een afbeelding met hyperlinks met behulp van Photoshop

Hoe maak je een afbeelding met hyperlinks met behulp van Photoshop

Wanneer u op een gedeelte van de afbeelding van een website en uw browser naar een andere webpagina springt, is een afbeelding met hyperlinks waarschijnlijk verantwoordelijk voor die actie. Ontwerpers van sites kunnen het schrijven van HTML-code waar
Hoe kan ik een foto met een gedicht Overlay?

Hoe kan ik een foto met een gedicht Overlay?

Overlappend met een afbeelding met de tekst van een gedicht is gemakkelijk te doen met de moderne computersoftware. Open de foto in een foto-editor, stel deze omhoog van de manier waarop u het wilt en vervolgens gebruiken de editor's tekst toe te voe
Hoe kan ik een watermerk in Word invoegen

Hoe kan ik een watermerk in Word invoegen

Microsoft Word maakt het gemakkelijk om toe te voegen watermerk aan een document. Een watermerk is een flauw afbeelding die wordt weergegeven achter de tekst. Bijvoorbeeld de achtergrond mogelijk een bedrijfslogo of formulering zoals "Concept" o
Kan ik een afbeelding met meerdere webkoppelingen insluiten in Outlook?

Kan ik een afbeelding met meerdere webkoppelingen insluiten in Outlook?

Een afbeelding met meerdere weblinks in uw e-mailbericht van Microsoft Outlook met Outlook de ingebouwde tools insluiten. In plaats van koppelen van afbeeldingen, afbeeldingen insluiten in de hoofdtekst van uw e-mailadres en vervolgens het invoegen v
Hoe maak je een afbeelding met een transparante achtergrond in verf

Hoe maak je een afbeelding met een transparante achtergrond in verf

Veel beeldformaten gebruikt op websites hebben transparante achtergrond dat hetgeen achter hen zichtbaar is. Transparante afbeeldingen maken met native Microsoft-hulpprogramma's, kan echter moeilijk. In plaats daarvan het gebruik van vrije softwareop
Het verplaatsen van tekst rond een afbeelding met HTML of CSS

Het verplaatsen van tekst rond een afbeelding met HTML of CSS

Als u een afbeelding met de tekst op uw webpagina opneemt, wordt de afbeelding boven of onder de omringende inhoud, waardoor de witruimte links en rechts van de afbeelding in de standaardstijl weergegeven. Hiermee verspilt u ruimte en zorgt ervoor da
Hoe kan ik tekst aan een afbeelding Via HTML invoegen

Hoe kan ik tekst aan een afbeelding Via HTML invoegen

U hoeft niet noodzakelijkerwijs Photoshop om het bijschrift van al uw vakantie foto's op het web. Met HTML, worden bijschriften geschreven recht op de top van de foto's zelf. U kunt de tekst wijzigen wanneer u wilt. Een ander voordeel is dat u de fot
Hoe kan ik een Logo met een Hyperlink invoegen in een Hotmail-handtekening

Hoe kan ik een Logo met een Hyperlink invoegen in een Hotmail-handtekening

E-mailhandtekeningen zijn een nuttige en handige manier om uzelf en uw bedrijf. De handtekening ruimte vaak mensen gebruiken hun contact informatie, naam en werk titel toevoegen. Omdat Hotmail ondersteunt HTML- en RTF-opmaak, zijn u echter niet beper
Hoe kan ik een afbeelding invoegen in Adobe Acrobat Pro

Hoe kan ik een afbeelding invoegen in Adobe Acrobat Pro

Adobe Acrobat Pro XI biedt drie methoden voor het invoegen van afbeeldingen, afhankelijk van uw behoeften. De meest voorkomende gebruik is het toevoegen van afbeeldingen als de inhoud in een PDF. U kunt ook afbeeldingen van Klembord plakken als opmer
Hoe kan ik een afbeelding invoegen in PageMaker 7

Hoe kan ik een afbeelding invoegen in PageMaker 7

Adobe PageMaker 7 is een desktop publishing-programma ontworpen om voor het eenvoudig creëren van publicaties zoals brochures en nieuwsbrieven. De software wordt geleverd met veel vooraf geladen aanpasbare sjablonen en u kunt ook een leeg project. De