Mgr. Vlastislav Kučera přednáška č. 1

Transkript

1 Mgr. Vlastislav Kučera přednáška č. 1

2 jazyk (x)html kaskádové styly

3 Castro, E.: HTML, XHTML a CSS. CPress, 2007 Písek, S.: HTML a XHTML, začínáme programovat. Grada Publishing, 2003 Wempen, F.: HTML a CSS, krok za krokem, CPress, 2007 Staníček, P.: CSS kaskádové styly - kompletní průvodce, CPress, 2003 Prokop, M.: CSS Kaskádové styly pro webdesignéry, Cpress, 2005 Staníček, P. a kol.: CSS hotová řešení, CPress, 2006 Meyer, E.: Eric Meyer o CSS Ovládněte kaskádové styly!, Zoner Press, 2004 Meyer, E.: Eric Meyer o CSS Pokračujeme s kaskádovými styly PROFESIONÁLNĚ, Zoner Press, 2005

4 ie-brouci.dero.name

5 plnění průběžných úkolů semestrální projekt

6 www stránky musí splňovat normu HTML 4 strict(transitional) nebo XHTML 1.0 strict(transitional) 3.htm soubory obsah pevně dán: 1. stránka: stručné informace o autorovi stránek 2. stránka: informace o studovaných oborech 3. stránka: kontaktní údaje na autora 3 stránky na volné téma dle vlastního výběru (osobní, odborné, zájmové, školní,...) veškeré formátování pomocí stylů (interních, externích) stránky budou obsahovat záhlaví, navigaci, obsah a patičku při tvorbě obsahu budou použity všechny prvky, které budou probírány, obsah bude smysluplný úvodní stránka bude jasně rozpoznatelná odevzdat poslední vyučovací týden!!! vypracovat samostatně!!!

7 výchozí soubor záleží na serveru, kde jsou www stránky umístěny index.htm, default.htm index.html, default.html složky lepší kontrola, přehlednost složky pro obrázky, soubory, kaskádové styly názvy souborů bez diakritiky, bez mezer místo mezer podtržítka, pomlčky pozor na malá a velká písmena

8 Hyper Text Markup Language (hypertextový značkovací jazyk) definuje 2 základní vlastnosti: hypertext můžete vytvořit propojení web. stránky univerzálnost dokumenty napsané v jazyce HTML se ukládají jako čisté textové soubory => nejsou závislé na platformě! ačkoli je univerzální, záleží na prohlížeči, jak bude stránka zobrazena

9 tzv. válka prohlížečů v roce 1994 firma Netscape za účelem přilákání uživatelů se vzdala univerzálnosti a vytvořila sadu rozšíření, které zvládal pouze prohlížeč Netscape (barevný text, fotografie,...). Uživatelům, kteří nepoužívali prohlížeč Netscape, se takto vylepšené stránky zobrazovaly s chybami nebo se nezobrazily vůbec v roce 1996, kdy se Netscape stal nejoblíbenějším prohlížečem na světě, nastoupila firma Microsoft s podobnou filozofií a přidala do svého prohlížeče nestandardní rozšíření, které zvládal pouze Internet Explorer

10 W3C organizace, jejímž záměrem je přesvědčovat internetovou komunitu o důležitosti univerzálnosti a zároveň se pokouší uspokojit chuť po krásném vzhledu webu její prací je odstranit existující překážky zabránit web proti těm novým HTML odpověď W3C na tzv. válku prohlížečů HTML 4 XHTML 1.0

11 významný krok společnosti W3C stará verze obsahovala obsah, strukturu a vzhled jednoduché řešení, nikoliv efektivní oddělen vzhled od obsahu a struktury byl vytvořen nový systém pravidel formátování Kaskádové styly, CSS (=Cascading Style Sheets)

12 XHTML = HTML + XML XML extenstible Markup Language (rozšiřitelný značkovací jazyk) vlastně jazyk pro tvorbu jiných jazyků podobná syntaxe jako HTML má jistá omezení značky musí být malým písmem značky nesmí začínat číslem, _,.. značky musí být ukončeny parametry malá písmena, hodnoty parametrů v uvozovkách začleněním těchto několika pravidel vznikl jazyk XHTML

13 Prvek, element skládá se z počátečního tagu, obsahu a koncového tagu některé prvky nemají obsah ->prázdný prvek Tag, značka př: <td> - otevírací tag, </td> - ukončovací tag Parametr př: <td colspan="3"> každý tag má jiné parametry Hodnota př: <td colspan="3"> některé hodnoty mohou být předdefinované

14 blokové tagy vždy se zobrazí na novém řádku p, div,... řádkové tagy vždy se zobrazí na aktuálním řádku img, b, span,...

15 párové tagy: mají otevírací a ukončovací značku <p></p>, <td></td>,... nepárové tagy: mají jenom jednu značku <img>, <link>,<br> - v HTML <img />, <link />,<br /> - v XHTML správné vnoření: <p>...<b>vnořený tag</b>...</p> špatné vnoření: <p>...<b>vnořený tag</p>...</b>

16 aktuálně 3 typy striktní (strict), přechodová (transitional) a s rámy (frameset) striktní typ používá pouze tagy, které nebyly označeny za zavržené zavržené tagy takové tagy, příp. parametry, které formátovaly výsledný dokument např: <font>, parametr target u tagu <a> můžete deklarovat, jakou verzi použijete pomocí DOCTYPE př: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd">

17 standardní režim je použit DOCTYPE, u nestandardního (anglicky quirks) není při načítání stránky si prohlížeč zkontroluje, zda je v dokumentu DOCTYPE. Pokud ano, přepne se do standardního režimu, v opačném případě se přepne do quirks módu navržen kvůli zpětné kompatibilitě př. (převzat z příkladů z knihy Castro, E.: HTML, XHTML a CSS. CPress, 2007)