internet a zdroje (web design) -...

Internet a zdroje

(web design)

Mgr. Petr Jakubec

Katedra fyzikalnı chemieUniverzita Palackeho v Olomouci

Tr. 17. listopadu 12

19. 11. 2010

(KFC-INTZ) web design 19. 11. 2010 1 / 25

1 Zakladnı zasady tvorby WWW stranekZohlednenı cılove skupiny ctenaru WWW stranekVelikost WWW stranek a hypertextove odkazyPrehlednost a vhodne usporadanı WWW stranekObrazky na WWW strankachAutorska prava na InternetuZaklady typografie – typy pısmaBarvy na WWW strankachBitmapove graficke formaty pro WWW stranky

2 Zakladnı struktura WWW stranekEditory vhodne k tvorbe WWW stranekStandard jazyka HTML v4.01Zakladnı rozvrzenı dokumentu HTMLZakladnı rozvrzenı dokumentu HTMLDefinice struktury HTML dokumentuHlavicka HTML dokumentuTelo HTML dokumentu, jeho zakladnı formatovanıTagy urcene pro obecne formatovanı textuTagy definujıcı styly v HTML dokumentuVlozenı obrazku do HTML dokumentuHypertextove odkazy v HTML dokumentuDoporucena literatura


Planovanı obsahove naplne WWW stranek

1 Definice podstaty informace zverejnovane na strankach (Co?)2 Definice typickeho navstevnıka stranek (Kdo?)3 Definujte sdelenı navstevnıkovi4 Utrıdenı prezentovanych informacı do logickych skupin5 Definice hlavnıch zasad konecne prezentace6 Vlastnı proces tvorby stranek

• technicke moznosti Internetu• prehlednost zdrojaku• zobrazovanı ruznymi prohlızeci

7 Zabezpecenı prubezne aktualizace obsahu stranek


Zohlednenı cılove skupiny ctenaru WWW stranek

• Stranky nabızejıcı prıme sluzby ci prodej, tzv. e-komerce• Stranky prezentujıcı produkty ci sluzby (firemnı stranky)• Informativnı nekomercnı stranky• Ostatnı stranky


Velikost WWW stranek a hypertextove odkazy

1 Typicke rozlisenı monitoru → zohlednit pri tvorbe WWW stranek2 Hypertextove odkazy na WWW strankach

• Plynulost textu• Uspornost pouzitı odkazu• Napoveda


Prehlednost a vhodne usporadanı WWW stranek

1 Obsah prvnı stranky2 Hierarchie temat – pyramidovy system3 System umıstenı odkazu4 Mnozstvı textu a jeho citelnost5 Navigace po strankach, tlacıtko zpet6 Mapa stranek, vyhledavanı klıcovych slov7 Unifikace oznacovanı systemu souboru


Obrazky na WWW strankach

1 Odkazy jako ikony nebo text2 Minimalizace velikosti obrazku3 Vyuzitı parametru pro vymezenı prostoru (HEIGHT, WIDTH)4 Alternativnı popisky (ALT)5 Obrazky na jinych serverech, fotoalba, ikony atd.6 Obrazky na pozadı


Autorska prava na Internetu

1 Bernska umluva (1886)2 Copyright c© × ochranna znamka R© TM.

3 Sırenı autorsky chranenych materialu4 citovat, Citovat, CITOVAT! → citacnı etika5 Co je vlastne chraneno? Autorsky zakon 121/2000 sb.


Zaklady typografie – typy pısma

• Verzalky, minusky, kapitalky• Patkove pısmo (Serif)• Bezpatkove pısmo (Sans-Serif)• Sırka pısma – proporcionalnı a neproporcionalnı• Typ pısma a jeho vyuzitı, rez pısma, stupen a sırka pısma


Kodovanı narodnıch znaku

anglicka abeceda (ASCII tabulka) – 128 znaku (8 bit)vychodoevropske jazyky:

• ISO 8859-2• Windows CP-1250• Unicode UTF-8 (32 bitu)


Barvy na WWW strankach

CMYK a RGB kodovanı

• RGB kodovanı• jmeno: red• hexadecimalnı kod #RRGGBB: #FF0000• procentovy zapis: rgb(100%,0%,0%)

• Typy obrazku pouzitelnych v prostredı Internetu• Bitmapove (rastrove, bodove) obrazky• Vektorove (objektove orientovane) obrazky


Bitmapove graficke formaty pro WWW stranky

obrazek 10×15 cm, 24 bit barevna skala, TIFF bez komprese 2,8 MB

• TIFF – standard, ale ne pro web (LZW, 10×15: 2 MB, 1/3:240 kB)

• GIF – 8 bit barva, bezztratova komprese, animace(380 kB–50 kB)

• JPEG – 24 bit barva, ztratova komprese (75 %: 105 kB–18 kB)• PNG – 8, 24 a 32 bit barva, bezztratova komprese

(1,5 MB–200 kB)


Editory vhodne k tvorbe WWW stranek

WYSIWYG editory

• MS FrontPage 2003

• NVU 1.0

• BlueVoda Website Builder 10.1

Ostatnı editory

• MAX’s HTML Beauty++ 2004

• Notepad++ 5.8.4

• PSPad editor 4.5.4

• HTML-Kit 1.0 Build 292

• AceHTML Freeware Build 9

(Ne)vyhody: WISIWYG editor × textovy editor


Standard jazyka HTML

1 prısny (strict) – pouzıva jen prvky noveho standardu<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

2 prechodovy (transitional) – lze pouzıvat i tzv. zastarale prvky<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN"

http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd>

3 s ramy (frameset) – stejny jako prechodovy rezim a navıc lzepouzıvat prvky pro tvorbu ramu (napr. frame, frameset)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Frameset//EN"

"http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd">

Vyvoj: HTML + XML = XHTML v. 1.1

Zakladnı rozvrzenı dokumentu HTML

• Strukturu a formatovanı dokumentu definujı znacky (tagy)• Znacky jsou parove <html> a </html> a neparove 

• Znacky se mohou vnorovat, ale nesmı se krızit• Znacky majı parametry <html lang="cz">

• Lze vkladat komentare • Nektere znaky lze vkladat pouze neprımo (napr. < je <)

Zakladnı rozvrzenı dokumentu HTML

Znacka Vyznam Atributy<html>. . . </html> Definuje pocatek a konec HTML dokumentu. dir=smer

lang=jazyk

version=retezec

<head>. . . </head> Vymezuje tzv. hlavicku HTML dokumentu.Jejı obsah se nezobrazuje.

dir=smer

lang=jazyk

profile=url

<body>. . . </body> Vymezuje vlastnı obsah (telo) HTML doku-mentu a definuje nektera zakladnı pravidlazobrazenı dokumentu v prohlızeci.

background=url

bgproperties=hodnota

bgcolor=barva

text=barva

link=barva

alink=barva

vlink=barva

leftmargin=hodnota

topmargin=hodnota

Definice struktury HTML dokumentu

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN"

2 "http ://www.w3.org/TR /1999/REC -html401 -19991224/ loose.dtd">

3 <html >

4 <head >

5 .........

6 </head >

7 <body >

8 .........

9 </body >

10 </html >

Hlavicka HTML dokumentu

Znacka Vyznam Atributy<meta> Zakladnı informace o obsahu HTML doku-

mentu pro vyhledavacıho robota. Je soucastıhlavicky HTML dokumentu.

dir=smer

lang=jazyk

charset=jmeno

name=retezec

content=retezec

http-equiv=retezec

scheme=schema

<base> Definuje zakladnı adresu pro vsechny rela-tivnı adresy v ramci dokumentu.

href=url

target=jmeno

<title>...</title> Nazev HTML dokumentu, ktery se zobra-zuje v zahlavı okna prohlızece. Je soucastıhlavicky HTML dokumentu

Hlavicka HTML dokumentu

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN"

2 "http ://www.w3.org/TR /1999/REC -html401 -19991224/ loose.dtd">

3 <html >

4 <head >

5 <title >Koloidnı strıbro - metody jeho prıpravy </title >

6 <meta name=" description" content =" Stranky o strıbru">

7 <meta name=" keywords" content ="koloid , strıbro , prıprava">

8 <meta name=" author" content =" Libor Kvıtek">

9 </head >

10

11 <body >

12 .........

13 </body >

14 </html >

Telo HTML dokumentu, jeho zakladnı formatovanı

Znacka Vyznam Atributy. . . Tucne pısmo. obecne. . . Kurzıva. obecne. . . Podtrzene obecne<tt>. . . </tt> Neproporcionalnı pısmo. obecne. . . Pısmo o bod mensı. obecne<big>. . . </big> Pısmo o bod vetsı. obecne. . . Dolnı index. obecne. . . Hornı index. obecne. . . Definuje zmeny vlastnostı pısma oproti stan-

dardnımu nastavenı pro prıslusnou castHTML dokumentu.

size=hodnota

color=hodnota

name=retezec

face=retezec

<div>. . . </div> Menı zarovnanı a barvu textu uzavrenehomezi znackami.

align

color

<pre>. . . </pre> Prohlızec ponechava formatovanı textuz puvodnıho dokumentu.

Tagy urcene pro obecne formatovanı textu

Znacka Vyznam Atributy. . . Formalnı a fyzicke rozdelenı textu na od-

stavce.obecne

<h>. . . </h> Formalnı a fyzicke rozdelenı textu na nadpisy. align

 Zalomenı radku obecne<hr> graficky oddelovac size

color

noshade

width

align

<center>. . . </center> Centrovanı textu obecne

Tagy definujıcı styly v HTML dokumentu

Znacka Vyznam Atributy<cite>. . . </cite> oznacenı citovane casti textu obecne<code>. . . </code> syntaxe zdrojovych kodu obecne<var>. . . </var> syntaxe zdrojovych kodu obecne<dfn>. . . </dfn> vyznacenı pojmu pro rejstrık obecne<blockquote>. . . </blockquote> vyznacenı dlouhe citace obecne<address>. . . </address> oznacenı adresy obecne. . . kurziva obecne. . . tucny font obecne

Vlozenı obrazku do HTML dokumentu

<img src="obr1.gif"> → obrazek umısteny prımo v adresari<img src="../gifs/obr2.gif"> → obrazek umısteny v adresari gifs vcetnecele adresarove cesty<img src="http://www.neco.cz/gifs/obr3.gif"> → obrazek je zadan s celouURL i adresarovou adresouparametry:• alt="popis"

• align="left|right|top|middle|bottom"

• width="hodnota" (v px ci %) × height="hodnota" (v px)• border="hodnota" (v px)• hspace="hodnota" × vspace="hodnota" (prostor nad a pod v px)

Hypertextove odkazy v HTML dokumentu

tag <a> – anchor (kotva), tj. tag odkazujıcı na jiny souborprıklady pouzitı:

1 <a href="http://www.seznam.cz">seznam, najdu tam co neznam</a>

2 <a href="./bla/blabla/index.html">nejaka blbost</a>

3 <a name="retezec">...</a>

1 Odkaz na <a href ="# strana3">stranu c. 3</a>

2 (probıha nekolik stran textu)

3 .

4 .

5 .

6 <a name ="# strana3"></a>

7 (text pokracuje na tretı strane )

Doporucena literatura (za korunky/zadarmıko)

Za korunky• HLAVENKA, J. Vytvarıme www stranky a spravujeme modernı web site. 7. vyd. Brno:

Computer Press, 2005. 356 s. ISBN 80-251-0801-5.• BROZA, P. Programovanı www stranek pro uplne zacatecnıky. 1. vyd. Praha: Computer

Press, 2000. 172 s. ISBN 80-7226-278-5.• STANICEK, P. CSS Kaskadove styly – Kompletnı pruvodce. 2. vyd. Brno: Computer

Press, 2003. 178 s. ISBN 80-7226-872-4.• SMITH E., Bud. Creating Web Pages for Dummies. 7th Ed. Indianapolis: Wiley

Publishing, Inc., 2004. 387 p. ISBN 0-7645-7327-6.• TITTEL, E. HTML, XHTML & CSS for Dummies. 6th Ed. Indianapolis: Wiley

Publishing, Inc., 2008. 403 p. ISBN 978-0-470-23847-9.

ZadarmıkoCZ

• http://www.jakpsatweb.cz/• http://ewebtvorba.unas.cz/manualy/html/index.php

ENG

• http://www.w3.org/TR/html401/• http://www.w3schools.com/html/


http://www.jakpsatweb.cz/

http://ewebtvorba.unas.cz/manualy/html/index.php

http://www.w3.org/TR/html401/

http://www.w3schools.com/html/

internet a zdroje (web design) -...

Documents