No Future
Weblog přesunut na atd.havrlant.net
Element samp, validita a logika
5 únor 2006, 22:06
rubrika XHTML-semantika
K čemu slouží, k čemu neslouží, k čemu by mohl sloužit, k čemu ho používá konsorcium, k čemu ho nepoužívá konsorcium i když ho k tomu samému účelu používá a jak bych ho používal já.
Abyste tedy byli všichni v obraze, element samp slouží
k vyznačení výstupu programu či nějakého skriptu.
Drobnou zajímavostí pak je, že ve specifikaci
HTML 2 znamenal tento element něco odlišného. Následující specifikace
HTML 3.2 již zmiňuje dnešní význam. A aby toho nebylo
málo, tak na w3schools.com
zmiňují ještě nějaký jiný (nebo spíše trochu nejasný) význam. Tak to
jen abych vás hned na začátek taky trochu zmátl ;-).
Slouží-li tedy element samp k vyznačení výstupu
nějakého programu, příklad jeho použití může vypadat třeba takto:
<p>Po rozběhnutí program na obrazovku vypíše: <samp>Napište první člen posloupnosti:</samp>.
<p>V tuto chvíli napište první člen posloupnosti.Teď je ale otázka, jestli mohu do tohoto elementu vrazit i nějaký kus HTML kódu, pokud chci ukázat, jak bude ten či onen element interpretován webovým prohlížečem. Pozorně si prohlédněte následující příklad:
<p>K vyznačení silného důrazu slouží element <code>strong</code>. Prohlížeč ho zobrazí takto: <samp>Tak to jsem <strong>nikdy</strong> neudělal!</samp>Je to správně nebo to není správně? Jde o to, jestli lze brát HTML
značení za výstup nějakého programu. Další potíž je také v tom,
že pokud si stránku prohlédnete bez stylů, neuvidíte to, co byste ve
skutečnosti vidět měli. Element samp má totiž výchozí
kaskádovou hodnotu font-family: monospace, tudíž bez stylů
zobrazí předchozí text o fous jinak, než jak by ho prohlížeč ve
skutečnosti opravdu zobrazil. Nicméně i přes tuto drobnou odchylku to
lze považovat za správný zápis. Koneckonců nic lepšího mezi tou hromadou
elementů pro tento zápis nenajdeme.
Když tedy připustíme, že interpretaci HTML značek lze považovat za
výstup programu, číhají na nás pouze samé další problémy.
Zatím jsem totiž zmiňoval pouze samé jednoduché příklady a hlavně jsem
v příkladech používal řádkové elementy jako je
právě strong. Ovšem co dělat ve chvíli, kdy třeba chcete
vyznačit jako HTML výstup třeba odstavec? Máte v zásadě dvě
možnosti:
<p>Na odstavec používejte element <code>p</code>. Opět příklad použití:
1) <p><samp>A takto to zobrazí prohlížeč.</samp></p>
2) <samp><p>A takto to zobrazí prohlížeč.</p></samp>Který z nich je správný? Validní je pouze ten první, element
samp může obsahovat pouze řádkové elementy, což odstavec
pochopitelně není. Ale je to opravdu správný zápis? V prvním zápise
vyznačí element samp pouze text odstavce, ale v druhém
vyznačí přímo ten odstavec. Logika mi tedy říká, že lepší je ten
druhý zápis. Pokud nebyl tento příklad dostatečně průkazný – jak
potom vyznačit příklad s tabulkou? Mají se ve všech buňkách
všechny texty dát do elementu samp nebo prostě a jednoduše do
něj dáme celou tabulku? Samozřejmě opět nevalidní zápis. Podobné dvě
značky, které mohou obsahovat jak blokové tak řádkové elementy a přitom
nezalamují řádek (to by asi nebylo příliš šikovné) tady už máme
– ins a del. Možná by nebylo špatné
k nim přidat i samp (a ještě ho trochu rozšířit).
Další možností je poté skutečně element samp používat
pouze na výstupy běžný programů, nepoužívat to při HTML značení.
Nenapadá mne ovšem element, který by se dal použít namísto něj.
Zajímavě se v tomto ohledu chová konsorcium. V kódu specifikace
HTML 4.01 používá element samp v místech,
kde bych třeba já použil element code. To jest všechny
výskyty HTML značek se nacházejí právě v elementu samp,
ač se mi to zdá v rozporu se specifikací, kterou ten kód popisuje. Nebo
že bych se mýlil? V následující specifikaci XHTML 1 se již element
samp v kódu nevyskytuje a všechny HTML značky jsou
vyznačeny elementem code. Zajímavé, pokud vím, tak ke změně
významu jednotlivých elementů v HTML a XHTML přeci nedošlo.
Takže za jakých okolností by se měl element samp používat?
Já vlastně ani nevím… Ale asi mi nebude blbé vyznačit tímto
elementem blokový prvek jako třeba již umíněný odstavec. Prohlížeče to
zobrazí v pohodě, validátor sice nebude chrochtat blahem, ale co se dá
dělat.
Komentáře [1]
Posunutá sémantika
31 leden 2006, 18:04
rubrika XHTML-semantika
Přestože HTML 4.01 obsahuje celkem 91 elementů, není možné jimi popsat všechny části kódu tak, aby to bylo naprosto správné. Proto je potřeba někdy trochu přimhouřit oko a drobně posunout význam jednotlivých elementů.
Patička stránky
Pro vyznačí patičky se asi nejčastěji využívá zápis <div
id="footer"> případně <p id="footer"> (viz nedávný
průzkum). Připravovaný neoficiální návrh HTML 5 již obsahuje
značku <footer>, bohužel my ji však ještě využít
nemůžeme. Jistá alternativa se proto skrývá v tomto zápisu.
<p><small>copyright apod.</small></p>V současné době mne lepší způsob zápisu patičky nenapadá.
Zeslabení důrazu
HTML zná dvě sémantické značky pro zesílení důrazu. Jsou jimi značky
<strong> a <em>. Avšak pokud chcete
důraz naopak snížit, ocitáte se ve slepé uličce. Žádná značka pro
tento účel v HTML neexistuje. Nejblíže podobná ji pak nejspíše bude
opět značka <small>. Pokud to bude uprostřed odstavce, dá
se použít samotná, jinak ji budete muset opět obalit nějakým blokovým
elementem. Pokud tedy chcete do stránky vepsat nějakou drobnou poznámku, asi
bude opět nejlepší použít kód jako s patičkou.
Vyznačení Accesskey
Pokud umožňujete ovládat jednotlivé odkazy pomocí klávesových zkratek, měli byste také vyznačit, pro které znaky se zkratky vztahují. Na webu se obecně používají dva způsoby – buď číselné, které se snaží být jednotné nebo pomocí písmen (například počátečních písmen v daném odkazu). Tyto písmena se poté sluší nějak označit, většinou se použí zápis v tomto stylu:
<a href="index.html" style="text-decoration:none">
<span style="text-decoration:underline">H</span>omepage
</a>Samozřejmě obvykle bývá použit externí stylopis. Není ovšem žádný
problém namísto neutrální značky použít element <u>,
asi takto:
<a href="index.html">
<u>H</u>omepage
</a>Kód se tím zkrátí, sémantika neutrpí. V zásadě je už jedno, jestli použijete neutrální element nebo prezentační element, který plní naprosto stejnou funkci a bez stylů se zobrazí stejně.
WWW adresy
Pro www adresy ve skutečnosti element existuje, jen mi přijde, že se
nepříliš využívá či že je jeho takovýto význam nepříliš známý.
Respektive já jsem si ho nikdy neuvědomil :-). Jedná se tedy o element
<code>, jemuž specifikace přisuzuje význam
počítačového kódu. A webová adresa podle mého názoru pod
počítačový kód spadá. Element <code> se dá dále
využít třeba na názvy souborů (což je vlastně součást té adresy,
nemusí se jednat pouze o www adresu, může klidně jít i o adresu
na lokálním disku).
Klávesové zkratky
Pro vyznačení klávesových zkratek se dá využít nepříliš
používaný element <kbd>, jehož původním účel stejně
byla navigace uživatele. HTML 5 pak na toto zmiňuje krásný
příklad s dvěma vnořenými elementy <kbd>,
posuďte sami:
<p>K zavření aplikace použijte klávesovou zkratku <kbd><kbd>Alt</kbd> + <kbd>F4</kbd></kbd>.</p>Trošičku už to jde do extrému, ale určitě je to zajímavý způsob, který se dá v praxi využít.
Zkratky
Ohledně zkratek toho už bylo dosti naflamováno, nebudu se přidávat, spíše zmíním způsob, který nezdá se mi tak tradiční a hlavně se týká spíše vysvětlování zkratek. Takže pokud přímo ve větě vysvětlujete význam nějaké zkratky, měl by zápis vypadat takto:
<p><dfn><abbr title="Hypertext Markup Language">HTML</abbr></dfn> je značkovací jazyk vyvinut pro popis webových stránek.</p>V podstatě všechno a ještě mnohem více najdete na webu WHATWG, stojí za to si to pročíst, některé postřehy jsou opravdu vynikající.
Komentáře [2]
Další statistika HTML značek
29 leden 2006, 18:00
rubrika XHTML-semantika
Právě před chvílí jsem objevil další Ameriku, nejen dgx zanalyzoval používání HTML značek, nakonec se do toho pustil ten „nejpovolanější“.
Takže onu statistiku pochopitelně naleznete na stránkách Googlu. Celý projekt je rozdělen do několika částí a každá z nich je zároveň patřičně okomentovaná. Zatím jsem spíše prohlížel grafy (které mimochodem nejdou v Opeře – v devítce možná ano) a jsou dosti zajímavé.
Tak třeba tolik zavrhovaný atribut target se vyskytuje
prakticky v každém druhém odkazu. Ne zcele nečekaně pak
u dalšího odkazového atributu rel zvítězila hodnota
nofollow. U obrázků pak potěší, že většina obsahuje
potřebné atributy alt, height a
width.
Docela slušný výsměch pak je větší zastoupení atributu
language než type u elementu
<script>, ač, podle W3C, bychom měli používat právě
ten type.
Dále se třeba dozvíte, že na každé stránce je průměrně devatenáct
různých elementů a nejčastěji bývá na stránkách element
<head>. Za krásnou poznámku autora statistiky považuji
tento výrok (takový volný překlad):
„Naprostá většina lidí (98%) vkládá do stránek značky
<html>,<head>,<title>a<body>, což je ironické, páč tři z těchto značek jsou v HTML nepovinné (optional).“
Hezká je také statistika tříd a identifikátorů, které se nejčastěji
používají. Hned na prvním místě je footer a o kousek
dále header. Tyto nejčastější názvy tříd jsou
v návrhu HTML5
brány jako elementy, tj. <footer>.
U meta tagů pak překvapí, že jsou častěji uváděna klíčová slova (keywords) než popisek stránky (description), ač na klíčová slova se už prakticky nehledí. Že by setrvačnost?
Smutné potom je, že polovina stránek obsahuje ve značce
<body> nesémantický atribut bgcolor a asi tak
třetina stránek barví odkazy přes atributy alink apod.
Prezentační atributy se asi jen tak nevymýtí (možná by nebylo na škodu
udělat obdobnou statistiku, ale jen u webů, které vznikly za poslední
rok, dva, takhle je to řádně zkreslené starými stránkami). Obdobné to je
třeba u odstavců, polovina obsahuje atribut align. Prakticky
u všech tabulek jsou atributy border nebo width,
ale třeba takový hezký atribut summary není skoro nikde.
No, zbytek si už prohlédněte a pročtěte sami, přeji příjemnou zábavu.
P.S. David to stejně měl udělané lépe, kam se na něj kluci z ciziny hrabou ;-).
Komentáře [1]
XHTML Anarchie
24 leden 2006, 14:03
rubrika XHTML-semantika
Ten MIME-type mi prostě nedá spát aneb text/html není ani pro XHTML 1.0.
Už se o tom vedlo dost diskusí a stále v tom nemám jasno. Že XHTML 1.1 nesmí být posíláno jako text/html se už obecně i docela ví, i když jsem se minule pokoušel najít určitou škvírku ve specifikaci, skrze kterou by se text/html dalo propašovat i pro XHTML 1.1. Dneska jsem se spíše pokoušel zamyslet nad jednou větou ve specifikaci. Ta věta zní v originále takto:
XHTML1 defines a profile of use of XHTML which is compatible with HTML 4.01 and which may also be labeled as text/html.
Z předchozího textu vyplývá to, že jestliže je XHTML 1.0 dokument kompatibilní s HTML 4.01, může být odeslán jako text/html. Logicky z toho usuzuji, že jestliže není kompatibilní, nemůže být takto odeslán a musí se použít jiný MIME-type (application/xhtml+xml, application/xml nebo ještě text/xml). Takže teď už zbývá pouze vyřešit otázku, jestli je XHTML 1.0 dokument kompatibilní s HTML 4.01. Přijde mi, že nad touto otázkou se moc lidí nezamýšlí.
Ale ať přemýšlím jak přemýšlím, formálně vzato
kompatibilní není. Minimálně jeden důvod by se našel. Aby byl
kompatibilní, nesměly by se v XHTML dokumentu vyskytnout značky jako
<br/> nebo meta tagy. Proč? Vzpomínáte si na HTML hádanku?
Lomítko, které v XHTML vkládáte do prázdných elementů (tj. ty,
které mají obsah EMPTY), v HTML ukončuje značku, tudíž
následující závorku by prohlížeč měl zobrazit. Narozdíl od XHTML, kde
je tento zápis naprosto v pořádku a prohlížeč by žádnou závorku
zobrazit neměl. Posíláte-li tedy dokonalou XHTML validní stránku
s MIME-typem text/html, prohlížeč ji bude nakonec zpracovávat jako
zprasené a nevalidní HTML. Chcete-li psát „moderním“ jazykem,
měli byste také posílat „moderní“ MIME-type.
Jak je vidět, Shorthand
markup nadělalo zatím více škody než užitku, nicméně to na věci
nic nemění. Zvalidujete-li XHTML dokument HTML validátorem, vyhodí vám
chybu, protože máte v hlavičce text (ty závorky) a případně ještě
zařve na atributy xml:lang a xmlns, používáte-li
je. Ale vzhledem k tomu, že atributy, které prohlížeč nezná
(formálně vzato by je znát neměl, v HTML obsažené nejsou), by měl
ignorovat, nenarušuje to kompatibilitu (narozdíl od ukončování prázdných
elementů). Na druhou stranu používáte-li oba atributy lang i
xml:lang a máte je různé (překlep, nepozornost…),
v XHTML má přednost atribut xml:lang, ale HTML tento
atribut nezná, tudíž by se měla brát hodnota lang, takže
další nesrovnalost, i když drobná.
Takže sečteno podtrženo – není-li váš XHTML dokument zpětně
kompatibilní s HTML, nemůžete odesílat stránku jako text/html.
V naprosté většině případů pak kompatibilní není (využívá se
vlastně „chyby“ v prohlížečích), leda byste nepoužívali
prázdné elementy jako třeba <br> nebo meta tagy či
element <link>.
update: určitě si přečtětě Derův článek, věnuje se stejnému tématu, jen to rozebral do větší hloubky ;-).
Komentáře [8]
Co vám udělala značka font?
22 leden 2006, 15:11
rubrika XHTML-semantika
Není snad zavrhovanější značky než této, ale ať přemýšlím jak
přemýšlím, pořád nemohu najít důvod. Značka <font>
není nebezpečná.
Trocha historie
Tak nejdříve taková malá historická exkurze. Značku<font> jako první implementoval stařičký Netscape 1.0,
který zároveň podporoval atribut size, jenž sloužil ke
změně velikost písma (tedy tak, jak jej známe teď). Na to reagoval
Internet Explorer, který si přidal ještě další dva atributy, které jsou
taktéž známé – color a face. O něco
později je začal podporovat taktéž Netscape. Ten také ve své čtvrté
verzi začíná podporovat další dva atributy a sice
font-weight, který ovládal „tučnost“ písma
(v podstatě stejné jako css vlastnost font-weight) a
point-size, což měla být jakási alternativa k atributu
size, ale používala jiné jednotky.
Značka font byla poprvé zařazena až do specifikace HTML 3.2, ale už
tehdy ji nebyla přána zářivá budoucnost. Zajímavostí pak je, že tehdy
obsahovala pouze dva atributy – size a color,
atribut face byl přidán až ve specifikaci HTML
4.0 (a od té doby je také značka font, včetně atributů,
zavržená).
Prezentační prvek
HTML je značkovací jazyk, který má za úkol vyznačit význam dané části webové stránky. Tudíž jakékoliv prezentační značky jsou nepřípustné. Značka<strike>
nemá v sémantickém kódu co dělat, těžko budeme hledat její
význam. Stejně tak bychom nemuseli v kódu vidět značky jako
<s>, <marquee>,
<blink>, <big>,
<center> nebo <tt>. Mohou se najít
výjimky, ale obecně lze prohlásit, že by tyto značky v kódu být
neměly.
Je značka <font> sama o sobě prezentační?
Domnívám se, že není. Podle specifikace nemá žádný
výchozí styl, tudíž při tomto zápisu se text nijak nezmění:
<font>nějaký text</font>. Bez použití
vlastních atributů je značka <font> neškodná a de facto
se jedná o neutrální značku, obdobně jako <span>.
A stejně jako <span> můžete i značku font
jednoduše nastylovat. Potřebujete přebarvit část věty? Prosím, můžete
vesele použít značku font a nic tím nezkazíte:
Tohle je <font style="color:red">červený text</font>.Závěr
Neříkám, že je lepší používat značku font než třeba span, to ne. Jen dávám alternativu těm, kteří nemají rádi značku span. A taky mi přijde trochu hrrr nadávat na značku, která sama o sobě za nic nemůže :-).Komentáře [1]
Kam s logem?
22 leden 2006, 12:42
rubrika XHTML-semantika
Nechci zde řešit umístění loga na stránce, ale spíše umístění loga
v kódu. Aneb má se logo nebo nějaký obrázkový nadpis či odkaz
vkládat skrze kaskádové styly nebo jednoduchou značkou
<img>? Sám jsem si nasadil brouka do hlavy a nemůžu ho
vyřešit.
Obě možnosti mají své pro i proti. Logo nebo obrázkový odkaz je v podstatě pouze hezčí podoba nějakého textového ekvivalentu, což znamená bod pro kaskádové styly, protože všechny obrázky, které slouží dekoračním účelům (což takový obrázkový nadpis splňuje, neb ho autor používá především z důvodu, že je hezčí než běžný text), by se měly vkládat do stránky přes kaskádové styly.
Na druhou stranu ovšem takovýto obrázek má vysokou informační hodnotu,
nelze jednoznačně říci, že to je součást nějaké grafiky (platí
obzvláště u loga). Obrázky, které mají informační hodnotu by zase
měly být vkládány přes značku <img>. Takže
rozpor.
Logo webu bývá obvykle důležité, reprezentuje nějakou společnost nebo
firmu a tak by nebylo moudré, aby třeba s vypnutými styly byl vidět
pouhopouhý text, namísto loga. Už jenom z tohoto důvodu bych
doporučil logo vkládat přes značku <img>. Navíc
u loga nelze tak jednoznačně říci, že je to pouze hezčí ekvivalent
textové podoby, logo je spíše symbol, proto nemá
v kaskádových stylech co dělat. Docela mne zarazilo, že třeba dobrý web má logo vkládané právě skrze
kaskádové styly, zajímal by mne důvod. Připadá mi, že s rozmachem
kaskádových stylů se každý snaží co nejvíce věcí udělat právě
přes CSS a na staré dobré HTML se zapomíná. Vůbec bych se nedivil,
kdybych někde uviděl tento zápis, protože webdesigner byl líný na konci
odstavce udělat tečku:
p:after{content:"."}Naproti tomu obrázkové odkazy, když už je skutečně chcete použít, by měly být vkládány skrze CSS, neboť zde se již skutečně jedná pouze o hezčí podobu nějakého textu a zároveň to obvykle nebývá nějaký charakteristický symbol daného webu jako třeba to logo.
Související odkaz: Náhrada textu obrázkem
Komentáře [4]
Další problém se značkou menu
15 leden 2006, 09:58
rubrika XHTML-semantika
Že je má oblíbená značka zavržená a tudíž všemi striktními webdesignery zároveň opovrhovaná, na to už jsem si zvykl. Ale nedávno jsem narazil na problém, který mě dost zaskočil. Do značky menu totiž nemůžete zanořit další značku menu.
Už dlouho jsem nepotřeboval menu zanořit, takže jsem si toho všiml až teď, což mě docela mrzí. Začínám si opravdu myslet, že si W3C na značku menu opravdu nějakým způsobem zasedlo. Jako by nestačila nálepka deprecated. Takže k věci. Pokud chcete zanořit nějaký seznam, provedete to takovýmto způsobem:
<ul>
<li>film
<ul>
<li>Mechanický pomeranč</li>
<li>Tři oříšky pro popelku</li>
</ul>
</li>
<li>hudba
<ul>
<li>Nirvana</li>
<li>Visací zámek</li>
</ul>
</li>
</ul>Tento příklad je jednak funkční a jednak také validní. Nyní si
namísto značky <ul> dosaďte značku
<menu> a opět zvalidujte. Možná vás překvapí výsledek
– validní to není, protože prostě do značky menu již další seznam
nenarvete (ani <ul>). Takže mě napadají celkem tři
možnosti řešení:
- použít namísto značky menu normální nečíslovaný seznam
<ul> - vykašlat se na to a prostě
<menu>necháte zanořené - můžete to přepsat do XHTML kde to další chybou W3C bude validní
Nevidím jediný rozumný důvod, proč bych nemohl zanořit menu. A pokud by už někdo nějaký ten důvod proti zanořování menu našel tak zase nevím, v čem si pomůžeme, když namísto značky menu použijeme značku ul, která se tedy zanořovat může.
Komentáře [7]
Obrázky v XHTML 2.0 a záhadný tag image
4 leden 2006, 15:15
rubrika XHTML-semantika
V návrzích XHTML 2.0 jsem objevil věc, která se mi opravdu zalíbila. Šlo o mnohem přístupnější a pohodlnější vkládání obrázků než v předešlých verzích HTML či XHTML.
Jak to funguje teď
Nyní je situace taková: Pokud chcete do stránky vložit nějaký obrázek, máte v zásadě tři možnosti. Buď použít klasickou značku<img>, nebo obrázek vložit přes pozadí nějakého prvku
v kaskádových stylech nebo (patrně nejméně známý způsob) pomocí
elementu <object> (nefunguje v MSIE – tady bude
zakopaný pes, proč se to nepoužívá :-)). Za čtvrtou možnost by se
ještě dala považovat značka <embed>, ale ta jednak není
ve specifikaci, ale hlavně zase nefunguje v MSIE.
Vložení obrázku teď příliš řešit nechci. Jde mi o alternativní obsah, pokud se obrázek z jakéhokoliv důvodu nemůže zobrazit. U obrázků vkládaných přes kaskádové styly je situace nejjednodušší, protože žádný alternativní obsah není (respektive pouze barva pozadí), to je také důvod, proč se tento způsob používá – slouží výhradně k vkládání dekorativních obrázků, či obrázků, které prostě alternativní obsah nemají. Řešení při použití značky
<img> je použít povinný atribut
alt, do kterého zapíšeme alternativní text, který se
zobrazí, když obrázek není k dispozici. Značka
<object> nabízí lepší možnosti, ale vzhledem
k jeho nepoužitelnosti se o něm nyní bavit nechci.
Jak to bude fungovat v XHTML 2.0
Předem podotýkám, že návrh není konečný, tudíž se to ještě teoreticky může změnit. Doufám ale, že k výraznějším změnám nedojde (alespoň ne k horšímu). Takže značka<img>
bude nyní „párová“ a obsah elementu bude sloužit právě jako
alternativní text (prakticky stejně to funguje u značky
<object>). Zápis nějakého obrázku by v XHTML
2.0 mohl vypadat takto:
<img src="hora.jpg">Sněžka v zimě</img>Pokud tedy obrázek není k dispozici, zobrazí se text „Sněžka
v zimě“. Zatím tedy žádné změny. Přesto tento zápis má
jednu obrovskou výhodu – text v elementu <img>
totiž můžete pohodlně formátovat a značkovat, jako jakýkoliv jiný obsah
dokumentu. Můžete tedy snadno vyznačit jednotlivé části alternativního
obsahu a nemusíte tak používat nepohodlný atribut longdesc,
který stejně byl prakticky nepoužitelný. Tudíž tento zápis by byl
naprosto v pořádku:
<img src="sleva.jpg">Na obuv <strong>sleva 30%</strong></img>Jistě chápete, že tento způsob zápisu nabízí mnohem lepší sémantiku a také větší možnosti následného formátování. Pokud nyní chcete stylovat alternativní text, můžete ho nastylovat pouze celý najednou, nikoliv jen jeho část. Příklad:
<img src="neexistuju.jpg" alt="červený alternativní text" style="color:red">Stejně tak teoreticky můžete jako alternativní obsah zvolit opět obrázek. Například pokud používáte formát obrázků png a některý prohlížeč tento formát nepodporuje, můžete do alternativní obsahu dát stejný obrázek ve formátu jpg (a jeho alternativní obsah již bude prostý text). Pokud ted obrázek png nebude k dispozici, sáhne prohlížeč po obrázku v jpg. Zápis by mohl vypadat takto:
<img src="obrazek.png">
<img src="obrazek.jpg">
alternativní obsah
</img>
</img>Další vychytávka
Ovšem XHTML 2.0 se s tímto nespokojilo a vymyslelo ještě
rafinovanější způsob na vkládání obrázků. Atribut src,
který v sobě nese adresu obrázku, může totiž obsahovat
každý element. To znamená, že třeba můžete tento atribut
vložit do nadpisu, v prohlížeči se zobrazí obrázek (text nadpisu
nikoliv) a když nebude obrázek k dispozici, zobrazí se právě text
nadpisu. Zápis by tedy vypadal nějak takto:
<h1 src="nazev.jpg">Seznam, najdu tam co neznám</h1>Jedná se v podstatě o tento zkrácený zápis:
<h1><img src="nazev.jpg">Seznam, najdu tam co neznám</img></h1>Tento styl zápisu se mi opravdu zamlouvá a bude zajímavé, kdy ho budeme mocit použít. Upřímně doufám, že se toho ještě dožiji.
Do hry vstupuje tajemný tag image
Že tento tag neznáte? Nedivím se vám, neznal ho prakticky nikdo, dokud ho
Radek Hrabůvka neobjevil a
nezmínil se o ní v diskusi. Omrzelo už vás vkládání obrázku
přes značku <img>? Pak tedy můžete zkusit použít tuto
značku. Tento zápis normálně vloží do stránky obrázek, prohlížeče
(MSIE, FF, O, jiné jsem nezkoušel) obrázek opravdu zobrazí:
<image src="obrazek.jpg">Nevěříte-li, můžete si to
vyzkoušet. Podívejte se do zdrojáku, logo tohoto weblogu je vloženo
přes značku <image>. A kde se vlastně tato značka
vzala? No, moc informací jsem o ní nesehnal, docela špatně se hledá
googlem ;-). Ale něco přece.
Tento tag byl součástí „specifikace“ HTML plus, za kterou stál kdo jiný než Tim Berners-Lee. Nejzajímavější na ní ovšem je ta syntax. Pokud se dobře podíváte, uvidíte tam následující příklad:
<image align=top src="http://spoof.cern.ch/people/tbl.gif">A photo of Tim Berners-Lee</image>Tento zápis se poměrně dost podobá nově vzniklé syntaxi vkládání
obrázků v XHTML 2.0 (obsah elementu je opět chápán jako alternativní
text). Bohužel, žádný z dnešních prohlížečů již tuto
rozšířenou syntaxi nepodporuje, takže předchozí zápis budou
prohlížeče vykreslovat špatně, vykreslí jak obrázek, tak text. Škoda,
že se tehdy nakonec prosadila myšlenka atributu alt,
z jakého důvodu opravdu netuším, ale elementu
<image> je podle mě docela škoda.
Komentáře [8]
Nezavrhujme značky, už tak je jich málo
31 prosinec 2005, 13:47
rubrika XHTML-semantika
Konsorcium nám vesele zavrhuje jednu značku za druhou, ale já se ptám proč? Proč radši nepřijdou na to, jak je správně využít a třeba jen trochu nepozmění jejich význam. Vyhazovat z DTD jednu značku za druhou umí každý Franta z Horní Dolní.
Jako příklad použiji zdánlivě a na první pohled odstrašující značku
<u>. Hádám, že většina z vás by se bála na tuto
značku jenom pohlédnout. Proč? Pokud bude použita vhodně a rozumně,
nevidím jediný důvod k tomu, aby se ji někdo musel štítit. Stačí
tedy jen vymyslet ten rozumný způsob použití.
Kdy se obvykle používá podtrhnutý text? Ano, odkazy, ale ty jsou podtrhnuté už tak nějak od přírody, takže tady asi tento element moc nevyužijeme. Bude to chtít jiný příklad. Napadá mě vyznačování accesskey. Pokud už na webu někdo používá navigaci pomocí těchto klávesových zkratek, obvykle se sluší nějak vyznačit, které ty písmenka vlastně jako accesskey slouží. Většinou se to tedy dělá nějak takto:
<a href="index.html" accesskey="h"><span style="text-decoration:underline">H</span>omepage</a>Pochopitelně odkazy v menu musí mít jinak podtržení zrušené. Z jakého důvodu se ale nemůže používat tento zápis?
<a href="index.html" accesskey="h"><u>H</u>omepage</a>Přijde mi to jednodušší, praktičtější, pohodlnější, je to
koneckonců validní (element <u> je pouze zavrhnutý, ale
stále je součástí specifikace) a sémantika nijak neutrpí, dokonce je
zápis pomocí <u> sémantičtější, protože zápis se
spanem nám neříká vůbec nic, i když by měl,
jelikož nejde ani tak o vzhled, ale o určení
významu toho písmenka. Samozřejmě element <u>
není za stávajících podmínek stoprocentně sémantický, ale přesto se
jedná o sémantičtější zápis než pomocí bezvýznamného spanu.
Jen škoda, že se třeba s vypnutými styly se nezobrazí písmenko se silnějším podtržením, aby to písmenko bylo poznat i s vypnutými styly. Hned by byl pádnější důvod k používání tohoto způsobu ;-).
Komentáře [6]
Divy? Ale kdeže, buďte moderní
26 prosinec 2005, 23:36
rubrika XHTML-semantika
Zkuste se alespoň jednou obejít bez třech hromad divů a bez sedmi tuctů spanů. Jde to.
Tento článek byl napsán jako částečná reakce na Filův článek Divy a spany.
Dnes a denně vídám weby, na kterých jsou v elementu
<body> výhradně značky <div>,
<span>, <img> a <a>,
občas se objeví nějaký ten nadpis a případně značka
<strong> (aneb autor zaslechl něco o SEO).
Nechápu ten smysl, co vede někoho použít místo krásné a jednoduché
značky <h1> nějakou oplzlost jako <div
id="nadpis">? Jestli je to teď moderní, tak jsem asi něco
zaspal.
Většina jednoduchých webů by se dala řešit zcela bez divů, stačí si jen pohrát se stylováním. Když jsem to dokázal já – jakožto kaskádová lama – tak to musí zvládnout prakticky každý zkušenější webdesigner. Problém nastává až u komplikovanějších designů, kde jsou například na pozadí kopy obrázků, různě poskládaných, aby dohromady tvořily nějaký obrazec nebo třeba kulaté rohy a speciální obrázkový border bloku. Tady už sémantice nepomůže ani pánbůh.
Vsadil bych se, že většina z vás začíná nějakým takovýmto zápisem:
<body>
<div id="cela-stranka">
<div id="hlavicka">
Nějaká ta hlavička, nadpis, logo apod.
</div>
<div id="menu">
Prostě menu, doufám, že bude alespoň v <ul>
</div>
<div id="obsah">
Tady bude obsah stránky
</div>
<div id="paticka">
A o web se stará...
</div>
</div>
</body>Céesesko si snad už každý domyslí. A teď by mě zajímalo, kdo z vás to zkusil bez těch divů? Zkuste si prostě nejdříve napsat HTML strukturu, kde budou pouze sémantické značky (tj. bez divů a bez spanů) a až poté zkuste web nastylovat. A až ve chvíli, kdy to prostě už dál nepůjde, použijte div nebo span. Při tomto postupu byste teoreticky měli dosáhnout maximálně sémantické stránky v rámci daných možností. Přesně takto jsem vytvářel stránky o sémantice.
Největším problémem při budování sémantického webu je fakt, že podmínky nejsou zrovna ideální, páč HTML prostě nezná některé značky, které by znát mělo a těch pár sémantických značek a atributů, které už má, nám w3c vesele zavrhuje, což je věčná škoda. Přesně proto některé věci bez divu (či spanu) prostě udělat nejde. Jako příklad mě zrovna napadá náhrada textu obrázkem, kde se bez toho jednoho spanu jen těžko obejdeme.
Právě proto tvrdím, že sémantický web by měl obsahovat minimální počet divů či spanů, ale je třeba si uvědomit, že pojem minimální se nerovná nule (respektive může se rovnat, ale také nemusí). Druhá otázka pak je, zda-li toužíte po sémantickém webu ;-). Moderní web by ale sémantický být měl. Přece jenom webové stránky si neprošly sémantickými zrůdnostmi jako je tabulkový layout jenom proto, aby nakonec skončily v hromadě bezvýznamných divů…
Komentáře [22]
Starší článkyHledej na weblogu:
Ereses