Benotz den HTML IMG Tag fir Fotoen an Objeten
De HTML-IMG-Tag regéiert d'Insertion vu Biller an aner statesch grafesch Objeten innerhalb vun enger Websäit. Dëse gemeinsame Tag ënnerstëtzt méi obligatoresch a fakultativ Attribute, déi de Reichtum fir Är Fäegkeete bidden eng engagéiert, bildgestützte Websäit ze schafen.
E Beispill fir e komplett gegrënnte HTML-IMG Tag ka kucken:
Required IMG Tag Attributiounen
SRC. Déi eenzeg Attribut déi Dir braucht fir e Bild ze kréien fir op enger Websäit ze gesinn, ass den SRC Attribut. Dëst Attribut identifizéiert den Numm an de Standort vun der Imagedatei ugewisen.
ALT. Fir gülteg XHTML an HTML4 ze schreiwen, ass d'ALT-Attribut och erfuerderlech. Dëst Attribut ass benotzt fir ongewise Browsere mat Text ze beschreiwen, deen d'Bild beschreift. Browsers weisen den alternativen Text op verschidden Aart. E puer weisen et als Pop-up op, wann Dir Är Maus iwwer d'Bild stellt, anerer weisen se als Eegeschafte beim Klick op d'Bild an e puer Biller op kee Fall.
Den Alttext benotze fir méi Detailer iwwer d'Bild ze kréien, déi net relevant sinn oder wichteg sinn am Text vun der Websäit. Mä denk drun, datt an Écranë Lieser an aner Texter nëmme Browsers, gëtt de Text liesen an den Rescht vum Text op der Säit. Fir ze vermeiden, benotze Beschreiwung alt Text, deen (zum Beispill), "Iwwert Webdesign an HTML" anstatt nëmmen "Logo".
HTML5 ass den ALT-Attribut net ëmmer néideg, well Dir kënnt eng Beschreiwung benotzen fir méi Beschreiwung ze addéieren. Dir kënnt och d'Attribut ARIA-DESCRIBEDBY benotze fir eng Identifikatioun ze identifizéieren déi eng komplett Beschreiwung enthält.
Alt Text ass och net néideg, wann d'Bild rein dekorativ ass, wéi eng Grafik am Top vun enger Websäit oder Symboler. Awer wann Dir net sécher sidd, gitt alt Text just am Fall.
Recommandéiert IMG Attributiounen
BESCHWEIS an HEIT . Dir sollt an d'Gewunnechkeet kommen ëmmer mat der WIDTH an HEIGHT Attribute. An Dir sollt ëmmer d'Realimmkeet benotzen an Äert Bild net mat dem Browser änneren.
Dës Attributer beschleunegen d'Rendering vun der Säit, well de Browser kann Plaz am Design fir den Image zéien, an dann weider den Rescht vum Inhalt erofzelueden, anstatt op de ganze Bild um Download ze waarden.
Aner Useful IMG Attributes
TITEL . Den Attribut ass e globale Attribut dee ka mat engem HTML Element applizéiert ginn. Zousätzlech ass den TITLE-Attribut datt Dir extra Informatiounen iwwer d'Bild kënnt.
Déi meescht Browser benotzen den TITLE-Attribut, awer se maachen et op verschidde Weeër. E puer weisen den Text als Popup aus, während anerer et an Informatiounsbildschirmer weisen, wann de Benotzer klickt op d'Bild. Dir kënnt den TITLE-Attribut benotze fir méi Informatiounen iwwer dem Bild ze schreiwe, awer zielen net op dës Informatioun ze verstoppen oder ze gesinn. Dir sollt definitiv net dat benotzen fir Schlësselwieder fir Sichmaschinn ze verstecken. Dës Praxis ass elo vun de meeschte Sichmaschinn bestrooft ginn.
USEMAP an ISMAP . Dës zwee Attribter setzen Client Clienten () an Serverseiten (ISMAP) Imagekaarten fir Är Biller.
LONGDESC . Den Attribut ënnerstëtzt d'URLen op eng méi laang Beschreiwung vum Bild. Dës Fonktioun mécht Är Biller méi zougänglech.
Deprecated an Obsolete IMG Attributen
E puer Attribter sinn elo op HTML5 oder ginn an HTML4 verginn. Fir bescht HTML kënnt Dir aner Léisungen fannen anstatt déi Attributer ze benotzen.
BORDER . D'Attribut definéiert d'Breet vun Pixelen vun enger Grenz ëm de Bild. Et gouf fir CSS an HTML4 vergewëssert an ass an HTML5 verännert.
ALIGN . Dëst Attribut erlaabt Iech e Bild an den Text ze setzen an den Text fléien ronderëm. Dir kënnt e Bild op der richteger oder lénkser Säit richten. Et ass fir d'Float CSS Eegeschafte an HTML4 verschwonnen an ass an HTML5 verännert.
HSPACE a VSPACE . De HSPACE a VSPACE Attributë addéieren White Space Horizontal (HSPACE) a vertikal (VSPACE). De wäisse Raum gëtt op zwou Säiten vun der Grafik (Top a Bottom oder lénks a riets) hinzugefügt. Wann Dir just Plaz op enger Säit braucht, musst Dir CSS benotzen. Dës Attributer sinn an HTML4 verschwonnen fir d'margin CSS-Eigenschaft, a si sinn am HTML5 verännert.
LOWSRC . Den LOWSRC Attribut bidd en alternativ Bild, wann Är Bildquell sou grouss ass datt se extrem lues extrem ze liesen. Zum Beispill, Dir hutt e Bild, dat ass 500KB, deen Dir op Är Websäit affichéiert wëllt, awer 500KB dauernd laang ze downloaden. Dir erliewt eng vill méi kleng Kopie vum Bild, vläicht schwaarz a wäiss oder einfach extrem optimiséiert, a gitt dat am LOWSRC Attribut. De klengen Bild gëtt automatesch erofgelooss an ugewisen an dann a wann de méi grouss Bild do steet, ersetzt d'Tiefstoun.
De LOWSRC Attribut ass op Netscape Navigator 2.0 op den IMG Tag addéieren. Et war Deel vun DOM Niveau 1, awer huet dann vun DOM Niveau 2 ofgeschaaft. 2. Browser-Support ass Sketchy fir dësen Attribut, obwuel vill Siten behaapten datt et vun all modernen Browser ënnerstëtzt gëtt. Et ass net an HTML4 verschwonnen oder HTML5 ze halen, well et ni offiziell Deel vun der Spezifikatioun war.
Vermeit dës Attribut benotze an stattdessen Äert Bild optiméieren fir datt se séier liesen. D'Geschwindegkeet vun de Säitenlësst ass e kriteschen Deel vu guddem Webdesign, a grouss Biller sinn langsam Säite ronn enorm - och wann Dir de LOWSRC Attribut benotzt.