.

Označiť má požadovaný atribút src, ktorého hodnota je absolútna alebo relatívna cesta k obrázku:

Pre značku sú k dispozícii nasledujúce atribúty:

Tabuľka 1. Atribúty značiek

Pripisovať	Popis, akceptovaná hodnota
alt	Atribút alt pridáva k obrázku alternatívny text. Zobrazuje sa na mieste, kde sa obrázok zobrazuje pred jeho načítaním alebo keď je grafika zakázaná, a tiež sa zobrazí ako popis, keď na obrázok umiestnite kurzor myši. Syntax: alt = "(! LANG: popis obrázku" . !}
krížový pôvod	Atribút crossorigin vám umožňuje načítať obrázky zo zdrojov v inej doméne pomocou požiadaviek CORS. Obrázky nahrané na plátno pomocou požiadaviek CORS je možné znova použiť. Povolené hodnoty: anonymný - žiadosť o krížový pôvod sa podáva pomocou hlavičky HTTP a nie sú odosielané žiadne poverenia. Ak server neposkytne prihlasovacie údaje serveru, z ktorého je požadovaný obsah, obrázok bude poškodený a jeho použitie bude obmedzené. use-credentials-Žiadosť o krížový pôvod sa vykonáva s odovzdanými povereniami. Syntax: crossorigin = "anonymný".
výška	Atribút height nastavuje výšku obrázku v px. Syntax: výška = "300".
izmapa	Atribút ismap naznačuje, že obrázok je súčasťou mapového obrázku umiestneného na serveri (mapový obrázok je obrázok s klikateľnými oblasťami). Keď kliknete na obrázok mapy, súradnice sa odošlú na server ako reťazec dotazu na adresu URL. Atribút ismap je povolený iba vtedy, ak je prvok je potomkom živlu s platným atribútom href. Syntax: ismap.
longdesc	Adresa URL pre rozšírený popis obrázku okrem atribútu alt. Syntax: longdesc = "http://www.example.com/description.txt".
src	Atribút src určuje cestu k obrázku. Syntax: src = "flower.jpg".
veľkosti	Nastavuje veľkosť obrázka v závislosti od parametrov zobrazenia. Funguje iba vtedy, ak je zadaný atribút srcset. Hodnota atribútu je jeden alebo viac reťazcov oddelených čiarkami.
srcset	Vytvorí zoznam zdrojov obrazu, ktoré sa majú vybrať na základe rozlíšenia obrazovky. Môže byť použitý v spojení s atribútom src alebo namiesto neho. Hodnota atribútu je jeden alebo viac reťazcov oddelených čiarkami.
usemap	Atribút usemap určuje obrázok ako obrazovú mapu. Hodnota musí začínať znakom #. Hodnota je priradená k hodnote názvu alebo atribútu id značky
šírka	Atribút width nastavuje šírku obrázku v px. Syntax: width = "500".

1.1. Adresa obrázku

Adresu obrázku je možné zadať v úplnom formáte (absolútna adresa URL), napríklad:
url (http://anysite.ru/images/anyphoto.png)

Alebo relatívnou cestou z dokument alebo koreňový adresár stránka:
url (../ images / anyphoto.png) - relatívna cesta k dokumentu,
url (/images/anyphoto.png) je relatívna cesta z koreňového adresára.

Toto sa interpretuje nasledovne:
../ - znamená prejsť o jednu úroveň vyššie, do koreňového adresára,
obrázky / - prejdite do priečinka s obrázkami,
anyphoto.png - Ukazuje na súbor s obrázkom.

1.2. Rozmery obrázku

Bez nastavenia veľkosti obrázka sa kresba zobrazí na stránke v skutočnej veľkosti. Rozmery obrázku môžete upravovať pomocou atribútov šírka a výška. Ak je nastavený iba jeden z atribútov, druhý sa vypočíta automaticky, aby sa zachovali proporcie obrázku.

1.3. Formáty grafických súborov

Formát JPEG (Joint Photographic Experts Group)... Obrázky JPEG sú ideálne pre fotografie; môžu obsahovať milióny rôznych farieb. Komprimuje obrázky lepšie ako súbory GIF, ale text a veľké plochy plnej farby môžu byť rozmazané.

Formát GIF (Formát výmeny grafiky)... Ideálne na kompresiu obrázkov, ktoré majú plné farebné oblasti, napríklad logá. GIFy vám umožňujú nastaviť jednu z farieb na priehľadnú, aby sa pozadie webovej stránky mohlo zobrazovať cez časť obrázku. GIFy môžu obsahovať aj jednoduché animácie. GIFy obsahujú iba 256 odtieňov, takže obrázky pôsobia škvrnito a nereálne ako plagáty.

Formát PNG (Prenosná sieťová grafika)... Obsahuje najlepšie funkcie formátov GIF a JPEG. Obsahuje 256 farieb a umožňuje vám urobiť jednu z farieb priehľadnou a súčasne komprimovať obrázky na menšiu veľkosť ako súbor GIF.

Vo formáte APNG (Animovaná prenosná sieťová grafika)... Formát obrázku založený na formáte PNG. Umožňuje ukladanie animácií a tiež podporuje priehľadnosť.

Formát SVG (Škálovateľná vektorová grafika)... Výkres SVG pozostáva zo sady geometrických tvarov popísaných vo formáte XML: čiara, elipsa, mnohouholník atď. Podporovaná je statická aj animovaná grafika. Sada funkcií obsahuje rôzne transformácie, alfa masky, filtračné efekty, možnosť používať šablóny. Veľkosť obrázkov SVG je možné meniť bez straty kvality.

Formát BMP (Bitmapový obrázok)... Jedná sa o nekomprimovanú (pôvodnú) bitmapu so vzorom s obdĺžnikovou mriežkou pixelov. Bitmapový súbor pozostáva z hlavičky, palety a grafických údajov. Hlavička obsahuje informácie o grafickom obrázku a súbore (hĺbka pixelov, výška, šírka a počet farieb). Paleta je špecifikovaná iba v tých bitmapových súboroch, ktoré obsahujú obrázky palety (8 alebo menej bitov) a pozostávajú z maximálne 256 prvkov. Grafické údaje predstavujú samotný obrázok. Farebná hĺbka v tomto formáte môže byť 1, 2, 4, 8, 16, 24, 32, 48 bitov na pixel.

Formát ICO (Ikona Windows)... Úložný formát pre ikony súborov v systéme Microsoft Windows. Ikona systému Windows sa tiež používa ako ikona na webových stránkach na internete. Je to obrázok tohto formátu, ktorý sa zobrazuje vedľa adresy stránky alebo záložky v prehliadači. Jeden súbor ICO obsahuje jednu alebo niekoľko ikon, pričom veľkosť a farba každej z nich sa nastavuje samostatne. Veľkosť ikony môže byť ľubovoľná, ale najbežnejšími ikonami sú štvorcové ikony so stranami 16, 32 a 48 pixelov.

2. Označiť

Označiť

Atribút name je k dispozícii pre značku, ktorá určuje názov mapy. Hodnota atribútu name pre značku

Element

3. Označiť

Označiť opisuje iba jeden hotspot v rámci obrazovej mapy na strane klienta. Prvok nemá koncovú značku. Ak jeden hotspot prekrýva iný, bude implementovaný prvý odkaz zo zoznamu rozsahov.

Tabuľka 2. Atribúty značky

Pripisovať	Stručný opis
alt	Určuje alternatívny text pre aktívnu oblasť mapy.
súradnice	Určuje polohu oblasti na obrazovke. Súradnice sú uvedené v dĺžkových jednotkách a oddelené čiarkami: pre kruh- súradnice stredu a polomeru kruhu; pre obdĺžnik- súradnice horného ľavého a pravého dolného rohu; pre mnohouholník- súradnice vrcholov mnohouholníka v požadovanom poradí, odporúča sa tiež uviesť posledné súradnice, rovnajúce sa prvým, na logické doplnenie obrázku.
Stiahnuť ▼	Dopĺňa atribút href a hovorí prehliadaču, že zdroj by sa mal načítať v okamihu, keď používateľ klikne na odkaz, namiesto aby ho napríklad vopred otvoril (ako súbor PDF). Pomenovaním atribútu teda pomenujeme načítaný objekt. Atribút je dovolené používať bez uvedenia jeho hodnoty.
href	Určuje adresu URL odkazu. Je možné zadať absolútny alebo relatívny odkaz.
hreflang	Určuje jazyk prepojeného webového dokumentu. Používa sa iba v spojení s atribútom href. Akceptované hodnoty sú skratka pozostávajúca z dvojice písmen označujúcich kód jazyka.
médiá	Určuje, pre aké typy zariadení bude súbor optimalizovaný. Hodnota môže byť ľubovoľný mediálny dotaz.
rel	Dopĺňa atribút href o informácie o vzťahu medzi aktuálnym dokumentom a prepojeným dokumentom. Akceptované hodnoty: alternate - odkaz na alternatívnu verziu dokumentu (napríklad vytlačiteľnú stránku, preklad alebo zrkadlo). autor - odkaz na autora dokumentu. záložka je trvalá adresa URL používaná pre záložky. help - odkaz na pomoc. licencia - odkaz na informácie o autorských právach k tomuto webovému dokumentu. next / prev - označuje vzťah medzi jednotlivými adresami URL. Vďaka tomuto označeniu môže Google určiť, že obsah týchto stránok je prepojený v logickej postupnosti. nofollow - zakazuje vyhľadávaču nasledovať odkazy na tejto stránke alebo na konkrétny odkaz. noreferrer - označuje, že po kliknutí na odkaz by prehliadač nemal odosielať hlavičku požiadavky HTTP (Referrer), ktorá zaznamenáva informácie o tom, z ktorej stránky návštevník stránky prišiel. prefetch - naznačuje, že cieľový dokument by mal byť uložený do pamäte cache, t.j. prehliadač na pozadí načítava obsah stránky do svojej vyrovnávacej pamäte. vyhľadávanie - označuje, že cieľový dokument obsahuje vyhľadávací nástroj. tag - označuje kľúčové slovo pre aktuálny dokument.
tvar	Nastaví tvar hotspotu na mape a jeho súradnice. Môže mať nasledujúce hodnoty: pravá - aktívna oblasť obdĺžnikového tvaru; kruh - aktívna oblasť vo forme kruhu; polyaktívna oblasť vo forme mnohouholníka; predvolené - aktívna oblasť zaberá celú oblasť obrázka.
cieľ	Po kliknutí na odkaz označuje, kam bude dokument načítaný. Na to sú potrebné nasledujúce hodnoty: _self - stránka sa načíta do aktuálneho okna; _blank - stránka sa otvorí v novom okne prehliadača; _parent - stránka sa načíta do nadradeného rámca; _top - stránka sa načíta do celého okna prehliadača.
typ	Špecifikuje typ MIME odkazovaných súborov, t.j. rozšírenie súboru.

4. Príklad vytvorenia obrazovej mapy

1) Pôvodný obrázok označíme na aktívnych oblastiach požadovaného tvaru. Súradnice oblastí je možné vypočítať pomocou programu na spracovanie fotografií, napríklad Adobe Photoshop alebo Maľovať.

Ryža. 1. Príklad označenia obrázka na vytvorenie mapy

2) Nastavte názov mapy pridaním do značky

Jpg "alt =" (! LANG: flowers_foto" width="680" height="383" usemap="#flowers"> !}
Ryža. 2. Príklad vytvorenia obrázka mapy, keď stlačíte kurzor myši na kvetinu, prejdete na stránku s popisom

HTML - lekcia 15. Navigačné mapy - mapa

Mnoho html stránok používa na organizovanie odkazov takzvané obrázkové mapy. Pri tomto prístupe sa urobí obrázok a odkazy sa ukotvia v rôznych oblastiach. Najčastejším príkladom sú turistické mapy sveta, kliknete na jeho časť s krajinou a dostanete sa na stránku venovanú danej krajine.

Také obrazové mapy môžu byť na strane klienta a servera. Odkazy na mapy klientov sú uložené v samotnom dokumente a kliknutím myši samotný prehliadač určí, na ktorú oblasť sa súradnice tohto bodu odkazujú, a nasleduje požadovaný odkaz.

Vo verzii servera sú tieto súradnice najskôr odoslané na server, spracované tam špeciálnym programom a až potom nasleduje odkaz. Uprednostňujú sa navigačné mapy na strane klienta. Budeme ich zvažovať.

Povedzme napríklad, že sme obchod s domácimi spotrebičmi a v hlavičke nášho webu máme nasledujúci obrázok:

Urobme z toho navigačnú mapu, t.j. Kliknutím na chladničku sa dostanete na stránku venovanú chladničkám (s modelmi, popismi a cenami), kliknutím na vysávač a práčku na ich príslušné stránky.

Aby sme to urobili, musíme popísať oblasti na tomto obrázku, ktoré budú odkazmi. Na popis takýchto oblastí sa používajú značky. iba s jedným parametrom názov, ktorý určuje názov referenčnej mapy a potom sa použije na odkaz na túto mapu.

Naša karta musí byť prepojená s naším obrázkom, a to v značke musíte pridať parameter usemap, ktorého hodnotou je názov našej mapy za znakom # (hash):
Na popis konkrétnych oblastí v rámci značiek používajú sa značky ... Táto značka má nasledujúce parametre:

• tvar- definuje tvar oblasti, môže mať nasledujúce hodnoty:
  • rekt- plocha vo forme obdĺžnika,
  • kruh- oblasť vo forme kruhu,
  • poly- oblasť vo forme mnohouholníka,
  • predvolené- celá oblasť.
• lysce- nastavuje súradnice oddelenej oblasti:
  • pre rekt sú nastavené súradnice ľavého horného a dolného pravého rohu obdĺžnika,
  • pre kruh súradnice stredu kruhu a polomeru sú nastavené,
  • pre poly určuje súradnice vrcholov mnohouholníka v požadovanom poradí.
• href- definuje adresu odkazu.
• cieľ- používa sa pri použití rámcov a označuje rámec, do ktorého sa má načítať stránka.
• alt- nastaví alternatívny text pre oblasť.

Máme tri oblasti, takže budú tri tagy : prvý je obdĺžnikový priestor okolo vysávača, druhý je obdĺžnikový priestor okolo práčky, tretí je okolo chladničky.
Teraz musíme určiť súradnice týchto oblastí. V skutočnosti je to časovo najnáročnejší proces. V našom prípade sme sa rozhodli, že oblasti budú obdĺžnikové, a úlohu sme si tak veľmi uľahčili, ale predstavte si, koľko bodov musíte nastaviť, napríklad na krúženie krajiny na mape. Musíme však nastaviť súradnice ľavého horného a pravého dolného rohu troch obdĺžnikov.

Na tieto účely sa spravidla používa nejaký program, napríklad Image Ready, ktorý má špeciálny nástroj na vymedzovanie oblastí a automaticky vytvára popisy týchto oblastí. Skúška fungovania týchto programov nie je súčasťou kurzu HTML, takže tu nastavíme súradnice „od oka“. Pozrite sa ešte raz na náš obrázok:

Náš obrázok je široký 738 pixelov a vysoký 192 pixelov. Nakreslite čiary pozdĺž hraníc našich oblastí a zhruba určte súradnice. Teraz sme pripravení pridať tieto parametre do našich značiek. .

Výsledok:

Teraz sa z našich oblastí stali odkazy (ak pohnete kurzorom myši, zmení sa na dlaň). Na tomto webe nie sú žiadne stránky chladničky, takže odkazy vedú na rovnakú stránku, ale ak vytvoríte požadované stránky, kliknutím na oblasť preskočíte.

Tým sa naše lekcie končia. Ste oboznámení so všetkými funkciami jazyka HTML. Ak si chcete upevniť svoje schopnosti, prečítajte si dve lekcie Vytvorenie webovej stránky - rozloženie tabuľky.

Nakoniec musím povedať, že v HTML sú ďalšie dva skvelé prvky - značky

a ... V skutočnosti sú to veľmi dôležité značky, ale na ich správu bez CSS to považujem iba za „zvrátenosť“, preto sú podrobne popísané v

HTML tagy

Význam a aplikácia

Označiť

Podpora prehliadača

Označiť			Opera		IExplorer	Hrana
	Áno	Áno	Áno	Áno	Áno	Áno

Atribúty

Atribúty značky špecifikujeme súradnice oblasti (atribút coords) a typ tvaru, ktorý potrebujeme (atribút shape):

Príklad použitia

Uvažujme o príklade, v ktorom keď kliknete na určitý tvar na jednom obrázku, prejdete na rôzne webové stránky, ktoré tieto tvary popisujú (odkazy na Wikipédiu):

Vyberte tvar:

„Na výber sú 4 tvary“ >

A tak v poradí, čo sme urobili v tomto príklade:

• Umiestnil obrázok (tag ), ktoré neskôr použijeme pri zostavovaní obrázku mapy. V atribúte usemap je potrebné zadať názov mapového obrázku, ktorý v prvku použijeme
• Umiestnite obrázok mapy (tag
• Umiestnite štyri značky ktoré definujú interaktívne oblasti na obrázku mapy:
  • Prvý pýtame sa obdĺžniková plocha(atribút tvaru s hodnotou „rect“), zodpovedá nášmu prvý obrázok ( prví dvaja hodnoty zodpovedajú ľavému hornému rohu, nasledujúcemu dva hodnoty definujú pravý horný a pravý dolný roh).
  • Druhý naznačiť okrúhla plocha(atribút tvaru s hodnotou „kruh“), zodpovedá nášmu druhy obrázok ( najprv hodnota zodpovedá súradniciam pozdĺž osi X, a druhý pozdĺž osi r, definuje tretí polomer).
  • Ohľadom tretia a štvrtý obrázok, potom sú zložené podľa princípu polygonálna oblasť(atribút tvaru s hodnotou „poly“). Na obrázku určíte požadovaný počet bodov, vypočítate súradnice týchto bodov ( grafický editor) a zadajte ich v takom poradí, aby ich prehliadač mohol spojiť s jedným riadkom. Ako príklad použite trojuholník (tretí obrázok): prvý bod (súradnice X a r vrcholy), druhý bod (súradnice X a r v dolnom ľavom rohu) a tretí bod (súradnice X a r pravý dolný roh).

Upozorňujem na skutočnosť, že ak je tag