PROGRAMOVÁNÍ HTML David HEMBERA 33. - 34. hodina
HTML <ul><li>Webová stránka = textový soubor obsahující příkazy jazyka HTML a text </li></ul><ul><li>Na požadavek prohlíže...
HTML <ul><li>Příkazy jazyka HTML určí formátování souboru do výsledné stránky v prohlížeči. </li></ul><ul><li>HTML (HyperT...
HTML <ul><li>Není skutečným programovacím jazykem </li></ul><ul><ul><li>netvoří binární spustitelný kód </li></ul></ul><ul...
HTML <ul><li>Webová stránka: </li></ul><ul><ul><li>deklarace typu dokumentu (nepovinná) - oficiální identifikace, informuj...
HTML <ul><li>tělo stránky: </li></ul><ul><ul><li>formátovaný text </li></ul></ul><ul><ul><li>prvky určující typografické o...
HTML <ul><li>HTML prvky udávají logickou strukturu a vizuální prezentaci stránek. </li></ul><ul><li>Konečné formátování a ...
HTML <ul><li>Dva základní typy prvků: </li></ul><ul><li>značky </li></ul><ul><li>náhrady za znakové entity. </li></ul><ul>...
HTML <ul><li>specifické symboly prohlížeč nedokáže pouze zobrazit </li></ul><ul><li>náhrada &lt; - zobrazení symbolu „<”, ...
HTML Pevná mezera: &nbsp; HTML /3 1 &frac14; ¼ &frac12; ½ &times; × &quot; &quot; &amp; & &gt; > &lt; < Zápis v HTML Zna...
HTML <ul><li>Počáteční i koncové značky ASCII znaky - vymezeny ve špičatých závorkách </li></ul><ul><li>Podle významu </li...
HTML <ul><li>Počáteční značka zleva formátované části textu, koncová zprava. </li></ul><ul><li>Koncová značka symbol lomít...
HTML <ul><li>Počáteční značka – jméno, parametry zpřesňující význam </li></ul><ul><li>Parametry – součást počáteční značky...
Zásady a principy HTML jazyka <ul><li>Webovská stránka vždy textový formát. Binární data (grafika, zvuk, video) odkaz na d...
Zásady a principy HTML jazyka <ul><li>Značky ve špičatých závorkách – formát textu nebo jiných elementů na stránce. Za záv...
Zásady a principy HTML jazyka <ul><li>Párová značka formátuje text nebo element, který je vymezen oběma složkami příkazu. ...
Zásady a principy HTML jazyka <ul><li>Zobrazení speciálních symbolů HTML (<, >) nebo ampersandu (&) na stránce – náhrady z...
Zásady a principy HTML jazyka <ul><li>Výběr ze dvou možností: </li></ul><ul><li>HTML + CSS (tabulka, formulář, obrázek, .....
Zápis HTML <ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;> </li></ul><ul><li><html> </li...
Tělo dokumentu <body> <ul><li>Syntax značky <body bgcolor=&quot;barva_pozadí&quot; text=&quot;barva_textu&quot; link=...
Obrázky < img > <ul><li>Syntax značky <img src=&quot;URL_obrázku&quot; alt=&quot;zástupný_text&quot; width=&quot;šířka&...
Odkazy < a > <ul><li>Syntax značky <a href=&quot;URL_odkazu&quot; </li></ul><ul><li>target=&quot;cíl_odkazu&quot; </li><...
Tabulka < table > <ul><li>Syntax značky <table width=&quot;šířka_tabulky&quot; align=&quot;left | right | center | just...
Tabulka < table > <ul><li>Řádek tabulky <tr> </li></ul><ul><li>Buňka <td align=&quot;horizontální_zarovnání&quot; cha...
Tagy HTML /3 1 Velké písmo <BIG> Zadání základní URL adresy pro relativní adresování <BASE> Tučný text <B> Určení interakt...
Tagy HTML /3 1 Označení citace <BLOCKQU O TE> Tělo HTML stránky <BODY> Konec řádky <BR> Ukázka zdrojového textu v programo...
Tagy HTML /3 1 Seznam definic (DL), termínů (DT) a jejich definicí (DD) <DD>, <DL>, <DT> Definice instance termínů <DFN> S...
Tagy HTML /3 1 Definice nadpisů <H1> a ž <H6> Záhlaví dokumentů <HEAD> Vodorovná čára <HR> Označení HTML dokumentů <HTML>...
Tagy HTML /3 1 Informace o HTML dokumentů <META> Označení textu pro zadání z klávesnice <KBD> Zobrazení seznamu položek <M...
Tagy HTML /3 1 Neproporcionální zobrazení textu <SAMP> Označení klientského skriptu <SCRIPT> Číslovaný seznam <OL> Možnost...
Tagy HTML /3 1 Vytvoření tabulky <TABLE> Buňka tabulky <TD> Spodní index <SUB> Horn í index <SUP> Rozbalovací seznam <SEL...
Tagy HTML /3 1 Nečíslovaný seznam <UL> Podtržený text <U> Neproporciální font <TT> Vstup textové informace <TEXTAREA> Řáde...
of 32

Prg13 Html

programko hembera
Published on: Mar 4, 2016
Published in: Technology      
Source: www.slideshare.net


Transcripts - Prg13 Html

  • 1. PROGRAMOVÁNÍ HTML David HEMBERA 33. - 34. hodina
  • 2. HTML <ul><li>Webová stránka = textový soubor obsahující příkazy jazyka HTML a text </li></ul><ul><li>Na požadavek prohlížeče posílá server kopii souboru, obsahující požadovanou webovou stránku. </li></ul><ul><li>Soubor odeslán bez kompilování i jakékoli jiné úpravy - přímo v textovém formátu. </li></ul>HTML /3 1
  • 3. HTML <ul><li>Příkazy jazyka HTML určí formátování souboru do výsledné stránky v prohlížeči. </li></ul><ul><li>HTML (HyperText Markup Language) - popisný jazyk pro formátování webových stránek. </li></ul>HTML /3 1
  • 4. HTML <ul><li>Není skutečným programovacím jazykem </li></ul><ul><ul><li>netvoří binární spustitelný kód </li></ul></ul><ul><ul><li>je interpretován </li></ul></ul><ul><li>Stránky v HTML mohou interpretovat různé klientské prohlížeče (různé hardwarové platformy a operační systémy. </li></ul>HTML /3 1
  • 5. HTML <ul><li>Webová stránka: </li></ul><ul><ul><li>deklarace typu dokumentu (nepovinná) - oficiální identifikace, informuje o vlastnostech stránky (úroveň jazyka HTML) </li></ul></ul><ul><li><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2//EN”> </li></ul><ul><ul><li>záhlaví </li></ul></ul><ul><ul><li>vlastní tělo webové stránky </li></ul></ul>HTML /3 1
  • 6. HTML <ul><li>tělo stránky: </li></ul><ul><ul><li>formátovaný text </li></ul></ul><ul><ul><li>prvky určující typografické operace s textem. </li></ul></ul><ul><li>Prvky HTML - speciální znaky </li></ul><ul><ul><li>určují prohlížeči operace s označeným textem zdrojového souboru </li></ul></ul><ul><ul><li>přesný účel - rozlišení struktury a organizace dokumentu </li></ul></ul>HTML /3 1
  • 7. HTML <ul><li>HTML prvky udávají logickou strukturu a vizuální prezentaci stránek. </li></ul><ul><li>Konečné formátování a zobrazení řeší prohlížeč </li></ul><ul><li>HTML exaktně definován – přesto velmi flexibilní </li></ul><ul><li>Prohlížeče zobrazí syntakticky správné části zdrojového HTML souboru. Špatné a nepodporované ignorují </li></ul>HTML /3 1
  • 8. HTML <ul><li>Dva základní typy prvků: </li></ul><ul><li>značky </li></ul><ul><li>náhrady za znakové entity. </li></ul><ul><li>Značky - definice struktur (odstavce, nadpisy, seznamy, tabulky, apod.) </li></ul><ul><li>Náhrady znakových entit – zobrazení speciálních symbolů (symboly špičatých závorek (<), (>) uzavírají HTML značky) </li></ul>HTML /3 1
  • 9. HTML <ul><li>specifické symboly prohlížeč nedokáže pouze zobrazit </li></ul><ul><li>náhrada &lt; - zobrazení symbolu „<”, &gt; - symbolu „>“ atd </li></ul><ul><li>náhrady znakových entit vždy uvozeny ampersandem (&) </li></ul>HTML /3 1
  • 10. HTML Pevná mezera: &nbsp; HTML /3 1 &frac14; ¼ &frac12; ½ &times; × &quot; &quot; &amp; & &gt; > &lt; < Zápis v HTML Znak &copy; © &sect; § &middot;  &div; ÷ & euro ; € &sup2; 2 & plusmn ; ± Zápis v HTML Znak
  • 11. HTML <ul><li>Počáteční i koncové značky ASCII znaky - vymezeny ve špičatých závorkách </li></ul><ul><li>Podle významu </li></ul><ul><ul><li>vizuální – zobrazení textu < kurzíva> </li></ul></ul><ul><ul><li>strukturní – význam textu <nadpis> </li></ul></ul><ul><li>Podle způsobu zápisu </li></ul><ul><ul><li>párové značky </li></ul></ul><ul><ul><li>nepárové značky </li></ul></ul><ul><li>Vše mimo závorky je vlastní text dokumentu </li></ul>HTML /3 1
  • 12. HTML <ul><li>Počáteční značka zleva formátované části textu, koncová zprava. </li></ul><ul><li>Koncová značka symbol lomítko (/) za levou špičatou závorkou před jménem značky. </li></ul><ul><li><HTML> … </HTML> zdrojový text stránky </li></ul>HTML /3 1
  • 13. HTML <ul><li>Počáteční značka – jméno, parametry zpřesňující význam </li></ul><ul><li>Parametry – součást počáteční značky – uvnitř špičatých závorek </li></ul><ul><li>Od jména značky odděleny mezerou </li></ul>HTML /3 1
  • 14. Zásady a principy HTML jazyka <ul><li>Webovská stránka vždy textový formát. Binární data (grafika, zvuk, video) odkaz na data v jiném souboru, než základní popis stránky </li></ul><ul><li>HTML ignoruje uspořádání textu ve zdrojovém souboru. Zobrazení závisí pouze na prohlížeči </li></ul>HTML /3 1
  • 15. Zásady a principy HTML jazyka <ul><li>Značky ve špičatých závorkách – formát textu nebo jiných elementů na stránce. Za závorkou „<” jméno značky, parametry a koncová závorka „>“ </li></ul><ul><li>Značky rozděleny na párové a nepárové </li></ul>HTML /3 1
  • 16. Zásady a principy HTML jazyka <ul><li>Párová značka formátuje text nebo element, který je vymezen oběma složkami příkazu. Vymezené části přiřazena daná hodnota. </li></ul><ul><li>Nepárová značka se vztahuje na celý dokument nebo element, který je přesně vymezen a je nedělitelný (obrázek apod.). </li></ul>HTML /3 1
  • 17. Zásady a principy HTML jazyka <ul><li>Zobrazení speciálních symbolů HTML (<, >) nebo ampersandu (&) na stránce – náhrady za znakové entity. </li></ul><ul><li>Jména HTML značek nejsou citlivá na psaní velkých a malých písmen. </li></ul>HTML /3 1
  • 18. Zásady a principy HTML jazyka <ul><li>Výběr ze dvou možností: </li></ul><ul><li>HTML + CSS (tabulka, formulář, obrázek, ...) </li></ul><ul><li>CSS2 a pozicování elementů (správné umístění jednotlivých elementů – beztabulkový design) </li></ul>HTML /3 1
  • 19. Zápis HTML <ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1250&quot;> </li></ul><ul><li><meta name=&quot;description&quot; content=&quot;Titulek v Google&quot;> </li></ul><ul><li><meta name=&quot;keywords&quot; content=&quot;slova, slova, slova&quot;> </li></ul><ul><li><title>Titulek stránky</title> </li></ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;soubor.css&quot; type=&quot;text/css&quot;> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>  samotný text stránky </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>Strukturované datové typy /3 1
  • 20. Tělo dokumentu <body> <ul><li>Syntax značky <body bgcolor=&quot;barva_pozadí&quot; text=&quot;barva_textu&quot; link=&quot;barva_odkazů&quot; vlink=&quot;barva_navštívených_odkazů&quot; alink=&quot;barva_aktivních_odkazů&quot; background=&quot;URL_obrázku_pozadí&quot;> </li></ul><ul><li>Zápis barev – ve formátu RGB </li></ul><ul><ul><li><body text=&quot;red&quot;> </li></ul></ul><ul><ul><li><body text=&quot; #FF0000 &quot;> </li></ul></ul><ul><ul><li><body text=&quot;r gb(100 %,0%,0% ) &quot;> </li></ul></ul><ul><ul><li><body text=&quot;rgb(255,0,0)&quot;> </li></ul></ul>HTML /3 1
  • 21. Obrázky < img > <ul><li>Syntax značky <img src=&quot;URL_obrázku&quot; alt=&quot;zástupný_text&quot; width=&quot;šířka&quot; height=&quot;výška&quot; border=&quot;šířka_okraje&quot; </li></ul><ul><li> vspace=&quot;vertikální_okraj&quot; hspace=&quot;horizontální_okraj&quot; align=&quot;zarovnání_a_obtékání&quot;> </li></ul><ul><li><img src= &quot; obrazek.gif &quot; > </li></ul><ul><li>obrázek v aktuálním adresáři </li></ul><ul><li><img src= &quot;.. /obrazek.g if&quot; > </li></ul><ul><li>obrázek v nadřazeném adresáři, relativní zadání </li></ul><ul><li><img src= &quot;file :/// c :/gif/obrazek.gif &quot; > </li></ul><ul><li>absolutn í zadání lokální cesty </li></ul><ul><li><img src= &quot;http ://www.stranka.cz/obrazek.gif &quot; > </li></ul><ul><li>URL </li></ul>HTML /3 1
  • 22. Odkazy < a > <ul><li>Syntax značky <a href=&quot;URL_odkazu&quot; </li></ul><ul><li>target=&quot;cíl_odkazu&quot; </li></ul><ul><li>title=&quot;popisek_odkazu&quot; > </li></ul><ul><li>Odkaz do nového okna <a href=&quot;URL&quot; target=&quot;_blank&quot;>Odkaz </a> </li></ul>HTML /3 1
  • 23. Tabulka < table > <ul><li>Syntax značky <table width=&quot;šířka_tabulky&quot; align=&quot;left | right | center | justify&quot; border=&quot;tloušťka_orámování&quot; cellspacing=&quot;mezera_vně_buněk&quot; cellpadding=&quot;mezera_uvnitř_buňky&quot; nowrap> </li></ul><ul><li><CAPTION align=&quot;top | bottom | left | right&quot;> nadpis_tabulky </CAPTION> </li></ul>HTML /3 1
  • 24. Tabulka < table > <ul><li>Řádek tabulky <tr> </li></ul><ul><li>Buňka <td align=&quot;horizontální_zarovnání&quot; char=&quot;znak&quot; valign=&quot;vertikální_zarovnání&quot; nowrap bgcolor=&quot;barva_pozadí&quot; width=&quot;šířka_buňky&quot; colspan=&quot;sloučené_sloupce&quot; rowspan=&quot;sloučené_řádky&quot;> </li></ul><ul><li>Buňka záhlaví <th> </li></ul>HTML /3 1
  • 25. Tagy HTML /3 1 Velké písmo <BIG> Zadání základní URL adresy pro relativní adresování <BASE> Tučný text <B> Určení interaktivní mapy <AREA> Vložení Java appletů <APPLET> Logické zvýraznění adresy <ADDRESS> Tvorba odkazů <A>
  • 26. Tagy HTML /3 1 Označení citace <BLOCKQU O TE> Tělo HTML stránky <BODY> Konec řádky <BR> Ukázka zdrojového textu v programovacím jazyce <CODE> Označení citace <CITE> Vycentrování textu <CENTER> Popis tabulky <CAPTION>
  • 27. Tagy HTML /3 1 Seznam definic (DL), termínů (DT) a jejich definicí (DD) <DD>, <DL>, <DT> Definice instance termínů <DFN> Seznam z krátkých pojmů <DIR> Dělení textu <DIV> Typografické zdůraznění (kurzíva) <EM> Výběr velikosti písma <FONT> Definice vstupních prvků <FORM>
  • 28. Tagy HTML /3 1 Definice nadpisů <H1> a ž <H6> Záhlaví dokumentů <HEAD> Vodorovná čára <HR> Označení HTML dokumentů <HTML> Text kurzívou <I> Vložení grafiky <IMG> Prvky formuláře <INPUT> Označení rejstříků dokumentů <ISINDEX>
  • 29. Tagy HTML /3 1 Informace o HTML dokumentů <META> Označení textu pro zadání z klávesnice <KBD> Zobrazení seznamu položek <MENU> Určení aktivní oblasti obrázků <MAP> Vztah mezi HTML dokumenty <LINK> Položky v seznamu <LI>
  • 30. Tagy HTML /3 1 Neproporcionální zobrazení textu <SAMP> Označení klientského skriptu <SCRIPT> Číslovaný seznam <OL> Možnosti rozbalovacího seznamu <OPTION> Označení odstavce <P> Hodnoty parametrů javovských appletů <PARAM> Označení předformátovaného textu <PRE>
  • 31. Tagy HTML /3 1 Vytvoření tabulky <TABLE> Buňka tabulky <TD> Spodní index <SUB> Horn í index <SUP> Rozbalovací seznam <SELECT> Malý font <SMALL> Přeškrtnutý text <STRIKE> Tučný font <STRONG> Vlastnosti objektů <STYLE>
  • 32. Tagy HTML /3 1 Nečíslovaný seznam <UL> Podtržený text <U> Neproporciální font <TT> Vstup textové informace <TEXTAREA> Řádek tabulky <TR> Název dokumentů <TITLE> Záhlaví tabulky <TH> Alternativa pro applet <TEXTFLOW>

Related Documents