Mgr. Vlastislav Kučera přednáška č. 1.  jazyk (x)html  kaskádové styly.

Prezentace na téma: "Mgr. Vlastislav Kučera přednáška č. 1.  jazyk (x)html  kaskádové styly."— Transkript prezentace:

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  www.interval.cz www.interval.cz  www.jakpsatweb.cz www.jakpsatweb.cz  www.wellstyled.com www.wellstyled.com  ie-brouci.dero.name ie-brouci.dero.name  www.csszengarden.com/tr/czech/ www.csszengarden.com/tr/czech/

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 3.2 ◦ 1. 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ř: - otevírací tag, - ukončovací tag  Parametr ◦ př: ◦ každý tag má jiné parametry  Hodnota ◦ př: ◦ 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 ◦,,...  nepárové tagy: ◦ mají jenom jednu značku ◦,, - v HTML ◦,, - v XHTML  správné vnoření: ◦... vnořený tag...  špatné vnoření: ◦... vnořený tag...

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ř:, parametr target u tagu  můžete deklarovat, jakou verzi použijete pomocí DOCTYPE ◦ př: ◦

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)