PRVKY WEBOVÝCH STRÁNOK

Transkript

1 Predmet Elektronické publikovanie 1 PRVKY WEBOVÝCH STRÁNOK - klasické zobrazenie webovej stránky - kostra webovej stránky

2 Predmet Elektronické publikovanie 2 Základné prvky web stránok: 1. obrázky a pozadie: Dátový formát - obrázok je súbor. V internete sa bežne používajú dva grafické formáty: JPG a GIF. Stručne povedané: JPG je lepší pre fotografie, GIF na všetko ostatné. Obrázkový súbor vieme získať napr.: - stiahnutím z internetu, - nakreslením obrázku pomocou myši alebo tabletu a uložením ako JPG, PNG alebo GIF, - získaním z digitálneho fotoaparátu, - naskenovaním a uložením vo formáte JPG, PNG alebo GIF, - stiahnutím obrazovky monitora cez tlačidlo Print Screen, Skrátka, je veľa spôsobov, ako získať obrázok, ale cieľom je mať súbor vo formáte JPG, PNG alebo GIF. Grafický program - existujú ich stovky. Najčastejšie používané na úpravu webovej grafiky sú tieto: - Paint Shop 8, - Adobe Photoshop, - Microsoft PaintBrush (maľovanie vo windowse), - Macromedia Fireworks, - ACDSee. Dátový objem: Forma Optimum Znesiteľné maximum Tlačítko 2kB 5kB Pozadie stránky 2kB 10kB Reklamný banner 8kB 25kB fotografia 20kB 90kB Zmenšenina fotky 5kB 10kB Obrázkový nadpis 3kB 8kB Diagram, komix 100kB

3 Predmet Elektronické publikovanie 3 2. odkazy: - v podstate ide o hypertextový odkaz. Text, veta, časť vety, slovo, alebo písmeno, či znak, na ktorý kliknutím myšou vyvoláme nejakú akciu (otvorenie nového okna, spustenie programu, animácie, iného webu, ďalšej podstránky a pod...). 3. tabuľky na web stránke: - na internetových stránkach sa tabuľky používajú v dvoch prípadoch: a) keď potrebujeme umiestniť nejaké údaje do tabuľky (napr. rozvrh hodín, výsledky zápasov HNL a pod), b) ako pomôcka pre úpravu web stránok, keď je niečo niekde potrebné umiestniť (napr. stĺpcová sadzba textu a pod.) Najjednoduchšia tabuľka: Tabuľka s dvoma riadkami a dvoma stĺpcami a nejakým obsahom: OBSAH BUNKY ĽAVÁ SPODNÁ ĎALŠIA BUNKA PRAVÁ SPODNÁ Táto tabuľka má tento kód: <table > <tr> <td>obsah bunky</td> <td>ďalšia bunka</td> </tr> <tr> <td>ľavá spodná</td> <td>pravá spodná</td> </tr> </table> Čo znamenajú jednotlivé tagy: <table> Párový tag, ktorý začína tabuľku. <tr> Párový tag, ktorý začína a končí riadok tabuľky. <td> Tag bunky tabuľky.

4 Predmet Elektronické publikovanie 4 Ďalší príklad: táto tabuľka má nasledujúci kód: <table border="2" cellpadding="5" cellspacing="4"> <tr><th>název</th><th>cena</th><th>poznámka</th></tr> <tr><td>rtuť</td><td>658,60 Kč</td><td>Tekutá</td></tr> <tr><td>máslo</td><td>22,- Kč</td></tr> </table> V tomto sa objavilo pár nových príkazov: <th> <th> sa dá použiť namiesto <td>, ale znamená to hlavičkové pole. Obsah býva tučný a zarovnaný na stred. border atribút tagu <table>, ktorý nastavuje šírku vnútorného rámčeku okolo tabuľky (v obrazovkových bodoch); keby bolo border="0", nevykreslí sa ani vnútorná mriežka cellpadding vnútorný okraj buniek (v pixeloch), čiže vzdialenosť textu od rámčeku. Taktiež atribút tagu <table> cellspacing vonkajší okraj buniek

5 Predmet Elektronické publikovanie 5 4. rámy na web stránke: - rámom sa anglicky hovory Frames a sú časťou webových stránok. Ako to vyzerá? Okno prehliadača je rozdelené na niekoľko obdĺžnikových častí (rámov). V každom ráme je (hoci to nemusí byť vidieť) samostatná HTML stránka (súbor). Spravidla je jeden z rámov menu s odkazmi, ktoré sa po kliknutí myšou realizujú v inom, hlavnom okne. Najčastejšie to je asi takto: Obsah: Odkaz Iný odkaz Ďalší odkaz Rámec s textom sem tie odkazy z ľavého rámca vedú Takýchto rámcov môže byť v okne mnoho (prakticky neobmedzene), najčastejšie sa používajú dva alebo tri. Môžu byť vedľa seba i nad sebou, ale vždy to musia byť obdĺžniky. 5. formuláre na web stránke: - rôzne použitie napr. vyplnenie políčok a odoslanie objednávky na nejaký tovar (pri internetovom obchode) konštrukcia formulára: dajme tomu, že budeme chcieť mať formulár s troma políčkami: Váš mail: Predmet : Správa: Odeslat

6 Predmet Elektronické publikovanie 6 6. tlačítka na web stránke: - v podstate ide o akýsi odkaz v grafickej podobe. Pravidlo, ako by malo tlačítko vyzerať - vlastne neexistuje. Vkusnosť, tvar, farba, použitý efekt, umiestnenie, typ písma a podobne - závisí na šikovnosti a grafickom cítení web dizajnéra. (snáď len to, aby boli dobre čitateľné a vhodne zapadli do štruktúry web stránky). 7. titulok a nadpis na web stránke: Kde sa titulok zobrazí: - v titulkovom pruhu prehliadača (modrý pruh úplne hore), - väčšinou v texte obľúbenej položky, - v histórii prehliadača, - v lište Windows ako názov otvoreného okna prehliadača, - pri prepínaní okien cez Alt+Tab, - je výsledkom vyhľadávania ako odkaz Z toho plynie skutočnosť, že titulok je potrebné zadať poriadne. Kto titulok používa: - vyhľadávač (napr. Google, SZM, Yahoo a pod.), to je asi hlavné pravidlo optimalizácie pre vyhľadávače, - čitateľ, keď sa vo vyhľadávači rozhoduje, či na titulok klikne, - keď si chce čitateľ stránku uložiť, objaví sa titulok ako automaticky ponúkané meno súboru Pravidla pre tvorbu titulku: - musí byť výstižný. ďalšia stránka je zlý titulok, - mal by byť výstižný aj z globálneho hľadiska. Titulok kontakt je zlý, pretože nie je jasné, o aký kontakt ide. Titulok kontakt na našu firmu je správny titulok. - čitateľ používa titulok pre pochopenie štruktúry serveru,

7 Predmet Elektronické publikovanie 7 - titulok by mal byť stručný, desať slov je už veľa, optimum sú tri alebo štyri. Nadpis stránky je to, čo je vidieť hore v texte, väčšinou je to tag <h1>. Titulok nie je súčasťou textu. Nič sa ale nepokazí, ak je titulok taký istý ako nadpis webovej stránky. 8. zvuk a hudba na web stránke: - existujú desiatky typov zvukových súborov. Na web stránkach sa používajú formáty midi a wav. V iných typoch súborov sú možnosti obmedzené. Napríklad zvuk vo formáte mp3 sa spoľahlivo dá ponúknuť ku stiahnutiu. Zvuky na web stránkach sa používajú výhradne len na spestrenie. 9. rollery na web stránke: - posuvníky na boku a v spodnej časti web stránky (prípad, kedy obsah web stránky je mimo rámec obrazovky) 10. animácie a reklamné bannery na web stránke: - na spestrenie web stránok. Sú programy, v ktorých sa tieto animácie a bannery tvoria. Najznámejším a najpoužívanejším je Flash od firmy Macromedia. Nemalo by sa to ale s ich použitím nimi preháňať.