32
PROGRAMOVÁNÍ HTML David HEMBERA 33. - 34. hodina
| Date post: | 23-Dec-2014 |
| Category: |
Technology |
| Upload: | gueste9b909 |
| View: | 916 times |
| Download: | 2 times |
PROGRAMOVÁNÍ
HTML
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.
HTMLHTML2/312/31
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.
HTMLHTML3/313/31
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.
HTMLHTML4/314/31
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
HTMLHTML5/315/31
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
HTMLHTML6/316/31
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í
HTMLHTML7/317/31
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)
HTMLHTML8/318/31
HTML
• specifické symboly prohlížeč nedokáže pouze zobrazit
• náhrada < - zobrazení symbolu „<”, > - symbolu „>“ atd
• náhrady znakových entit vždy uvozeny ampersandem (&)
HTMLHTML9/319/31
HTML
Znak Zápis v HTML
< <
> >
& &
" "
× ×
½ ½
¼ ¼
Znak Zápis v HTML
± ±2 ²
€ €
÷ ÷
·
§ §
© ©
Pevná mezera:
HTMLHTML10/3110/31
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
HTMLHTML11/3111/31
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
HTMLHTML12/3112/31
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
HTMLHTML13/3113/31
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
HTMLHTML14/3114/31
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é
HTMLHTML15/3115/31
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.).
HTMLHTML16/3116/31
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.
HTMLHTML17/3117/31
Zásady a principy HTML jazyka
Výběr ze dvou možností:1. HTML + CSS (tabulka, formulář,
obrázek, ...)2. CSS2 a pozicování elementů
(správné umístění jednotlivých elementů – beztabulkový design)
HTMLHTML18/3118/31
Zápis HTML
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2. <html>3. <head>4. <meta http-equiv="Content-Type" content="text/html;
charset=windows-1250">5. <meta name="description" content="Titulek v Google">6. <meta name="keywords" content="slova, slova, slova">7. <title>Titulek stránky</title>8. <link rel="stylesheet" href="soubor.css" type="text/css">9. </head>10.<body>11. samotný text stránky12.</body>13.</html>
Strukturované datové typyStrukturované datové typy19/3119/31
Tělo dokumentu <body>
• Syntax značky<body bgcolor="barva_pozadí" text="barva_textu" link="barva_odkazů" vlink="barva_navštívených_odkazů" alink="barva_aktivních_odkazů" background="URL_obrázku_pozadí">
• Zápis barev – ve formátu RGB– <body text="red">– <body text="#FF0000">– <body text="rgb(100%,0%,0%)">– <body text="rgb(255,0,0)">
HTMLHTML20/3120/31
Obrázky <img>
Syntax značky<img src="URL_obrázku" alt="zástupný_text" width="šířka" height="výška" border="šířka_okraje" vspace="vertikální_okraj" hspace="horizontální_okraj"
align="zarovnání_a_obtékání">
• <img src="obrazek.gif"> obrázek v aktuálním adresáři
• <img src="../obrazek.gif"> obrázek v nadřazeném adresáři, relativní zadání
• <img src="file:///c:/gif/obrazek.gif"> absolutní zadání lokální cesty
• <img src="http://www.stranka.cz/obrazek.gif"> URL
HTMLHTML21/3121/31
Odkazy <a>
• Syntax značky<a href="URL_odkazu"
target="cíl_odkazu" title="popisek_odkazu" >
• Odkaz do nového okna<a href="URL" target="_blank">Odkaz</a>
HTMLHTML22/3122/31
Tabulka <table>
• Syntax značky<table width="šířka_tabulky" align="left | right | center | justify"
border="tloušťka_orámování" cellspacing="mezera_vně_buněk" cellpadding="mezera_uvnitř_buňky" nowrap>
<CAPTION align="top | bottom | left | right"> nadpis_tabulky</CAPTION>
HTMLHTML23/3123/31
Tabulka <table>
• Řádek tabulky <tr>• Buňka
<td align="horizontální_zarovnání" char="znak" valign="vertikální_zarovnání" nowrap bgcolor="barva_pozadí" width="šířka_buňky" colspan="sloučené_sloupce" rowspan="sloučené_řádky">
• Buňka záhlaví <th>
HTMLHTML24/3124/31
Tagy
<A> Tvorba odkazů
<ADDRESS> Logické zvýraznění adresy
<APPLET> Vložení Java appletů
<AREA> Určení interaktivní mapy
<B> Tučný text
<BASE> Zadání základní URL adresy pro relativní adresování
<BIG> Velké písmo
HTMLHTML25/3125/31
Tagy
<BLOCKQUOTE> Označení citace
<BODY> Tělo HTML stránky
<BR> Konec řádky
<CAPTION> Popis tabulky
<CENTER> Vycentrování textu
<CITE> Označení citace
<CODE> Ukázka zdrojového textu v programovacím jazyce
HTMLHTML26/3126/31
Tagy
<DD>, <DL>, <DT>
Seznam definic (DL), termínů (DT) a jejich definicí (DD)
<DFN> Definice instance termínů
<DIR> Seznam z krátkých pojmů
<DIV> Dělení textu
<EM> Typografické zdůraznění (kurzíva)
<FONT> Výběr velikosti písma
<FORM> Definice vstupních prvků
HTMLHTML27/3127/31
Tagy
<H1> až <H6> Definice nadpisů
<HEAD> Záhlaví dokumentů
<HR> Vodorovná čára
<HTML> Označení HTML dokumentů
<I> Text kurzívou
<IMG> Vložení grafiky
<INPUT> Prvky formuláře
<ISINDEX> Označení rejstříků dokumentů
HTMLHTML28/3128/31
Tagy
<KBD> Označení textu pro zadání z klávesnice
<LI> Položky v seznamu
<LINK> Vztah mezi HTML dokumenty
<MAP> Určení aktivní oblasti obrázků
<MENU> Zobrazení seznamu položek
<META> Informace o HTML dokumentů
HTMLHTML29/3129/31
Tagy
<OL> Číslovaný seznam
<OPTION> Možnosti rozbalovacího seznamu
<P> Označení odstavce
<PARAM> Hodnoty parametrů javovských appletů
<PRE> Označení předformátovaného textu
<SAMP> Neproporcionální zobrazení textu
<SCRIPT> Označení klientského skriptuHTMLHTML30/3130/31
Tagy
<SELECT> Rozbalovací seznam
<SMALL> Malý font
<STRIKE> Přeškrtnutý text
<STRONG> Tučný font
<STYLE> Vlastnosti objektů
<SUB> Spodní index
<SUP> Horní index
<TABLE> Vytvoření tabulky
<TD> Buňka tabulky
HTMLHTML31/3131/31
Tagy
<TEXTAREA> Vstup textové informace
<TEXTFLOW> Alternativa pro applet
<TH> Záhlaví tabulky
<TITLE> Název dokumentů
<TR> Řádek tabulky
<TT> Neproporciální font
<U> Podtržený text
<UL> Nečíslovaný seznam
HTMLHTML32/3132/31
