šimek

popisují „povahu“ obsahu elementu
stylistické značky – určují vzhled elementu při zobrazení
HTML a XHTML
XHTML (eXtensible HyperText Markup Language)
HTML + XML
Zásady
uzavření všech tagů .....,
správně vnořené tagy
malá písmena, hodnoty atributů v uvozovkách
všechny atributy mají hodnotu
správny DOCTYPE
HTML soubory
.htm, .html
Výchozí soubory
index.htm, index.html, default.htm, default.html
DHTML
Dynamické HTML (DHTML) - nejedná se pouze o jedinou technologii
zahrnuje řadu různých technologií a popisuje jak tyto technologie spolupůsobí
umožňuje používat
konvenční HTML, scripty, Objektový Model Dokumentů, absolutní řízení polohy, dynamické styly, multimediální filtry a řadu dalších technologií (umožňují dynamicky měnit vzhled textu a grafiky)
DHTML I
JavaScript
skriptovací jazyk na straně klienta vyvinutý firmou Netscape
přidává interaktivitu a podmíněné chování do web stránek
CSS
Cascading Style Sheets
doplněk k HTML
umožňuje řídit prezentaci dokumentu, včetně barvy, typu písma, zarovnávání textu i obrázků, ..,
Skriptování
Jedna z nejdůležitějších a překvapivých inovací k tradičním Web prohližečům
Pomocí scriptů Web designer může přidávat různou úroveň interaktivity a „inteligence“ ke stránkám, které lze najít pouze v pokročilých aplikacích
Skripty jsou bloky programového kódu, které jsou „vloženy“ do webovských stránek a jsou překládány za běhu
Styly
umožňují snadnější a přehlednější formátování
W3C vytvořilo specielní jazyk CSS (Cascading Style Sheets)
Cascading - “kaskádovací” - hierarchické uplatňování jednotlivých stylů
DOM
Document Object Model
interní (uvnitř prohlížeče) hierarchická organizace prvků v dokumentu
umožňuje manipulaci prvků v dokumentu pomocí scriptů a listů stylů
HTML struktura





.....


...
...


Ukládání souborů na HDD
www adresář
images
logo.gif
vlajka_cz.gif
vlajka_en.gif
inc
styles.css
menu.js
index.html
nabidka.html
HTML editory
WYSIWYG -Macromedia Dreamweaver
-MS FrontPage
-MS Word..
Na úrovni HTML -HomeSite
-EasyPad…
Statická grafika pro WWW
JPEG, GIF, PNG, CSS
Fotografie
.jpg, jpeg
Loga, menu, jednoduchá grafika
.gif, .png
Editory
Macromedia Fireworks
Paint Shop Pro
Adobe PhotoShop
Dynamická grafika pro WWW
Animovaný GIF
JavaScript
JAVA applet
FLASH
Formátování dokumentu pomocí CSS (mouse on)
Zásady pro Web Design
Typ webu
WWW prezentace
Informační server
WWW aplikace
Přehledná grafika
Přehledná a snadná navigace
Hodnota poskytnutých informací
Dodržování nadnárodních standardů
Správně strukturovaný výstup (XHTML)

CSS (Cascading Style Sheets)
Vlastnosti prohlížečů, jejich použitelnost
Archaické -nepodporují CSS, nepodporují JavaScript
Silně zastaralé -nízká podpora CSS a JavaScriptu
Zastaralé -velká podpora nestandardních CSS a JavaScriptu
Moderní -vysoká podpora CSS a JavaScriptu
Supermoderní
Co je CSS
kolekce metod pro grafickou úpravu WWW stránek
doplněk k HTML
umožňuje řídit prezentaci dokumentu, včetně barvy, typu písma, zarovnávání textu i obrázků, ..,
analogie šablon u textových editorů
umožňuje specifikovat vlastnosti objektů samostatně (pomocí šablony) a tu pak aplikovat)
Nástin možností CSS:
Nastavit libovolnou a přesnou velikost písma, prokládání, kapitálky
Udělat odsazení prvního řádku odstavce, zvětšit řádkování
Zrušit nebo zvětšit prázdný prostor po odstavci
Automaticky formátovat nadpisy (například je všechny udělat zelené)
Zvýrazňovat odkazy po přejetí myší
Udělat automaticky grafické odrážky
Určité části textu zneviditelnit, zprůhlednit nebo nezobrazit
Předefinovat graf. význam běžných tagů (například všechno, co je kurzívou, udělat i tučně)
Nastavit pozadí čehokoliv,stránky, tabulky ale třeba i odstavce; pozadí se nemusí opakovat a může mít přesnou pozici!
Umístit nějaký objekt (třeba kus textu) kamkoliv do stránky, může se to i překrývat
Přidat k čemukoli rolovací lišty, oříznout to, orámovat, nastavit okraje
V kombinaci se skripty je dnes CSS nejmocnější zbraň pro "rozhýbání" stránek.
Hlavní význam CSS spočívá v tom, že fungují hodně automaticky, přečemž se vzhled celého webu deklaruje jedním souborem.
Použití CSS (deklarace stylu)
Přímo v textu zdroje u formátovaného elementu pomocí atributu style
Pomocí „stylopisu“ (angl. „stylesheet“) v hlavičce stránky. Stylopis je jakýsi seznam stylů. Je v něm obecně napsáno, co má být jak zformátováno, například že nadpisy mají být zelené. Do stránky se stylopis píše mezi tagy a .
Použitím externího stylopisu – externího souboru *.css, na který se stránka odkazuje tagem
CSS pro značky, třídy objekty
Nadefinování globálního stylu pro HTML značku např. pro značku
Nadefinování třídy
Nadefinování podtřídy
Nadefinování značky ve třídě
Nadefinování objektu
Nadefinování objektu
Syntaxe CSS
Vlastnosti ;
Hodnoty vlastností :
Např:
-vlastnost1: hodnota; vlastnost2: hodnota;
-color: red; font-style: italic;
CSS v HTML tagu
text
text
text
Hodnoty v CSS, I
Klíčové slovo -{border-style:dotted;}
Součástí hodnoty je číslo -reálná čísla, desetinná místa ., záporné č. –
Délková jednotka
-V závislosti na koncovém zobrazení (rozlišení monitoru)
px – pixel – závisí na rozlišení a typu zařízení1px = 1/96palce = 0.27mm
Relativní jednotky
em - velikost velkého písmene M, při aktuální velikosti písma
ex - velikost malého písmene x, při aktuální velikosti písma
Absolutní jednotky
mm – milimetr
cm – centimetr
in – inch – palec (25.4mm)
pt – point – typografický bod (1/72in)
pc – pica (12pt)
Procento
{font-size:80%;}
uri soubor
url("adresa")
Barva
Ostatní
deg (stupně)
rad (radiány)
grad (gradiány)
s (sekunda)
ms (milisekunda)
Hz (Hertz)
kHz (KiloHertz)
Základní míchání barev, RGB
Aditivní barevný model
Monochromatické barvy
R, Red, 700nm
G, Green, 550nm
B, Blue, 470nm
Hodnoty 0 – 255
16 777 216 barev
Míchání pigmentů, CMY
Subtrakční barevný model
Základní barvy – doplňkové barvy RGB
C, cyan - tyrkysová
M, magenta – fialová, purp.
Y, yellow – žlutá
Hodnoty 0 – 255
16 777 216
CMYK -K, black –samostatná kazeta v tiskárnách
Zápis barev v CSS
Hexadecimálně: #b7a8fa, #cc00aa, #b7a, #c0a,..
pojmenování: Black [černá], Silver [stříbrná], Gray [šedá],White [bílá],..
celé číslo, procento: rgb(0,255,0), rgb(0%,100%,0%),…
Paleta bezpečných barev
Web safe palette, Browser safe palette
00, 33, 66, 99, cc a ff
216