alap r eprezent ci s technol gi kheckenas/okt/webf4.pdfhipersz veg dokumentum szemantika fejl cek...
TRANSCRIPT
Web-fejlesztésNGM_IN002_1
Alap reprezentációs technológiák
HTML
Hyper Text Markup LanguageSGML alkalmazásDokumentum-struktúra leírásra
nem lap leírás!hiperszöveg dokumentum szemantika
fejléceklistákbekezdéseklinkek
SGML alkalmazások
1. SGML deklarációkarakterek és elválasztók
2. DTDérvényes jelölésekspec. karakter entitások
3. szemantika specifikációja4. dokumentum példány
konkrét tartalom és jelölés
Meta-markup language
Markup language
Application
HTML elemek
Struktúrális szemantikát hordozó elemekpl.: heading, lists, kifejezésmód: strong, code, abbr
Általános célú elemek (konténerek)span, div
Elemhierarchiablokk szint! elemek
elemek tartalmazásabeágyazott (inline) elemek
Karakterkészletek
Latin-1 kötelez" támogatásamnemonikus reprezentáció pl. ö
Karakter készletkó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-1UTF-8...<META http-equiv="Content-Type" content="text/html; charset=EUC-JP">
Példa
HTML feldolgozás
Nem teljesen jól formált dokumentumokexplicit és rejtett elemekkompatibilitás korábbi browserekkelminimális konformitás
Engedékeny böngész"kA legtöbb HTML dokumentum nem megfelel"
gondatlan szerkesztés“vizuális validálás” browserbenautomatikus HTML generálás
Mégis “jól” megjelen" oldalaka browser próbálja a legtöbbet kihozninincsenek 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ókhttp://validator.w3.org/böngész"k Példa
Böngész", mint megjelenítési platformDesign szempont
A megjelenítés leválasztásahelyes megjelenítés többféle browserbenoldalak könnyebb karbantarthatóságanem vizuális browserek támogatása
XHTML
XML alkalmazás HTML szemantikával
“Er"sebben szabványosítható”
jól formált dokumentumok
könnyebb feldolgozni
XSLT használható
SGML
XML
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
objektumokattribútumokmetódusok
Megjelenítéshez CSS csatolásaManipulálás pl. JavaScriptb"l
Példa
DOM Modulok
HTML DOM elemek
CSS
Prezentáció specifikus részek leválasztása a HTML-r"lEgyszer! deklaráció
ruleselectorset of style declarations
Összekapcsolhatóságstíluslapok több forrásbólújra felhasználhatósághatékony cache-eléseszköz és média függetlenségalternatív stílusok
CSS formattálás
dokumentum fa létrehozásamé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ályokformattált fa létrehozásarenderelé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-basedprototípusok deklarálása
nincsenek osztályokprototípusok példányosítása (használatba vétele)
new operátorconstructor
beépített prototípusoktípusok megvalósítása
JavaScript alkalmazása
Kliens oldali adatok validálásakényelem, user experiencehálózati forg., szerver oldali feldolg. csökkentése
HTML tartalom (DOM) dinamikus manipulálásamenük, layer kezelésbrowser függ" HTML ??!
HTML eseménykezelésAJAX
prezentációs technológiaHTML (xhtml), DOM manipulálás - JavaScript, XMLHttpRequest, iframe
Önálló munka
Áttanulmányozni:Alapvet" HTML elemek és attribútumaikLegfontosabb DOM elemek
DOM elemek elérése, metódusokAlapvet" CSS formázás
selectorok, szabályok, mértékegységekJavaScript
vezérlési szerk., DOM elérés, eseménykezelés, reguláris kifejezések
Vissza
Engedékenybö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;}