2. HTML Úvod do jazyka

(1)

2. HTML

–

_–

Úvod do jazyka

27.9.200 27.9.20055

(2)

Obsah

n

n Webové stránky, HTML, W3CWebové stránky, HTML, W3C n

n Štruktúra dokumentu (Štruktúra dokumentu (htmlhtml, , headhead, , titletitle, ,

body), vnáranie elementov body), vnáranie elementov

n

n FormátovanieFormátovanie obsahu (h1..h6, b, i)obsahu (h1..h6, b, i) n

n Bloky (p, div, br)Bloky (p, div, br) n

n Názvy súborov (Názvy súborov (index.htmindex.htm, , index.htmlindex.html, ,

default.htm

(3)

Webové stránky, HTML, W3C

n

n HTMLHTML ((HyperTextHyperText MarkupMarkup LanguageLanguage) je ) je

značkovací jazyk, v

značkovací jazyk, v ktorom sa definuje ktorom sa definuje rozloženie dokumentu, syntax

rozloženie dokumentu, syntax a

a rozmiestnenie prvkov na webovej stránke. rozmiestnenie prvkov na webovej stránke. Založený na

Založený na SGMLSGML. .

n

n W3CW3C ((WorldWorld WideWide Web Web ConsortiumConsortium) je ) je

konzorcium, ktoré bolo vytvorené za účelom konzorcium, ktoré bolo vytvorené za účelom

definovať štandardizované verzie jazyka definovať štandardizované verzie jazyka

HTML. HTML.

(4)

Zdrojový kód

n

n Skladá sa z elementov/znaSkladá sa z elementov/značčiek/iek/tagovtagov n

n Element: napr. Element: napr. <html><html>, , <body><body> n

n VäVäččšinou má aj koncový element, napr. šinou má aj koncový element, napr.

</html> </html>

(5)

Kostra webového dokumentu

<html></html> -- zazaččiatok a konieciatok a koniec dokumentu

dokumentu

<head></head> -- hlavihlaviččka dokumentuka dokumentu <title></title>

<title></title> -- titulok dokumentutitulok dokumentu <body></body>

(6)

Usporiadanie dokumentu

<html> <html> <head> <head> <title>Toto

<title>Toto jeje tituloktitulok</title></title> </head>

</head>

<body>

Toto

Toto jeje telotelo dokumentu. Do dokumentu. Do tejtotejto ččastiasti sasa píšepíše väväččšinašina elementovelementov. . ObsahObsah tejto

tejto ččastiasti sasa zobrazízobrazí vv prehliadaprehliadačči. i.

</body>

</html>

(7)

Vnáranie elementov

n

n Správne poradie: Správne poradie:

<head><title>tituloktitulok</title></head></title></head>

n

n Nesprávne poradie: Nesprávne poradie:

(8)

Formátovanie

obsahu

_obsahu

<h1>

<h1>NadpisNadpis úrovneúrovne 1</h1>1</h1> <h2>

<h6>NadpisNadpis úrovneúrovne 6</h6>6</h6> <b>

<b>TuTuččnéné písmopísmo</b></b> <i>

<i>Šikmé písmoŠikmé písmo</i></i>

(9)

Š

truktúrovanie

_{truktúrovanie}

dokumentu

_dokumentu

<p></p>

<p></p> -- OdstavecOdstavec <div></div>

<div></div> -_- Sekcia _Sekcia <br/>

<br/> -- Nový riadok vNový riadok v rámci nejakého rámci nejakého

odstavca/sekcie (podľa špecifikácie odstavca/sekcie (podľa špecifikácie

XHTML) XHTML)

(10)

Rozdiely medzi HTML a

XHTML

V

Vššetky hodnoty musia etky hodnoty musia by

byťť v v úúvodzovkvodzovkáách ch alebo apostrofoch

alebo apostrofoch

V

V úúvodzovkvodzovkáách, vch, v apostrofoch, apostrofoch, bez nich

bez nich

Hodnoty Hodnoty atrib

atribúútovtov

Striktne malými Striktne malými p píísmenamismenami Ľ Ľubovoubovoľľnnéé Ve

Veľľkoskosťť ppísmen v ísmen v n

náázvoch atribzvoch atribúútovtov

Vy

Vyžžaduje sa uaduje sa u vvššetkých etkých elementov elementov Vy Vyžžaduje sa aduje sa u u vvääččššiny iny elementov elementov Nevy

Nevyžžaduje aduje sa sa P Párovanie árovanie elementov elementov Len malými p

Len malými píísmenamismenami

Ľ

Ľubovoubovoľľnnéé

Ve

Veľľkoskosťť ppísmen ísmen elementov elementov XHTML XHTML HTML 4.01 HTML 4.01 HTML 3.2 HTML 3.2

(11)

Názvy a prípony súborov

n

n Prípony webových stránok: Prípony webových stránok: ..htmhtm, , .html.html

n

n Špeciálne názvy: Špeciálne názvy: index.htmlindex.html, , default.htmldefault.html

n

n Predchádzajte problémom: nepoužívajte Predchádzajte problémom: nepoužívajte

v

(12)

Test pre

pokro

_{pokročilých}

č

ilých

n

n ŠŠtvrtok 29.9.2005tvrtok 29.9.2005, H3, H6, H3, H6 n

n 8:108:10 –– 9:40, 9:50 9:40, 9:50 –– 11:2011:20 n

n PoužívaPoužívaťť sa môžu rôzne príru sa môžu rôzne príruččky, knihy ...ky, knihy ... n

n DobrovoDobrovoľľná úná úččasasťť n

(13)

Ď

akujem za

_{akujem za}

pozornos

ť

pozornosť

J

_J

Priestor na Vaše otázky Priestor na Vaše otázky

(14)

3. HTML

–

_–

zoznamy,

_zoznamy,

obrázky, odkazy, tabu

ľ

ky,

obrázky, odkazy, tabu

ľ

ky,

kódovanie, špeciálne znaky

4.10.2005 4.10.2005

(15)

Obsah

n

n zoznamy (zoznamy (odrážkovéodrážkové, , ččíslované) íslované) n

n obrázky (rozmery, alternatívny text)obrázky (rozmery, alternatívny text) n

n odkazy (relatívne/absolútne odkazy, atribút odkazy (relatívne/absolútne odkazy, atribút titletitle)) n

n tabutabuľľky ky n

n špeciálne znakyšpeciálne znaky n

n kódovanie stránkykódovanie stránky n

(16)

Odrážkové

a

_a

č

_č

íslované

_íslované

zoznamy

n

n <<ulul> … </> … </ulul> > -- odrodrážkovýážkový zoznamzoznam n

n <<olol> … </> … </olol> > -- ččíslovaný zoznamíslovaný zoznam n

n <<lili> … </> … </lili>> -- prvok zoznamuprvok zoznamu

<

<ulul>> <

<lili>>ÚtekÚtek z z väzniceväznice ShawshShawshaanknk</</lili>> <

<lili>>ŤŤažkoažko ho ho zabizabiťť</</lili>> <

<lili>>PrípadPrípad pelikánpelikán</</lili>> </

</ulul>>

(17)

Obrázky

n

n Element Element <<imgimg>> n

n Povinný atribút Povinný atribút srcsrc –– cesta ku obrázkucesta ku obrázku n

n Povinný atribút Povinný atribút altalt –– alternatívny text, ktorý alternatívny text, ktorý

sa zobrazí namiesto obrázka sa zobrazí namiesto obrázka

n

n Atribúty Atribúty widthwidth, , heightheight –– veveľľkoskosťť obrázka obrázka n

n <<imgimg srcsrc="="obrazky/logo.gifobrazky/logo.gif" width="100" " width="100"

height="45

(18)

Odkazy

n

n Element Element <<aa>> n

n Povinný atribút Povinný atribút hrefhref –– zdroj odkazuzdroj odkazu n

n Nepovinný atribút Nepovinný atribút titletitle –– akási akási nápovedanápoveda

(zobrazuje sa v bubline) (zobrazuje sa v bubline)

n

n <a <a hrefhref==""http://http://www.zoznam.skwww.zoznam.sk" "

titl

title=e=""vyhvyhľľadávaadávačč ZoznamZoznam">Z">Zoznamoznam</a></a>

n

n <a <a hrefhref="="formular.htmlformular.html">">formulárformulár</a></a> n

n <a <a hrefhref==""mailto:mailto:[email protected]@szm.sk">">ee--mailmail</a></a>

(19)

Relatívne a

absolútne

_absolútne

adresovanie

n

n Relatívna Relatívna adresa:adresa:

../

../obrazky/pozadie.gifobrazky/pozadie.gif

n

n Absolútna Absolútna adresa:adresa:

http

(20)

Tabu

ľ

ky

Tabu

ľ

ky

legenda/hlavička celej tabuľky

musí byť definovaná v rámci elementu <table></table>

zobrazuje sa nad okrajom tabuľky <caption></caption>

definuje bunku v rámci riadka (<tr></tr>) <td></td>

definuje bunku v rámci riadka (<tr></tr>), ktorá je nadpisom (je zvýraznená - väčšinou tučným

písmom) <th></th>

definuje celý riadok <tr></tr>

začiatok a koniec celej tabuľky <table></table>

popis element

(21)

Tabu

ľ

ky

Tabu

ľ

ky

–

_–

ukážka

_ukážka

Tabuľka s legendou (2 riadky x 1 stĺpec)

<table>

<

<captioncaption> legenda </> legenda </captioncaption>> <

<trtr> > <

<thth> nadpis > nadpis riadkariadka </</thth>> </

</trtr>> <

<trtr> > <

<tdtd>> obsah bunky </obsah bunky </tdtd>> </

</trtr>> </table>

</table>

(22)

Element <table>

zhrnutie tabuľky napr. pre nevizuálne prehliadače text

summary

šírka tabuľky v bococh číslo | %

width

veľkosť medzier medzi bunkami (vodorovné i zvislé) číslo | %

cellspacing

vzdialenosť textu od vnútorného okraja bunky – platí pre každú bunku tabuľky

číslo | % cellpadding

šírka okraja tabuľky v bodoch číslo

border

popis hodnoty

(23)

Element <

tr

_tr

>

_>

zvislé zarovnanie textu vnútri všetkých buniek v riadku

top | middle | bottom | baseline

valign

vodorovné zarovnanie textu vnútri všetkých buniek v riadku

left | center | right | justify

align

(24)

Elementy <

th

_th

>, <

_{>, <}

td

_td

>

_>

číslo znamená počet riadkov, cez ktoré daná bunka presahuje

číslo rowspan

číslo znamená počet stĺpcov, cez ktoré daná bunka presahuje

číslo colspan

zvislé zarovnanie textu vnútri bunky top | middle | bottom

| baseline valign

vodorovné zarovnanie textu vnútri bunky left | center | right |

justify align popis hodnoty atribút ukážka: _{03-ukazka-04.html}

(25)

Š

peciálne znaky

_{peciálne znaky}

n

n Znaky, ktoré majú v HTML špeciálny význam (Znaky, ktoré majú v HTML špeciálny význam (<<, ,

>

>, , &&, …) , …) treba previestreba previesťť na tzv. entity na tzv. entity

÷ ÷ × × © © & & > > < <   nedeliteľná medzera

(26)

Kódovanie stránky

n

n Pomocou elementu Pomocou elementu <meta><meta> n

n Vnútri elementu Vnútri elementu <head>…</head><head>…</head> n

n Viacero kódovaní slovenViacero kódovaní slovenččinyiny

<meta http

charset=windows=windows--1250"1250"//>> <meta http

charset=iso=iso--88598859--2"2"//>> <

<metameta httphttp--equiv="Contentequiv="Content--TypeType" " content="textcontent="text//htmlhtml; ; charset=utf

(27)

Element

<!DOCTYPE>

_<!DOCTYPE>

n

n Dôležitý element, ktorým urDôležitý element, ktorým urččujeme typ a ujeme typ a

štandard dokumentu (špecifikáciu) štandard dokumentu (špecifikáciu)

n

n Musí byMusí byťť ešte pred elementom ešte pred elementom <h<htmltml>> n

n Pre XHTML 1.0 Pre XHTML 1.0 Transitional:Transitional:

<!DOCTYPE

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

(28)

Ď

akujem za

_{akujem za}

pozornos

ť

pozornos

ť

J

_J

(29)

4

4 . CSS

_{. CSS}

-

_-

úvod

_úvod

11

(30)

Cvi

č

enia

Cvi

č

enia

n

n Trvajú 45 minút + 5 min. na vystriedanieTrvajú 45 minút + 5 min. na vystriedanie n

n Úlohy sa riešia a odovzdávajú len na Úlohy sa riešia a odovzdávajú len na

cvičeniach cvičeniach

n

n Zadanie úlohy je zvyZadanie úlohy je zvyččajne v systéme ajne v systéme n

n Úloha sa odovzdáva spakovaná (Úloha sa odovzdáva spakovaná (len formát len formát

zip

zip) cez formulár pod zadaním úlohy) cez formulár pod zadaním úlohy

n

n Anketa sa môže odoslaAnketa sa môže odoslaťť aj neskôr (do aj neskôr (do

niekoľkých dní) niekoľkých dní)

n

(31)

Cvi

č

enia

Cvi

č

enia

n

n V halách H3, H6 je nainštalovaný program V halách H3, H6 je nainštalovaný program

1stPage2000

1stPage2000, ktorý je vylepšením , ktorý je vylepšením obyčajného textového editora

obyčajného textového editora –– NotePadNotePad (uľahčuje vkladanie elementov)

(uľahčuje vkladanie elementov)

n

n Pozor: niekedy vkladá elementy, ktoré Pozor: niekedy vkladá elementy, ktoré

už nebudeme používať!

(32)

Obsah

n

n Úvod do kaskádových štýlov (CSS)Úvod do kaskádových štýlov (CSS) n n Vkladanie CSSVkladanie CSS n n Pozadie Pozadie n n Text Text n n FontFont

(33)

CSS

–

_–

kaskádové štýly

_{kaskádové štýly}

n

n Poskytujú širšie možnosti Poskytujú širšie možnosti formátovaniaformátovania

(nielen) textu (nielen) textu

n

n OddeOddeľľujú štruktúru dokumentu ujú štruktúru dokumentu

od

od štýlu/designu_{štýlu/designu}

n

(34)

Spôsob pripojenia štýlov ku

webovým dokumentom

n

n pomocou elementu pomocou elementu <<linklink>> (externý súbor)(externý súbor) n

n pomocou elementu pomocou elementu <<stylestyle>> (pre daný (pre daný

dokument) dokument)

n

n priamym vložením štýlu do atribútu priamym vložením štýlu do atribútu stylestyle

(pre daný element) (pre daný element)

(35)

Element

<link>

_<link>

n

n Element Element <<linklink>> musí vnútri elementu musí vnútri elementu

<

<headhead></></headhead>>

médium, pre ktoré je kaskádový štýl určený v súčasnosti sú podporované média all, print, screen

all/aural/braille/embossed/ handheld/print/projection/ screen/tty/tv

media

Vzťah ku aktuálnemu dokumentu v našom prípade stylesheet

rel

V našom prípade musí byť text/css

typ obsahu type

cieľová adresa súboru s kaskádovým štýlom adresa súboru href popis hodnoty atribút

(36)

Element

<link>

_<link>

-

_-

ukážka

_ukážka

n

n <<linklink href="styl1.css" href="styl1.css" rel="stylesheetrel="stylesheet" "

type="text

type="text//csscss""//> >

n

type="text

type="text//csscss" " media=media=""screenscreen""//>>

n

type="text

(37)

Obsah súboru styl1.css

body { body {

background

background--colorcolor: #9900FF;: #9900FF; }

} /*

/* ovplyvní všetky elementy ovplyvní všetky elementy divdiv v dokumente v dokumente */ */ div { div { color color: #0000FF;_{: #0000FF;} } }

(38)

Ako zmeni

ť

štýl textu?

Ako zmeni

ť

štýl textu?

n

n Použijeme element Použijeme element <<spanspan>> n

n umožumožňňuje zoskupiuje zoskupiťť znaky textu a tým aj znaky textu a tým aj

prideliť im vlastnosti prideliť im vlastnosti

n

n !!! Nepoužívať element <!!! Nepoužívať element <fontfont> !!!> !!!

(39)

Background

(pozadie)

_(pozadie)

scroll | fixed background-attachment

repeat | repeat-x | repeat-y | no-repeat background-repeat

x-pos y-pos background-position url | none background-image color | transparent background-color hodnoty vlastnosť

(40)

Text

nastavenie podčiarknutia, nadčiarknutia, preškrtnutia a blikania textu none | underline | overline | line-through | blink text-decoration

upravuje veľkosť písmen none | capitalize |

uppercase | lowercase text-transform

zarovnanie textu left | right | center |

justify text-align farba textu color color popis, význam hodnoty vlastnosť

(41)

Font

popis, význam hodnoty

vlastnosť

určuje tzv. rodinu písma

viacslovné názvy musia byť

v úvodzovkách alebo v apostrofoch

napr. Arial, Helvetica, sans-serif, "Times

New Roman", Times, serif, "Courier New", Courier, mono

font-family

zobrazí text normálne, alebo ako malé kapitálky

normal | small-caps font-variant

nastaví štýl písma normal | italic | oblique

font-style

nastaví hrúbku písma normal | bold | bolder |

lighter | 100 | 200 | 300 | ... | 800 | 900

(42)

Užito

č

né adresy

Užito

č

né adresy

n

n www.w3.orgwww.w3.org ((aj aj ččasasťť ValidatorsValidators)) n

n www.w3schools.comwww.w3schools.com (Learn XHTML, Learn (Learn XHTML, Learn

CSS) CSS)

n

n validator.w3.orgvalidator.w3.org n

n www.w3.org/Style/CSS/www.w3.org/Style/CSS/ -- kompletná kompletná

špecifikácia CSS špecifikácia CSS

(43)

Ď

akujem za

_{akujem za}

pozornos

ť

pozornosť

J

_J

(44)

5

5 . CSS

_{. CSS}

–

_–

ve

_ve

ľ

_ľ

kosti,

_kosti,

písmo, zoznamy,

pseudotriedy

, triedy

_{, triedy}

1

(45)

Obsah

n

n Jednotky veJednotky veľľkostíkostí n

n Vlastnosti textuVlastnosti textu n n Zoznamy Zoznamy n n PseudotriedyPseudotriedy n n TriedyTriedy

(46)

Jednotky ve

ľ

kostí

Jednotky ve

ľ

kostí

n

n Vyjadrenie veVyjadrenie veľľkosti (šírka, výška bloku, kosti (šírka, výška bloku,

veľkosť písma ...) veľkosť písma ...)

–

– emem –– výška fontuvýška fontu –

– exex –– výška písmenka x, obyčajne polovica výšky výška písmenka x, obyčajne polovica výšky fontu

fontu

–

– cm, mm, incm, mm, in –

– pxpx –– body body obrazovkyobrazovky –

– ptpt –– point (1pt = 1/72 in)point (1pt = 1/72 in) –– typografické bodytypografické body –

(47)

Font

–

_–

pokra

_pokra

č

_č

ovanie

_ovanie

vlastnosť

nastaví výšku písma em, ex sa vzťahujú ku

rodičovskému/nadradenému elementu

xx-small | x-small |

smaller | larger | length

| %

font-size

(48)

Vlastnosti

textu

_textu

vertikálne zarovnanie textu v rámci blokového elementu baseline | top | text-top

%

vertical-align

určuje, ako sa majú zobrazovať

tzv. neviditeľné znaky (medzera, tabulátor, nový riadok)

normal | pre | nowrap white-space

nastavuje medzery medzi slovami normal | length

word-spacing

nastavuje medzery medzi písmenami

normal | length

letter-spacing

odsadenie prvého riadka textu od okraja blokového elementu

length | %

text-indent

(49)

Zoznamy

umiestnenie textu vzhľadom ku odrážke inside | outside list-style-position

obrázok (zo súboru) ako odrážka

none | url

list-style-image

typ zoznamu

(odrážka, číslo) none | disc | circle |

square | decimal | lower-roman | upper-lower-roman | lower-alpha | upper-alpha | ... list-style-type popis, význam hodnoty vlastnosť ukážka: _{05-ukazka-02.html}

(50)

Pseudotriedy

n

n Sú špeciálne triedy, ktoré rozširujú možnosti štýlov Sú špeciálne triedy, ktoré rozširujú možnosti štýlov

pre niektoré elementy.

n

n SúSú uvádzanéuvádzané s s dvojbodkoudvojbodkou n

n Zvyčajne sa používajú pZvyčajne sa používajú priri hypertextovhypertextovýchých

odkazo

odkazochch

n

n Niektoré sa môžu používať pri ľubovoľných Niektoré sa môžu používať pri ľubovoľných

elementoch

(51)

Pseudotriedy

používané pri

_{používané pri}

hypertextových

odkazoch

_odkazoch

n

n ::linklink –– vzvzťťahuje sa ku ešte nenavštíveným ahuje sa ku ešte nenavštíveným

odkazom. odkazom.

n

n ::visitedvisited –– vzvzťťahuje sa ku už navštíveným ahuje sa ku už navštíveným

odkazom odkazom

(52)

Pseudotriedy

používané pri

_{používané pri}

ľ

ubovo

ľ

ných elementoch

ľ

ubovo

ľ

ných elementoch

n

n ::hoverhover –– vzťahuje sa na element, cez ktorý vzťahuje sa na element, cez ktorý

prechádzame myšou

n

n ::activeactive –– vzťahuje sa na element, ktorý je aktívny vzťahuje sa na element, ktorý je aktívny

(napr. držíme stlačené tlačidlo myši)

n

n ::focusfocus –– vzťahuje sa na element, ktorý je vzťahuje sa na element, ktorý je

pripravený reagovať, napr. na vstup z

pripravený reagovať, napr. na vstup z klávesnice klávesnice

(53)

Pseudotriedy

–

_–

upozornenie

_upozornenie

n

n PseudotriedaPseudotrieda ::hoverhover musí bymusí byťť definovaná definovaná

až po triedach

až po triedach ::linklink a a ::visitedvisited

n

n PseudotriedaPseudotrieda ::activeactive musí bymusí byťť definovaná definovaná

po triede

(54)

Triedy

(všeobecné)

_{(všeobecné)}

n

n Nastavenia vlastností CSS možno radiNastavenia vlastností CSS možno radiťť do do

tried a pomenovať ich tried a pomenovať ich

n

n Takto vzniknuté triedy možno priraTakto vzniknuté triedy možno priraďďovaovaťť

ľubovolným elementom cez atribút

ľubovolným elementom cez atribút classclass..

n

n V definícii CSS je meno triedy uvádzané s V definícii CSS je meno triedy uvádzané s

bodkou pred menom triedy bodkou pred menom triedy

(55)

Všeobecné triedy

–

_–

ukážka

_ukážka

n

n Definícia triedy kaskádového Definícia triedy kaskádového štýlu:štýlu:

.mojatrieda

.mojatrieda {{ font

font--weight: weight: boldbold;; font

font--size: 1size: 1..22emem;; color: #FF0000;

color: #FF0000;

}

n

n V V htmlhtml kóde zapíšeme: kóde zapíšeme:

<p

n

n Ale môžeme zapísať Ale môžeme zapísať aj:aj:

<

(56)

Triedy

(pre elementy)

_{(pre elementy)}

n

n Trieda sa však dá prepojiTrieda sa však dá prepojiťť aj s istým typom aj s istým typom

elementu elementu

n

n Vtedy sa dá písaVtedy sa dá písaťť, resp. bude fungova, resp. bude fungovaťť, len , len

v elemente tohto typu. V inom type v elemente tohto typu. V inom type

elementu nebude fungovať. elementu nebude fungovať.

n

n Definícia takejto triedy v CSS vyzerá Definícia takejto triedy v CSS vyzerá

nasledovne: nasledovne:

nazov_elementu

(57)

Triedy pre elementy

–

_–

ukážka

_ukážka

n

n Definícia triedy kaskádového Definícia triedy kaskádového štýlu:štýlu:

p.mojatrieda

p.mojatrieda {{ font

font--weight: weight: boldbold;; font

font--size: 1size: 1..22emem;; color: #FF0000;

color: #FF0000;

}

n

n V V htmlhtml kóde zapíšeme: kóde zapíšeme:

<p

n

n Ale Ale NEmôžemeNEmôžeme zapísať (nebude fungovať):zapísať (nebude fungovať):

<

(58)

Triedy +

pseudotriedy

_pseudotriedy

n

n Triedy a Triedy a pseudotriedypseudotriedy môžeme vzájomne môžeme vzájomne

kombinovať. kombinovať. n n Napr.:Napr.: – – p.mojatrieda:hoverp.mojatrieda:hover – – p:hoverp:hover – – ..mojatrieda:hovermojatrieda:hover

(59)

Kam umiestni

ť

stránky?

Kam umiestni

ť

stránky?

n

n KdekoKdekoľľvek, ale môžete využivek, ale môžete využiťť aj aj serverserver

BARBIE

(

(http://http://nw.fmph.uniba.sknw.fmph.uniba.sk/~username/~username). ).

n

n Musí existovaMusí existovaťť prie prieččinok inok public.wwwpublic.www vo vo

vašom domovskom priečinku (

vašom domovskom priečinku (disk Hdisk H), do ), do ktorého budete ukladať vaše stránky apod. ktorého budete ukladať vaše stránky apod.

Ak neexistuje, vytvorte si ho. Ak neexistuje, vytvorte si ho.

(60)

Upozornenia

n

n Od tohto týždOd tohto týždňňa sa už nebude daa sa už nebude daťť odosla odoslaťť

úloha e

úloha e-_-mailom. Kto nemá konto, resp. mu _{mailom. Kto nemá konto, resp. mu} nefunguje prihlásenie, musí si to vybaviť so nefunguje prihlásenie, musí si to vybaviť so

správcom (Miroslav

správcom (Miroslav WagnerWagner, i22). , i22).

n

n Za entitami Za entitami v HTML v HTML sa MUSsa MUSÍÍ ppíísasaťť

bodko

bodkoččiarka iarka ((;;) ) –– naprnapr. . &&nbspnbsp;;

n

n Za definíciami vlastností v CSS sa musí písaZa definíciami vlastností v CSS sa musí písaťť

bodko

(61)

Ď

akujem za

_{akujem za}

pozornos

ť

pozornos

ť

J

_J

(62)

6. CSS

–

_–

rozmery

_rozmery

,

_,

tabu

ľ

ky, okraje

tabu

ľ

ky, okraje

25.10.2005 25.10.2005

(63)

Obsah

n n RozmeryRozmery n n TabuTabuľľkyky n

(64)

Rozmery

definuje šírku prvku auto | length | %

width

definuje vzdialenosť medzi riadkami

ak použijeme hodnotu number, tak výsledná výška riadku je number

* výška písma normal | number |

length | %

line-height

definuje výšku prvku auto | length | %

height

vlastnosť

(65)

Tabu

ľ

ky

Tabu

ľ

ky

určuje, či sa bunky bez viditeľného obsahu majú zobraziť/skryť (platí len v prípade oddeleného orámovania)

show | hide empty-cells

Určuje vzdialenosť medzi orámovaním susedných buniek. Prvá hodnota určuje vzdialenosť v horizontálnom a druhá vo vertikálnom smere. Ak je zadaná len jedna hodnota, je použitá pre oba smery.

length length |

length

border-spacing

definuje správanie orámovania tabuľky collapse | separate border-collapse popis, význam hodnoty Vlastnosť

(66)

Vz

ť

ah medzi

Vz

ť

ah medzi

border, padding,

margin

n

n BorderBorder na obrázku je modrý pásik. Je to viditena obrázku je modrý pásik. Je to viditeľľný okraj ný okraj

elementu.

n

n PaddingPadding je vzdialenosje vzdialenosťť obsahu elementu od vnútorného obsahu elementu od vnútorného

okraja.

n

n MarginMargin je vonkajší okraj elementu, je vonkajší okraj elementu, ččiže ako blízko môžu ísiže ako blízko môžu ísťť

okolité elementy. Na obrázku je to vzdialenosť okraja

(

(67)

Border

n

n Dá sa nastaviDá sa nastaviťť farba, šírka a farba, šírka a štýl orámovania štýl orámovania

ľubovoľného elementu

definuje šírku okraja (pre všetky štyri okraje)

thin | medium | thick | length

border-width

double | groove | ridge | inset | outset border-style

definuje farbu orámovania (pre všetky štyri okraje)

color

border-color

(68)

Border

n

n Môžeme nastaviMôžeme nastaviťť okraj pre celý element okraj pre celý element

naraz, alebo pre jednotlivé okraje naraz, alebo pre jednotlivé okraje

samostatne (

samostatne (borderborder--toptop, , borderborder--rightright, , border

border--bottombottom, , borderborder--leftleft))

n

n Poradie hodnôt je: hrúbka štýl farba, napr. Poradie hodnôt je: hrúbka štýl farba, napr.

border

border--bottombottom: 5px : 5px dotteddotted #FF0000;#FF0000;

(69)

Padding

n

n VzdialenosVzdialenosťť obsahu prvku od jeho vnútorného obsahu prvku od jeho vnútorného

okraja.

n

n Nastavujeme buNastavujeme buďď jednotlivé vlastnosti jednotlivé vlastnosti

samostatne, alebo naraz všetky okraje pomocou

združenej vlastnosti

združenej vlastnosti paddingpadding

vzdialenosť od horného | pravého | dolného |

ľavého okraja prvku

length | % top | padding-right | padding-bottom | padding-left popis, význam hodnoty vlastnosť

(70)

Margin

n

n Vonkajší okraj elementu.Vonkajší okraj elementu. n

n Nastavujeme buNastavujeme buďď jednotlivé vlastnosti jednotlivé vlastnosti

samostatne, alebo naraz všetky okraje pomocou

združenej vlastnosti

združenej vlastnosti marginmargin

(71)

Tabu

ľ

ky

Tabu

ľ

ky

n

n rozdiely pri nastavení rozdiely pri nastavení borderborder--collapsecollapse n

n pri nastavení pri nastavení borderborder--collapsecollapse: : collapsecollapse je je

zbytočné nastavovať

zbytočné nastavovať borderborder--spacingspacing

n

n borderborder--spacingspacing nefunguje v IEnefunguje v IE n

n Pozor na rozdiel pri definovaní okraja Pozor na rozdiel pri definovaní okraja

tabuľky len pomocou HTML (

tabuľky len pomocou HTML (borderborder=="5") a "5") a pomocou CSS (nestačí definovať okraj len pomocou CSS (nestačí definovať okraj len

pre tabuľku, musí sa definovať aj pre pre tabuľku, musí sa definovať aj pre

jednotlivé bunky) jednotlivé bunky)

(72)

Ď

akujem za

_{akujem za}

pozornos

ť

pozornos

ť

J

_J

(73)

8. CSS

–

_–

doplnok,

_doplnok,

HTML

–

_–

formuláre

_formuláre

8.11.2005 8.11.2005

(74)

Obsah

n

n VlastnosVlastnosťť displaydisplay n

n Ako zmeniAko zmeniťť (nielen) odkazy (nielen) odkazy n

(75)

Odkazy ako riadky/bloky

n

n Odkaz (element Odkaz (element <a>)<a>) je riadkový elementje riadkový element n

n Ak chceme maAk chceme maťť napr. odkazy v navigácii v napr. odkazy v navigácii v

jednotlivých riadkoch, musíme ich oddeliť

pomocou

pomocou <<brbr/>/>, alebo da, alebo daťť do do

samostatných blokov, napr. pomocou

samostatných blokov, napr. pomocou <<divdiv> > alebo

alebo <<pp>.>.

n

n ViViďď. Úlohy . Úlohy čč. 3 a 4. 3 a 4

(76)

Vlastnos

ť

Vlastnos

ť

display

_display

n

n Určuje, či a ako sa má element zobraziťUrčuje, či a ako sa má element zobraziť n

n Môžeme použiť/nastaviť ľubovoľnému elementu Môžeme použiť/nastaviť ľubovoľnému elementu ––

treba zvážiť dôsledky

n

-item

n

(77)

Odkazy ako bloky

n

n Pomocou vlastnosti Pomocou vlastnosti displaydisplay môžeme môžeme

zmeniť spôsob zobrazenia odkazov. zmeniť spôsob zobrazenia odkazov.

n

n Ak nastavíme odkazu vlastnosAk nastavíme odkazu vlastnosťť

display

display: : blockblock, stane sa z odkazu blokový , stane sa z odkazu blokový element.

element.

n

n Pomocou Pomocou displaydisplay: : nonenone skryjeme elementskryjeme element

(78)

Formulár, element <

form

_form

>

_>

Celý formulár (všetky súčasti) musí byť vnútri

elementu

elementu <<formform></></formform>>. .

spôsob kódovania údajov pri prenose

mimetype

enctype

spôsob odosielania údajov get | post

method

povinný atribút: adresa aplikácie (súboru), ktorá bude formulár spracovávať

url

action

(79)

Element <

input

_input

/

_/

>

_>

n

n Pomocou elementu Pomocou elementu <<inputinput>> môžeme môžeme

definovať viacero prvkov formulára. Prehľad definovať viacero prvkov formulára. Prehľad

atribútov je v

(80)

Element <

input

_input

/>

_/>

adresa súboru (má význam len pri type=“image“)

url

src

ak je nastavený, hodnota elementu sa nedá meniť

readonly readonly

určuje, či prvky „radio“, „checkbox“ sú zaškrtnuté checked

checked

definuje maximálny počet znakov, ktoré môžu byť

hodnotou prvku (len pri type=“password“ a „text“)

number

maxlength

určuje šírku prvku v znakoch (má zmysel len pri type=“password“ a „text“)

počet_znakov

size

hodnota, resp. text elementu (závisí od elementu)

value

value

definuje unikátne meno (povinný atribút pre typ text, checkbox, radio, button, file, image, password, hidden)

meno_položky

name

definuje typ elementu formulára text | checkbox | radio

| button | file | image | password | submit | reset | hidden type popis hodnoty atribút ukážka: _{08-ukazka-02.html}

(81)

Element <

select

_select

><

_><

/

_/

select

_select

>

_>

n

n Pomocou elementu Pomocou elementu <<selectselect>> môžeme definovať môžeme definovať

rozbaľovaciu

rozbaľovaciu ponuku. Jednotlivé prvky ponuky ponuku. Jednotlivé prvky ponuky definujeme pomocou elementu

definujeme pomocou elementu <<optionoption>>. .

n

n Zoznam atribútov elementu Zoznam atribútov elementu <<selectselect>>: :

definuje, či môžeme vybrať zo zoznamu viacero hodnôt naraz (pomocou CTRL)

multiple multiple

určuje, koľko hodnôt sa má naraz zobraziť

number

size

definuje unikátne meno elementu

meno_položky

name

(82)

Element <

option

_option

><

_><

/

_/

option

_option

>

_>

daný prvok (hodnota) je vybraný (označená) selected

selected

hodnota elementu, resp. vybranej položky hodnota value popis hodnoty atribút <

<selectselect name="name="zalubyzaluby" size="4" multiple="multiple">" size="4" multiple="multiple"> <

<optionoption value="sport">value="sport">športšport</</optionoption>> <

<optionoption value="value="hudbahudba">">hudbahudba</</optionoption>> </

</selectselect>>

(83)

Element

<

textarea

_textarea

><

_><

/

_/

textarea

_textarea

>

_>

n

n Pomocou elementu Pomocou elementu <<textareatextarea>> môžeme môžeme

definovať viacriadkové textové pole. Medzi jej

začiatočnou a

začiatočnou a konečnou značkou je hodnota konečnou značkou je hodnota elementu.

elementu.

definuje spôsob zalamovania textu

soft

soft | | hardhard | | offoff

wrap

definuje unikátne meno elementu

meno_položky

name

povinný atribút: definuje počet riadkov

number

rows

povinný atribút: definuje počet stĺpcov

number cols popis hodnoty atribút ukážka: _{08-ukazka-02.html}

(84)

Element <

button

>

</button>

n

n Pomocou elementu <Pomocou elementu <buttonbutton> môžeme definovať > môžeme definovať

„lepšie“ tlačidlo. Na rozdiel od značky <

„lepšie“ tlačidlo. Na rozdiel od značky <inputinput//> > však tento element ponúka oveľa viac možností

však tento element ponúka oveľa viac možností

(pomocou CSS). Hodnotou môže byť nielen text,

ale napríklad aj obrázok.

hodnota tlačidla hodnota

value

typ tlačidla button | reset | submit

type

definuje unikátne meno tlačidla

meno_položky name popis hodnoty atribút ukážka: _{08-ukazka-03.html}

(85)

Ak chceme odosla

ť

formulár

Ak chceme odosla

ť

formulár

n

n Musí byMusí byťť definované tla definované tlaččidlo typu idlo typu submitsubmit

n

n <input name="submit" type="submit" <input name="submit" type="submit"

value="

value="OdošliOdošli" />" />

n

n <button value="<button value="tlačidlotlačidlo 1" 1"

type="submit">

(86)

Ako

štruktúrova

_{štruktúrova}

ť

_ť

formuláre

_formuláre

n

n Element Element <<fieldsetfieldset></></fieldsetfieldset>> –– zobrazí zobrazí

orámovanie okolo elementov, ktoré sú orámovanie okolo elementov, ktoré sú

vnútri

vnútri ((blokový elementblokový element))

n

n Popis Popis ččasti formulára asti formulára <legend></legend><legend></legend>

(musí byť vnútri

(musí byť vnútri <<fieldsetfieldset>>))

(87)

Ď

akujem za

_{akujem za}

pozornos

ť

pozornos

ť

J

_J

(88)

10

10 .

_.

JavaScript

_JavaScript

–

_–

úvod

_úvod

2

(89)

Obsah

n n ČČo je o je JavaScriptJavaScript n n Udalosti Udalosti n

n Ako vložiAko vložiťť JavaScriptJavaScript na stránkuna stránku n

n Dialógové oknáDialógové okná n

(90)

Č

o je

_{o je}

JavaScript

_JavaScript

n

n SkriptovacíSkriptovací programovací jazykprogramovací jazyk n

n Vyhodnocuje sa na strane klienta (webového Vyhodnocuje sa na strane klienta (webového

prehliadača)

n

n Java Java ≠≠ JavaScriptJavaScript n

n Jednotlivé príkazy jazyka sa oddeJednotlivé príkazy jazyka sa oddeľľujú ujú

bodkočiarkou.

n

n Môžu byMôžu byťť písané v písané v samostatných riadkoch, alebo samostatných riadkoch, alebo

môžeme napísať viacero príkazov do jedného

riadka

riadka. .

n

n Hodnoty textových parametrov môžeme písaHodnoty textových parametrov môžeme písaťť

v

(91)

JavaScript

je jazyk:

_{je jazyk:}

n

n interpretovaný interpretovaný –– nemusí sa kompilovanemusí sa kompilovaťť n

n objektový objektový –– využíva objekty webového využíva objekty webového

prehliadača a

prehliadača a zabudované objektyzabudované objekty

n

n závislý na prehliadazávislý na prehliadačči i –– funguje ale vo funguje ale vo

väčšine prehliadačov väčšine prehliadačov

n

n casecase--sensitivesensitive –– záleží na vezáleží na veľľkosti písmen kosti písmen

príkazov, premenných, konštánt apod. príkazov, premenných, konštánt apod.

n

(92)

JavaScript

n

n Funguje len vo webovom prehliadaFunguje len vo webovom prehliadaččii n

n PoužívatePoužívateľľ si môže vo svojom webovom si môže vo svojom webovom

prehliadači

prehliadači JavaScriptJavaScript zakázazakázaťť..

n

n Existujú rôzne verzie jazyka aExistujú rôzne verzie jazyka a prehliadaprehliadaččov, ov,

čo vedie k častým chybám.

n

n NeumožNeumožňňuje prístup ku súborom (okrem uje prístup ku súborom (okrem

cookies

cookies) ani k) ani k systémovým objektom.systémovým objektom.

n

n NeumožNeumožňňuje ukladauje ukladaťť údaje (okrem údaje (okrem

cookies cookies)._).

(93)

Udalosti

n

n Niektorým elementom môžeme nastaviNiektorým elementom môžeme nastaviťť

okrem štandardných atribútov aj atribúty, okrem štandardných atribútov aj atribúty,

ktoré sú vlastne udalosťami. ktoré sú vlastne udalosťami.

n

n Presnejšie povedané, definujeme im Presnejšie povedané, definujeme im

"príkazy", ktoré majú nastať pri daných "príkazy", ktoré majú nastať pri daných

udalostiach. udalostiach.

n

n PodPodľľa W3C rozlišujeme štyri skupiny a W3C rozlišujeme štyri skupiny

udalostí

(94)

Udalosti spojené s

myšou

(

kurzorom

_kurzorom

myši)

_myši)

Pri pustení ľavého tlačidla myši onmouseup

Pri odídení myši mimo element onmouseout

Pri prejdení myšou ponad element onmouseover

Pri prechádzaní myšou ponad element (so stlačeným alebo pusteným tlačidlom)

onmousemove

Pri zatlačení ľavého tlačidla myši onmousedown

Pri dvojkliknutí na daný elementu ondblclick

Pri kliknutí na daný element onclick

Popis Udalosť

(95)

Udalosti prislúchajúce prvkom

formulára

Pri zaktívnení elementu – dokáže prijímať vstupy od používateľa onfocus

Pri strate aktivity elementu – opak udalosti onfocus

onblur

Pri zvolení elementu onselect

Pri vymazaní všetkých polí formulára (napr. tlačidlo typu reset) onreset

Pri odosielaní formulára (napr. tlačidlo typu submit) onsubmit

Pri zmene hodnoty elementu onchange

Popis Udalosť

(96)

Vkladanie

JavaScriptu

na

stránku

n

n Prakticky hocikde do stránkyPrakticky hocikde do stránky, , musí zostamusí zostaťť

zachovaná korektnosť webového zachovaná korektnosť webového

dokumentu. dokumentu.

n

n SkriptySkripty môžeme napísamôžeme napísaťť priamo do priamo do htmlhtml

kódu, alebo si ich uložíme do externého kódu, alebo si ich uložíme do externého

súboru, ktorý potom pripojíme ku

súboru, ktorý potom pripojíme ku html_html súboru.

(97)

Spôsoby vkladania na stránku

n

n Element Element <script>…</script><script>…</script> n

n Do udalosti elementuDo udalosti elementu, , naprnapr. .

<a

<a hrefhref==""xyz.htmlxyz.html"" on

onmmouseouseooverver==""javascriptjavascript: : window.alert('pokus

window.alert('pokus');"');">text</a>>text</a>

n

n Do Do adresyadresy odkazuodkazu, napr. , napr.

<a

<a href_href="_="javascript_javascript: _:

window.alert('pokus

(98)

Element

<script></script>

_{<script></script>}

nepoužívať

language

(99)

Vkladanie pomocou

<script>

_<script>

n

n <<scriptscript type="texttype="text//JavaScriptJavaScript">">

<!

> </

</scriptscript>>

n

n <<scriptscript type="texttype="text//JavaScriptJavaScript""

src src==""mojeskriptymojeskripty..jsjs"">> <! > </ </script_script>_> ukážka: _{10-ukazka-01.html}

(100)

Vkladanie do udalostí a odkazov

n

n <<inputinput type="submittype="submit" " name="Submitname="Submit" "

value="Odošli

value="Odošli" " onclick="javascriptonclick="javascript: : window.alert

window.alert('Kuk :('Kuk :--))\\nnPoložkuPoložku meno meno nespracovávam');"

nespracovávam');" />/>

n

n <a <a hrefhref="="javascriptjavascript: :

window.alert('pokus

window.alert('pokus');"');">text</a>>text</a>

(101)

Dial

ógové

_ógové

okná

_okná

n

n InformaInformaččné né –– window.alertwindow.alert('text správy')('text správy') n

n PotvrdzovaciePotvrdzovacie –– window.confirmwindow.confirm('text ('text

správy')

n

n Vstupné Vstupné –– window.promptwindow.prompt('zobrazený text v ('zobrazený text v

okne', '

(102)

Prístup ku prvkom formulára

1.

1. Pomocou funkcie Pomocou funkcie

document.getElementById

document.getElementById('('id_elementuid_elementu')') –

– element musí maelement musí maťť definovaný atribút definovaný atribút idid..

2.

2. Pomocou Pomocou

document.meno_formulara.meno_element

u

u –– element musí maelement musí maťť definovaný atribút definovaný atribút name

(103)

Prístup k hodnotám prvkov

n

n document.getElementByIddocument.getElementById('('id_elementuid_elementu')')..valuevalue n

n document.meno_formulara.meno_elementudocument.meno_formulara.meno_elementu.value.value

(104)

Ukážka 04

1.

1. Pri kliknutí do položky Pri kliknutí do položky sumasuma sa zobrazí sa zobrazí

informačné okno (vďaka udalosti

informačné okno (vďaka udalosti onfocusonfocus).).

2.

2. Pri zadaní hodnoty (najlepšie Pri zadaní hodnoty (najlepšie ččíselnej) a íselnej) a

následnom odídení z danej položky následnom odídení z danej položky

(stlačením klávesu

(stlačením klávesu tabtab alebo kliknutím alebo kliknutím

myšou mimo položky) sa aktivuje udalosť

onchange

onchange, ktorá do položky , ktorá do položky medzisúmedzisúččetet pripočíta hodnotu položky

pripočíta hodnotu položky suma_suma. _.

(105)

Ukážka 04

–

_–

nové veci

_{nové veci}

n

n priradenie: v priradenie: v JavaScripteJavaScripte pomocou pomocou == n

n operátor operátor ++ : má : má viacero viacero významov:významov:

–

– na na ččíslach, znamená síslach, znamená sččitovanieitovanie –

– na rena reťťazcoch, znamená zreazcoch, znamená zreťťazenie (podobne azenie (podobne ako napríklad v programovacom jazyku

ako napríklad v programovacom jazyku DelphiDelphi) )

n

n príkaz príkaz Math.roundMath.round()(): "pretypujeme" na : "pretypujeme" na

číslo. Príkaz v skutočnosti zaokrúhľuje.

(106)

Ď

akujem za

_{akujem za}

pozornos

ť

pozornos

ť

J

_J

(107)

11

11 .

_.

JavaScript

_JavaScript

(2)

₍₂₎

2

(108)

Obsah

n

n Premenné Premenné n

n Jednoduchá práca sJednoduchá práca s rereťťazcamiazcami n

n Vlastné funkcieVlastné funkcie n

n Podmienka IFPodmienka IF n

n Cyklus FORCyklus FOR n

n Logické operátoryLogické operátory n

(109)

Premenné

n

n Môžeme vytváraMôžeme vytváraťť prakticky kdeko prakticky kdekoľľvek.vek. n

n Nemusíme ich deklarovaNemusíme ich deklarovaťť, sta, staččí ich í ich

jednoducho používať. jednoducho používať.

n

n Napr. do zdrojového kódu napíšeme Napr. do zdrojového kódu napíšeme

vysl

vysl==x+yx+y aa premenná premenná vyslvysl sa automaticky sa automaticky vytvorí.

vytvorí.

n

n Premennú môžeme definovaPremennú môžeme definovaťť aj pomocou aj pomocou

kľúčového slova