Medzi voliteľné atribúty značky img patria: HTML tagy na vkladanie obrázkov, obrázkov do HTML

Tag IMG určené na zobrazovanie obrázkov na webovej stránke v grafickej podobe vo formáte GIF, JPEG alebo PNG. Táto značka má jeden povinný parameter src , ktorý určuje adresu súboru obrázka. V prípade potreby môže byť kresba prepojená s iným súborom umiestnením značky IMG do kontajnera A. Zároveň sa okolo obrázka zobrazí okraj, ktorý je možné odstrániť pridaním parametra border=0 do značky IMG.

Obrázky možno použiť aj ako obrázkové mapy, kde obrázok obsahuje aktívne body, ktoré fungujú ako odkazy. Taká mapa vzhľad sa nelíši od bežného obrázku, no zároveň sa dá rozdeliť na neviditeľné zóny rôznych tvarov, kde každá z oblastí slúži ako spojnica.

Syntax

Záverečná značka
Nevyžaduje sa.

Možnosti
zarovnať – určuje, ako bude obrázok zarovnaný pozdĺž okraja a ako sa bude text obtekať.
alt - alternatívny text pre obrázok.
border - hrúbka rámu okolo obrázka.
výška - výška obrazu.
hspace - horizontálny priestor od obrázka k okolitému obsahu.
ismap – informuje prehliadač, že obrázok je obrázkovou mapou na strane servera.
lowsrc - cesta ku grafickému súboru s nízkym rozlíšením na predbežné zobrazenie.
src - cesta ku grafickému súboru.
vspace - vertikálny priestor od obrázka k okolitému obsahu.
šírka - šírka obrázka.
usemap - odkaz na značku MAP obsahujúcu súradnice pre obrazovú mapu klienta.

Príklad 1: Použitie značky IMG

Lorem ipsum dolor sit amet...

Popis parametrov tagu IMG

Parameter ALIGN

Popis
Pre obrázky môžete určiť ich polohu vzhľadom na text alebo iné obrázky na webovej stránke. Spôsob zarovnania obrázkov určuje parameter zarovnania značky IMG.

Syntax

Argumenty
Tabuľka 1 uvádza možné hodnoty parametra zarovnania a výsledok jeho použitia.

Najobľúbenejšie možnosti sú vľavo a vpravo , ktoré vytvárajú obtekanie textu okolo obrázka. Aby text tesne nepriliehal k obrázku, odporúča sa pridať do značky IMG parametre hspace a vspace, ktoré určujú vzdialenosť k textu v pixeloch.

Hoci prehliadače podporujú všetky hodnoty parametra align, argumenty absbottom , absmiddle , baseline a texttop nie sú opísané v špecifikácii HTML 4.

Predvolená hodnota
dno

Príklad 2: Zarovnanie obrázka

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

parameter ALT

Popis
Parameter alt nastavuje alternatívny text pre obrázky. Tento text vám umožňuje získať textové informácie o kresbe, keď je v prehliadači zakázané načítanie obrázkov. Keďže obrázky sa načítavajú po tom, čo prehliadač o nich dostane informácie, náhradný text obrázka sa zobrazí skôr. A ako sa načítava, text bude nahradený obrázkom.

Prehliadače tiež zobrazujú alternatívny text ako popis, keď umiestnite kurzor myši na obrázok.

Syntax

Argumenty
Akýkoľvek vhodný textový reťazec. Musí byť uzavretý v dvojitých alebo jednoduchých úvodzovkách.

Predvolená hodnota
Nie

Príklad 3: Pridanie alternatívneho textu

alt="Späť na hlavnú stránku" !}>

parameter BORDER

Popis
Obrázok umiestnený na webovej stránke môže byť umiestnený v ráme s rôznou šírkou. To sa vykonáva pomocou parametra border tagu IMG. V predvolenom nastavení nie je okolo obrázka žiadny okraj, pokiaľ obrázok nie je odkazom. Farba okraja sa v tomto prípade zhoduje s farbou textu zadanou pomocou parametra štýlu alebo textu značky BODY.

Syntax

Argumenty

Predvolená hodnota
0

Príklad 3. Zarámujte obrázok

zelený rám s hrúbkou 2 pixely

Parametre HEIGHT a WIDTH

Popis
Ak chcete zmeniť veľkosť obrázka pomocou HTML, sú poskytnuté parametre width a height. Môžete použiť hodnoty v pixeloch alebo percentách. Ak je nastavené percentuálne zadanie, potom sa rozmery obrázka vypočítajú vzhľadom na nadradený prvok – kontajner, kde sa nachádza značka IMG. Ak neexistuje žiadny nadradený kontajner, okno prehliadača sa správa ako tento kontajner. Inými slovami šírka=100% znamená, že obrázok bude roztiahnutý po celej šírke webovej stránky. Pridaním iba jedného parametra šírky alebo výšky sa zachovajú proporcie a pomer strán obrázka. Prehliadač čaká, kým sa obrázok úplne nenačíta, aby určil jeho pôvodnú výšku a šírku.

Nezabudnite nastaviť rozmery všetkých obrázkov na webovej stránke. Vďaka tomu je načítanie stránky o niečo rýchlejšie, pretože prehliadač nemusí počítať veľkosť každého obrázka po jeho prijatí. Toto vyhlásenie je obzvlášť dôležité pre obrázky umiestnené vo vnútri tabuľky.

Šírka a výška obrázka sa dá zmeniť buď menšia alebo väčšia. To však žiadnym spôsobom neovplyvňuje rýchlosť načítania obrázka, pretože veľkosť súboru zostáva nezmenená. Preto oddiaľujte opatrne, pretože... To môže spôsobiť zmätok medzi čitateľmi, prečo sa taký malý obrázok načítava tak dlho. Zväčšenie veľkosti však vedie k opačnému efektu – veľkosť obrázka je veľká, ale súbor sa načítava rýchlejšie v porovnaní s obrázkom rovnakej veľkosti. Ale kvalita kresby sa zhoršuje.

Syntax

Argumenty
Akékoľvek kladné celé číslo v pixeloch alebo percentách.

Predvolená hodnota
Pôvodná šírka alebo výška obrázka.

Príklad 4: Rozmery obrázka

Parametre HSPACE a VSPACE

Popis
Pre každý obrázok môžete nastaviť neviditeľné horizontálne a vertikálne okraje pomocou parametrov hspace a vspace. To platí najmä vtedy, keď sa text zalomí okolo obrázka. V tomto prípade, aby text „neprebiehal“ tesne po obrázku, je potrebné okolo neho pridať prázdne miesto.

Syntax

Argumenty
Akékoľvek kladné celé číslo v pixeloch.

Predvolená hodnota
0

Príklad 5. Odrážky z obrázku

Parameter ISMAP

Popis
Parameter ismap informuje prehliadač, že obrázok je obrázkovou mapou na strane servera. Obrazové mapy vám umožňujú prepojiť odkazy na rôzne oblasti toho istého obrázka. Realizované v dvoch rôzne možnosti- server a klient. Pri použití možnosti servera prehliadač odošle serveru požiadavku na získanie adresy vybraného odkazu a čaká na odpoveď s požadovanými informáciami. Tento prístup si vyžaduje dodatočný čas na čakanie na výsledok a samostatné súbory pre každú obrázkovú kartu.

Odosielanie údajov na server prebieha nasledovne. IMG tag je potrebné umiestniť do kontajnera A, kde je potrebné zadať adresu CGI programu ako hodnotu parametra href. Program analyzuje prijaté súradnice kliknutí myšou, ktoré sú vypočítané z ľavého horného rohu obrázka, a vráti požadovanú webovú stránku.

Syntax

Argumenty
Nie

Predvolená hodnota
V predvolenom nastavení je táto možnosť zakázaná.

Príklad 6. Kresba ako obrazová mapa

Ak používateľ nastavil súradnice myši na obrázku na 100, 50, potom po kliknutí na odkaz sa súbor otvorí na http://www.htmlbook.ru/cgi-bin/map.cgi?100,50. Posledné číslice sa prenesú do programu CGI pomocou metódy GET a interpretujú sa na serveri.

parameter LOWSRC

Popis
Parameter lowsrc sa používa na zobrazenie obrázka nízkej kvality pred úplným načítaním konečného obrázka. Tento prístup je určený na skrátenie čakacej doby používateľa. Najprv sa mu zobrazí obrázok s nízkym rozlíšením alebo čiernobiela kresba, ktorá sa rýchlo načítava kvôli malej počiatočnej veľkosti súboru. Kým si ho používateľ prezerá, obrázok sa načítava dobrá kvalita, ktorý postupne nahrádza pôvodný. Veľkosti týchto obrázkov musia byť rovnaké.

Syntax

Argumenty

Predvolená hodnota
Nie

Príklad 7. Cesta k kresbe nízkej kvality

Parameter SRC

Popis
Adresa grafický súbor, ktorý sa zobrazí na webovej stránke. Najpopulárnejšie súbory sú vo formáte GIF a JPEG.

Syntax

Argumenty
Hodnota je úplná alebo relatívna cesta k súboru.

Predvolená hodnota
Nie

Príklad 8. Cesta ku grafickému súboru

Popis

Tag určené na zobrazovanie obrázkov v grafickom formáte GIF, JPEG alebo PNG na webovej stránke. Adresa súboru s obrázkom je určená prostredníctvom atribútu src. V prípade potreby môže byť kresba prepojená s iným súborom umiestnením značky do nádoby . .

Použitie atribútu, ktorý už poznáte zarovnať môžete ovládať zarovnanie obrázkov vzhľadom na ostatné prvky html stránky. Pri atribúte zarovnať významov je viacero, no my sme najviac momentálne Mám záujem o dve:

• vľavo- obrázok sa nachádza na ľavom okraji stránky a text obteká obrázok vpravo;


• správne- obrázok sa nachádza na pravom okraji stránky a text a ďalšie prvky obchádzajú obrázok vľavo.

Napríklad HTML kód

prehliadač sa zobrazí takto

A tento HTML kód:

bude vyzerať takto:

Ak chcete zastaviť obtekanie textu okolo obrázka, môžete použiť značku BR(známe z predchádzajúcej časti o). Na štítku BR existuje atribút jasné, ktorý môže nadobúdať tri hodnoty:

• vľavo- zastaviť obtekanie textu okolo obrázkov zarovnaných doľava;


• správne- zastaviť obtekanie textu okolo obrázkov zarovnaných vpravo;


• všetky- zastaviť obtekanie textu okolo obrázkov zarovnaných vľavo aj vpravo.

Vložte obrázok:

Popis a použitie

Tag vloží obrázok do dokumentu HTML.

Upozorňujeme, že obrázky sa na stránku technicky nevkladajú. Obrázky v skutočnosti odkazujú na stránky HTML. Tag vytvorí kontajner pre obrázok.

Na štítku dva povinné atribúty: src a alt.

Rozdiel medzi HTML a XHTML

V značke HTML nemá uzatváraciu značku.

V značke XHTML musí byť riadne uzavretá.

Atribúty „align“, „border“, „hspace“ a „vspace“ prvku img sú zastarané a nie sú podporované v XHTML 1.0 Strict.

Poradenstvo: Atribút alt sa používa ako alternatívny text, ak nie je k dispozícii žiadny obrázok, a nie ako text pri prejdení myšou. Ak chcete zobraziť text, keď umiestnite kurzor myši na obrázok, použite atribút title. takto: .

Povinné atribúty

Voliteľné atribúty

Štandardné atribúty

Atribúty udalosti

V súčasnosti sa takmer žiadna webová stránka nezaobíde bez použitia obrázkov na HTML stránkach, pretože ako hovorí ľudová múdrosť: „Je lepšie raz vidieť, ako stokrát počuť.“ Po prečítaní tohto článku sa naučíte používať značku IMG, ktorá sa používa na pridávanie obrázkov na webové stránky. Zvážime príklady pre HTML 5, ale budú fungovať aj pre staršie verzie hypertextového značkovacieho jazyka.

Ako vložiť obrázok na stránku HTML

Ak chcete vložiť obrázok na stránku, použite značku IMG HTML. Pre obrázok je potrebné zadať aspoň dva atribúty: src (cesta k súboru s obrázkom) a alt (alternatívny text, ktorý používateľ vidí, ak sa obrázok nenačítal). Atribút alt môže byť prázdny, ale musí byť prítomný. Môžete tiež nastaviť atribút title a potom, keď umiestnite kurzor myši na obrázok, zobrazí sa text špecifikovaný v tomto atribúte.

Ak je súbor s obrázkom v rovnakom priečinku ako stránka, na ktorej je načítaný, potom atribút src Môžete zadať iba názov súboru, napríklad:

Ak sa stránka nachádza na adrese http://www..html a obrázok je http://www..jpg, cesta k obrázku je zadaná takto:

Ak sa stránka nachádza v priečinku http://www..site/logo.jpg, cesta bude takáto:

Ak je obrázok v priečinku http://www.site/images/, potom bez ohľadu na to, v ktorom priečinku sa nachádza stránka na tej istej lokalite, do ktorej je obrázok vložený, cestu k súboru je možné zadať takto:

Alebo môžete zadať úplnú cestu k súboru obrázka, ak sa nachádza na inej lokalite:

Šírka a výška obrazu

V skorších verziách HTML boli výška a šírka nastavené pomocou atribútov width a height, ale teraz sa všetko, čo ovplyvňuje zobrazenie obrázka, nastavuje pomocou pomocou CSS v atribúte style. Šírka a výška sa najčastejšie uvádzajú v pixeloch:

Ak nie je zadaná šírka a výška, obrázok sa zobrazí v pôvodnej veľkosti. Ak sú hodnoty menšie ako pôvodné rozmery, prehliadač zobrazí obrázok v zmenšenej forme, ak sú hodnoty väčšie, prehliadač roztiahne obrázok na zadané rozmery, ale v v tomto prípade obraz bude menej jasný. Aby nedošlo k náhodnému skresleniu obrazu, môžete nastaviť napríklad iba výšku a potom sa šírka zmenší alebo zväčší v pomere k zadanej hodnote výšky.

Šírka a výška môžu byť tiež špecifikované ako percento šírky alebo výšky okna prehliadača alebo akéhokoľvek prvku bloku, v ktorom sa obrázok nachádza:

Zalomenie obrázka do textu a odsadenie

Štandardne sa text zobrazuje pod obrázkom. Aby sa text zalomil okolo obrázka, používa sa vlastnosť float CSS, ktorá nahrádza atribút align. Ak chceme, aby bol obrázok naľavo od textu a text obtekal vpravo a pod ním, potom nastavte hodnotu vľavo pre CSS vlastnosti float a ak by mal byť obrázok vpravo, potom je uvedená hodnota vpravo:

Môžete tiež nastaviť odsadenia v hornej, pravej, dolnej a ľavej časti obrázka:

To isté možno uviesť v skrátenej forme:

Prípadne môžete nastaviť zvislé a vodorovné okraje pomocou dvoch hodnôt vlastností okraja namiesto starých atribútov vspace a hspace. Povedzme, že potrebujeme okraj 10 pixelov hore a dole a 8 pixelov vľavo a vpravo:

Ako urobiť z obrázku odkaz na stránku

Alebo si môžeme nastaviť vlastnú farbu, typ a hrúbku rámu obrazu:

Obrazové formáty pre web

Webové stránky zvyčajne používajú viacero formátov obrázkov. Používa sa na fotografie formát JPEG, ak potrebujete, aby bol obrázok s priehľadné pozadie, potom sa použije formát PNG. Predtým sa namiesto formátu PNG používal GIF, ten je však už zastaraný – jeho jedinou výhodou je možnosť vytvárať animované obrázky. PNG a GIF sa zvyčajne používajú iba ako dizajnové prvky a iba v prípadoch, keď obrázok musí mať priehľadné oblasti alebo musí byť priesvitný. Keďže súbory v týchto formátoch sú veľmi veľké, neodporúčajú sa používať na bežné fotografie – existuje na to formát JPEG. Pred nahraním obrázkov na stránku sa oplatí zmenšiť ich šírku a výšku na veľkosť, v akej sa budú zobrazovať na stránke, aby sa používateľom rýchlejšie načítali.

Kopírovanie článku je zakázané.