Barvy, text, obrázky.....

1. Barvy
2. Text
3. Obrázky
4. Úkol

Pro určení barvy se používá pět druhů syntaxe. Uvedu jen ty nejpoužívanějsí.

V další tabulce na obrázku vpravo uvedu barvy, které se dají zapsat jménem a budete je používat nejspíš nejčastěji.

Barvit se dá ledacos text, pozadí atd. Základní barvy dokumentu určíte jako parametry tagu body.

Určit se dá barva:

• odkazu - link
• aktivního odkazu - alink
• navštíveného odkazu - vlink
• textu - text
• pozadí - bgcolor (lze použít i obrázek background)

Text začíná a končí tagem <font> a má tři základní parametry:

• typ písma
• barva písma
• velikost písma

Typ písma

Typ písma se označuje face a určuje se názvem písma (Arial, Times New Roman, Verdana, Courier...). Používejte radši písma, která jsou všeobecně známá! Ne svoje vlastní, protože prohlížeč používá písma, která má OS k dispozici a to nebude písmo, které jste si od někud stáhli. Já tady používám Verdanu. Bezpečně lze použít i Arial, Courier, Times New Roman nebo Comic Sans MS.

Barva písma

Barvu jsem už ukázal o pár řádků výš a proto ji zde vynechám.

Velikost písma

Velikost se značí se dá určit: číslem (1 - 7), pixely (1px - 7px).

Ukázka:

<font size="1">Velikost 1</font>
<font size="2">Velikost 2</font>
<font size="3">Velikost 3</font>
<font size="4">Velikost 4</font>
<font size="5">Velikost 5</font>
<font size="6">Velikost 6</font>
<font size="7">Velikost 7</font>

Výsledek:

Je tedy na vás, který způsob si vyberete. Existuju ale i jiná možnost, jak změnit velikost písma - můžete použít nadpis. Je to párový tag <hx>, kde x je úroveň velikosti. Čím menší zadáte číslo tím bude nadpis větší! Nejmenší nadpis je h6 a největší je h1.

Ukázka:

<h6>Nadpis 6. úrovně</h6>
<h5>Nadpis 5. úrovně</h1>
<h4>Nadpis 4. úrovně</h1>
<h3>Nadpis 3. úrovně</h3>
<h2>Nadpis 2. úrovně</h1>
<h1>Nadpis 1. úrovně</h1>

Výsledek:

Nadpis 6. úrovně

Nadpis 5. úrovně

Nadpis 4. úrovně

Nadpis 3. úrovně

Nadpis 2. úrovně

Nadpis 1. úrovně

Formátování

Text se dá formátovat do odstavců <p>.

Ukázka:

<p>první odstavec</p>
<p>druhý odstavec</p>

Výsledek:

první odstavec

druhý odstavec

Odstavec má parametr align, který má tyto hodnoty: left (vlevo), right (vpravo), center (na střed), justify (rozložit).

Ukázka:

<p align="left">odstavec zarovnaný vlevo</p>
<p align="right">odstavec zarovnaný vpravo</p>
<p align="center">odstavec zarovnaný na střed</p>
<p align="justify">odstavec rozložený</p>

Výsledek:

odstavec zarovnaný vlevo

odstavec zarovnaný vpravo

odstavec zarovnaný na střed

odstavec rozložený

Pokud se vám nechce dělat odstavce a jen potřebujete odřádkovat text, stačí zadat tag <br>.

Ukázka:

Tady je nějaký dlouhý text <br>
a tady pokračuje.

Výsledek:

Tady je nějaký dlouhý text
a tady pokračuje.

To by myslím k textu stačilo a můžeme se přesunout k další kapitole.

Obrázek se určuje nepárovým tagem <img>. Jeho parametry uvedu pro přehlednost v tabulce.

Adresa k obrázku

Spolehlivější je absolutní adresa ale je méně praktická. Když použijete relativní adresu, musí být obrázek ve stejném adresáři jako je stránka!

Umístění

Obrázek se dá tímto způsobem umístit pouze vzhledem k textu. Vypisuju jen ty nejdůležitější.

<img src="adresa k obrázku" align="způsob zarovnání">
např.
<img src="obrazek.jpg" align="left"> 

Ukázka:

Tady je obrázek o rozměrech 50x50 a je zarovnán vlevo.

Tady je obrázek o rozměrech 50x50 a je zarovnán vpravo.

Tady je obrázek o rozměrech 50x50 a je zarovnán nahoru.

Tady je obrázek o rozměrech 50x50 a je zarovnán dolů.

Tady je obrázek o rozměrech 50x50 a je zarovnán na střed.

Rámeček

Kolem obrázku můžete mít rámeček o šířce, kterou si sami určíte.

Ukázka:

<img src="adresa k obrazku" border="0"> bez rámečku
<img src="adresa k obrazku" border="1"> s rámečkem o šířce 1

Výsledek:

bez rámečku

s rámečkem o šířce 1

Popisek

Tento text se zobrazí po najetí myší, ale i pokud obrázek není k dipozici.

Ukázka:

<img src="adresa k obrazku" alt="Tady je popisek obrázku"> 

Výsledek:

Šířka a výška

Určuje se buď číslem a nebo počtem pixelů. Takto se dá obrázek také zmenšit (pokud zadáte menší rozměry než má obrázek) a dá se samozřejmě také zvětšit.

To by na začátek stačilo. V případě dotazů navštivte poradnu. A nakonec úkol.

• titulkem
• barevným pozadím
• nadpisem
• obrázkem, který bude mít popisek a bude zarovnán doleva
• nějakým textem u obrázku v jednom odstavci

Příště: efekty a zvýraznění písma, odkazy