www
World Wide Web
Internet vs WWW
Internet
- sít počítačů
- komunikační protokoly rodiny TCP/IP
WWW (web)
- programy běžící na počítačích
- prohlížeč (browser) - klient
- server - poskytovatel služeb
Prohlížeč
- klient při komunikaci na Webu
- interpretace dokumentů (HTML, zvuk, video)
- spouštění lokálních souborů
- nenáročný na hardware
Nejrozšířenější webové prohlížeče
- Microsoft Internet Explorer 6.0 ^3
- Netscape Navigator 7.1 yty
- Mozilla 1.6 g§ŕ
- Opera 7.23 n0
Server
- program specializovaný na Web
- reaguje na požadavky klientů
- poskytuje soubory (dokumenty HTML, zvuk, video, archivy)
- náročný na hardware
Nejznámější servery
- Apache -IIS
- PWS (Personal Web Server)
- Xitami
WWW - komunikace
Klient
Server
~ä
požadavek
\
odpověď
n^
IP adresa
247.151.32.139
baal.chemi.muni.cz
Id Wide
Standardy mnoha
- značkovací jazyky
- styly
- grafické formáty
- multimédia
- zpracování dokumentů
- multimodální interakce
nsortium
www.w3c.org
oblastí
Standardy na WW
SGML
XML 1.0
HTML 4.01
CSS, XSL
ECMAScript, JavaScript, JScript
w
XHTML 1.0, 2.0
Hypertext
text
formátovací instrukce
odkazy
(HyperText Markup Language) Hypertextový značkovací jazyk
(Extensible HyperText Markup Language) Rozsirovatelný Hypertextový značkovací jazyk
Značkvv XHTML
- určují formátovací struktury v dokumentu
- pisi se malými písmeny
Párové značky
text uvnitř značky
Toto je odstavec v HTML.
Prázdné (nepárové) značky
Atributy
určují další vlastnosti značkovaných objektů pisi se malými písmeny hodnota uzavřená v závorkách
Znakové entity
zobrazení speciálních znaků
řecká písmena, matematické značky, speciální diakritika
&nazev_entity;
& "
nedělitelná mezera
Vnořovaní značek (nestin
Správná struktura
.... ... ...
H 2 O
Spatná struktura - knzeni značek
.... ... ...
H 2
O
Struktura dokumentu
Deklarace typu
obsah hlavičky dokumentu
vlastní vecný obsah dokumentu
Hlavička
Tělo
Hlavička dokumentu
metainf ormace o dokumentu
vazby na vnější zdroje
skripty
vnitřní formátovací styly
kumentu
Vlastní obsah dokumentu
- formátovaný text
- obrázky
- tabulky
- formuláře
- skripty
Můj prvni HTML dokument
Ahoj, světe!
Základni formátovací značky
Blokové elementy
nadpisy 1.-6. úrovně ,...,
odstavec
Řádkové elementy Ostatní
v r r
tucne písmo kurzíva
v ŕ r
zvýraznené písmo horní index dolní index
zalomení řádku vodorovná čára
Nadpisy
- párové značky: Nadpis 1. úrovně
- 6 úrovní: hl, h2, h3, h4, h5, h6
Struktura nadpisů
Správně
l. Lineárni algebra
l.l Základni struktury
l.l.l Cyklické grupy
Špatně
l Lineárni algebra
l.l Základni struktury
l.l.l Cyklické grupy
Seznamy
- výčty položek různého typu
číslovaný
s odrazkami
seznam definic
nam číslovaný
prvni
druha
<\i>treti
1. prvni
2. druha
nam s od
Kód
prvni
druha
<\i>treti
razkami
Zobrazeni
první druha
treti
nam def
Kód
prvni termin
obsah 1
druhy termin
obsah2
Zobrazeni
prvni termin
obsáhl druhy termin
obsah2
použití v elementech ul, ol
Typ odrazek/číslování
list-style-type: disc •
circle o
square ■
decimal lower-alpha upper-alpha lower-roman
Obrázek jako odrážka
1 2 3
-1-/ *-r *->/ ••
a, d, c,... A, B, Q
• • • • • •
i, u, m,..
upper-roman I, II, III,
list-style-image:url(cesta/ohrazek)
list-style-image: url(http://images/bullets/odrazka.gif)
Tabulkv - základní st
tělo tabulky
Slučování buněk v ra
...
. . .
Slučování buněk ve sloupci
...
. . .
< tdX / tdX tdX / tdX tdX / td>
Atributy značky
border
šířka rámečku
bordercolor
barva rámečku
cellpadding
vzdálenost textu v buňkách od rámečku
cellspacing vzdálenost mezi buňkami
border
text v buňce
4 cellpadding
cellspacing
Tabulky - styly C
použití pro elementy table, td, th
border-style
dotted , inset, dashed, outset, double, solid, groove, ridge, none
border-width
border-left-width border-right-width border-top-width border-bottom-width
border-color
styl rámečku
šířka rámečku
barva rámečku
Obrázky
border
width
Odkazy
Kl ikací odkaz
text odkazu
Kotva v dokumentu
Cíl odkazu
URL_dokumentu # jmeno_kotvy http://baal.chemi.muni.ez/pokus.html#news
URI
Uniform Resource Identifier
identifikace zdrojů (souborů) na Webu
URL
Uniform Resource Locator http://www.w3c.org/html/index.html
protokol IP adresa cesta k dokumentu
absolutní
baalxherni.rnunixz/~carduel/vyuka/rnult2/htrnl/pic-sarnple.htiril
relativní
výuka docliitml
mult2
htm pic-sample.html
Odkazy na kotvy
druhy.html
Speciální odkazy
Otevření cíle v novém okne
Nové okno
Otevření poštovního klienta
Napište mi
Formátovaní oaitazu
Pseudotridy
ailink a: visited aihover a: active
dosud nenavštívené odkazy
již navštívené odkazy
odkazy, nad nimiž přejíždí ukazatel
pro vybíraný odkaz.
Pořadí a:link, aivisited, aihover, aiactive.
a:link {color: #FF0000; text-decoration:none} a:visited {color: #00FF00; font-weight:bold} a:hover {color: #FF00FF} a:active {color: #0000FF}
Rámce
index.html
navigace
obsah
navig.html
obsah .html
Rámce - složitější konstrukce
logo navigace obsah
Odkazy mezi
logo navigace [odkazl]^ obsah - [odkaz2]
rámci
[odkazl]
[. . •]
[odkaz2]
[. . •]
src
width
MDL Chime
vkládání modelů molekul - mol, pdb
display3d
wireframe sticks ball&stick spacefill
bgcolor 3 d
black white #rrggbb
spinX, spinY, spinZ
//on//
spinY="30
Applety
programy v jazyku JAVA rozšíření funkcionality prohlížeče animace, reklamní proužky, hry, aplikace
Koncovky souborů
*.java - zdrojové soubory, třídy *.class - zkompilované soubory *.jar - archívy zdrojové soubory
Applety
Marvin
vkládání molekul - mol, pdb, cml, xyz
Parametry:
jméno
hodnota
mol
cesta k souboru .mol
EquationDisplay
zobrazování rovnic
Parametry:
jméno
hodnota
formula
zakódovaná rovnice
Formulare
aktivní a pasivní ovládací prvky
rvkv formula
w ~\r
Prvek
textové pole tlačítko přepínač zatrhávací pole
type
text button radio checkbox
value
obsah textového pole nápis na tlačítku
rvkv formula
w ~\r
Víceřádkové vstupní pole
Výberový seznam
Události
onmouseover ukazatel přejíždí nad prvkem onmouseout ukazatel opouští prvek
onclick
kliknutí na prvek
onmouseout="this . style. color=f black f " >
Modelová aolikace
I
/
/
Javascript - operátory a funkce
Aritmetické operátory
+ -*/
Funkce
Math.sin(cislo) sinus
Math.cos(cislo) kosinus
Math.tan(cislo) tangens
Math.exp(cislo) ecisl°
Math.log(cislo) logaritmus ln(cislo)
Math.sqrt(cislo) druhá odmocnina
Math.pow(x,y) mocnina xy
Math.round(cislo) zaokrouhlení
kosinus tangens
vcislo
logaritmus ln(cislo) druhá odmocnina
mocnina x-
zaokrouhlení
U místová n i pomoci CSS
position: relative I absolute
Odsazení top
bottom
left
right
od horního okraje od dolního okraje od levého okraje od pravého okraje
absolute relative
okna předešlého elementu
hl#hlavni {position: absolute; top: 2em} sub {position: relative; left: -0.5em}
Umistovani - príklad
hlavička
Znakové entity
zobrazení speciálních znaků
řecká písmena, matematické značky, speciální diakritika
&nazev_entity;
& "
nedělitelná mezera
Vnořovaní značek (nestin
Správná struktura