kkl2401

WWW FAQ

aneb nejčastější dotazy ohledně tvorby webu

Tuto stránku jsem napsal proto, že některé dotazy se v auditoriích o www opakují opravdu pozoruhodně často, chtěl jsem je tedy shrnout a sepsat k nim i odpovědi, aby bylo napříště možno na podobný dotaz zareagovat pouhým zmíněním adresy této stránky. Na co že se lidé tedy nejčastěji ptají?
Jak po kliknutí na odkaz změním obsah dvou rámů najednou?
Proč i když v klubu napíšu <pre>, tak se mi uvnitř interpretuje HTML kód a není jenom čistě zobrazen?
Jak vycentruji blokový element čistě prostředky CSS? text-align:center nezabírá.
Jak do dokumentu zapíšu znaky < nebo >, když jsou vyhrazeny pro značkování?
Jak zapíšu uvozovky v hodnotě atributu?
A co takhle typografické uvozovky?
Validátor mi na mých stránkách hlásí chybu „unknown entity“, co to znamená?
MSIE 6 automatické marginy umí, tak co to plácáš v odpovědi na otázku tři?

Jak po kliknutí na odkaz změním obsah dvou rámů najednou?

Především je potřeba říct, že čistě prostředky jazyka HTML toto nelze, je nutné použít scriptování, tedy nejspíše JavaScript.
Každý rám může mít své jméno určené atributem name a právě přes toto jméno k němu lze v JavaScriptu přistupovat. Každé okno (tedy objekt window) totiž obsahuje kolekci frames svých rámů, ke kterým pak přes ni lze přistupovat libovolným ze tří obvyklých postupů - buď tedy frames chápeme jako pole číslované od nuly, jako asociativní pole indexované jmény rámů nebo jako objekt s vlastnostmi pojmenovaných po rámech, které obsahuje. Budu-li tedy uvažovat následující fragment kódu:
<frameset cols="50%, 50%">
<frame name="frame1" src="example1_frame1.html"/>
<frameset rows="50%, 50%">
<frame name="frame2" src="example1_frame2.html"/>
<frame name="frame3" src="example1_frame3.html"/>
</frameset>
</frameset>
pak k prvnímu rámu mohu přistoupit přes top.frames[0], top.frames["frame1"] nebo přes top.frames.frame1, úplně stejně se pochopitelně dostanu i ke druhému a třetímu. Nyní již zbývá dodat, že objekt frame má drtivou vlastností shodnou s objektem window, a mělo by být vše jasné. Pro úplnost takto bude například vypadat funkce, která u zmíněného příkladu nahradí dokument v rámu dva dokumentem z rámu tři a vice versa.
function swap() {
    var s = top.frames["frame2"].location;
    top.frames["frame2"].location = top.frames["frame3"].location;
    top.frames["frame3"].location = s;
}
Funkci je nyní možno použít například jako obsah atributu href nějakého odkazu v rámu jedna. Konkrétní ukázka používající vše zmíněné je tady.

Proč i když v klubu napíšu <pre>, tak se mi uvnitř interpretuje HTML kód a není jenom čistě zobrazen?

Protože je to tak správně !!! Vůbec mi není jasné, jak k této myšlence lidé dospěli, ale je fakt, že je poměrně dost rozšířená. Element pre slouží k jediné důležité věci - v rámci jeho obsahu jsou tzv. „bílé znaky“ (mezera, tabulátor, znak pro konec řádku a další) zobrazovány tak, jak jsou napsány ve zdrojovém kódu (narozdíl od defaultního chování SGML a XML); tato problematika je jinak poměrně složitá, takže více se jí zde věnovat nebudu. Nicméně jak tedy vložit nějaký kód tak, aby byl pouze zobrazen? Upřímně řečeno - špatně. Existuje na to jediná konstrukce, která má však hned dvě nevýhody.
<![CDATA[
 <an> example of <sgml> markup that is
 not <painful> to write with < and such.
]]>
Ano, takhle by to bylo naprosto v pořádku, kdyby... Kdyby to fungovalo. Předně by to nejprve muselo projít vnitřním parserem daného diskuzního serveru (a pochybuji, že jejich autoři mysleli na takovéhle blbosti), a i kdyby se to náhodou povedlo, tak by to ještě musel podporovat prohlížeč, přičemž mám dojem, že zatím to nezvládá žádný. Jinými slovy máme teoretické řešení, ale praxe pokulhává. Jde tedy situaci nějak vyřešit? Naštěstí jde, ale nijak elegantně: je potřeba znaky <, > a & zaměnit po řadě za &lt;, &gt; a &amp;. Pro usnadnění takovéto činnosti jsem napsal program s názvem Lil’ Code Convertor.

Jak vycentruji blokový element čistě prostředky CSS? text-align:center nezabírá.

Odpověď je třeba hledat v jiném místě CSS specifikace - v oblasti okrajů, konkrétně jde o vlastnost margin. Stačí nastavit margin-left a margin-right na auto a je to. Malá ukázka je zde. Že vám tento příklad nefunguje a tabulka zůstává vlevo? A proč že vlastně toho Explorera používáte?

Jak do dokumentu zapíšu znaky < nebo >, když jsou vyhrazeny pro značkování?

Tato otázka je vlastně zodpovězena již druhou částí odpovědi na otázku dvě. Je třeba použít tzv. znakové entity. Jejich tvar je takový, že začínají znakem &, po něm následuje dohodnutá zkratka toho znaku a poté středník, který entitu ukončuje. Takže například znak < se zapíše jako &lt; a znak > jako &gt;. Možná se vám automaticky dere na rty otázka, jak se zapíše samotný znak &, když je takto využíván pro vyznačení začátku entit. Odpověď zní &amp;. Potřebujete-li takto převést malé množství textu, je možné provést to ručně (nebo pomocí funkce search&replace vašeho editoru), pro větší úseky si dovoluji nabídnout program Lil’ Code Convertor.

Jak zapíšu uvozovky v hodnotě atributu?

Řešení jsou dvě. Prvním z nich je uzavření hotnoty atributu do apostrofů místo uvozovek, tedy například takto: <a href='javascript:alert("");'>. Pak ovšem chce-li člověk mít v hodnotě atributu apostrof, musí tuto hodnotu uzavřít naopak do uvozovek. Toto řešení ovšem selhává ve chvíli, kdy buď z nějakého důvodu potřebujete mít v hodnotě atributu zároveň uvozovky i apostrofy, nebo ve chvíli, kdy (jako třeba já) určité řetězce vždy uzavíráte do uvozovek a jiné vždy do apostrofů a nechcete tyto dvě situace míchat. Pak se hodí druhá možnost - již několikrát zmíněné znakové entity. Obyčejná ASCII uvozovka se zapíše jako &quot;, s apostrofem je to trochu horší, pro ten není žádný název znakové entity dohodnutý, je tedy třeba odkázat se přímo na jeho pořadí v tabulce znaků zvolené znakové sady. Pochybuji, že kdy budete psát dokument v znakové sadě, ve které by se apostrof nenacházel na pozici 39 (pokud taková sada vůbec existuje), a proto pro něj můžete směle použít číselnou referenci &#39;. Abych to shrnul: zmiňovaný příklad je možné zapsat rovněž takto: <a href="javascript:alert(&quot;&quot;);">.

A co takhle typografické uvozovky?

Není problém a opět jsou řešení dvě. Prvním z nich je použít takovou znakovou sadu, která takovéto znaky už obsahuje - tedy nejspíše některou z unicodových sad (utf-8, utf-16), pak stačí do dokumentu patřičný znak zapsat. Ale i při použití jiné znakové sady nejsme o typografii ochuzeni, v předchozích otázkách dokola omílané znakové entity jsou připraveny i na toto. Aby to však nebylo tak jednoduché, každý jazyk používá uvozovky trochu jiné. Tak kupříkladu v češtině se jako počáteční uvozovka používá &bdquo; („) a jako koncová &ldquo; (“). Pro uvozovky uvnitř uvozovek používáme &sbquo; (‚) a &lsquo; (‘). Pro angličtinu je situace trochu odlišná - používané dvojité uvozovky jsou &ldquo; (“) a &rdquo; (”) a jednoduché &lsquo; (‘) a &rsquo; (’). Jinými jazyky bohužel nevládnu, takže nemohu dát návod, jak je tomu u nich.

Validátor mi na mých stránkách hlásí chybu „unknown entity“, co to znamená?

Pravděpodobně jste někde napsali samotný znak &. Tento znak uvozuje odkaz na znakové entity (případně číselný odkaz přímo do tabulky daného kódování), a proto validátor za ním očekává název entity a poté středník. Chcete-li napsat pouze tento znak, je nutné použít konstrukci &amp;. Tedy například hovoříte-li o hudebním stylu rhythm and blues, jeho zkratku je třeba zapsat takto: r&amp;b. Důležité je uvědomit si, že toto vše platí například i pro URI objevující se v kódu stránky (atributy href, src, atd.); bohužel si této skutečnost nejsou vědomi poskytovatelé freewebů požadující reklamní kód nebo provozovatelé nejrůznějších počítadel, jejichž kód, který vám vygenerují, abyste si ho vložili do svých stránek, bývá obvykle chybný. Konkrétně jde o to, že v URI slouží znak & k oddělování jednotlivých parametrů scriptu, který je na serveru volán, což v praxi znamená především to, že se tam hojně objevuje. Pro názornost si představme kód, který nám vygenerovala fiktivní společnost provozující SuperMegaPočítadlo.
<img src="http://www.supermegapocitadlo.cz/showcounter.cgi?id=15392&fg=white&bg=black"/>
Validátor na takovýto kód zareaguje pravděpodobně hlášením „unknown entity fg“. Pokud kód upravíme následujícím způsobem, bude vše v pořádku.
<img src="http://www.supermegapocitadlo.cz/showcounter.cgi?id=15392&amp;fg=white&amp;bg=black"/>

MSIE 6 automatické marginy umí, tak co to plácáš v odpovědi na otázku tři?

Umí a neumí, s MSIE to prostě není jednoduché. Aby automatické marginy korektně zpracoval, je jej nutné přepnout do striktního módu (jinak zůstane v módu kompatibility se svými nižšími verzemi, což znamená kromě chybného chápání zmiňovaných marginů rovněž také třeba špatné výpočty výšek a šířek boxů), což se provádí metodou známou jako tzv. „doctype switching“. Ta spočívá v uvedení správného DOCTYPE před kořenovým elementem dokumentu, a to buď HTML 4 Strict nebo XHTML jakékoliv. Přesněji řečeno… tak by to mělo fungovat. Bohužel v MSIE to zabere, pouze je-li DOCTYPE uveden přesně na prvním řádku dokumentu. Což v praxi znamená, že (chceme-li opravdu korektní dokument) nám mnoho možností pro přepnutí Exploreru do módu, který bychom si přáli, nezbývá, protože u XHTML obvykle budeme potřebovat na prvním řádku XML hlavičku. Tu lze totiž vynechat, pouze když používáme XML verze 1.0 (což není tak hrozné, vzhledem k tomu, že zatím ani jiná není) a zároveň je dokument napsán v kódování utf-8. Pokud toto kódování z jakéhokoliv důvodu nepoužíváme, je jedinou cestou napsat dokument jako HTML 4 Strict.