Pozri sa na hocičo webstránka online dnes a všimnete si, že zdieľajú určité spoločné veci. Jednou z tých zdieľaných vlastností sú obrázky. Správne obrázky toľko pridávajú k prezentácii na webe. Niektoré z týchto obrázkov, napríklad logo spoločnosti, pomáhajú značkovať stránky a spájať túto digitálnu entitu s vašou fyzickou spoločnosťou.
Ako pridať obrázok na webovú stránku pomocou HTML
Ak chcete na svoju webovú stránku pridať obrázok, ikonu alebo grafiku, musíte použiť značku v kóde HTML stránky. Umiestnite.
IMGznačka vo vašom. HTML presne tam, kde chcete grafiku zobraziť. Webový prehliadač, ktorý vykresľuje kód stránky, po zobrazení stránky nahradí túto značku príslušnou grafikou. Vráťme sa k príkladu loga našej spoločnosti a tu je príklad, ako môžete tento obrázok pridať na svoje stránky:
Atribút SRC
Pri pohľade na vyššie uvedený kód HTML uvidíte, že prvok obsahuje dva atribúty. Každý z nich je pre obrázok potrebný.
Prvý atribút je „src“. Toto 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 webový prehliadač zobrazil pri vykreslení stránky.
Tiež si všimnete, že pred tento názov súboru sme pridali niekoľko ďalších informácií „/ images /“. Toto je cesta k súboru. Počiatočná lomka hovorí serveru, aby sa pozrel do koreňového adresára adresára. Potom vyhľadá priečinok s názvom „images“ a nakoniec súbor s názvom „logo.png“. Používanie priečinka s názvom „obrázky“ na ukladanie všetkej grafiky webu je celkom bežný postup, ale cesta k súboru by sa zmenila na čokoľvek, čo je pre váš web relevantné.
Alt atribút
Druhým požadovaným atribútom je text „alt“. Toto je „alternatívny text“, ktorý sa zobrazí, ak sa z nejakého dôvodu nepodarí načítať obrázok. Tento text, ktorý v našom príklade znie „Logo spoločnosti“, by sa zobrazil, ak sa obrázok nepodarí načítať. Prečo by sa to stalo? Z rôznych dôvodov:
- Nesprávna cesta k súboru
- Nesprávny názov súboru alebo pravopisná chyba
- Chyba prenosu
- Súbor bol odstránený zo servera
Existuje iba niekoľko možností, prečo môže chýbať náš zadaný obrázok. V týchto prípadoch by sa namiesto toho zobrazil náš alternatívny text.
Na čo sa používa alternatívny text?
Alternatívny text softvér na čítanie obrazovky používa aj na „prečítanie“ obrázka návštevníkovi, ktorý je zrakovo postihnutý. Pretože nevidia obraz tak ako my, tento text im dáva vedieť, aký je samotný obraz. To je dôvod, prečo je potrebný alternatívny text a prečo by mal jasne uvádzať, aký je obrázok!
Častým nedorozumením alternatívneho textu je, že je určený na účely vyhľadávacieho nástroja. To nie je pravda. Zatiaľ čo Google a ďalšie vyhľadávacie nástroje tento text čítajú, aby určili, aký je obrázok (nezabudnite, nemôžu tiež "vidieť" váš obrázok), nemali by ste písať alternatívny text, aby ste sa odvolali iba na vyhľadávanie motorov. Vytvorte jasný alternatívny text určený pre ľudí. Ak môžete do značky pridať aj nejaké kľúčové slová, ktoré lákajú vyhľadávače, je to v poriadku, ale vždy to urobte alternatívny text slúži na svoj primárny účel tým, že uvádza, aký je obrázok pre každého, kto nevidí grafiku spis.
Ďalšie atribúty obrázka
The.
IMG.
Značka má tiež dva ďalšie atribúty, ktoré sa môžu zobraziť, keď umiestnite na svoju webovú stránku grafiku - šírku a výšku. Ak napríklad používate editor WYSIWYG, ako je Dreamweaver, automaticky vám tieto informácie pridá. Tu je príklad:
The.
ŠÍRKA.
a.
VÝŠKA.
atribúty informujú prehliadač o veľkosti obrázka. Prehliadač potom presne vie, koľko miesta v rozložení má prideliť, a počas sťahovania obrázka môže prejsť na ďalší prvok na stránke. Problém s použitím týchto informácií vo vašom HTML spočíva v tom, že nemusíte vždy chcieť, aby sa váš obrázok zobrazoval v presnej veľkosti. Napríklad ak máte a.
responzívny web
ktorých veľkosť sa mení na základe obrazovky pre návštevníkov a veľkosti zariadenia, budete tiež chcieť, aby boli vaše obrázky flexibilné. Ak vo svojom HTML uvediete, čo je pevná veľkosť, bude pre vás veľmi ťažké prepísať s responzívnou veľkosťou.
Dopyty médií CSS
. Z tohto dôvodu a v záujme zachovania oddelenia štýlu (CSS) a štruktúry (HTML) sa odporúča, aby ste do kódu HTML NEPRIDÁVALI atribúty šírka a výška.
Jedna poznámka: Ak tieto pokyny na zmenu veľkosti ponecháte vypnuté a nezadáte veľkosť v CSS, prehliadač aj tak zobrazí obrázok v predvolenej veľkosti.
Upravil Jeremy Girard