) zobrazován neproporcionálním písmem



<EM>



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



 <SAMP>



zápis výstupu z různých programů a skriptů zobrazován neproporcionálním písmem



<STRONG>



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



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



písmo



 Příklad: Líh (ethanol) patří mezi alkoholy. Jeho chemická značka je C<SUB>2 H<SUB>5 OH.



Výsledek: Líh (ethanol) patří mezi alkoholy. Jeho chemická značka je C2H5OH.



Poznámka: • značky pro vyznačování textu se nemají křížit • nestandardní značka  pro blikání textu



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



  > > < < " " & & © ©



 • 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



- –



 Předformátovaný text • je uzavřen mezi značky 
, 
 • 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.



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




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



 Hypertextové odkazy • odkazy na jiné soubory (dokumenty html, programy, ...) ve formátu URL  Text, který se zobrazí nebo odkaz na obrázek 



• odkazy jsou zobrazeny odlišnou barvou (a podtržením), rozlišují se navštívené a nenavštívené odkazy



 Příklad:  Kliknutím zobrazíte server Seznam 



Výsledek:



 • odkazy jsou relativní nebo absolutní – relativní: • vztaženy k umístění daného dokumentu • příklady:



seznamy/lide.htm www.seznam.cz – absolutní: • musí začínat identifikací protokolu • příklad:



http://www.fd.cvut.cz/katedry/



 Protokoly file



soubor na lokálním disku



ftp



soubor přístupný pomocí FTP



gopher Gopher protokol http



webovské stránky



mailto



adresa elektronické pošty



news



diskusní skupiny



telnet



terminálový přístup



 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



 Odkazy na místo v dokumentu • odkaz na určité místo v dokumentu se zapisuje obdobně jako jiné odkazy Text odkazu



• identifikace místa v dokumentu – místo, na které se chceme odkázat, označíme: 



 Příklad: • odkaz na začátek dokumentu – na začátek dokumentu umístíme značku  – na místo, kde chceme umístit odkaz na začátek dokumentu, vložíme značku Na začátek



 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



 Nečíslovaný seznam • ohraničen značkami 
,
, • položky seznamu jsou ohraničeny značkami 
,
 – ukončující značka  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 
 i 




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




 Výsledek: Pracovní dny v týdnu: • • • • •



pondělí úterý středa čtvrtek pátek



 Číslovaný seznam • seznam položek s automatickým číslováním • ohraničen značkami 
,
 • položky seznamu jsou ohraničeny značkami 
,
 – ukončující značka  je nepovinná



• standardní číslování položek je provedeno arabskými číslicemi – lze opět změnit pomocí atributu TYPE, viz dále



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




 Výsledek: Pracovní dny v týdnu: 1. 2. 3. 4. 5.



pondělí úterý středa čtvrtek pátek



 • atribut TYPE mění způsob číslování Hodnota Způsob číslování Příklad TYPE 1 1, 2, 3, 4 arabské číslice A



velká písmena



A, B, C, D



a



malá písmena



a, b, c, d



I



velké římské číslice I, II, III, IV



i



malé římské číslice i, ii, iii, iv



 Poznámky: • způsob číslování lze měnit i uvnitř seznamu – atribut TYPE může být použit u 
 i 




• atribut START u značky 
 určuje počáteční hodnotu • atribut VALUE u značky 
 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



 Příklad: 
 
Svačina 
Spacák 
Nůž 
Batoh 
Mapa 




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



 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 
, 
 • definovaný termín uvozen 
 • definice uvozena 




 Příklad: 
 
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. 




 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.



 Obrázky • vkládají se pomocí značky  • podporované formáty obrázků – bitmapové • JPG, GIF, PNG



– vektorové • nově standardizovaný formát SVG na principu XML



 Příklad: 
 Představujeme Vám nové šaty 
  
 Jak se Vám líbí?



 Výsledek:



 • obrázek je vložen jako samostatný odstavec, jinak by byl součástí textu (což je také možné) 
 Představujeme Vám nové šaty  Jak se Vám líbí?



 Značka  má mnoho atributů: 



 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ě



 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ředstavujeme Vám nové šaty  Jak se Vám líbí?



 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



 – 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



 • speciální atribut CLEAR u značky 
 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í



 Příklad: • bez atributu CLEAR 
 Představuje Vám nové šaty z letní kolekce. Jak se Vám líbí?  
 
Kontakt
 Módní salón Jehlička
 Pod sakem 24
 259 98 Kabátovice



 Výsledek:



 • s atributem CLEAR 
 Představuje Vám nové šaty z letní kolekce. Jak se Vám líbí?  
 
Kontakt
 Módní salón Jehlička
 Pod sakem 24
 259 98 Kabátovice



 Výsledek:



 Obrázek jako odkaz • obrázek může sloužit také jako odkaz   



Poznámka: – nepsané pravidlo - atribut ALT by měl být uveden



 Formáty obrázků



GIF • 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)



 • 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.)



 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í



 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



 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



 Ukázka:        
Vektorový obrázek v SVG
 <svg:svg width="4in" height="3in"> <svg:desc>This is a blue circle with a red outline <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    



 Klikací mapy • klikací mapa – 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í 



 • definice aktivní oblasti – pomocí značky  



• tvar oblasti – RECT - obdélník – CIRCLE – kruh – POLY - mnohoúhelník



 • 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í  s atributem USEMAP



 



Příklad:



 <MAP NAME="Tlacitka">     



 • 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">   



 Vložení libovolných multimediálních objektů • je umožněno až od verze HTML 4 pomocí značky