1 / 36

TNPW1 Cvičení 1

TNPW1 Cvičení 1. 13.2.2013 aneta.bartuskova@uhk.cz. Organizační úvod. 13.2.2013 aneta.bartuskova@uhk.cz. 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

tamra
Download Presentation

TNPW1 Cvičení 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related