TVORBA WWW STRÁNKY

  PDF verze pro tisk

Line

Obsah:

Line

HTML nebo XHTML

Jakým jazykem psát? Pro lepší kompatibilitu stránek v budoucnosti je lepší používat již XHTML, ale  HTML je ve většině současných prohlížečích kompatibilnější.

Pro „napsání“ www stránky je potřeba znát HTML kód. HTML kód je založen na značkách, které se nazývají TAGY. Tagy uzavírají každý text a určují jak bude vypadat v prohlížeči. Všechny tagy jsou uzavřené v ostrých závorkách <tag>. Většina tagů má tzv. počáteční tvar <tag> a koncový tvar </tag> a při používání XHTML kódu mají koncový tvar tagy všechny.

Pozn. Levou popř. pravou ostrou závorku napíšete současným stiskem pravého ALT a klávesy vlevo nad ní popř. vpravo nad ní.

 Příklad jednoduché www stránky

<html>

  <head>

    <title>Má první stránka</title>

  </head>

  <body>

    Tak se mi to povedlo.

  </body>

</html>

  • <html> a </html>určuje použitý jazyk dokumentu

  •  

  • <head> a </head> začíná a končí hlavičku, nezobrazuje se, ale obsahuje některé důležité údaje, například

  •  

  • <title> a </title>vymezující název dokumentu

  •  

  • <body> a </body> mezi tímto tagem se píší informace, které se zobrazí v prohlížeči

Tento text je potřeba napsat v textovém editoru např. Poznámkový blok, uložit ho s příponou html popř. htm a zobrazit v prohlížeči.

1. krok (napsat html kód)

3. krok (spustit vytvořený soubor)

www

www

2. krok (uložit text jako www stránku)

 

www

 

Bohužel tato vytvořená stránka není tzv. validní, tzn. že není vytvořena pravidel stanovených konsorciem W3C. Máte dvě možnosti, buď si říci, že vám je to jedno („stránka se přece zobrazila“) nebo dáte za pravdu konsorciu a stránku opravíte. Proč je druhá varianta lepší než první? Odpověď je jednoduchá; zobrazení www stránky závisí na prohlížeči a pokud použijete nesprávný tvar HTML kódu, který se ve vašem prohlížeči zobrazil, nemáte jistotu, že to bude i u prohlížečů jiných.

Co je špatného na stránce, kterou jsme napsali?

Řekli jsme si, že je více verzí HTML kódu, existuje dokonce XHTML přitom jsme nikde v naší stránce neřekli jaký typ používáme. Na definici typu HTML se používá tzv. DOCTYPE, který se logicky umisťuje na úplný začátek dokumentu, ještě před tag <html>. DOCTYPE také definuje DTD (Document Type Definition). DTD je návod pro prohlížeč zpracovávající dokument.

HTML 3.2 (nejkompatibilnější)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML 4.0 a 4.01

3 podtypy:

  • Striktní:

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  • Přechodný (transitional)

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  • Frameset (používající rámce)

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML

  • Striktní:

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  • Přechodný (transitional)

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • Frameset (používající rámce)

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Pozn. Jakou definici používat? Pokud chcete být velmi přísní a bojujete za správný web používejte definici striktní. Pokud chcete, aby většina prohlížečů správně zobrazovala vaše stránky používejte definici přechodovou. Definice se samozřejmě pořád nepíšou, poprvé se napíše tzv. mustr, který se pak do nových stránek už jenom kopíruje.

V jakém jazyce budeme psát? Zvláště čeština se svými speciálními požadavky musí být přesně definována jinak by se např. ě, š, ž, … nezobrazily. Jazyk používaný v dokumentu je definován uvnitř tagu <meta>, který se umisťuje do hlavičky mezi tag <head> a </head>.

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">

Takže nový zápis stránky by mohl vypadat takto:

Striktní definice HTML 4.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Má první stránka</title>
</head>
<body>
Tak se mi to povedlo.
</body>
</html>

Přechodná definice XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Má první stránka</title>
</head>
<body>
Tak se mi to povedlo.
</body>
</html>

Line

K čemu slouží tag <title>?

To co je napsáno v tagu <title> je velice důležité z těchto důvodů:

  • objevuje se v liště Windows jako název otevřeného okna a v titulkovém,

  • objevuje se v textu oblíbené položky,

  • objevuje se v historii prohlížeče,

  • objevuje se ve výsledku vyhledávání jako odkaz,

  • na základě jeho vymezení vyhledávají vyhledávače.

Jak má vypadat správně napsaný titulek? Je celkem jasné, že pojmenování typu „Alešova stránka“ je nevhodné, protože v žádném případě nespecifikuje obsah stránky, snad pouze jen jeho autora.

Na obsah

Line

Text

Možná jste si všimli, že při prohlížení naší první stránky se zobrazil text: „Tak se mi to povedlo“. Co kdyby jsme chtěli, aby byl červený, větší, jiným řezem popř. druhem písma apod.?

Naformátovat text lze v HTML dokumentu 2 způsoby:

  • budete formátovat za pomoci HTML tagů,

  • použijete kaskádové styly.

Protože kaskádové styly jsou složitější a pro jejich používání je potřeba znát nový jazyk. Budeme se zatím zabývat první možností.

Na formátování textu existují 2 různé postupy:

  • Fyzické formátování

  • Logické formátování

Při fyzickém formátování přesně vymezujeme vlastnosti např. text má být tučný, písmem Arial apod. Při logickém spíše označujeme důležitost a k němu různě výrazné vlastnosti. Více se používá formátování fyzické i když z hlediska kompatibility by bylo vhodnější logické.

Fyzické formátování

Logické formátování

Tag

Význam

Tag

Význam

b

tučné písmo

span

úsek textu

i

kurzíva

strong

zvýraznění (tučně)

u

podtržení textu

em

zvýraznění (kurzíva)

sub

dolní index

cite

citace

sup

horní index

code

výpis kódu

small

zmenšení textu

dfn

nově použitý termín

big

zvětšení písma

kbd

vstup z klávesnice

s

přeškrtnutý text

samp

ukázka

strike

přeškrtnutý text

tt

teletype

font

písmo

var

formátování proměnné

basefont

základní font

abbr

ustálený výraz

blink

blikání písma

acronym

zkratka

nobr

nezalamovat obsah

del

smazaný obsah

Tento výčet by bylo potřeba doplnit od různé varianty např. tagu font apod.

Příklad: Pokud by jsme chtěli náš text tučný tak by zápis vypadal takto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Má první stránka</title>
</head>
<body>
<b>Tak se mi to povedlo.</b>
</body>
</html>

Nastavení barvy, velikosti a fontu písma.

Atribut tagu <font>

Význam

Hodnoty

color

barva písma

barva

size

velikost, stupeň písma

1 až 7 | +1 | -1 (+-1 až 6))

face

font, druh písma

jména fontů oddělená čárkami

U atributu FACE je možné volit více fontů, ale z důvodu kompatibility se zůstává u Arialu (sans-serif), Timesu (serif) a Courieru (monotype).

Pokud by jsme chtěli náš text červený tak by zápis vypadal takto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Má první stránka</title>
</head>
<body>
<font color="red" >Tak se mi to povedlo.</font>
</body>
</html>

Pozn. U WYSIWIG editorů zadáváte vlastnosti textu jako v textovém editoru (kliknutím na ikonu funkce).

Členění textu

Odstavec

Základní formátování odstavců je stejné jako u textového editoru. Výchozím tagem je <p> jako paragraph (odstavec). Praktickým důsledkem použití tagu <p> je vertikální mezera mezi odstavci rovnající se velikosti jednoho řádku. Proto se někdy pro ukončení odstavce bez mezery používá tag <br>.

Tag <p> má atribut zarovnání (align) doleva, doprava, na střed, do bloku.

Atribut align

význam

left

zarovnání vlevo

right

zarovnání vpravo

center

zarovnání na střed

justify

zarovnání do bloku

Například: <p align=“justify“> A…</p> zarovná text do bloku.

Dalším možným tagem, který může pomoci formátovat odstavce je <div>. Tento tag může uzavřít libovolně velkou část textu (někdy i celý text). Výhodou je, že může mít stejné atributy jako <p>, ale nedělá se mezi následujícími tagy <div> vertikální mezera.

Nadpisy

Nadpisy (headings) mají 6 úrovní h1, …, h6, přičemž h1 je největší a h6 nejmenší.

Tag

Stupeň písma

Výchozí velikost

h1

6

24px

h2

5

18 -19px

h3

4

16px

h4

3

13px

h5

2

10px

h6

1

9px

Hlavním atributem je stejně jako u odstavce align.

Například: <h1 align=“center“>Nadpis</p> Největší nadpis zarovnaný na střed.

Tabulátory

Náhrada za tabulátory je atribut <blockquote>, který při použití vynechává od kraje místo veliké cca 40 pixelů.

Na obsah

Line

Odkazy

Hypertextové odkazy jsou nejtypičtější vlastností www stránek, umožňují strukturovat web do dílčích stránek a za pomoci odkazů se mezi nimi pohybovat.

Tagem pro odkaz je <a> od slova anchor. Odkazem může být text, obrázek popř.jiný objekt, ale odkazem nemůže být jiný odkaz nebo např. tabulka. Všechny odkazy se podtrhávají a často mění barvu.

Atribut

Význam

Hodnota

Vysvětlení

href

cíl odkazu

URL

Odkazuje na jinou www stránku

name

jméno záložky

libovolné jméno

Odkazuje na místo na stránce

target

cílový rám

jméno rámu

Odkazuje na rám

Příklady:

<a href="http://www.atlas.cz">Atlas</a>................................ odkaz na Portál Atlas

<a href=# pokus> Pokus....................................................... odkaz na záložku v dokumentu

<a name=pokus> Pokus........................................................ vytvoří záložku v dokumentu

target=

Odkaz otevírá …

_blank

nové okno

_top

Nejvýše postavené okno

_parent

nadřazený rám

_self

tentýž rám

Důležité také je jakou službu chcete použít; nejčastěji je to http, ale používají se i:

ftp ............. informace přístupné přes službu ftp

mailto ........ adresy pro elektronickou poštu např. mailto:jan.novak@seznam.cz

Odkazy by neměly být typu klikněte zde apod., ale měly by vyjadřovat konkrétní předmět.

Na obsah

Line

Obrázek

Grafik na Webu vyžaduje určitý kompromis mezi kvalitou obrázku a velikostí dat, tento kompromis je možné určovat především volbou vhodného formátu.

  • GIF - Jeho charakteristickou vlastností je, že používá omezenou paletu barev (maximálně 256).

  • PNG byl navržen především jako náhrada GIFu.

  • JPEG je formát určený pro ukládání fotografií. Ukládá jen zjednodušenou obrazovou informaci.

Pro vkládání obrázků do HTML dokumentu je potřeba použít tag <img>.

Např. <img src="kde je uložen" alt="popis" width=" šířka" height=" výška" />

Používáte-li obrázek jako odkaz je potřeba ještě zadefinovat okraj border="0"

Aktivní obrázky (klikací mapy)

Na internetu občas narazíte na obrázek, jehož části můžou být různé odkazy. V současnosti však dochází k odklonu od této technologie a používají se jiné metody (obrázek se rozloží na části, popř. použije se např. Flash).

Na vytvoření takové klikací mapy existuje tag <usemap>. Nebudeme si ukazovat jeho použití, protože pro psaní je velice složitý, ukážeme si to ve WISIWYG editoru.

Na obsah

Line

Tabulky

Tabulky jsou dnes nejpoužívanější metodou jak vytvořit pevnou strukturu (kompozici) www stránek. Druhé použití je pro prezentaci dat tabulkového charakteru.

Dnes je již možné pro tvorbu kompozice nepoužívat tabulky, ale technologii CSS (Kaskádové styly). Tabulky přesto zůstávají nejrozšířenější.

Celá tabulka je uzavřena do tagu <table>, každý řádek je vymezen párovou značkou <tr> a každá buňka tabulky značkou <td>.

Např.

<table border="1">
<tr>
<td>Pondělí</td>
<td>Úterý</td>
<td>Středa</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

tabulka

 

   

Tabulkové tagy

Atributy tagu <table>

Tag

Význam

table

tabulka

tr

řádek tabulky

td

buňka tabulky

th

hlavičková buňka tabulky

caption

hlavička tabulky

col

ovlivnění sloupce tabulky

colgroup

skupina sloupců tabulky

tbody

tělo tabulky

thead

hlavička tabulky

tfoot

patička tabulky

 

atribut

význam

align

obtékání tabulky ostatním textem

cellpadding

vnitřní okraj buněk

cellspacing

vnější okraj buněk

border

šířka rámečku buněk

width

minimální šířka tabulky

height

minimální výška

background

obrázek na pozadí

bgcolor

barva pozadí

bordercolor

barva rámečku

 

Na obsah

Line

Seznamy

V zásadě je možné používat 3 druhy seznamů:

  • odrážky,

  • číslovaný,

  • s nadpisy.

Použití je velice jednoduché, např. seznam vytvořený výše by byl zapsaný takto:

<ul>
<li>odrážky</li>
<li>číslované</li>
<li>s nadpisy</li>
</ul>

Pokud by jsme chtěli číslovaný jen by jsme vyměnili tagy; místo <ul> by bylo <ol>.

Tag

Význam

li

položka seznamu

ol

číslovaný seznam

ul

odrážkový seznam

dir

zvláštní druh seznamu

menu

typ seznamu

Na obsah

Line

Rámy

Rámy jsou velice specifickou technologií. Existuje velká skupina uživatelů, která je nesnáší a druhá, která je používá. Obě dvě mají v něčem pravdu. Používání rámů nese mnoho nevýhod jako:

  • hůře se ukládají,

  • nezobrazují adresu,

  • znesnadňují ovládání,

  • hůře se tisknou , …

  • Ale také výhody jako:

  • přehlednost (nalevou je obsah, napravo text),

  • dobrá orientace (neztratíte se).

Definic rámů si nebudeme ukazovat, opět pro jejich vytvoření použijeme WISIWYG editor.

Na obsah

Line

CSS (Kaskádové styly)

Kaskádové styly umožňují efektivnější formátování dokumentů než prostý HTML jazyk. Do Struktury webu se implementují 2 způsoby:

  • jsou přímo vloženy do HTML kódu do tagu <head>,

  • jsou provázány s www stránkou externím odkazem na soubor typu neco.css.

Vložené v hlavičce

Externi odkaz (také umístěn v hlavičce)

<style type="text/css">
h2    {color: blue; font-style: italic}
</style>

<link rel="stylesheet" href="../menu.css">

Definice CSS (nejpoužívanější část)

Selektory

druh selektoru

zápis

příklady

tag

jméno tagu

p {color: red}

identifikátor

#identifikátor

#cervene {color: red}

 

tag#identifikátor

b#cerverne {color: red}

třída

.třída

.cervena {color: red}

 

tag.třída

i.cerverna {color: red}

hromadná deklarace

selektor, selektor

H1, H2, H3 {color: red} 

kontextová deklarace

nadřazenýSelektor selektor 
(oddělené mezerou)

li a {font-weight: bold}

 

i b {color: red}

pseudotřída

tag:pseudotřída

a:hover {color: red}

 

p:first-line {color: red}

Písmo

Vlastnost

Hodnoty

Význam

font-family

seznam písem

Druh písma, font

font-style

normal
italic
oblique

normální
kurzíva
skoněné

font-variant

normal
small-caps

normální
kapitálky

font-size

xx-small
x-small
small
medium
large
x-large
xx-large
výška
procento

mrňavé
maličké
malé
střední
velké
obří
maxipsí
výška
zvětšení

font-weight

normal
bold
bolder
lighter
100, 200, 300,
400, 500, 600,
700, 800, 900

normální
tučné
trochu tučnější
trochu světlejší
duktus
vyjádřený
číslem

font

všechny možné předchozí hodnoty nebo systémové písmo

Text / odstavec

Vlastnost

Hodnoty

Význam

text-decoration

none
underline
overline
line-through
blink

bez dekorace
podtržení
"nadtržení"
přeškrtnutí
blikání

text-transform

none
capitalize
uppercase
lowercase

nechat jak to je
Začátky Slov Velké
VELKÁ PÍSMENA
malá písmena

word-spacing

normal
délka

mezislovní mezera
zvětšená o délku

letter-spacing

normal
délka

prostrkání znaků
zvětšené o délku

line-height

normal
výška
násobek
procento

výška řádku
absolutní výška
násobek
zvětšení

text-indent

délka
procento

odsazení prvního
řádku

text-align

left
right
center
justify

zarovnání vlevo
vpravo
na střed
do bloku

vertical-align

baseline
sub
super
top
text-top
middle
bottom
text-bottom
procento

na řádek
dolní index
horní index
co nejvýše
vršek k vršku
střed na střed
co nejníže
spodek ke spodku
procento výšky

display

block
inline
list-item
none

blokový element
řádkový element
seznam
nezobrazí se

white-space

normal
pre
nowrap

normální text
předformátovaný
nezalamovat

Barvy a pozadí

Vlastnost

Hodnoty

Význam

color

barva

barva písma

background-color

barva
transparent

barva pozadí
průhledné pozadí

background-image

none
url(cesta)


obrázek na pozadí

background-repeat

repeat
no-repeat
repeat-x
repeat-y

pozadí se opakuje
neopakuje
opakuje v ose X
nebo v ose Y

background-attachment

scroll
fixed

pozadí se posouvá
pozadí je jako přibité

background-position

top, center, bottom

left, center, right,

délka, procento

Poloha obrázku na pozadí

background

 

všechny výše uvedé hodnoty

Velikost a obtékání

Vlastnost

Hodnoty

Význam

width

auto
šířka
procento

automatická šířka
nastavená šířka
procento *

height

auto
výška
procento

automatická výška
nastavená výška
procento *

float

left
right
none

umístění plovoucího (obtékaného)
objektu či zda
je neplavec

clear

left
right
both
none

čekání na skončení
plovoucích objektů
zleva, zprava,
obou, nebo žádných

Na obsah

Line

 

Poslední aktualizace: 28.11.2004

webmaster