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

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

O čem je TNPW1 Tvorba statických stránek v XHTML Strict 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,…)

Informace - cvičení http://lide.uhk.cz/bartuan1 materiály ke cvičení 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

Informace – projekty a přednášky 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

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í)

Podmínky pro zápočet Odevzdání samostatné práce - projektu 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/

Možnost zrychleného absolvování 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)

Zápočet a zkouška - body 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ů)

Další materiály Literatura Internet 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/

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

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

Technologie pro tvorbu webu 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

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

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

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

Vývojové prostředí Dle vaší volby, ale textové, ne WYSIWYG! 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

Publikování na UHK Síťový disk w, na jakékoli učebně 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, …

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]

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í!

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"> <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /> </a>

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 File Upload na http://validator.w3.org/ Pokud pracujete na disku W, validace je bez problému (publikováno na lide.uhk.cz)

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

TNPW1 Cvičení 2 Úvod do XHTML HTML a XHTML jsou značkovací jazyky – používají značky / tagy k popsání obsahu tagy jsou 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)

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

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

Základní XHTML dokument 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"> <html xmlns="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 content here …</p> </body> </html> (http://www.w3.org/QA/2002/04/valid-dtd-list.html)

Metadata Zapisují se do hlavičky XHTML dokumentu TNPW1 Cvičení 2 <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í

Nadpisy Několik úrovní <h1>Nadpis první úrovně</h1> 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

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>)

Nadpisy 3 - ukázka TNPW1 Cvičení 2 <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>

Odkazy Hypertextové odkazy – absolutní a relativní 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)

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)

Odkazy 3 – v rámci stránky 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>

Zkuste si Vytvořit složku „cviceni1” na disku W 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)

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