1 / 27

TNPW1 Technologie pro publikování na webu

TNPW1 Technologie pro publikování na webu. Úvod do XHTML Nadpisy a jejich sémantika Odkazy relativní, absolutní, různé cíle; kotvy Obrázky a jejich přístupnost. Přednáška č. 3. Ing. Martin Adámek Katedra informačních technologií FIM UHK. Princip tvorby kódu stránky.

chaim
Download Presentation

TNPW1 Technologie pro publikování na webu

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. TNPW1Technologie pro publikování na webu • Úvod do XHTML • Nadpisy a jejich sémantika • Odkazy • relativní, absolutní, různé cíle; kotvy • Obrázky a jejich přístupnost Přednáška č. 3 Ing. Martin Adámek Katedra informačních technologií FIM UHK

  2. Princip tvorby kódu stránky • Stránka se skládá z tagů (značek) Párový tag:<body></body> Nepárový tag (HTML):<br> Nepárový tag (XHTML): <br /> • Tag s nějakým obsahem = element • Párový tag se vztahuje k tomu, co uzavírá • např. odstavec (paragraph): <p>Text v odstavci</p> • Element může obsahovat atributy <a href="produkty.htm">Odkaz na stránku s produkty</a> • 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 <head> • 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, … <head> <meta http-equiv="content-language" content="cs"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <title>Název stránky</title> </head> Přednáška TNPW1 – Martin Adámek

  4. (Základní šablona HTML stránky) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <meta http-equiv="content-language" content="cs"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <meta name="author" content="jmeno autora"> <title>Název stránky (pokud možno duchaplný)</title> </head> <body> <p>První věta do WWW světa.</p> </body> </html> Přednáška TNPW1 – Martin Adámek

  5. (Základní šablona XHTML stránky) <?xml version="1.0" encoding="iso-8859-2"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> <head> <meta http-equiv="content-language" content="cs" /> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> <meta name="author" content="jmeno autora" /> <title>Název stránky</title> </head> <body> <p>Další věta – tentokrát do XHTML světa.</p> </body> </html> (podrobněji bude probráno na cvičení) (šablonu k použití naleznete na: www.adamek.cz/fim/tnpw1/c/sablona.htm ) Přednáška TNPW1 – Martin Adámek

  6. Syntaxe XHTML • Tělo stránky • uzavřeno v elementu <body></body> • v něm všechny elementy, které se mají interpretovat na stránce. • Text (zobrazovaný návštěvníkovi) • Odstavec<p class=„normalni">Nějaký text</p> • Do odstavce vkládáme libovolně dlouhý text.Formát nastavíme pomocí stylu, připojeného atributem class • Nadpis<h1>Hlavní nadpis</h1> • 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<sub>dolni index</sub> • Horní index <sup>horni index</sup> • 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 <pre></pre> • 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ší: • <code></code> počítačový nebo programový kód • <samp></samp> vzorový výstup programů, skriptů apod. • <dfn></dfn> pojem nebo definice (definition) Přednáška TNPW1 – Martin Adámek

  9. (Syntaxe XHTML) • Cite <cite>Shakespeare</cite>. • Označuje citovaný zdroj. Obsahuje jména osob, organizací, ... • Elementy <q>, <blockquote> – slouží k uzavírání citací • <q>Být, či nebýt</q> • Řádkový element. Hodí se pro kratší citace. Měl by v prohlížeči doplňovat uvozovky k citovanému textu. • <blocquote><p>Být či nebýt.</p></blockquote> • 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é jehovětší části. Většinou se vyskytuje na začátku nebo na konci dokumentu. <address> <a href="mailto:jan.novak@firma.cz" title="e-mail">Jan Novák</a>, 21.2.2004 </address> Přednáška TNPW1 – Martin Adámek

  11. (Syntaxe XHTML) • Zkratka (abbreviation) • <abbr title="Uniform resource locator">URL</abbr> • 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 • <acronym title="Česká dopravní kancelář"> Čedok</acronym> • 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) • <a href="stranka.htm">Text odkazu</a> • 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 <title> a s URL • obsahuje unikátní název dané stránky • text stejný nebo podobný jako v <title> • pouze na úvodní straně obsahuje hlavní nadpis webu • jinak hlavní nadpis webu není v žádném elementu <h...> 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 <h1> • např. „<h2>Navigace</h2>“ • další úrovní (<h3>) • 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 • <h3>, <h4> • 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í • <a href=„http://lide.uhk.cz/novak/kontakt.htm“>Kontakt</a> • odevšud vede vždy na tuto adresu Přednáška TNPW1 – Martin Adámek

  17. Odkazy • relativní • <a href=„kontakt.htm“>Kontakt</a> • 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ě • <a href="tnpw1/01-uvod.pps">Cvičení č.1 – organizační úvod</a> (pps 99&nbsp;KiB) • v parametru title • <a href="tnpw1/01-uvod.pps" title="(pps 99&nbsp;KiB)">Cvičení č.1 – organizační úvod</a> • 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 • <h2><a name=„obsah“>Obsah</a></h2> • zakázáno v XHTML 1,1 (nevadí) • <h2 id=„obsah“>Obsah</h2> • 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 • <a href=„#obsah“>Skok na obsah</a> • Odkaz na jinou stránku a skok na kotvu • <a href=„index.htm#obsah“>Hlavní stránka – obsah</a> • <a href=„http://lide.uhk.cz/novak/index.htm#obsah“>Novák – obsah</a> • 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 <img /> (image) • <img src=„logo-novak.gif" alt= „Novák a spol." width="117" height="18" /> • 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 <img src=„transit.jpg“ alt=„Ford Transit“ title=„Ford Transit“> • 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 • Obrázek je odkazem na nějakou podstránku - do textu napište název stránky, na který vede • Obrázek je nadpisem nebo logem - do alttextu opište PŘESNĚ text loga. Prostě opište ten text, co na obrázku čtete! • 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) • 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í) • 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ě • seznamy • tabulky • jejich sémantika Přednáška TNPW1 – Martin Adámek

More Related