Download
1 / 17
170 likes | 294 Views
Tvorba www stránek. Mgr. Vlastislav Kučera přednáška č. 1. Náplň předmětu. jazyk (x) html kaskádové styly. Literatura. Castro , E.: HTML , XHTML a CSS . CPress , 2007 Písek, S.: HTML a XHTML , začínáme programovat. Grada Publishing , 2003
E N D
Tvorba www stránek Mgr. Vlastislav Kučera přednáška č. 1
Náplň předmětu • jazyk (x)html • kaskádové styly
Literatura • Castro, E.: HTML, XHTML a CSS. CPress, 2007 • Písek, S.: HTML a XHTML, začínáme programovat. GradaPublishing, 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.: EricMeyer o CSS – Ovládněte kaskádové styly!, ZonerPress, 2004 • Meyer, E.: EricMeyer o CSS – Pokračujeme s kaskádovými styly PROFESIONÁLNĚ, ZonerPress, 2005
Další zdroje • www.interval.cz • www.jakpsatweb.cz • www.wellstyled.com • ie-brouci.dero.name • www.csszengarden.com/tr/czech/
Požadavky na zápočet • plnění průběžných úkolů • semestrální projekt
Semestrální projekt • 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ě !!!
Soubory a složky • 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
HTML - úvod • Hyper Text MarkupLanguage (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
Standardy – důvody vzniku • 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
Standardy • 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
Standardy – HTML 4 a CSS • 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)
Standardy – XHTML 1.0 • XHTML = HTML + XML • XML – eXtenstibleMarkupLanguage (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
HTML – elementy, parametry, hodnoty • 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ř: <tdcolspan="3"> • každý tag má jiné parametry • Hodnota • př: <tdcolspan="3"> • některé hodnoty mohou být předdefinované
Blokové, řádkové tagy • 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, ...
Párové, nepárové tagy, vnořování tagů • 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>
Verze a DOCTYPE • 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ř: <!DOCTYPEHTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN„ "http://www.w3.org/TR/html4/loose.dtd"> • <!DOCTYPEhtml PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DOCTYPEa režimy • 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)
