Kurz XHTML. HTML = HyperText Markup Language. XHTML = Extensible HTML.

Size: px

Start display at page:

Download "Kurz XHTML. HTML = HyperText Markup Language. XHTML = Extensible HTML."

Arline Sherman
6 years ago
Views:

1 1 Úvod Kurz XHTML HTML = HyperText Markup Language. XHTML = Extensible HTML. V tomto kurze budeme vychádzať z normy XHTML 1.0 Strict. Ako už naznačuje verzia Strict, pôjde o prísnu formu jazyka. Existuje aj menej striktná forma, označená Transitional (prechodná). Povoľuje dočasne používať prostriedky, ktoré sa v budúcnosti zakážu. Koncepcia jazyka je založená na tzv. prvkoch vložených do obyčajného neformátovaného textu. Prvky slúžia na tvorbu štruktúry stránky, vloženie hypertextových odkazov, obrázkov či zostrojenie tabuliek. V súčasnosti sa opäť kladie veľký dôraz na dôsledné oddelenie štruktúry obsahu a vzhľadu webových stránok. Teda zdrojový kód stránky by nemal obsahovať prostriedky slúžiace na definovanie grafického dizajnu (napríklad farieb, typov a veľkostí písma, rozmiestnenia alebo pozadia stránky). Dôsledné oddelenie štruktúry obsahu od dizajnu stránky je nevyhnutné, aby rôzne internetové prehliadače prezentovali stránku rovnako. Medzi najrozšírenejšie prehliadače patria Internet Explorer, Netscape Navigator (v súčasnosti založený na Mozille), samotná Mozilla (resp. jej zjednodušená verzia Mozilla Firefox) alebo Opera. Prvky (z angl. elements) vložené do zdrojového kódu stránky ohraničujú značky uzavreté v znakoch < a >. Podľa špecifikácie XHTML 1.0 je každá značka párová. Teda, vždy musíme mať počiatočnú a ukončovaciu, ako uvádza príklad prvku pre nadpis prvej úrovne <h1>nadpis</h1> Ukončovacia značka obsahuje za znakom < ešte znak /. Vidíme, že takto sa vymedzí časť zdrojového kódu, na ktorú sa má prvok aplikovať. Niektoré prvky podľa starších definícií HTML nemali, alebo nemuseli mať ukončovaciu značku, napríklad <br>, používaný pri zalamovaní riadkov (t. j. pri prechode na nový riadok). Teraz však všetky značky musia byť uvedené v pároch, hoci by medzi nimi nestálo nič. Existuje však možnosť skrátiť zápis prázdneho prvku. Namiesto <br> </br> sa v XHTML 1.0 použije zápis v tvare <br />. Značky vždy píšeme malými písmenami, hoci staršie definície HTML dovoľovali zápis veľkými písmenami. Ak sú prvky navzájom vnorené, nesmú sa ich značky skrížiť. Podobne ako pri zátvorkách, prvá počiatočná značka sa ukončí ako posledná, napríklad <b><i>text</i></b> Zápis <b><i>text</b></i> je neprípustný. Ďalší príklad, ako majú byť prvky správne vnorené, predstavuje kostra XHTML dokumentu z nasledujúcej kapitoly. Autor môže pridať do zdrojového kódu stránky aj vlastné poznámky, ktoré sa na webovej stránke nezobrazia. Poznámku vložíme takto

2 2 Kostra XHTML dokumentu XHTML dokument sa skladá z dvoch základných častí: hlavičky (head) a tela (body). Začína počiatočnou značkou <html> a uzatvára ho ukončovacia značka </html>. Takto vyzerá kostra dokumentu: <html> <head> <title> Titulok stránky (max. 60 znakov) </title> </head> <body> Telo stránky. </body> </html> Prvok <title> </title> definuje titulok zobrazený na ľavom hornom okraji okna prehliadača. Hlavička stránky zvyčajne býva komplikovanejšia. Napríklad takúto kostru majú stránky KFCH <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1- strict.dtd"> <html lang="sk" xml:lang="sk" xmlns=" <head> <title>katedra fyzikálnej chémie FCHPT STU</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <link rel="stylesheet" type="text/css" href="kfch.css" /> <meta name="keywords" content="katedra, fyzikálna, chémia, Bratislava, fakulta, univerzita, STU, veda, školstvo, škola" /> <meta name="description" content="oficiálna stránka Katedry fyzikálnej chémie FCHPT STU v Bratislave" /> <meta name="generator" content="hand made" /> <meta name="author" content="erik Klein" /> </head> <body> Telo stránky </body> </html> Jej opisom sa budeme zaoberať na konci kurzu. Súbor s kostrou sa zostavuje zvyčajne len raz. Do jeho kópie sa potom vloží zdrojový kód samotnej stránky. 3 Parametre prvkov Prvok môže mať jeden alebo viac parametrov. Tie vo všeobecnosti určujú, ako sa daný objekt zobrazí, alebo uvádzajú určité potrebné informácie. Parametre sa uvádzajú iba v počiatočnej (nie v ukončovacej) značke. Zapísané sú vždy v tvare parameter="hodnota". Nasledujúci príklad uvádza prvok <img />, ktorým vkladáme na stránku obrázky <img src="pictures/katedra.jpg" height="514" width="680" /> Jednotlivé parametre s hodnotami nasledujú za názvom prvku (img). Môžu byť uvedené v ľubovoľnom poradí. Názov prvku a prvý parameter, ale aj zápisy ďalších parametrov sú

3 navzájom vždy oddelené medzerou. V tomto príklade parameter src určuje (relatívnu) cestu k obrázku, parametre height a width jeho rozmery v pixloch. 4 Základné prostriedky členenia textu stránky 4.1 Nadpisy <h1> </h1> až <h6> </h6> h= heading Poznáme 6 úrovní nadpisov, reprezentovaných prvkami <h1> </h1> až <h6> </h6>. Najvyššia úroveň je 1, najnižšia 6. Za nadpisom prehliadač automaticky prejde na nový riadok. Prehliadače používajú pre veľkosť písma nadpisu určité štandardné hodnoty (default). Autori však zväčša uprednostňujú vytvorenie vlastného formátu nadpisov, t. j. typu, veľkosti, rezu a farby písma i spôsobu zarovnania nadpisu. Slúži na to CSS (Cascading Style Sheets, kaskádové štýly), pomocou ktorého možno detailne definovať vzhľad stránky. Samozrejme, formát určený autorom má prednosť pred štandardným formátom prehliadača. Prácu s CSS preberieme v ďalšom kurze. 4.2 Zalomenie riadka <br /> br = break Kým vo Worde pri prechode na nový riadok stačí stlačiť kláves Enter, v (X)HTML to neplatí. Jedným z princípov (X)HTML totiž je, že každé stlačenie klávesu Enter pri písaní zdrojového kódu stránky sa interpretuje ako medzera. Navyše, ak prehliadač v kóde nájde viac medzier za sebou, nahradí ich jedinou. Text si prehliadač zalamuje sám podľa veľkosti okna (plochy), ktorú má k dispozícii. Ak chceme, aby prehliadač zobrazil text do nového riadka, musíme na príslušné miesto textu vložiť prvok <br />. 4.3 Odsek <p> </p> p = paragraph Tento prvok označuje odsek. Prehliadače každý nový odsek oddelia od predchádzajúceho prázdnym riadkom. Toto formátovanie sa odlišuje od formátovania v tlačených médiách, kde začiatok odseku indikuje odsadenie prvého riadka. Často sa prvok pre odsek používa v skrátenom tvare <p />, kedy iba označí miesto, kde jeden odsek končí a ďalší sa začína. 4.4 Vodorovná čiara (separátor) <hr /> hr = horizontal rule Prvok predstavuje jednoduchý prostriedok, ako rozčleniť dlhšie texty do menších logických celkov. Vo všeobecnosti však dbáme, aby text stránky nebol priveľmi rozsiahly radšej ho rozdelíme na viac stránok prepojených hypertextovými odkazmi. Vzhľad čiary možno určiť cez CSS. 5 Formátovanie písma V tejto kapitole preberieme možnosti, ktoré ponúka XHTML pre formátovanie písma. K dispozícii máme tzv. logické a fyzické štýly. Fyzické štýly formátovania poznáme z Wordu, ide napríklad o kurzívu, tučné či podčiarknuté písmo alebo horný/dolný index.

4 Logické štýly formátovania kladú dôraz na dôvod, prečo chceme zmeniť formát písma v texte stránky. Aplikujeme ich napríklad, ak chceme uviesť citát, časť textu zdôrazniť, zapísať nejakú premennú alebo definíciu. Samozrejme, aj logické štýly sa pri zobrazení stránky prezentujú fyzickým spôsobom. XHTML dokument však nemusí byť zobrazovaný len na monitore, môže byť transformovaný na hlasový výstup, kde sa dá logický štýl (na rozdiel od fyzického) určitým spôsobom (zmena intonácie, tempa reči) prezentovať. 5.1 Logické štýly <cite> </cite> <em> </em> <strong> </strong> <code> </code> <kbd> </kbd> <dfn> </dfn> <var> </var> Citát, text zvyčajne prehliadače prezentujú kurzívou. Zdôraznenie, text zvyčajne prehliadače prezentujú kurzívou. em = emphasis Silné zdôraznenie, text zvyčajne prehliadače prezentujú tučným písmom. Výpis programového kódu, text prehliadače prezentujú neproporcionálnym písmom. Vstup, ktorý má používateľ zadať cez klávesnicu (využíva sa pri stránkach vysvetľujúcich prácu s nejakým programom). Prehliadače ho prezentujú neproporcionálnym písmom. kbd = keyboard Definícia, prezentuje sa kurzívou. dfn = definition Premenná, prezentuje sa kurzívou. var = variable Ako bude prezentovaný ktorýkoľvek logický štýl, možno jednoducho nastaviť cez CSS. Nemusíme byť teda odkázaní na len formát definovaný prehliadačom. 5.2 Fyzické štýly <b> </b> <i> </i> <sup> </sup> <sub> </sub> Tučné písmo. b = bold Kurzíva. i = italic Horný index. sup = superscript Dolný index. sub = subscript Fyzické formátovanie sa s vývojom HTML významne obmedzilo. Napríklad už v tejto norme neexistuje prvok <font> </font> pre prácu s veľkosťou, typom a farbou písma, ani prvky pre podčiarknuté či prečiarknuté písmo. 6 Zoznamy Bežnou súčasťou webových stránok sú rôzne zoznamy. Delíme ich na tri skupiny: neusporiadané zoznamy, usporiadané zoznamy, zoznamy definícií.

5 V neusporiadaných zoznamoch sa neprikladá význam poradiu jednotlivých položiek (ako príklad možno uviesť predchádzajúci zoznam). Naopak, pred položkami usporiadaného zoznamu stoja namiesto odrážok poradové čísla. Ak má byť zoznam číslovaný rímskymi číslicami (alebo by položky mali byť označené písmenami), musí sa použiť CSS. Špeciálny typ zoznamov predstavuje zoznam definícií, striedavo prezentujúci definované pojmy a ich definície. 6.1 Neusporiadaný zoznam <ul> </ul> ul = unordered list Začiatok zoznamu indikuje počiatočná značka <ul>, uzatvára ho ukončovacia značka </ul>. Jednotlivé položky uvádza prvok <li> </li>. Ten spôsobí, že každá položka bude zobrazená na novom riadku. Pred položky prehliadač umiestni odrážky v tvare krúžkov. Iný tvar odrážky, alebo použitie vhodného obrázka ako odrážky dovoľuje CSS. li = list item Príklad: XHTML kód Zobrazenie v prehliadači <ul> <li>pevná látka</li> pevná látka <li>kvapalina</li> kvapalina <li>plyn</li> plyn </ul> 6.2 Usporiadaný zoznam <ol> </ol> ol = ordered list Zoznam ohraničuje počiatočná a ukončovacia značka <ol> </ol>. Položky sú opäť označené prvkom <li> </li>. Príklad: XHTML kód Zobrazenie v prehliadači <ol> <li>izotermická expanzia</li> 1. izotermická expanzia <li>adiabatická expanzia</li> 2. adiabatická expanzia <li>izotermická kompresia</li> 3. izotermická kompresia <li>adiabatická kompresia</li> 4. adiabatická kompresia </ol> 6.3 Zoznam definícií <dl> </dl> dl = definition list Prvok ohraničuje zoznam definícií. Definované pojmy označuje prvok <dt> </dt>, ich definície uvádza <dd> </dd>. Definície sú voči pojmom odsadené doprava. Pojem i definícia vždy začínajú na novom riadku. dt = defined term dd = definition data

6 7 Hypertextové odkazy Najčastejšie sa používajú dva typy hypertextových odkazov. Pomocou prvého prechádzame na inú webovú stránku (iný (X)HTML dokument). Po kliknutí na druhý typ odkazu sa otvorí okno predvoleného ového programu pre písanie novej správy. Pritom adresa príjemcu je už vyplnená z odkazu. V oboch prípadoch sa používa prvok <a> </a>. Text ležiaci medzi počiatočnou a ukončovacou značkou nazývame hypertextovým odkazom. Od ostatného textu stránky je zreteľne odlíšený. Štandardne býva podčiarknutý, no nemusí byť (vďaka CSS). Autor stránky však vždy musí hypertextové odkazy odlíšiť od zvyšného textu tak, aby ich návštevník dokázal identifikovať na prvý pohľad. a = anchor 7.1 Odkaz na inú webovú stránku, služba http Typ odkazu spolu s adresou určuje parameter href. Ak uvádzame absolútnu adresu, začína zápisom (http = hypertext transfer protocol), resp. (zabezpečená, t. j. secure, verzia protokolu). Potom nasleduje adresa servera a cesta vedúca stromom adresárov k príslušnému súboru, napríklad href=" Cesta hovorí, že na serveri s adresou v adresári kfch sa má otvoriť súbor index.html. Názov súboru sme však v tomto prípade nemuseli uvádzať, pretože prehliadač v cieľovom adresári automaticky hľadá súbor s menom index alebo default obsahujúci úvodnú stránku príslušnej lokality (súboru stránok), ak nie je na konci cesty uvedený žiadny názov dokumentu. Relatívna adresa neobsahuje celú cestu k súboru. Využíva sa predovšetkým pri stránkach jednej lokality. Ak je stránka, kam hypertextový odkaz vedie v rovnakom adresári ako stránka s odkazom, stačí ako hodnotu parametra href napísať názov súboru href="publikacie.html" Relatívna adresa môže zahŕňať aj pohyb medzi adresármi, pričom sa uvádza rovnako ako relatívna cesta v operačnom systéme. 7.2 Odkaz na mailovú adresu služba mailto Ak ide o odkaz umožňujúci poslať , hodnota parametra href začína zápisom mailto:. Za ním nasleduje adresa príjemcu, napríklad <a href="mailto:webmaster@firma.sk">mail webmastrovi</a> Ako odkaz na stránke sa zobrazí text Mail webmastrovi. 8 Obrázky Hoci obrázky predstavujú neoddeliteľnú súčasť webových stránok, nie každý grafický formát (typ súboru) možno použiť. Prehliadače podporujú tieto formáty: JPG, GIF a PNG. Posledný formát stále nie je veľmi rozšírený, hoci spája výhody GIF i JPG. 8.1 JPG JPG súbory predstavujú komprimované obrázky. Kompresný systém pritom používa stratový algoritmus. Čím vyššia kompresia, tým vyššia redukcia (strata) dát, t. j. vyšší pokles kvality obrázka.

7 Krátky súhrn výhod/nevýhod JPG: 24-bitová hĺbka farieb, vhodné na publikovanie fotografií (digitálne fotoaparáty zvyčajne ukladajú fotografie priamo v JPG formáte), stratová kompresia, nemožnosť definovať priehľadnú farbu. JPEG = Joint Photographics Experts Group 8.2 GIF Formát GIF sa využíva pri kreslených obrázkoch. Kompresný algoritmus je bezstratový, ale počet farieb je obmedzený na 256 (8-bitové obrázky). Súhrn výhod/nevýhod: bezstratová kompresia, možnosť definovať priehľadnú farbu, možnosť zostaviť animáciu zložením statických obrázkov do sekvencie, farebná hĺbka obrázka: 8 bitov. GIF = Graphics Interchange Format 8.3 PNG Tento formát možno v podstate použiť na ľubovoľný typ obrázka. Často sa pokladá za následníka GIF. Pri fotografiách nemusí byť kompresia taká účinná ako pri použití JPG. Výhody: bezstratová kompresia, obrázky so 48 bitovou hĺbkou, možnosť definovať priehľadnú farbu, priehľadnosť môže byť premenlivá. PNG = Portable Network Graphics 8.4 Vloženie obrázka do stránky <img /> img = image Prvok <img /> má viac parametrov, pretože musíme zadať, kde je obrázok uložený, jeho rozmery a krátky opis. Ten sa v prehliadači zobrazí, ak má používateľ vypnuté zobrazovanie obrázkov. Prvok má parametre src uvádza cestu k obrázku, alt uvádza krátky opis obrázka, width určuje šírku obrázka v pixloch, height určuje výšku obrázka v pixloch. Štandardné zarovnanie obrázka na stránke je vľavo. Text nasledujúci v zdrojovom kóde, ak nepoužijeme bezprostredne za obrázkom prvok <br />, bude pokračovať v tom istom riadku. Teda vpravo pri spodnom okraji obrázka sa zobrazí prvý riadok, ďalší text prehliadač zobrazí pod obrázkom. Iné umiestnenie obrázkov a ich obtekanie textom dosiahneme prostredníctvom CSS. Parametre width a height nevynechávame, pretože sa tým znemožní sformátovanie stránky prehliadačom bezprostredne po načítaní zdrojového kódu. Obrázky sa totiž načítavajú až po ňom. Keď zadáme ich rozmery, prehliadač pre obrázky vynechá príslušnú plochu a správne rozmiestni text. Ak však rozmery nezadáme, prehliadač nebude vedieť, akú plochu

8 má pre obrázky rezervovať. Po ich načítaní musí stránku znova sformátovať. Toto prekreslenie stránky pôsobí rušivo, najmä, keď sa návštevník už začítal do textu. Parametre určujúce rozmery obrázka nezneužívame na zmenšovanie veľkých obrázkov, pretože kvalita zobrazenia po zmenšení prehliadačom výrazne klesne. Navyše návštevníka stránky prinútime stiahnuť isté množstvo dát, a nakoniec sa mu zobrazí obrázok, ktorému by pri korektnom prístupe autora zodpovedalo zlomkové množstvo dát (zmenšením rozmerov obrázka na polovicu veľkosť súboru klesne na štvrtinu). Obrázok možno zmenšiť v ľubovoľnom programe určenom na prácu s grafikou. src = source alt = alternative description Príklad: <img src="pictures/katedra.jpg" height="514" width="680" alt="kolektív KFCH" /> 9 Tabuľky Vytvorenie zdrojového kódu jednoduchej tabuľky možno pokladať za nenáročné. Zápis zložitejšej tabuľky v HTML však vyžaduje určitú predstavivosť, aby sme tabuľku vedeli poskladať z buniek uložených v jednotlivých riadkoch/stĺpcoch tabuľky. Vtedy pomôže načrtnúť si tabuľku na papier. Z hľadiska konštrukcie si tabuľku môžeme predstaviť takto: Bunky ležiace vedľa seba vytvoria riadok tabuľky. Riadky ležiace pod sebou potom zostavia výslednú tabuľku. Tabuľka z hľadiska logického členenia môže mať riadky rozdelené na tri skupiny: hlavička (prvý riadok tabuľky, <thead> </thead>), telo tabuľky (<tbody> </tbody>) a päta (posledný riadok tabuľky, <tfoot> </tfoot>). Takéto členenie je výhodné napríklad vtedy, keď bunky päty obsahujú sumy hodnôt v príslušných stĺpcoch. Ak sa rozhodneme takýmto spôsobom tabuľku rozčleniť, musí vždy obsahovať všetky tri časti. Toto členenie má prinášať výhody pri prezentácii dlhých tabuliek telo možno posúvať vo vertikálnom smere nezávisle od hlavičky a päty, resp. pri tlači sa hlavička a päta vytlačia na začiatku a na konci každej strany s tabuľkou. Takéto členenie tabuliek však autori používajú iba zriedka kvôli zlej podpore prehliadačmi. 9.1 Vloženie tabuľky <table> </table> Tabuľku v zdrojovom kóde stránky ohraničuje prvok <table> </table>. Ak chceme k tabuľke pridať titulok (t. j. číslo a/alebo názov tabuľky), bezprostredne za počiatočnú značku <table> umiestnime prvok <caption> </caption> s textom titulku. Zvyčajne prehliadače titulok zobrazený nad tabuľkou zalomia podľa jej šírky a vycentrujú. Prirodzene, tabuľka nesmie mať viac než jeden titulok. Prvok table má väčší počet parametrov. Uvedieme najdôležitejšie a najpoužívanejšie: width šírka tabuľky, border šírka vonkajšieho ohraničenia tabuľky, cellpadding vzdialenosť hranice bunky od jej obsahu, cellspacing vzájomná vzdialenosť susedných buniek (ich hraníc). Hodnoty parametrov width, cellpadding a cellspacing možno zadať absolútne v pixloch alebo relatívne v percentách. Pri šírke tabuľky sa relatívne vyjadrenie vzťahuje na šírku okna predstavujúcu 100 %, čiže šírka tabuľky závisí od šírky okna prehliadača. Percentuálne vyjadrenie hodnôt parametrov cellpadding a cellspacing je pomerne

9 nejasné, preto sa uprednostňuje absolútne vyjadrenie. Bežne bývajú hodnoty parametra cellpadding v rozsahu 3 10 px (absolútna hodnota sa uvádza bez jednotky px). Pre cellspacing sa zvyčajne hodnoty pohybujú v rozmedzí 0 3 px. Pritom 0 znamená, že bunky sa navzájom dotýkajú, t. j. ich ohraničenia splynú do mriežky. Hodnota parametra border sa zadáva v pixloch. Zápis border="0" znamená, že tabuľka nemá vykreslené ohraničenie. 9.2 Riadky tabuľky <tr> </tr> tr = table row Prvok <tr> </tr> uvádza jednotlivé riadky tabuľky. Bunky ležiace medzi počiatočnou a ukončovacou značkou sa poukladajú vedľa seba zľava doprava. Prvok má nasledujúce parametre: align zarovnanie textu buniek vo vodorovnom smere, valign zarovnanie obsahu buniek v zvislom smere, char znak, podľa ktorého sa obsah buniek zarovná, charoff vzdialenosť zarovnávacieho znaku od okraja bunky. Parameter align používame na zarovnanie textu v bunkách vo vodorovnom smere. Môže nadobúdať hodnoty left (zľava), right (sprava), center (na stred), justify (zarovnať z oboch strán) a char (zarovnať podľa určitého znaku). Pomocou parametra valign sa zarovnáva text buniek v zvislom smere. Prípustné sú hodnoty top (zhora), middle (na stred), bottom (zdola), baseline (na základnú čiaru riadka). Parametre char a charoff súvisia výhradne so zarovnaním align="char". Prvý definuje, podľa ktorého znaku sa obsah bunky zarovná. Druhý určuje, koľko pixlov od okraja bunky sa tento znak zobrazí. Žiaľ, Internet Explorer, Netscape Navigator, ani Mozilla zarovnanie align="char" nepodporujú. Pritom možnosť zarovnať čísla v bunkách podľa desatinnej čiarky by bola veľmi vítaná. 9.3 Bunky tabuľky <th> </th> a <td> </td> th = table heading td = table data Bunky v tabuľke uvádzajú dva prvky. Prvok <th> </th> je určený pre bunky obsahujúce hlavičky stĺpcov (resp. riadkov podľa orientácie tabuľky). Spôsobí, že text v príslušných bunkách bude zobrazený tučným písmom a zarovnaný na stred. Údaje v ostatných bunkách sa uvádzajú prvkom <td> </td>. Okrem parametrov zhodných s prvkom <tr> </tr> majú <th> </th> a <td> </td> navyše parametre: colspan určuje koľko stĺpcov tabuľky príslušná bunka zaberie, rowspan určuje koľko riadkov tabuľky príslušná bunka zaberie. Tieto parametre sa využívajú, keď je potrebné zlúčiť bunky v niektorých riadkoch či stĺpcoch. Hodnotou parametra colspan, resp. rowspan, je číslo určujúce koľko stĺpcov, resp. riadkov, bunka obsadí. Zarovnanie definované v prvku <tr> </tr> sa použije pre všetky bunky riadka, ak ho pre nejakú bunku nezmeníme v príslušnom prvku <th> </th> alebo <td> </td>.

10 Zarovnanie nastavené pre bunku má teda prednosť pred zarovnaním nastaveným pre riadok, v ktorom sa daná bunka nachádza. Príklad: <table border="2" cellpadding="3" cellspacing="1">...začiatok tabuľky <tr align="center">... začiatok 1. riadka <th rowspan="2">školský rok</th>... bunka vysoká 2 riadky <th colspan="2">priemerná známka</th>... bunka široká dva stĺpce </tr>... koniec 1. riadka <tr align="center">... začiatok 2. riadka <th>zimný semester</th> <th>letný semester</th> </tr>... koniec 2. riadka <tr align="center">... začiatok 3. riadka <td>1999/2000</td> <td>2,64</td> <td>2,58</td> </tr>... koniec 3. riadka <tr align="center">... začiatok 4. riadka <td>2000/2001</td> <td>2,73</td> <td>2,55</td> </tr>... koniec 4. riadka <tr align="center">... začiatok 5. riadka <td>2001/2002</td> <td>2,69</td> <td>2,56</td> </tr>... koniec 5. riadka </table>...koniec tabuľky Uvedeným zdrojovým kódom vytvoríme nasledujúcu tabuľku Školský rok Priemerná známka Zimný semester Letný semester 1999/2000 2,64 2, /2001 2,73 2, /2002 2,69 2,56 10 Meta-informácie Meta-informácie sa nachádzajú v hlavičke XHTML dokumentu. Pomocou nich vložíme do hlavičky webovej stránky definíciu kódovania znakov, informácie o stránke, kľúčové slová alebo informácie o autorovi. Kľúčové slová a opis stránky sú dôležité pre vyhľadávacie servery Vloženie meta-informácie <meta /> Prvok <meta /> má dva navzájom súvisiace parametre: name určuje typ (názov) meta-informácie, content vlastný obsah meta-informácie.

11 Na stránke KFCH sú definované nasledujúce meta-informácie: kľúčové slová <meta name="keywords" content="katedra, fyzikálna, chémia, Bratislava, fakulta, univerzita, STU, veda, školstvo, škola" /> opis stránky <meta name="description" content="oficiálna stránka Katedry fyzikálnej chémie FCHPT STU v Bratislave" /> informácie o spôsobe vytvorenia stránky <meta name="generator" content="hand made" /> informácie o autorovi <meta name="author" content="erik Klein" /> Ak stránky vznikli pomocou nejakého softvéru na tvorbu webových stránok (napríklad FrontPage), jeho názov býva uvedený v meta-informácii nazvanej generator. Ak stránku vytvárame sami, môžeme ako hodnotu príslušného parametra content uviesť, čo uznáme za vhodné Nastavenie kódovania znakov Špeciálnou a mimoriadne dôležitou je meta-informácia o použitom kódovaní znakov. Ňou autor zabezpečí korektné prezentovanie textu stránky, pretože inak by prehliadač nemusel správne zobraziť slovenské znaky s diakritikou. Pre slovenčinu je určená súprava znakov iso Bežne sa však možno stretnúť i s označením kódovania súvisiacim s operačnými systémami Windows, t. j. windows Kódovanie nastavíme prvkom <meta http-equiv="content-type" content="text/html; charset=iso " /> Aby sa text webovej stránky správne zobrazil, musí byť aj pri ukladaní príslušneho.html súboru na disk použité rovnaké kódovanie znakov. Keďže aplikácia NotePad (Poznámkový blok) vo Windows neumožňuje zvoliť kódovanie iso , odporúčame na písanie zdrojových kódov stránok používať bezplatný softvér PSPad ( Kódovanie znakov súboru je potrebné nastaviť na začiatku tvorby stránky v ponuke Formát. 11 Definovanie typu XHTML dokumentu V kostre stránok KFCH vidíme ešte pred počiatočnou značkou <html> zápis <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> Určuje, že XHTML dokument sa riadi normou XHTML 1.0 Strict. Autor by mal vždy uviesť, ktorej norme zodpovedá zdrojový kód stránky. Navyše, bez jej uvedenia nie je možná kontrola správnosti zdrojového kódu. Tú vykonávajú rôzne softvéry určené pre autorov webových stránok, no najjednoduchšie je použiť on-line XHTML Validator priamo na stránkach konzorcia W3 ( Okrem toho, na stránkach KFCH vidíme aj, že počiatočná značka <html> má niekoľko parametrov definujúcich jazyk, v ktorom je stránka napísaná <html lang="sk" xml:lang="sk" xmlns="

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space. HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information