ZKLADY TVORBY WEBOVCH STRNOK Zklady HTML vod Webov
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 "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml" xml: 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. Ahoj, svet! svet medzi značky <p> • Napr. uzatvorením textu Ahoj, 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 prechod na nový riadok . • Nasledujúca tabuľka ukazuje základné prvky jazyka HTML:
Prvky Popis h 1, h 2, h 3, h 4, h 5, h 6 Nadpisy úrovne 1 <h 1></h 1> <h 1>Internet a tvorba www stránok</h 1> (najdôležitejší) až 6 <h 2></h 2> atď. <h 2>Lekcia 2: Základy HTML a CSS</h 2> (najmenej dôležitý) Internet a tvorba www stránok p Odstavec textu. <p></p> <p> Lekcia 2: Základy HTML a CSS 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. <p>Ján Novák Horná 45 Košice</p> em strong ul, ol, li Značka A nezabudni vrátiť knihy. Dôraz. <em></em> Základnú štruktúru dokumentu Silný dôraz. <strong></strong> vytvárame pomocou značiek (angl. tag) jazyka HTML. Nečíslovaný zoznam - <ul></ul> ul, <ol></ol> • mlieko Číslovaný zoznam - ol, <li></li> Položka zoznamu - li. • chlieb • maslo Použitie <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> <li>mlieko</li> <li>chlieb</li> <li>maslo</li>1. </ul> 2. <ol> <li>Kanada</li> <li>Švédsko</li> Kanada <li>USA</li> <li>Slovensko</li> Švédsko </ol> 3. USA 4. Slovensko
Prvky Popis Značka Použitie a Hypertextový odkaz. <a href=""></a> <a href="http: //www. zoznam. sk/"> Zoznam. sk</a> Zoznam. sk img Obrázok. <img src="" width="" height="" alt="" /> <img src="http: //nieco. sk/ dovolenka. jpg" 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, Tabuľka - table, td 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> <td>Riadok 2, bunka 1</td> <td>Riadok 2, bunka 2</td> </tr> </table> Riadok 1, bunka 1 Riadok 2, bunka 1 div span Významovo neutrálny blokový prvok. Významovo neutrálny riadkový prvok. Riadok 1, bunka 2 Riadok 2, bunka 2 <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.
Ú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.
- Slides: 8
