TNPW1 Cvičení 3 20.2.2013

Prezentace na téma: "TNPW1 Cvičení 3 20.2.2013"— Transkript prezentace:

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

2 Obrázky 20.2.2013 aneta.bartuskova@uhk.cz

3 TNPW1 Cvičení 3 Obrázky Používáme nepárový element Obrázky mějte uložené s takovými rozměry, ve kterých je chcete zobrazit na webu (pokud používáte náhled + obrázek v původní velikosti, každý má být uložený zvlášť) - jinak web zbytečně zpomalujete a výsledek nemusí být ani dobře vykreslený

4 TNPW1 Cvičení 3 a jeho atributy src - cesta k obrázku, zpravidla zadaná relativně title - může se zobrazit jako tooltip spolu s obrázkem alt - alternativní text, který se zobrazí při nenačtení obrázku, tedy místo obrázku. Měl by popisovat, co je na obrázku, ne jen název souboru. width, height - rozměry obrázku, měly by souhlasit se skutečnými rozměry obrázku (když se obrázek nenačte nebo se bude načítat pomalu, tak se layout nerozsype ani se nebude přeskupovat)

5 TNPW1 Cvičení 3 Příklad obrázku

6 Seznamy 20.2.2013 aneta.bartuskova@uhk.cz

7 TNPW1 Cvičení 3 Seznamy Slouží k přehlednému výpisu textových informací Rozlišujeme seznamy číslované a nečíslované Lze zobrazit i seznam bez odrážek (využití pro menu) Seznamy lze vzájemně kombinovat a vnořovat (lze tak vytvořit stromovou strukturu)

8 TNPW1 Cvičení 3 Nečíslovaný seznam Párový element Položka seznamu párový element Element v sobě může obsahovat další vnořený seznam Použití pro prostý výčet, kde nezáleží na pořadí prvků, často používán pro tvorbu navigačního menu

9 Nečíslovaný seznam - příklad hlavni polozka 1 hlavni polozka 2 (obsahuje nasledujici dilci polozky) polozka 2-1 polozka 2-3 polozka 2-4 polozka 3

10 TNPW1 Cvičení 3 Číslovaný seznam Párový element Položka seznamu párový element Používá se pro položky, u kterých záleží na pořadí nebo je jejich číslování vhodné.

11 Číslovaný seznam - příklad prvni polozka druha polozka podpolozka 1 podpolozka 2 treti polozka ctvrta polozka s upravenym cislovanim

12 Tabulky 20.2.2013 aneta.bartuskova@uhk.cz

13 TNPW1 Cvičení 3 Tabulky Slouží k reprezentaci dvourozměrných dat Neměly by se zneužívat k rozvržení layoutu stránky, nebo např. k nahrazování plovoucích elementů fotogalerie.

14 TNPW1 Cvičení 3 Tabulky – z přednášky - element tabulky - řádek tabulky - buňka tabulky - hlavičková buňka tabulky (popisek a ne běžná data) - název celé tabulky (neopomíjet) - oblast určující hlavičku tabulky - oblast určující tělo tabulky

15 TNPW1 Cvičení 3 Seznam zamestnancu Prijmeni Telefon Novak 123 456 789 Dvorak 111 222 333

16 Konstrukce tabulky Seznam zamestnancu Jmeno Prijmeni Funkce Telefon Jan Novak Reditel 123 456 789 Karel Dvorak Vedouci vyroby 111 222 333 Laco Cervenak Manazer udrzby 555 444 333

17 TNPW1 Cvičení 3 Spojování buněk Buňky tabulky lze spojovat přes řádky (rowspan) nebo přes sloupce (colspan). Na místo, kam zasahuje roztažená buňka již neumisťujeme další buňku. Například pokud bude mít tabulka 2 sloupce a 2 řádky a cílem bude spojit obě buňky v druhém sloupci, na druhém řádku definujeme pouze jedinou buňku - viz příklad.

18 Spojování buněk tabulky přes řádky Telefonni cisla Jmeno Tel. cislo Jan Novak 123 456 789 Josef Dvorak

19 Spojování buněk tabulky přes sloupce Telefonni cisla Jmeno a prijmeni Tel. cislo Jan Novak 123 456 789 Josef Dvorak 852 741 963

20 Užitečné informace 20.2.2013 aneta.bartuskova@uhk.cz

21 TNPW1 Cvičení 3 Užitečné elementy zdůrazněný text - bude naformátován jako tučný zdůrazněný text - kurzívou - zalomení řádku - oddělení části obsahu čarou - nedělitelná mezera

22 TNPW1 Cvičení 3 Připomenutí validace Používejte http://validator.w3.org/, nepoužívejte jiný validátorhttp://validator.w3.org/ Kontrolujte si cvičení i projekt Pro účely cvičení je vhodné dávat na konec stránky odkaz na validátor (návod viz první cvičení)

23 TNPW1 Cvičení 3 Úkoly + projekt: v Doctype XHTML Strict! Ne HTML Strict Ne HTML Transitional Ale XHTML Strict! Případně lze použít HTML5, ale podmínkou je již dostatek zkušeností s webovým vývojem, tedy budu od vás čekat adekvátní projekt!

24 Chyby při validaci 20.2.2013 aneta.bartuskova@uhk.cz

25 TNPW1 Cvičení 3 Časté chyby při validaci 1 document type does not allow element "img / a" here; missing one of "p", … elementy a je potřeba obalit ještě jiným elementem, např.

26 TNPW1 Cvičení 3 Časté chyby při validaci 2 document type does not allow element "ul" here; assuming missing "li" start-tag Nebo taky end tag for "li" omitted Chyba ve struktuře seznamu, např. musí být až za vnořeným seznamem

27 TNPW1 Cvičení 3 Časté chyby při validaci 3 document type does not allow element "tr" here + end tag for "tr" omitted You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">". Obě chyby způsobené vynechaným koncem řádku

28 TNPW1 Cvičení 3 Časté chyby při validaci 4 Chybějící uzavírací elementy jako,,, zpětné lomítko u Tagy velkými písmeny Chyby ze zuřivého kopírování: místo, před obsahem, obsah v tabulce mimo buňky, …

29 Bonusový úkol 20.2.2013 aneta.bartuskova@uhk.cz

30 TNPW1 Cvičení 3 Úkol za 2 body Vytvořte XHTML 1.0 Strict validní stránku, ve které budou použity tyto elementy: – Tabulka se smysluplným obsahem, minimálně 4x4, ve které budou alespoň 2 buňky spojené přes řádky a zároveň alespoň 2 buňky spojené přes sloupce – Nečíslovaný seznam s minimálně jedním jiným zanořeným seznamem a číslovaný seznam s minimálně jedním jiným zanořeným seznamem – Alespoň jeden obrázek (správně použité atributy alt, title, vhodná velikost a návaznost k obsahu stránky)

31 TNPW1 Cvičení 3 Způsob odevzdání Kdo má prezentaci na lide.uhk.cz – stačí poslat odkaz na stránku s úkolem Kdo tvořil jinde – pošlete HTML soubor nebo ZIP archiv Vše na můj email aneta.bartuskova@uhk.czaneta.bartuskova@uhk.cz Deadline pro odevzdání: pátek 21.2.

32 TNPW1 Cvičení 3 Příští cvičení 27.2. Odpadá z důvodu nepřítomnosti vyučující Doporučuji začít přemýšlet nad tématem a obsahem projektu - podívejte se na soubor Průvodce projektem na http://www.jiristepanek.cz/downloads2/categor y/6-tnpw1-ostatni http://www.jiristepanek.cz/downloads2/categor y/6-tnpw1-ostatni