Untitled - Vitajte na stránkach www.einsty.hostujem.sk

I N T E R N E TVytvárame WWW stránky / 1. èasVitajte pri prvej èasti nášho nového seriáluVytvárame WWW stránky. Tento seriál jeurèený najmä pre zaèiatoèníkov, ktorí nemajúskúsenosti s tvorbou webových stránok.Budeme sa venova najmä jazyku HTML(HyperText Markup Language), v ktorombudeme naše WWW stránky vytvára . Je toasi najjednoduchší programovací jazyk.Preberieme ho od najjednoduchších tagovaž po rámce a vnorené tabu¾ky. Keï užbudeme tento jazyk ovláda , ukážeme si,ako naše stránky umiestni na internet, akoich spravova , zlepšova , propagova ... Samozrejme,webovú stránku si nemusítevyrobi sami. Špecializujú sa na to rôznefirmy. Ak si dáte v takejto firme webovústránku vyhotovi , máte zaruèenú vysokúkvalitu spracovania a dizajnu, ale ceny sapohybujú v tisícoch. Preto ak máte èasa odhodlanie nauèi sa nieèo nové, tentoseriál je urèený práve pre vás.HTML EDITOR. Na tvorbu našich webovýchstránok budeme potrebova nejakýeditor HTML. Editory HTML sa delia nadve ve¾ké skupiny, a to „normálne“a WYSIWYG. Aký je medzi nimi rozdiel?V prvom type editora HTML zadávate tagyHTML až po uložení a prezretí v internetovomprehliadaèi (browseri). Skratka WYSI-WYG znamená What You See Is What YouGet, teda èo vidíte, to aj dostanete. Editoryv týchto dvoch skupinách by somešte rozdelil na jednoduché, poloprofesionálnea profesionálne. Toto rozdelenie jeove¾a zrete¾nejšie pri editoroch WYSIWYG.Medzi jednoduché editory WYSIWYG bysom zaradil programy typu Cool Page.K poloprofesionálnym potom patria programy,ktoré sa dodávajú s Internet Explorerom(FrontPage Express) a s NetscapeCommunicatorom (Netscape Composer).Profesionálne nástroje WYSIWYG na tvorbuwebových stránok sa vyznaèujú nienajnižšou cenou; sú to napríklad MicrosoftFrontPage a Adobe Pagemill. „Normálne“editory HTML sú nieèo ako klasickýNotepad, len s tým rozdielom, že obsahujúzvýraznenie v syntaxi a tagy nemusítepísa , ale ich môžete priamo vklada .Profesionálny editor tohto typu je napríkladHotDog Professional a neprofesionálnyEditPad. Všetky spomínané editoryHTML bežia pod Windows. Ak používateLinux, ako editor WYSIWYG odporúèamNetscape Composer. Ak sa rozhodnetepre poctivú „ruènú prácu“, tak sa vám výbornehodí VIM. Obidva spomínané editoryby mala obsahova každá distribúciaLinuxu. Pýtate sa, ako sa rozhodnú ? WY-SIWYG editory sa hodia, ak neovládatejazyk HTML a chcete rýchlo a ¾ahko vytvorinejakú webovú stránku. My si však zvolímetú druhú cestu.ÈO BUDEME POTREBOVA ?V našom seriáli nebudeme pracova s editormiWYSIWYG, pretože sa chcemenauèi jazyk HTML. Na zaèiatok námpostaèí súèas Windows, a to Poznámkovýblok (Štart/Programy/Príslušenstvo/Poznámkovýblok). Aby sme si mohli tietosúbory HTML prezera , potrebujeme ajnejaký browser. Môžeme použi napríkladInternet Explorer alebo Netscape Navigator.Všetko už máme pripravené, takžedo toho!TAGY. Ako som už spomínal, každý súborHTML obsahuje tagy. Tie hovoriabrowseru, ako má zobrazi text, obrázokalebo iný objekt. Tagy sú uzatvorenémedzi znakmi < a >. Poznáme dva druhytagov: párové a nepárové.l Párové tagy majú uvádzaciu a uzatváraciuèas . Uzatváracia èas obsahuje vždy /. Jenevyhnutné, aby párové tagy boli vždy uzatvorené,inak by mohlo dôjs k nekorektnémuzobrazeniu dokumentu HTML. Predstavmesi, že chceme napríklad použituèné písmo. Pred zaèiatok textu, ktorý máby takto napísaný, vložíme uvádzací tag(v tomto prípade ) a na koniec textuzasa uzatvárací tag ().l Nepárové tagy sa skladajú iba z jednejznaèky. Používajú sa najmä pri formátovaní.Príkladom takéhoto tagu je , ktorýzalamuje riadok.ŠTRUKTÚRA DOKUMENTUHTML. Teraz si ukážeme, akú štruktúrumusí obsahova každý dokument HTML.obsah hlavièky...obsah dokumentu...V tejto štruktúre si môžeme všimnú základnétagy HTML: HTML, HEAD a BODY.Ako ste si urèite všimli, všetky tieto tagysú párové:l Tento tag sa vždy vkladá nazaèiatok dokumentu. Urèuje, že ide o dokumentvo formáte HTML. Jeho uzatváracívariant sa vkladá vždy naúplný koniec dokumentu.l Tento tag urèuje hlavièku dokumentuHTML. V hlavièke môžu by obsiahnutéúdaje ako názov stránky, k¾úèovéslová, meno autora a podobne. Tag uzavrieme.l Predstavuje najpodstatnejšiuèas – telo dokumentu. Tento tag sa vždyvkladá až za uzavretú hlavièku HTML dokumentu.Jeho uzatvárací tag sa spravidla vkladá tesne pred koniecdokumentu – teda pred tag .Teraz si ukážeme, ako vytvoríme našuprvú WWW stránku.NÁZOV WWW STRÁNKY. KaždáWWW stránka musí ma svoj názov,ktorý sa zobrazí v hornej lište browsera.Tento názov by mal by struèný, jasnýa výstižný. Názov WWW stránky sa vkladávždy do hlavièky (medzi tagy a ) a je ohranièený tagmi a . Našej prvej WWWstránke dáme preto výstižný názov Našaprvá WWW stránka. Potom bude dokumentHTML vyzera takto: Naša prvá WWW stránkay...obsah dokumentu...TEXT A ZÁKLADNÉ FORMÁ-TOVANIE. Náš dokument HTML musíobsahova , samozrejme, aj nejaký text.Ten vkladáme vždy do tela dokumentu(medzi a ). Ako urèitevieme, písmo môže by normálne,tuèné alebo kurzíva. Všetky tieto typypísma môžu by aj podèiarknuté. Na takétoformátovanie textu slúžia tieto tagy:l Urèuje, že písmo má by typubold, teda tuèné. Je to párový tag, pretoho uzavrieme vložením Príklad: Toto je tuèný text.Ukážka: Toto je tuèný text.l Urèuje, že písmo má by typu italic,teda kurzíva. Aj tento tag je párový,preto ho uzavrieme .Príklad: Toto je šikmý text.Ukážka: Toto je šikmý text.l Urèuje, že text má by podèiarknutý.Tento tag môžeme kombinova spredchádzajúcimi dvoma. Ani tu nesmiemezabudnú na uzatvorenie .Príklad: Toto je podèiarknutý text.Ukážka: Toto je podèiarknutý text.l Je to nepárový tag, ktorý sapoužíva na zalamovanie riadkov. Ak stlaèímev editore ENTER a posunieme sa nanový riadok, neznamená to, že aj v browserito bude nový riadok.Príklad: Tento text je napísaný vdvoch riadkochUkážka: Tento text je napísanýv dvoch riadkochTeraz by sme už mali by schopní vytvorijednoduchý dokument HTML s názvom,použitím základných druhov písma a zalamovanímriadkov. Ten môže vyzera napríkladtakto: Naša prvá WWW stránkaVo formáte HTML poznáme trizákladné druhy písma : normálne tuèné kurzíva Kombinácia môže vyzera aj takto Všimnite si, že koniec riadka veditore neznamená aj koniec riadkav skutoènosti Browser tonerešpektuje. Vytvorí nový riadokaž po zadaní znaèky br.Tento súbor teraz uložíme s príponouhtml alebo htm a otvoríme v browseri. Výsledokby mal by ako na obrázku.NABUDÚCE. Tentoraz sme si ukázalizáklady štruktúry HTML a základy práces textom. Nabudúce sa budeme venovaïalším možnostiam formátovania textu,definujeme obrázok v pozadí, farbu pozadia,textu a odkazov a ukážeme si, akopracova s nadpismi.Igor Kulman110 PC REVUE 10/2001