Tvorba internetových stránek. Jazyk HTML

Transkript

1 Tvorba internetových stránek Jazyk HTML

2 Stránky www nejpoužívanější služba internetu: WWW World wide web služba poskytuje (zpřístupňuje) hypertextové dokumenty (= internetové stránky)

3 dokumenty jsou přenášeny aplikačním protokolem http (hypertext transfer protocol) - standardní port 80 identifikují se pomocí URL Uniform Resources Locator " "//" host [ ":" port ] [ abs_path [ "?" query ]] dokumenty jsou zapsány v jazyce HTML (Hypertext Markup Language)

4 Vznik www a html www a html vytvořen na půdě CERNu v letech Tim Berners-Lee účel: infrastruktura pro sdílení výsledků vědeckých výzkumů prvotní implementace prohlížeče a editoru pro OS Next Step

5 tato verze HTML byla později označena jako HTML 0.9 (vydána 1991) umožňovala: členění textu do několika logických úrovní použití několika druhů zvýraznění textu zařazení odkazů a obrázků do textu nepodporovala grafický režim první formální specifikace byla vydána jako HTML 2.0

6 Verze HTML HTML 2.0 HTML 3.0 HTML 3.2 HTML 4.0 HTML 4.01 XHTML 1.0, XHTML 2.0 HTML 5 sémantický web - HTML + RDF

7 HTML RFC 1866 Level 1 drobné rozšíření předchozí verze základní formátování a strukturování dokumentu, obrázky, formuláře Level 2 doplňuje práci s formuláři

8 HTML ambiciózní návrh matematické vzorce, tabulky, obtékání obrázků, styly dokumentů nikdy nebylo přijato výrobci jako standard, protože bylo příliš složité kompletní podporu nabízel pouze experimentální prohlížeč Arena (pro UNIX) výrobci sw nebyli schopni naprogramovat plnou podporu

9 důsledek: výrobci prohlížečů přidávají svá nestandardní rozšíření HTML konsorcium W3C 1 (World Wide Web Consorcium) proto vybírá společnou podmnožinu rozšíření, které přidá k HTML 2.0 a schvaluje HTML 3.2 co je implementováno v prohlížečích především lepší možnosti formátování dokumentu 1

10 HTML 3.2 návrh z r. 1996, vydána 1997 rysy: tabulky lepší možnosti formátování dokumentu (volnější výběr použitých druhů písma) podpora appletů v jazyce JAVA

11 HTML vlastnosti podpora kaskádových stylů (CSS) skripty vložené do stránky multimediální objekty rozšířené možnosti tabulek podpora více jazyků, tok textu rozšíření formulářů rámy

12 HTML 4.01 prosinec 1999 opravy drobných chyb ve specifikaci HTML 4.0 po ní se mělo přejít na XHTML

13 XHTML 1.0, 1.1 elementy jsou běžné elementy HTML dokument musí mít vlastnosti XML zápis značek a atributů malými písmeny, hodnoty atributů v uvozovkách, všechny značky párové, (event. nepárové značky označeny <p/>), nesmějí se křížit, existují tři specifikace (DTD) Strict pro XHTML dokumenty bez prezentačních a formátovacích značek Transitional pro všechny stránky Frameset pro stránky s rámy

14 na půdě W3C pracovní skupina XHTML vyvíjela verzi jazyka XHTML 2.0, měla zajímavé vlastnosti bohužel cena: porušení kompatibility s předchozími verzemi jazyka HTML a XHTML důsledek: prohlížeče stále podporují HTML 4.0 a XHTML 1.0 W3C: XHTML 2.0 je slepá cesta 2007: vývoj HTML 5

15 HTML 5 práce na specifikaci zahájeny 2004 pracovní skupina 2007 poslední změny z nové elementy pro sémantické vyznačení částí dokumentu, strukturování hlava, pata, část stránky sloužící pro zobrazení navigačních odkazů, boční panel stránky programátorem definovaná část stránky na webu část stránky obsahující nějaký text

16 HTML 5 nové elementy pro vkládání audio a video objektů (SVG), podpora offline aplikací, grafiky, MathML

17 RDF Resource Description Framework specifikace z r metadatový model pro popis vlastností u sémantického webu

18 Protokol HTTP aktuální verze HTTP/1.1 HTTP 1.0 bezestavový HTTP 1.1 s udržovaným spojením RFC 2616, zastarává RFC 2068 protokol nese kromě datového obsahu informace o typu obsahu, kódování znaků (jazyk), MIME, prohlížeč

19 Protokol HTTP Hlavička Tělo

20 HTTP textový protokol typu request/response v hlavičce jsou identifikovány pouze dva typy zpráv: request/responce jak zpracovat požadavek je definován metodou ( příkazem ) je definováno 8 metod (OPTION, GET, POST, PUT, DELETE, )

21 Protokol HTTP OPTION dotaz na parametry komunikace GET vyzvednutí obsahu identifikovaném URL PUT uložení přiloženého obsahu na identifikované URL POST předání dat podle URL, např. parametrů spuštěnému skriptu (CGI), připojení dat do databáze, apod.

22 Protokol HTTP

23 Stránky HTML statické jsou kompletně uloženy na serveru v podobě, jak se zobrazují dynamicky generované stránka je vytvořena na serveru dynamicky před odesláním klientovi, např. na základě dotazu klienta z dat v databázi CGI, PHP Servlety, JSP ASP.NET

24 LAMP Linux Serverovářešení http server Apache databáze MySQL skriptovací jazyk PHP, Perl nebo Python výhoda: freewareové řešení

25 WINS Serverovářešení MS Windows Server http server IIS (Internet Information Server).NET MS SQL Server

26 Apache 2 volně šířitelný www server nejnovější verze ke stažení jak ve formě zdrojového kódu httpd tar.bz2 tak ve formě "hotové" instalace (Win)

27 Apache 2 překlad a instalace 1. konfigurace spuštění konfiguračního skriptu./configure./configure help výpis parametrů 2. překlad make 3. instalace make install

28 HTML html dokument = obyčejný textový soubor přípona.htm,.html text je doplněn o formátovací značky - tagy značka určuje význam textu, kterým je uvozen značka zpravidla určuje i způsob zobrazení v prohlížeči

29 Tag (značka) uzavřen mezi znaky < a >, např. <CENTER>, nezáleží na velikosti písmen tagy jsou nepárové (<BR>) a párové párový tag: <>, </> - má otevírací a uzavírající část (ohraničují blok textu) <CENTER>, </CENTER> část dokumentu ohraničená párovými značkami se nazývá element (včetně značek) uzavírající část je někdy nepovinná

30 export z produktů MS-Office nezáleží na velikosti písmen značky součástí značky může být hodnota nějakého doplňkového parametru, např.: <body bgcolor="#ff0000">

31 Možnosti tvorby HTML stránek pro specialisty - textový editor typu Notepad, PSPad, XML editor, píše se přímo kód pomocné nástroje, kde se píše text jako ve Wordu - výstupem je html dokument; možnost upravovat kód -, Microsoft Front Page, různé freewarové editory (WebEditor)

32 vývojová prostředí internetových aplikací JAVA NetBeans Microsoft.NET Framework webové aplikace pro tvorbu webových stránek vizualizační nástroj snadná tvorba není nutnost znát jazyk HTML jednotný vzhled stránek export z jiných produktů (MS Office)

33 <HTML> <HEAD> Základní struktura HTML dokumentu Začátek hlavičky dokumentu <TITLE> Titulek, který se objeví v titulku okna klienta </TITLE> </HEAD> Konec hlavičky dokumentu <BODY> Začátek vlastního těla dokumentu... vlastní obsah stránky... </BODY> Konec těla dokumentu </HTML>

34 pokud bychom chtěli být důslední, tak prvnířádek dle specifikace 4.01 by měl obsahovat odkaz na DTD, např.: <!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01//EN">

35 DTD Document Type Definition definice pravidel pro každou verzi jazyka definuje elementy a atributy, které lze používat

36 Sekce <HEAD> specifikace některých parametrů dokumentu např.: specifikace základní URL adresy <base href = " meta informace <meta http-equiv="content-type" content="text/html;charset=utf-8" keyword="automat">

37 Poznámka: ve verzi 5 se zjednodušil odkaz na kódování dokumentu a jazyk <html lang= "cs" > <meta charset= "UTF-8">

38 Sekce <BODY> vlastní obsah dokumentu <BODY> má několik parametrů, které specifikují vlastnosti zobrazení pro celý dokument: BGCOLOR="barva" - barva pozadí TEXT="barva" - barva textu BACKGROUND="zdroj" - URL obrázku na pozadí např.: <BODY BGCOLOR="#800000">

39 Specifikace barev slovně, jako jedna z předdefinovaných barev (např. Black), nebo ve formátu RGB pomocí šestnáctkového čísla číselná specifikace - určuje intenzitu každé složky v rozsahu 00h-FFh, tj "#RRGGBB" červená zelená modrá příklad: "#FF0000"- sytá červená

40 Formátování dokumentu původní myšlenka: značky označují pouze logické členění textu, proto: detaily formátování jsou věcí prohlížeče: ignorují se konce řádek (jsou převedeny na mezeru) více mezer za sebou je nahrazeno mezerou jedinou text je zalomen tak, aby se vešel do okna prohlížeče

41 Příklad: <HTML> <HEAD> <TITLE> První stránka </TITLE> </HEAD> <BODY> První věta. Druhá věta. Třetí věta. </BODY> </HTML>

42 Výsledek:

43 Značky pro zalamování textu <P> - nový odstavec ukončující tag není povinný <BR> - nový řádek (zalomení) Příklad: <P> Dnes máme přednášku na BIVŠ. <P> Kontakt na mne:<br> Vít Fábera<BR> Fakulta dopravní ČVUT<BR> Konviktská 20, Praha 1

44 Výsledek: Dnes máme přednášku na BIVŠ. Kontakt na mne: Vít Fábera Fakulta dopravní ČVUT Konviktská 20, Praha 1 <BLOCKQUOTE>, </BLOCKQUOTE> text uvozený těmito značkami je oddělen od ostatního textu malou vertikální mezerou a odsazen používá se např. pro začlenění delších citací apod.

45 Příklad: Booleova algebra je definována: <BLOCKQUOTE> Booleova algebra je asociativní, distributivní, komutativní a komplementární svaz s binárními operacemi logického součtu, logického součinu a unární operací negace, resp. inverze, s proměnnými a s konstantami 0, 1. </BLOCKQUOTE> Vysvětlíme ještě pojmy uvedené v definici.

46 Výsledek: Booleova algebra je definována: Booleova algebra je asociativní, distributivní, komutativní a komplementární svaz s binárními operacemi logického součtu, logického součinu a unární operací negace, resp. inverze, s proměnnými a s konstantami 0, 1. Vysvětlíme ještě pojmy uvedené v definici.

47 Vytváření nadpisů párová značka <Hn> Text nadpisu </Hn> n je úroveň nadpisu 1 6 úroveň 1 je nejvyšší vyšší úrovně bývají zobrazeny větším a silnějším typem písma Poznámka: pátá a šestá úroveň bývá zobrazena již malým typem písma, nedoporučuje se používat

48 Příklad: <BODY> <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> </BODY>

49 Výsledek: Poznámka: Nadpis první úrovně bývá zvykem oddělit horizontální linkou <HR>.

50 Typy písma Značky umožňující změnu typu písma dělíme na značky pro: logické vyznačování označujíčást textu podle významu (druhu informace) - zvýrazněný text, definice, citace každému významu je přiřazen určitý typ písma (v určitém systému) fyzické vyznačování určují přímo typ písma (tučné, kurzíva, podtržené)

51 Značky pro logické vyznačování textu <CITE> <CODE> <EM> <KBD> citace, označování názvů knih, zobrazován jako kurzíva ukázka kódu nějakého programu (jednořádková, pro víceřádkové se používá značka <PRE>) zobrazován neproporcionálním písmem zvýraznění fráze zobrazován jako kurzíva vyznačení textu, který je zadáván uživatelem (lze využít v např. v uživatelských příručkách) zobrazován neproporcionálním písmem

52 <SAMP> <STRONG> <VAR> <DFN> <ADDRESS> zápis výstupu z různých programů a skriptů zobrazován neproporcionálním písmem silné zvýraznění textu zobrazován jako tučné písmo označení proměnných zobrazován jako kurzíva vyznačení termín, který je právě definován zobrazován jako kurzíva vyznačení adresy; ve většině prohlížečů se zobrazení nemění, někdy bývá zobrazena jako kurzíva

53 Značky pro fyzické vyznačování textu <B> <I> <TT> <U> <STRIKE> <BIG> <SMALL> <SUB> <SUP> tučné písmo kurzíva neproporcionální písmo podtržené písmo přeškrtnuté písmo větší písmo menší písmo dolní index horní index

54 Příklad: <BIG><B>Líh</B></BIG> (ethanol) patří mezi <I>alkoholy</I>. Jeho chemická značka je C<SUB>2 </SUB>H<SUB>5 </SUB>OH. Výsledek: Líh (ethanol) patří mezi alkoholy. Jeho chemická značka je C 2 H 5 OH. Poznámka: značky pro vyznačování textu se nemají křížit nestandardní značka <BLINK> pro blikání textu

55 Značky pro speciální symboly uvozeny znakem & nedělitelná mezera větší než menší než uvozovky ampersand copyright > < " & > < " &

56 při tvorbě stránek bychom měli dodržovat typografické zásady, zejména používání českých uvozovek dolní uvozovka horní uvozovka dlouhá pomlčka krátká pomlčka - -

57 Předformátovaný text je uzavřen mezi značky <PRE>, </PRE> v textu jsou zachovány všechny mezery a konce řádků, text je zobrazen neproporcionálním písmem uvnitř textu je možné použít značky pro změnu písma, odkazy apod. styl je vhodný pro zápis kódu programů do html stránek apod.

58 Příklad: zdrojový kód rekurzivní funkce pro výpočet faktoriálu v jazyce C <PRE> #include <stdio.h> <B>long</B> fakt(<b>int</b> n) { <B>if</B> (n<=0) <B>return</B> 1; <B>return</B> n*fakt(n-1); } </PRE>

59 Výsledek: #include <stdio.h> long fakt(int n) { if (n<=0) return 1; return n*fakt(n-1); }

60 Hypertextové odkazy odkazy na jiné soubory (dokumenty html, programy,...) ve formátu URL <A HREF=" Text, který se zobrazí nebo odkaz na obrázek </A> odkazy jsou zobrazeny odlišnou barvou (a podtržením), rozlišují se navštívené a nenavštívené odkazy

61 Příklad: <A HREF=" Kliknutím zobrazíte server Seznam </A> Výsledek:

62 odkazy jsou relativní nebo absolutní relativní: vztaženy k umístění daného dokumentu příklady: seznamy/lide.htm absolutní: musí začínat identifikací protokolu příklad:

63 Protokoly file ftp gopher http mailto news telnet soubor na lokálním disku soubor přístupný pomocí FTP Gopher protokol webovské stránky adresa elektronické pošty diskusní skupiny terminálový přístup

64 Poznámka: u odkazů nezáleží na velikosti písmen u protokolu a serverů, u odkazů na adresáře a soubory to záleží na hostitelském operačním systému

65 Odkazy na místo v dokumentu odkaz na určité místo v dokumentu se zapisuje obdobně jako jiné odkazy <A HREF="#jmeno">Text odkazu</a> identifikace místa v dokumentu místo, na které se chceme odkázat, označíme: <A NAME="jmeno"></A>

66 Příklad: odkaz na začátek dokumentu na začátek dokumentu umístíme značku <A NAME="zacatek"></A> na místo, kde chceme umístit odkaz na začátek dokumentu, vložíme značku <A HREF ="#zacatek">na začátek</a>

67 Seznamy a výčty Je možné vytvořit tři typy seznamů: nečíslované seznamy Unordered List číslované seznamy Ordered List definiční seznamy

68 Nečíslovaný seznam ohraničen značkami <UL>,</UL>, položky seznamu jsou ohraničeny značkami <LI>,</LI> ukončující značka </LI> je nepovinná položky seznamu jsou na stránce uvozeny standardně symbolem plné kolečko atribut TYPE - určuje tvar symbolu ("DISK","CIRCLE","SQUARE") atribut může být u značky <UL> i <LI>

69 Příklad: Pracovní dny v týdnu: <UL> <LI>pondělí</LI> <LI>úterý</LI> <LI>středa</LI> <LI>čtvrtek</LI> <LI>pátek</LI> </UL>

70 Výsledek: Pracovní dny v týdnu: pondělí úterý středa čtvrtek pátek

71 Číslovaný seznam seznam položek s automatickým číslováním ohraničen značkami <OL>,</OL> položky seznamu jsou ohraničeny značkami <LI>,</LI> ukončující značka </LI> je nepovinná standardníčíslování položek je provedeno arabskými číslicemi lze opět změnit pomocí atributu TYPE, viz dále

72 Příklad: Pracovní dny v týdnu: <OL> <LI>pondělí</LI> <LI>úterý</LI> <LI>středa</LI> <LI>čtvrtek</LI> <LI>pátek</LI> </OL>

73 Výsledek: Pracovní dny v týdnu: 1. pondělí 2. úterý 3. středa 4. čtvrtek 5. pátek

74 atribut TYPE mění způsob číslování Hodnota TYPE 1 A a I i Způsob číslování arabské číslice velká písmena malá písmena velké římské číslice malé římské číslice Příklad 1, 2, 3, 4 A, B, C, D a, b, c, d I, II, III, IV i, ii, iii, iv

75 Poznámky: způsob číslování lze měnit i uvnitř seznamu atribut TYPE může být použit u <OL> i <LI> atribut START u značky <OL> určuje počáteční hodnotu atribut VALUE u značky <LI> určuje aktuální zobrazenou hodnotu u všech značek lze použít atribut COMPACT, který zmenší mezery mezi jednotlivými položkami většinou není implementován

76 Příklad: <OL TYPE=I START="3"> <LI>Svačina <LI>Spacák <LI VALUE=10>Nůž <LI TYPE=1>Batoh <LI>Mapa </OL>

77 Výsledek: III. IV. X. 11. XII. Svačina Spacák Nůž Batoh Mapa

78 Definiční seznam seznam s termíny a definicemi zobrazenými s vertikální mezerou vhodný pro slovníčky pojmů apod. ohraničen značkami <DL>, </DL> definovaný termín uvozen <DT> definice uvozena <DD>

79 Příklad: <DL> <DT>Směrovač <DD>Aktivní prvek Internetu. Nalézá nejkratší cestu k cíli. <DT>Směrovací tabulka <DD>Tabulka uložená ve směrovači. Obsahuje informace o nejkratší cestě k dané IP síti. </DL>

80 Výsledek: Směrovač Aktivní prvek Internetu. Nalézá nejkratší cestu k cíli. Směrovací tabulka Tabulka uložená ve směrovači. Obsahuje informace o nejkratší cestě k dané IP síti.

81 Obrázky vkládají se pomocí značky <IMG> podporované formáty obrázků bitmapové JPG, GIF, PNG vektorové nově standardizovaný formát SVG na principu XML

82 Příklad: <P> Představujeme Vám nové šaty <P> <IMG SRC="saty.jpg" ALT="Šaty"> <P> Jak se Vám líbí?

83 Výsledek:

84 obrázek je vložen jako samostatný odstavec, jinak by byl součástí textu (což je také možné) <P> Představujeme Vám nové šaty <IMG SRC="saty.jpg" ALT="Šaty"> Jak se Vám líbí?

85

86 Značka <IMG> má mnoho atributů: <IMG SRC="URL" ALT="Popis" ALIGN="Zarovnání" WIDTH="Šířka" HEIGHT="Výška" BORDER="Šířka rámečku" HSPACE="Horizontální mezera" VSPACE="Vertikální mezera">

87 ALT alternativní text, který se zobrazí, dokud není obrázek zobrazen ( nahrán ), nebo při najetí kurzoru na obrázek WIDTH, HEIGHT šířka a výška obrázku v pixelech nebo procentech původního rozměru pokud uvedeme pouze jeden rozměr, poměr stran obrázku je zachován rozměry v pixelech je vhodné uvést, protože stránka se v prohlížeči naformátuje ihned správně

88 BORDER šířka rámečku okolo obrázku v pixelech HSPACE, VSPACE horizontální a vertikální mezera mezi obrázkem a okolním textem - v pixelech nebo procentech velikosti obrázku <P> Představujeme Vám nové šaty <IMG SRC="saty.jpg" ALT="Šaty" HEIGHT=50% BORDER=5 HSPACE=50%> Jak se Vám líbí?

89

90 ALIGN určuje způsob zarovnání obrázku a okolního textu možné hodnoty TOP, MIDDLE, BOTTOM, LEFT, RIGHT TOP řádek textu je zarovnán s horním okrajem obrázku MIDDLE řádek textu je zarovnán se středem obrázku BOTTOM řádek textu je zarovnán s dolním okrajem obrázku

91 LEFT obrázek je na levém okraji a je obtékán textem zprava RIGHT obrázek je na pravém okraji a je obtékán textem zleva

92 speciální atribut CLEAR u značky <BR> způsobí, že další text pokračuje až pod obrázkem (neobtéká jej) vhodné použití se nabízí u nadpisů (neobtékají obrázek, jsou samostatné) možné hodnoty atributu LEFT text pokračuje pod obrázky zarovnanými vlevo RIGHT text pokračuje pod obrázky zarovnanými vpravo ALL text pokračuje pod obtékanými obrázky bez ohledu na umístění

93 Příklad: bez atributu CLEAR <P> Představuje Vám nové šaty z letní kolekce. Jak se Vám líbí? <IMG SRC="saty.jpg" ALT="Šaty" HEIGHT=25% ALIGN= RIGHT> <BR> <H1>Kontakt</H1> Módní salón Jehlička<BR> Pod sakem 24<BR> Kabátovice

94 Výsledek:

95 s atributem CLEAR <P> Představuje Vám nové šaty z letní kolekce. Jak se Vám líbí? <IMG SRC="saty.jpg" ALT="Šaty" HEIGHT=25% ALIGN= RIGHT> <BR CLEAR=RIGHT> <H1>Kontakt</H1> Módní salón Jehlička<BR> Pod sakem 24<BR> Kabátovice

96 Výsledek:

97 Obrázek jako odkaz obrázek může sloužit také jako odkaz <A HREF="lide.htm"> <IMG SRC=ikona_lide.jpg ALT=Lide> </A> Poznámka: nepsané pravidlo - atribut ALT by měl být uveden

98 GIF Formáty obrázků Graphic Image Format (80. léta) obrázky maximálně ve 256 barvách podporuje kompresi (LZW) problém s licencí: kompresní algoritmus firmy UNISYS od 90. let licencován prokládané obrázky (rychlejší náhled na pomalé lince)

99 verze GIF89a jedna transparentní barva umožňuje animované obrázky (animovaný GIF) vhodný pro ikony, obrázky uměle nakreslené na počítači, animované obrázky (pohybující se šipka apod.)

100 JPEG JPEG = zkratka pro skupinu Joint Photographic Experts Group zabývá se vývojem algoritmů pro kompresi obrazových dat obrázky pouze v barevném režimu TrueColor ztrátová komprimace dat vhodná především pro fotografie, ne pro obrázky s ostrými přechody možnost nastavit kompresní poměr existuje progresivní verze formátu (rychlejší zobrazení náhledu) - prokládání

101 PNG Portable Network Graphics náhrada za GIF umožňuje vytvářet obrázky v mnoha barevných hloubkách včetně TrueColor (až 48 bitů) transparentnost alfa-kanál pro každý bod obrázku lze určit jeho průhlednost 0% až 100% neumožňuje tvorbu animovaných obrázků prokládání obrázků je oproti GIFu ještě vylepšeno

102 SVG vektorový formát využívající syntaxi XML obrázek se skládá ze základních grafických elementů jako úsečka, kružnice, text, může být uložen v samostatném souboru nebo přímo jako součást stránky v XHTML možnost podle potřeby zvětšovat/zmenšovat s obrázkem lze manipulovat pomocí JavaScriptu

103 Ukázka: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns= xmlns:svg=" <head> <title>ukázka SVG obrázku</title> </head> <body> <h1>vektorový obrázek v SVG</h1> <svg:svg width="4in" height="3in"> <svg:desc>this is a blue circle with a red outline</svg:desc> <svg:g> <svg:circle style="fill: blue; stroke: red" cx="200" cy="200" r="150"/> <svg:text x=".5in" y="2in" style="font-size: 36px; fontfamily: Verdana">Ahoj světe</svg:text> </svg:g> </svg:svg> </body> </html>

104 klikací mapa Klikací mapy obrázek, který je rozdělen na části (oblasti); každáčást obrázku slouží jako hypertextový odkaz (aktivní oblast) definice mapy pomocí značky <MAP> <MAP NAME="Jméno mapy"> Definice aktivních oblastí </MAP>

105 definice aktivní oblasti pomocí značky <AREA> <AREA HREF="URL" ALT="Popis odkazu" SHAPE="Tvar oblasti" COORDS = "Souřadnice oblasti"> tvar oblasti RECT - obdélník CIRCLE kruh POLY - mnohoúhelník

106 souřadnice oblasti pro obdélník čárkami oddělené souřadnice levého horního a pravého dolního rohu kruh čárkami oddělené souřadnice středu a poloměr mnohoúhelník čárkami oddělené souřadnice vrcholů obrázek přiřazený mapě se vkládá standardně pomocí <IMG> s atributem USEMAP

107 <IMG SRC="URL obrázku" USEMAP= "#jmeno mapy"> Příklad:

108 <MAP NAME="Tlacitka"> <AREA HREF="kap1.htm" ALT="Kapitola 1" SHAPE="RECT" COORDS = "28,28,112,112"> <AREA HREF="obsah.htm" ALT="Obsah" SHAPE="RECT" COORDS = "148,28,232,112"> <AREA HREF="kap2.htm" ALT="Kapitola 2" SHAPE="RECT" COORDS = "267,28,352,112"> </MAP> <IMG SRC="tlacitka.gif" ALT="Navigační tlačítka" USEMAP="#Tlacitka">

109 u značky AREA je možné použít atribut NOHREF neuvádí se žádné URL určuje plochu, která nemá být součástí odkazu Příklad: <MAP NAME="Kruh"> <AREA HREF="prsten.htm" SHAPE="CIRCLE" COORDS = "100,100,90"> <AREA NOHREF SHAPE="CIRCLE" COORDS = "100,100,40"> </MAP>

110 Vložení libovolných multimediálních objektů je umožněno až od verze HTML 4 pomocí značky <OBJECT> <object data="url k souboru" type="mime typ dat" width="šířka objektu" height="výška objektu"> alternativní verze objektu (obrázek,text) </object>

111 Příklad: <object data="earth.mpeg" type="application/mpeg" width="300" height="200"> <object data="earth.gif" type="image/gif" width="400" height="500"> Planeta Země tak, jak ji viděl Gagarin. </object> </object>

112 v prezentaci různých animací apod. dnes vede aplikace Macromedia Flash nevýhody: vytváří se obvykle v komerčních aplikacích, které nejsou nejlevnější výhody: Flash je program se snadnou obsluhou, o oblíbený u designerů stránek přehrávač Flash je standardní součástí prohlížečů

113 zřejmě v budoucnu bude standardem formát SMIL Synchronized Multimedia Integration Language standard konsorcia W3C verze 1.0 standard od roku 1998 verze 2.0 standard od srpna 2001 založen na XML, podpora SMIL 1.0: RealPlayer 8, QuickTime 4.1, podpora SMIL 2.0 RealOne Platform, GRiNS,Internet Explorer 5.5 a 6.0

114 výhody nezávislé na platformě na vytváření není potřeba zvláštní software snadná integrace mnoha rozličných formátů nevýhody teprve vznikající podpora v aplikacích

115 Ještě něco k formátování u nadpisů, odstavců aj. lze ovlivňovat zarovnání atributem ALIGN LEFT, RIGHT, CENTER <H1 ALIGN="CENTER">Obvody</H1> chceme-li použít společné zarovnání pro více elementů, např. odstavců, použijeme <DIV>

116 Příklad: všechny odstavce budou zarovnány vpravo <DIV ALIGN=RIGHT> <P> První odstavec <P> Druhý odstavec <P> Třetí odstavec </DIV> Poznámka: místo <DIV ALIGN=CENTER> lze použít pouze <CENTER> (rozšíření firmy Netscape, zakotveno do HTML 3.2)

117 Vodorovné čáry značka <HR> atributy WIDTH šířka čáry v pixelech nebo procentech šířky stránky ALIGN zarovnání SIZE výška čáry v pixelech NOSHADE čára bez stínu

118 Barvy kromě hexadecimálního zápisu existují předdefinované barvy

119 Změna barev pro celý dokument atributy u značky <BODY> <BODY BGCOLOR=barva TEXT=barva LINK=barva ALINK=barva VLINK=barva> význam: BGCOLOR barva pozadí TEXT barva textu LINK barva odkazu ALINK - barva odkazu, na kterém je kurzor VLINK - barva navštíveného odkazu

120 Změna barev a velikosti písma části textu značka <FONT> barva <FONT COLOR="barva">Text</FONT> velikost <FONT SIZE=n>Text</FONT> n je velikost fontu absolutní čísla od 1 do 7 (7 je největší) relativní čísla se znaménkem +/-

121 Příklady: nastavení fontu velikosti 5 <FONT SIZE=5>Text</FONT> nastavení velikosti fontu o 1 stupeň větší, než je standardní velikost <FONT SIZE=+1>Text</FONT> standardní velikost je zpravidla 3 nebo 4 Poznámka: k relativní změně velikosti o 1 stupeň lze použít značek <BIG></BIG>,<SMALL></SMALL>

122 Nastavení základní velikosti písma <BASEFONT SIZE=velikost> Poznámky: lze použít jen absolutní určení velikosti změna velikosti může být kdekoliv v textu nastavení základní a absolutní velikosti neplatí pro nadpisy, u nich lze použít jen relativní velikost

123 Tabulky vytvářejí se pomocí značky <TABLE>, </TABLE> obsah tabulky se zapisuje po řádcích řádky jsou uvozeny značkou <TR> políčka (buňky) v řádce jsou oddělena pomocí značky <TD> buňky se záhlavím se oddělují pomocí <TH> obsah je automaticky zarovnán doprostřed ukončující značky </TR>,</TD>,</TH> nejsou povinné

124 Příklad: <TABLE> <TR> <TH> Zboží <TH> Cena <TR> <TD> Vrtačka Narex EVP13 <TD> 3400 Kč <TR> <TD> Kmitací pilka BOSH <TD> 1690 Kč </TABLE>

125 Výsledek: Zboží Cena Vrtačka Narex EVP Kč Kmitací pilka BOSH 1690 Kč

126 lépe vypadá tabulka s mřížkou <TABLE BORDER="1"> <TR> <TH> Zboží <TH> Cena <TR> <TD> Vrtačka Narex EVP13 <TD> 3400 Kč <TR> <TD> Kmitací pilka BOSH <TD> 1690 Kč </TABLE>

127 Výsledek:

128 Zarovnání textu v tabulkách Horizontální atribut ALIGN hodnoty LEFT, RIGHT, CENTER pravidla lze jej použít u <TR>,<TD>, i u <TH> použití u <TR> platí pro celou řádku použití u <TD> a <TH> má větší váhu než zarovnání nastavené pro řádku použití u <TABLE> zarovnává celou tabulku v rámci stránky

129 Vertikální atribut VALIGN hodnoty TOP, BOTTOM, MIDDLE stejná pravidla jako u horizontálního zarovnání

130 Příklad: <TABLE BORDER=1> <TR VALIGN=TOP> <TD>Směrovač <TD>Aktivní prvek Internetu. Nalézá nejkratší cestu k cíli. <TR VALIGN=TOP> <TD>Směrovací tabulka <TD>Tabulka uložená ve směrovači. Obsahuje informace o nejkratší cestě k dané IP síti. </TABLE>

131 Výsledek:

132 Slučování buněk dva atributy, které se uvádějí u značky <TD> nebo <TH> slučování buněk v jednom řádku (spojení sloupců) COLSPAN=n n je násobnost políčka (počet sloupců) slučování buněk v jednom sloupci (spojení řádků) ROWSPAN=n n je násobnost políčka (počet řádků)

133 <TABLE BORDER=1 > <TR> <TH ROWSPAN=2 ALIGN="CENTER">Rok <TH COLSPAN=2>Obrat z prodeje <TR> <TH>A <TH>B <TR> <TD>2003<TD> 1,6 mil. <TD> 2,3 mil. <TR> <TD>2004<TD> 1,1 mil. <TD> 2,0 mil. <TR> <TD>2005<TD> 1,9 mil. <TD> 3,2 mil. </TABLE>

134

135 Velikost buňky atributy WIDTH a HEIGHT velikost buňky se zadává v pixelech nebo procentech odpovídající šířce, resp. výšce, tabulky procentuální zadání není součástí standardu

136 Více o značce TABLE atributy BORDER šířka rámečku v pixelech CELLPADDING vzdálenost obsahu buňky od okraje buňky v pixelech CELLSPACING mezera mezi jednotlivými buňkami v pixelech WIDTH šířka tabulky v pixelech nebo procentech šířky stránky ALIGN zarovnání na stránce, viz dříve

137 Příklad: <TABLE BORDER=1 CELLSPACING=10 CELLPADDING=5> <TR> <TH>Rok <TH>Obrat A <TH>Obrat B <TR> <TD>2003<TD> 1,6 mil. <TD> 2,3 mil. <TR> <TD>2004<TD> 1,1 mil. <TD> 2,0 mil. <TR> <TD>2005<TD> 1,9 mil. <TD> 3,2 mil. </TABLE>

138 Výsledek:

139 Nadpis tabulky značka <CAPTION>, </CAPTION> uvádí se ještě před prvním řádkem atribut ALIGN řídí umístění vůči tabulce hodnoty TOP, BOTTOM standardní umístění je nad tabulkou (TOP)

140 Poznámky k tabulkám do prázdné buňky je vhodné umístit nedělitelnou mezeru jinak se nezobrazí mřížka tabulky se dají využít i při návrhu rozložení stránky grafické odrážky uspořádání obrázků a odkazů do panelu

141 Formuláře slouží k získání informací od uživatele informace posílá klient serveru na serveru se spouští nějaký skript (CGI, ASP, ) formuláře obsahují komponenty známé z dialogových oken jiných programů vstupní zadávací pole zaškrtávací pole a výčty tlačítka

142 formulář (může jím být jen část stránky) je uvozen značkou <FORM ACTION=" /cgi/skript" </FORM> METHOD="metoda"> definice formuláře metoda GET data jsou odesílána jako součást URL POST data jsou odesílána zvlášť

143 Vstupní prvek - INPUT zahrnuje vstupní pole pro: data, heslo, zaškrtávací políčka, přepínací tlačítka (radio button) tlačítko pro odeslání dat a tlačítko reset odeslání souboru skrytá pole

144 Vstupní pole pro data (krátký text) <INPUT TYPE="TEXT" NAME="JMENO" VALUE="Josef" SIZE=20 > atributy NAME jméno prvku, pomocí tohoto řetězce se můžeme odkazovat na prvek např. v JAVAScriptu, řetězec se odesílá serveru při zasílání dat, viz dále VALUE počáteční text, který se v poli objeví

145 SIZE velikost vstupního pole (počet znaků, které je možné zapsat) MAXLENGTH šířka políčka na obrazovce (v počtu znaků); je-li menší než SIZE, text se v poli posouvá Poznámka: data se odesílají na server v následujícím formátu jmeno1=hodnota1&jmeno2=hodnota2

146 Vstupní pole pro heslo <INPUT TYPE="PASSWORD"> chování i ostatní atributy jsou stejné jako u obyčejného textového pole místo textu se zobrazují hvězdičky

147 Zaškrtávací políčko <INPUT TYPE="CHECKBOX" NAME="jmeno" VALUE="hodnota" CHECKED> atributy VALUE text, který se zašle serveru, je-li pole zaškrtnuto CHECKED nepovinný, určuje, zda bude pole zaškrtnuto po načtení stránky

148 Příklad: Výbava: <INPUT TYPE="CHECKBOX" NAME="vybava" VALUE="central" CHECKED>Centrální zamykání<br> Výbava: Centrální zamykání ponechá-li uživatel políčko zaškrtnuté, serveru se odešle vybava=central

149 Přepínací tlačítka definuje se atributem TYPE="RADIO" všechny varianty musí mít stejnou hodnotu atributu NAME a různou hodnotu atributu VALUE jedna z variant musí být označena CHECKED serveru se zasílá dvojice jméno=vybraná hodnota

150 Příklad: <INPUT TYPE="RADIO" NAME="pohlavi" VALUE="MUZ" CHECKED>Muž<BR> <INPUT TYPE="RADIO" NAME="pohlavi" VALUE="ZENA">Žena<BR> Muž Žena

151 Tlačítko pro odeslání formuláře <INPUT TYPE="SUBMIT" VALUE="Odeslat"> hodnota pole VALUE se objeví na tlačítku je možné vytvořit více tlačítek se stejným jménem a rozdílnou hodnotou např. výběrová tlačítka ANO NE

152 Tlačítko pro vynulování formuláře <INPUT TYPE=RESET> nastaví všechna pole formuláře na původní hodnoty text tlačítka je určen pomocí atributu VALUE tlačítko není posíláno serveru

153 Tlačítko s obrázkem <INPUT TYPE=IMAGE NAME=jmeno SRC="URL obrázku"> serveru jsou navíc odeslány souřadnice, kde na obrázku došlo ke kliknutí: jmeno.x=40&jmeno.y=50

154 Odeslání souboru prvek zobrazen jako textové pole, kam uživatel napíše jméno souboru a dále tlačítko pro spuštění dialogového okna na výběr souboru <INPUT TYPE=FILE NAME=Foto ACCEPT="image/*"> atributy SIZE a MAXLENGTH ACCEPT typy MIME souborů, které je možné vybrat

155 Poznámka: posílání souborů jako nekódovaná součást http protokolu je nevhodné ke značce FORM přidáme atribut ENCTYPE="multipart/form-data"

156 Skrytá pole pole s atributem TYPE=hidden pole nejsou zobrazena, ale jména a hodnoty jsou posílána zpět serveru mohou sloužit jako automatické přepínače funkce skriptů

157 Seznamy dovolují uživateli provést výběr z několika položek <SELECT NAME="Stav> <OPTION VALUE="Hodn1" SELECTED>Text1 <OPTION VALUE="Hodn2">Text2 </SELECT> položky

158 atributy značky SELECT SIZE počet najednou zobrazených řádek seznamu MULTIPLE ze seznamu může být vybrána více než jedna položka atributy značky OPTION SELECTED označuje předem vybranou položku

159 Příklad: <SELECT NAME=Stav SIZE=1> <OPTION VALUE="Svob" SELECTED> Svobodný <OPTION VALUE="Zenat">Ženatý </SELECT>

160 Víceřádkový element slouží k zadávání delších textů ve formuláři <TEXTAREA NAME=dopis ROWS=5 COLS=40> atributy ROWS počet řádků vstupního pole COLS počet sloupců vstupního pole

161 <HTML> <HEAD> <TITLE>Pokusný formulář</title> </HEAD> <BODY> <FORM ACTION="zapis.cgi" METHOD="POST"> Jméno: <INPUT TYPE="TEXT" NAME="JMENO" VALUE="Josef" SIZE=20 ><BR> Příjmení: <INPUT TYPE="TEXT" NAME="PRIJMENI" VALUE="Novák" SIZE=20 > <BR> Rodné číslo: <INPUT TYPE="TEXT" NAME="RC" SIZE=11 ><BR> Heslo: <INPUT TYPE="PASSWORD" NAME="PASS" SIZE=20 ><BR> Stav: <SELECT NAME=Stav SIZE=1> <OPTION VALUE="Svob" SELECTED> Svobodný <OPTION VALUE="Zenat"> Ženatý </SELECT> Vlastníte automobil? <INPUT TYPE="CHECKBOX" NAME="STAV" SIZE=20 ><BR> <P> <INPUT TYPE="SUBMIT" SIZE=20 VALUE="Odeslat" > <INPUT TYPE="RESET" VALUE="Reset" > </FORM> </BODY> </HTML>

162

163 Rámce rozdělení obrazovky prohlížeče na několik částí (rámců), v každéčásti je samostatný dokument např.: nabídka v levém sloupci, dokument v pravém sloupci hlavní dokument má místo těla definici rámů (rozdělení obrazovky) pomocí značek <FRAMESET> </FRAMESET> rámce se definují pomocí <FRAME> v HTML 5 označeny jako zastaralé

164 Příklad: <FRAMESET COLS="30%,70%"> <FRAME SRC= "menu.html" NAME= "ramec1"> <FRAME SRC= "uvod.html" NAME= "ramec2"> </FRAMESET> <NOFRAMES> Váš prohlížeč neumožňuje zobrazení rámů. </NOFRAMES> rozdělí obrazovku na dva rámce sloupce v poměru 30% a 70%

165 do levého sloupce zobrazí dokument menu.html, do pravého uvod.html atribut NAME pojmenovává rámec; chceme-li, aby se dokument zobrazil v rámci, doplníme do odkazu atribut TARGET <A HREF= obchod.html TARGET= ramec2 > definice rámců je možné vnořovat (např. rozdělit na sloupce a sloupce ještě na řádky

166 <FRAMESET COLS="30%,70%"> <FRAME SRC= menu.html" NAME= ramec1"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="uvod.html" NAME= ramec2"> <FRAME SRC="zaver.html" NAME= ramec3"> </FRAMESET> </FRAMESET> <NOFRAMES> nepovinná část text se zobrazí se v případě, že prohlížeč neumí rámce