Pozrite sa na každú webovú stránku online dnes a všimnete si, že zdieľajú určité spoločné veci. Jednou z týchto zdieľaných vlastností sú obrázky. Správne obrázky pridávajú do prezentácie webových stránok toľko. Niektoré z týchto obrázkov, ako logo spoločnosti, pomáhajú označiť lokalitu a pripojiť túto digitálnu entitu k vašej fyzickej spoločnosti.
Ak chcete do svojej webovej stránky pridať obrázok, ikonu alebo grafiku, musíte použiť značku v kóde HTML stránky. Vložíte značku IMG do kódu HTML presne tam, kde chcete, aby sa grafická reklama zobrazila. Webový prehliadač, ktorý vykresľuje kód stránky, nahradí túto značku príslušnou grafikou po zobrazení stránky. Vráťte sa späť na príklad nášho firemného loga, tu je, ako by ste mohli tento obrázok pridať na vašu stránku:
Atribúty obrázkov
Pri pohľade na vyššie uvedený kód HTML uvidíte, že prvok obsahuje dva atribúty. Každá z nich je potrebná pre obrázok.
Prvý atribút je "src". To je doslova obrazový súbor, ktorý chcete zobraziť na stránke. V našom príklade používame súbor s názvom "logo.png". Toto je grafika, ktorú by sa webový prehliadač zobrazil pri vykresľovaní stránky.
Tiež si všimnete, že pred týmto názvom súboru sme pridali niekoľko ďalších informácií, "/ images /". Toto je cesta k súboru. Počiatočná lomka označuje server, aby vyhľadal koreň adresára. Potom vyhľadá priečinok s názvom "obrázky" a nakoniec súbor s názvom "logo.png". Použitie priečinka s názvom "obrázky" na ukladanie všetkých grafov webových stránok je dosť bežnou praxou, ale vaša cesta k súboru bude zmenená na to, čo je pre váš web relevantné.
Druhým požadovaným atribútom je text "alt". Toto je "alternatívny text", ktorý sa zobrazí, ak sa obrázok z nejakého dôvodu nedá načítať. Tento text, ktorý v našom príklade číta "Logo spoločnosti", sa zobrazí, ak sa obrázok nedá načítať. Prečo by sa to mohlo stať? Z rôznych dôvodov:
- Nesprávna cesta k súboru
- Nesprávny názov súboru alebo nesprávne pravopis
- Chyba prenosu
- Súbor bol odstránený zo servera
Toto je len niekoľko možností, prečo nám chýba špecifikovaný obrázok. V takýchto prípadoch by sa namiesto toho zobrazil náš alt text.
Alt text používa aj softvér na čítanie obrazovky na čítanie obrazu návštevníkovi, ktorý je zrakovo postihnutý. Keďže nemôžu vidieť obrázok ako my, tento text im umožňuje vedieť, aký je samotný obraz. Z tohto dôvodu je potrebný ďalší text a prečo by mal jasne uviesť, aký je obraz!
Spoločné nedorozumenie alt textu spočíva v tom, že je určený na účely vyhľadávacieho nástroja. To nie je pravda. Zatiaľ čo Google a iné vyhľadávacie nástroje čítajú tento text na určenie toho, čo je obrázok (pamätajte si, že nemôžu "vidieť" ani obrázok), nemali by ste písať alt text, ktorý by sa odvolal iba na vyhľadávače. Autor jasné alt text, ktorý je určený pre ľudí. Ak môžete do značky pridať aj niektoré kľúčové slová, ktoré sa odvolávajú na vyhľadávače, to je v poriadku, ale vždy sa uistite, že alt text slúži svojmu primárnemu účelu tým, že ukáže, čo je to pre každého, kto nevidí grafický súbor.
Ďalšie atribúty
Značka IMG má tiež dva ďalšie atribúty, ktoré sa môžu zobraziť pri použití, keď na webovú stránku umiestnite grafiku - šírku a výšku. Napríklad, ak používate editor WYSIWYG, ako je Dreamweaver, automaticky pridá tieto informácie pre vás. Tu je príklad:
Atribúty WIDTH a HEIGHT informujú prehliadač o veľkosti obrázka. Prehliadač potom presne vie, koľko miesta v usporiadaní sa má prideliť a môže sa počas preberania obrázka presunúť na ďalší prvok na stránke. Problém s používaním týchto informácií vo vašom HTML je, že nie vždy chcete, aby sa váš obrázok zobrazoval v tejto presnej veľkosti. Ak napríklad máte citlivú webovú stránku, ktorej veľkosť sa mení podľa obrazovky návštevníkov a veľkosti zariadenia, budete tiež chcieť, aby vaše obrázky boli flexibilné. Ak vo svojom HTML uvediete, čo je pevná veľkosť, je pre vás veľmi ťažké nahradiť odpovede na mediálne dotazy CSS . Z tohto dôvodu a na zachovanie oddelenia štýlu (CSS) a štruktúry (HTML), odporúčame, aby ste do HTML kódu nepridávali atribúty šírky a výšky.
Jedna poznámka: Ak necháte tieto pokyny na dimenzovanie vypnuté a nešpecifikujete veľkosť v službe CSS, prehliadač zobrazí obrázok v predvolenej pôvodnej veľkosti.
Upravil Jeremy Girard