Mgr. Vlastislav Kučera přednáška č. 1.  jazyk HTML5  CSS3.

Prezentace na téma: "Mgr. Vlastislav Kučera přednáška č. 1.  jazyk HTML5  CSS3."— Transkript prezentace:

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

2  jazyk HTML5  CSS3

3  HTML5 a CSS3: ◦ CASTRO, E. HTML5 a CSS3. Computer press, 2012 ◦ GOLDSTEIN, A., LAZARIS, L. a WEYL, E. HTML5 a CSS3 pro webové designéry. Brno: Zoner Press, 2011  HTML4, XHTML1 a CSS2: ◦ 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 ◦ www stránky  musí splňovat normu HTML5  téma – osobní stránky  Úvodní stránka, informace o mně, kontakt,  reference – ukázky vlastní tvorby – grafika, kresba, …  místo stránek s vlastní tvorbou stránky na volné téma  min. 5.htm souborů  !!! vypracovat samostatně !!!  veškeré formátování pomocí stylů (interních, externích)  stránky by měly obsahovat navigaci, formátovaný text, odkazy na další stránky, tabulky, obrázky, seznamy  odevzdat poslední vyučovací týden

6  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

7  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

8  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

9  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, XHTML1 – poslední schválené verze  HTML5 – zatím ve stadiu schvalování

10  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)

11  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

12 HTML5  Rozšíření stávajících HTML4, příp. XHTML1 ◦ Přebírá prvky HTML4 (XHTML1) ◦ Některé prvky jsou předefinovány ◦ Přidává nové prvky: header, section, article, … CSS3  Rozšíření stávajícího CSS2.1  Přidává nové vlastnosti ◦ Zaoblené rohy při orámování ◦ Barevné přechody ◦ Definování více obrázků na pozadí

13  Poslední verze prohlížečů již mají zabudovanou podporu nových prvků HTML5 a vlastností CSS3  Podporované prvky a vlastnosti lze zjistit na: ◦ http://html5test.com http://html5test.com ◦ http://css3test.com http://css3test.com ◦ http://caniuse.com http://caniuse.com

14  IE do verze 8 ◦ prvky, které nezná, nezobrazí  Musí se připojit ke stránkám JavaScript, který tyto verze „naučí“ poznávat nové prvky jazyka HTML5  HTML5shiv: http://code.google.com/p/html5shiv/ http://code.google.com/p/html5shiv/  Modernizr: http://modernizr.com/http://modernizr.com/  Modernizr v sobě obsahuje HTML5shiv

15  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é

16  HTML4 ◦ blokové a řádkové  HTML5 ◦ formulující obsah (,, …) ◦ rozdělující obsah (,,, …) ◦ nadpisový obsah ( - )

17  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...

18  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

19  HTML4: ◦  HTML5 ◦

20  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)