jazyk xhtml

Jazyk XHTML

základní pojmy

Zdroje informací na webu

www.jakpsatweb.cz www.jaknaweb.com www.kosek.cz www.webtip.cz www.dobryweb.cz www.interval.cz

Odkud „stáhnout“ vhodný SW?

www.stahuj.cz www.slunecnice.cz www.studna.cz

Architektura klient - server

• WWW-klient (prohlížeč, browser)je program , který komunikuje s uživatelem a na základě jeho pokynů se obrací na jednotlivé www-servery, získává od nich data a zobrazuje je. (MS Internet Explorer, Mozilla, Opera, Netscape Navigator,...)

• WWW-serverje bezobslužný program, který přijímá a obsluhuje požadavky klientů. (Apache, MS Internet Information Server, Zope)

Standardy pro web

HyperText Transfer Protocol (HTTP)

• definuje pravidla síťové komunikace mezi klientem a serverem

• je postaven na modelu dotaz-odpověď: klient pošle serveru požadavek na získání dokumentu s uvedeným URL a ten na něj odpoví zasláním požadovaných informací (např. www-stránky).

Standardy pro web

HyperText Markup Language (HTML)

• je jazyk, kterým se zapisují WWW-stránky

• interpretaci jazyka zajišťuje klient (prohlížeč) a na jeho vlastnostech záleží, jak bude výsledná stránka vypadat

• popisuje logickou strukturu textu, nikoli jeho fyzický vzhled (tj. určíme, která část textu bude nadpis, odstavec, odkaz, seznam,...)

• první definice jazyka vytvořil v roce 1991 Tim Berners-Lee

eXtensible Hypertext Markup Language (XHTML)

• vývoj jazyka HTML skončil v roce 1999

• XHTML je nástupcem HTML přizpůsobený pravidlům XML

• XML je jazyk pro definici jazyků, který se prosazuje jako univerzální nástroj pro výměnu strukturovaných informací

Standardy pro web

Cascading Style Sheets (CSS)

• kaskádové styly jsou souhrnem metod pro úpravu vzhledu stránek

• kaskádové styly popisují, jak mají vypadat jednotlivé (X)HTML prvky

Standardy pro web

O rozvoj standardů pro web se stará

World Wide Web Consorcium

(www.w3c.org),

které sdružuje akademické i komerční organizace zabývající se WWW, Internetem a souvisejícími technologiemi.

Standardy pro web

Při návrhu webu je třeba počítat s tím, že

stejná stránka se v různých prohlížečích může zobrazit odlišně.

Své stránky bychom měli přizpůsobit alespoň těmto prohlížečům:

•MS Internet Explorer 6•Firefox•Opera

Nejrozšířenější prohlížeče

Nejrozšířenější prohlížeče•MS Internet Explorer 5, 5.5 a 6

75 % všech www-uživatelů

•Mozilla, (FireFox a další klony)20% www-uživatelů

•Opera 7 a 85% www-uživatelů

•Konqueror30% www-uživatelů pracujících pod OS

Linux

•Safariasi 90% uživatelů Mac

•Lynxstarší textový prohlížeč pro Linux

•Prohlížeče mobilních zařízenívelmi různá podpora HTML

Webhosting

•pronájem diskového prostoru na serveru poskytovatele (provider).

• hosting, za který provider nevyžaduje od uživatele přímou platbu (bezplatný hosting)

• zpravidla jsou tyto hostingy provozovány ze zisků z reklamy, kterou poskytovatel freehostingu do stránek vkládá

• seznam freehostingů naleznete na http://free.hostingy.cz

Freehosting

Softwarové nástroje

Konvertoryz jiných datových formátů

Dnes řada programů přímo obsahuje export do (X)HTML (Word, Power Point, Zoner Context,...).

Existují i samostatné konvertory.

Kvalita výstupu bývá problematická.

Není vhodné používat aplikace, které nejsou zaměřené na tvorbu HTML kódu (např. Microsoft Word a jeho HTML export) jako standardní prostředek pro vytváření stránek (HTML kód je nekvalitní, objemný, často se zobrazuje chybně).

(X)HTML editory

WYSIWYG editory

• WYSIWYG = What You See Is What You Get

• zobrazují stránku už při psaní tak, jak bude vypadat v prohlížeči a html-kód generují automaticky, žádná znalost jazyka není potřeba

• WYSIWYG princip je pouze orientační - výsledný vzhled stránky závisí na klientovi

• jsou přímo součástí některých WWW klientů (Netscape Composer, Mozilla), dále pak např. Dreamweaver, FrontPage


(X)HTML editory

strukturní editory

• strukturními editory upravujeme přímo html-kód

• jedná se o běžné textové editory rozšířené o funkce usnadňující zadávání html-značek

• obvykle je html-kód barevně odlišen od ostatního textu

• mezi tyto editory například patří HomeSite, PSPad, EasyPad, Poznámkový blok, HTML-Kit, AceHTML


Jazyk XHTML

stručný popis značek jazyka

Co je to www-stránka

• www-stránka je textový soubor s příponou htm nebo html

• obsahuje publikovaný text doplněný o značky jazyka XHTML, které přiřazují textu určitý význam

Co je XHTML?XHTML je nástupce HTML založený na XML.Rozlišujeme 3 druhy XHTML:

• XHTML 1.0 Strict (přísné) čistě strukturální značkování, neobsahuje žádné značky spojené s formátováním vzhledu

• XHTML 1.0 Transitional (přechodové)povoluje atributy pro formátování textu a odkazů v elementu body a některé další atributy

• XHTML 1.0 Frameset (s podporou rámců)používá se při použití rámců pro rozdělení okna prohlížeče na dvě nebo více částí

Pravidla XHTML• Před samotným dokumentem se nachází deklarace XML.

<?xml version="1.0" encoding="iso-8859-2"?>

• Povinná je deklarace typu dokumentu (DTD)

• XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

• XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• XHTML 1.0 Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Pravidla XHTML• Kořenový element html obsahuje atribut xmlns,

který určuje jmenný prostor dokumentu (namespace) a jazyk, který je v dokumentu použit.<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">

• Element html vždy obsahuje dva elementy, head (hlavičku) a body (tělo dokumentu). Hlavička musí obsahovat element title a měla by obsahovat i metatag pro kódování (kvůli starším prohlížečům)

• Všechny tagy i atributy musí být malými písmeny, XHTML je case-sensitive.

• Všechny hodnoty atributů musí být v XHTML v uvozovkách.

Pravidla XHTML• Všechny XHTML tagy musí být párové. Při

použití prázdného tagu se musí tag ukončit lomítkem, např. <img />

• Tagy se nesmí nikdy křížit.

• Striktní XHTML neobsahuje žádné atributy sloužící k formátování. Oproti HTML jsou z XHTML vypuštěny některé formátovací tagy (jako např. font,...).

• Vkládané skripty na straně klienta (např. javascript) by měly být vloženy do sekce CDATA. Starší prohlížeče ale CDATA nepodporují.<script><![CDATA[ zde bude kód skriptu ]]></script>

• Znak & musí být převeden na html-entitu i pokud je součástí URL.

Značky jazyka (X)HTML•V XHTML se používají speciální značky – tagy. •Tagy jsou tvořeny znaky „<” a „>” mezi nimiž je název tagu (<tag>). •Tagy určují, jaký má text význam (např. nadpis, tabulka, hypertextový

odkaz,...). •V XHTML jsou všechny tagy párové, to znamená, že ke každému

počátečnímu tagu musí existovat tag ukončovací, ten se liší od počátečního tím, že před názvem tagu obsahuje lomítko („/”).

<tag>Text zobrazovaný na stránce.</tag> <p> Toto je odstavec </p>

•Pokud použijeme tag, který neobsahuje žádný text, který by bylo nutno obklopit počátečním a koncovým tagem, použijeme zápis:

<tag /> <img src="obrazek.gif“ />

Značky jazyka (X)HTML

Jeden tag může být uvnitř druhého tagu, ale tagy senikdy nesmí křížit!

• špatně <tag1>Text <tag2>zobrazovaný</tag1> na stránce.</tag2>

• správně <tag1>Text <tag2>zobrazovaný</tag2> na stránce.</tag1>

příklad:<p><em>Toto je tučně zvýrazněný

odstavec</em></p>

Prvky (elementy)

• Prvkem nazýváme celou sekvenci počínaje počátečním tagem a konče tagem ukončovacím

• Existují tři základní druhy prvků - blokové, řádkové (inline) a nahrazované.

• Podle významu, který textu přiřazují je můžeme rozdělit dále na prvky:

• pro strukturování dokumentu

• textové prvky

• prvky pro tvorbu odkazů, tabulek a seznamů,...

Blokové prvky

Blokové prvky jsou prvky formátují text dokumentu do logických bloků různého druhu. Po takovém prvku je text dokumentu zalomen a odřádkován.Blokovými prvky jsou:

• odstavec• nadpisy• citace• předformátovaný text• seznamy• popisy termínů

Řádkové prvky

• Řádkovými (inline) prvky jsou ty, které se nachází uvnitř textu, nedochází po nich k zalomení.

• Obvykle plní funkci zvýraznění nějaké části textu.

• Řádkovými prvky jsou např.:•hypertextový odkaz•prvek <span>...</span>•prvky <b>...</b>, <i>...</i>, ...

Nahrazované prvky

• tyto prvky jsou nahrazeny nějakým obsahem

• pro začlenění do dokumentu jsou důležité jejich rozměry.

• například vložení obrázku na stránku:<img src=“obrazek.jpg” />

Parametry

Prvky mohou mít své parametry:

•parametry přiřazují danému prvku nějaké vlastnosti

•zapisují se do počátečního tagu

•může jich být více, oddělují se mezerou

•prvek nemusí obsahovat žádný parametr

•každý parametr má svoji hodnotu

•hodnota musí být zapsána v uvozovkách

Struktura stránky

<?xml version="1.0" encoding="windows-1250"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN„ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" /> <title>Titulek stránky</title>

</head> <body>

<p>Odstavec textu.</p>

</body></html>

Struktura stránky

• <html>označuje, že se bude jednat o HTML dokument, obsahuje head a body

• <head> hlavička, obsahuje title, metatagy (např. kódování), odkazy na externí dokumenty definice stylu, skripty, apod.

• <title>titulek stránky, to co se objeví jako název okna

• <body>tělo dokumentu, tady se bude nacházet celý obsah stránky

• <p>označení odstavce

Bílé znaky

www-klient (prohlížeč) ignoruje tzv. bílé znaky:

• nadbytečné mezery• tabulátory• konce řádků

Bílé znaky

<p>Takto

zformátovaný

text sev prohlížeči

zobrazí

úplně jinak.</p>

Zdrojový kód Zobrazení v prohlížeči

Takto zformátovaný text se v prohlížeči zobrazí úplně jinak.

Zalomení řádku

přechod na nový řádek lze provést značkou

<br />


Kometa <br /> J. Nohavica <br /> <br />Viděl jsem kometu, <br />oblohou letěla, <br />chtěl jsem jí zazpívat, <br />ona mi zmizela, <br />.....

Kometa J. Nohavica

Viděl jsem kometu, oblohou letěla, chtěl jsem jí zazpívat, ona mi zmizela, .....

Komentář

• rozsáhlý zdrojový kód je někdy vhodné pro lepší přehlednost okomentovat

• komentář je prohlížečem ignorován



Kometa <br />J. Nohavica <br /><br /><!- - hudba i text - ->Viděl jsem kometu, <br />oblohou letěla, <br />chtěl jsem jí zazpívat, <br />ona mi zmizela, <br />.....

Kometa J. Nohavica

Písmo (vizuální značky)

• tyto značky určují vzhled písma

<b> ..... </b> tučné písmo

<i> ..... </i> kurzívaZdrojový kód Zobrazení v prohlížeči

<b> Kometa </b> <br /> <i> J. Nohavica </i> <br /> <br />Viděl jsem kometu, <br />oblohou letěla, <br />chtěl jsem jí zazpívat, <br />ona mi zmizela, <br />.....

Kometa J. Nohavica


Písmo (tématické značky)

• doporučuje se dávat přednost těmto značkám

• vyznačují význam, nikoli vzhled

<em>...</em> zvýrazněný text<strong>...</strong> silně zdůrazněný text<dfn>...</dfn> definovaný termín<code>...</code> neproporcionální písmo <small>...</small> zmenšení písma o 1 stupeň<big>...</big> zvětšení písma o 1 stupeň<sup>...</sup> horní index<sub>...</sub> dolní index<q>...</q> citace v rámci odstavce<span>...</span> formátování a popis části

odstavce

Písmo - procvičení

vysázejte následující text:

H2SO4

a2+b2=c2

A=(a1, ... , a2)

Vodorovná čára

• slouží pro výraznější oddělení celků textu

<hr />parametry:

size tloušťka čáry v pixelechwidth délka čáry v pixelech nebo v % šířky okna

příklad:<hr size=“2” width=“100%” />

Délkové jednotky v XHTML

pixely• obrazovkové body • základní délková jednotka v XHTML• je-li někde uveden rozměr (bez znaku %), tak je chápán vždy

jako počet pixelů

procenta• se v XHTML zapisují jako hodnota a znak % (bez mezery)• jako 100% se chápe šířka nebo výška nadřazeného prvku

(např. tabulka (table), buňka tabulky (td), oddíl (div),...)• nadřazeným elementem je často celý dokument. Pro něj platí:

• šířka se počítá z šířky dokumentu, což je často šířka okna, ale může to být i víc, pokud nějaký prvek přesahuje doprava

• procentuální základ pro výšku se ale u dokumentu chápe jako výška okna.

HTML-příkazy

• se zobrazením některých znaků může mít prohlížeč problém (např. zobrazení znaků „<“,”>”, znaky národních abeced,...)

• vkládají se pomocí příkazu jazyka html ve tvaru:

&příkaz;například:

pevná mezera > >

< < & &

Nadpisy

• existuje 6 úrovní nadpisů, označují se tagy h1, h2, h3, h4, h5 a h6

• úroveň 1 je nejvyšší• úrovně se liší velikostí písma, všechny nadpisy

jsou implicitně zarovnávány vlevo

• Příklad:<h1>Nadpis 1. úrovně</h1><h2>Nadpis 2. úrovně</h2><h3>Nadpis 3. úrovně</h3><h4>Nadpis 4. úrovně</h4><h5>Nadpis 5. úrovně</h5><h6>Nadpis 6. úrovně</h6>

Nadpisy (zobrazení v prohlížeči)

Další blokové prvky

• <p>odstavec</p>

• <blockquote> citace </blockquote>

• <div> část dokumentu s jednotným formátováním </div>

• <pre> neformátovaný text napsaný neproporcionálním písmem </pre>

• <address>informace o autorovi </address>

Příklad použití blokových prvků

<h1>1 Pokyny pro pořádání kursů</h1>

<h2>1.1 Úroveň absolventů</h2>

<p>Předpokládám, že spektrum absolventů kursu bude velmi široké a doznačné míry se bude lišit i jejich vstupní úroveň znalostí dané problematiky. Myslím, že kurs lze pořádat zhruba na třech úrovních:</p>

<blockquote><b>Začátečníci:</b> Tato úroveň bude určena především učitelům neinformatických předmětů, kteří nemají s vytvářením WWW stránek a prezentací žádné vlastní zkušenosti.</blockquote>

Neuspořádaný seznam

• neuspořádaný neboli nečíslovaný seznam se značí tagem ul (unordered list)

• položka seznamu je li (list item)• položka může obsahovat i více odstavců• před každou položkou se standardně

vytváří odrážka

<ul> <li>žirafa</li> <li>slon</li> <li>velbloud</li>

</ul>


Uspořádaný seznam

• uspořádaný neboli číslovaný seznam se značí tagem ol (ordered list).

• položka seznamu je opět li• před položku se automaticky vypisuje její

pořadové číslo

<ol> <li>žirafa</li> <li>slon</li> <li>velbloud</li>

</ol>


Seznam definic• definiční seznam se používá obvykle v případě, kdy

potřebujeme např. vypsat nějaké termíny a k nim jejich definice nebo popisy

• je pro něj tag dl (definition list)• definovaný termín se označuje tagem dt (term)• definice termínu tagem dd (definition).


<dl> <dt>žirafa</dt> <dd>zvíře s dlouhým krkem</dd> <dt>slon</dt> <dd>zvíře s chobotem</dd> <dt>velbloud</dt><dd>zvíře s jedním nebo dvěma hrby </dd></dl>

Seznamy - procvičení

Vytvořte stránku s číslovaným seznamem žáků ve vaší třídě. Uveďte označení třídy, zaměření a jméno třídního učitele.

Odkazy

• odkaz je prvek na stránce, pro který je definována vazba na jiný dokument

• prvek (text, obrázek,..), který je odkazem je graficky zvýrazněn

<a href=“URL adresa cíle” > … </a>

parametry:

title doplňkový text k danému odkazu

Odkazy

absolutní odkaz

používá se pro odkaz na dokument umístěný na jiném serveru

• <a href=“http://www.idnes.cz” title=“Aktuality ze světa i z domova”>Aktuální zprávy</a>

• <a href=“http://www.gvid.cz/tridy.php” title=„Přehled tříd na škole“>Seznamy tříd</a>

Odkazyrelativní odkaz

použijeme tehdy, pokud se odkazujeme na stránku v rámci jednoho uceleného webu

• odkazovaná stránka se nachází ve stejném adresáři, jako ta, ze které se na ni odkazuje

<a href="seznam.htm">Skoč na další stránku</a>

• pokud se odkazovaná stránka nachází v jiném adresáři, je třeba tuto cestu přístupu k souboru specifikovat

<a href=“cviceni/clanek.htm">Skoč zase někam jinam</a>

Odkazy (na konkrétní pozici na stránce)

• definice návěští (pozice)libovolnému prvku na stránce lze přiřadit identifikátor (jméno) pomocí parametru id

<tag id=“skok”> . . . < /tag >

• definice odkazu na pozici určenou návěštím

<a href=“#skok">Skoč někam dále</a>

<a href=“jina_stranka.htm#skok">Skoč někam dále</a>

Odeslání e-mailové zprávy

Přímo ze stránky lze odeslat e-mailovou zprávu pomocí schematu mailto. Kliknutím na takový odkaz se spustí poštovní klient uživatele s přednastavenými některými údaji.

<a href=“mailto:[email protected]”>

Kontaktujte nás </a>

Odeslání e-mailové zprávy

Základní variantu zápisu lze rozšířit ještě o další parametry

<a href=“mailto:[email protected][email protected]&subject=zpráva od čtenáře&body=napište nám vzkaz”> Kontaktujte nás </a>

• ?cc komu jsou určeny kopie zprávy

• &subject předmět zprávy• &body obsah zprávy

Otevření stránky v novém okně

• někdy je výhodné otevřít stránku, na kterou se odkazujeme, v novém okně prohlížeče

• použijeme tehdy, chceme-li mít současně k dispozici několik dokumentů

• provedení je mimo rozsah tohoto kurzu, proto berte tuto ukázku jako fakt

• je třeba zavolat funkci Javascriptu v parametru onclick

<a href="http://www.idnes.cz" onclick="return!window.open(this.href);" > Aktuální zprávy

</a>

Tabulka

<table>…</ table>definuje celou tabulku

<tr>…</tr>definuje vlastnosti jednoho řádku tabulky

<th>.. </th> definuje hlavičku tabulky

<td>..</td>definuje obsah jedné buňky

Tabulka (příklad)

<table summary=“tabulka”><tr>

<th> Jméno </th> <th> Příjmení</th>

</tr> <tr>

<td> Jan </td> <td> Novák</td>

</tr><tr>

<td> Hana </td> <td>

Dvořáková</td> </tr>

</table>

Výsledné zobrazení

• parametr summary shrnuje obsah tabulky

• má význam u zvukových (nevizuálních) prohlížečů

• není explicitně povinný, ale jevyžadován při validaci dokumentu (stačí napsat summary=“”)

Poznámka

Parametry prvku <table>…</table>

• cellpaddingurčuje vzdálenost mezi okrajem buňky a jejím obsahem

• cellspacing

určuje vzdálenost mezi buňkami

• width

určuje šířku tabulky v pixelech nebo v procentech vzhledem k šířce stránky

• border

určuje tloušťku orámování

Atributy prvku <table>…</table>

text v buňce

text v buňce text v buňce

text v buňce

cellspacing cellpadding

Atributy prvku <td>…</td>

Slučování buněkcolspan

•sloučí sousední buňky v řádku do jedné•hodnotou je počet slučovaných sloupců

rowspan•sloučí sousední buňky v sloupci do jedné•hodnotou je počet slučovaných řádků

Slučování buněk (příklad)

potraviny

ovoce

jablko

hruška

třešně

zelenina

mrkev

paprika

rajče

petržel

Popisek tabulky

potraviny

ovocejablkohruškatřešně

zelenina

mrkevpaprikarajčepetržel

• k tabulce lze připojit popisek, umístěný pod tabulkou (resp. nad tabulkou)

• vkládá se pomocí značky <caption></caption>, která musí být umístěna uvnitř značky <table></table>

<table> <caption> zdravá výživa </caption> .....</table>

zdravá výživa

<table summary=" " border="1" cellpadding="5" cellspacing="2">

<caption>zdravá výživa</caption>

<tr> <td colspan="2"> potraviny </td> </tr>

<tr> <td rowspan="3"> ovoce </td> <td> jablko </td></tr>

<tr> <td> hruška </td></tr>

<tr> <td> třešně </td></tr>

<tr> <td rowspan="4"> zelenina</td> <td> mrkev </td></tr>

<tr> <td> paprika </td></tr>

<tr> <td> rajče </td></tr>

<tr> <td> petržel </td></tr>

</table>

Slučování buněk (příklad)

cvičení (slučování buněk)

• vytvořte následující tabulku závěrečných výsledků tenisového turnaje

cvičení

• Udělejte tabulku malé násobilky. Záhlaví řádků a sloupců budou tvořit čísla od 1 do 10. V průsečíku řádku a sloupce bude hodnota součinu odpovídajících dvou čísel.

• Převeďte na www-stránku jízdní řád jedné linky ze zastávky MHD, autobusu nebo vlaku.

• Zpracujte do tabulky televizní program některého kanálu na dnešní večer. V levém sloupci budou časy v pravém názvy pořadů.

Grafika na webu

Text na www-stránkách lze doplnit obrázky

Grafika na webu

• každý obrázek je uložen v samostaném souboru

• obrázky na webu jsou nejčastěji:• grafické prvky www-stránek (tlačítka,

rámečky, vodorovné čáry, odrážky,..)• fotografie

• obrázky můžeme získat různými způsoby:• stáhnout z internetu • skenováním• digitálním fotoaparátem• skenováním obrazovky (PrtSc, Alt+PrtSc)

Grafika na webu

• grafické prvky www-stránek

• vytvoříme v některém z dostupných grafických editorů

• lze stáhnout ze spousty internetových zdrojůnapříklad:

www.jaknaweb.com/webova-grafika

• fotografie• vlastní • stažené z internetu – pozor na autorská

práva!!

Grafické formáty (GIF)

GIF

• používá se pro grafické prvky www stránek (tlačítka, navigační prvky, čáry,...)

• zobrazuje v max. 256 barvách (nebo odstínech šedi)

• komprimovaný formát s bezztrátovou kompresí

• jedna z barev může být označena jako průhledná (tu prohlížeč nezobrazí)

• může být animovaný

Grafické formáty (GIF)

Grafické formáty (JPG)

JPEG (JPG)• používá se pro ukládání fotografií

• zobrazuje v 16,7 mil. barev

• komprimovaný formát

• komprese je ztrátová (kompresní algoritmus některé body vypustí nebo změní)

• při ukládání volíme kvalitu uložení (čím nižší stupeň komprese, tím kvalitnější obrázek a větší soubor)

• každým uložením dochází k degradaci kvality

• neumožňuje dělat průhledné nebo animované obrázky


• fotografie pořízené digitálním fotoaparátem mají obvykle vysokou kvalitu (tj. velký objem dat)

• takové fotografie jsou pro umístění na www-stránky téměř nepoužitelné

• velký soubor = dlouhá doba stahování(myslete i na uživatele s vytáčeným připojením)


• je třeba si předem uvědomit, k jakému účelu budou fotografie využívány, zda pouze k zobrazení na monitoru nebo k tisku

• pokud má fotografie sloužit k oběma účelům používá se následující postup:

1. vytvoří se tzv. náhledy (pro zobrazení na monitoru)

2. fotka v původní kvalitě se zobrazí až na požádání uživatele (např. kliknutím na náhled)


Jak „zmenšit“ fotografii (resp. velikost souboru):

1. fotku převzorkovat (změnit její rozlišení)

2. uložit s vhodným stupněm komprese


Tento obrázek byl z původní velikosti souboru 3,5 MB převzorkován a uložen s 30% kompresí do souboru o velikosti 60 kB (kvalita pro zobrazení na monitoru je stále dostačující)

Grafické formáty (PNG)

PNG

• byl navržen jako náhrada formátu GIF

• komprimovaný formát s bezztrátovou kompresí

• obrázek může obsahovat až 16,7 mil. barev (true color), soubory jsou však velké

• tento formát se zatím moc neujal (pro drobnou grafiku je vhodnější GIF a pro fotky JPG)

Obrázek na www-stránce

• obrázek na stránku vložíme pomocí značky

<img src=“URL-adresa obrázku” alt=“popis” />

• další parametry:width šířka výřezu určeného pro obrázek uváděná v pixelech nebo v % (nemění velikost obrázku!!)height výška výřezu

výška a šířka by se měla uvádět (v pixelech), aby místo na stránce bylo vyhrazeno dřív než se obrázek stáhne (jinak stránka postupným dotahováním obrázků „poskakuje“)

<img src=“obrazek.jpg“ width = “200” height=“150“ alt=“text” />

Obrázek odkazem

• obrázek může sloužit také jako odkaz • obrázek, který je odkazem, je barevně orámován

(lze potlačit pomocí css)• odkaz na jinou html-stránku:

<a href=“http://www.idnes.cz” title=“aktuality”>

<img src=“obrazek.jpg” alt=”popisek“/></a>

• odkaz na obrázek (např. zobrazení obrázku v původní velikosti kliknutím na náhled)<a href=“obrazek.jpg” title=“popis”>

<img src=“nahled.jpg” alt=”popisek“/></a>

Umístění obrázku na stránce

Obrázek se chová v řádku textu jako jeden ze znaků.

O možnostech umístění obrázku na stránce (obtékání textem, apod.) bude více řečeno v kapitole o kaskádových stylech

Formulář

• místo na www-stránce, kde lze vyplnit nějaké informace

• skupina vstupních řádků, tlačítek apod., která slouží k zadávání dat uživatelema k odeslání těchto dat ke zpracování.

• po odeslání jsou data zpracována buď přímo scriptem na straně klienta (JavaScript, VBScript) nebo jsou odeslána na web-server, který data zpracuje a pošle zpět speciálně upravenou stránku (CGI, ASP, PHP,…)

Formulář

Formulář

<form action=“ ” method=“ ”>

obsah formuláře

</form>

Formulář(parametr action)

• parametr action specifikuje URL-adresu, kde jsou přijímána data z formuláře po jeho odeslání

• může to být URL stránky nebo scriptu, ze kterého byla poslána stránka s formulářem (obvykle někde na stejném serveru)

action=“http://gvid.site.cz/testform.php”

• může to být i e-mailová adresa

action=“mailto:[email protected]”

Formulář(parametr method)

• parametr method specifikuje, jakým způsobem mají být data odeslána

• method = “get”• data z formuláře jsou (v zakódované formě)

připojena na konec URL-adresy uvedené ve formuláři

• maximální velikost URL je omezená (prohlížečem, webserverem, proxy serverem)

• méně bezpečná

• method=“post”• zakódovaný řetězec je poslán spolu s HTTP

hlavičkou• není omezena velikost odesílaných dat

Prvek <input />

• vkládá do stránky různé prvky formuláře (textová pole, přepínače, radiobuttony,…)

• společné atributy pro různé prvky formuláře:• id – jednoznačný identifikátor prvku

(jméno proměnné používané v scriptu)• value – hodnota, která je předána serveru• disabled=“disabled” – prvek se zobrazí,

ale nelze měnit jeho hodnotu (je neaktivní)

• name – jméno formulářového prvku; identifikátor používaný ve scriptu zpracovávající data z formuláře

Prvek <input />

• typ formulářového prvku určuje parametr type=“ “

• hodnoty parametru type jsou:text passwordfile submitreset buttonimage checkboxradio hidden

jazyk xhtml

Documents