L e k c e č.1 - Vložení textu do stránky

První a nejdůležitější věcí, která se na WWW stránkách objevila, byl text. K zobrazení není třeba žádné zvláštní značky, ža text se považuje cokoliv, co není součástí žádné značky (parametry, hodnoty) uvnitř sekce BODY.


1. Neformátovaný text

Uvidíte, že neformátovaný text se zobrazuje bez vícenásobných mezer či odřádkování. I když text zapíšeme takto:

<body>
Toto je text, jež se zobrazí v okně prohlížeče bez jakéhokoliv 
formátování.
Všimněte si, že klávesa ENTER   ,         ani vícenásobná 
mezera nemá na zobrazení vliv.
</body>

... tak se nám zobrazí takto:

Toto je text, jež se zobrazí v okně prohlížeče bez jakéhokoliv formátování. Všimněte si, že klávesa ENTER, ani vícenásobná mezera nemá na zobrazení vliv.

Toto je text, jež se zobrazí v okně prohlížeče bez jakéhokoliv formátování. Všimněte si, že klávesa ENTER, ani vícenásobná mezera nemá na zobrazení vliv. Právě tyto "neduhy" zdrojového kódu se dají ošetřit pomocí následujících značek:

<BR> ..... ukončí řádek a začne na řádku novém (HTML obdoba klávesy ENTER)
&nbsp; ... tato značka zastupuje tzv. tvrdou mezeru. Pro větší počet "stisknutí mezerníkem" vložíme více značek

A jak to bude fungovat s použitím zmíněných značek? To vám ukáže malá ukázka závěrem:

Toto je text, jež se zobrazí v okně prohlížeče bez jakéhokoliv
formátování.
Díky použitým značkám již odřádkujeme, kdy chceme   ,       a vícenásobné
mezery pro nás nejsou žádným problémem.


2. Zvýraznění písma

To, co jsme si v předešlé části ukázali, není zdaleka vše, co můžeme s písmem dělat. Zatím dokážete vložit jednolitý text bez jakéhokoliv formátování. Nyní si ukážeme, jak zvýrazňovat určité části textu.

Potřebné tagy:

  • <B></B> ... vypíše písmo tučně
  • <I></I> ... kurzíva (skloněné písmo)
  • <U></U> ... dané písmo podtrhne

Nejlépe uděláme, když si vše ukážeme na příkladu:

<P>Text bez formátování</P>
<P><I>Text s definovanou kurzívou.</I><BR>
<B>Text vypsaný tučně.</B><BR>
<U>Podtržení textu zde.</U></P>
<P><I><U><B>Všechno pěkně dohromady, ale ať v tom nemáte guláš!</B></U></I></P>

Text bez formátování

Text s definovanou kurzívou.
Text vypsaný tučně.
Podtržení textu zde.

Všechno pěkně dohromady, ale ať v tom nemáte guláš!

Vidíte, že to není nic těžkého. Jen se nesmí prohodit pořadí ukončovacích tagů. ty se řadí v opačném pořadí - první je poslední. HTML se ale neomezuje jen na tučné písmo, podtržení a kurzívu. Další možnosti se pokusíme demonstrovat.

Další tagy:

  • <STRIKE></STRIKE> ... přeškrtnutí
  • <BIG></BIG> ... zvětšení písma o jeden bod vzhledem k aktuálnímu
  • <SMALL></SMALL> ... zmenšení písma o jeden bod vzhledem k aktuálnímu
  • <SUB></SUB> ... dolní index
  • <SUP></SUP> ... horní index

A co na to prohlížeč?

Česká republika je ostrovní stát

Nějaký text, text o bod větší a taky o něco menší.

x ( xp + 1 ) + x2 = 0

NH4SCN - vzorec rhodanidu amonného


3. Zarovnání

Jak vytvořit nadpis, jak odsunout text doprava? Chcete zarovnat nějaký text na jednu ze stran stránky a nebo vystředit? V tom případě by jste neměli přeskočit tento odstavec, jež se zabývá právě zarovnáním. Pro zarovnání neexistuje vlastní tag. Vše se dšje pomocí párového tagu <DIV>, jež ohraničuje text a definuje ho jako samostatný odstavec. Následně se přiřadí tomuto tagu parametr align sloužící k definici zarovnání. Nabývá hodnot left, right, center - tedy po česku vlevo, vpravo, nastřed.

<DIV align="left|right|center">

A nyní jednoduchá ukázka

Text zarovnaný doleva (left).

Text zarovnaný doprava (right).

Text vystředěný (center).


4. Fonty - ovládněte písmo

I když jsme vybaveni poměrně bohatými prostředky pro práci s písmy, stále spíše ovládá nás než mi jej. V textu se však nemusíme omezovat pouze na změnu řezu písma. mi můžeme zaměnit celý font za jiný, tedy definovat velikost, barvu a hlavně sadu písma. Celé se to děje pomocí párového tagu <FONT></FONT>.

Parametry tagu <FONT>:

  • size="velikost" - velikost zvoleného písma v rozmezí od 1 do 7. Standardně se používá velikost 3.

Písmo o velikosti 1
Písmo o velikosti 2
Písmo o velikosti 3
Písmo o velikosti 4
Písmo o velikosti 5
Písmo o velikosti 6
Písmo o velikosti 7

  • face="písmo" - volí písmo. Pokud není na daném počítači nainstalováno, zvolí se standardní podle nastavení počítače.
  • color="barva" - volí barvu písma. Vše o barvách -> zde.

Nyní ukázka pro porozumění:

Times New Roman, velikost 2, černá
Times New Roman, velikost 3, černá
Arial, velikost 3, černá
Arial, velikost 3, zelená
Arial, velikost 3, černá
Times New Roman, velikost 3, černá
Times New Roman, velikost 2, černá


5. Barvy

Svět bez barev je ponurý a nezáživný. I na svých stránkách budete chtít používat rozdílné barvy a tím vytvořit 'Barevný svět HTML'. HTML defunuje pro základní barvy přímé názvy odpovídající anglickému ekvivalentu. Všechny barvy se však defunují pomocí šesti hexadecimálních čísel (zápis v šestnáctkové soustavě).

Základní barvy

Aqua

tyrkysová

#00FFFF

      

Black

černá

#000000

  

Blue

modrá

#0000FF

  

Fuchsia

růžová

#FF00FF

  

Gray

šedá

#808080

  

Green

zelená

#008000

  

Lime

světle zelená

#00FF00

  

Maroon

tmavě červená

#800000

  

Navy

tmavě modrá

#000080

  

Olive

olivová

#808000

  

Purple

tmavě fialová

#800080

  

Red

červená

#FF0000

  

Silver

stříbrná

#C0C0C0

  

Teal

tmavá modro-zelená

#008080

  

White

bílá

#FFFFFF

  

Yellow

žlutá

#FFFF00

  

Výchozí nastavení barev

Pro každý dokument v HTML si můžeme nastavit základní barvy, jež nám nemůže nic změnit. Vše se nastavuje již v tagu <BODY>, který uvozuje vlastní tělo kódu zobrazovaného prohlížečem.


Parametry tagu při práci s barvami:

  • BGCOLOR - barva tvořící pozadí stránky
  • TEXT - implicitní barva textu
  • LINK - barva nenavštíveného odkazu
  • ALINK - barva odkazu, na který jste právě klikli
  • VLINK - barva navštíveného odkazu

<BODY bgcolor="black" text="white" link="yellow" alink="red" vlink="aqua">

Zkuste to někdy s touto kombinací.


6. Poznámky

Nemůžete se ve zdrojovém kódu vyznat? Udělejte si poznámky. Bohužel nemůžete samovolně vpisovat text, protože by se zobrazil v prohlížeči. I na to ale W3C pamatovalo a zavedlo tag pro psaní poznámek.

<!- text poznámky jak chcete dlouhý -->