Image
1.6.2016 0 Comments

Vytvárame WWW stránky / 2. časť

Späť na úvod >> Späť na seriál

Vitajte pri druhom pokračovaní seriálu Vyvárame WWW stránky. Tentoraz si ukážeme ďalšie možnosti formátovania textu, definujeme obrázok v pozadí, farbu pozadia, textu a odkazov a ukážeme si, ako pracovať s nadpismi.   

Pokročilé formátovanie textu
Správne formátovanie textu je základom každej dobrej WWW stránky. Niekedy môže byť takéto formátovanie užitočnejšie ako obrázky, pritom neznižuje rýchlosť načítavania WWW stránky. Netreba to však veľmi preháňať, pretože existujú aj „textoví surferi“ a tým toto formátovanie veľa hovoriť nebude. Pred mesiacom sme si ukázali základné druhy písma a teraz prikročíme k tým pokročilým.

  • <BIG> – veľké  písmo – o jeden bod väčšie ako normálne
    Ukážka: normálne a veľké písmo
  • <CODE> – písmo najviac vhodné na výpisy (napr. zdrojových kódov)
    Ukážka: application.terminate
  • <SMALL> – malé písmo – o jeden bod menšie ako normálne
    Ukážka: normálne a malé písmo
  • <STRIKE> – preškrtnutý text
    Ukážka: tento text neplatí
  • <SUB> – dolný index
    Ukážka: Voda má chemickú značku H 2O
  • <SUP> – horný index
    Ukážka: výsledkom Pytagorovej vety je vzorec c2 = a2 + b 2
  • <TT> – Teletype – písmo pripomínajúce písací stroj
    Ukážka: toto písmo sa príliš nepoužíva
  • <PRE> – formátovaný text
    Ukážka: 
 Tento text je formátovaný 

Všetky tieto tagy sú, samozrejme, párové. Niektoré sa v rôznych browseroch zobrazujú rôzne a tie najpoužívanejšie vyzerajú vždy rovnako.
Texty už písať vieme, preto teraz pristúpime k definovaniu vlastností stránky. Tie sa definujú do tagu <BODY>.  Môže to byť napríklad farba pozadia, textu, odkazov alebo obrázok v pozadí.

Obrázok v pozadí
Obrázok v pozadí môže byť vo formáte JPG alebo GIF. Môže byť určený relatívnou alebo absolútnou cestou. Ukážeme si to na príklade. Predpokladajme, že adresa našej stránky je www.mojawwwstranka.sk a obrazok s názvom pozadie.jpg máme v adresári Images. Ak používame relatívnu cestu, do tagu <BODY> vpíšeme background="pozadie.jpg" a výsledok bude <body background="images/pozadie.jpg">. Ak chcem použiť absolútnu cestu, bude tag takýto: <body background="http://www.mojawwwstranka.sk/images/pozadie.jpg" >. Absolútna cesta sa používa len málo, a preto odporúčam používanie relatívnej cesty.

Farba pozadia
Definícia farby pozadia WWW stránky má dva významy. Použijeme ju, ak nechceme mať v pozadí obrázok, ale je dobré použiť ju aj vtedy, ak obrázok v pozadí máme. Dôvod je, že nie každý musí mať zapnuté zobrazovanie obrázkov. Ak th zapnuté nemá a my farbu pozadia nedefinujeme, zobrazí sa mu biele alebo sivé pozadie, čo nie je veľmi profesionálne. Preto aj v prípade, ak budeme mať v pozadí obrázok, vždy definujme aj farbu pozadia, a to farbou, ktorá najviac pripomína daný obrázok.
Farby môžeme definovať dvojako: anglickým názvom alebo hexadecimálne. Anglickým názvom sa dá definovať nasledujúcich 16 farieb:

Hexadecimálne môžeme definovať až 16 miliónov farieb. Tie sú určené pomerom červenej – zelenej – modrej (RGB) v hexadecimálnom tvare. Ak tieto farby zmiešame v najvyššom pomere – FFFFFF, vznikne biela. Naopak, ak ich zmiešame v najnižšom pomere 000000, vznikne čierna. Napríklad ak chceme mať modré pozadie, môžeme použiť blue a aj 0000FF.

Farba textu
Farbu pozadia definujeme aj do <BODY>, a to značkou TEXT. Definujeme ju rovnako ako farbu pozadia. Napríklad ak chceme, aby bol text čierny, požijeme  text="black" alebo text="000000".  Text sa bude zobrazovať čierny, ale iba ak nie je niekde v dokumente určené inak (napríklad v odseku).

Farba odkazov
Na našej WWW stránke môžeme takisto definovať farby odkazov. Ide o farby pre odkazy, na ktoré ešte používateľ neklikol (parameter link),  farbu odkazu pri kliknutí myšou (parameter alink) a farbu už navštíveného odkazu (parameter vlink). Nastavenie farieb odkazov je veľmi dôležité. Hovorí návštevníkovi o odkazoch, ktoré už navštívil a ktoré ešte nenavštívil.
Ak chceme, aby boli odkazy modré, pri kliknutí sa zmenili na červené a po navštívení boli napríklad žlté, použijeme tento zápis : link="blue" alink="red" vlink="yellow" alebo link="0000FF" alink="FF0000" vlink="FFFF00".

Praktická ukážka
Už vieme, že každá stránka musí mať definovanú farbu pozadia, textu a odkazov. Teraz si to ukážeme prakticky. Naša ukážková stránka bude mať biele pozadie, čierny text, modré odkazy, červené aktívne odkazy a žlté navštívené odkazy:

<HTML>
<HEAD>
<TITLE>Naša prvá WWW stránka</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#00000" link="#0000FF" alink="#FF0000" vlink="#FFFF00">
.
.
obsah dokumentu
.
.
</BODY>
</HTML>

Nadpisy
Nadpisy slúžia najmä na členenie stránky. Pri ich používaní platia určité pravidlá. Názov stránky by mal byť najväčší a názvy častí alebo kapitol menšie, ale navzájom rovnako veľké. Poznáme 6 druhov nadpisov. Sú to <H1>, <H2>, <H3>, <H4>, <H5>, <H6>, pričom <H1> je najväčší a <H6> najmenší. Jednotlivé nadpisy vyzerajú takto:

<H1> Nadpis 1. úrovne </H1>

Nadpis 1. úrovne

<H2> Nadpis 2. úrovne </H2>

Nadpis 2. úrovne

<H3> Nadpis 3. úrovne  </H3>

Nadpis 3. úrovne

<H4> Nadpis 4. úrovne </H4>

Nadpis 4. úrovne

<H5> Nadpis 5. úrovne </H5>

Nadpis 5. úrovne

</H6> Nadpis 6. úrovne </H6>

Nadpis 6. úrovne

V praxi sa však používajú najmä nadpisy <H1>, <H2> a <H3>, pretože nadpisy  <H4> , <H5> a <H6> sú menšie ako normálne písmo. Odporúčam nadpis <H1> použiť na stránke iba raz.

Nabudúce
Do budúceho pokračovania si vyskúšajte kombinovanie farieb na stránke a prácu s nadpismi. V treťom pokračovaní seriálu si ukážeme, ako zarovnávať nadpisy, vytvoríme si zoznamy s odrážkami a vysvetlíme jednu z najdôležitejších vecí – tvorbu hypertextových odkazov. 

 

Zobrazit Galériu
Autor: Igor Kulman

Nechajte si posielať prehľad najdôležitejších správ emailom

Mohlo by Vás zaujímať

Ako na to

Ako zbaviť fotky hmly

08.12.2016 11:59

Hmla alebo dym sú často veľmi kreatívne nástroje. No všetkého veľa škodí. Fotka potom stráca kontrast a v podstate na nej nič nevidieť. Hmlu môžete neraz následnými úpravami odstrániť alebo zredukovať ...

Ako na to

Užitočné SW nástroje

08.12.2016 11:53

AllDup v4.0.3 Určenie: program na vyhľadávanie a odstraňovanie duplicitných súborov Vlastnosti: duplicitné súbory sa vyhľadávajú len na zvolených diskových jednotkách alebo len v rámci vybraných ...

Ako na to

Fotografovanie s bleskom

08.12.2016 11:47

Ak máte moderný fotoaparát so vstavaným alebo externým bleskom, zdá sa vám téma článku triviálna. Jednoducho nastavíte vhodný režim, vyberiete najlepšiu kompozíciu záberu, exponujete a o zvyšok sa už ...

Žiadne komentáre

Vyhľadávanie

Kyocera - prve-zariadenia-formatu-a4-s-vykonom-a3

Najnovšie videá