a webböngésző (kliens) adatokat kérhet le a kiszolgálóról (szerver), illetve adatokat küldhet a kiszolgálóra A kérést a kliens kezdeményezi
HTTPS protokoll
A https séma szintaktikailag megegyezik a http sémával, de jelzi a böngészőnek, hogy használni kell az SSL/TSL titkosító réteget az adatforgalom védelme érdekében
2
2011.09.28.
HTTP kérés (request)
1. sor ,,METÓDUS ERŐFORRÁS VERZIÓ" alakú GET
/images/logo.gif HTTP/1.1
Ezt követik a fejléc (header) sorok ,HEADER: ÉRTÉK„ alakban Accept:
text/plain,text/html Accept-Language: en
A header sorok végét egy üres sor jelzi
Metódusok I. HTTP protokoll 8 féle metódust definiál. A metódusok (más szóval verbek) a megadott erőforráson végzendő műveletet határozzák meg. HEAD
GET
A megadott erőforrás letöltését kezdeményezi. Ez messze a leggyakrabban használt metódus.
POST
Ugyanazt adja vissza, mint a GET, csak magát az üzenettestet hagyja ki a válaszból.
Feldolgozandó adatot küld fel a szerverre. Például HTML űrlap tartalmát. Az adatot az üzenettest tartalmazza.
PUT
Feltölti a megadott erőforrást.
3
2011.09.28.
Metódusok II. HTTP protokoll 8 féle metódust definiál. A metódusok (más szóval verbek) a megadott erőforráson végzendő műveletet határozzák meg. DELETE
TRACE
Visszaküldi a kapott kérést. Ez akkor hasznos, ha a kliens oldal arra kíváncsi, hogy a köztes gépek változtatnak-e illetve mit változtatnak a kérésen.
OPTIONS
Törli a megadott erőforrást.
Visszaadja a szerver által támogatott HTTP metódusok listáját.
CONNECT
Átalakítja a kérést transzparens TCP/IP tunnellé. Ezt a metódust jellemzően SSL kommunikáció megvalósításához használják.
Válasz (response)
A HTTP válasz első sora a státuszsor, amely ,,VERZIÓ STÁTUSZKÓD INDOKLÁS" alakú. A státuszkód (status code) egy három számjegyű szám, az indoklás (reason phrase) egy angol nyelvű üzenet. HTTP/1.1
200 OK
4
2011.09.28.
Státuszkódok jelentése
http://tools.ietf.org/html/rfc2616 1xx:
Informatív – Kérés megkapva. 2xx: Siker – A kérés megérkezett; értelmezve, elfogadva. 3xx: Átirányítás – A kérés megválaszolásához további műveletre van szükség. 4xx: Kliens hiba – A kérés szintaktikailag hibás vagy nem teljesíthető. 5xx: Szerver hiba – A szerver nem tudta teljesíteni az egyébként helyes kérést.
Header sorok
A státuszsor után header sorok következhetnek ,,HEADERNÉV: ÉRTÉK" alakban Date:
Mon, 23 May 2009 22:38:34 GMT Server: Apache/1.3.27 (Unix) (Red-Hat/Linux) Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT Accept-Ranges: bytes Content-Length: 438 Connection: close Content-Type: text/html; charset=UTF-8
5
2011.09.28.
Perzisztens kapcsolat
A HTTP/0.9 és 1.0 verziókban a kapcsolat egy kérés-válasz után lezáródik A HTTP/1.1 verzióban bevezettek egy mechanizmust a kapcsolat életben tartására, így a kapcsolat újrafelhasználható további kérésekhez. (perzisztencia) gyorsíthatja
a kommunikációt, mert a kliensnek nem kell újratárgyalnia a TCP kapcsolatot minden egyes kérésnél.
URL, URN, URI, stb..
Hálózati erőforrásokra (weboldalakra, e-mail címekre, letölthető fájlokra, stb.) az URL-ek (Uniform Resource Locator - Egységes erőforrás helymeghatározó) segítségével hivatkozunk. Tartalmazza:
eléréshez szükséges kommunikációs protokoll nevét (pl. HTTP, HTTPS, FTP, MAILTO, NEWS, TELNET) számítógép, vagy tartomány nevét (vagy IP címét), egy hálózati port számot, amelyen az adott szolgáltatás elérhető, és azt az elérési utat, amelyen az erőforrás megtalálható.
Ne csak hálózati erőforrásoknak legyen azonosítója, hanem absztrakt erőforrásoknak is (könyv, folyóirat, stb.) URN (Uniform Resource Name - Egységes erőforrás név) Gondok az URL-el Állandóan
változhatnak Az URL tartalma is változhat
7
2011.09.28.
URN
Példa: urn:isbn:0-520-02356-0 A név nem változik A név világviszonylatban egyedi Az
URN kiadása ellenőrzött folyamat
Az URL-re továbbra is szükség van
URI
URI: Uniform Resource Identifier (Egységes erőforrás azonosító) URL+URN=URI URI
URL
URN
8
2011.09.28.
A HTML nyelv
HyperText Markup Language - Hiperszöveg jelölőnyelv SGML (Standard Generalized Markup Language szabványos, kiterjesztett jelölő nyelv) –en alapul (1986-os szabvány) Szöveges állomány .html vagy .htm kiterjesztéssel Tartalmaz
Tag (formázóutasítás) pl. félkövér Objektumhivatkozásokat pl. "../kepek/logo.gif”
HTML történet
1995 november: HTML 2.0 HTML 3.0
1997 január: HTML 3.2 1997 december: HTML 4.0
kliens oldali scriptnyelvek (pl. javascript) Stíluslapok használata
1999 december: HTML 4.01
képek szöveggel történő körbefolyatása, táblázatok, matematikai képletek használata. nem lett belőle hivatalos szabvány (túl komplex)
Javításokat tartalmaz Ez az utolsó (SGML-en alapuló) verzió
HTML 5: jelenleg fejlesztés alatt…
9
2011.09.28.
XHTML
Igény: webes adatbázisok közti kommunikációt lehetővé tévő, bővíthető nyelv => XML (eXtensible Markup Language - Bővíthető jelölőnyelv) XHTML A
HTML 4.01 XML alapokon történő megvalósítása 2000. január: XHTML 1.0 2001. május: XHTML 1.1 XHTML 2.0: leállt a fejlesztés, az erőforrásokat a HTML 5 fejlesztésére fordítják
Baj a HTML-el A dokumentum tartalmának leírására lenne jó Összemosódik a tartalom és a megjelenés Megoldás: CSS - Cascading Style Sheets (lépcsőzetes stíluslapok)
Szétválasztható
a tartalom és a megjelenés
A táblázatnak ugyanaz a kódja, a CSS dönti el a kinézetét
10
2011.09.28.
HTML Struktúra
Dokumentum típus (DTD)
Oldalcím tartalom
Fej
Törzs
HTML példa Első weblapom
Ez az első próbálkozásom. Remélem sikerül!
11
2011.09.28.
HTML 4.01 dokumentumtípusok HTML 4.01 Strict Ezt akkor ajánlatos használni, amikor tiszta (prezentációs lehetőségektől mentes) kódot állítunk elő, és stíluslapokat használunk. A szükséges kód:
HTML 4.01 dokumentumtípusok HTML 4.01 Transitional (Loose) Ha ki akarjuk használni a HTML prezentációs lehetőségeit, vagy amikor olyan böngészőre fejlesztünk, amely nem ismeri a stíluslapokat, ezt a dokumentumtípust használhatjuk. A szükséges kód:
12
2011.09.28.
HTML 4.01 dokumentumtípusok HTML 4.01 Frameset A nevéből is következik, hogy ezt akkor használjuk, ha az ablakot több keretre (frame) akarjuk felosztani. Ezzel majd a keretekről szóló fejezetben foglalkozunk. A szükséges kód:
M TarE tan lom ü
Néhány gyakran használt HTML tag
Bekezdés létrehozás:
Sortörés: 1-es szintű címsor:
Erősen kiemelt szöveg: <strong> Hiperhivatkozás: Kép beszúrása:
13
2011.09.28.
Validálás
Ellenőrizhető, hogy az oldalunk megfelel-e a szabványnak => validálás (érvényesség vizsgálat) Ellenőrzés: http://validator.w3.org/
Validálás a Firefox böngészőprogramban Telepítsük a HTML validator kiterjesztést a http://users.skynet.be/mgueury/mozilla/ címről! (rövidített url: http://bit.ly/qLVIX6) Ezek után a böngészőprogram jobb alsó sarkában látjuk, hogy a megtekintett oldal valid-e.
Nem mindig ugyanazt az eredményt adja, mint a W3C validátora!
14
2011.09.28.
Elavult tagek, paraméterek
A HTML 4.01 szabványban sok tag/paraméter elavultként van megjelölve Ezek kiválthatók a stíluslapok alkalmazásával
Szia
Szia
Részlet a Web-fejlesztés I. tananyagból
Stílusok külső állományban
A stílusok kivihetők külső állományba Teljesen szétválasztható a HTML kód és a megjelenés Később
részletesen megnézzük
15
2011.09.28.
Honlapszerkesztés eszközei
szövegszerkesztő program (egyszerű szövegként (txt) képes menteni)
Honlapszerkesztés eszközei
Kódszintű szerkesztőprogram
16
2011.09.28.
Honlapszerkesztés eszközei
WYSIWYG (alakhű) programok
Ajánlott szerkesztőprogram
Notepad++ http://notepad-plus.sourceforge.net/hu/site.htm asztali és hordozható változata is van
17
2011.09.28.
Fejlesztőkörnyezet kialakítása (ha szerveroldali technológiákra is szükség van)
2.2.17 MySQL 5.5.8 PHP 5.3.5 phpMyAdmin 3.3.9 FileZilla FTP Server 0.9.37 Tomcat 7.0.3
XAMPP telepítés
18
2011.09.28.
XAMPP kezdőlap (http://localhost/)
XAMPP Biztonsági figyelmeztetés
A feltelepült rendszerben A
MYSQL adminisztrátornak nincs jelszó beállítva MYSQL démon a hálózaton elérhető phpMyadmin elérhető a hálózaton A XAMPP kezdőlap elérhető a hálózaton A Mercury és FileZilla alkalmazások alapértelmezett felhasználói adatai ismertek
Ha nyilvános webszervert készítünk, akkor biztonságossá kell tenni!
19
2011.09.28.
XAMPP biztonsági beállítások (Security)
XAMPP biztonsági beállítások (Security)
20
2011.09.28.
XAMPP portable
Nem kell telepíteni, pendriveról is működik Lépések Mappa
létrehozása XAMPP ZIP változatának letöltése, kitömörítése a mappába setup_xampp.bat elindítása xampp-control.exe elindítása és a vezérlőpulton elindítható a kívánt szolgáltatás
HTML és XHTML különbségei
21
2011.09.28.
XHTML 43
XHTML (XML+HTML „házasság”) Mindkét
szabvány erősségeit magában foglalja, bővíthető, az XML miatti megkötések miatt jobban kell figyelnie a web-fejlesztőknek A tartalmat bármilyen XML kompatibilis program képes megjeleníteni, feldolgozni
XHTML 44
XHTML: eXtensible HTML Előnyök
Az XHTML dokumentumok XML alapúak, könnyen áttekinthetők, szerkeszthetők, érvényesíthetők (validálhatók) standard XML eszközökkel. Az XHTML oldalak a HTML 4.0 szabványt támogató szerkesztőprogramokkal is szerkeszthetők. Az XHTML dokumentumban használhatunk olyan alkalmazásokat (appletek, szkriptek), amelyek futtatásához szükséges a HTML Document Object Model (DOM) vagy az XML DOM. Az XHTML "család" fejlődésével az XHTML 1.0 kritériumainak megfelelő dokumentumok egyre inkább együtt tudnak működni egymással a különböző XHTML környezetekben.
22
2011.09.28.
HTML, XHTML különbségek 45
Az elemek egymásbaágyazásánál ügyelnünk kell a sorrendre Vastag, aláhúzott szöveg
Vastag, aláhúzott szöveg
HTML, XHTML különbségek 46
Jól formázott (well formed) dokumentumot kell létrehozni minden elemet a elemen belül kell elhelyezni. Minden elemnek lehetnek további beágyazott elemei. Ezek az elemek páronként kerülnek megadásra, és ügyelni kell arra, hogy a szülő elembe szabályosan kerüljön beágyazásra
23
2011.09.28.
HTML, XHTML különbségek 47
A tag neveket kis betűkkel kell írnunk. az XML szabvány megkülönbözteti a kis- és nagybetűket a és tag két különböző dolgot jelölhet
HTML, XHTML különbségek 48
Minden XHTML elemet kötelező lezárni.
Első bekezdés
Második bekezdés
Első bekezdés
Második bekezdés
Azon elemek végére, amelyeknek a HTML szabványban nincs záró párjuk (area, base, bgsound, br, col, frame, hr, img, input, isindex, keygen, link, meta, option, param), / karaktert kell tennünk.
Ahhoz, hogy a dokumentum kompatibilis legyen a jelenlegi böngészőkkel, space karakter kell a / jel elé
24
2011.09.28.
HTML, XHTML különbségek 49
A paramétereket kis betűvel kell írni.
HTML, XHTML különbségek 50
A paraméterek értékeit "" jelek közé kell zárnunk
25
2011.09.28.
HTML, XHTML különbségek 51
Az attribútumok minimalizálása, rövidítése tiltott
HTML és XHTML attribútumok HTML
XHTML
HTML
XHTML
compact
compact="compact"
ismap
ismap="ismap"
checked
checked="checked"
nohref
nohref="nohref"
declare
declare="declare"
noshade
noshade="noshade"
readonly
readonly="readonly"
nowrap
nowrap="nowrap"
disabled
disabled="disabled"
multiple
multiple="multiple"
selected
selected="selected"
noresize
noresize="noresize"
HTML, XHTML különbségek 52
A name attribútumok helyett id attribútumot kell használni A régebbi böngészők miatt érdemes egy ideig mindkét attribútumot szerepeltetni, ugyanazon értékkel.
26
2011.09.28.
HTML, XHTML különbségek 53
Az xml:lang elem szerepeltetése
Hajrá Magyarok
Hajrá Magyarok
HTML, XHTML különbségek 54
Kötelező XHTML elemek Minden XHTML dokumentumnak rendelkezni kell DOCTYPE deklarációval. A html, head és body elemeknek szerepelniük kell, a title elemnek pedig a head elemen belül kell elhelyezkednie. Oldalcím Ide jön a tartalom.
27
2011.09.28.
DOCTYPE 55
XHTML 1.0 Strict
1.
XHTML 1.0 Transitional
2.
XHTML 1.0 Frameset
3.
HTML -> XHTML konverzió? 56
HTML Tidy http://tidy.sourceforge.net/#binaries Parancsmódban tidy
használható program
-help
Paraméter
Magyarázat
-out file
a kimeneti állomány megadása
-modify
az eredeti állományt módosítja
-asxhtml
a HTML állományt jól formázott XHTML állománnyá konvertálja
- f file
a feldolgozás során jelentkező hibák kiírása a megadott állományba
-latin1
ISO-8859-1 karakterkódolás használata
-utf8
UTF8 karakterkódolás használata
-utf16
UTF16 karakterkódolás használata
28
2011.09.28.
HTML -> XHTML konverzió? 57
tidy -f hiba.txt -asxhtml -utf8 -o pelda2.html pelda.html Eredeti kód
Konvertált kód
<meta name="generator" content= "HTML Tidy for Windows (vers 1st December 2004), see www.w3.org" /> <meta http-equiv="Content-Language" content="hu" /> <meta http-equiv="Content-Type" content= "text/html; charset=utf-8" />
Csak az tesztelj�k, hogy mi t�rt�nik az �talak�t�s sor�n....
Csak az teszteljük, hogy mi történik az átalakítás során....
portál
29
2011.09.28.
Az on-line tananyag
http://webfejlesztes.inf.elte.hu/
Bejelentkezés
Bejelentkezési név: EHA kód (pl. ABCDEFG.ELTE) Jelszó: az ETR-ben a Web-fejlesztés kurzushoz kapcsolódó infosheet-en megtalálható. A jelszó megváltoztatható.
30
2011.09.28.
Tananyagok Az előadás emlékeztetők is itt érhetők el.
A fa struktúrát ki kell nyitni, hogy az altémakörök megjelenjenek
Interaktív példák
Egy okosabb szerkesztőt (szintaxis kiemelés, sortörés, stb.) is be lehet kapcsolni.
31
2011.09.28.
Beadandó feltöltés
A mintakövető és ergonómia beadandó esetén ZIP tömörítésű állományt kell feltölteni. A saját weblap esetén, a Tartalom mezőben csak a weblap címét (pl. http://people.inf.elte.hu/gipszjakab) kell megadni.
További funkciók
Fórum használat Hirdetmények A beadandó értékelésének elérése a beadandó feltöltési oldalán Friss hírek a Twitteren
32
2011.09.28.
HTML, XHTML, vagy HTML5 tananyagot tanuljam?
Mindegyik szabvány alapján tudnod kell oldalakat készíteni! HTML tananyag:
Tartalmazza az elavult tageket és paramétereket is, így azokkal is tisztában leszel, nem kerülsz zavarba, ha ilyen oldalakat kell szabványossá alakítanod.
Láthatod, hogy a HTML paramétereket hogyan lehet kiváltani stíluslapokkal.
XHTML tananyag
Csak a strict DTD-nek megfelelő tageket, paramétereket tartalmazza, a formázásoknál mindjárt a stíluslapos változatot látod.
HTML5 tananyag
Az újdonságokra koncentrál, kellenek hozzá HTML alapismeretek.
