prac.listy

Prepis

1 Tvorba jednoduchých www stránok pomocou jazyka XHTML

2 1. Štruktúra XHTML dokumentu Na vytvorenie statickej web stránky použijeme XHTML jazyk. Je to značkovací jazyk, ktorého príkazy tvoria značky tága uzatvorené medzi znakmi <tág>. Otvorme si Poznámkový blok: ŠTART všetky programy Príslušenstvo Poznámkový blok deklarácia jeden z DTD koreňový element pre jazyk, ktorý budeme používať hlavička Telo dokumentu titulok typ a kódovanie dokumentu ukončenie html dokumentu Uloženie dokumentu Príklad html stránky: Zobrazenie stránky prehliadačom: <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="sk" lang="sk"> <head> <meta http-euiv="content-type" content="text/html; charset=iso " /> <title>titulok stránky</title> </head> Text dokumentu </html> Úloha: Vytvorte vašu prvú www stránku pomocou textového editora Poznámkový blok. Do tela napíšte Moja prvá stránka. Uložte ju pod názvom uvod.html na lokálny disk. Znovu ju otvorte v internetovom prehliadači a zobrazte zdrojový kód cez pravé tlačidlo myši.

3 2. Nadpisy Existuje šesť úrovní od <h1> po <h6>. Na stránke, by sa mal vyskytovať len jeden nadpis úrovne <h1>. Úrovne sa líšia veľkosťou písma, všetky nadpisy sú implicitne zarovnávané vľavo. Príklad použitia nadpisov rôznych veľkostí: <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="sk" lang="sk"> <head> <meta http-euiv="content-type" content="text/html; charset=iso " /> <title>titulok stránky</title> </head> <h1>nadpis prvej úrovne</h1> <h2>nadpis druhej úrovne</h2> <h3>nadpis tretej úrovne</h3> <h4>nadpis štvrtej úrovne</h4> <h5>nadpis piatej úrovne</h5> <h6>nadpis šiestej úrovne</h6> </html> Ukážka stránky: Úloha: Otvorte vašu stránku uvod.html v textovom editore Poznámkový blok a priraďte textu Moja prvá stránka nadpis prvej úrovne. Dopíšte názov Procesor ako nadpis druhej úrovne. Uložte a otvorte v internetovom prehliadači.

4 3. Vkladanie textu Samotný text vkladáme párovým tágom <p>text</p>, ktorými vytvárame jednotlivé odseky v texte, čím text sprehľadňujeme. Nemusíme sa starať o zalamovanie riadkov, zabezpečuje ho samotný prehľadávač a automatický zalamuje riadky podľa šírky okna. Príklad vkladania odsekov: <html> <head> <title>procesor</title> </head> <h1>procesor</h1> <p> Procesor, niekedy nazývaný skrátene CPU (Central Processing Unit),je jedna z najdôležitejších súčiastok počítača, hardware. Jeho funkciou je riadiť beh programov a spracovanie ich inštrukcií. Tým riadi celý systém. Najdôležitejším parametrom, ktorý určuje výkon procesoru, je taktovacia frekvencia. Tá sa dnes udáva predovšetkým v GHz (giga-hertz). Najznámejšími spoločnosťami vyrábajúcimi procesory a ovládajúcimi 99% trhu sú Intel a AMD (Advanced Micro Devices).Títo výrobcovia ponúkajú predovšetkým procesory o frekvencii (kmitočtu) 1,6 až 3,5GHz. </p> <p> Nie málo dôležitou vlastnosťou procesoru je jeho spotreba. Nové mikroprocesory sú stále viac efektívnejšie vo využívaní energie, ktorú spotrebúvajú, a tak sa môžem tešiť nižšej spotrebe, bežne do 100W (64W, 84W, 96W, záleží na type procesoru). </p> </html> Ukážka stránky: Úloha: Vytvorte stránku pomocou textového editora s nadpisom a titulkom Procesor a vložte text o procesore pomocou odsekov. Uložte ju pod názvom procesor.html do svojho priečinka na lokálny disk a pozrite výsledok v internetovom prehliadači.

5 4. Formátovanie textu a stránky Aby text v XHTML dokumente bol prehľadný používame formátovanie textu pomocou párových tágov. Druhy písma: tučné písmo (strong): <strong> text </strong> šikmé písmo (italic): <i> text </i > podčiarknuté (underline): <u> text </u> preškrtnuté: <s> text </s> s pevnou šírkou: <tt> text </tt> veľké písmená: <big> text </big> malé písmená: <small> text </small> dolný index: <sub> text </sub> horný index: <sup> text </sup> Príklad použitia rôznych druhov písma: Ukážka: <hr /> <p> <strong>tučné písmo</strong><br /> <i>kurzíva</i><br /> <u>podčiarknuté</u><br /> <s>preškrtnuté</s><br /> <tt>s pevnou šírkou</tt><br /> <big>veľké písmená</big><br /> <small>malé písmená</small><br /> <sup>horný index</sup><br /> <sub>dolný index</sub><br /> </p> <hr /> Zalomenie riadku: - nútené zlomenie riadku dosiahneme nepárovým tágom <br /> (break) Horizontálne členenie stránky: - horizontálna čiara <hr /> (horizontal rule) nepárový tág Úloha: Otvorte vašu stránku (procesor.html) o procesore a oddeľte nadpis a text čiarou, vložte pod text o procesore pomocou zalomenia textu: meno autora, ktoré bude napísané tučným písmom, názov školy bude podčiarknutý rok bude napísaný veľkým písmom názov predmetu (Informatika) napíšte kurzívou Uložte a pozrite výsledok.

6 5. Odkazy Odkazy umožňujú vzájomne prepájať dokumenty. Odkazy robia web webom. V texte sú vizuálne oddelené štandardne je to farebné odlíšenie a podčiarknutie. Pri prechode myšou cez odkaz sa mení sa mení kurzor (zvyčajne zo šípky na ručičku), kliknutím je odkaz aktivovaný a presmerovaný. Syntax príkazu: <a href= adresa cieľa >objekt</a> absolútny odkaz odkaz na inú stránku <a href=" stránky ">objekt</a> Príklad: objekt, ktorý odkazuje na stránku školy <h1>moja prvá stránka</h1> <a href=" SOŠ - Rožňava</a> relatívny odkaz odkaz na súbor v priečinku Príklad relatívneho odkazu: <h1>moja prvá stránka</h1> <a href="uvod.html">úvod</a> </html> r odkaz na konkrétne miesto v dokumente: <a href="#zaciatok">späť na začiatok</a> otvorenie odkazu v novom okne: <a href= target= _blank >Google</a> Úloha: Otvorte vašu prvú stránku s názvom uvod.html a vložte hypertextový odkaz na web stránky vašej školy, odkaz na súbor procesor.html a odkaz, ktorý otvorí stránku vašej školy v novom okne. Uložte a pozrite výsledok. Otvorte súbor procesor.html a vložte odkaz na začiatok stránky a aspoň dva odkazy na webové stránky o procesore pod názvom ďalšie zdroje. Uložte a pozrite výsledok.

7 6. Zoznamy Používanie zoznamov pri písaní dokumentu obsah sprehľadní, čím stránka získa na príťažlivosti. XHTML jazyk umožňuje automaticky generovať zoznamy, ktoré môžu byť: zoznam s odrážkami nečíslovaný zoznam číslovaný zoznam definičný zoznam zoznam s odrážkami: <ul> začiatok zoznamu (unnumbered lists) <li>položka zoznamu</li>.... položka zoznamu (list item) <li>položka zoznamu</li> <li>položka zoznamu</li> </ul> koniec zoznamu číslovaný zoznam: <ol> začiatok zoznamu (ordered lists) <li>položka zoznamu</li>.... položka zoznamu (list item) <li>položka zoznamu</li> <li>položka zoznamu</li> </ol> koniec zoznamu definičný zoznam: <dl> začiatok zoznamu (definition lists) <dt>pojem</dt>..... definition term <dd>vysvetlenie pojmu</dd>.....definition data <dt>pojem</dt> <dd>vysvetlenie pojmu</dd> </dl> koniec zoznamu Príklad zoznamov: <h3>zoznam s odrážkami</h3> <ul> <li>procesor</li> <li>pamäť</li> <li>vstupno-výstupné zariadenia</li> </ul> <h3>zoznam s odrážkami</h3> <ol> <li>registre</li> <li>aritmeticko-logická jednotka</li> <li>riadiaca jednotka</li> </ol> <h3>definičný zoznam</h3> <dl> <dt>html</dt> <dd>hypertext Markup Lenguage, značkovací jazyk používaný na vytváranie formátovaných dokumentov na webe</dd> <dt>xhtml</dt> <dd>xtensible HyperText Markup Lenguage, rozšírenie jazyka HTML založené na XML</dd> </dl> Úloha: Do stránky procesor.html vložte hlavné časti procesora ako číslovaný zoznam, popíšte hlavné časti procesora ako zoznam s odrážkami. Uložte a pozrite výsledok.

8 7. Tabuľky Tabuľky sa vytvárajú pomocou elementu <table>. Každá tabuľka má aspoň jeden riadok <tr> (table rows) a v ňom aspoň jeden stĺpec bunku <td> (table data). Na definovanie hrúbky čiar tabuliek použijeme atribút border (ak nastavíme hodnotu border na 0, čiary tabuľky sú neviditeľné). Definovanie tabuľky: <table> začiatok tabuľky <tr> riadok tabuľky (table row) <td>údaj</td>......údaj tabuľky (table data) <td> údaj</td>..... údaj tabuľky (table data) </tr> koniec riadku tabuľky </table> koniec tabuľky Príklad jednoduchej tabuľky: <h1>jednoduchá tabuľka</h1> <table border= 1 > <tr> <td>riadok 1, stĺpec 1</td> <td>riadok 1, stĺpec 2</td> </tr> <tr> <td>riadok 2, stĺpec 1</td> <td>riadok 2, stĺpec 2</td> </tr> </table> Nadpis tabuľky: <caption>nadpis tabuľky</caption> Záhlavie tabuľky: <th>záhlavie tabuľky</th> Príklad nadpisu a záhlavia tabuľky: <table border= 1 > <caption>výška a hmotnosť žiakov</caption> <tr> <th>osoba</th> <th>výška</th> <th>váha</th> </tr> <tr> <th>andrej Malý</th> <td>145 cm</td> <td>55 kg</td> </tr> <tr> <th>boris Veľký</th> <td>197 cm</td> <td>89 kg</td> </tr> </table> Úloha: Do stránky procesor.html vytvorte tabuľku s nadpisom Druhy procesorov, vložte údaje podľa počtu bitov a podľa počtu jadier. Uložte a pozrite výsledok.

9 8. Obrázky Obrázky vkladáme vo formáte JPG, GIF, zriedka vo formáte PNG (<img src= obr.jpg />). Vloženie obrázka <img src= cesta /> Textový popis obrázka - vkladáme pomocou alt alternatívny text, ktorý sa zobrazí pokiaľ je obrázok nedostupný <img src= obrazky/foto.jpg alt= Popradské pleso />. Rozmery obrázka - pre určenie veľkosti obrázku sa používajú atribúty width (šírka) a height (výška) <img src= obrazky/foto.jpg alt= Popradské pleso width= 600 heigth= 450 /> Príklad vloženia obrázka: <h1>procesor</h1> <img src="obrazky/procesor.jpg" alt="procesor" width="116" heigth="116 /"> Zarovnanie obrázka: <img src= obr.jpg align= left /> left - umiestnenie obrázka vľavo na stránke right - umiestnenie obrázka vpravo na stránke bottom - dolný okraj obrázka zarovnaný na dolný okraj riadku middle - stred obrázka zarovnaný na stred riadku top - horný okraj obrázka zarovnaný na horný okraj riadku Príklad zarovnania obrázka: <img src="obrazok/procesor.jpg" align="botton" /> Dolný okraj obrázka zarovnaný na dolný okraj riadku. <img src="obrazok/procesor.jpg" align="top" /> Horný okraj obrázka zarovnaný na horný okraj riadku. <img src="obrazok/procesor.jpg" align="middle" /> Stred obrázka zarovnaný na stred riadku. <img src="obrazok/procesor.jpg" align "left" /> Umiestnenie obrázka vľavo na stránke. Umiestnenie obrázka vľavo na stránke. Umiestnenie obrázka vľavo na stránke. <img src="obrazok/procesor.jpg" align="right" /> Umiestnenie obrázka vpravo na stránke. Umiestnenie obrázka vpravo na stránke. Umiestnenie obrázka vpravo na stránke. Úloha: Vašu stránku procesor.html doplňte o obrázky procesorov, vhodne ich popíšte, obrázky zarovnajte. Uložte a pozrite výsledok.

10 9. Pozadie stránky Obrázok môže tvoriť aj pozadie stránky. Štandardne sa ním pozadie vydláždi. Obrázok by nemal byť príliš veľký, pretože sa dlho načítava. Obrázok na pozadí: <body background="pozadie.jpg"> Príklad obrázka na pozadí: <body background="pozadie.jpg" /> <h1>obrázok ako pozadie</h1> Jednofarebné pozadie: <body bgcolor="yellow"> Úloha: Do stránok uvod.html a procesor.html vyskúšajte vložiť pozadie formou obrázka aj jednofarebné pozadie. Vyberte vhodné pozadie, uložte a pozrite výsledok.