YMUSY1 – přednáška2+cvičení2 Úvod do XHTML

YMUSY1 – přednáška2+cvičení2Úvod do XHTML Ing. Monika Šimková

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

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>

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>

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

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

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)

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.

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.

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

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

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.

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

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 KiB) • v parametru title • <a href="tnpw1/01-uvod.pps" title="(pps 99 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

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

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)

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

YMUSY1 – přednáška2+cvičení2 Úvod do XHTML