Szabadkai Műszaki Szakfőiskola
Internet technológiák
dr Zlatko Čović
[email protected] 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 LanguageHipertext 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 következők:
jelölőnyelv
alkalmazásának
az
• Az XHTML dokumentumok megfelelnek kiterjeszthető jelölőnyelv előírásainak.
előnyei
az
a
XML
• 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
… jelölőelem (tag)
7
Az XHTML dokument
Példa 01 hello
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: 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ő:
... 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) b. XHTML 1.0 Transitional (átmeneti dokumentumok) c. XHTML 1.0 Frameset (keretes dokumentumok) 13
Az XHTML dokumentumok alapszerkezete a. Az első rész egy deklarációs rész b. A második rész egy fejléc jelölőelem:
My Life c. A harmadik rész a dokumentum törzse: ... 14
Szövegblokk XHTML formázása
és
jelölőelemek, hozzászólás pszöveg/p, az új bekezdés előtt és után üres sort hagy. br / sortörés
Példa 02 Szabadkai Műszaki Szakfőiskola vts
Szabadka
Ez egy új bekezdés (paragráfus).
15
Szövegblokk XHTML formázása
és
jelölőelemek, hozzászólás pszö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 (címek és alcímek) és
(vízszintes vonal) jelölőelemek cím, x=1..6 A 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. Példa 04
Matrix
Matrix
Matrix
Matrix
Matrix
Matrix
17
Szövegblokk XHTML formázása (címek és alcímek) és
(vízszintes vonal) jelölőelemek cím, x=1..6 A 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. pre <pre> mt_srand((double)microtime()*1000000); $length=mt_rand(5,8); $down=97; $up=122; $i=0; $password=""; 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 jelölőelem A idézet 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. blockquote 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
21
Szövegblokk XHTML formázása jelölőelem A idézet 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 jelölőelem A
szöveg
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.
div A nyelvet eredetileg Rasmus Lerdorf alkotta meg 1994-ben.
23
Szövegblokk XHTML formázása
jelölőelem Az szöveg 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ó. address Nagy István
Bajai út 334
Szabadka
24
Szövegblokk XHTML formázása jelölőelem Az szöveg 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 , <strong>, <em> és jelölőelemek Félkövér karaktereket a: szöveg általánosnál vastagabb (kiemelt – erős hangsúlyozás) szöveget: <strong>szöveg általánosnál jobban hangsúlyozott szöveget: <em>szöveg dőltbetűs szöveget pedig az: szöveg jelölőelemek segítségével tudunk létrehozni. b,strong,em,i VTS
<strong>Szabadka
<em>024
IT 26
Szöveges dokumentum XHTML sorformázása , <strong>, <em> és jelölőelemek Félkövér karaktereket a: szöveg általánosnál vastagabb (kiemelt – erős hangsúlyozás) szöveget: <strong>szöveg általánosnál jobban hangsúlyozott szöveget: <em>szöveg dőltbetűs szöveget pedig az: szöveg jelölőelemek segítségével tudunk létrehozni.
27
Szöveges dokumentum XHTML sorformázása és <small> jelölőelemek A környező szöveghez viszonyítva nagyobb betűs szöveget a: szöveg kisebb betűs szöveget pedig a: <small>szöveg jelölőelem alkalmazásával hozhatunk létre. big,small Az XHTML az Internet publikálás és alkalmazásfejlesztés nyelve. A HTML <small> (Hypertext Markup Language) nyelvet eredetileg szövegalapú dokumentumok kezelésére fejlesztették ki.
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: szöveg kisebb betűs szöveget pedig a: <small>szöveg 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 felső indexet pedig a: <sup>felső index jelölőelemek segítségével tudunk létrehozni.
sup,sub H<sub>2O
E=mc<sup>2
30
Szöveges dokumentum XHTML sorformázása <sub> és <sup> jelölőelemek Alsó indexet a: <sub>alsó index felső indexet pedig a: <sup>felső index jelölőelemek segítségével tudunk létrehozni.
31