TNPW1 Cvičení 1

1. TNPW1 Cvičení 1 13.2.2013 aneta.bartuskova@uhk.cz

2. Organizační úvod 13.2.2013 aneta.bartuskova@uhk.cz

3. TNPW1 Cvičení 1 O čem je TNPW1 • Tvorba statických stránek v XHTML Strict • Úprava vzhledu stránek pomocí CSS • Základní zásady webdesignu a použitelnosti • Na přednáškách také informace o moderních technikách (HTML5, CSS3,…)

4. TNPW1 Cvičení 1 Informace - cvičení • http://lide.uhk.cz/bartuan1 • materiály ke cvičení • změny ve výuce a jiné aktuality k cvičení • aneta.bartuskova@uhk.cz • dotazy ke cvičení, domlouvání konzultací • zasílání úkolů a projektu

5. TNPW1 Cvičení 1 Informace – projekty a přednášky • www.jiristepanek.cz • požadavky na projekt – hodnotící kritéria • přednášky ke stažení • V DOWNLOADS / TNPW1 ostatní – velmi užitečný soubor projectguide.pdf – přečtěte si až začnete pracovat na projektu

6. TNPW1 Cvičení 1 Organizace cvičení • Přednostní právo na židli mají ti, kdo mají předmět povinný ve studijním plánu, poté mají přednost řádně přihlášení před náhradníky • Účast na cvičeních je nepovinná • Na cvičeních je ale možnost získat bonusové body ke zkoušce za odevzdané úkoly (pro možnost získání bodů je nutná účast na konkrétním cvičení)

7. TNPW1 Cvičení 1 Podmínky pro zápočet • Odevzdání samostatné práce - projektu • Požadavky na projekt v kostce: • Statický web, validní XHTML Strict a CSS • Jednotné téma projektu • Minimálně 5 podstran • Správné použití probíraných HTML elementů • Podstatná je správnost a čistota kódu • Více na http://www.jiristepanek.cz/

8. TNPW1 Cvičení 1 Možnost zrychleného absolvování • Odevzdání projektu je možné kdykoli během semestru, nejpozději ve stanovený deadline (poté budou sankce za pozdní odevzdání) • Do 27/2 můžete zkusit odevzdat bez vedlejších následků (tj. pokud neuspějete, můžete odevzdat znovu v řádném termínu)

9. TNPW1 Cvičení 1 Zápočet a zkouška - body • Zápočet • Projekt: možných 50 bodů, pro splnění zápočtu je potřeba min. 30 bodů • Cvičení: možných 10 bodů (pro splnění zápočtu není potřeba) • Zkouška • zkouškový test (podmínky Ing. Štěpánek) • plus body ze zápočtu (ale max. do výše 50 bodů)

10. TNPW1 Cvičení 1 Další materiály • Literatura • HTML, XHTML a CSS / Elizabeth Castro • 333 tipů a triků pro CSS / Martin Domes • Internet • http://www.w3schools.com/ • http://www.jakpsatweb.cz/

11. TNPW1 Cvičení 1 Otázky k organizaci?

12. Úvod do tvorby WWW 13.2.2013 aneta.bartuskova@uhk.cz

13. TNPW1 Cvičení 1 Technologie pro tvorbu webu • HTML, XHTML – značkovací jazyk • struktura, obsah, odkazy - hypertext • CSS – kaskádové styly • vzhled (rozvržení, formátování, jednoduché efekty) • Javascript – skriptování na straně klienta • efekty, interakce, taky AJAX, jQuery • PHP, ASP, Java, Perl, … - na straně serveru • dynamické stránky, aplikace, práce s databází • MySQL, MSSQL - databáze

14. TNPW1 Cvičení 1 To není vše…

15. TNPW1 Cvičení 2 13.2.2013 aneta.bartuskova@uhk.cz

16. Práce na cvičeních 13.2.2013 aneta.bartuskova@uhk.cz

17. TNPW1 Cvičení 2 Vývojové prostředí • Dle vaší volby, ale textové, ne WYSIWYG! • PsPad, NetBeans, nebo třeba Poznámkový blok.. Na cvičeních doporučuji PsPad

18. TNPW1 Cvičení 2 Publikování na UHK • Síťový disk w, na jakékoli učebně • http://lide.uhk.cz/fim/student/login- zobrazí soubor index.html – výchozí soubor pro webovou prezentaci) • http://lide.uhk.cz/fim/student/login/slozka/soubor - můžete si vytvořit složky např. cviceni1, cviceni2, …

19. TNPW1 Cvičení 2 Přístup z domu • Pro připojení k vašemu www adresáři mimo síť UHK je potřeba SFTP klient (např. WinSCP) • Přihlašovací údaje • Adresa: lide.uhk.cz (pro domovský adresář je to hera.uhk.cz) • Login: [váš login do UHK] • Heslo: [vaše heslo]

20. TNPW1 Cvičení 2 !!! Validace stránek !!! • V průběhu vaší práce nebo alespoň před odevzdáním, a hlavně v prvních několika cvičeních, používejte validátor http://validator.w3.org • Kontrolujte XHTML 1.0 Strict • Úkoly i projekt musí být validní!

21. TNPW1 Cvičení 2 Validace stránek 2 • Do zdrojového kódu svých stránek na cvičení přidávejte na konec tento kód (vytvoří přímý odkaz na validátor pro jednodušší kontrolu): • <a href="http://validator.w3.org/check?uri=referer"> <imgsrc="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /> </a>

22. TNPW1 Cvičení 2 Poznámka k validaci • Odkaz na validátor nebude fungovat, pokud nemáte prezentaci na internetu, v tom případě si to musíte zkontrolovat pomocí "Validate by FileUpload na http://validator.w3.org/ • Pokud pracujete na disku W, validace je bez problému (publikováno na lide.uhk.cz)

23. Začínáme… 13.2.2013 aneta.bartuskova@uhk.cz

24. TNPW1 Cvičení 2 Úvod do XHTML • HTML a XHTML jsou značkovací jazyky – používají značky / tagy k popsání obsahu • tagyjsou klíčová slova v závorkách <html> • většinou jsou párové <html> a </html> • prohlížeče interpretují tagy a podle toho zobrazují obsah (k tomu využívají CSS, pokud není tak defaultní styly prohlížeče)

25. TNPW1 Cvičení 2 Základní tagy / elementy • HTML • Hlava a tělo stránky • Metadata, titulek • Nadpisy • Odstavce • Odkazy

26. TNPW1 Cvičení 2 Struktura stránky <html> <head> <title>Titulek stránky</title> </head> <body> <h1>Hlavní nadpis stránky</h1> <p>Odstavec na stránce</p> </body> </html>

27. TNPW1 Cvičení 2 Základní XHTML dokument <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>An XHTML 1.0 Strict standard template</title> <meta http-equiv="content-type" content="text/html;charset=windows-1250" /> </head> <body> <p>… Your HTML contenthere …</p> </body> </html>

28. TNPW1 Cvičení 2 Metadata • Zapisují se do hlavičky XHTML dokumentu • <meta http-equiv='Content-Type' content='text/html; charset=windows-1250' /> (určení znakové sady) • <meta name='description' content=' … ' /> (popis stránky) • <meta name='keywords' content= = ' … ' /> (klíčová slova stránky oddělená čárkami) • Obě výše zmíněné slouží pro indexaci a vyhledávání

29. TNPW1 Cvičení 2 Nadpisy • Několik úrovní • <h1>Nadpis první úrovně</h1> • nadpis celé stránky, jednou na každé stránce • uvádějte ho vždy a pojmenujte smysluplně – zásadní element při indexaci stránek, podobně jako titulek <title>! • <h2>Nadpis druhé úrovně</h2> atd. • počet na stránce podle potřeby

30. TNPW1 Cvičení 2 Nadpisy 2 • Nadpis <h2> sémanticky vyjadřuje podnadpis hlavního nadpisu atd. • Obsah jde strukturovat až po nadpis <h6> • Nadpisy dalších úrovní by neměly být použity, pokud neexistuje nadpis předchozí úrovně • Nepřeskakujte úrovně (ne <h1> a za ním <h3>)

31. TNPW1 Cvičení 2 Nadpisy 3 - ukázka <h1>Stránka o zelenině</h1> <h2>Květák</h2> <p>Květák je oblíbenou košťálovou zeleninou.</p> <h3>Recepty s květákem</h3> <h4>Květáková polévka</h4> <p>Očištěný květák rozdělíme na růžičky a opláchneme ve studené vodě… </p> <h3>Jak pěstovat květák</h3> <p>Květák vyžaduje vhodné stanoviště… </p> <h2>Zelí</h2> <p>Zelí je z rodu brukev.</p>

32. TNPW1 Cvičení 2 Odkazy • Hypertextové odkazy – absolutní a relativní • Absolutní nás dostane vždy na stejnou adresu (použití při odkazování na jiný web) • Relativní používáme při odkazování mezi stránkami a soubory jednoho webu (při změně umístění webu budou odkazy stále fungovat)

33. TNPW1 Cvičení 2 Odkazy 2 - atributy • <a href="http://www.seznam.cz">Seznam</a> • <a href="obrazky/muj_obrazek.jpg">Můj obrázek</a> Atributy • href – cíl odkazu – URL (absolutní nebo relativní) • name – jméno záložky (viz další stránka)

34. TNPW1 Cvičení 2 Odkazy 3 – v rámci stránky • Stránka se odroluje na pozici záložky • Místo atributu name lze použít atribut id <h1><a name="kotvaProNadpis">Nadpis webu</a></h1> <p> … </p> <a href="#kotvaProNadpis">Vrátit na nadpis webu</a> <p> … </p>

35. TNPW1 Cvičení 2 Zkuste si • Vytvořit složku „cviceni1” na disku W • Vytvořit v ní soubor index.html s nějakým obsahem (nadpis, odstavec) – v PsPadu • Zobrazit tento soubor v prohlížeči na adrese http://lide.uhk.cz/fim/student/login/cviceni1 • Doplnit v PsPadu jeden absolutní odkaz a vyzkoušet v prohlížeči (aktualizace okna F5)

36. TNPW1 Cvičení 2 Příští cvičení • Obrázky • Seznamy • Tabulky • Procvičení • Bodovaný úkol