Ing. Martin DOSEDLA, KTeIV PdF MU Brno XHTML a tvorba webu 1. Historie a základní struktura HTML – HyperText Markup Language - HTML 0.9 – první verze 1991 - Značkovací jazyk pro zápis dokumentů na webu - Vkládání do textu obrázků, hypertextových odkazů, logické členění a zvýraznění - Existuje několik verzí. Poslední je HTML 4.01. - HTML se dále nevyvíjí. HTML se skládá ze značek: „Tagy“ – značky. Slouží ke strukturování dokumentu (párové a nepárové) text název tagu ukončení párového tagu Př.: tučné písmo Pozor! – nepárový tag by měl být ukončen lomítkem Základní struktura stránky záhlaví stránky vlastni zobrazeny text Atributy oddělené mezerami Ing. Martin DOSEDLA, KTeIV PdF MU Brno XML - Extensible Markup Language - Univerzální jazyk pro předávání strukturovaných informací. - XML definuje jen způsob strukturování dokumentu (syntaktická pravidla). - Nedefinuje použitelné značky. - Použitelné značky a další pravidla záleží již na konkrétní aplikaci XML. - Výhodné pro automatizované zpracování. XHTML - Extensible HyperText Markup Language - Jedná se o aplikaci XML. - Na první pohled podobné HTML (použitelné tagy z něj výchází) - Novější a modernější. - Existuje několik verzí (1.0, 1.1, a druhů Strict, Trasitional, Frameset) - Přísnější pravidla pro zápis. XHTML 1.0 Strict čistě strukturální značkování, neobsahuje žádné značky spojené s formátováním vzhledu XHTML 1.0 Transitional povoluje atributy pro formátování textu a odkazů v elementu body a některé další atributy XHTML 1.0 Frameset používa se při použití rámců pro rozdělení okna prohlížeče na dvě nebo více částí XHTML 1.1 Modulově založené, podobné 1.0 strict, ale umožňující rozšíření… Některé základní odlišnosti od HTML: - Všechny atributy tagů mají hodnoty v uvozovkách - Zákaz křížení tagů ( text - Všechny tagy a atributy jsou malými písmeny (case sensitive) - Nepárové tagy končí lomítkem např.:
- Párové tagy jsou párové povinně - Všechny atributy musejí mít hodnotu - Mírně odlišný zápis javascriptů a stylů o - Dokument má mít XML prolog. - Dokument požaduje správný doctype. - Využívání HTML entit pro spec. znaky o Např.: & o http://www.webtvorba.cz/xhtml/html-entity.html Ing. Martin DOSEDLA, KTeIV PdF MU Brno Příklad základní stránky: Titulek stránky

Text ...

Deklrace xml s využitým kódováním DTD – deklarace typu dokumentu (zde XHTML 1.0 Trans.) Základní tag HTML s atributy pro jmenný prostor, … Sekce hlavičky s titulkem a metatagem pro kódování (kompatibilita) Tělo dokumentu (zde s jedním odstavcem) Ing. Martin DOSEDLA, KTeIV PdF MU Brno Poznámka ke kódování češtiny: ASCII tabulka 0-127 – popisuje základní znaky 128 – 255 – použitelné pro národní abecedy http://cs.wikipedia.org/wiki/Ascii Nejpoužívanější pro češtinu: iso-8859-2 - ISO norma (Latin 2) pro východo(středo)evropské jazyky. Standard hlavně na UNIXu (Linuxu) windows-1250 - Windows kódování (nedoporučuji) UTF-8 - Univerzální kódování Unicode Validita kódu: HTML i XHTML jsou standardy W3C a norma použitá v záhlaví a definici dokumentu by tedy měla být také v dokumentu striktně dodržována a používána. Psát kódy podle norem (validní), možno ověřit na internetu http://validator.w3.org/ … a v praxi: - ne každý validní kód správně zobrazí i webový prohlížeč - ne každý nevalidní kód zobrazí nesprávně - různé prohlížeče různé chování na stejném kódu (i validním) - viz. Např. ACID3 test pro podporu standardů v prohlížeči o http://acid3.acidtests.org/ JAK a v ČEM? - Editory o WYISWYG vs. klasické (strukturní) o PsPad, Poznámkový blok, PHPeditor, HomeSite, Emacs, Dreamweaver, .. - www prohlížeče o kontrolovat zobrazení v nejpoužívanějších! (IE, Firefox, Opera, ...) - další sw o ftp klient, grafické aplikace, … Pozn.: Doporučuji používat krátké názvy souborů bez diakritiky a mezer! Pozn.2: Hlavní soubor webu se většinou jmenuje index.html (nebo obdobně). Ing. Martin DOSEDLA, KTeIV PdF MU Brno 2. XHTML tagy – základní přehled text - párový xhtml tag (pozor xhtml je case-sensitive) Podle normy jsou všechny xhtml tagy párové, ale u tagů kde není třeba aby obsahoval nějaký text je možné zápis zkrátit (budeme jim říkat tagy „nepárové“) - “nepárový” tag Uvnitř tagu nemusí být jen text, ale i další tag. Tagy se však nesmí vzájemně křížit! cokoli nebo nic …text… cokoli nebo nic Atributy tagů: - Tagy mohou dále mít různé atributy. - Atributy slouží k určení vzhledu tagu nebo k dodání další funkční informace pro tag. - Striktnější verze xhtml nedovolují atributy na formátování vzhledu dokumentu. - Atributy se zapisují za název počátečního tagu - V případě více atributů se oddělují mezerou - Každý! atribut má svoji hodnotu – hodnota je zapsána v uvozovkách text Pozn.: Sekvenci od začátku tagu po jeho ukončení nazýváme elementem xhtml. - Blokové – zalomený blok – např. odstavec - Inline – uvnitř textu nezalomené - Nahrazované – nahrazené obsahem, např. obrázek - Není obecně možné vkládat libovolný tag do libovolného – např. do inline blokový Pozn.: Formátování kódu pro lepší přehlednost! ENTER v kódu se jako odřádkování při zobrazení neprojeví! Veškeré sekvence mezer jsou brány jako jedna mezera …. Ing. Martin DOSEDLA, KTeIV PdF MU Brno Přehled vybraných (X)HTML tagů Opravdu velmi stručný přehled některých tagů. Pro další informace doporučuji např.: http://www.jakpsatweb.cz/html/ U mnoha tagů lze použít různé atributy: border, bordercolor, height, width, ….. Spoustu atributů na formátování vzhledu a některé tagy je lepší nepoužívat (zastaralé) a nahradit CSS (kaskádovými styly). Z tohoto důvodu nejsou formátovací atributy příliš zmiňovány. Základní tagy – viz. příklad výše: Tagy v sekci HEAD: <link><script> Př.: <title> titulek zobrazený jako název okna/záložky Meta tagy: Popisek stránky Obsah - čeština Klíčová slova, autor, pro vyhledávače, google, … Vložení externího souboru s definicemi CSS stylů (trochu předbíháme): Ing. Martin DOSEDLA, KTeIV PdF MU Brno Skripty Poznámky: Zakomentovaný kód nebude zobrazen. Také vhodné jako popisky u složitějších konstrukcí (ne že by v XHTML mohlo být něco složitějšího) Formátování odstavců: - oddělení části textu s jiným formátováním
- blok textu (zalomuje řádek před i za)

- odstavec (vytváří před a za mezeru)

…

- nadpis 1. – 6. Úrovně – předdefinované velikosti
- odřádkování spíše
- vycentrování 
 - předformátovaný text

 - horizontální čára
Formátování textu (nahrazovat CSS):
 - tučně
 - kurzíva
 - podtrženo
 - indexy
 - fonty – ne XHTML
Ing. Martin DOSEDLA, KTeIV PdF MU Brno
Seznamy

     - nečíslovaný seznam (unordered list)

  • bod 1
    •  - položka seznamu (list item)

  • bod 2
    • 



     ... 
 - číslovaný seznam – položky jsou opět 
  • 

     - seznam definic

     definiční termín
    

    definice ….
    

     … 
    

     … 
    
…

Odkazy:
parametry: href, target, title
Odkaz na www umístění:
odkaz
href značí cíl, psát včetně protokolu
Absolutní odkaz:
odkaz
Relativní odkaz:
odkaz
odkaz
odkaz
- .. o úroveň výše
Zobrazený text
(může být i jiný tag
např. pro obrázek)
Ing. Martin DOSEDLA, KTeIV PdF MU Brno
- . aktuální složka
Odkaz na místo v dokumentu:
text
- U libovolného tagu použijeme libovolné pojmenování, na které se následně budeme
odkazovat. Po odkázání se zobrazí přímo ta část v dokumentu (odrolování záleží na
délce obsahu)
začátek
začátek
Další atributy tagu a:
title=“titulek zobrazený po najetí myši na odkaz“
target=“_blank“ - otevření stránky v novém okně
Atribut target lze dále použít k otevírání v různých rámcích (částech stránky) viz. níže.
Tabulky:
 - tabulka
 - nadpis tabulky
 - řádek
 - hlavičková buňka
 - buňka tabulky

     nadpis 
    12

    

    
aaabbb

    

    
atributy colspan=“n“ a rowspan=“n“ slouží ke sloučení n (počet) buněk
Obrázky:
místo obrázku
atributy:
src - adresa zdroje obrázku, pozor na pojmenování a příponu
alt - alternativní text - povinné
Ing. Martin DOSEDLA, KTeIV PdF MU Brno
width, height - šířka, výška – vhodné zadávat, nahrazovat CSS, používat spíše
reálnou velikost – tedy velikost předem upravit v grafickém editoru
border, ….
Klikací mapy:




Parametry area:
shape - vzhled oblasti pro kliknutí: rect, poly, circle
coords - souřadnice podle typu oblasti, 0,0 je vlevo nahoře
Samotný obrázek s použitou mapou:
““
Vkládání objektů:
jen některé příklady pro doplnění mimo probíranou látku






Rámce:
Umožňují rozdělit stránku na několik podstránek (např. levé menu s navigací a vpravo
obsah). Nebo umožňují vložit na určité místo stránky rámec s jinou stránkou. Dříve hojně
používané, dnes nevhodné díky nedostatkům při navigaci, indexování vyhledávači, tisku,
apod.



 když to nejede a co se vypisuje v některých
vyhledávačích… 

Atributy frameset: cols, rows, border, …
Atributy frame: name, src, scrolling, noresize, …
 - odkaz do rámu
Plovoucí rámce:
Nerozdělují celou stránku, ale na jistém místě ve stránce umožňují vložení jiné stránky.
O něco vhodnější využití.


Formuláře:
Vytvoření formuláře je velmi snadné. Pro jeho zpracování se však často používají různé
(serverové) skripty – php apod.

    
… zde jsou jednotlivé prvky formuláře

    
Ing. Martin DOSEDLA, KTeIV PdF MU Brno
Atributy: action, method, accept-charset, …
Základní prvky formulářů:
 - vstupní pole (vypadá různě podle atributů)
atributy: type, name, value, disabled, readonly, (size, maxlength)
Atribut type (jeho hodnota):
- text
- password
- hidden
- radio
- checkbox
- submit
- reset
- file
Př.:


Atributy select: name, multiple, size, disabled
Atributy option: value, selected
Pozn. 
 - textové vstupní pole
Atributy: name, cols, rows, disabled, readonly, …
Další prvky formulářů:
label, optgroup, button, …
Ing. Martin DOSEDLA, KTeIV PdF MU Brno
3. CSS – kaskádové styly
CSS - Cascading Style Sheets
- CSS (Cascading Style Sheets) je soubor metod sloužících ke grafické úpravě
(X)HTML dokumentu.
- Nahrazuje některé HTML tagy a jejich atributy a přináší přehlednější a efektivnější
způsob ke stylování dokumentu.
- Pro opravdové ovládnutí vzhledu HTML dokumentu je jejich využití prakticky
nutností.
- Jakékoliv statické formátování je zvládnutelné pomocí CSS
- Novější verze (X)HTML vlastní atributy tagu pro stylování nepřipouštějí a počítají
v tomhle ohledu s využitím CSS.
- I CSS patří pod W3C a je možné ověřit validitu vytvářených dokumentů.
- Většina vlastností se dědí níže strukturou HTML dokumentu
Základní zjednodušená CSS syntaxe:
Další podrobnosti jsou uvedeny níže
Název_vlastnosti1: hodnota;
Název_vlastnosti2: hodnota1 hodnota2; Název_vlastnosti3:
hodnota;
CSS lze v dokumentu využít několika způsoby:
Všechny tři možnosti lze samozřejmě i kombinovat, ale u složitějších stánek je potřeba si
v tom zavést určitý pořádek. Vhodnější je pak mít veškeré styly externě v souboru
(souborech) a oddělit tak obsah od formy …
1) Zápisem atributu „style“ u jednotlivých tagu – jednoduchý a rychlý způsob pokud
chceme jednotlivé některé části nastavit, ale nepřehledné a u opakujících se použití
téhož stylu přímo nevhodné.
Ing. Martin DOSEDLA, KTeIV PdF MU Brno
Jako atribut prakticky jakéhokoliv tagu je možné zapsat style=““ a v uvozovkách
uvést jednotlivé vlastnosti pro CSS. Pozor - uvnitř uvozovek atributu style se zapisuje
CSS kód (a NE HTML) - syntaxe.

     …

    
2) Stylopisem v hlavičce HTML dokumentu. Styly pro celý dokument (soubor) jsou
uvedeny mezi tagy . Uvnitř párového tagu (ne atributu) 

2) Stylopisem v externím souboru. Jedná se o soubor, kde jsou zapsány (všechny)
styly, které se budou opakovaně využívat v celé webové aplikaci a tento soubor se
tagem „link“ připojí k html dokumentu. Tento způsob je asi nejvýhodnější, chcemeli
mít všechny styly pro aplikaci pohromadě a v jednotlivých souborech aplikace se
pak na ně můžeme jen odkazovat a jinak již používat (X)HTML bez CSS.



Rámeček kolem odstavce, šířka odstavce
Dva definované styly pro
odstavec (div) a vlastní
pojmenování. Pozor zde
jsou v syntaxi složené
závorky.
Ing. Martin DOSEDLA, KTeIV PdF MU Brno
(jiné varianty:)


Vlastní zápis stylů (u možností 2) a 3)):
div { border: 2px white; width: 180px }
/* nadefinuje styl pro tag div, tag div teď bude vždy vypadat, tak jak jej nastavíme */
Nemusíme se však omezovat pouze na selektory v podobě existujících XHTML tagů, ale
použít vlastní pojmenování:
.mujstyl { text-color: red; text-decoration: underline; }
/* definujeme si vlastní třídu a tu pak budeme používat podle potřeby (přiřazovat ji
jednotlivým tagům*/
(tag.mujstyl { … } – aplikuje se jen na elementy tag)
Použití vlastní třídy:


Pozn.:
Místo třídy můžeme definovat i identifikátor - #mujstyl { … }
Přiřazení je pak přes atribut tagu: id=“mujstyl“
Obecně je jedno co použijete (doporučuji třídy) rozdíly jsou hlavně při zpracovávání
skriptů a v tom, že id je unikátní pro jeden element na jedné stránce
Deklarace pro více elementů současně:
html, body { height: 100%; }
Kontextová deklarace (pro tag a uvnitř tagu td):
td a { font-size: 10pt; }
„selektor“ určuje element platnosti … Css vlastnosti oddělené středníkem
komentář
Ing. Martin DOSEDLA, KTeIV PdF MU Brno
Deklarace s pseudotřídou – (hlavně) tag a:
a {text-decoration: none; }
a:hover {text-decoration: underline}
pseudotřídy: visited, hover, link, active
Přehled některých nejpoužívanějších CSS vlastností
Zápis je vždy vlastnost:hodnota;
Vlastnosti:
width - šířka
height - výška
color - barva, název nebo #RRGGBB
background-color - barva pozadí
background-image - obr. na pozadí url(‘cesta k obrazku’)
background-repeat - opakování pozadí
background-position - pozice pozadí
font-family - písma – konkrétní názvy
font-style - styl (italic, normal, …)
font-size - velikost (%, px, large, pt …)
font-weight - tloušťka (normal, bold, …)
text-decoration - dekorace textu (underline, overline, ..)
line-height - výška řádku
text-indent - odsazení 1. řádku
text-align - zarovnání text
vertical-align - vertikální zarovnání
margin - vnější okraj (margin-left, …..)
padding - vnitřní okraj (……)
border - rámečky (spousta možností)
list-style-type - typ odrážky seznamu
list-style-image - obrázek místo odrážky
list-style-position - pozice odrážky
Ing. Martin DOSEDLA, KTeIV PdF MU Brno
atd …. opravdu spousta dalších možností a vlastností
Přehled např:
http://www.jakpsatweb.cz/css/css-vlastnosti-hodnoty-prehled.html
http://www.webtvorba.cz/css/css-vlastnosti.html
př.:
.nadpis {
color: #454A3D;
text-align:center;
font-weight:bold;
font-style:italic;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 14pt;
text-decoration: none;
border-bottom: solid #454A3D 2px;
border-top: solid #454A3D 2px;
}
Pozicování v CSS
Pomocí CSS je možné HTML entity pozicovat a určit tak jejich umístění na stránce:

relativně umístěný text


absolutně umístěný text

Další případné atributy jako z-index určí, jak bude viditelné případné překrývání.
Při centrování: v IE se vystředí body a v Mozille se divu dá margin: auto
Barvičky v CSS
- Slovním (anglickým) zápisem
Pro písma se používá rodina
písem. Písma se nepřenáší, takže
bude použito první nalezené na
cílovém PC. Použít podobná
písma (patková, bezpatková, …)
U border se udává šířka, styl a
barva
Ing. Martin DOSEDLA, KTeIV PdF MU Brno
o color: blue
- RGB
o color: rgb(100%,0%,0%)
o color: rgb(255,0,0)
o color: #FF0000
Na zobrazení barev na webu obecně pozor, různé prohlížeče, různé monitory, různé
platformy, apod.
Ing. Martin DOSEDLA, KTeIV PdF MU Brno
4. Tvorba web layoutu a grafika na webu
Vytvoření kompletní stránky pro web, která má mít také zajímavý design, úpravu,
navigaci a další atributy není tak snadné jak by se mohlo podle výše uvedených informací
zdát. Nejde jen o pochopení a zvládnutí XHTML a CSS (případně dalších), ale také o to
jak s nimi správně pracovat a využívat je v praxi. Tato stránka se učí o poznání hůře než
syntaxe. Dále je třeba umět pracovat s grafickými aplikacemi a k tomu mít určité grafické
cítění, nápad apod.
Grafika na webu
• Vkládané obrázky na webu by měly být obrazově kvalitní (rozlišení, barevná paleta)
a většinou komprimované. Nejčastěji využíváme formátů JPEG, GIF, PNG, apod.
• Obrázky na webu vystupují ve dvou rovinách. Jedna pro vlastní obsah webu a
jednak pro grafický vzhled webu.
• Grafika na webu je většinou umísťována jako pozadí HTML elementů.
• V praxi je možné kombinovat při návrhu jak vektorové, tak i rastrové grafické
aplikace.
• Nejlépe je začít „skicou“ stránky.
• Mezi aplikacemi je široký výběr (i freeware).
o Adobe Photoshop, Adobe Fireworks, Pain.Net, GIMP, Pixel, PaintShop,
ImageReady, …
o Některé aplikace umí vygenerovat i příslušné HTML/CSS
• Dobrý grafik udělá hezkou grafiku i v Malování, špatný ani v nejnovějším
Photoshopu.
Layout stránky
Pod tímto pojmem se většinou rozumí rozvržení stránky jako celku. Tedy kde co na
stránce bude umístěno. Jak bude řešena navigace, menu, text, reklamy, rámečky, obrázky
apod.
Ideální je začít s tužkou a papírem nebo grafickou aplikací (typu např. Photoshop) a
vzhled stránky si rozvrhnout a nakreslit. Dál takto získáme grafiku (obrázky) a tvoříme
pomocí HTML, CSS kód layoutu stránky.
Ing. Martin DOSEDLA, KTeIV PdF MU Brno
Šířka, výška, x, y pozice
Šířka,
výška, x,
y pozice
Šířka, výška, x, y pozice
Šířka,
výška, x,
y pozice
Šířka, výška, x, y pozice
Pro vytvoření celku stránky máme v zásadě několik možností (v praxi často budeme
kombinovat a není nutné striktně dodržet jednu):
1. Ne HTML technologie
Stránku samozřejmě můžeme tvořit pomocí i jiných technik než HTML a spol.
Nejčastěji se v této souvislosti využívá Adobe Flash. Tento přístup má jistě své
výhody i nevýhody. Takováto tvorba ale není cílem tohoto předmětu.
2. Rámcový layout
Využívá tagů  nebo