1 / 35

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.

Download Presentation

Aplikační a programové vybavení

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

  2. 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á

  3. 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

  4. 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

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

  6. 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>

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

  8. 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>

  9. HTML × XHTML × XML

  10. 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

  11. 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

  12. (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

  13. (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.

  14. 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

  15. 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ě.

  16. 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é.

  17. 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

  18. 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.

  19. 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, …

  20. 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.

  21. 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

  22. 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}

  23. 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'

  24. 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

  25. 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

  26. 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>

  27. 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

  28. 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

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

  30. 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?

More Related