Your SlideShare is downloading. ×
0
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Tmw 1 html1_2010
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Tmw 1 html1_2010

270

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
270
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML
  • 2. Cieľ a obsah predmetu <ul><li>Cieľ predmetu : </li></ul><ul><ul><li>na konci predmetu by študent mal vedieť navrhnúť a vytvoriť WEB stránku s podporou multimediálnych prvkov. </li></ul></ul><ul><li>Obsah predmetu: </li></ul><ul><ul><li>základné prvky WEB stránok, </li></ul></ul><ul><ul><li>dizajn a optimálna štruktúra stránky, </li></ul></ul><ul><ul><li>technické prostriedky používané pri vývoji stránky, </li></ul></ul><ul><ul><li>skriptovacie jazyky, </li></ul></ul><ul><ul><li>používanie kaskádových štýlov, multimediálna podpora WEB stránky. </li></ul></ul>
  • 3. Literatúra <ul><li>Písek, S .: HTML tvorba jednoduchých internetových stránok.Grada,2001 </li></ul><ul><li>Dellwing,I.: HTML príručka tvorcu webu.Grada,2002 </li></ul><ul><li>Buranský, I .: HTML a DHTLM. Hotová řešení. Computer press, Brno, 2003 </li></ul><ul><li>Williams, H. E.: PHP a MySQL. Vvytváříme databázové aplikace.Computer press, Praha, 2002 </li></ul><ul><li>Bott E.: Microsoft Windows XP. Windows XP do nejmenších podrobností a do posledního detailu. Computer press, Praha, 2002 </li></ul><ul><li>Mikuš, L.: Efektívna tvorba WWW stránok. EDIS, Žilina, 2003. </li></ul><ul><li>Hlavenka, j. a kol .: Vytváříme WWW stránky a spravujeme moderní WEB sitě. ComputerrPress, Praha, 2000. </li></ul><ul><li>http://www.lm.uniza.sk/~exnar/hlavni/web/web_index.html </li></ul>
  • 4. Obsah prednášky <ul><li>Podstata WEB </li></ul><ul><li>Štruktúra WEB dokumentu </li></ul><ul><li>Typy WEB dokumentov </li></ul><ul><li>Hlavička WEB dokumentu </li></ul><ul><li>Telo WEB dokumentu – HTML značky </li></ul><ul><li>Pravidlá pre tvorbu WEB dokumentu </li></ul><ul><li>Práca s textom </li></ul>
  • 5. Podstata WEB <ul><li>Jednou zo základných služieb Internetu je World Wide Web ( www služba). Jedná sa o informačný systém, ktorý v sebe spája text, grafiku, hypertextové odkazy a ďalšie prvky. </li></ul><ul><li>WWW vznikol na prelome osemdesiatych a deväťdesiatych rokov. Základom je značkovací jazyk , ktorý popisuje ako má byť obsah stránky formátovaný. Najpoužívanejším značkovacím jazykom je HTML ( Hyper Text Markup Language ) , ktorý vznikol v roku 1991. Najpoužívanejšia verzia je HTML4. </li></ul><ul><li>Na zobrazenie www stránok na PC je treba použiť špeciálny software – prehliadač . </li></ul>
  • 6. Podstata WEB Zobrazenie www stránky PC užívateľa Server Služba www Požiadavka na prenos www stránky Prenos požadovanej www stránka Vyhľadanie www stránky Internet PC užívateľa Server Služba www Požiadavka na prenos a vytvorenie www stránky Prenos požadovanej www stránka Vytvorenie www stránky Internet Zobrazenie www stránky PC užívateľa Server Služba www Požiadavka na prenos www stránky Prenos požadovanej www stránka Vyhľadanie/vytvorenie www stránky Internet Vytvorenie a zobrazenie www stránky
  • 7. Základné pojmy <ul><li>Význam základných skratiek: </li></ul><ul><li>WWW World Wide Web </li></ul><ul><li>ML Markup Language </li></ul><ul><li>SGML Standard Generalized Markup Language </li></ul><ul><li>HTML Hyper Text Markup Language </li></ul><ul><li>XHTML eXtensible Hyper Text Markup Language </li></ul><ul><li>XML eXtensible Markup Languag </li></ul><ul><li>CSS Cascading Style Sheets </li></ul><ul><li>W3C Worl Wide Web Consortium </li></ul>
  • 8. Prehliadač <ul><li>Programové vybavenie, ktoré umožňuje zobrazenie web dokumentov a interaktívne prepojenie - komunikáciu užívateľa a sieťového prostredia. </li></ul><ul><li>Základné typy prehliadačov: </li></ul><ul><li>Firefox, Opera, Internet Explorer, Maxthon, Mozila, Fasterfox, Akcelerátor CPROXY, K-Meleon, ... </li></ul>
  • 9. Prostriedky pre vývoj web aplikácií <ul><li>Vývoj web aplikácií je možné realizovať pomocou: </li></ul><ul><li>jednoduchých textových editorov , ktoré do textu nevkladajú formátovacie značky (napr. poznámkový blok,...), </li></ul><ul><li>editorov web aplikácií , ktoré umožňujú písanie html kódu a jeho následné zobrazenie vo finálnej podobe (napr. HTML- Kit, ...), </li></ul><ul><li>WYSIWYG editorov , v ktorých sa vytvára výsledné zobrazenie web stránky a následne sa preloží do html kódu ( väčšina textových procesorov napr. Word, ...) </li></ul><ul><li>špecializované vývojové prostredie pre úpravu univerzálnych web stránok na serveri ( napr. MODx Content Management System, ... ). </li></ul><ul><li>. </li></ul>
  • 10. Syntaktická pravidla značkovacích jazykov <ul><li>Základný stavebný kameň dokumentu je element </li></ul><ul><li><nazov_elementu> Obsah elementu </nazov_elemntu> </li></ul>Počiatočná značka Koncová značka <ul><li> <h1> Nadpis </h1> </li></ul><ul><li>Prázdny element </li></ul><ul><li> <nazov_elementu></nazov_elemntu> </li></ul><ul><li><br></br> </li></ul><ul><li><br/> </li></ul>Vlastný obsah elementu
  • 11. Základná pravidla pre prácu s elementmi <ul><li>Elementy sa nesmi krížiť </li></ul><ul><ul><li><h1>Nadpis<h2>Podnadpish</h2> </h1> </li></ul></ul><ul><li><h1>Nadpis<h2>Podnadpis</h1></h2> </li></ul>
  • 12. Základná pravidla pre prácu s elementmi <ul><li>Atribúty elementov </li></ul><ul><li><element atribut=“hodnota atributu“> obsah </element> </li></ul><ul><li><hr color=“red“> Nadpis </hr> </li></ul>
  • 13. Štruktúra HTML dokumentu <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li>. </li></ul><ul><li>. </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>. </li></ul><ul><li>. </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>hlavička telo kód stránky typ dokumentu
  • 14. Typy dokumentu <ul><li>DTD - Document Type Definition </li></ul><ul><li>Strict — Najprísnejšia norma, neobsahuje formátovacie prvky </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> </li></ul><ul><li>Transitional — „Prechodná“ norma, snaží sa zachovať spätnú kompatibilitu, preto je pomerne mierna — v súčasnej dobe najrozšírenejší XHTML </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul>
  • 15. Typy dokumentu <ul><li>Frameset — Norma určená pre stránky s rámcami (angl. frames). </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;> </li></ul><ul><li>XHTML 1.1 definuje len </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.1//EN&quot; &quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&quot;> </li></ul>
  • 16. Typy dokumentu <ul><li>Typy dokumentov definované pre normu HTML </li></ul><ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 //EN&quot; </li></ul><ul><li>&quot;http://www.w3.org/TR/html4/ strict .dtd&quot;> </li></ul><ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional //EN&quot; </li></ul><ul><li>&quot;http://www.w3.org/TR/html4/ loose .dtd&quot;> </li></ul><ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Frameset //EN&quot; </li></ul><ul><li>&quot;http://www.w3.org/TR/html4/ frameset .dtd&quot;> </li></ul>
  • 17. Základné údaje v hlavičke <ul><li><head> </li></ul><ul><li><title> Názov stránky </title> </li></ul><ul><li><meta name=&quot;description&quot; content=&quot; Popis obsahu &quot; /> </li></ul><ul><li><meta name=&quot;keywords&quot; content=&quot; Kľúčové slová charakterizujúce stránku &quot; /> </li></ul><ul><li><meta name=&quot;author&quot; content=&quot; Meno autora &quot; /> </li></ul><ul><li><meta name=&quot;generator&quot; content=„ Typ generátora &quot; /> </li></ul><ul><li><meta http-equiv=&quot;content-type&quot; content=„text/html; charset=windows-1250 &quot; /> </li></ul><ul><li></head> </li></ul>
  • 18. Telo dokumentu <ul><li>HTML kód je vytváraný pomocou značiek (tágov). Na základe týchto značiek prehliadače vytvárajú požadované zobrazenie. </li></ul><ul><li>Kód značky sa uvádza v špicatých zátvorkách < >. Značky sú: </li></ul><ul><li>párové – obsahujú počiatočný a koncový znak napr. <body>......< /body> . Kód koncového znaku začína lomítkom / , </li></ul><ul><li>nepárové – obsahujú len počiatočný znak, ktorý je pred koncovou zátvorkou ukončený lomítkom / napr. <br / >. </li></ul>
  • 19. Základné značky Značka Význam počiatočná koncová < !-- --> Komentár <h1> < / h1> Nadpis (header) úrovne 1 <h2> < / h2> Nadpis (header) úrovne 2 <h3> < / h3> Nadpis (header) úrovne 3 <h4> < / h4> Nadpis (header) úrovne 4 <h5> < / h5> Nadpis (header) úrovne 5 <h6> < / h6> Nadpis (header) úrovne 6 <p> < / p> Odsek (paragraph) <br / > Zalomenie riadku (break) <hr / > Vodorovná čiara
  • 20. Atribúty značiek <ul><li>Značkám je možné podľa typu prideliť atribúty . </li></ul><ul><li>Napríklad pre čiaru: </li></ul><ul><li><hr size=“3“ / > hrúbka čiary 3 pixely, </li></ul><ul><li><hr width=“100“ / > dĺžka čiary 100 pixelov, </li></ul><ul><li><hr width=“50 % “ / > čiara dlhá 50 % šírky okna, </li></ul><ul><li><hr noshade / > čiara bez tieňov, </li></ul><ul><li><hr color=&quot;#ff0000&quot; /> čiara červenej farby, </li></ul><ul><li><hr color=&quot;red&quot; /> čiara červenej farby, </li></ul><ul><li><hr align=&quot;left” /> zarovnanie čiary doľava, (center, right) zarovnanie na stred a doprava. </li></ul>
  • 21. Spojovanie atribútov <ul><li><body> </li></ul><ul><li><hr color=&quot;olive&quot; /> </li></ul><ul><li><hr color=&quot;#ff0000&quot; size=&quot;15&quot; width=&quot;50%&quot; /> </li></ul><ul><li><hr color=&quot;yellow&quot; align=&quot;left&quot; size=&quot;25&quot; width=&quot;150&quot;/> </li></ul><ul><li></body> </li></ul>
  • 22. Obecné atribúty <ul><li>Atribúty, ktoré môže mať každý HTML tag . </li></ul>Atribút Význam Platnosť pre class trieda pre CSS sekciu všetky elementy id identifikátor pre CSS a skripty všetky elementy style zápis CSS štýlu zobrazené elementy title titulok elementu (info v bubline) všetky elementy lang jazyk elementu všetky elementy name meno pre spoluprácu s ďalšími prvkami rôzna použiteľnosť accesskey funkčný kláves aktívne elementy tabindex poradie aktivácie tabulátorom aktívne elementy language jazyk skriptu všetky elementy dir smer textu najmä <bdo> contenteditable užívateľ môže upravovať obsah všetky elementy udalosti udalosti, ktoré spúšťajú skripty zobrazené elementy
  • 23. Základné pravidlá pre tvorbu www stránok <ul><li>Názvy značiek, ich atribútov a hodnôt písať malými písmenami. </li></ul><ul><li>Hodnoty atribútov písať do úvodzoviek (apostrofov). </li></ul><ul><li>Každá značka musí byť uzatvorená. </li></ul><ul><li>Značky sa nesmú krížiť. </li></ul><ul><li>Nepoužívať minimalizáciu atribútov. </li></ul><ul><li>Odporúča sa ukladať skripty a štýly do externých súborov. </li></ul><ul><li>Oddeliť obsah a formu dokumentu pomocou CSS. </li></ul>
  • 24. Práca s textom <ul><li>Neformátovaný text je základným prvkom, ktorým sa publikujú dáta na Internete. Na jeho zobrazenie nie je potrebná žiadna značka. Za text sa považuje všetko, čo sa nachádza vo vnútri sekcie <body> mimo značiek. Prehliadač nerozlišuje znak Enter a vypúšťa všetky nadbytočné medzery. Na odriadkovanie sa musí použiť značka <br / >. Na vytvorenie viacnásobnej medzery sa musí použiť znak &nbsp; </li></ul><ul><li>Text dokumentu <br />pokračovanie textu &nbsp; dokumentu </li></ul>
  • 25. Odseky a ich zarovnanie <ul><li>Definícia odsekov: </li></ul><ul><li><p> ... < / p> </li></ul><ul><li><div>...< / div> </li></ul><body> Text dokumentu <p> Použitie značky p </p> Text dokumentu <div> Použitie značky div </div> Text dokumentu </body>
  • 26. Charakteristika <div> <ul><li>Div zahŕňa v ľubovoľne veľkú oblasť textu vrátanie nadpisov, obrázkov a tabuliek. Nezriedka sa celá stránka vyskytuje vo vnútri jedného elementu <div>. </li></ul><ul><li>Pred a za odsekom sa zalomí riadok . <div> je veľmi podobný odseku (<p>). Na rozdiel od odseku ale <div> nerobí pred a za sebou vizuálne medzery (má nulový východzí margin). </li></ul><ul><li>Tag <div> bol do HTML pridaný najmä z dôvodu kaskádovým štýlov . Podobá sa tagu <span>, ktorý tiež pribudol v súvislosti so štýlmi. Rozdiel medzi <div> a <span> je v tom, že <div> je blokový element (spôsobuje zalomení riadku pred a po), <span> je in-line element (riadkový). </li></ul><ul><li>Mimo obecných atribútov (v prípade <div> veľmi dôležitých) je možné použiť atribút align (zarovnávanie), ktoré má rovnaké hodnoty ako v prípade tagu <p> (odsek). </li></ul>
  • 27. Parametre značiek <p> a <div> <ul><li>Parameter textu align: left, right, center. </li></ul><body> Text dokumentu <p align=&quot;center&quot;>Použitie značky p s paramertom</p> Text dokumentu <div align=&quot;right&quot;>Použitie značky div s parametrom</div> Text dokumentu </body>
  • 28. Citácia <ul><li>Na citáciu autora textu je možné použiť značku </li></ul><ul><li><blockquote>...</blockquote> </li></ul><body> Text, ktorý je citovaný. <blockquote> Autor </blockquote> </body>
  • 29. Efekty zvýrazňovania písma Značka Význam počiatočná koncová <b> < / b > Tučné písmo <i> < / i> Kurzíva (šikmé písmo) <u> < / u> Podčiarknuté písmo <strike> < / strike> Prečiarknuté písmo <big> < / big> Písmo, ktoré je o 1 bod väčšie ako štandardné <small> < / small> Písmo, ktoré je o 1 bod menšie ako štandardné <sub> < / sub> Dolný index <sup> < / sup> Horný inde
  • 30. Efekty zvýrazňovania písma <ul><li><body> </li></ul><ul><li><b>Tučné písmo</b><i> kurzíva</i><b><i> kurzíva tučné</i></b><br /> </li></ul><ul><li><u>podtrhnuté </u><strike>prečiarknuté </strike><br /> </li></ul><ul><li><big>veľké</big> normál<small> malé</small><br /> </li></ul><ul><li>Z = X<sub>i</sub> + Y<sup>2</sup> </li></ul><ul><li></body> </li></ul>
  • 31. Fonty <ul><li>Umožňuje s použitím atribútov nastaviť veľkosť, farbu a typ písma. </li></ul><body> Základný text <font size=&quot;5&quot;>Písmo veľkosti 5</font><br /> <font color=&quot;#ff0000&quot;>Text s použitím atribútu color</font><br /> <font face=&quot;arial&quot;>Použitie typu písma Arial</font> </body>
  • 32. Logické štýly písma <ul><li>Logické štýly písma dopĺňajú fyzické štýly a umožňujú zvýraznenie textu so zvláštnym významom. Spôsob zobrazenia logických štýlov písma je závislý na typu prehliadača. </li></ul>Značka Význam počiatočná koncová <cite> < / cite > Citácie, napr. názvy kníh <blockquote> < / blockquote> Citát umiestnený do samostatného odseku <code> < / code> Jednoriadkové ukážky zdrojového kódu <em> < / em> Zvýraznenie fráze <dfn> < / dfn> Definícia termínu <kbd> < / kbd> Označuje text, ktorý sa zadáva z klávesnice PC <samp> < / samp> Výstup z programov PC <var> < / var> Mena premenných <strong> < / strong> Zvýraznenie časti textu
  • 33. Logické štýly písma <ul><li><body> </li></ul><ul><li><cite>Citácia</cite></br> </li></ul><ul><li><blockquote>Dlhšia citácia</blockquote><br> </li></ul><ul><li><code>Zdrojový kód</code></br> </li></ul><ul><li><em>Definovaný termín</em></br> </li></ul><ul><li><kbd>Text, zadávaný z klávesnice</kbd></br> </li></ul><ul><li><samp>Výstup z programu</samp></br> </li></ul><ul><li><var>Mená premenných</var></br> </li></ul><ul><li><strong>Špeciálne zvýraznenie</strong> </li></ul><ul><li></body> </li></ul>
  • 34. Zobrazenie zdrojových textov <ul><li>Prehliadač ignoruje všetky zvyšné medzery a konce riadkov. Na zobrazenie textu, tak ako je napísaný v zdrojovom kóde je potrebné použiť značku </li></ul><ul><li><pre>.....</pre> </li></ul>Function Nastav() { dokument.linkColor=&quot;red&quot;; return true; } <pre> Function Nastav() { dokument.linkColor=&quot;red&quot;; return true; } </pre>
  • 35. Zobrazenie špeciálnych znakov Znak Entita Znak Entita Znak Entita > &lt; Ł &pound; č &egrave; > &gt; ± &plusmn; ř &oslash; „ &quot; ü &#252 ; ň &ograve; & &amp; á &aacute; ď &iuml; $ &#36 ; é &eacute; medzera &nbsp; @ &#64 ; ú &uacute; ě &igrave; © &copy; ů &#249 ; í &iacute; ® &reg; ý & y acute; ó &oacute; § &sect; š &scaron; ~ &tilde;

×