.

Tag Má povinný atribút SRC, ktorej hodnota je absolútna alebo relatívna cesta k obrázku:

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

Tabuľka 1. Atribúty tagu

Atribút	Popis
Alt.	Atribút ALT pridáva k obrázku alternatívny text. Pred načítaním alebo keď je graf vypnutý, sa zobrazí na vzhľadu stránok, keď je graf zakázaný, a zobrazí sa aj s pop-up tipom, keď prejdete kurzorom myši na obrázok. Syntax: Alt \u003d "(! Lang: Popis obrázku" . !}
Crossorigin.	Atribút Coforigin vám umožňuje nahrať obrázky z iných zdrojov domén pomocou doplnkov CORS. Obrázky naložené v pláchoch pomocou cors dotazy môžu byť opätovne použité. Prípustné hodnoty: Anonymný - cross-originálny dotaz sa vykonáva pomocou hlavičky HTTP a poverenia nie sú prenášané. Ak server nedáva poverenia na server, z ktorého sa požaduje obsah, obraz sa poškodí a jeho použitie bude obmedzené. Použitie-poverenia - Cross-Proces dotaz sa vykonáva s prevodom poverení. Syntax: Cessorigin \u003d "anonymný".
Výška	Atribút výšky Nastaví výšku obrazu v PX. Syntax: Výška \u003d "300".
ismap	Atribút ISMAP označuje, že obraz je súčasťou obrázkovej karty umiestnenej na serveri (obrázok mapy - obrázok s interaktívnymi oblasťami). Keď kliknete na mapu obrazu, súradnice sa prenášajú na server ako adresu URL snímky dotazu. Atribút ISMAP je povolený len vtedy, ak je element Je to potomkový prvok So skutočným atribútom HREF. Syntax: Ismap.
Longdesc.	Rozšírené obrázky Popis URL, ktorá dopĺňa atribút ALT. Syntax: LongDessc \u003d "http://www.example.com/description.txt".
Src	Atribút SRC nastaví cestu k obrázku. Syntax: SRC \u003d "flower.jpg".
Veľkosti.	Určuje veľkosť obrazu v závislosti od parametrov displeja. Pracuje len so zadaným atribútom SRCET. Hodnota atribútu je jedna alebo viac riadkov špecifikovaných prostredníctvom čiarky.
Srcset.	Vytvorí zoznam zdrojov pre obrázok, ktorý sa vyberie na základe rozlíšenia obrazovky. Môže sa použiť spolu alebo namiesto atribútu SRC. Hodnota atribútu je jeden alebo viac riadkov oddelených čiarkou.
usmernenie	Atribút USEMAP definuje obrázok ako obrázok mapy. Hodnota musí začínať symbolom #. Hodnota je priradená k názvu atribútu alebo ID tagu
šírka	Atribút šírky Nastaví šírku obrazu v PX. Syntax: Šírka \u003d "500".

1.1. Adresa obrázka

Adresa obrázka môže byť plne uvedená (absolútna adresa URL), napríklad:
URL (http://anysite.ru/images/anyphoto.png)

Alebo cez relatívnu cestu z dokument alebo katalóg root Stránka:
URL (../ Images / Anyphoto.png) - Relatívna cesta z dokumentu,
URL (/images/anyPHOTO.PNG) je relatívna cesta z katalógu.

Toto je interpretované takto:
../ - znamená vyliezť na jednu úroveň, do koreňového katalógu,
Snímky / - Prejdite do priečinka s obrázkom,
anyphoto.png - označuje obrazový súbor.

1.2. Rozmery obrázkov

Bez zadania veľkosti obrazu sa výkres zobrazí na stránke Skutočnej veľkosti. Rozmery obrázkov môžete upravovať pomocou atribútov šírky a výšky. Ak je zadaná len jeden z atribútov, druhá sa automaticky vypočíta, aby sa zachovalo proporcie vzoru.

1.3. Formáty grafických súborov

Formát JPEG (Skupina spoločných fotografických expertov). JPEG Obrázky Ideálne pre fotografie, môžu obsahovať milióny rôznych farieb. Squeeze snímky lepšie ako GIF, ale text a veľké plochy s pevnou farbou môžu byť pokryté škvrnami.

Formát GIF Formát výmeny grafiky). Ideálne na stlačenie obrázkov, v ktorých sú oblasti s pevnou farbou, ako sú logá. GIF súbory vám umožňujú nastaviť jednu z transparentných farieb, takže na pozadí webovej stránky sa môže prejaviť prostredníctvom časti obrázka. Tiež súbory GIF môžu zahŕňať jednoduchú animáciu. Obrazy GIF obsahujú iba 256 odtieňov, pretože obrázky vyzerajú škvrnité a nereálne farby ako plagáty.

Formát png Prenosná sieťová grafika). Zahŕňa najlepšie vlastnosti formátov GIF a JPEG. Obsahuje 256 farieb a umožňuje, aby sa jedna z farieb priehľadná, pri komprimovaní obrázkov do menšej veľkosti ako súbor GIF.

Formát APNG Animovaná prenosná sieťová grafika). Formát obrazu založený na formát png. Umožňuje uložiť animáciu, a tiež podporuje transparentnosť.

Formát SVG Škálovacia vektorová grafika). Kresba SVG pozostáva zo súboru geometrických tvarov opísaných v XML formáte: riadok, elipsy, mnohouholník, atď. Podporovaná statická aj animovaná grafika. Súbor funkcií obsahuje rôzne konverzie, alfa masky, efekty filtra, schopnosť používať šablóny. Obrázky vo formáte SVG sa môžu líšiť vo veľkosti bez zníženia kvality.

Formát BMP (Bitmapový obrázok). Je to nekomprimovaná (pôvodná) bitmap, ktorej šablóna je obdĺžniková pixelová mriežka. Bitmapový súbor sa skladá z hlavičky, palety a grafických údajov. Názov ukladá grafiku a informácie o súbore (hĺbka pixelov, výšky, šírky a počtu farieb). Paleta je uvedená len v týchto bitmapových súboroch, ktoré obsahujú palety obrázky (8 a menej bitov) a pozostávajú z najviac 256 prvkov. Grafické údaje predstavujú samotný obraz. Farebná hĺbka B. tento formát Možno 1, 2, 4, 8, 16, 24, 32, 48 bitov na pixel.

Formát ICO (Ikona Windows). Ikony ukladanie súborov v Microsoft Windows.. Ikona systému Windows sa používa ako ikona na webových stránkach na internete. Je to obrázok tohto formátu, ktorý sa zobrazí vedľa adresy stránok alebo záložky v prehliadači. Jeden súbor ICO obsahuje jednu alebo viac ikon, veľkosť a chromatickosť každého z nich je nastavená samostatne. Veľkosť ikony môže byť akékoľvek, ale najviac používané štvorcové ikony so stranami 16, 32 a 48 pixelov.

2. Tag

Tag

Značka je k dispozícii na atribúte Názov, ktorý určuje názov karty. Názov Atribút hodnoty pre značku

Element

3. Tag

Tag Opisuje iba jednu aktívnu oblasť ako súčasť obrázkových kariet na strane klienta. Prvok nemá uzatváraciu značku. Ak jedna aktívna oblasť prekrýva druhú, prvý odkaz sa bude realizovať zo zoznamu oblastí.

Tabuľka 2. Atribúty tagu

Atribút	Stručný opis
Alt.	Určuje alternatívny text pre aktívnu mapu.
koordinácie.	Definuje polohu oblasti na obrazovke. Súradnice sú nastavené v jednotkách dĺžky a sú oddelené čiarkami: pre kruh - súradnice a polomer kruhu; pre obdĺžnik - súradnice horného a pravého dolných rohov; pre polygónový - Súradnice vrcholov polygónu V požadovanom poradí sa tiež odporúča označiť najnovšie súradnice rovnaké ako prvé, pre logické dokončenie obrázku.
Stiahnuť ▼	Doplní atribút HREF a rozpráva prehliadač, že prostriedok musí byť načítaný v čase, keď používateľ klikne na odkaz, namiesto, napríklad, aby ste ho otvorili (ako súbor PDF). Zadaním názvu pre atribút takto nastavujeme názov na prevzatie objektu. Je povolené používať atribút bez zadania jeho hodnoty.
href.	Určuje referenciu URL. Môže byť zadaná absolútna alebo relatívna adresa odkazu.
hreflín.	Určuje jazyk pridruženého webového dokumentu. Používa sa len s atribútom HREF. Prijaté hodnoty sú skratkou pozostávajúcou z dvojice písmen, ktoré označujú kód jazyka.
Médiá	Určuje, pre ktoré typy zariadení bude súbor optimalizovaný. Hodnota môže byť akýmkoľvek mediálnym dotazom.
Rel.	Doplní atribút HREF s informáciami o vzťahu medzi aktuálnym a súvisiacim dokumentom. Celkové hodnoty: Alternatívny - odkaz na alternatívnu verziu dokumentu (napríklad, \\ t tlačový formulár Stránky, preklad alebo zrkadlo). Autor - odkaz na autora dokumentu. Záložka je trvalá URL používaná pre záložky. Pomocník - Referenčný odkaz. Licencia - Odkaz na informácie o autorských právach na tomto webovom dokumente. NEXT / PREV - Určuje prepojenie medzi jednotlivou adresou URL. Vďaka tomuto Marku môže Google určiť, že obsah údajov o stránke je pripojený v logickej sekvencii. Nofollow - zakazuje vyhľadávač Prejdite na odkazy na tejto stránke alebo pre konkrétny odkaz. NoreFerrer - Označuje, že prepojenie prehliadača by nemalo odoslať hlavičku HTTP požiadavky (referer), ktorý zaznamenáva návštevník stránok, z ktorej stránky. Prefetch - označuje, že cieľový dokument musí byť uložené v pamäti cale, t.j. Prehliadač v pozadí vloží obsah stránky do 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	Určuje formu aktívnej oblasti na mape a jej súradniciach. Môže vykonať nasledujúce hodnoty: Rect - aktívna oblasť obdĺžnikového tvaru; Kruh je aktívna oblasť vo forme kruhu; Poly je aktívna oblasť vo forme mnohouholníka; Predvolené - Aktívna oblasť preberá celú oblasť obrázku.
cieľ.	Určuje, kde sa dokument zobrazí, keď je odkaz zobrazený. Trvá nasledujúce hodnoty: _ SAMS - Stránka je načítaná do aktuálneho okna; _blank - stránka sa otvorí v novom okne prehliadača; _Porent - stránka je naložená do rodičovského rodiča; _Top - strana je vložená do plného okna prehliadača.
Typ	Určuje typ MIME referenčných súborov, t.j. rozšírenie súboru.

4. Príklad vytvárania obrazu mapy

1) Umiestnenie pôvodného obrazu na aktívnych oblastiach požadovanej formy. Súradnice oblastí možno vypočítať pomocou programu na spracovanie fotografií, napríklad, Adobe Photoshop. alebo Farba..

Obr. 1. Príklad obrázkového označenia na vytvorenie mapy

2) Pýtame sa názov karty pridaním do značky

Jpg "alt \u003d" (! Lang: Flowers_Foto" width="680" height="383" usemap="#flowers"> !}
Obr. 2. Príklad vytvorenia obrazu mapy, keď stlačíte kurzor myši na kvete, prechod na stránku popisujúcu

Väčšina webových stránok je naplánovaná. Umožňuje vám farbu a jasne prezentovať informácie. V mnohých prípadoch je lepšie zobraziť obrázok, ako dať dlhý textový opis.

Existujú dva spôsoby, ako umiestniť obrázkové stránky na stránke:

• vloženie jednotlivých obrázkov;
• vyplňte pozadie obrázkom.

V každom prípade je grafický obraz prevzatý zo súboru.

Vložte grafické obrázky

Vloženie na grafickej stránke z grafického formátu sú vyrobené pomocou značky (z anglického, obrazu - obrázok) s uvedením adresy súboru ako argumentácia atribútu SRC:

< IMG SRC = "адрес_графического_файла" >

Adresa grafického súboru je ETOLYBO URL, alebo názov súboru, prípadne indikuje cestu. Na zobrazenie grafického súboru logotip.jpg by mal byť napísaný tag:

< IMG SRC = "logotip.jpg" >

Zvýšenie rýchlosti prenosu grafického obrazu v značke Môžete použiť atribút ( dodatočný parameter) LOWSCRC, ktorá sa zaoberá adresou grafického súboru ako argument. Môžete vytvoriť dve grafické súbory: jeden (napríklad, nechať ho súbor logotip.jpg) obsahuje obrázok získaný s vysokým rozlíšením a druhý (napríklad logotip.gif) je obrázok získaný s nízkym rozlíšením. Potom tag:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

... Prekazuje prehliadač najprv stiahnite súbor Logotip.gif a potom, keď dostanete, aby ste ho nahradili logotip.jpg súborom.

Ďalším spôsobom, ako urýchliť prevzatie grafiky, je určiť veľkosť obdĺžnikovej oblasti, v ktorej bude grafický obraz umiestnený pomocou atribútov Šírka. (šírka) a Výška (Výška) meraná v pixeloch. Ak zadáte tieto atribúty, prehliadač bude najprv zvýrazniť miesto v rámci harmonogramu, pripravte rozloženie dokumentu, zobrazí text a potom načítať plán. Všimnite si, že prehliadač komprimuje alebo roztiahne obrázok, ktorý ho zapustí do rámu Špecifikovaná veľkosť. Príklad označenia veľkosti obrazu:

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

Grafika sa bežne používa s textom, takže úloha zarovnania textu a grafický obraz sa vyskytuje. Táto úloha je vyriešená pomocou atribútu Zarovnať. Tag. S použitím rôznych argumentov. Môžeme napríklad želáme, aby text ležal vpravo alebo vľavo. Obraz je zvyčajne úzko uzatvorený textom, ktorý môže byť škaredý. Aby ste sa tomu vyhli, môžete nastaviť prázdne polia okolo ilustrácie. Polia sú vytvorené pomocou atribútov Vsras Pre horné a dolné polia a Nspace. Pre bočné polia v značke . Argumenty týchto atribútov sú uvedené vo forme čísel, ktoré určujú veľkosť polí v pixeloch. Ak chcete zrušiť prietok okolo grafiky, text slúži značku
.

Ďalšia značka Nastaví tok okolo grafiky z súboru Logotip.jpg vpravo (obrázok bude ponechaný z textu):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

Ak chcete nájsť obrázok vpravo od textu, potom potrebujete atribút Zarovnať. Priradiť argument Správny:

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

Ak chcete nastaviť polia okolo obrázka, musíte napísať značku formulára:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

Tu určujú veľkosť polí 20 a 10.

Zvážte príklad zdieľania grafiky a textov. Otvorte okná Poznámkový blok (textový editor NotePAD). Napíšte v nej HTML kód pomocou značiek diskutovaných vyššie. Nižšie je program, ktorý zobrazuje nejaký text a grafiku. Ako grafický súbor môžete použiť ktorýkoľvek z vašich dostupných súborov. Používa sa logotip.gif.

< HTML >

< HEAD >

< TITLE > Cvičenie 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 > Text tok prúdi plán doprava< / H1 >

Obr. 657.. Text posilňuje obrázok vpravo

Široké možnosti presného umiestnenia obrázkov (ako aj iných prvkov) na stránke tabuľky a Štýly. Tieto prvky HTML budú diskutované neskôr. Môžete napríklad definovať tabuľku bez viditeľných rámov a v bunkách tejto tabuľky, je to obrázky, texty a ďalšie prvky.

Existujú stovky grafických formátov, ale iba niektoré z nich sú podporované webovými prehliadačmi. V tomto článku popisujeme rôzne grafické formáty súborov, ktoré sú k dispozícii pre web dizajnérov a ich nepriamo, mali by sa používať.

Grafické formáty súborov, ktoré sú podporované najobľúbenejšími webovými prehliadačmi, sú: Grafic Interchange Formát (GIF), Spoločná fotografická skupina expertov (JPEG), prenosná sieťová grafika (PNG) a vektorová grafika. Niektoré vlastnosti grafických súborov:

• Transparentnosť - Táto vlastnosť umožňuje, aby obraz mal v rôznych stupňoch priehľadnosti z pevného stavu, aby sa úplne transparentní.
• Kompresia je vlastnosť, ktorá umožňuje, aby bol obrázok uložený v oveľa menšom súbore, pomocou matematických algoritmov na spracovanie skupiny pixelov ako jediného prvku.
• Weave - Umožňuje, aby sa obraz načítal najprv podivnými líniami a potom aj. To umožňuje návštevníkovi vidieť obrázok viac.
• Animácia - vytvára viditeľnosť pohybu pomocou série po sebe idúcich snímok. Pre animovaný GIF sa nevyžaduje plugin v prehliadači a môže pracovať takmer na všetkých zariadeniach.
• Progresívne zaťaženie je podobné pretrhnutiu skutočnosťou, že spočiatku nakladá len časť obrazu, ale nie založená na striedavých líniách.

GIF bol založený v roku 1980 a prijatý webovými dizajnérmi na začiatku 90. rokov ako hlavného grafického formátu pre webové stránky. Súbory GIF používajú kompresný algoritmus, ktorý robí veľkosť súboru malé pre rýchle prevzatie. GIF je obmedzený na 256 farieb (8 bitov), \u200b\u200bpodpora transparentnosti a firmvéru. Je tiež možné vytvoriť animovanú grafiku pomocou tohto formátu. Všetky prehliadače môžu zobraziť súbory GIF bez problémov.

Výhody GIF:

• Najprijateľnejšie grafický formát
• Schémy vyzerajú lepšie v tomto formáte
• Podpora transparentnosti

Súbory sú komprimované, ale podporujú "skutočné farby" (24 bitov) a sú preferovaným formátom pre fotografie, kde je otázka kvality veľmi dôležitá. JPEG podporuje progresívny formát, ktorý vám umožní takmer okamžite vidieť obrázok, ktorý zlepšuje kvalitu, keď je prevzatie overení.

Na rozdiel od súborov GIF môžu web dizajnéri ovládať komprimované súbory JPEG, čo vám umožní mať rôzne úrovne kvality obrazu a veľkosti súborov.

Výhody JPEG:

• Veľká kompresia znamená rýchlejšiu rýchlosť sťahovania.
• Vytvára vynikajúcu kvalitu pre fotografie a komplexné výkresy.
• Podporujte 24-bitovú farbu.

PNG je relatívne nedávny formát, ktorý bol zadaný ako alternatíva pre súbory GIF. PNG podporuje až 24 bitovú farbu, priehľadnosť, prestavenie a môže obsahovať krátky textový popis obrázka, ktorý sa používa vo vyhľadávačoch.

Výhody PNG:

• Prekonáva 8-bitové farby obmedzení v GIF
• Umožňuje text popis obrázkov pre vyhľadávače
• Podporuje transparentnosť
• Schémy vyzerajú lepšie ako JPEG

Vektorová grafika

Väčšina webovej grafiky sú rastrový obraz Alebo vzor, \u200b\u200bktorý sa skladá z mriežky farebných pixelov. Ilustrácie musia byť vytvorené vo vektorovej grafike, ktorá sa skladá z matematického popisu každého prvku, ktorý tvorí čiary a obrazové farby. Vektorová grafika je vytvorená prilákaním programov, ako je Adobe Illustrator alebo CorelDraw. Vektorová grafika musí byť prevedená na ľubovoľný formát GIF, JPEG alebo PNG pre použitie na webových stránkach.

Aký by mal byť použitý formát?

Web Designer si môže vybrať buď formát GIF alebo JPEG pre väčšinu aplikácií. Ale pretože veľkosť súborov GIF je zvyčajne malá v porovnaní s veľkosťou súbor JPEGVäčšina webových dizajnérov bude používať formát GIF Pre pozadie, boxy, rámy a akékoľvek iné grafické prvky, ktoré vyzerajú dokonale pomocou 8-bitovej farby.

Väčšina dizajnérov si vyberie formát JPEG Pre fotografie a ilustrácie, kde kompresia neohrozuje vizuálnu kvalitu obrazu.

Ako už bolo uvedené, HTML je dnes základom pre písanie akúkoľvek webovú stránku na World Wide Web. Pri používaní CSS sa kódy v jazyku HTML radikálne menia. Môžete sa rozlúčiť s reprugrnation neohrabanej Html tagov len na dosiahnutie jedného alebo druhého vizuálne efekty. Na niektorých HTML tagoch \u200b\u200balebo atribútoch, ako napríklad zastarané značky ...

hlavný

Objednajte si webovú stránku a zaoberajte sa biznisom!

Táto fráza môže byť počuť a \u200b\u200bvidieť na mnohých lokalitách, a to nie je márne!

Internetová stránka — Toto je tvár spoločnosti. A je to najmodernejší a efektívnejší komunikačný kanál s potenciálnym spotrebiteľom. Iba schopnosti internetovej stránky vám umožňujú plne využiť všetky spôsoby, ako nahlásiť informačnú správu užívateľovi. Informácie o texte, audio a video môžu byť podané v rámci jednej lokality, aby sa s nimi oboznámili so spotrebiteľom.

Cez softvér Stránka je možné prijať platbami, hovoriť o telefóne, databáze, odosielanie a prijímaní faxov, výmene SMS správ a vykonať mnoho ďalších akcií. Moderná internetová stránka je informačné centrum nielen akúkoľvek spoločnosť, ale aj každého používateľa internetu.

A toto je spôsob účinného a zároveň jednoduchá a vizuálna správa o svojich myšlienkach alebo vývoji najširšej publika. A dnes, webové dokumenty napísané v jazyku HTML Hypertext Markups naďalej zostávajú hlavnou formou prezentácie údajov vo webovom prostredí.

Najdôležitejšie výhody HTML sú:

• Jednoduché, čo vám umožní naučiť sa HTML do najkratšieho času.
• Schopnosť vytvoriť si vlastné webové stránky
• A HTML funguje absolútne rovnaké na všetkých existujúcich platformách dnes, nákup doplnkových zariadení nie je potrebné. A stačí použiť akýkoľvek dostupný textový editor, Napríklad poznámkový blok.

Na tejto stránke som sa snažila podrobne opísať celý proces vytvárania vlastnej webovej stránky webových stránok, menovite publikovanie hotového projektu na internete s cieľom poskytnúť prístup ku všetkým užívateľom.

Dúfam, že mnohé z mojich článkov budú veľmi užitočné, pretože nie som programátor sám, ale táto práca je veľmi inšpirovaná ma.