Většina webových stránek obsahuje grafiku. Umožňuje barevně a přehledně prezentovat informace. V mnoha případech je lepší ukázat obrázek než dlouhý textový popis.

Grafiku lze na stránku umístit dvěma způsoby:

• vkládání jednotlivých obrázků;
• vyplnění pozadí obrázkem.

V každém případě je grafika převzata ze souboru.

Vkládání grafiky

Grafický obrázek ze souboru grafického formátu je vložen na stránku pomocí značky (z angličtiny, obrázek - obrázek) určující adresu souboru jako argument atributu SRC:

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

Adresa souboru obrázku je buď URL, nebo název souboru, případně s cestou. Chcete -li například zobrazit grafický soubor logotip.jpg, napište značku:

< IMG SRC = "logotip.jpg" >

Zvýšení přenosové rychlosti grafického obrázku ve značce můžete použít atribut (volitelný) LOWSRC, který bere jako argument adresu grafického souboru. Můžete vytvořit dva grafické soubory: jeden (například ať je to soubor logotip.jpg) obsahuje obrázek získaný z vysoké rozlišení a druhý (například logotip.gif) je obrázek s nízkým rozlišením. Pak je značka:

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

... přikáže prohlížeči, aby nejprve stáhl soubor logotip.gif a poté jej přijal nahradit souborem logotip.jpg.

Dalším způsobem, jak zrychlit načítání grafiky, je pomocí atributů nastavit velikost obdélníkové oblasti, do které bude grafika umístěna ŠÍŘKA(šířka) a VÝŠKA(výška) měřeno v pixelech. Pokud zadáte tyto atributy, prohlížeč nejprve přidělí místo grafice, připraví rozložení dokumentu, zobrazí text a teprve poté načte grafiku. Prohlížeč zmenší nebo roztáhne obrázek tak, aby odpovídal rámcům zadané velikosti. Příklad zadání velikosti obrázku:

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

Obrázky se obvykle používají ve spojení s textem, takže vzniká úkol zarovnání textu a grafiky. Tento úkol se provádí pomocí atributu ALIGNštítek pomocí různých argumentů. Můžeme například chtít, aby text proudil kolem obrázku doprava nebo doleva. Obrázek je obvykle vložen blízko textu, což může být ošklivé. Abyste tomu zabránili, můžete kolem obrázku nastavit prázdné okraje. Pole se vytvářejí pomocí atributů VSPACE pro horní a dolní okraj a НMEZIM pro boční okraje ve značce ... Argumenty pro tyto atributy jsou zadány jako čísla, která určují velikost okrajů v pixelech. Chcete -li tok textu kolem grafiky zrušit, použijte značku
.

Následující značka nastavuje tok grafiky ze souboru logotip.jpg vpravo (obrázek bude nalevo od textu):

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

Pokud chcete umístit obrázek napravo od textu, potřebujete tento atribut ALIGN přiřadit argument ŽE JO:

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

Chcete -li nastavit pole kolem obrázku, musíte napsat značku jako:

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

Zde čísla 20 a 10 určují velikost polí.

Uvažujme příklad sdílení grafiky a textů. Otevřít Poznámkový blok ( textový editor Poznámkový blok) Windows. Napište do něj HTML kód pomocí výše diskutovaných značek. Níže je program, který produkuje nějaký text a grafiku. Kterýkoli ze souborů, které máte, lze použít jako grafický soubor. Používá se soubor logotip.gif.

< HTML >

< HEAD >

< TITLE >Cvičení 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

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

< H1 >Text obtéká grafiku vpravo< / H1 >

Rýže. 657... Text se obtáčí kolem obrázku vpravo

Poskytuje dostatek příležitostí k přesnému umístění obrázků (ale i dalších prvků) na stránce stoly a styly... Tyto Prvky HTML bude projednáno později. Můžete například definovat tabulku bez viditelných rámečků a do buněk této tabulky umístit obrázky, texty a další prvky.

Tento tutoriál vám ukáže, jak ozdobit webovou stránku přidáním grafiky. Seznámíme se s nejběžnějšími formáty obrázků, zjistíme, který tag slouží k přidávání obrázků na stránku, zabýváme se alternativními titulky a zarovnáním textu a grafiky. Seznámíme se také s hlavními atributy obrázků a naučíme se upravovat šířku a výšku obrázku. Dále pár slov o používání obrázků jako odkazů a o tom, jaké jsou miniatury obrázků. Nakonec existuje několik obecných tipů pro použití grafiky na webové stránce.

Přidávání obrázků na webovou stránku
Pokud webová stránka neobsahuje nic jiného než textové informace, může se to někomu zdát zajímavé, díky informacím, které jsou na ní uvedeny, ale je nepravděpodobné, že by někoho lákalo označit ji za atraktivní. Přidávání obrázků na webovou stránku je velmi snadné. Přidání grafiky, která může stránce dodat profesionální vzhled, vyžaduje určité znalosti. Čemu se vlastně dnešní lekce věnuje.

Dva nejčastěji používané grafické formáty na internetu jsou GIF a JPEG. Formát vyvinutý a pojmenovaný skupinou Joint Photographic Experts Group (JPEG) se obvykle používá k ukládání obrázků s plynulými barevnými přechody, například fotografií.

Téměř všechny ostatní grafické prvky jsou uloženy ve formátu GIF (Graphics Interchange Format), formátu pro výměnu grafických dat. V současné době získává na popularitě další nový grafický formát: PNG (Portable Network Graphics). Očekává se, že nakonec nahradí formát GIF. Nespěchejte však znovu uložit všechny své grafické soubory v tomto formátu, přestože to stále není podporováno všemi prohlížeči.

Všechny obrázky jsou na webovou stránku přidávány pomocí stejné značky, která se nazývá značka zdroje obrázku ... Nyní to pravděpodobně můžete určit sami tento záznam skládá se ze samotné značky , jeho atribut (scr) a hodnotu tohoto atributu (umístění). Jelikož je však vyžadován atribut scr, je vhodnější považovat tento záznam za jeden společný tag. Pravděpodobně jste si také všimli, že značka zdroje obrázku nemá odpovídající koncovou značku. Toto je samostatná samostatná značka, nezapomeňte tedy na konec přidat lomítko: .

# 1058; D XHTML 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DТD/xhtml1/transitional.dtd "> První obrázky f> Tento obrázek byl přidán na moji první webovou stránku.>

Přidání alternativních štítků
Při procházení internetu jste si pravděpodobně všimli různých nápisů zobrazených, když umístíte ukazatel myši nad nějaký grafický prvek webové stránky. Tyto nápisy obvykle označují nějaký druh Dodatečné informace o samotném obrázku nebo o oblasti stránky, kterou zabírá.

Níže uvedený kód HTML ukazuje, jak je do značky přidán atribut alt. ... Podobně jako atribut src, atribut alt sděluje webovému prohlížeči některé další informace o obrázku a lze jej také vždy použít ve spojení se značkou .

Atribut alt definuje alternativní text pro grafický prvek přidaný na webovou stránku. Tento text se nazývá alternativní, protože jej lze zobrazit na obrazovce jako alternativu k samotnému obrázku. Atribut alt má ještě jeden velmi důležitý účel. Mnoho návštěvníků internetu využívajících kanály s nízkou přenosovou rychlostí může dát svým prohlížečům pokyn, aby nestahovali ani nezobrazovali grafické informace. To jim umožňuje zrychlit načítání webových stránek na jejich počítačích.

Pamatujte také, že ne všechny prohlížeče dokážou ve svých oknech zobrazovat grafiku. Například prohlížeč Lynx tuto funkci vůbec nepodporuje. Atribut alt tedy umožňuje webovému návrháři mít jistotu, že pokud návštěvník jeho webové stránky nevidí na své obrazovce obrázek, může vidět alespoň textové informace přidané k tomuto obrázku.

Ačkoli atribut alt lze definovat pro každou značku , dávejte pozor, abyste některým grafickým prvkům nepřiřadili nevhodné textové zprávy. Nemá například smysl přidávat alternativní textové popisky k různým prvkům externího designu webové stránky. Abyste se takovým chybám vyhnuli, můžete atribut alt těchto prvků nastavit na prázdnou hodnotu (alt = ""). Pokud nenastavíte žádné jiné atributy, prohlížeč vykreslí obrázek v původní velikosti a zarovná horní okraj obrázku s horním okrajem sousedního textového řádku. Oba tyto parametry můžete změnit pomocí značek stylů.

Atributy obrázku
Pro značku atributy jsou poskytovány ke změně velikosti obrázku. Některé z těchto atributů jsou uvedeny níže.
výška- Určeno v pixelech nebo procentech - Udává výšku obrázku
šířka- Určeno v pixelech nebo procentech - Udává šířku obrázku.

Úprava výšky a šířky obrázku
Rozměry obrázku umístěného na webové stránce lze určit pomocí atributů výška a šířka. Hodnoty těchto atributů jsou zadány buď jako pevné počty pixelů, nebo jako procento vzhledem k velikosti stránky. Podívejte se na níže uvedený HTML kód. První značka nastavuje rozměry původního obrázku, který jste viděli v předchozích obrázcích tohoto tutoriálu, na 60 pixelů svisle a 60 pixelů vodorovně. Druhý tag nastaví šířku stejného obrázku na 6% šířky stránky a výšku na 10% výšky stránky. Obrázek ukazuje, jak se oba tyto obrázky zobrazují v okně prohlížeče.

Tím, že prohlížeč zobrazí obrázek v jeho okně, zvládá stejně dobře práci s hodnotami nastavenými v pixelech i procentech. Uvědomte si však, že počítače návštěvníků vaší webové stránky mohou mít nastaveno jiné rozlišení obrazovky než nainstalován pro váš monitor. Co z toho plyne? Monitor má například rozlišení 800x600. V předchozím příkladu byl obrázek přidaný na webovou stránku nastaven na šířku 6% šířky stránky, což by při tomto rozlišení bylo 48 pixelů. Pokud si stejný obraz prohlížíte na monitoru s rozlišením 1024x800, uvedených 6% šířky stránky bude odpovídat šířce rovnající se 61 pixelům.

Při změně velikosti obrázku nezapomeňte nastavit obě hodnoty odpovídající jeho výšce a šířce. Pokud změníte pouze jednu z těchto hodnot, samotný obrázek se na obrazovce natáhne svisle nebo vodorovně. Alternativní možnost spočívá v úpravě velikosti obrázku pomocí grafického editoru.

Můžete vytvořit iluzi více rychlé načítání Snímky. Bez ohledu na to, zda se u obrázku změní velikost nebo ne, vždy zahrňte hodnoty atributů výška a šířka, protože ty prohlížeči sdělí důležité informace o tom, kolik místa by mělo být na stránce přiděleno, aby se do něj obrázek vešel. V takovém případě bude prohlížeč schopen určit požadovaný prostor pro obrázek a pokračovat v budování dalších prvků stránky, aniž by zastavil stahování samotného obrázku. To vyvolává dojem, že se stránka načítá rychleji, protože její návštěvníci nemusí čekat, až se obrázek zcela načte, aby konečně viděli další informace na stránce.

Pokud opravdu chcete, aby se obrázek vešel přesně na správné místo na šířku stránky, použijte procenta. V takovém případě bude obraz na obrazovce jakéhokoli monitoru zabírat stejnou část stránky jako na obrazovce. Pokud chcete, aby rozlišení obrázku (velikost pixelu) zůstalo konstantní, použijte hodnoty v pixelech.

Vyrovnejte text a grafiku
Atribut zarovnat značku Umožňuje zarovnat obrázek na pravou (pravou hodnotu) nebo levou (levou hodnotu) hranu textového řádku. Příklady použití tohoto atributu jsou uvedeny na obrázku.

Stejný atribut lze použít k vertikálnímu zarovnání obrázku (opět vzhledem k textovému řetězci). Může nabývat tří dalších hodnot nahoře, dole a uprostřed. Pokud je atribut zarovnání nastaven na začátek, horní část obrázku je zarovnána s horní částí okolního textu. Pokud je atribut zarovnání nastaven na konec, spodní část obrázku je zarovnána se spodní částí okolního textu. Pokud je atribut zarovnání nastaven na střed, bude střed obrázku zarovnán na střed řádku textu.

Používání obrázků jako odkazů
Obrázky nejsou vhodné pouze pro návrh webových stránek. Lze je úspěšně použít jako hypertextové odkazy na jiné dokumenty. V HTML je to snadné, protože obrázky jsou přeměněny na hypertextové odkazy úplně stejným způsobem jako textová pole. Chcete -li to provést, musíte také použít značku uzavírající prvek webové stránky, která by se měla stát odkazem na jiný dokument. Pokud by tedy měl být přechod na hypertextový odkaz proveden po kliknutí na nějaký obrázek, je nutné značku tohoto obrázku uzavřít do tagu.

a>

PROTI tento případ Když se návštěvník webové stránky umístí nad obrázek, zobrazí se vedle kurzoru textová zpráva „Toto je můj autoportrét!“ Po kliknutí na obrázek se otevře dokument DOC2.htm, který je označen hypertextovým odkazem.

Miniatury obrázků
Dalším běžným využitím schopnosti hypertextových odkazů HTML je použít jeden obrázek k navigaci na jiný. K čemu to je? Faktem je, že poměrně často je velikost obrázků, které chcete publikovat na webové stránce, příliš velká, a neexistuje žádná jistota, že návštěvníci budou mít trpělivost počkat, až dokončí načítání. V takových případech se vytvoří malá kopie původního obrázku, nazývaná miniatura, se kterou si prohlížeč s načítáním poradí mnohem rychleji. Pokud má návštěvník o obrázek zájem a chce si ho stáhnout v plné kopii, bude muset pouze kliknout na tuto miniaturu. Takto vypadají odpovídající HTML kódy.

a>

Jak vidíte, kliknutím na obrázek thumbnail.jpg se otevře další soubor obrázku (image.jpg). Textový řetězec zadaný jako hodnota atributu alt říká návštěvníkovi, jak otevřít hlavní obrázek.

Tajemství úspěšného používání obrázků
Obrázky jsou zajímavé a atraktivní, nesou spoustu vizuálních informací a je velmi snadné je přidávat na webové stránky, přesto byste měli dodržovat některá z následujících pravidel, pokud opravdu chcete vytvořit web, který se stane oblíbeným u uživatelů internetu.

Jak více velikostí soubor s obrázkem, čím déle bude trvat jeho stažení do počítače uživatele. Protože většina návštěvníků internetu stále používá pro přístup k síti komunikační kanály s nízkou komunikací propustnost, velikosti stažených souborů jsou pro ně stále zásadní. Nezapomeňte na to a snažte se, aby obrázky na vašich webových stránkách byly co nejmenší.

Důležitá je nejen velikost souboru jednotlivého obrázku, ale také celková velikost souboru celého dokumentu HTML. Čím více obrázků bude na webovou stránku přidáno, i když jsou malé, tím větší bude konečný dokument. Vykonat náhled vaši stránku v různých prohlížečích a odhadněte, jak dlouho bude trvat, než ji každý prohlížeč načte.

Protože atribut alt je tak důležitý (doporučujeme jej definovat pro každou značku , při používání buďte opatrní. Ujistěte se, že obsah textová zpráva vždy odpovídá samotnému obrázku, jinak mohou být návštěvníci vaší stránky zmatení. Stejná poznámka platí pro opačný směr: Ujistěte se, že obrázky odpovídají textovým informacím uvedeným na webové stránce. Na letišti by byla vhodná fotografie letadla a na místě s divokou zvěří zcela nadbytečná.

Na internetu můžete najít mnoho zajímavých obrázků a snadno si je uložit do počítače. Mnoho z těchto obrázků je však chráněno autorskými právy. Pokud najdete na komerčním webu obrázek, který se vám líbí, podívejte se, zda tam nejsou nějaké zprávy o autorských právech a zda je tento obrázek k dispozici pro volné použití.

Pokud obrázek na webové stránce není chráněn autorskými právy, můžete jej zkopírovat do počítače. Chcete-li to provést, jednoduše klikněte pravým tlačítkem na tento obrázek a v nabídce, která se otevře, vyberte příkaz Uložit obrázek jako. Po uložení obrázku do počítače jej můžete dále používat jako jakýkoli jiný výkres.

Praktická práce číslo 2

Vkládání obrázků do dokumentu HTML

Účel práce. Seznámení se základními značkami pro vkládání obrázků do dokumentu HTML, informace o atributech pro transformaci obrázků v dokumentu.

Literatura. Poznámky k výuce.

3. Příprava na práci. Prostudujte si poznámky k přednášce na téma „Grafika“.

Seznam vybavení. Počítač.

Cvičení.

5.1. Přečtěte si o základních značkách pro vkládání obrázků do dokumentu HTML.

5.2. Prozkoumejte základní atributy pro transformaci obrázků.

5.4. Naučte se zdobit obrázky na webových stránkách.

Pořadí práce.

6.1. Vkládání obrázků na webovou stránku.

1. Otevřít Malovací program a vytvořte v něm tři obrázky podle ukázky: každý obrázek je v samostatném souboru.

Obr. 1 obr. 2 obr. 3

Uložte tyto soubory pod názvy bloc1.gif, bloc2.gif, bloc3.gif ve vaší složce.

2. Otevřete textový editor Poznámkový blok a vytvořte webovou stránku podle příkladu:

Kód webové stránky:

algoritm.html.

6.2. Vytváření vodorovných čar a dalších objektů.

1. Otevřete textový editor Poznámkový blok a vytvořte 2 webové stránky podle příkladu:

Úryvek kódu webové stránky:

3. Uložte přijatý dokument do své složky s názvem souboru linii.html.

4. Spusťte prohlížeč internet Explorer... Zobrazte na ní výslednou webovou stránku.

5. Vytvořte druhou webovou stránku.

Úryvek kódu webové stránky:

6. Uložte přijatý dokument do své složky s názvem souboru list.html.

7. Spustit internetový prohlížeč Badatel. Zobrazte na ní výslednou webovou stránku.

Vytvoření obrazové mapy a vložení plazivé čáry.

1. Vytvořte webovou stránku pomocí následujícího obrázku. Je umístěn na ploše ve složce Praktická práce pomocí HTML.

2. Vytvořte obrázkovou mapu tak, aby se při najetí myší na konkrétní zařízení v počítači zobrazil jeho název.

3. Na stejné stránce vytvořte plazivý řádek:

Rádi hrajete počítačové hry, milujte programování sami!

4. Uložte přijatý dokument do složky a pojmenujte soubor carta.html.

5. Spusťte prohlížeč Internet Explorer. Zobrazte na ní výslednou webovou stránku.

7.1. Soubory algoritm.html, linii.html, list.html, carta.html ve vaší složce.

8. Testovací otázky.

8.1. Jaká značka se používá k vkládání obrázků do dokumentu HTML?

8.2. Jaký atribut vám umožňuje zadat název souboru obrázku?

8.3. Jaké atributy vám umožňují nastavit velikost obrázku?

8.4. Jaký atribut vám umožňuje nastavit polohu obrázku vzhledem k okolnímu textu?

8.5. Jaký atribut vám umožňuje nastavit tloušťku okraje kolem obrázku?

8.6. ... Jaké atributy určují množství volného místa vlevo, vpravo, nad a pod obrázkem?

8.7. Jaké značky se používají k vytváření obrazových map? Jaké atributy se používají?

8.8. Která značka slouží k vytváření procházení?

Aplikace.

Grafika

Umístění grafiky na webovou stránku. Formáty grafických souborů

Dva nejpopulárnější grafické formáty na internetu jsou GIF a JPEG.

Obvykle používají:

JPEG - pro fotografie a obrázky s velmi složitým barevným gamutem s plynulými barevnými přechody (v rozšíření je zapsán jako JPG).

GIF - pro loga, titulky, nadpisy, obrázky s jasnými barevnými okraji.

Formát GIF

Obrázky v tomto formátu podporují 256 barev. Formát GIF má tři další funkce:

Animace. Pomocí animovaného editoru GIF je snadné sestavit jednoduchou „karikaturu“: nakreslete jednotlivé snímky, upravte dobu zpoždění v sekvenci zobrazení, „smyčku filmu“ nebo snímky zobrazte pouze jednou. Když je animace připravena, je zapsána na disk jako běžný soubor GIF. Tento soubor ale neobsahuje jeden, ale celou sbírku GIFů a různé konfigurační informace.

V HTML neexistuje žádný rozdíl mezi zadáním jednoduchého GIF nebo animovaného GIF.

Průhledná grafika. Formát GIF umožňuje deklarovat jednu nebo více barev na obrázku jako průhledné. To pomáhá zbavit se přísně pravoúhlých ilustrací a vložit kresbu do dokumentu atraktivnějším způsobem:

Prokládané skenování. Používá se pro velké GIFy. Ilustrace je rozdělena na čtyři části, velikost původního obrázku. První část obsahuje 1, 5, 9 atd. řádky původního obrázku. Druhý je druhý, šestý, desátý atd. Třetí je 3., 7., 11. atd. Čtvrtý - 4., 8., 12. atd.

Prohlížeč staví na obrazovce nejprve první část obrázku, pak kterou, pak třetí a čtvrtou. Získá se efekt postupného vývoje obrazu.

Formát JPEG

Tento formát byl vyvinut speciálně pro přenos fotografií. Podporuje miliony barev a vytváří velmi kvalitní obrázky.

Vysoká kvalita se samozřejmě odráží ve velikostech souborů. Ale Formát JPEG má jednu zvláštnost: v editoru JPG při nahrávání na disk můžete určit stupeň kvality, který potřebujete, a tím vyvažováním na liště „velikost souboru kvality“ dosáhnout požadovaného kompromisu. Pokud na naskenované fotografii ponecháte pouze 10 000 z milionu barev a nahradíte zbývající barvy blízkými, bude téměř nemožné detekovat takové nahrazení okem a velikost souboru se výrazně zmenší.

Formát JPEG podporuje režim podobný prokládanému GIF. Na rozdíl od GIF však rozdělení na části neprobíhá po řádcích, ale podle algoritmu pro extrahování částí v plné velikosti z obrázku. Navíc každý další díl má vyšší kvalitu než ten předchozí. JPEG s touto vlastností se nazývá progresivní.

Živel

Živel slouží k vložení grafického obrázku do těla dokumentu.

Syntax:

Navíc prvek podporuje různé atributy, které určují polohu obrázku ve vztahu k okolnímu textu a obsahu Web stránky obecně. Obrázek lze zarovnat vlevo, vpravo, nahoře nebo dole na řádku nebo umístit do středu okna.

Atributy:

src(ukazuje na grafický soubor zadáním jeho adresy URL).
Syntax:
alt(místo obrázku zobrazuje alternativní text typu, zde je nakresleno logo společnosti).
Syntax:
zarovnat(nastavuje polohu obrázku v okně a jeho zarovnání, může nabývat následujících hodnot: horní- podél horního okraje, dno- podél spodního okraje, střední-ve středu, že jo-napravo, vlevo, odjet-vlevo, odjet).

Syntax:

šířka(nastavuje šířku oblasti v pixelech, přidělenou v okně pro obrázek).

Syntax:

výška(nastavuje výšku oblasti v pixelech přidělenou v okně pro obrázek).

Syntax:

hspace(určuje prázdné místo v pixelech napravo a nalevo od obrázku).
Syntax:
okraj(nastavuje šířku ohraničení kolem obrázku v pixelech).
Syntax:
vspace(nastaví bílé místo v pixelech nad a pod obrázkem).
Syntax:
ismap(umožňuje použití obrázků, jejichž části jsou propojeny s odkazy a umožňují přechody. Takovým obrázkům se říká mapa MAP, používají se ve spojení s prvkem ... V takovém případě server odpoví na kliknutí na mapu).
Syntax:

uživatelská mapa ( umožňuje použití obrázků, jejichž některé části jsou spojeny s mapami, jsou použity ve spojení s živlem

Obrázkové mapy.

Živel

Živel

Syntax:

Živel

Živel určuje aktivní oblasti mapy, na které můžete kliknout a propojit je. Položka nemá koncový štítek. Je vhodné pracovat s obrázky mapy v standardní aplikace pro Windows - editor Malování, u kterého musí být obrázek transformován do formátu BMP. Pomocí mřížky v režimech přiblížení stisknutím Ctrl + G a výběrem nástroje Výběr, když se ukazatel myši změní na tenký kříž, lze souřadnice kurzoru určit s přesností na jeden pixel. Tato přesnost může být velmi užitečná při určování souřadnic aktivních oblastí mapy. Živel podporuje různé atributy:

Syntax: Url ">

alt(nastavuje alternativní text pro prohlížeče, které nepodporují tento předmět).
Syntax:

titul(nastaví alternativní text pro prohlížeče, který se objeví, když najedete myší na tento prvek).

Syntax:

tvar(nastavuje tvar aktivní oblasti na mapě a její souřadnice, může nabývat následujících hodnot: "kružnice" coordy = X, Y, R, kde X, Y, R - souřadnice středu kruhu a jeho poloměru , "poly" kordy = X1, Y1, X2, Y2, X3, Y3 ..., kde X1, Y1, X2, Y2, X3, Y3 ... jsou souřadnice vrcholů polygonu, pokud je polygon obdélník, pak stačí zadat jeho horní levý a pravý spodní vrchol „přímých“ coordů = X1, Y1, X3, Y3).
Syntax: kruh"coords = X, Y, R. >

Příklad obrázku - mapy:

Druhou nejdůležitější součástí vyplňování webových stránek po textu bezpochyby bude grafický design. Jsou to různé druhy kreseb, fotografií a možná i videoklipů. Můžeme také použít soundtrack k zobrazování webových stránek.
Začneme umístěním grafiky. Prohlížeče dokážou zobrazit pouze tři druhy grafických souborů. Jedná se o soubory GIF, JPEG a PNG. Soubory GIF vám umožňují vytvářet animované obrázky. Soubory JPEG se běžně používají k ukládání fotografických obrázků. Nově se vynořil Formát PNG umožňuje kombinovat dobrá kvalita obrázky a malé množství grafických souborů. Ale poté, co byl obrázek zabalen do grafického souboru, musí být ještě nějakým způsobem vložen na webovou stránku.

K tomu se použije značka s mnoha parametry. Tato značka nemá koncový pár, protože nevytváří žádný rozsah pro pravidlo zobrazení, pouze vkládá do obsahu webové stránky grafický obrázek. Ve skutečnosti může být grafický obrázek také hypertextovým odkazem nebo dokonce skrýt několik hypertextových odkazů za sebou, ale o hypertextových odkazech si povíme v další části této kapitoly, ale prozatím si vymyslíme pravidla pro používání značky .

Hlavní a požadovaný atribut značky je atribut src. Hodnota tohoto atributu je adresa grafického souboru, který má být vložen, nebo, přesněji, jeho adresa URL. Pokud je grafický soubor umístěn na stejném webovém serveru, pak stačí zapsat úplný název souboru, včetně cesty k němu v podadresářích, tj. Pokud adresář obrázků s obrázky, pak značka pro vložení grafického obrázku bude vypadat takto:

V tomto příkladu používáme obrázek GIF nalezený v souboru s názvem pictl.gif, který je zase umístěn v adresáři s názvem images. Je třeba poznamenat, že lomítka jsou lomítka, šikmá v opačném směru, než když se používají v cestách k souborům operačních systémů rodin DOS a Windows. Faktem je, že webové servery byly původně založeny na operačním systému Unix, který podporuje souborový systém s takovými lomítky. Nyní nezáleží na tom, který operační systém podporuje server hostující web, všechny cesty jsou zaznamenány stejným způsobem a zpracovány správně. software server.

Na úsvitu vývoje WWW prohlížeče zobrazovaly pouze textové informace, nebyla podporována žádná grafika. Nyní se prakticky nenacházejí, ale každý prohlížeč má možnost zakázat stahování grafiky. Proto byste měli vždy použít alternativní textovou reprezentaci obrázku. Jednoduše si musíte připravit text, který se zobrazí místo obrázku, pokud jej z nějakého důvodu nemůže načíst prohlížeč. Tento text je přidán do značky pomocí parametru ait, jehož hodnota je požadovaný textový řetězec, to znamená, že dostaneme přibližně následující konstrukci:

V případě, že je grafický obrázek stále zobrazen v prohlížeči, text alternativního textového zobrazení se zobrazí jako „nápověda“, krátká textová výzva, když uživatel umístí kurzor myši na požadovaný grafický obrázek.

Existuje však také podrobnější možnost vytváření takových textových výzev. Parametr longdesc nastavuje adresu internetového zdroje, kde Plný popis této grafiky. Hodnota tohoto parametru je samozřejmě URL zdroje s popisem obrázku.

Parametr name vám umožňuje zadat jedinečný název obrázku, který identifikuje tento designový prvek webové stránky. Tento parametr je zachován pro účely zpětné kompatibility, je ponechán od předchozí verze HTML standard. Nyní všechny značky pro tento účel používají parametr id.

Ve výchozím nastavení je grafický obrázek zobrazen přesně tak, jak byl vytvořen, se stejnými svislými a vodorovnými rozměry. Máme však možnost explicitně nastavit velikost obrázku podle našeho uvážení. K tomu slouží parametry výšky a šířky. Už víme, jak nastavit rozměry v pixelech nebo procentech. Je třeba pouze poznamenat, že prohlížeče mají tendenci zachovávat proporce obrázku, takže explicitní nastavení rozměrů, které mění proporce, může prohlížeč ignorovat a prohlížeč zvolí takové rozměry, které by byly co nejblíže ty, které určí uživatel, aniž by došlo k porušení proporcí. Proto jsou grafické obrázky obvykle připravovány pro webové stránky ve velikostech, které budou použity při jejich zobrazení na webových stránkách. A pokud má být jeden obrázek zobrazen několikrát s různými velikostmi, je snazší připravit několik grafických souborů, než dát obrázky pro neoprávněné zobrazení prohlížeči, který může narušit celé rozložení webových stránek.

Pomocí parametrů můžeme určit množství mezer, které budou oddělovat grafický obrázek od okolních ostatních prvků designu webové stránky, tj. Ve skutečnosti nastavit odsazení obrázku. K tomu slouží parametry hspace a vspace. Parametr hspace nastavuje horizontální odsazení v pixelech a parametr vspace nastavuje vertikální odsazení. Všimněte si, že jako hodnoty pro tyto parametry lze použít pouze číselné hodnoty udávající vzdálenosti v pixelech. Pro tyto parametry neexistuje žádná nulová hodnota, ale obvykle každý prohlížeč používá malou nenulovou hodnotu.

A pomocí parametru border můžeme nastavit tloušťku okraje, který obklopuje obrázek. Jako obvykle je hodnotou parametru číslo udávající tloušťku v pixelech. Výchozí hodnota je nula, což činí okraj neviditelným.

Je také nutné zmínit zarovnání grafického objektu vzhledem k textu, který kolem něj proudí. K tomu slouží parametr align. Jako hodnotu lze použít jedno klíčové slovo z předdefinované sady klíčových slov. Dolní, střední a horní hodnoty se používají k umístění prvního řádku textu, který teče svisle kolem obrázku. Nejvyšší hodnota ji přesune nahoru, dolů - dolů a prostřední hodnota umožní vertikální vystředění řádku. Levá a pravá hodnota slouží k horizontálnímu zarovnání grafiky. První hodnota vlevo, jak asi uhodnete, přesune obrázek na levý okraj bloku, ve kterém je zobrazen, a doprava doprava.

Nyní je načase na příkladech vidět, jak můžeme obrázek umístit a zkombinovat s textem, který by měl obtékat požadovanou grafiku.

Výpis 1.11

"http://www.w3.org/TR/htm!4/strict.dtd">




<р>
Toto je text, který obtéká kresbu.
Toto je text, který obtéká kresbu.

Vzhled tohoto dokumentu HTML při zobrazení pomocí prohlížeče je znázorněn na obr. 1.11.

Rýže. 1.11. Okno prohlížeče zobrazující výsledek zobrazení souboru v Seznamu 1.11

V tomto příkladu jsme použili čistou značku pro vložení obrázku bez jakékoli další parametry... Jak vidíme, obrázek je vložen hned za první větu, kam jsme umístili značku ... Současně, pokud bychom zmenšili velikost výřezu prohlížeče vodorovně, aby se tam první věta a obrázek nevešly na jeden řádek, pak by se nejprve zobrazila nabídka a již pod ní obrázek, stlačený doleva okraj výřezu. Vpravo od něj by se text, který za ním následuje, začal zobrazovat takovým způsobem, že se základní linie čáry shoduje se spodním okrajem obrázku.

Nyní do značky zobrazení obrázku přidáme možnost vodorovného zarovnání. Výsledný kód je uveden ve Výpisu 1.12.

Výpis 1.12

"http://www.w3.org/TR/html4/strict.dtd">


<р>Toto je text, který obtéká kresbu. align = "ieft">
Toto je text, který obtéká kresbu. Toto je text, který obtéká kresbu.
Toto je text, který obtéká kresbu.

Jak vidíte, v tomto případě se začne znovu zobrazovat text, poté grafický obrázek přitlačený k levému okraji podle směrnice dané pomocí parametru zarovnání a zbytek textu je umístěn napravo od obrázek (obr. 1.12), to znamená, že obrázek nemůže mít první řádek, protože text začíná před ním. Totéž se stane, pokud použijete parametr zarovnání s hodnotou vpravo, ale obrázek bude přilepený pouze k pravému okraji výřezu a text kolem něj bude proudit z levé strany. To jsou všechny změny.

Nyní se podívejme na to, jak funguje vertikální zarovnání. Přestože je parametr zarovnání vložen do značky obrázku, nejnápadnější změny jsou stále v textu, který obklopuje obrázek. Podívejme se na efekt parametru svislého zarovnání na příkladu.

Rýže. 1.12. Okno prohlížeče zobrazující výsledek zobrazení souboru v seznamu 1.12

Výpis 1.13

"http://www.w3.org/TR/html4/striqt.dtd">




<р>Toto je text, který obtéká kresbu. align = "střední">
Toto je text, který obtéká kresbu. Toto je text,
který obepíná kresbu.
Toto je text, který obtéká kresbu.

Výsledek vykreslení tohoto dokumentu HTML je uveden na obr. 1.13.

Rýže. 1.13. Okno prohlížeče zobrazující výsledek zobrazení souboru v Seznamu 1.13

V tomto případě nastavíme svislé zarovnání na střed, to znamená, že první řádek textu po značce pro vložení obrázku se zobrazí ve svislém středu volného místa napravo od obrázku. Zbytek textu je zobrazen pod obrázkem. Pokud nastavíme parametr zarovnání na začátek, pak se první řádek zobrazí vedle horního okraje obrázku. A při použití spodní hodnoty se v dolní části obrázku zobrazí první řádek textu. Vezměte prosím na vědomí, že prohlížeč rozpoznává pouze jeden parametr zarovnání, to znamená, že můžeme určit svislé nebo vodorovné zarovnání. Pokud vestavěné prostředky pro umístění a zarovnání obrázku nestačí, můžete se obrátit na proces rozvržení pomocí tabulek. Na použití tabulek se podíváme v pozdější části této kapitoly.

Máme možnost používat videa při navrhování webových stránek. S jejich používáním byste měli být velmi opatrní, protože soubory obsahující tyto zdroje videa jsou obvykle poměrně velké. A aby si je mohl vzdálený uživatel zobrazit ve svém prohlížeči, bude si muset tento soubor zcela stáhnout do svého počítače. Pomocí kanálů, které jsou k dispozici většině uživatelů internetu, může takový postup trvat poměrně dlouho. Nikdo z nás nerad čeká na načtení webové stránky.

Prohlížeče jsou obvykle schopny přehrávat video soubory ve formátech AVI, Real Video a Windows Media... A jejich zavedení na webovou stránku se provádí pomocí stejné značky ... Parametr dunscr se však používá k určení umístění souboru videa. Ve výchozím nastavení se videoklip vložený do webové stránky přehraje jednou, bezprostředně po úplném načtení stránky. Máme však několik možností, jak regulovat proces přehrávání klipu nebo dát uživateli možnost ovládat jeho přehrávání.

Pokud tag povolíme start parametr, pak můžeme výslovně určit událost, po které bude muset prohlížeč načtený videoklip přehrát. Lze použít hodnoty tohoto parametru klíčová slova přejetím myší a otevřením souboru. První z nich označuje, že by se klip měl přehrát poté, co uživatel umístí kurzor myši na místo vyhrazené pro vložení videa, a druhý znamená, že přehrávání začne bezprostředně po úplném načtení souboru HTML. Můžeme však tyto dvě možnosti kombinovat. V tomto případě bude značka pro vložení videa vypadat takto:

Pomocí parametru loop můžeme určit, kolikrát je potřeba video přehrát. Hodnota tohoto parametru je číslo, které určuje počet opakování videoklipu. Pokud však chceme, aby se video přehrávalo nepřetržitě, bez nějakého pevného počtu opakování, pak bychom měli použít nekonečnou hodnotu. A pomocí parametru loopdelay můžeme nastavit časové zpoždění mezi opakováním videoklipu. Hodnota tohoto parametru je číslo, které udává dobu v milisekundách. Podívejme se na aplikaci těchto parametrů pomocí následujícího fragmentu kódu jako příklad:

Zde výslovně uvádíme, že videoklip se přehraje dvakrát bezprostředně po načtení webové stránky s pětisekundovým zpožděním mezi opakováním.

V tomto případě sami kontrolujeme zobrazení video souboru. Tuto výsadu ale můžeme také přenést na vzdáleného uživatele, který načte webovou stránku. Chcete -li to provést, musíte zadat značku parametr control bez jakékoli hodnoty. Přítomnost tohoto parametru ve značce jasně naznačuje, že se spolu s videoklipem na webové stránce zobrazí ovládací prvky přehrávání.

Parametry, které jsme zvážili, jsou dostatečné pro správné vložení souborů videa do obsahu webové stránky. Uvažujme podrobný příklad (obr. 1.14).

Výpis 1.14

"http://www.w3.org/TR/html4/strict.dtd">
.

<р>Prostý text.

Rýže. 1.14. Okno prohlížeče zobrazující výsledek zobrazení souboru zobrazeného v seznamu 1.14

Přirozeně, protože postup pro vložení fragmentu videa do těla webové stránky je speciální případ vložení grafiky, pak všechny ostatní parametry vztahující se ke značce jsou použity na značku pro vložení fragmentu videa. , jako jsou možnosti zarovnání, explicitní velikost a další.

Zvukový design webové stránky také patří k multimediálním možnostem. Zvuk však můžeme použít pouze jako formu pozadí, to znamená, že určitý zvukový soubor se přehraje v počítači vzdáleného uživatele poté, co načte webovou stránku. Pokud je na jeho počítači samozřejmě nainstalována zvuková karta, to znamená, že se do počítače vzdáleného uživatele nejprve stáhne soubor HTML s webovou stránkou a poté se načtou všechny ostatní soubory použité při návrhu této webové stránky, např. jako grafické soubory, video - a zvukové klipy.

Aby tedy zobrazení webové stránky doprovázela reprodukce zvuku, musíte do kódu stránky vložit značku ... Značka není umístěna v těle webové stránky, ale v záhlaví, tj. Mezi značkami a... Tato značka má požadovaný parametr src, jehož hodnota je adresa URL zahrnuté zvukový soubor... Je třeba poznamenat, že prohlížeče zaručeně rozpoznávají a přehrávají zvukové soubory MIDI a WAV. Reprodukce jiných formátů, například MP3 a Real Audio, je možná pouze v případě, že jsou k prohlížečům připojeny další moduly.

Stejně jako u videoklipů můžeme pomocí parametru loop nastavit počet přehrání zvukového souboru. Hodnota tohoto parametru je počet opakování. Pokud potřebujete neustále přehrávat zvukový fragment, měli byste použít hodnotu „-1“, to znamená, že pokud chceme při načítání webové stránky nepřetržitě přehrávat určitý zvukový soubor, měli byste použít následující konstrukci:

Tím naše úvaha o používání multimediálních a grafické objekty při návrhu webových stránek a přejděte k další části první kapitoly.

Na tento moment téměř všechny obrázky na webu jsou ve dvou formátech: GIF a JPEG. Třetí uchazeč, který stojí za zmínku, formát PNG, bojuje o podporu a pozornost prohlížeče. Dále - krátká recenze online velké grafické formáty „velké trojky“. Další informace najdete v kapitolách pro každý formát.

GIF- GraficInter change Format lze nazvat tradiční formát webového souboru. Jednalo se o první formát souborů podporovaný webovými prohlížeči a dodnes je hlavním grafickým formátem na webu.

Jeho vlastnosti jsou následující:

• - Podporuje ne více než 256 barev (méně je možné a často potřebné);
• - používá paletu barev;
• - používá kompresi bez ztráty informací pomocí metody LZW (která je podobná té, která se používá v archivátoru PKZIP, a proto se soubory GIF v budoucnu prakticky nekomprimují);
• - Podporuje prokládané skenování;
• - je streamovací formát, tj. zobrazení obrázku začíná během přenosu;
• - umožňuje přiřadit transparentní atribut jedné z barev v paletě, která se používá při vytváření takzvaných transparentních GIF;
• - má schopnost uložit několik obrázků do jednoho souboru, který se používá při výrobě animovaných GIF;
• - Podporuje možnost vkládat do souboru řídicí bloky, které vám umožňují vkládat do souboru komentáře (například o autorských právech), zpoždění mezi zobrazením obrázku atd.

A nyní malé upřesnění - k čemu tyto vlastnosti mohou vést. Jak jsme napsali, GIF nepodporuje více než 256 barev, což znamená, že všechny obrázky, které ukládáme ve formátu GIF, explicitně nebo implicitně snižují počet barev, aby se vešly do tohoto limitu ( různé programy s různou mírou úspěchu). A proto ten závěr - pokud vezmeme krásná fotka s plynulé přechody a jemné odstíny barev, pak po transformaci bude vše mnohem horší - odstíny již nebudou nepolapitelné a celá fotografie získá nepřirozený, nerealistický vzhled. Pokud tedy stále potřebujete uložit fotografii ve formátu GIF a přenést všechny odstíny, pak musíte jít na triky. Například můžete na fotografii použít nějaký umělecký filtr a převést jej na kresbu nebo použít tónování. S ukládáním výkresů a výkresů v tomto formátu však nejsou žádné problémy, zpravidla jsou dobře komprimovány a neobsahují mnoho barev.

Druhým nejpopulárnějším formátem obrázků na webu je JPEG - Joint Photographic Experts Group. Obsahuje 24bitové barevné informace. To je 16,77 milionu barev, na rozdíl od 256 barev formátu GIF. JPEG používá takzvanou ztrátovou kompresi. To znamená, že některé informace o obrázcích jsou během procesu komprese odstraněny, ale ve většině případů je zhoršení kvality obrazu neškodné a často ani nepostřehnutelné.

Fotografie nebo jakékoli obrázky s plynulými přechody barev je nejlepší ukládat ve formátu JPEG, protože nabízí obrázky ve vyšší kvalitě, které se vejdou do menšího souboru. JPEG však není nejlepší řešení u grafiky s monochromatickými oblastmi, protože tento formát bývá barevně skvrnitý a výsledný soubor bude obvykle o něco větší než GIF pro stejný obrázek.

O trvalé používání na webu soutěží třetí grafický formát. Jedná se o grafický formát PNG - Portable Net work, který je i přes některé výhody od roku 1994 víceméně ve stínu. Je to teprve nedávno, kdy prohlížeče začaly podporovat PNG jako vloženou grafiku, ale PNG má potenciál stát se velmi populárním formátem na webu. Proto je zde zařazen do „velké trojky“. PNG může podporovat 8bitové indexované barvy, 16bitové polotóny nebo 24bitové plnobarevné obrázky pomocí bezeztrátového schématu komprese. To poskytuje obrázky ve vyšší kvalitě a někdy méně souborů než soubory GIF. Kromě, Soubory PNG mají několik skvělých funkcí, jako je vestavěné ovládání gama a různé úrovně průhlednosti (to umožňuje zobrazit obrázek na pozadí prostřednictvím jemných stínů).

Protože webové obrázky existují pouze na obrazovce, je technicky správné měřit jejich rozlišení v pixelech na palec (ppi - pixely za palec). Další jednotka měření rozlišení - bodů na palec (dpi - dotsperinch) se týká rozlišení tištěných obrázků a závisí na rozlišení tiskového zařízení.

Ale, protože skutečné rozměry grafiky závisí na rozlišení displeje, stává se měření v palcích pro webové prostředí nepřijatelným. Jedinou smysluplnou měrnou jednotkou je pixel.

Je praktické vytvořit obrázky o velikosti 72 ppi (to je nejlepší způsob pro zobrazení), přičemž věnujte pozornost pouze celkovým rozměrům v pixelech. Při vytváření grafiky na webu nemusíte vůbec používat palce. Důležitá je velikost obrázku ve srovnání s jinými obrázky na stránce a celková velikost okna prohlížeče.

Mnoho uživatelů například stále používá 14palcové displeje s rozlišením 640 x 480 pixelů. Aby se zajistilo, že úvodní obrazovka vyplní celý prostor obrazovky, je nejlepší, aby nebyla širší než 600 pixelů (za předpokladu, že některé pixely vpravo a vlevo budou použity pro okno a pro posuvník). Velikost zbývajících tlačítek a obrázků na stránce by měla být měřena v pixelech vzhledem k banneru, který je široký 600 pixelů.

Bezpochyby to byla grafika, která udělala web tak, jak ho dnes vidíme, ale jako designér byste měli vědět, že mnoho uživatelů má pocit lásky a nenávisti ke grafice na webu. Mějte na paměti, že grafika prodlužuje čas potřebný k přenosu webové stránky přes síť; velké množství grafiky znamená značné časy stahování, což prověří trpělivost čtenáře, zvláště pokud vytáčí pomocí standardního vytáčeného připojení.

PROTI V tomto ohledu pro webdesignéra platí jedno nejdůležitější pravidlo: velikost souboru grafického obrázku by měla být co nejmenší! Vytváření obrázků určených k přenosu po síti klade odpovědnost na vývojáře, aby brali časy načítání vážně.