Szabadkai Műszaki Szakfőiskola Internet technológiák dr Zlatko Čović chole@vts.su.ac.rs 1
CLIENT-SERVER 2
Internet technológiák Kliens oldali: -(x)html -CSS -JavaScript -XML Szerver oldali: -PHP -ASP -JSP AJAX 3
HTML (Hypertext Markup Language- Hipertext Jelölőnyelv) HTML 1.0 HTML 2.0 HTML 3.0 HTML 3.2 HTML 4.01 XHTML 1.0 HTML5 (Word Wide Web Consortium http://www.w3.org). 4
XHTML jelölőnyelv Az XHTML (Extensible HyperText Markup Language-Bővíthető Hipertext Jelölőnyelv) egy struktúrában gazdag jelölőnyelv, amely a megjelenítést a stíluslapokra bízza, moduláris alapokra épül, és együttműködik az XML (Extensible Markup Language) alapú felhasználói alkalmazásokkal. Az XHTML jelölőnyelv megjelenése és alkalmazása az Internet fejlődésének egy fontos lépcsőfokát jelenti. 5
XHTML jelölőnyelv Az XHTML jelölőnyelv alkalmazásának az előnyei a következők: Az XHTML dokumentumok megfelelnek az XML kiterjeszthető jelölőnyelv előírásainak. Az XHTML dokumentumok kompatibilisek a HTML 4 jelölőnyelvben írt dokumentumokkal. Az XHTML dokumentumok alkalmazhatják a szkripteket és az appleteket. Az XHTML nyelv tisztább és merevebb kódot biztosít, mint a HTML. 6
XHTML jelölőnyelv <body> </body> jelölőelem (tag) 7
Az XHTML dokument <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>példa 01</title> </head> <body> hello </body> </html> XHTML fájlok kiterjesztése a. html. 8
Az XHTML jelölőnyelv alapszabályai 1. Minden jelölőelem tartalmaz nyitó- és záró jelölőelemet. 2. Minden jelölőelem szabályosan egymásba ágyazandó. 3. Az XHTML dokumentumok szabályosan formázandók. Az XML által bevezetett jó formázottság követelményei: - Az XHTML dokumentumban gyökér jelölőelemet megelőzően - DOCTYPE (Document Type Definition dokumentumtípusdefiníció) deklarációt helyezünk el. - A title dokumentumcím használata kötelező. - Az XHTML dokumentumban a: <html> </html> gyökér jelölőelem a legmagasabb szintű jelölőelem. - Az összes (tetszőleges számú) jelölőelemet a gyökér jelölőelembe kell szabályosan beágyazni. - Egy nyitó- és záró jelölőelem között tetszőleges számú további jelölőelemet (vagy szöveges adatot) helyezhetünk el. 9
Az XHTML jelölőnyelv alapszabályai Az XHTML dokument alapfelépítése a következő: <!DOCTYPE...> <html> <head> <title> </title> </head> <body>... </body> </html> A jól formázott XHTML dokumentum betartja az összes XHTML szabályt! 10
Az XHTML jelölőnyelv alapszabályai 4. A jelölőelem- és attribútumnevek kisbetűvel írandók. 5. Az attribútum értékek mindig idézőjelelek közé írandók. 6. Az üres jelölőelemek per jellel (/) lezárandók. 7. Az attribútum-érték párok teljességükben kiírandók. 11
Dokumentumtípus definíciók A DTD dokumentumtípus definíció (Document Type Definition), olyan XML leírások összessége, amelyek meghatározzák a dokumentumtípus definíciót használó dokumentum érvényes struktúráját. A DTD meghatározza a dokumentum által elérhető jelölőelemeket és attribútumokat. Az XHTML jelölőnyelvnél három típusú DTD-t ismerünk: 12
Dokumentumtípus definíciók a. XHTML-1.0-Strict (szigorú megfelelésű dokumentumok) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> b. XHTML 1.0 Transitional (átmeneti dokumentumok) <!DOCTYPE htmlpublic "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> c. XHTML 1.0 Frameset (keretes dokumentumok) <!DOCTYPE htmlpublic "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- frameset.dtd"> 13
Az XHTML dokumentumok alapszerkezete a. Az első rész egy deklarációs rész <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns=http://www.w3.org/1999/xhtml xml:lang="xx" lang="xx"> b. A második rész egy fejléc jelölőelem: <head> <title>my Life</title> </head> c. A harmadik rész a dokumentum törzse: <body>... </body> 14
Szövegblokk XHTML formázása <p> és <br /> jelölőelemek, hozzászólás p szöveg /p, az új bekezdés előtt és után üres sort hagy. br / sortörés <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>példa 02</title> </head> <body> <!-- ez egy hozzászólás (comment) --> Szabadkai Műszaki Szakfőiskola vts <br /> Szabadka <p>ez egy új bekezdés (paragráfus).</p> </body> </html> 15
Szövegblokk XHTML formázása <p> és <br /> jelölőelemek, hozzászólás p szöveg /p, az új bekezdés előtt és után üres sort hagy. br / sortörés 16
Szövegblokk XHTML formázása <hx> (címek és alcímek) és <hr /> (vízszintes vonal) jelölőelemek <hx>cím</hx>, x=1..6 A <hx> jelölőelem alkalmazása előtt és után üres sor következik. A hr / jelölőelem egy vízszintes elválasztó vonalat helyez el a weboldalon a rendelkezésre álló szélességben. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>példa 04</title> </head> <body> <hr /> <h1>matrix</h1> <h2>matrix</h2> <h3>matrix</h3> <h4>matrix</h4> <h5>matrix</h5> <h6>matrix</h6> <hr /> </body> </html> 17
Szövegblokk XHTML formázása <hx> (címek és alcímek) és <hr /> (vízszintes vonal) jelölőelemek <hx>cím</hx>, x=1..6 A <hx> jelölőelem alkalmazása előtt és után üres sor következik. A hr / jelölőelem egy vízszintes elválasztó vonalat helyez el a weboldalon a rendelkezésre álló szélességben. 18
Szövegblokk XHTML formázása <pre> jelölőelem A <pre> jelölőelem segítségével előformázott szöveget tudunk létrehozni. A szövegblokk ilyenkor pontosan úgy jelenik meg, ahogy azt begépeltük az XHTML dokumentumba. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>pre</title> </head> <body> <pre> mt_srand((double)microtime()*1000000); $length=mt_rand(5,8); $down=97; $up=122; $i=0; $password=""; </pre> </body> </html> 19
Szövegblokk XHTML formázása <pre> jelölőelem A <pre> jelölőelem segítségével előformázott szöveget tudunk létrehozni. A szövegblokk ilyenkor pontosan úgy jelenik meg, ahogy azt begépeltük az XHTML dokumentumba. 20
Szövegblokk XHTML formázása <blockquote> jelölőelem A <blockquote cite= URL cím >idézet</ blockquote> jelölőelem hosszú idézetek megjelenítésére szolgál. Az URL cím az idézet forrásának a webcíme. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>blockquote</title> </head> <body> <blockquote cite= http://www.php.net > A nyelvet eredetileg Rasmus Lerdorf alkotta meg 1994-ben, de a ma létező egyetlen (és hivatalos specifikáció híján de facto szabvánnyá vált) PHP implementációt már a PHP Group tartja karban és fejleszti. A PHP a saját licence alatt kerül kiadásra, és a Free Software Foundation szabad szoftverként tartja számon </blockquote> </body> </html> 21
Szövegblokk XHTML formázása <blockquote> jelölőelem A <blockquote cite= URL cím >idézet</ blockquote> jelölőelem hosszú idézetek megjelenítésére szolgál. Az URL cím az idézet forrásának a webcíme. 22
Szövegblokk XHTML formázása <div> jelölőelem A <div>szöveg</div> jelölőelem segítségével a weboldalt részekre tudjuk osztani. Ez akkor célszerű, amikor a részekre önálló stílust szeretnénk alkalmazni. A div jelölőelemmel a következő attribútumokat használhatjuk: Az id= name attribútum alkalmazásával a name egyedileg meghatározza a jelölőelemet. A class= name attribútum alkalmazásával a name azt az osztálynevet határozza meg, amelyikhez tartozik a jelölőelem. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>div</title> </head> <body> <div id="style"> A nyelvet eredetileg Rasmus Lerdorf alkotta meg 1994-ben. </div> </body> </html> 23
Szövegblokk XHTML formázása <address> jelölőelem Az <address>szöveg</address> jelölőelem segítségével a weboldal szerzőjének az e-mail címét adhatjuk meg. Az address jelölőelem általában a weboldal kezdetén vagy végén található. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>address</title> </head> <body> <address> Nagy István <br /> Bajai út 334 <br /> Szabadka </address> </body> </html> 24
Szövegblokk XHTML formázása <address> jelölőelem Az <address>szöveg</address> jelölőelem segítségével a weboldal szerzőjének az e-mail címét adhatjuk meg. Az address jelölőelem általában a weboldal kezdetén vagy végén található. 25
Szöveges dokumentum XHTML sorformázása <b>, <strong>, <em> és <i> jelölőelemek Félkövér karaktereket a: <b>szöveg</b> általánosnál vastagabb (kiemelt erős hangsúlyozás) szöveget: <strong>szöveg</strong> általánosnál jobban hangsúlyozott szöveget: <em>szöveg</em> dőltbetűs szöveget pedig az: <i>szöveg </i> jelölőelemek segítségével tudunk létrehozni. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>b,strong,em,i</title> </head> <body> <b>vts</b><br /> <strong>szabadka</strong><br /> <em>024</em><br /> <i>it</i> </body> </html> 26
Szöveges dokumentum XHTML sorformázása <b>, <strong>, <em> és <i> jelölőelemek Félkövér karaktereket a: <b>szöveg</b> általánosnál vastagabb (kiemelt erős hangsúlyozás) szöveget: <strong>szöveg</strong> általánosnál jobban hangsúlyozott szöveget: <em>szöveg</em> dőltbetűs szöveget pedig az: <i>szöveg </i> jelölőelemek segítségével tudunk létrehozni. 27
Szöveges dokumentum XHTML sorformázása <big> és <small> jelölőelemek A környező szöveghez viszonyítva nagyobb betűs szöveget a: <big>szöveg</big> kisebb betűs szöveget pedig a: <small>szöveg</small> jelölőelem alkalmazásával hozhatunk létre. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>big,small</title> </head> <body> Az XHTML az <big> Internet publikálás és alkalmazásfejlesztés</big> nyelve. A HTML <small> (Hypertext Markup Language) </small> nyelvet eredetileg szövegalapú dokumentumok kezelésére fejlesztették ki. </body> </html> 28
Szöveges dokumentum XHTML sorformázása < big> és <small> jelölőelemek A környező szöveghez viszonyítva nagyobb betűs szöveget a: <big>szöveg</big> kisebb betűs szöveget pedig a: <small>szöveg</small> jelölőelem alkalmazásával hozhatunk létre. 29
Szöveges dokumentum XHTML sorformázása <sub> és <sup> jelölőelemek Alsó indexet a: <sub>alsó index</sub> felső indexet pedig a: <sup>felső index</sup> jelölőelemek segítségével tudunk létrehozni. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang= sr" lang= sr"> <head> <title>sup,sub</title> </head> <body> H<sub>2</sub>O <br /> E=mc<sup>2</sup> </body> </html> 30
Szöveges dokumentum XHTML sorformázása <sub> és <sup> jelölőelemek Alsó indexet a: <sub>alsó index</sub> felső indexet pedig a: <sup>felső index</sup> jelölőelemek segítségével tudunk létrehozni. 31