TNPW1 Cvičení

Obrázky

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ý

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)

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

Seznamy

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)

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

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

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

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

Tabulky

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.

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

TNPW1 Cvičení 3 Seznam zamestnancu Prijmeni Telefon Novak Dvorak

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

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.

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

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

Užitečné informace

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

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

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!

Chyby při validaci

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

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

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

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

Bonusový úkol

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)

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.

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