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

Prezentace na téma: "TNPW1 Cvičení 1 13.2.2013 aneta.bartuskova@uhk.cz."— Transkript prezentace:

1 TNPW1 Cvičení 1

2 Organizační úvod

3 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,…)

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

5 Informace – projekty a přednášky
TNPW1 Cvičení 1 Informace – projekty a přednášky 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 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

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

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

10 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

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

12 Úvod do tvorby WWW

13 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

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

15 TNPW1 Cvičení 2

16 Práce na cvičeních

17 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

18 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ě - zobrazí soubor index.html – výchozí soubor pro webovou prezentaci) - 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 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=" <img src=" 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 File Upload na Pokud pracujete na disku W, validace je bez problému (publikováno na lide.uhk.cz)

23 Začínáme…

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

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

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

27 Základní XHTML dokument
TNPW1 Cvičení 2 Základní XHTML dokument <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <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> (

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

29 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

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

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

33 TNPW1 Cvičení 2 Odkazy 2 - atributy <a href=" <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 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>

35 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 Doplnit v PsPadu jeden absolutní odkaz a vyzkoušet v prohlížeči (aktualizace okna F5)

36 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