Tvorba jednoduchých www stránok pomocou jazyka XHTML
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-8859-2"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk"> <head> <meta http-euiv="content-type" content="text/html; charset=iso-8859-2" /> <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.
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-8859-2"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk"> <head> <meta http-euiv="content-type" content="text/html; charset=iso-8859-2" /> <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.
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.
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.
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="http://url stránky ">objekt</a> Príklad: objekt, ktorý odkazuje na stránku školy <h1>moja prvá stránka</h1> <a href="http://www.sostrv.edu.sk"> 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= http://www.google.sk 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.
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.
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.
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.
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.