Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

TNPW1 Cvičení 3 20.2.2013

Podobné prezentace


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

1 TNPW1 Cvičení

2 Obrázky

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

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

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 Dvorak

16 Konstrukce tabulky Seznam zamestnancu Jmeno Prijmeni Funkce Telefon Jan Novak Reditel Karel Dvorak Vedouci vyroby Laco Cervenak Manazer udrzby

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

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

20 Užitečné informace

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

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

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 Deadline pro odevzdání: pátek 21.2.

32 TNPW1 Cvičení 3 Příští cvičení 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 y/6-tnpw1-ostatni y/6-tnpw1-ostatni


Stáhnout ppt "TNPW1 Cvičení 3 20.2.2013"

Podobné prezentace


Reklamy Google