vloží do stránky obrázek kotěte zarovnaný doprava s popiskem kotě. O jednotlivých atributech pojednává další text.

Transkript

1 Vkládání obrázků: Tag IMG V HTML se obrázky vkládají nepárovým tagem IMG, který má jeden povinný a mnoho nepovinných parametrů. Tím povinným je src, totiž umístění obrázku. Například <img src="nejaky_obrazek.gif"> do stránky vloží obrázek, který se jmenuje se nejaky_obrazek.gif a je v témže adresáři jako ona stránka. Pokud bude v jiném adresáři (složce), přidá se adresářová cesta. Například <img src="adresar/jiny_obrazek.gif"> Dá se použít i absolutní adresa, třeba src=" Kromě src se zadávají další atributy obrázku. Např. kód <img border="3" src="kote.gif" alt="kotě" align="right" width="60" height="60"> vloží do stránky obrázek kotěte zarovnaný doprava s popiskem kotě. O jednotlivých atributech pojednává další text. Zadávání rozměrů Zásadně se doporučuje zadávat rozměry obrázků jako parametry tagu img. Například <img src="nejaky_obrazek.gif" width="60" height="100"> je lepší než <img src="nejaky_obrazek.gif"> Po natažení oba příklady vypadají stejně, rozdíl je při natahování. Pokud se totiž u obrázku uvedou rozměry, prohlížeč pro obrázek vyhradí místo, přestože obrázek zatím není stažený. Pokud se rozměry neuvedou, místo se nevyhradí a po natažení obrázku text jakoby "poskočí", což může způsobit zmatek ve čtenářově orientaci, ale hlavně to vypadá hnusně. Největší problémy tak vznikají, pokud je obrázek v tabulce. Zjištění velikosti obrázku Pokud nevíte, jak je přesně obrázek velký, dejte ho do stránky napřed bez rozměrů. Pak si stránku zobrazte v prohlížeči, klikněte pravým tlačítkem vlastnosti obrázku a přečtěte si rozměry. Ty potom zadejte do kódu. Zmenšování a zvětšování obrázků Zpravidla se u obrázků zadávají skutečné rozměry v pixelech (pixel je jeden obrazovkový bod). Pokud se ale uvedou rozměry jiné, obrázek změní zobrazení. Takto se dají obrázky zmenšovat, zvětšovat a deformovat (dělá to až prohlížeč). Přesto se nic z toho v praxi příliš nepoužívá: Deformace je nevhodná z estetických důvodů. Zmenšování se nepoužívá, protože se obrázek nemusí vykreslit správně, ale hlavně se při tom zbytečně přenáší celý velký obrázek, z něhož se pak zobrazí jenom některé bity. Zvětšování se nepoužívá z toho důvodu, že výslednou grafiku to rozkreslí do hrubých čtverečků. Pokud je třeba vložit obrázek jiné velikosti, doporučuji změnit rozměry natvrdo v nějakém grafickém programu

2 Zadávání procent Lze zadat šířku a výšku obrázku jako procenta ze šířky nebo výšky stránky (šířka většinou závisí na šířce okna prohlížeče). Místo počtu pixelů se prostě zadávají procenta. Při zadání obou parametrů se obrázek zdeformuje, a tak je dobré zadávat jen jeden. Pozor, umístíte-li obrázek do buňky tabulky, procenta se počítají ze šířky a výšky této buňky! Popis obrázku (alt) Když se v prohlížeči přejede obrázek myší, obvykle se zobrazí světle žlutá bublina s textem. Stejný text se na místě obrázku zobrazí, dokud není obrázek natažený (nebo když má někdo vypnuté zobrazování obrázků). Tento text se dá zadat jako atribut tagu IMG, například: <img src="runa.gif" alt="yuhůova runa"> Někdo zadávání altu ignoruje. Potom se tam nezobrazí nic, nebo popis, který zadal automaticky editor. Takový automatický popis bývá pěkný paskvil: například ve FrontPage 98: alt="runa.gif (357 bytes)". Už jsem se setkal s lidmi, kteří si mysleli, že když se ten text změní, tak že to potom nebude fungovat. Funguje to, klidně to měňte. Zásadní význam má alt pro alternativní média, například textové prohlížeče, indexovací roboty, zrakově postižené, hlasové výstupy. Takovým klientům poskytují zástupnou informaci o obrázku. V novějších prohlížečích se dá stejného efektu dosáhnout pomocí atributu title, ten také zobrazuje žlutou bublinu. Pak jde dělat bublinu i u textu. Obtékání a umístění Atribut align tagu IMG umožňuje nastavit buďto obtékání obrázku textem, nebo jeho umístění na řádku. Je to poněkud nekoncepční, ale jednoduché: hodnoty left a right nastavují obtékání, všechny ostatní hodnoty určují umístění obrázku na řádku. Příklad: <img src="runa.gif" align="left"> vloží do dokumentu obrázek, jehož horní okraj zarovná s dolním okrajem aktuálního řádku, levý okraj bude na levém okraji stránky a text bude obtékat. Hodnoty pro umístění na řádku jsou align= top, textop, middle, absmiddle, baseline, bottom, absbottom, center. Jejich význam si vyzkoušejte, já tomu sám moc nerozumím, protože to považuji za málo použitelné. Rámeček Atribut border vykreslí kolem obrázku rámeček. Zadává se šířka rámečku v pixelech. <img src="obrazek.gif" border="3"> Rámeček bývá černý (barva písma), ale je-li obrázek v odkazu, tak modrý (barva odkazu). Pokud border nezadáte, některé prohlížeče rámeček vykreslí, jiné ne. Zrušení rámečku Je-li obrázek v odkazu, prohlížeče jej obalují barevným (většinou modrým) rámečkem. Chcete-li se tomu vyhnout, zadejte border=

3 Obrázek jako odkaz: Zmenšeniny, galerie Kdo vystavuje více obrázků (například kolekci fotografií), měl by použít klikací zmenšeniny, aby se to nestahovalo roky. Od každého obrázku je potřeba vytvořit si menší kopii (velikostně i datově), která se umístí třeba do stejné složky a vloží do stránky. Velký originál obrázku se do stránky nevkládá, ale nechá se na něj mířit odkaz: <a href="obrazek1.jpg"><img src="obrazek1_zmensenina.jpg" width="80" height="50" alt="popis obrázku"></a> Je dobrým zvykem dělat všechny zmenšeniny na stránce stejně vysoké nebo široké a umístit je do tabulky, aby zařezávaly. Dost často se obrázky nechávají zobrazovat v novém okně (<a target="_blank"..>). Existují programy, které to umějí udělat automaticky. Myslím, že se to jmenuje Ulead, taky to umí FrontPage 2002 a určitě spousta jiných programů. Obrázky v odkazech Do odkazu se dá umístit cokoliv, třeba celá kapitola (jen ne další odkaz). Často a rády se tam dávají obrázky, takhle nějak to vypadá ve zdroji: <a href="někam.htm"><img src="obrázek.gif"></a> <a href="default.htm"><img border="0" src="images/jakpw.gif" alt="jak psát web" width="131" height="88"></a> Potom obrázek funguje jako odkaz. Aby kolem obrázku nebyl rámeček, musí se zadat border="0". Je dobré a nutné do obrázku vyplnit parametr alt, aby byl odkaz zřejmý, i když se obrázek zatím nenatáhne. Pokud už se natáhne, v Internet Exploreru se popisek (alt) objevuje ve světle žluté bublině u ukazatele myši. To je obecně vzato chyba prohlížeče, správně by v bublině měl být title. Někteří autoři dávali do odkazů obrázky hlavně kvůli té bublině s popiskem (tenkrát ještě title neexistoval). Ta bublina se dá udělat i nad textem pomocí atributu title. Měnící se obrázky Dá se zařídit, aby se obrázky po přejetí myši změnily. Buďto jednoduše pomocí CSS a filtrů, nebo složitě pomocí JavaScriptu. CSS + pozadí Do stylopisu se dá: a.menici {background-image: url(prvni.gif)} a.menici:hover {background-image: url(druhy.gif)} a odkaz se zapíše: <a class="menici" href="kamkoliv">měnící se odkaz</a> Příklad měnícího se odkazu pomocí CSS vlastnosti background-image. měnící se odkaz Odkaz má stylem nastavené pozadí, které se při přejetí myší změní na jiné pozadí. Zápis stylu: - 3 -

4 <style> a.menici {background-image: url('../images/prvni.gif')} a.menici:hover {background-image: url('../images/druhy.gif')} </style> Pro detailní pochopení příkladu si zobrazte zdroj. Přejížděný odkaz při napoprvé trochu problikne, protože se ten druhý obrázek musí napřed stáhnout. Nedávno Pixy vymyslel, jak to dělat jedním obrázkem pomocí změny background-position. Příklad se vztahuje k textu zdokonalení odkazů. Grafické formáty: Datový formát Obrázek je soubor. Na internetu se běžně používají dva grafické formáty -- *.jpg a *.gif. Stručně řečeno jpg je lepší na fotografie, gif na všechno ostatní. Jak udělat obrázek (pro začátečníky) Jak se třeba dá získat obrázkový soubor: Stáhnout z webu pomocí příkazu uložit obrázek jako (save image as) a uložit na disk. Najít někde na disku nebo použít sbírky obrázků, které se dodávají s některými programy. Nakreslit si obrázek myší v grafickém programu a uložit to jako gif nebo jpg. Naskenovat a uložit, také v grafickém programu. Sejmout obrazovku z nějakého programu a upravit v grafickém programu. Jinými slovy, možností je více, ale cílem musí být soubor ve formátu.gif nebo.jpg Ten se pak vloží do stránky. Grafický program Existují jich tisíce. Na Linuxu kraluje v grafických programech Gimp (který je zdarma i pro Windows, ale tam někdy padá). Já používám program Paint Shop 5. Pro současné potřeby webové grafiky je téměř dokonalý a neznám nikoho, kdo by v něm rozuměl všem funkcím. Adobe Photoshop se dá také použít, ale je dražší, jde o profesionální nástroj. Je zaměřený na obecnou bitmapovou grafiku a nástroje pro web má skoro jenom jako doplněk. Microsoft PaintBrush (windowsovské Malování) od verze 2000 umí také ukládat do jpg a gif, ale pracuje se s nimi jen v nouzi. Lidé si strašně chválí program Macromedia Fireworks, já jej neznám. Dále existuje spousta polo-editorů, které umějí třeba jenom ořezávat a optimalizovat, např. Ulead transformer. atd. Hlavním kritériem použitelnosti editoru je, zda umí ukládat do jpg a gif. Takže třeba Malování z Windowsů 98 je na nic. Datový objem Hlavní přikázání webového grafika zní: obrázky se nesmějí dlouho stahovat, musejí být co nejmenší. Proto jsou gif i jpg formáty kompresní

5 forma optimu m snesitelné maximum tlačítko 2 kb 5 kb pozadí stránky 2 kb 10 kb reklamní baner 8 kb 20 kb fotografie 15 kb 40 kb zmenšenina fotky obrázkový nadpis 5 kb 10 kb 3 kb 8 kb diagram, komix 60 kb Dávat na web obrázek větší než takových 60 kb je vcelku nesmysl, protože se na jedné obrazovce stejně nemůže patřičně zobrazit. JPG Formát JPG (též JPEG) je vhodný pro ukládání fotografií a obrázků s velkou barevnou hloubkou. Jpeg neumožňuje dělat průhledné nebo animované obrázky. Používá ztrátovou kompresi, to znamená, že část informace vypouští. Dělá to tak, aby to lidské oko pokud možno nepoznalo. Míra této komprese se dá nastavit v grafickém programu. Ale pozor, po každém znovuotevření a uložení se opět provádí komprese, takže se tím obrázek stále znehodnocuje. Je proto dobré mít předlohu uloženou v něčem neztrátovém a po každé úpravě importovat do jpg. GIF GIF také používá kompresi, ale neztrátovou, takže jsou ty soubory relativně větší než JPG, ale zato jsou přesné (zachovávají barvy a kontury). Může se v něm vyskytovat maximálně 256 barev. Jedna z barev se může označit jako průhledná (tu prohlížeč potom nezobrazí), gify též podporují animace. Barevná hloubka GIFu Na Internetu záleží na každém bitu, a proto čím jsou obrázkové soubory menší, tím lépe. Je zbytečné kódovat v gifu 256 barev, když používá třeba jenom dvě nebo čtyři. Pokud se v grafickém programu sníží barevná hloubka (počet barev), podstatně se ušetří velikost souboru (u černobílého souboru až osminásobně). Postup při snižování počtu barev se opět liší od programu k programu. V angličtině je to obvykle příkaz "decrease color depht" nebo "export - bitmap". Proužkování - 5 -

6 Z datového formátu GIFu vyplývá zajímavá vlastnost: pokud řádek bodů obsahuje jenom jednu barvu, velmi se šetří datový objem. Jednoduchý gif obsahující zejména barevné proužky (a málo přechodů) se tedy uloží velmi úsporně. Prokládání (progresivní vykreslování) Při ukládání souborů JPG i GIF se dá nastavit, zda se mají vykreslovat prokládaně. Konkrétní postup nastavení prokládání při ukládání obrázku závisí na použitém editoru. V anglických editorech se to jmenuje "interlaced" nebo "progresive encoding". Normálně se obrázky vykreslují po řádcích odshora, ale když se nastaví toto prokládání, tak se napřed vykreslí zamlžené, ale celé. Jak postupně docházejí další data, tak se zobrazení zpřesňuje. Je to hezké. Další formáty Existuje "nový" formát png (Portable Network Grafics), který by měl mít výhody gifu i jpegu. Ale příliš se nepoužívá, pravděpodobně kvůli nepodpoře starších prohlížečů. Dnes (doplněno 2003) jej lze bez obav používat. Prohlížeče verze 4 v sobě mají podporu i jiných formátů; kupříkladu IE 4 podporuje minimálně bmp. Ale takový soubor rozhodně nedoporučuji do stránek zařazovat, protože je moc velký a prohlížeče kromě IE jej stejně číst neumějí. Převážná většina netradičních grafických formátů potřebuje ke svému zobrazení plužinu (plug-in), což je podpůrný program prohlížeče. Chcete-li umístit na stránky něco hodně divokého, musíte si na webu najít plužinu. Obrázek pak nezadávat jako <img>, ale jako <object> nebo <embed> s odkazem na umístění plužiny. Průhledné obrázky V grafickém editoru můžete udělat gif, který bude mít některé části průhledné. Výhody jsou tyto: pod obrázkem se může vykreslovat pozadí pokud změníte barvu pozadí stránky, nemusíte se o obrázek starat při použití animací, pozicování a různých obtékání působí barevné okraje obrázku rušivě. Zprůhlednění se v každém grafickém editoru dělá jinak, idea je taková, že se vybere jedna barva a ta se nastaví jako průhledná. Jak na to: 1. Snižte barevnou hloubku nejvýše na 256 barev, raději méně. 2. Všechny oblasti, které mají být průhledné, vyplňte nějakou barvou (doporučuji něco kontrastního, stejně pak zmizí). 3. Tuto barvu pak nastavte jako průhlednou. Většinou na to existuje příkaz, který dovoluje ťuknout na tu barvu. Pokud máte anglický grafický editor, hledejte příkaz, ve kterém se vyskytuje slovo "transparent" (angl. průhledný). 4. Uložte jako gif. Opravdovým problémem průhledných gifů jsou různé přechody a okraje ploch, které obsahují mnoho přechodových odstínů. Na jiné barvě pozadí potom budou po okrajích tečkované. Takové obrázky doporučuji raději dávat do jpg a zprůhlednění oželet

7 Jiným problémem může být to, že je potřeba zprůhlednit více než jednu barvu. To nejde. Je potřeba všechny takové odstíny převést na jeden a ten zprůhlednit. Když se průhledné obrázky tisknou, místo průhledné barvy se netiskne nic. Kdyby byl pod obrázkem jiný objekt (např. pozicovaný), nevytiskne se. Animované gify Formát gif dovoluje poskládat v sobě několik obrázků a sestavit z nich animaci. Musíte na to mít nějaký speciální program, většinou se to jmenuje "bla bla Animator". V normálním editoru si připravíte grafické sekvence, které v animátoru poskládáte, nastavíte časování a uložíte do gifu. Animované gify se ve stránkách používají úplně stejně jako normální gify, což je fantastická výhoda. Nevýhodou animovaných gifů je značná rušivost pro čtenáře (takže se používá prakticky pouze v reklamách) a někdy i dost velký datový objem. Sejmutí obrazovky Když chci udělat obrázek z toho, co mám na obrazovce, použiju klávesu Print Screen (nahoře nad insertem). V tu chvíli se do schránky vloží obrázek aktuální obrazovky (bez ukazatele myši). Ten se dá pak vložit do nějakého grafického programu příkazem Vložit (Ctrl + V) a upravit. Zkratka Alt + Print Screen sejme pouze aktivní okno. To je často dost pohodlné, protože se to pak nemusí ořezávat. 1.předpoklad pro vložení obrázku do stránky je jeho uložení ve vhodném formátu. Prohlížeče podporují formáty obrázků GIF, JPEG, PNG (ping), který byl speciálně vyvinut pro potřeby Webu. GIF... podporuje max.256 barev (8 bitová barevná hloubka), podporuje transparentní obrázky a animaci, používá bezztrátovou kompresi (nepoužiji-li víc jak 256 barev) JPG... používá ztrátovou kompresi, hodí se pro naskenované fotografie, kde se optické defekty vzniklé komprimací ztrácejí. Lze nastavit Q koeficient, čím je větší, tím je obrázek kvalitnější a větší. Nehodí se pro obrázky kreslené na počítači. Podporuje režim TrueColor (16 mil. barev=2 24 ) Možnosti zápisu URL: Adrese se také říká URL. Znamená to Unique Resource Locator, čili jednoznačné umístění zdroje. Používá se nejenom u odkazů, ale i při vkládání obrázků, CSS souborů, objektů, prostě různých souborů. Například " je URL Seznamu. Pokud vás nezajímá teorie jeho složení, pokračujte čtení u relativního odkazu

8 Složení URL URL lze symbolicky zapsat takto: protokol://server.doména.generickádoména:port/cesta/soubor#záložka?dotaz Zjednodušeně: protokol://server.doména.generická-doména/cesta/soubor Příklady: odkaz protoko l serve r doména gen. domén a cesta soubor http: www seznam cz není není http: dusan pc-slany cz interne t default.htm m http: www jakpsatwe b cz není odkazy_html.ht m URL se vyplňuje do atributu href tagu a. Symbolicky zapsáno: <a href="url">odkaz</a> Protokoly Protokolům se někdy také říká "schémata". Protokolem je míněn způsob, jakým se prohlížeč pokusí dosáhnout cíle odkazu. HTTP: Základním protokolem používaným na www stránkách je HTTP. HyperText Transfer Protocol. Málokdy se setkáte s něčím jiným. Většina URL začíná řetězcem " Moderní prohlížeče při ťukání adresy dokonce předřazují automaticky. To ale neznamená, že by se to mohlo vypouštět při zápisu odkazů do html stránek. (Pak by si prohlížeč myslel, že je to relativní adresa.) FTP: Protokol pro přenos souborů je FTP -- File Transfer Protocol. Odkazují se jím soubory umístěné na FTP serverech. Pokud se s takovým odkazem prohlížeč potká, pokusí se spustit nějakého FTP klienta (některé prohlížeče jej mají zabudovaný) a předat mu požadavek na stažení souboru. Formát adresy je ftp://uživatel@server/cesta/soubor, například ftp://ftp.pc-slany.cz je odkaz pro anonymní připojení k ftp serveru. (Které je mimochodem zakázáno. Anonymní znamená bez jména uživatele; uživatelský přístup vyžaduje heslo.) FILE: - 8 -

9 Svůj vlastní disk můžete odkazovat pomocí pseudoprotokolu FILE. Na Internetu je nepoužitelný. Většina prohlížečů si jej domyslí, když vidí v adrese písmenko:/. Zajímavé je, že za file: jsou tři lomítka -- např. file:///c:/dokumenty/soubor.htm

10 MAILTO: Protokol mailto: se používá na odkazování ových adres. Formát je mailto:elektronická adresa. Např. <a mi!</a>. Pokud se prohlížeč potká s takovou věcí, spustí poštovní program a předá mu adresu jako parametr. Více v textu o mailových adresách. Domény Každý server na Internetu má doménové jméno. To se skládá ze tří částí oddělených tečkami. 1. jméno virtuálního serveru, nejčastěji www (doména třetí úrovně) 2. jméno domény druhé úrovně (nutná registrace) 3. generická doména (doména nejvyššího řádu), nejčastěji cz, sk nebo com Port Velmi zřídka se za generickou doménu píše dvojtečka a číslo portu. Adresářová cesta Cílový soubor bývá uložen v adresáři (ale může být přímo v kořeni serveru). Adresáře se do URL zapisují za generickou doménu. Před jméno adresáře patří lomítko (obyčejné, nikoli zpětné). Je-li adresářů více úrovní, píšou se za sebe odděleny lomítky. Soubory Vlastní jméno souboru se píše za adresářovou cestu (existuje-li). Před jméno souboru se dává lomítko. Záložky Odkaz může mířit na záložku v odkazovaném dokumentu. Do URL se za jméno souboru píše křížek # a jméno záložky. Dotaz Součástí URL mohou být i vstupní data pro nějaký skript. Ta se do URL píšou na konec za otazník. Syntaxe je jmeno=hodnota&jmeno2=hodnota2. Příklad Příkladem absolutního URL může být: Část adresy Příklad Jiné možné hodnoty protokol ftp://, mailto: atd. doména 3. úrovně (server) www. cokoliv. doména 2. úrovně jakpsatweb. seznam., mujweb. apod. generická doména cz com, sk, gov apod. port nic :80, :číslo cesta (adresáře) /html /cokoliv

11 jméno souboru url.htm index.html apod.html záložka #priklad #jménozáložky dotaz nic?proměnná=hodnota Relativní adresování Mnohdy je vypisování celé adresy zbytečné a zdlouhavé. Existuje možnost, jak si práci usnadnit použitím relativní adresy. Myšlenka relativních adres se zakládá na tom, že soubory, které se navzájem odkazují, často leží na tomtéž serveru. Každý soubor, který pomocí URL vyžaduje jiný soubor, má sám nějaké absolutní URL. Takže stačí, aby se do adresy napsaly cesta k souboru, lomítko a jméno souboru. To je relativní URL. relativní URL = cesta/jméno_souboru Často oba soubory leží v jednom adresáři, takže pak není nutno vyplňovat cestu (je prázdná), relativní URL tvoří pouze jméno souboru. Adresáře se oddělují lomítky. Pokud se cílený soubor nachází v hierarchii adresářů někde výše (takže je nutno "vyskákat" nahoru), použije se zápis dvou teček pro nadřazený adresář. Příklad: Vložení obrázku s logem Jak psát web do této stránky za použití relativní adresy by se udělalo takto: <img src="../images/jpweb.gif"> V relativním URL lze samozřejmě použít záložky a dotazy. Speciální znaky Pokud se ve jménu souboru vyskytuje mezera, je nutno nahradit ji v URL sekvencí znaků "%20". Říká se tomu URL encoding. Takto lze nahradit každý znak znakem procenta se dvěma znaky, které jsou šestnáctkovým zápisem toho původního znaku. Takové překódování je nutné i v případě diakritizovaných znaků ve jménech souborů a adresářů. Mimochodem také proto se jména souborů a adresářů doporučují bez mezer, háčků a čárek, aby s tím nebyla práce. Shrnutí: Img Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený z jiného souboru. Tag <img> má kromě obecných atributů spoustu dalších: Atributy tagu <img> Atribu t Význam Hodnoty src umístění souboru s obrázkem URL

12 alt alternativní popis libovolný text lowsrc náhradní obrázek pro malé displeje URL width šířka délka nebo procento height výška délka nebo procento border tloušťka rámečku délka vspace vertikální okraj délka hspace horizontální okraj délka align usemap zarovnání obrázku použití klikací mapy left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom "#" + jméno mapy, nebo URL ismap přidání souřadnic kliknutí bez hodnoty Src Zdoj obrázku, prostě cesta k tomu souboru (angl. source = zdroj). Cesta k obrázku se udává jako klasické URL absolutně nebo relativně. Přípustné jsou soubory typu *.gif, *.jpg, v novějších prohlížečích také *.png a v Internet Exploreru *.bmp. (Jiné typy souborů se musejí vkládat jako objekty pomocí plužiny). Pokud soubor obrázku nebude nalezen, zobrazí se ve stránce zástupný symbol nenalezeného obrázku (nejčastěji červený křížek) se zástupným textem. Alt Zástupný text (alternative text). Zobrazuje se ve stránce v oblasti nenačteného obrázku. Pokud je obrázek načten, zobrazuje se hodnota altu při přejíždění obrázku ve žluté bublině. Lowsrc Zástupný obrázek pro malé displeje. Nikdy jsem neviděl použití. Width, height Šířka (width) a výška (height) obrázku. Udává se v pixelech (normální číslo) nebo procentech. Pokud nebude rozměr uveden, zobrazí se obrázek v tom rozměru ve své normální velikosti. V praxi se doporučuje výšku a šířku u obrázku zadávat i v případě, že obrázek bude přirozeně veliký. To kvůli rychlejšímu a lepšímu načítání stránky. Border

13 Tloušťka rámečku. Lze zadat nula, pak nebude obrázek orámečkovaný. Různé prohlížeče se liší v tom, zda zobrazují rámeček u obrázku, u kterého border nebyl zadán. Proto komu záleží na přesném vzhledu, měl by border vždy zadávat. Vspace, hspace Vertikální a horizontální okraje, prostě prázdné místo okolo. Zadává se v pixelech. V praxi se nahrazují CSS stylem. Align Zarovnání obrázku s okolím. Tag <img>, atribut align Obtékání obrázku Vertikální umístění obrázku na řádku align= left right top texttop middle absmiddl e baseline bottom absbotto m Význam Obrázek je umístěn k levému okraji a obtékán zprava. Obrázek je umístěn k pravému okraji a obtékán zleva. Vršek obrázku je zarovnán s nejvyšším bodem libovolného objektu řádku. Vršek obrázku je zarovnán s nejvyšším bodem textu (většinou je to totéž, co top). Střed obrázku je zarovnán s účařím písma řádku. Střed obrázku je zarovnán se středem řádku. Spodek obrázku je zarovnán na účaří. Spodek obrázku je zarovnán na spodek písma Spodek obrázku bude zarovnán na nejnižší místo řádku. Osobně považuji milión hodnot pro umístění na řádku za zbytečnost a nepoužívám je. Má to smysl zejména u obrázkových matematických vzorců. Obrázek se v praxi většinou nechává obtékat nebo umisťuje do samostatného odstavce. Obtékané obrázky se vertikálně nacházejí pod řádkou, v níž jsou uvedeny (to je trochu nešikovné, ale logické). Style

14 Všechny atributy kromě src, alt a usemap se dají nahradit CSS deklarací pomocí obecného atributu style. Příklad: Následující dva obrázky se zobrazí stejně: <img src="strom.gif" alt="strom" width="88" height="31" border="2" hspace="10" align="right"> <img src="strom.gif" alt="strom" style="width: 88px; height: 31px; border: 2px solid; marginleft: 10px; margin-right: 10px; float: right"> Klikací mapy: Usemap Přítomnost tohoto atributu dělá z obrázku klikací mapu. Hodnotou atributu je křížek # plus jméno mapy. Mapa je element vyznačený tagem <map> obsahující definici aktivních oblastí. Popis mapy je umístěn v tomtéž HTML dokumentu. Jméno mapy je určeno atributem name u tagu <map>. Příklad viz u popisu tagu <map>. Tag <map> může být umístěn i v jiném souboru. Hodnotou atributu usemap je pak jméno souboru s křížkem # a jménem mapy. Ismap Pokud je obrázek v odkazu, při kliknutí se za adresu připojí otazník a souřadnice kliknutí oddělené čárkou. Umějí to zpracovávat některé serverové skripty

15 Img jako video Pokud se v tagu <img> místo atributu src uvede tag dynsrc, jde o video. Atributy tagu <img dynsrc="..."> Atribut Význam Hodnoty dynsrc adresa animace URL loop počet přehrávání číslo nebo "infinite" loopdela y start controls prodleva mezi přehráváními kdy se má začít přehrávat zobrazení ovládání čas v milisekundách "mouseover" -- při přejetí myši, jinak po natažení stránky atribut bez hodnoty (Netscape nepodporuje) Dnešní prohlížeče podporují video formáty *.avi, *.asf, *.ram, *.ra. Další formáty videí je nutno zpřístupnit pomocí objektů a plužin. Hodnota infinite u loop způsobuje neustálé přehrávání. Stejně tak působí hodnota -1. Další atributy jsou stejné jako u normálního img. Map Klikací mapa obrázku. V dokumentu se tento element nijak nezobrazuje, pouze způsobuje, že obrázek bude ně některých místech klikat jako odkaz. Mapa obsahuje popis aktivních oblastí, které jsou reprezentovány tagy <area>. Pomocí jména -- atributu name -- je mapa spojena s obrázkem (atribut usemap u <img>). Name může být libovolný název. Jedna mapa může být teoreticky přiřazena k více obrázkům, nenapadá mě ale situace, kdy je to užitečné. Příklad: <map name="ctverecky"> <area href="prvni.htm" shape="rect" coords="80, 80, 130, 130"> <area href="druha.htm" shape="rect" coords="20, 20, 50, 50"> </map> <img src="obrazek.gif" usemap="#ctverecky"> Area Aktivní oblast v mapě. Nepárový tag. Nezobrazuje se. Může se vyskytovat pouze v elementu <map>. Area vymezuje oblast obrázku, na kterou se dá kliknout jako na odkaz. V jednom elementu <map> může být neomezeně elemetů <area>, každá pro jednu aktivní oblast. Atributy tagu <area>

16 Atribu t Význam Hodnoty href cíl odkazu URL target cílový rám jméno rámu shape tvar oblasti rect, circle, polygon coords souřadnice oblasti čísla oddělená čárkami nohref oblast není odkazem bez hodnot alt alternativní text libovolný text Atributy href a target jsou stejné jako u odkazů. Z obecných atributů vypichuji atribut title, který v novějších prohlížečích zobrazuje u myši nad oblastí bublinu s textem (podobně jako alt u obrázků). Atribut alt takto nefunguje, ten má význam pouze pro negrafické klienty. Atrribut shape určuje tvar oblasti, podle toho se potom mění význam hodnot atributu coords. Ten obsahuje souřadnice v pixelech, přičemž počátek souřadnic je levý horní roh mapy (tedy obrázku) a y roste směrem dolů. Tag <area>, atributy shape a coords shape= Význam zadává se coords="" rect obdélník levý horní roh, pravý dolní roh lhx, lhy, pdx, pdy circle kruh střed, poloměr středx, středy, poloměr polygo mnohoúhelní souřadnice každého vrchol1x, vrchol1y, n k vrcholu za sebou vrchol2x, vrchol2y, atd. Jsou možné i alternativní hodnoty circ, poly a rectangle se stejnou funkcí. Pokud se dvě oblasti překrývají, je ta pozdější jakoby vespod (dlouho jsem zde měl chybnou informaci, že je navrchu). Jinak řečeno v překrývaných kouscích vyhrává ta area, která je první. Atribut nohref byl vymyšlen pro tvorbu tvarů, které nikam neklikají. To používá např. pro tvorbu klikacích mezikruží, kdy větší circle někam kliká. Uvnitř většího kruhu je menší (v kódu uvedený jako první) s atributem nohref