Zprávy |  Hardware |  PDA |  MP3 |  Design |  Windows 98 |  Windows NT/2000 |  Vývoj |  Soubory |  Slovník |  Poradna |
 Hledání:
  
 Pokročilé  Máte problém?
Živě o počítačích a Internetu
Kanál pro kapesní počítače Živě si čte 581 lidí  
         
I váš mobil už má svůj časopis!
Vývoj
 Apache a IIS
 ASP a skripty
 HTML
 Průvodci
 Doporučené weby
 Výuka HTML

 EnglishEnglish

Živě
 Články za týden
 Nové příspěvky
 Nejčtenější články
 Ankety
 Autoři
 Reklama na Živě
 Kontakt na redakci
 Živě pro váš server
 Hledáme autory!
 Volná místa v IT

Nakupujte živě
Pascal pro zelenáče
Pavel Satrapa, Neokortex
Nové vydání úspěšné knihy :“Začínáme v Pascalu“. Kniha je učebnicí programování v jazyce Pascal. Jejím cílem je z člověka, který o programování neví prakticky nic, udělat středně pokročilého programátora. Začíná ...

159,00 Kč
Jak vytvářet www stránky - 8. díl
Karel Kilián HTML - 31. 1. 2000 0:00

Jak by asi vypadaly internetové stránky bez grafiky? V některých případech možná dobře, ale většinou potřebujete návštěvníka něčím zaujmout, upoutat jeho pozornost, a k tomu právě slouží různé grafické prvky. Nikdy ale nezapomeňte, že příliš velké množství obrázků nejenže zpravidla snižuje přehlednost celé stránky, ale také podstatně zvyšuje dobu nutnou k jejímu přenosu (zvláště při komutovaném připojení může být doba nutná k natažení markantně vyšší). Vždy se pokuste nejprve zamyslet nad tím, zda by stejného nebo podobného efektu nešlo dosáhnout použitím vhodně formátovaného písma, barvami pozadí či například tabulkami – ty budeme probírat později.
Pošli článek
Tiskni článek
Přidej názor
Textová inzerce
Volna-mista.cz: více než 1 600 pracovních príležitostí
Vltava: NEJLEVNĚJŠÍ hudební CD a DVD na českém trhu
Pauza: Ropa za zbraně?
FlashFun: bav se, hrej hry na Internetu a VYHRAJ super věci!
Sháníte mobilní telefon?: Vyberte si z bohaté nabídky za nejlepší ceny ...
Mobilmania: NOVÝ internetový časopis o mobilních telefonech a operátorech
Aktuální články
Slovník
Není vám jasný nějaký pojem? Zeptejte se slovníku Živě:

Prvním podstatným krokem je volba vhodného formátu. Webové prohlížeče standardně podporují JPEG a GIF, pomalu se rozjíždí i PNG, který je v normě HTML 4.0 definován jako standard, nicméně některé starší prohlížeče si s ním neví rady. V současné době tedy doporučujeme zůstat u prvních dvou. Jaké jsou jejich vlastnosti a jaké jsou mezi nimi rozdíly:

GIF

  • Komprese: bezztrátová, tento formát se hodí například pro čárovou grafiku, screenshoty dialogových oken atp.

  • Barevná hloubka: omezená na 256 barev

  • Možnost transparentního pozadí: ano

  • Možnost animace: ano

    Poznámka: uvedené vlastnosti se týkají formátu GIF 89

    JPEG

  • Komprese: ztrátová, tento formát využívá nedokonalosti lidského zraku a "rozostřuje" některé části obrazu. Je vhodný především k publikování fotografií, naopak naprosto nevhodný je v případech, že požadujete zcela přesnou grafiku.

  • Barevná hloubka: True color

  • Možnost transparentního pozadí: ne

  • Možnost animace: ne

    Poté, co si vyberete, v jakém formátu budete obrázek prezentovat, zbývá pouze vložit jej do HTML kódu stránky. To se provádí pomocí nepárového tagu IMG (image=obrázek). Jeho základní syntaxe vypadá následovně: <IMG SRC="obrazek">, kde obrazek je cesta k příslušnému grafickému souboru, kterou specifikujeme zcela stejně jako v případě odkazů (viz 6. díl našeho seriálu). Na rozdíl od odkazu ale není vhodné používat obrázky z jiných serverů - veškerou grafiku raději uložte na stejný server, na němž se nachází samotná stránka. Hlavním důvodem je, že při natahování stránky musí browser kontaktovat ještě další server, na němž máte uložen příslušný obrázek, a tím se o něco prodlouží doba nutná k jeho zobrazení. Navíc pokud tento server nebude fungovat (např. v důsledku nějakého výpadku), zobrazí se místo grafiky pouze značky symbolizující, že obrázek nelze nalézt, nebo že není dostupný.

    Tag IMG disponuje širokým množstvím parametrů, z nichž nejdůležitější jsou následující:

    ALT="popisek obrazku" - parametr ALT určuje alternativní text, který:

  • se zobrazí v případě, že má uživatel pomalý modem a z tohoto důvodu si vypnul zobrazení obrázků. Pomocí alternativního textu tak snadno pozná, co se nachází v které části stránky, a důležité obrázky může ručně aktivovat přes pravé tlačítko myši v menu Zobrazit obrázek.
  • Tento text také využívají textové browsery, na něž bychom neměli při vytváření www stránek nikdy zapomínat.
  • Text uvedený v parametru ALT se v Internet Exploreru (a dalších prohlížečích) zobrazí v případě, že nad obrázkem zastavíte myší v malém obdélníčku se žlutým pozadím. Můžete jej tedy použít i k popisu toho, co se nachází na obrázku.
  • V blízké budoucnosti bude text uvedený v tomto parametru používán k zvukové navigaci na stránce pro uživatele s vadami zraku.

    WIDTH="sirka v pixelech" a HEIGHT="vyska v pixelech" - tyto parametry určují, jaký prostor bude pro obrázek vyhrazen. Neuvedete-li je, natáhne prohlížeč nejprve text a teprve poté začne zobrazovat obrázky a upravovat pro ně potřebné místo. Během tohoto procesu veškerý text nepříjemně "poskakuje" a čtenář musí počkat, než se natáhnou obrázky, aby se mohl v klidu začíst.

    Doporučujeme uvádět skutečnou velikost obrázku - určíte-li výšku a/nebo šířku větší, než odpovídá skutečnosti, bude obrázek zdeformován, pokud naopak tímto způsobem obrázek "zmenšíte", bude uživatel čekat na přenesení zbytečně velkého souboru, který pak následně prohlížeč transformuje.

    Za naprosté minimum odpovídající všem normám lze tedy považovat obrázek, který je vložen následujícím způsobem:

    <IMG SRC="../pictures/ja.jpg" ALT="toto je moje fotografie" WIDTH="100" HEIGHT="150">

    Dalším důležitým atributem je zarovnání obrázku s textem, které se provádí pomocí parametru ALIGN. Ten může mít následující hodnoty:

  • ALIGN="left" obrázek je zarovnán na stránce vlevo, text ho obtéká z pravé strany

  • ALIGN="right" obrázek je zarovnán na stránce vpravo, text ho obtéká z levé strany

  • ALIGN="top" horní okraj obrázku je zarovnán s textem, zbývající text obrázek neobtéká, ale pokračuje až pod obrázkem.

  • ALIGN="texttop" obvykle shodné s "top"

  • ALIGN="middle" střed obrázku je zarovnán se základnou textu, zbývající text obrázek neobtéká, ale pokračuje až pod obrázkem

  • ALIGN="absmiddle" střed obrázku je zarovnán se středem textu, zbývající text obrázek neobtéká, ale pokračuje až pod obrázkem

  • ALIGN="baseline" spodní okraj obrázku je zarovnán se základnou textu

  • ALIGN="bottom" - odpovídá parametru baseline

  • ALIGN="absbottom" - spodní okraj obrázku je zarovnán se základnou nejspodnější linky textu.
Abyste si to celé mohli lépe představit, zkuste si vytvořit stránku, na níž postupně vložíte obrázek se všemi uvedenými parametry.

Ostatní parametry zmíníme jen stručně, protože nejsou pro formát obrázku ani obtékání textu určující:

BORDER - šířka rámečku kolem obrázku určovaná v pixelech (implicitní je 0, tedy obrázek bez rámečku)

VSPACE a HSPACE - pokud je obrázek obtékán textem, můžete pomocí těchto parametrů definovat volný prostor kolem obrázku (text "přilepený" těsně na obrázek, jak jistě sami uznáte, nevypadá příliš dobře). Parametr VSPACE určuje volný prostor ve vertikálním směru (tj. pod a nad), HSPACE pak v horizontálním (tj. vlevo a vpravo). Hodnota se opět udává v pixelech.

To je tedy v kostce vkládání obrázků do www stránek. Grafiku můžete chytře využít ve spojení s hyperlinkovými odkazy například tak, že si vytvoříte grafické ovládací prvky (tlačítka, ikonky, ...), které budou fungovat jako odkaz. To provedete následujícím způsobem:

<A HREF="cesta k odkazovanému dokumentu"><IMG SRC="obrazek který bude sloužit jako odkaz" ALT="text, který se zobrazí po najetí myší na obrázek" HEIGHT="výška obrázku" WIDTH="šířka obrázku"></A>

Pokud jste četli předchozí díl našeho seriálu, jistě jste poznali, že místo textu, který by se měl zobrazit jako hyperlinkový odkaz, je do tagu A vložen obrázek. Aby se odlišil od okolních obrázků, které například nemusí být současně odkazem na jiné soubory, má tento obrázek kolem sebe modrý rámeček. Pokud by vám tento rámeček kazil estetické ztvárnění vašich stránek, můžete jej jednoduše odstranit uvedením parametru BORDER=0 v tagu IMG.

Tolik tedy pro tento týden k obrázkům. Příště se podíváme na to, jak si můžete pohrát s textem. Do té doby si zkuste vytvořit nějakou stránečku s obrázkem, který bude fungovat jako odkaz na www.zive.cz :).

Související články:

Zajímá-li vás bližší pohled na tento článek, podívejte se na něj v souvislostech.


 Diskusní fórum čtenářů (5 zpráv)
[Nový příspěvek][Vypsat vše]

Copyright 1996-2000 Computer Press, a.s., realizační tým