• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Prg13 Html
 

Prg13 Html

on

  • 1,314 views

programko hembera

programko hembera

Statistics

Views

Total Views
1,314
Views on SlideShare
1,312
Embed Views
2

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 2

http://www.slideshare.net 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Prg13 Html Prg13 Html Presentation Transcript

    • PROGRAMOVÁNÍ HTML David HEMBERA 33. - 34. hodina
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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>
    • 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>
    • 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>
    • 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>
    • 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>
    • 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>
    • 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>
    • 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>