1 / 18

Úvod do XHTML

Technologie pro publikování na webu 1. Úvod do XHTML. Ing. Jiří Štěpánek. Kód stránky. Tagy (značky) Označují prvek stránky Párové Uvozovací a ukončovací značka (<p>Text odstavce</p>) Nepárové

isabella-adrian
Download Presentation

Úvod do XHTML

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. Technologie pro publikování na webu 1 Úvod do XHTML Ing. Jiří Štěpánek

  2. Kód stránky • Tagy (značky) • Označují prvek stránky • Párové • Uvozovací a ukončovací značka (<p>Text odstavce</p>) • Nepárové • Pouze uvozovací značka, dle normy XHTML je na konci použito lomítko (<br />, <imgsrc=“obrazek.jpg“ alt=“domek“ /> • Každý tag může obsahovat atributy (u img například src, nebo alt) • Možnosti / nutnost použití atributů jsou pro každý element uvedeny v referenční příručce (http://xhtml.com/en/xhtml/reference/)

  3. Hlavička 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=utf-8"> <title>Název stránky</title> </head>

  4. Kostra XHTML stránky <?xmlversion="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="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=utf-8" /> <meta name="author" content="jmeno autora" /> <title>Název stránky</title> </head> <body> <p>Text odstavce</p> </body> </html>

  5. XHTML stránka • Hlavička • Titulek stránky, kódování, metadata… • V elementu head • Tělo stránky • V elementu body • Obsahuje uživateli viditelné prvky (texty, obrázky, formuláře atd…)

  6. Texty • Nadpisy <h1> – <h6> • Odstavec <p> • Dolní index <sub></sub>, horní index <sup></sup> • Předformátovaný text <pre></pre> • Text je zobrazen tak jak je přesně zapsán, včetně mezer, zalomení řádků…

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

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

  9. Syntaxe XHTML • Zkratka (abbreviation) • <abbrtitle="Uniformresourcelocator">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 • <acronymtitle="Č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.

  10. Odkaz • <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

  11. Sémantika – nadpisy • <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...>

  12. Sémantika – nadpisy • <h2> • Může se opakovat • Nesmí být přeskočen (použít na stránce jen h1 a h3) • Obecně jakýkoli nadpis nižší úrovně rozvíjí nadpis vyšší úrovně a vztahuje se k němu. • Pro vyhledávače je sémantika nadpisů důležitým faktorem při vyhodnocování obsahu stránky.

  13. Odkazy • absolutní x relativní • absolutní • <a href=„http://lide.uhk.cz/novak/kontakt.htm“>Kontakt</a> • odevšud vede vždy na tuto adresu • relativní • <a href=„kontakt.htm“>Kontakt</a> • soubor je hledán v aktuálním adresáři • „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ří)

  14. Odkazy na jiné cíle než (X)HTML • Odkazovat se samozřejmě dá na jakékoli soubory - .docx, .pdf, .rar, .zip……. • Je dobrým zvykem uvádět velikost souboru • 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> • Použité by měly být oba způsoby • Na obrázek je dobré odkazovat prostřednictvím náhledu

  15. 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 • 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

  16. Obrázky • nepárový element <img /> (image) • <imgsrc=„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)

  17. Obrázky - parametry • 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 • Nezobrazuje se uživatelům mobilních zařízení • 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

More Related