TNPW1 Technologie pro publikování na webu Přednáška č. 3 Úvod do XHTML Nadpisy a jejich sémantika Nadpisy a jejich sémantika Odkazy Odkazy –relativní, absolutní, různé cíle; kotvy Obrázky a jejich přístupnost Ing. Martin Adámek Katedra informačních technologií FIM UHK
Přednáška TNPW1 – Martin Adámek 2 Princip tvorby kódu stránky Stránka se skládá z tagů (značek) Párový tag: Párový tag: Nepárový tag (HTML): Nepárový tag (HTML): Nepárový tag (XHTML): Nepárový tag (XHTML): Tag s nějakým obsahem = element Párový tag se vztahuje k tomu, co uzavírá –např. odstavec (paragraph): Text v odstavci –např. odstavec (paragraph): Text v odstavci Element může obsahovat atributy Odkaz na stránku s produkty Odkaz na stránku s produkty V rámci XHTML jsou elementy a atributy definovány malými písmeny, hodnoty atributů musí být zapsány malými písmeny.
Přednáška TNPW1 – Martin Adámek 3 Hlavička HTML stránky Je uzavřena v elementu Je uzavřena v elementu Obsahuje metadata = informace o stránce (dokumentu) Jedná se o kódování, název stránky, autora, klíčová slova, popis … Informace slouží prohlížeči, vyhledávacím robotům, … Název stránky Název stránky
Přednáška TNPW1 – Martin Adámek 4 (Základní šablona HTML stránky) <head> Název stránky (pokud možno duchaplný) Název stránky (pokud možno duchaplný) </head><body> První věta do WWW světa. První věta do WWW světa. </body></html>
Přednáška TNPW1 – Martin Adámek 5 (Základní šablona XHTML stránky) <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> Název stránky Název stránky </head><body> Další věta – tentokrát do XHTML světa. Další věta – tentokrát do XHTML světa. </body></html> (podrobněji bude probráno na cvičení) (šablonu k použití naleznete na: )
Přednáška TNPW1 – Martin Adámek 6 Syntaxe XHTML Tělo stránky –uzavřeno v elementu –uzavřeno v elementu –v něm všechny elementy, které se mají interpretovat na stránce. Text (zobrazovaný návštěvníkovi) –Odstavec Nějaký text –Odstavec Nějaký text Do odstavce vkládáme libovolně dlouhý text. Formát nastavíme pomocí stylu, připojeného atributem class –Nadpis Hlavní nadpis –Nadpis Hlavní nadpis Existuje 6 úrovní nadpisů (h1 – h6). Implicitně jsou interpretovány dle této hierarchie. Vzhled lze upravit pomocí stylů.
Přednáška TNPW1 – Martin Adámek 7 Syntaxe XHTML Dolní index dolni index Dolní index dolni index Horní index horni index Horní index horni index –subskript ( dolni index ) nebo superskript ( horni index ) –nejsou určeny pro dekorační účely, ale pro odůvodněné použití dle smyslu textu Další: –Předformátovaný text –Předformátovaný text Text uvnitř tohoto elementu je interpretován včetně mezer, zalomení řádků, …
Přednáška TNPW1 – Martin Adámek 8 Syntaxe XHTML Phrase elementy Označují význam textu. Mohou obsahovat pouze text nebo další řádkové elementy. Zpravidla se automaticky zobrazují jinak než základní text. <em></em> –zvýraznění (emphasis) – kurzíva <strong></strong> –důraznější zvýraznění – tučné Další: – počítačový nebo programový kód – vzorový výstup programů, skriptů apod. – pojem nebo definice (definition)
Přednáška TNPW1 – Martin Adámek 9 (Syntaxe XHTML) Cite Shakespeare. –Označuje citovaný zdroj. Obsahuje jména osob, organizací,... Elementy, – slouží k uzavírání citací Být, či nebýt Být, či nebýt –Řádkový element. Hodí se pro kratší citace. Měl by v prohlížeči doplňovat uvozovky k citovanému textu. Být či nebýt. Být či nebýt. –Blokový element pro uvádění delších citací. –Může přímo obsahovat pouze blokové elementy.
Přednáška TNPW1 – Martin Adámek 10 (Syntaxe XHTML) Adresa Používá se k poskytování informací o autorovi dokumentu nebo nějaké jeho větší části. Většinou se vyskytuje na začátku nebo na konci dokumentu. <address> <a title=" ">Jan Novák, </address>
Přednáška TNPW1 – Martin Adámek 11 (Syntaxe XHTML) Zkratka (abbreviation) – URL – URL –Plné znění by se mělo nacházet alespoň při prvním výskytu v rámci atributu. –Příklady zkratek: HTML, URL, ČD Zkratkové slovo Zkratkové slovo – Čedok – Čedok –Vyslovuje se většinou jako jedno slovo, ne po jednotlivých písmenech. –Plné znění by se mělo nacházet alespoň při prvním výskytu v rámci atributu. –Příklady zkratkových slov: Čedok, NAFTA, OPEC, NATO.
Přednáška TNPW1 – Martin Adámek 12 Syntaxe XHTML Odkaz (hyperlink) Text odkazu Text odkazu Místo (text, obrázek, …) v XHTML dokumentu, které přesměruje uživatele (kliknutím, najetím myší, …) na jiné místo v dokumentu nebo na jinou stránku
Přednáška TNPW1 – Martin Adámek 13 Sémantika – nadpisy (sémantiku obecně v projektech nepodceňovat) <h1> –na každé stránce právě jeden!!! –hlavní nadpis konkrétní stránky (ne webu) výstižný; je pro SEO nejdůležitější společně s a s URL obsahuje unikátní název dané stránky text stejný nebo podobný jako v text stejný nebo podobný jako v pouze na úvodní straně obsahuje hlavní nadpis webu –jinak hlavní nadpis webu není v žádném elementu –jinak hlavní nadpis webu není v žádném elementu
Přednáška TNPW1 – Martin Adámek 14 Sémantika - nadpisy <h2> –~ „Nadpis1“ v MS Word –první opakující se úroveň nadpisu –v XHTML kódu může být zapsán i před (nad) hlavním nadpisem –v XHTML kódu může být zapsán i před (nad) hlavním nadpisem např. „ Navigace “ –další úrovní ( ) může být rozvíjen, pokud je kam nesmí být přeskočen!
Přednáška TNPW1 – Martin Adámek 15 Sémantika - nadpisy,, –další úrovně nadpisů (další podnadpisy) –nadpis nižší úrovně slouží k rozvinutí nadpisu vyšší úrovně nelze užít bezprizorně bez nadpisu vyšší úrovně ~ úroveň stromu –např. jako adresáře na disku či postupná klasifikace čehokoliv
Přednáška TNPW1 – Martin Adámek 16 Odkazy absolutní x relativní absolutní – Kontakt – Kontakt –odevšud vede vždy na tuto adresu
Přednáška TNPW1 – Martin Adámek 17 Odkazy relativní – Kontakt – Kontakt –soubor je hledán v aktuálním adresáři funguje i na lokálu (off-line) –na HDD při vývoji a testování statického webu –na CD/DVD prezentaci funguje i po změně URL webu ! => vhodnější než absolutní odkazy –možnosti cest „data/polozky.htm“ (zanoří se do „data“) „/data/polozky.htm“ (vyjede na nejvyšší úroveň, pak –“ “– ) „../data/polozky.htm“ (vyjede o úroveň výše, pak se zanoří) přibližně jako v příkazovém řádku MS DOS
Přednáška TNPW1 – Martin Adámek 18 Odkazy na cíl ve formátu ≠ (x)html uvést základní informace (varovat uživatele) –formát.pdf,.doc,.xls,.zip,.rar,.exe,.jpg,... k.exe mohou mít prohlížeče nedůvěru k odkazům na obrázky je obvykle vhodné přidat náhled –velikost v kB/KB/KiB nebo v MB/MiB
Přednáška TNPW1 – Martin Adámek 19 Odkazy na cíl ve formátu ≠ (x)html forma uvedení –viditelně Cvičení č.1 – organizační úvod (pps 99 KiB) Cvičení č.1 – organizační úvod (pps 99 KiB) –v parametru title Cvičení č.1 – organizační úvod Cvičení č.1 – organizační úvod –title není vidět na mobilních zařízeních, ani na PC bez myši => ideálně uvést přímo viditelně!
Přednáška TNPW1 – Martin Adámek 20 Kotvy a odkazy na ně Kotva – označení pozice na stránce Definice kotvy Obsah Obsah –zakázáno v XHTML 1,1 (nevadí) Obsah Obsah –nefunguje ve starších prohlížečích
Přednáška TNPW1 – Martin Adámek 21 Kotvy a odkazy na ně Skok na kotvu v rámci stránky Skok na obsah Skok na obsah Odkaz na jinou stránku a skok na kotvu Hlavní stránka – obsah Hlavní stránka – obsah Novák – obsah Novák – obsah Užití kotev –nezneužívat k větší navigaci raději obsah rozdělit mezi více podstránek –užívat k přeskakování navigačního menu, ke skoku na navigační menu, přeskakování reklam, apod. nefunguje v Google Chrome
Přednáška TNPW1 – Martin Adámek 22 Obrázek nepárový element (image) parametry height a width lze vynechat u malých obrázků –aby např. IE dokázal v příp. potřeby zobrazit alt –u větších obrázků rozměry uvádíme, aby se stránka během postupného načítání neroztahovala uživateli pod rukama alternativní popisek alt uvádíme vždy ! při použití obrázku je nutné zvážit jeho datovou velikost a tím i dobu načítání stránky obrázky při tvorbě stránek optimalizujeme (volíme vhodný rozměr obrázku, zvažujeme jak kvalitní obrázek je v dané situaci nutný) obrázek zmenšujeme skutečně v patřičném SW, ne jen zadáním menších souřadnic (datový tok) zvážit i formát souboru obrázku (.jpg,.gif,.png)
Přednáška TNPW1 – Martin Adámek 23 Přístupnost: Obrázky Parametr title –obecně může být definován téměř u jakéhokoliv elementu (obrázek, odstavec, seznam, jeho položka) –se po najetí myší zobrazuje ve žluté bublince (hint) –může být definován přímo u obrázku, nebo u odkazu, do kterého je obrázek vložen –je vhodný pro doplňkové informace –uživatel si nemusí všimnout, že je nějaký title vůbec k dispozici –uživatel mobilního zařízení nebo klávesnice obvykle vůbec nemá možnost si title zviditelnit
Přednáška TNPW1 – Martin Adámek 24 Přístupnost: Obrázky Parametr alt –zobrazuje se pokud má prohlížeč vypnuté zobrazování obrázků nevidomým uživatelům dokud se obrázek nestáhne (pomalé připojení, přetížení serveru) v textových prohlížečích vyhledávačům –je důležitý pro SEO (a sémantiku) obecně místo obrázku, jako jeho náhrada, ekvivalent! –musí vystihovat pravý význam obrázku jeho smysl, účel např. přepis graficky ztvárněného textu obrázku alt=„logo“ je velmi zásadní chyba! –do altu patří přímo text loga! u obrázku, který slouží jako odkaz, patří do altu popis cíle odkazu, ne popis objektů na obrázku
Přednáška TNPW1 – Martin Adámek 25 Přístupnost – Obrázek – alt – manuál 1. Obrázek je odkazem na nějakou podstránku - do textu napište název stránky, na který vede 2. Obrázek je nadpisem nebo logem - do alttextu opište PŘESNĚ text loga. Prostě opište ten text, co na obrázku čtete! 3. Obrázek je tam proto, abychom něco konkrétního ukázali - stručně napište nebo popište co na něm je, napište stručný název obrázku (třeba jména osob na fotce, nebo název činnosti která tam probíhá, zkrátka účel/název té fotky) 4. Obrázek je ilustrační (článek o DN, a fotka nějaké vygooglované sanitky, která u té DN nebyla) - prostě "ilustrační obrázek" (nemá smysl ho stahovat nebo zkoumat, je tam jen pro zpestření) 5. Obrázek je dekorativní (pozadí, boční výplň, kudrlinky, kostičky, cihličky, barvičky) – dejte ho do CSS, nedávejte ho do XHTML – výjimkou snad může být nějaký vodorovný oddělovač, tak do popisu dejte třeba "oddělovač" !
Přednáška TNPW1 – Martin Adámek 26 Přístupnost: Obrázky alt x title alt a title nemusí, ale mohou být vyplněny stejně –typicky title odkazu obsahuje nějaké informace navíc oproti parametru alt obrázku MS IE alt zobrazuje i v bublince, stejně jako title, což je chyba dobrý autor webu ale oba parametry rozlišuje a nezaměňuje
Přednáška TNPW1 – Martin Adámek 27 Příště seznamytabulky jejich sémantika