Aplikační a programové vybavení

Aplikační a programové vybavení Internet, WWW, HTML a spol.

HTML • Nejpoužívanější formát dat textových dokumentů poskytovaných v rámci služby WWW. • HTML (Hyper Text Markup Language) je jazyk pro popis struktury dokumentu. • Hypertext jetextový dokument provázaný odkazy s jinými dokumenty. • Jazyk HTML je definovaný v jazyce SGML (Standard Generalized Markup Language) pomocí DTD (Document Type Definition). • DTD definuje elementy, které mohou být použity, a jejich chování. • Poslední kompletní verze – HTML 4.01 z roku 1999 http://www.w3.org/TR/html401/ • Od roku 2007 se vyvíjí HTML5 (společně s XHTML5) – je dobře použitelná

Struktura HTML • Stromovástruktura HTML prvků • <h1id='sekce1'>Nadpis 1</h1> • Prvek (element) • jméno elementu – uzavřené v lomených závorkách (element name) – h1 • počáteční značka (start tag)– <h1> • koncová značka (end tag) – </h1> • tělo (content) – Nadpis 1 • http://www.w3.org/TR/html5/index.html

Struktura HTML • <h1id='sekce1'>Nadpis 1</h1> • Atribut(attribute) – vlastnosti elementu, zadávají se v počáteční značce v libovolném pořadí a oddělují se mezerou. • jméno – id • hodnota – sekce1 • Každý atribut smí být u elementu uvedený maximálně jednou. • http://www.w3.org/TR/html5/index.html#attributes-1

Struktura HTML • Entity – odkazy na speciální znaky, začínají znakem &(ampersand) a končí znakem ; (středník) • symbolické – jméno znaku >(greater) • číselné – číslo znaku v Unicode znakové sadě > nebo > • http://www.w3.org/TR/html5/named-character-references.html • Komentáře – část textu, která není interpretována •  • Problematické jsou implementace HTML prohlížečů, které zobrazují i syntakticky nesprávné HTML.

HTML – příklad <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Titulek stránky</TITLE> </HEAD> <BODY ID=main> <P>Ahoj světe! <UL> <LI class=first><P>1. položka seznamu <LI><P>1. položka seznamu </UL> </BODY> </HTML>

XML • XML (Extensible Markup Language) jeobecný jazyk pro popis strukturovaných dat. • Jazyk definovaný v jazyce SGML (obsahuje elementy, atributy, entity) • Není definován vzhled ani interpretace dat. • Pravidla zápisu: • povinné záhlaví: <?xml version="1.0"?> • názvy elementů malými písmeny • hodnoty atributů uzavřené v uvozovkách • počáteční i koncová značka je vždy povinná • je-li prázdná, je možné použít stažený tvar <element /> • záleží na velikosti písmen

XML – Příklad <?xml version='1.0' encoding='utf-8' ?> <menu-item> <name>slozka1</name> <caption last_modified='1.2.2007'>První složka</caption> <description /> <subitems> <menu-item> <name>slozka2</name> <caption>První podsložka</caption> </menu-item> <menu-item> <name>slozka3</name> <caption>Další podsložka</caption> </menu-item> </subitems> </menu-item>

HTML × XHTML × XML

HTML × XHTML × XML • HTML4 • kvůli nepovinným prvkům má složitá pravidla zpracování • složitá implementace interpreteru • vizuální i sémantické značky • XML • rychlejší a efektivnější zpracování než HTML • „Aplikace XML“ je definice interpretace XML dat. • XHTML – nová aplikace HTML v jazyce XML • používá stejné elementy jako HTML • zjednodušená syntaxe a pravidla zpracování • poslední verze 1.0 z roku 2000 (verze 1.1 ani 2.0 není a nebude dokončena) • pouze sémantické značky • HTML5 • vývoj od roku 2007 • řada nových funkcí je již implementována • pouze sémantické značky • syntaxe HTML i XHTML

HTML 5 • je zpětně kompatibilní – lze používat už dnes • formálně není založeno na SGML – výhody XHTML • zlepšeno zejména: • vkládání objektů do stránky (video, flash, volná kresba) • formulářové prvky a rozložené formuláře • odstraněny vizuální značky a atributy – výhradní použití CSS • nové značky a atributy, rozšiřitelnost

(X)HTML • elementy • blokové (block-level elements) – P, H1, DIV, … • řádkové (inline elements) - A, IMG, SPAN, … • řádkové elementy mohou být vložené uvnitř řádkových nebo blokových • blokové mohou být vložené pouze uvnitř blokových • společné atributy • id, class – využití pro styly nebo skriptování na straně klienta • style – definice inline stylu prvku • title – popisek, který se zobrazí pod myším kurzorem • a další http://www.w3.org/TR/html5/elements.html#global-attributes

(X)HTML • XHTML lze odeslat jako XML (Content-type: application/xhtml+xml): • Internet Explorer tento typ obsahu nepodporuje. • Při syntaktické chybě se stránka vůbec nezobrazí. • Pokud je XHTML odesílán jako (Content-type: text/html), se zpracuje se jako HTML: • Nutné dodržet postupy pro správné zobrazení: http://www.w3.org/TR/xhtml1/#guidelines • U HTML 5 je to jedno – HTML a XHTML verze je jeden standard • je dobré dodržovat jednotnou konvenci souboru.

DTD • DTD je konkrétní definice syntaxe (gramatiky) HTML dokumentu. • povolené prvky, atributy a jejich hodnoty • definice pravidel zanořování elementů • Nejpoužívanější (X)HTML DTD: • Strict(výchozí) – povoluje pouze elementy pro popis struktury, zakazuje elementy pro definici vzhledu • Transitional– povoluje elementy pro definici vzhledu, zajišťuje kompatibilitu se staršími aplikacemi

DTD • odkaz na standardní DTD pro HTML 4: • <!DOCTYPE kořenový-element PUBLIC 'soubor'> • je možné definovat vlastní typy dokumentů: • <!DOCTYPE kořenový-element SYSTEM 'soubor'> • „Validace“ (validation) – kontrola správnosti dokumentu vzhledem k DTD http://validator.w3.org • „Validní“ dokument je dokument, který neporušuje pravidla definovaná v DTD. • Validní dokument by měl být všemi prohlížeči interpretován stejně.

DTD – příklady • HTML 5 • <!DOCTYPE html> • XHTML Strict • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • Prohlížeče obvykle zobrazí i dokumenty, které neodpovídají DTD a pokusí se chyby opravit / ignorovat. • Výsledek se může lišit podle prohlížeče – chování není standardizované.

Kterou DTD použít? • Rámce (rozdělené okno, frameset) jsou zrušeny. • U nových projektů by se měla používat verze HTML5 nebo HTML4 Strict. • Prakticky není důvod nepoužívat XHTML. • Jednodušší a přísnější pravidla = jednodušší život a méně chyb • Pokud je XHTML dokument odesílán jako HTML, pak se zpracuje stejně jako HTML dokument. • Současně je možné využít XML parser. • DTD a validita stránek jsou velmi důležité • zejména pro Internet Explorer

Styly HTML Strict a HTML 5 nemá vizuální značky, neumožňuje změnit vzhled dokumentu. XHTML je jazyk pro popis sémantiky a struktury dokumentu. Pro změnu vzhledu dokumentu se používají externí styly definované v jazyce CSS. CSS (Cascading Style Sheets) je jazyk pro definici pravidel formátování dokumentu. Poslední verze je CSS 2.1 z roku 2007 http://www.w3.org/TR/CSS21/ CSS3 je ve vývoji, ale řada vlastností je již podporována.

Styly • IE podporuje CSS2 od verze 8, podpora CSS3 je částečná od verze 10 • http://www.w3.org/TR/CSS/ • http://acid3.acidtests.org/ • http://css3test.com/ • http://tools.css3.info/selectors-test/test.html • Pomocí stylů se mění zobrazení jednotlivých prvků HTML dokumentu. • Styly nahrazují zrušené značky a atributy: • FONT, BASEFONT, BIG, CENTER, S, STRIKE, U, …

Styly • Pomocí stylů je možné nastavit • písmo (řez, velikost, barva, zarovnání) • barvy, pozadí, obrázky na pozadí • rámečky, odsazení, velikosti… • Při formátování HTML dokumentu je klíčové myslet na rozdíl mezi oknem prohlížeče a papírem. • Je nevhodné používat pevné velikosti a pozice. • Není ideální používat rozměry v pixelech. • Je dobré brát v úvahu, že každý má jinak velké okno prohlížeče.

Literatura • www.w3.org/community/webed/wiki/ • https://developer.mozilla.org/en-US/docs/Web • https://developers.google.com/university/ • http://reference.sitepoint.com/css • http://www.w3c.org • Základní kroky tvorby WWW stránek: • ujasnit si smysl a obsah • navrhnout strukturu stránek • navrhnout rozložení obsahu • napsat HTML a potom CSS

Styly • Při formátování HTML dokumentu je klíčové myslet na rozdíl mezi oknem prohlížeče a papírem. • Syntaxe CSS: • selector {vlastnost: hodnota;} • Příklad: body {color: black;} • za složenými závorkami se nepíše ; • Selektor: • jméno elementu – h1 {color: white} • třída (class) - .table_list {width: 100%} • id - #input_name {width: 40px}

Styly • Selektor: • li, a – pro elementy <li> a <a> • li a – pro elementy <a> uvnitř <li> • li>a – pro elementy <a> přímo uvnitř <li> • li.menu – elementy <li> třídy 'menu' • .menu – pro elementy třídy 'menu' • Pseudo-třídy • hover, active, focus, link, visited, nth-child, … • li a:visited – navštívený odkaz uvnitř li • li.menu a#prvni:link – nenavštívený odkaz s id 'prvni' v <li> třídy 'menu'

Vložení stylu do HTML • Externí soubor(y): • <link rel='stylesheet' type='text/css' href='soubor.css' /> • nejvýhodnější, styl celého webu je na jednom místě • odkaz pomocí selectoru (prvek, class, id) • Uvnitř stránky: • <style type='text/css'>body {color: green}; …</style> • používá se ke zrychlení načtení stránky • Inline(uvnitř HTML): • <body style='color: green'>… • nezapisuje se selector • má nejvyšší prioritu

Styly • Styl se dědí z nadřazeného prvku na podřazený – nejvyšší prvek je <body>. • Při konfliktu vyhrává to, co je danému prvku nejblíže. • Další konflikty se řeší podle priority: • inline styl (atribut style) • styl ve stránce (prvek <style>) • externí styl <prvek link> • id • třída

Příklad <style type="text/css"> body {color: grey; background: #eeeeee;} h3 {background: #cccccc; color: red;} .modry {color: blue;} #jediny {color: white;} h3.fialovy {color: magenta;} .cerny {color: black} </style> <body> <h3>první</h3> <h3 class='modry'>druhý</h3> <h3 id='jediny'>třetí</h3> <h3 class='fialovy'>čtvrtý</h3> <h3 class='fialovy modry'>pátý</h3> <h3 class='modry cerny'>šestý</h3> </body>

CSS – barvy • na obrazovce se barvy míchají aditivně • nastavení barvy je možné • názvem – black, white, blue… • složkami – rgb(255, 0, 0) • číslem v 16 soustavě – #FF0000 • složkové zadání udává intenzitu složky • rgb(255, 255, 255)nebo #FFFFFF je tedy bílá • zkrácený zápis #FFF • na papíře se barvymíchají subtraktivně • barva na papíře odráží světlo

CSS – odsazení • velikost: • šířka/výška – width/height • odsazení: • odsazení – margin • rámeček – border • vyplnění – padding • margin je okolo HTML prvku • padding je uvnitř HTML prvku • border je uvnitř HTML prvku

HTML hlavička • Prvek head může obsahovat následující prvky: • title – nastavení záhlaví stránky - povinné • meta - nastavení informací o stránce (metadata) – povinné (např. pro uložení stránky): • <meta charset=‘utf-8' /> • style – vložení stylu do stránky • link – definice souvisejících souborů (nejčastěji používaný je externí styl) • script – vložení skriptu nebo odkazu na skript na spuštěný na straně klienta (dnes jen Javascript)

Otázky? Proč se nesmí počáteční a koncové značky HTML prvků křížit? Co se stane, když není u HTML dokumentu uvedeno <!DOCTYPE ? Dá se pomocí CSS nakreslit ikona na smazání záznamu? Co má společného XML a HTML? Proč není HTML5 ještě standardizováno? Kde je řečeno, že <title> senesmí v dokumentu vyskytovat 2× ? Když jde rámeček udělat pomocí CSS, je lepší použít CSS nebo rámeček nakreslit jako obrázek? Má smysl číst DTD?

Aplikační a programové vybavení