Web-fejlesztés NGM_IN002_1

HTML
DOWNLOAD

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "Web-fejlesztés NGM_IN002_1"

Rebeka Irma Szilágyiné
7 évvel ezelőtt
Látták:

1 Web-fejlesztés NGM_IN002_1 Alap reprezentációs technológiák

2 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

3 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 részeiként (UCS) ~ unicode vezérl" karakter (tab, CR, LF) karakter kódolás ISO UTF-8... Példa <META http-equiv="content-type" content="text/html; charset=euc-jp">

4 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" " strict.dtd"> Az oldalak formálisan validálandók böngész"k Példa

Böngész", mint megjelenítési platform Design szempont A

browserben oldalak könnyebb karbantarthatósága nem

szemantikával Er"sebben szabványosítható SGML jól

5 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

6 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

7 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

8 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

9 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

10 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

11 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 U F: 0xxxxxxx U U FF: 110xxxxx 10xxxxxx U U-0000FFFF: 1110xxxx 10xxxxxx 10xxxxxx U U-001FFFFF: 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx U U-03FFFFFF: xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx U U-7FFFFFFF: x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx Examples: The Unicode character U+00A9 = (copyright sign) is encoded in UTF-8 as = 0xC2 0xA9 and character U+2260 = (not equal to) is encoded as: = 0xE2 0x89 0xA0 Vissza

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

css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <P class="special">this

13 Stíluslap példa <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <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

Hasonló dokumentumok

Web-fejlesztés NGM_IN002_1

Web-fejlesztés NGM_IN002_1 Rich Internet Applications RIA Vékony-kliens generált (statikus) HTML megjelenítése szerver oldali feldolgozással szinkron oldal megjelenítéssel RIA desktop alkalmazások funkcionalitása