The HTML Značka IMG riadi vkladanie obrázkov a iných statických grafických objektov do webovej stránky. Táto spoločná značka podporuje niekoľko povinných a voliteľných atribútov, ktoré obohacujú vašu schopnosť navrhnúť pútavý web zameraný na obrázky.
Príklad plne vytvorenej značky HTML IMG vyzerá takto:
Požadované atribúty značiek IMG
src = "/ cesta / k / image.jpg"
Jediným atribútom, ktorý potrebujete na to, aby sa obrázok mohol zobraziť na webovej stránke, je src atribút. Tento atribút identifikuje názov a umiestnenie obrazového súboru, ktorý sa má zobraziť.
alt = "Popis obrázka"
Ak chcete napísať platné XHTML a HTML4, stlačte alt atribút je tiež povinný. Tento atribút sa používa na to, aby poskytoval nevizuálnym prehliadačom text, ktorý popisuje obrázok. Prehliadače zobrazujú alternatívny text rôznymi spôsobmi. Niektoré ho zobrazia ako vyskakovacie okno po umiestnení myši nad obrázok, iné ho zobrazia vo vlastnostiach po kliknutí pravým tlačidlom myši na obrázok a niektoré ho nezobrazia vôbec.
Použi alternatívny text na poskytnutie ďalších podrobností o obrázku, ktoré nie sú relevantné alebo dôležité pre text webovej stránky. Nezabudnite však, že v čítačkách obrazovky a iných prehľadávačoch iba na čítanie textu sa text bude čítať inline so zvyškom textu na stránke. Aby ste predišli nedorozumeniam, namiesto „loga“ používajte popisný alternatívny text, ktorý hovorí napríklad: „O webdizajne a HTML“.
The alt text je nevyhnutný aj pre SEO (optimalizácia pre vyhľadávače). Roboty, ktoré vyhľadávacie nástroje, ako napríklad Google, používajú na preskúmanie obsahu na webových stránkach, nemôžu „vidieť“ obrázky. Spoliehajú sa na alt text na určenie toho, čo sa na stránke nachádza.
V HTML5, alt atribút nie je vždy povinný, pretože môžete použiť a titulok pridať k tomu ďalší popis. Tento atribút môžete tiež použiť na označenie ID, ktoré obsahuje úplný popis:
aria-describedby = "Popis obrázka"
Alternatívny text sa tiež nevyžaduje, ak je obrázok čisto dekoratívny, napríklad obrázok v hornej časti webovej stránky alebo ikony. Ak si však nie ste istí, pre prípad uveďte alternatívny text.
Atribúty veľkosti
width = "500"a.
výška = "500"Podľa vášho návrhu môžete použiť. výška a. šírka
Spravidla budete chcieť, aby sa veľkosť obrázka nastavila v CSS. Častejšie to bude výsledkom rozmerov nadradeného kontajnera obrázka. Tento prístup umožňuje najväčšiu flexibilitu pri prispôsobovaní sa rôznym veľkostiam obrazovky. Stále však existujú prípady, kedy možno budete chcieť zadať rozmery obrázka ako atribúty HTML.
Ďalšie užitočné atribúty IMG
title = "Popisný názov obrázka"Atribút je globálny atribút, ktorý je možné použiť na akýkoľvek. Prvok HTML. Okrem toho. titul
Väčšina prehľadávačov podporuje titul atribút, ale robia to rôznymi spôsobmi. Niektoré zobrazujú text ako vyskakovacie okno, zatiaľ čo iné ho zobrazujú na informačných obrazovkách, keď používateľ klikne pravým tlačidlom myši na obrázok. Môžete použiť titul atribút napísať ďalšie informácie o obrázku, ale nepočítajte s tým, že tieto informácie budú buď skryté alebo viditeľné. Určite by ste to nemali používať na skrytie kľúčových slov pre vyhľadávače. Tento postup je teraz väčšinou vyhľadávacích nástrojov penalizovaný.
usemap = ""a.
ismap = ""Tieto dva atribúty nastavujú na strane klienta () a na strane servera (ISMAP). obrazové mapy
longdesc = "Podrobnejší popis vášho obrázka"The. longdesc
Zastarané a zastarané atribúty IMG
Niekoľko atribútov je dnes v HTML5 zastaraných alebo v HTML4 zastaraných. Pre najlepší HTML by ste mali namiesto použitia týchto atribútov nájsť iné riešenia.
border = "3"
align = "left"Tento atribút umožňuje umiestniť obrázok do textu a nechať text okolo neho prúdiť. Obrázok môžete zarovnať doprava alebo doľava. Zastarané v prospech. float CSS vlastnosť
hspcace = "10"a.
vspace = "10"The. hspace a. vspace atribúty pridať biele miesto vodorovne ( hspace) a zvisle ( vspace
lowsrc = "/ cesta / k / lowres.jpg"The. lowsrc atribút poskytuje alternatívny obrázok, keď je váš zdroj obrázka taký veľký, že sa sťahuje extrémne pomaly. Môžete mať napríklad obrázok s veľkosťou 500 kB, ktorý chcete zobraziť na svojej webovej stránke, ale stiahnutie 500 kB by trvalo dlho. Takže vytvoríte oveľa menšiu kópiu obrázka, možno čiernobielo alebo iba extrémne optimalizovanú, a vložíte ju do. lowsrc
The lowsrc bol do značky pridaný atribút Netscape Navigator 2.0. Bola súčasťou DOM úrovne 1, ale potom bola odstránená z DOM úrovne 2. Podpora prehľadávačov je pre tento atribút povrchná, aj keď mnohé weby tvrdia, že ju podporujú všetky moderné prehľadávače. Nie je zastaraná v HTML4 ani zastaraná v HTML5, pretože nikdy nebola oficiálnou súčasťou ani jednej zo špecifikácií.
Nepoužívajte tento atribút a radšej optimalizujte svoje obrázky tak, aby sa načítali rýchlo. Rýchlosť načítania stránky je rozhodujúcou súčasťou dobrého webového dizajnu a veľké obrázky enormne spomaľujú stránky - aj keď používate lowsrc atribút.