Web-fejlesztés NGM_IN002_1 Alap reprezentációs technológiák
HTML Hyper Text Markup Language SGML alkalmazás Dokumentum-struktúra leírásra nem lap leírás! hiperszöveg dokumentum szemantika fejlécek listák bekezdések linkek SGML alkalmazások 1. SGML deklaráció karakterek és elválasztók 2. DTD érvényes jelölések spec. karakter entitások 3. szemantika specifikációja 4. dokumentum példány konkrét tartalom és jelölés Meta-markup language Application Markup language
HTML elemek Struktúrális szemantikát hordozó elemek pl.: heading, lists, kifejezésmód: strong, code, abbr Általános célú elemek (konténerek) span, div Elemhierarchia blokk szint! elemek elemek tartalmazása beágyazott (inline) elemek Karakterkészletek Latin-1 kötelez" támogatása mnemonikus reprezentáció pl. ö Karakter készlet kódpozíciók ISO-10646 részeiként (UCS) ~ unicode 2.0 3 vezérl" karakter (tab, CR, LF) karakter kódolás ISO-8859-1 UTF-8... Példa <META http-equiv="content-type" content="text/html; charset=euc-jp">
HTML feldolgozás Nem teljesen jól formált dokumentumok explicit és rejtett elemek kompatibilitás korábbi browserekkel minimális konformitás Engedékeny böngész"k A legtöbb HTML dokumentum nem megfelel" gondatlan szerkesztés vizuális validálás browserben automatikus HTML generálás Mégis jól megjelen" oldalak a browser próbálja a legtöbbet kihozni nincsenek szintaxis hibaüzenetek Példa HTML validálás Különböz" HTML DTD-k "strict.dtd" "loose.dtd" "frameset.dtd" Megadás <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/ strict.dtd"> Az oldalak formálisan validálandók http://validator.w3.org/ böngész"k Példa
Böngész", mint megjelenítési platform Design szempont A megjelenítés leválasztása helyes megjelenítés többféle browserben oldalak könnyebb karbantarthatósága nem vizuális browserek támogatása XHTML XML alkalmazás HTML szemantikával Er"sebben szabványosítható SGML jól formált dokumentumok XML könnyebb feldolgozni XSLT használható HTML XHTML
DOM HTML parszolás -> böngész"beli reprezentáció DOM - W3C szabványos interfész HTML (XML) tartalom elérésére objektumok attribútumok metódusok Megjelenítéshez CSS csatolása Manipulálás pl. JavaScriptb"l Példa DOM Modulok
HTML DOM elemek CSS Prezentáció specifikus részek leválasztása a HTML-r"l Egyszer! deklaráció rule selector set of style declarations Összekapcsolhatóság stíluslapok több forrásból újra felhasználhatóság hatékony cache-elés eszköz és média függetlenség alternatív stílusok
CSS formattálás dokumentum fa létrehozása médiatípus meghatározása (pl.: screen, print) a médiához tartozó stylesheetek betöltése értékekhozzárendelése a dokumentum fa elemeihez kaszkádolási szabályok formattált fa létrehozása renderelés az adott médiumra Példa Stíluslapok kaszkádolása Lowest importance Highest importance Ownership Browser default ss Viewer s ss Author s ss Specification Linked Embedded Inline Selector Contextual CLASS ID
JavaScript HTML-be ágyazható (kliens oldali) script nyelv interpreter alap nyelv (JavaScript Core) HTML DOM elérése HTML elemek eseménykezel" attribútuma ECMAScript (ISO-16262) JavaScript (folyt.) automatikus típuskoverzió! ===,!== Object-based ~ prototype-based prototípusok deklarálása nincsenek osztályok prototípusok példányosítása (használatba vétele) new operátor constructor beépített prototípusok típusok megvalósítása
JavaScript alkalmazása Kliens oldali adatok validálása kényelem, user experience hálózati forg., szerver oldali feldolg. csökkentése HTML tartalom (DOM) dinamikus manipulálása menük, layer kezelés browser függ" HTML??! HTML eseménykezelés AJAX prezentációs technológia HTML (xhtml), DOM manipulálás - JavaScript, XMLHttpRequest, iframe Önálló munka Áttanulmányozni: Alapvet" HTML elemek és attribútumaik Legfontosabb DOM elemek DOM elemek elérése, metódusok Alapvet" CSS formázás selectorok, szabályok, mértékegységek JavaScript vezérlési szerk., DOM elérés, eseménykezelés, reguláris kifejezések
Engedékeny böngész"k <h2>lousy HTML</h1> <li><a>this is not very</b> good. <li><i>in fact, it is quite <g>bad</g></em> </ul> But the browser does <a naem=suck>something. Vissza UTF-8 Unicode 2.0 (UCS) karakterkészlet elemeinek 8- bites karakteres kódolása U-00000000 U-0000007F: 0xxxxxxx U-00000080 U-000007FF: 110xxxxx 10xxxxxx U-00000800 U-0000FFFF: 1110xxxx 10xxxxxx 10xxxxxx U-00010000 U-001FFFFF: 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx U-00200000 U-03FFFFFF: 111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx U-04000000 U-7FFFFFFF: 1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx Examples: The Unicode character U+00A9 = 1010 1001 (copyright sign) is encoded in UTF-8 as 11000010 10101001 = 0xC2 0xA9 and character U+2260 = 0010 0010 0110 0000 (not equal to) is encoded as: 11100010 10001001 10100000 = 0xE2 0x89 0xA0 Vissza
HTML validátor Vissza DOM Inspector <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"> <title>parsing Example</title> <p>some text. <em>*wow*</em></p> Vissza
Stíluslap példa <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <HTML> <HEAD> <LINK href="special.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <P class="special">this paragraph should have special green text. </BODY> </HTML> P.special { color : green; border: solid red; } Vissza