Užitočné tipy

HTML obrázky - cheat sheet pre začiatočníkov

Použitie sprievodných obrázkov v texte výrazne zlepšuje vnímanie informácií, ktoré poskytnete čitateľom. V HTML je značka na vkladanie obrázkov na stránku. A dnes sa bližšie pozrieme na to, ako používať túto značku, aké atribúty podporuje a odpovieme na niekoľko bežných otázok, ktoré kladú začiatočnícki webmasteri.

Vložte obrázok (obrázok) na stránku v HTML

Ako už bolo spomenuté, značka sa používa na vkladanie obrázkov na stránku. Má krátku podobu:

v XHTML. Ako vidíte z príkladu, na koniec sa pridá lomka (lomka).

To všetko znamená rýchle vloženie obrázka, ktorý neobsahuje žiadne atribúty, s výnimkou odkazu na súbor.

Táto značka (), na rozdiel od napríklad odkazu, sa nezatvára a je napísaná vo forme, ktorú som citoval vyššie. Odporúčaný atribút je „alt»:

ktorý sa zobrazuje v okamihu, keď sa obrázok nenačítal úplne alebo má prerušený (neexistujúci) odkaz.

A teraz má zmysel hovoriť o všetkých atribútoch, ktoré značka podporuje.

Zoznam existujúcich atribútov značky v HTML

Všetky atribúty obrázkov sú registrované medzerou. Ale v skutočnosti ich zoznam sám.

src - obsahuje odkaz na obrázok, môže to byť buď absolútny (odkaz na súbor, ktorý sa nachádza na inom webe), alebo relatívny (odkaz na súbor, ktorý sa nachádza na vašom webe). Platné formáty: JPEG (JPG), PNG, GIF, BMP, ICO, APNG, SVG a base64, Príklad použitia s absolútnou adresou obrázka:

Príklad použitia s relatívnou adresou obrázka:

alt - obsahuje text - nápoveda k obrázku, ktorý sa neobjaví / chýba. Príklad použitia:

zoradiť - nastavuje zarovnanie obrázka vzhľadom na susedný text (vytvára tok okolo obrázka s textom). Platné hodnoty: top, dno, prostredný, ľavý a doprava, Príklad použitia:

Atribút nie je podporovaný v HTML5.

hraničné - nastavuje šírku okraja (rámčeka) okolo obrázka. Platné hodnoty: px, % a ďalšie množstvá. Príklad použitia:

Atribút nie je podporovaný v HTML5.

výška - nastavuje výšku obrázka. Platné hodnoty: px, % a ďalšie množstvá. Príklad použitia:

šírka - nastaví šírku obrázka. Platné hodnoty: px, % a ďalšie množstvá. Príklad použitia:

hspace - nastavuje vodorovnú (ľavú a pravú) odsadenie obrázka. Platné hodnoty: px, % a ďalšie množstvá. Príklad použitia:

Atribút nie je podporovaný v HTML5.

vspace - nastavuje vertikálne (horné a dolné) odsadenie obrázka. Platné hodnoty: px, % a ďalšie množstvá. Príklad použitia:

Atribút nie je podporovaný v HTML5.

longdesc - obsahuje adresu pre popis rozšíreného obrázka. Platné hodnoty: Txt súbor, Adresa, rovnako ako atribút src, môže byť absolútna alebo relatívna. Príklad použitia:

crossorigin - atribút, ktorý vám umožňuje vložiť obrázok z iného webu prostredníctvom žiadosti naprieč doménami (CORS). Platné hodnoty: anonymný (anonymná žiadosť bez poverovacích údajov) a use-poverenia (žiadosť s prevodom poverovacích údajov). Príklad použitia:

Tento atribút je podporovaný iba v jazyku HTML5.

srcset - nastavuje zoznam súborov, ktoré sa zobrazia v závislosti od šírky alebo hustoty obrazovky. Platné hodnoty: nw (kde N je celé kladné celé číslo) a Kx (kde K je kladné desatinné číslo). Príklad použitia:

Atribút nie je podporovaný v zariadeniach Android a Internet Explorer.

veľkosti - nastavuje veľkosť obrázkov špecifikovaných v atribúte srcset. Platné hodnoty: Nex, NREM, nem, Nvmin, NCH, NVH, NVW, Nvmax, Nin, NQ, Nmm, npc, Ncm, NPT a NPXkde N je kladné číslo. Príklad použitia:

Princíp príkladu je nasledujúci: ak je rozlíšenie obrazovky menšie ako 600 px, potom nastavíme šírku obrázka na 300 px a naopak, ak je viac ako 600 px, upravíme šírku obrázka na 600 px.

Atribút, napríklad srcset, nie je podporovaný v prehliadačoch Android a Internet Explorer.

USEMAP - priradí obrázok k mape, ktorá je nastavená pomocou značky. Platné hodnoty: #NAME (kde name je hodnota atribútu name na mape) a ID (kde id je hodnota atribútu id karty). Príklad použitia:

Odkaz nemôžete vytvoriť, ak je karta () zabalená do odkazu () alebo do tlačidla ().

ismap - Priradí obrázok k určitej oblasti serverovej karty. Keď kliknete na taký obrázok, súradnice kliknutia z ľavého horného rohu prečítané a na požiadanie odoslané na adresu uvedenú v odkaze. Ak má atribút fungovať, musí byť obrázok zalomený do odkazu (). Príklad použitia:

Okrem toho podporuje globálne atribúty. trieda a ida tiež štýly priamo vkladania:

V prípade potreby možno väčšinu osobných atribútov nahradiť vhodnými štýlmi.

Ako urobiť obrázok (obrázok) odkazom v HTML?

Ak chcete, aby sa na váš obrázok dalo kliknúť, pridaním funkcie prejdite na inú stránku vášho (nielen) vášho webu, zabalte ho do značky :

Okrem toho, že odkaz môže viesť na inú stránku, môže ísť napríklad o kotvu. Týmto je náš tutoriál pre obrázky dokončený.

Stále máte otázky? Neváhajte a zverejnite ich v komentároch pod týmto článkom.

Ako vložiť obrázok do HTML?

Na vloženie obrázka do HTML stránky sa používa jedna jednoduchá značka:

kde xxx je adresa obrázka. V prípade, že je obrázok v rovnakom adresári ako stránka, bude značka vyzerať takto:

Vysokorýchlostný a stabilný prístup na internet sa však ešte nedostal do všetkých kútov sveta a stáva sa, že sa obrázok na webovej stránke jednoducho nenačíta. V takýchto prípadoch existuje pojem alternatívny text.

Zobrazuje sa na mieste obrázka v čase jeho neprístupnosti, načítania alebo v režime prehliadača „bez obrázkov“. Pridáva sa pomocou atribútu alt značky.

Príklad pridania alternatívneho textu do obrazového súboru:

Veľkosť obrázka HTML

Ak chcete zmeniť veľkosť zobrazenia obrazového súboru, použite značky výšky a šírky, pričom výška je výška a šírka je šírka, meraná v pixloch.

Pri použití týchto atribútov prehliadač najskôr pridelí priestor pre grafický obsah, pripraví všeobecné rozloženie stránky, zobrazí text a potom načíta samotný obrázok.

Obrázok je umiestnený v obdĺžniku s danými veľkosťami a v prípade, že parametre sú menšie alebo väčšie ako originál, je obraz roztiahnutý alebo komprimovaný.

Ak atribúty výšky a šírky nie sú použité, prehliadač načíta obrázok okamžite a oneskorí zobrazenie textu a ďalších prvkov stránky.

Tieto parametre je možné zadať v pixloch (veľkosť obrazu je konštantná a nezávisí od rozlíšenia obrazovky používateľa) alebo v percentách (veľkosť obrazu závisí od rozlíšenia obrazovky).

Je potrebné si uvedomiť, že v okamihu, keď zmeníte pôvodnú veľkosť obrázka, musíte zachovať jeho proporcie.

Stačí zadať hodnotu len jedného z parametrov (šírka alebo výška) a hodnota druhého sa vypočíta automaticky.

Rozloženie obrázka HTML

Ako u mnohých značiek HTML,

Odkaz na obrázok

V HTML vytvorte odkaz pomocou značky:

Ak chcete nastaviť grafický odkaz, stačí kombinovať značku obrázka so značkou odkazu.

Toto sa vykonáva takto:

Ako vidíte, grafická vložka môže byť odkazom a presmerovaním na ľubovoľnú adresu zaznamenanú v plnej alebo skrátenej verzii po kliknutí.

Ako môžem urobiť obrázok na pozadí v HTML?

Obrázok môže byť vložený nielen na stránku ako viditeľný objekt, ale môže byť tiež nastavený ako pozadie. Ak chcete definovať obrázok ako pozadie, je potrebné v značke špecifikovať atribút background = ”xxx”, kde xxx je adresa obrázka špecifikovaná rovnakým spôsobom ako v príkladoch vyššie.

Napríklad nastavíme taký textúrový obrázok ako obrázok na pozadí:

Tieto informácie o značkách a atribútoch potrebných na vloženie obrázka na stránku HTML lokality boli vyčerpané.