GWEB2 - PowerPoint PPT Presentation

noe
gweb2 n.
Skip this Video
Loading SlideShow in 5 Seconds..
GWEB2 PowerPoint Presentation
play fullscreen
1 / 13
Download Presentation
GWEB2
243 Views
Download Presentation

GWEB2

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

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

  2. Náplň předmětu • HTML5 a CSS3 • Publikační systémy

  3. Literatura • CASTRO, E. HTML5 a CSS3. Computerpress, 2012 • GOLDSTEIN, A., LAZARIS, L. a WEYL, E. HTML5 a CSS3 pro webové designéry. Brno: ZonerPress, 2011

  4. Požadavky k zápočtu • Semestrální projekt • Stránky v HTML5 – můžete přespat ty, které jste vytvořili pro GWEB1 • Stránky v publikačním systému

  5. 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, …

  6. 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í

  7. Podpora HTML5 a CSS3 v prohlížečích • 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

  8. HTML5 a CSS3 v IE do verze 8 • 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

  9. Dělení prvků • HTML4 • blokové a řádkové • HTML5 • formulující obsah (<p>, <table>, …) • rozdělující obsah (<article>,<nav>,<section>, …) • nadpisový obsah (<h1> - <h6>)

  10. DOCTYPE • HTML4: • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN„ "http://www.w3.org/TR/html4/loose.dtd"> • HTML5 • <doctypehtml>

  11. Kódová stránka • HTML4 • <meta http-equiv="content-type"content="text/html; charset=windows-1250"> • HTML5 • <metacharset="Windows-1250">

  12. Připojení stylového předpisu • HTML4 • <linkrel="stylesheet"href="style.css" type="text/css"> • HTML5 • <linkrel="stylesheet"href="style.css">

  13. Připojení skriptů k html dokumentu • HTML4 • <scriptsrc="script.js" type="text/javascript"></script> • HTML5 • <scriptsrc="script.js"></script>