Mgr. Vlastislav Kučera přednáška č. 1
jazyk HTML5 CSS3
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
www.interval.cz www.jakpsatweb.cz www.wellstyled.com ie-brouci.dero.name www.csszengarden.com/tr/czech/
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
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
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
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
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í
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)
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
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í
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://css3test.com http://caniuse.com
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/ Modernizr: http://modernizr.com/ Modernizr v sobě obsahuje HTML5shiv
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é
HTML4 blokové a řádkové HTML5 formulující obsah (<p>, <table>, ) rozdělující obsah (<article>,<nav>,<section>, ) nadpisový obsah (<h1> - <h6>)
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>
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
HTML4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN "http://www.w3.org/tr/html4/loose.dtd"> HTML5 <doctype html>
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)