ZÁKLADY TVORBY WEBOVÝCH STRÁNOK Základy HTML
Úvod Webová stránka je dokument (súbor) umiestnený na webovom serveri. Užívateľ prostredníctvom webového klienta (prehliadača) požiada o zaslanie tohto dokumentu (tým, že zadá v prehliadači jeho adresu). Webový server pošle dokument prehliadaču, ktorý ho zobrazí užívateľovi. Obsah dokumentu (webovej stránky) by mal byť štrukturovaný pomocou HTML (Hypertext Markup Language - Hypertextový značkovací jazyk). Štrukturovať obsah webovej stránky znamená vyznačiť pomocou príslušných značiek jazyka HTML to, či časť obsahu je nadpisom, odstavcom textu, hypertextovým odkazom a pod.
Úvod To ako sa má takto štrukturovaný obsah v prehliadači sformátovať (napr. či bude nadpis zelený alebo modrý, akým veľkým písmom a pod.), definuje autor dokumentu pomocou CSS (Cascading Style Sheets - Kaskádové štýly). Vytvoriť webové stránky teda zjednodušene povedané znamená vytvoriť obsah dokumentu, vyznačiť jeho štruktúru pomocou prvkov HTML, upraviť formátovanie týchto prvkov pomocou CSS a umiestniť webové stránky na webový server.
Úvod do HTML HTML (Hypertext Markup Language - Hypertextový značkovací jazyk) je značkovací jazyk pomocou ktorého sa označuje a vytvára štruktúra dokumentu - webovej stránky. Kód najjednoduchšieho, dobre štrukturovaného a validného HTML dokumentu (webovej stránky) môže vyzerať takto: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" /> <title>Ahoj svet!</title> </head> <body> <p>Ahoj svet!</p> </body> </html> ZOBRAZÍ SA: Ahoj svet!
Značky a prvky HTML Základnú štruktúru dokumentu vytvárame pomocou značiek (angl. tag) jazyka HTML, ktoré obklopujú obsah dokumentu a určujú jeho význam z hľadiska štruktúry dokumentu. Napr. uzatvorením textu Ahoj, svet! medzi značky <p> a </p> určíme, že sa jedná o odstavec textu. (Názov značky p je z angl. paragraph - odstavec.) Otváracia značka <p>, uzatváracia značka </p> a obsah medzi nimi spolu tvoria prvok HTML (angl. element). Niektoré prvky nemajú povolený žiaden obsah (tzv. prázdne prvky), napr. prvok pre prechod na nový riadok <br />. Nasledujúca tabuľka ukazuje základné prvky jazyka HTML: Ahoj, svet <p> </p>
Internet a tvorba www stránok Prvky Popis Značka Použitie h1, h2, h3, h4, h5, h6 Nadpisy úrovne 1 (najdôležitejší) až 6 (najmenej dôležitý) <h1></h1> <h2></h2> atď. <h1>Internet a tvorba www stránok</h1> <h2>Lekcia 2: Základy HTML a CSS</h2> p Odstavec textu. <p></p> <p> HTML (Hypertext Markup Language - Hypertextový značkovací jazyk) je značkovací jazyk pomocou ktorého sa označuje a vytvára štruktúra dokumentu - webovej stránky. </p> br Odsadenie na nový riadok. <br /> <p>Ján Novák<br /> Horná 45<br /> Košice</p> em strong Dôraz. Silný dôraz. <em></em> <strong></strong> <p>A nezabudni <em>vrátiť knihy</em>.</p> <p>Základnú štruktúru dokumentu vytvárame pomocou <strong>značiek</strong> (angl. tag) jazyka HTML.</p> ul, ol, li Nečíslovaný zoznam - ul, Číslovaný zoznam - ol, Položka zoznamu - li. <ul></ul> <ol></ol> <li></li> <ul> <li>mlieko</li> <li>chlieb</li> <li>maslo</li> </ul> <ol> <li>Kanada</li> <li>Švédsko</li> <li>USA</li> <li>Slovensko</li> </ol> Internet a tvorba www stránok Lekcia 2: Základy HTML a CSS A nezabudni vrátiť knihy. Základnú štruktúru dokumentu vytvárame pomocou značiek (angl. tag) jazyka HTML. mlieko chlieb maslo Kanada Švédsko USA Slovensko
Zoznam.sk Prvky Popis Značka Použitie a Hypertextový odkaz. <a href=""></a> <a href="http://www.zoznam.sk/"> Zoznam.sk</a> img Obrázok. <img src="" width="" height="" alt="" /> <img src="http://nieco.sk/dovolenka.jpg" width="150" height="100" alt="Dovolenka" /> (kde v uvodzovkách môže byť absolutný odkaz – ako je to v príklade alebo relativný v tvare "upload/dovolenka.jpg" ) (witdth – širka v px; height – výška v px; alt – alternatívny názov – zobrazí sa po prechode myši na odkaz) table, tr, td Tabuľka - table, Riadok tabuľky - tr, Bunka tabuľky - td. <table></table> <tr></tr> <td></td> <table> <tr> <td>Riadok 1, bunka 1</td> <td>Riadok 1, bunka 2</td> </tr> <tr> <td>Riadok 2, bunka 1</td> <td>Riadok 2, bunka 2</td> </tr> </table> div span Významovo neutrálny blokový prvok. Významovo neutrálny riadkový prvok. <div></div> <span></span> V kombinácii s CSS sa používa na vytvorenie layoutu stránok. V kombinácii s CSS sa môže použiť napr. na dosiahnutie typografických efektov v texte. Zoznam.sk Riadok 1, bunka 1 Riadok 1, bunka 2 Riadok 2, bunka 1 Riadok 2, bunka 2
Úlohy Čo je HTML značka? Čo je prvok HTML? Aké základné prvky HTML poznáte? Aké ďalšie prvky HTML poznáte? Aký je rozdiel medzi prvkom a značkou HTML? Aký je rozdiel medzi párovými a nepárovými značkami? Vytvorte HTML dokument a použite v ňom všetky základné prvky HTML, o ktorých sme sa učili. Obsah dokumentu si vymyslite tak, aby tématicky súvisel.
Nabudúce o CSS, čiže kaskádových štýloch.