Úprava textu - People(dot)tuke(dot)sk

Úprava textu
Všechny tagy na formátování textu jsou in-line tagy, to znamená řádkové. Nezalamují
za sebou řádek (narozdíl od blokových tagů).
Fyzické formátování
Fyzické formátování říká, jak má který text přesně vypadat (tedy jak má být
formátován). Nezabývá se logickou rolí formátovaného textu (snad kromě sup a sub).
Tagy fyzického formátování textu
Tag
Význam
Párový Používat?
b
tučné písmo
ano
ano
i
kurzíva
ano
ano
u
podtržení textu
ano
ne
sub
dolní index
ano
ano
sup
horní index
ano
ano
small
zmenšení textu
ano
big
zvětšení písma
ano
s
přeškrtnutý text
ano
strike
přeškrtnutý text
ano
font
písmo
ano
ne
basefont základní font
ne
ne
blink
blikání písma
ano
ne
nobr
nezalamovat obsah ano
ne
Logické formátování
Vymezuje význam elementu. Přitom vůbec neříká, jak má vymezený text vypadat.
Původně mělo mít logické vymezení mnohem větší význam, než jaký mu přisoudil
dnešní web, kde se používá zejména formátování fyzického. Dnes se logických značek
používá velmi zřídka, navíc často s fyzickým významem.
Tagy logického formátování textu
Tag
Význam
Párový Obvyklý vzhled
span
úsek textu
ano
normální
strong
zvýraznění (tučně)
ano
tučné
em
zvýraznění (kurzíva)
ano
kurzíva
cite
citace
ano
kurzíva
code
výpis kódu
ano
strojopis
dfn
nově použitý termín
ano
kurzíva
kbd
vstup z klávesnice
ano
strojopis
samp
ukázka
ano
strojopis
tt
teletype
ano
strojopis
var
formátování proměnné ano
kurzíva
abbr
ustálený výraz
ano
normální
acronym zkratka
ano
normální
del
smazaný obsah
ano
přeškrtnuto
ins
přidaný text
ano
podtrženo
q
citace
ano
normální
Fyzické formátování
b
Tučný text (z angl. "bold"). Používá se velmi často ke zvýraznění. Bývá zaměňován se
<strong>, což je logické zvýraznění realizované tučným písmem.
i
Kurzíva (z angl. "italic"). Bývá zaměňován za <em>, což je logické zvýraznění
realizované kurzívou.
u
Podtržení (a angl. "underline"). Doporučuji nepoužívat. Z následujících důvodů:
•
•
Podtržený text se plete s odkazy
Typograficky není podtržení nic hezkého
Odkazy se v normálním případě podtrhávají samy, není nutno to nastavovat.
sub
Dolní index (z angl. "subscript"). Pro další snížení a zmenšení je možno použít
vícekrát za sebou.
Stejného efektu jako tagem <sub> se dá dosáhnout pomocí CSS stylu vertical-align:
sub. Ale <sub> je dobrý tag na vyznačení sémantiky (smyslu) textu. Vždy, když děláte
dolní index, např. H2SO4, používejte tag <sub>. Pokud chcete udělat jenom grafický
efekt (a zvýrazňovaný prvek není dolním indexem), použijte styl vertical-align: sub.
sup
Horní index (angl. "superscript").
Platí pro něj totéž, co pro <sub>, akorát že ekvivalentní styl je vertical-align: super,
nikoli vertical-align: sup.
small
Zmenšení písma o jeden stupeň.
Možno použít vícekrát za sebou: <small><small>maličký text</small></small>
big
Zvětšení písma o jeden stupeň.
Možno použít vícekrát za sebou.
s
Přeškrtnuté písmo (z angl. striked). Vizte též <strike> a <del>.
strike
Přeškrtnuté písmo. Osobně doporučuji používat spíše <strike> než <s>, třebaže v
HTML 4.0 doporučuje opak, totiž používat <s>. Úplně nejlepší je ale texty vůbec
neškrtat nebo použít tag <del>.
Přeškrtnutí textu se dá udělat i pouze graficky pomocí CSS stylu text-decoration:
striked-through.
font
Nastavení barvy, velikosti a fontu písma.
Atributy tagu <font>
Atribut tagu
<font>
color
Význam
barva písma
Hodnoty
barva
Nahradit
stylem
color
size
velikost, stupeň
písma
1 až 7 | +1 | -1 (+-1 až 6))
font-size
face
font, druh písma
jména fontů oddělená
čárkami
font-family
Příklad: <font color="red" face="Arial, Helvetica">červené písmo Arialem</font>
U face lze sice zadávat více fontů (pokud není prohlížečem rozpoznán první název,
jde k dalšímu), ale v praxi je nutno zůstat u Arialu (varianty Helvetica, Verdana, sansserif), Timesu (serif) a Courieru (monotype), protože jen u nich je jistota, že budou na
klientském počítači zobrazeny správně a s češtinou.
Je doporučováno tag <font> nepoužívat (je zastaralý). Lze jej nahradit tagem <span> s
atributem style s definicí CSS stylu nebo s předem definovanou třídou.
Příklad: <span style="color: red; font-family: Arial, Helvetica">červené písmo
Arialem</span>
size
Velikost písma se v HTML nenastavuje v bodech jako všechny ostatní rozměry, ale ve
stupních. Stupně jsou jakési imaginární jednotky vymyšlené pouze pro účel HTML.
Stupňů písma je sedm. Od vysloveně mrňavého stupně jedna, které se skoro nedá číst,
až po kravskou velikost 7. Běžné písmo je stupeň číslo 3.
Přesné velikosti písem nejsou nijak konkrétně stanoveny. Uživatel si může písmo
zvětšovat a zmenšovat v prohlížeči. Dělá se to příkazem Zobrazit - Velikost písma
(nebo tak něco -- v každém prohlížeči to může být jinak). Přesné velikosti písma lze
dosáhnout pouze pomocí CSS.
Kromě přímého nastavení stupně písma se může použít relativní zápis +-, např.
size="+1" znamená zvětšení písma o jeden stupeň.
V praxi doporučuji <font size="..."> vůbec nepoužívat a velikost písma definovat
pomocí CSS stylu font-size.
Na tag <font> si dejte pozor. Nechová se zcela neutrálně (jako se chová <span>),
takže když použijete <font> i třeba bez parametrů, je možné, že písmo přece ovlivní
(zejména se to stává v Exploreru), většinou nějak záhadně.
basefont
Základní, přednastavený font pro celou stránku. Musí se deklarovat bezprostředně za
tagem <body>. Nepárový tag. Má stejné atributy jako <font>, ale u velikosti nelze
použít relativní stupeň.
Používání tohoto tagu se silně nedoporučuje, protože se jeho vlastnosti nevztahují na
tabulky a občas ani na nadpisy. Podpora v moderních prohlížečích je vágní a nejistá.
Prostě je zastaralý.
Příklad: <body><basefont face="arial" color="navy">Tmavomodrý Arial bude na
celé stránce. Snad.
Tag basefont se dá velmi snadno nahradit tím, že se příslušné vlastnosti písma nastaví
pomocí CSS stylů pro tag <body>. Například:
<style>
body {font-family: arial; color: navy;}
</style>
blink
Blikající písmo (z angl. blink = mrkat). Podporováno pouze Netscapem, Operou a
Mozillou. Nahraditelné stylem text-decoration: blink (se stejnou podporou).
nobr
Zakázané zalomení řádku. Text se prostě nezalomí, i kdyby došel do konce stránky.
Používá se zejména v odkazových proužcích a sloupečcích, aby nebyly odkazy
rozhozené přes dva řádky.
V moderním webdesignu se používání tagu <nobr> nedoporučuje a nahrazuje se CSS
stylem white-space: nowrap. Upřímně je však nutno přiznat, že ten styl ne vždy
funguje spolehlivě, takže tag <nobr> rozhodně nepatří do starého železa.
Někde jsem se dozvěděl o existenci nestandardního tagu <wbr>, který umožňuje
zalomení uvnitř <nobr> a volitelné zalomení velmi dlouhých slov. Nevím, jak je
podporován, každopádně funguje v IE i v Mozille.
Logické vyznačování
span
Logické vymezení části textu, která bude jinak formátována nebo na ni bude vázán
skript. Je příbuzný s tagem <div> s tím rozdílem, že <span> je in-line, tzn. nezalamuje
před a po sobě řádku.
U tagu span lze použít pouze obecné atributy. Ale mají zde velký význam, zejména
atributy style, class a id.
Více informací o tagu span.
strong
Silné zvýraznění (z angl. strong = silný, mocný). Prohlížeče pro něj používají tučné
písmo, proto bývá zaměňován s tagem <b>. Je ale dobré uvědomit si rozdíl:
•
•
tagem <b> říkám, že je něco tučným písmem
tagem <strong> říkám, že je něco důležité, zvýrazněné
Někomu to připadá jako totéž, já tam ale rozdíl vidím.
em
Zvýraznění (emphasis). Prohlížeče vykreslují kurzívou. Nejsprávnější tag pro
zvýrazňování (a pro tento účel jen zřídka používaný).
Totéž co u <strong>: <i> je kurzíva, <em> je zvýraznění, které se náhodou vykresluje
kurzívou.
Další tagy logického formátování nejsou prakticky vůbec používané. Půlka
protože je zastaralá, druhá půlka (od abbr níže) je zase relativně nová.
cite
Citace, která na rozdíl od blokové citace <blockquote> nezalamuje řádek (je in-line).
Takřka neužívaný tag zobrazovaný kurzívou. Některé vyhledávače prý neindexují
vnitřek tohoto tagu, protože se domnívají, že jde o externí citaci.
code
Výpis kódu, například programu. Prohlížeče používají neproporcionální písmo
(strojopis). Velmi zřídka používaný tag, já jej používám na výpis kódových příkazů.
dfn
Definice nového výrazu. Prohlížeče to zobrazují kurzívou nebo tučnou kurzívou.
Prakticky nepoužívaný tag.
kbd
Vstup z klávesnice zobrazený strojopisem. Nepoužívaný tag.
samp
"Vzorek", což znamená výstup programu. Zobrazováno strojopisem. Občas to
používám, když chci naznačit, že se jedná o nějaký výstup nebo prostě něco odlišného
od normálního textu.
tt
Teletypový terminál. Že nevíte, co to je? Já také ne. (Nabízí se výraz "dálnopis", což
ale problematiku spíše zatemňuje. Asi je to text konzoly vzdáleného připojení
terminálu.) Zobrazováno strojopisem.
var
Proměnná. Zobrazováno kurzívou. Použití snad jen mezi programátory pro
formátování zdrojáků.
Následující tagy přišly až v HTML 4.
abbr
Něco jako vysvětlení zkratky. Zajímavým atributem je obecný atribut title, který by
jako hodnotu měl obsahovat význam té zkratky. Často se používá v blozích. Internet
Explorer <abbr> nepodporuje (nerozezná tag). Nové v HTML 4.0.
Příklad: <abbr title="Cascading Style Sheets">CSS</abbr>
acronym
Totéž, co <abbr>, rozdíl je v tom, že písmena se nehláskují, ale čtou dohromady (např.
NATO). Internet Explorer tag acronym zná (narozdíl od abbr).
del
Odstraněný text. Prohlížeče jej zobrazují jako přeškrtnutý, staré prohlížeče jej zobrazí
normálně. Novinka v HTML 4.0. Osobně raději odstraněný text mažu, ale jsou
případy, kdy se vyplatí tag del používat -- zejména ve zpravodajství při vyznačení
opravy chyby.
Tagy del a ins nejsou ani blokové, ani in-line. Mohou obsahovat další blokové tagy,
aniž by zalamovaly řádek.
ins
Přidaný text. Zobrazováno podtržením. Atribut datetime vyjadřuje čas, kdy došlo k
přidání. Datetime má formát rrrr-mm-ddThh:mm:ssTZD. Používá se zřídka, nejčastěji
ve zpravodajství a na blozích -- ani v těch případech se stejně většinou neuvádí čas.
Podtržení lze samozřejmě zrušit CSS zápisem text-decoration: none.
q
Citace (angl. quote = citovat) podle definice HTML 4.0, svou funkcí velmi podobná
tagu <cite> a <blockquote>.. Liší se atributem cite, která obsahuje zdroj citace.
Mozilla (Firefox) a Opera kolem obsahu tagu <q> dělají automaticky uvozovky.
Internet Explorer (žádná verze) uvozovky nepřidává.
Příklad: <q cite="http://dusan.pc-slany.cz">Bydlím ve Slaném, mám se dobře</q>