Your SlideShare is downloading. ×
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
Prg13 Html
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

Prg13 Html

959

Published on

programko hembera

programko hembera

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
959
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. PROGRAMOVÁNÍ HTML David HEMBERA 33. - 34. hodina
  • 2. HTML
    • Webová stránka = textový soubor obsahující příkazy jazyka HTML a text
    • Na požadavek prohlížeče posílá server kopii souboru, obsahující požadovanou webovou stránku.
    • Soubor odeslán bez kompilování i jakékoli jiné úpravy - přímo v textovém formátu.
    HTML /3 1
  • 3. HTML
    • Příkazy jazyka HTML určí formátování souboru do výsledné stránky v prohlížeči.
    • HTML (HyperText Markup Language) - popisný jazyk pro formátování webových stránek.
    HTML /3 1
  • 4. HTML
    • Není skutečným programovacím jazykem
      • netvoří binární spustitelný kód
      • je interpretován
    • Stránky v HTML mohou interpretovat různé klientské prohlížeče (různé hardwarové platformy a operační systémy.
    HTML /3 1
  • 5. HTML
    • Webová stránka:
      • deklarace typu dokumentu (nepovinná) - oficiální identifikace, informuje o vlastnostech stránky (úroveň jazyka HTML)
    • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2//EN”>
      • záhlaví
      • vlastní tělo webové stránky
    HTML /3 1
  • 6. HTML
    • tělo stránky:
      • formátovaný text
      • prvky určující typografické operace s textem.
    • Prvky HTML - speciální znaky
      • určují prohlížeči operace s označeným textem zdrojového souboru
      • přesný účel - rozlišení struktury a organizace dokumentu
    HTML /3 1
  • 7. HTML
    • HTML prvky udávají logickou strukturu a vizuální prezentaci stránek.
    • Konečné formátování a zobrazení řeší prohlížeč
    • HTML exaktně definován – přesto velmi flexibilní
    • Prohlížeče zobrazí syntakticky správné části zdrojového HTML souboru. Špatné a nepodporované ignorují
    HTML /3 1
  • 8. HTML
    • Dva základní typy prvků:
    • značky
    • náhrady za znakové entity.
    • Značky - definice struktur (odstavce, nadpisy, seznamy, tabulky, apod.)
    • Náhrady znakových entit – zobrazení speciálních symbolů (symboly špičatých závorek (<), (>) uzavírají HTML značky)
    HTML /3 1
  • 9. HTML
    • specifické symboly prohlížeč nedokáže pouze zobrazit
    • náhrada &lt; - zobrazení symbolu „<”, &gt; - symbolu „>“ atd
    • náhrady znakových entit vždy uvozeny ampersandem (&)
    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
    • Počáteční i koncové značky ASCII znaky - vymezeny ve špičatých závorkách
    • Podle významu
      • vizuální – zobrazení textu < kurzíva>
      • strukturní – význam textu <nadpis>
    • Podle způsobu zápisu
      • párové značky
      • nepárové značky
    • Vše mimo závorky je vlastní text dokumentu
    HTML /3 1
  • 12. HTML
    • Počáteční značka zleva formátované části textu, koncová zprava.
    • Koncová značka symbol lomítko (/) za levou špičatou závorkou před jménem značky.
    • <HTML> … </HTML> zdrojový text stránky
    HTML /3 1
  • 13. HTML
    • Počáteční značka – jméno, parametry zpřesňující význam
    • Parametry – součást počáteční značky – uvnitř špičatých závorek
    • Od jména značky odděleny mezerou
    HTML /3 1
  • 14. Zásady a principy HTML jazyka
    • 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
    • HTML ignoruje uspořádání textu ve zdrojovém souboru. Zobrazení závisí pouze na prohlížeči
    HTML /3 1
  • 15. Zásady a principy HTML jazyka
    • 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 „>“
    • Značky rozděleny na párové a nepárové
    HTML /3 1
  • 16. Zásady a principy HTML jazyka
    • 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.
    • Nepárová značka se vztahuje na celý dokument nebo element, který je přesně vymezen a je nedělitelný (obrázek apod.).
    HTML /3 1
  • 17. Zásady a principy HTML jazyka
    • Zobrazení speciálních symbolů HTML (<, >) nebo ampersandu (&) na stránce – náhrady za znakové entity.
    • Jména HTML značek nejsou citlivá na psaní velkých a malých písmen.
    HTML /3 1
  • 18. Zásady a principy HTML jazyka
    • Výběr ze dvou možností:
    • HTML + CSS (tabulka, formulář, obrázek, ...)
    • CSS2 a pozicování elementů (správné umístění jednotlivých elementů – beztabulkový design)
    HTML /3 1
  • 19. Zápis HTML
    • <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>
    • <html>
    • <head>
    • <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1250&quot;>
    • <meta name=&quot;description&quot; content=&quot;Titulek v Google&quot;>
    • <meta name=&quot;keywords&quot; content=&quot;slova, slova, slova&quot;>
    • <title>Titulek stránky</title>
    • <link rel=&quot;stylesheet&quot; href=&quot;soubor.css&quot; type=&quot;text/css&quot;>
    • </head>
    • <body>
    •   samotný text stránky
    • </body>
    • </html>
    Strukturované datové typy /3 1
  • 20. Tělo dokumentu <body>
    • 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;>
    • Zápis barev – ve formátu RGB
      • <body text=&quot;red&quot;>
      • <body text=&quot; #FF0000 &quot;>
      • <body text=&quot;r gb(100 %,0%,0% ) &quot;>
      • <body text=&quot;rgb(255,0,0)&quot;>
    HTML /3 1
  • 21. Obrázky < img >
    • 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;
    • vspace=&quot;vertikální_okraj&quot; hspace=&quot;horizontální_okraj&quot; align=&quot;zarovnání_a_obtékání&quot;>
    • <img src= &quot; obrazek.gif &quot; >
    • obrázek v aktuálním adresáři
    • <img src= &quot;.. /obrazek.g if&quot; >
    • obrázek v nadřazeném adresáři, relativní zadání
    • <img src= &quot;file :/// c :/gif/obrazek.gif &quot; >
    • absolutn í zadání lokální cesty
    • <img src= &quot;http ://www.stranka.cz/obrazek.gif &quot; >
    • URL
    HTML /3 1
  • 22. Odkazy < a >
    • Syntax značky <a href=&quot;URL_odkazu&quot;
    • target=&quot;cíl_odkazu&quot;
    • title=&quot;popisek_odkazu&quot; >
    • Odkaz do nového okna <a href=&quot;URL&quot; target=&quot;_blank&quot;>Odkaz </a>
    HTML /3 1
  • 23. Tabulka < table >
    • 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>
    • <CAPTION align=&quot;top | bottom | left | right&quot;> nadpis_tabulky </CAPTION>
    HTML /3 1
  • 24. Tabulka < table >
    • Řádek tabulky <tr>
    • 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;>
    • Buňka záhlaví <th>
    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>

×