Huvud webbdesign & dev HTML IMG-taggattribut
webbdesign & dev

HTML IMG-taggattribut

HTML IMG-taggattribut
Anonim

Användning av HTML IMG-taggen för bilder och objekt

  • html
  • CSS
  • avJennifer Kyrnin

    En publicerad författare med omfattande skapande och hantering av webbplatser.

    HTML IMG-taggen reglerar införandet av bilder och andra statiska grafiska objekt på en webbsida. Den här vanliga taggen stöder flera obligatoriska och valfria attribut som ger dig möjlighet att utforma en engagerande, bildfokuserad webbplats

    Ett exempel på en fullt formad HTML IMG-tagg ser ut så här:

    Obligatoriska IMG-taggattribut

    SRC.

    Det enda attributet du behöver för att få en bild att visas på en webbsida är SRC-attributet. Detta attribut identifierar namnet och platsen för den bildfil som ska visas.

    ALT.

    För att skriva giltigt XHTML och HTML4 krävs också ALT-attributet. Detta attribut används för att förse icke-visuella webbläsare med text som beskriver bilden. Webbläsare visar alternativ text på olika sätt. Vissa visar den som ett popup-fönster när du lägger musen över bilden, andra visar den i egenskaper när du högerklickar på bilden, och andra visar den inte alls.

    Använd alt-texten för att ge ytterligare detaljer om bilden som inte är relevanta eller viktiga för webbsidan. Men kom ihåg att i skärmläsare och andra webbläsare som bara är text kommer texten att läsas i linje med resten av texten på sidan. För att undvika förvirring använder du beskrivande alttext som säger (till exempel), "Om webbdesign och HTML" istället för bara "logotyp."

    I HTML5 krävs inte alltid ALT-attributet, eftersom du kan använda en bildtext för att lägga till mer beskrivning till det. Du kan också använda detta attribut för att ange ett ID som innehåller en fullständig beskrivning:

    ARIA-DESCRIBEDBY

    Alt-text krävs inte heller om bilden är rent dekorativ, till exempel en bild högst upp på en webbsida eller ikoner. Men om du inte är säker, inkludera alt-text bara för fall.

    Rekommenderade IMG-attribut

    BREDD och

    HÖJD Du bör gå in i vanan att alltid använda WIDTH och HEIGHT-attributen. Och du bör alltid använda den verkliga storleken och inte ändra storlek på dina bilder med webbläsaren.

    Dessa attribut påskyndar återgivningen av sidan eftersom webbläsaren kan tilldela utrymme i designen för bilden och sedan fortsätta att ladda ner resten av innehållet i stället för att vänta på att hela bilden ska laddas ner.

    Andra användbara IMG-attribut

    TITEL Attributet är ett globalt attribut som kan tillämpas på alla HTML-element. Dessutom låter TITLE-attributet du lägga till extra information om bilden.

    De flesta webbläsare stöder TITLE-attributet, men de gör det på olika sätt. Vissa visar texten som ett popup-fönster medan andra visar den på informationsskärmar när användaren högerklickar på bilden. Du kan använda TITLE-attributet för att skriva ytterligare information om bilden, men räknar inte med att denna information varken är dold eller synlig. Du bör definitivt inte använda detta för att dölja nyckelord för sökmotorer. Denna praxis straffas nu av de flesta sökmotorer.

    USEMAP och

    ISMAP Dessa två attribut ställer in bildkarta från klientsidan () och serversidan (ISMAP) till dina bilder.

    longdesc LONGDESC-attributet stöder URL: er till en längre beskrivning av bilden. Den här funktionen gör dina bilder mer tillgängliga.

    Avskrivna och föråldrade IMG-attribut

    Flera attribut är nu föråldrade i HTML5 eller skrivs ut i HTML4. För bästa HTML bör du hitta andra lösningar istället för att använda dessa attribut.

    GRÄNS Attributet definierar bredden i pixlar för alla gränser runt bilden. Det har avskrivits till förmån för CSS i HTML4 och är föråldrat i HTML5.

    JUSTERA Detta attribut låter dig placera en bild i texten och få texten att flyta runt den. Du kan justera en bild till höger eller vänster. Den har avskrivits till förmån för den flytande CSS-egenskapen i HTML4 och är föråldrad i HTML5.

    hspace och

    vspace HSPACE- och VSPACE-attributen lägger till vitrum horisontellt (HSPACE) och vertikalt (VSPACE). Vitt utrymme läggs till på båda sidorna av grafiken (övre och nedre eller vänster och höger), så om du bara behöver utrymme på ena sidan bör du använda CSS. Dessa attribut har tagits bort i HTML4 till förmån för CSS-egenskapen för marginalen och de är föråldrade i HTML5.

    LOWSRC LOWSRC-attributet ger en alternativ bild när din bildkälla är så stor att den laddas ner extremt långsamt. Till exempel kan du ha en bild som är 500KB som du vill visa på din webbsida, men 500KB skulle ta lång tid att ladda ner. Så du skapar en mycket mindre kopia av bilden, kanske i svartvitt eller bara extremt optimerad, och lägger det i LOWSRCattribute. Den mindre bilden laddas ner och visas först, och sedan när den större bilden visas ersätter den den med låg källa.

    LOWSRC-attributet lades till Netscape Navigator 2.0 till IMG-taggen. Det var en del av DOM-nivå 1 men togs sedan bort från DOM-nivå 2. Webbläsarsupport har varit skissartat för detta attribut, även om många webbplatser hävdar att det stöds av alla moderna webbläsare. Det avskrivs inte i HTML4 eller föråldrad i HTML5 eftersom det aldrig var en officiell del av någon av specifikationerna.

    Undvik att använda detta attribut och optimera istället dina bilder så att de laddas snabbt. Hastigheten för sidladdning är en kritisk del av bra webbdesign, och stora bilder saknar sidor enormt - även om du använder LOWSRC-attributet.