Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

HTML ALAPOK Abonyi-Tóth Andor, ELTE IK. Fontos szabványok.

Hasonló előadás


Az előadások a következő témára: "HTML ALAPOK Abonyi-Tóth Andor, ELTE IK. Fontos szabványok."— Előadás másolata:

1 HTML ALAPOK Abonyi-Tóth Andor, ELTE IK

2 Fontos szabványok

3 HTTP protokoll  Protokoll = szabályrendszer  HTTP  HyperText Transfer Protocol (Hiperszöveg Átviteli Protokoll)  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

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

5 URL, URN, URI, stb..  Hálózati erőforrásokra (weboldalakra, 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ó.  URL: protokoll://tartománynév:portszám/elérési_útvonal

6 URL példák   https://etr.elte.hu/etrweb/login.asp https://etr.elte.hu/etrweb/login.asp  ftp://ftp.externet.hu/.lib/disk5/pub/win/ssh/putty. exe ftp://ftp.externet.hu/.lib/disk5/pub/win/ssh/putty. exe 

7 URN  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

8 URN  Példa: urn:isbn:  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

9 URI  URI: Uniform Resource Identifier (Egységes erőforrás azonosító)  URL+URN=URI  Az URI 1 az erőforrást kétféleképp azonosíthatja: hely szerint (URL) vagy név szerint (URN).URLURN URLURN URI 1:

10 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”  A weboldalon megjelenő szöveget formázatlanul

11 HTML történet  1995 november: HTML 2.0  HTML 3.0  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)  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  Javításokat tartalmaz  Ez az utolsó (SGML-en alapuló) verzió  HTML 5: jelenleg fejlesztés alatt !!!

12 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  január: XHTML 1.0  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 !!!

13 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

14 HTML Struktúra Oldalcím tartalom Dokumentum típus (DTD) Fej Törzs

15 HTML példa Első weblapom Ez az első próbálkozásom. Remélem sikerül!

16 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:  Hiperhivatkozás:  Kép beszúrása:

17 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:

18 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:

19 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: Tar- ta- lom MEnüMEnü

20 Validálás  Ellenőrizhető, hogy az oldalunk megfelel-e a szabványnak => validálás (érvényesség vizsgálat)  Ellenőrzés: 

21 Validálás a Firefox böngészőprogramban  Telepítsük a HTML validator kiterjesztést a címről! (rövidített url:  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!

22 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 Részlet a Web-fejlesztés I. tananyagból

23 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

24 Honlapszerkesztés eszközei  szövegszerkesztő program (egyszerű szövegként (txt) képes menteni)

25 Honlapszerkesztés eszközei  Kódszintű szerkesztőprogram

26 Honlapszerkesztés eszközei  WYSIWYG (alakhű) programok

27 Ajánlott szerkesztőprogram  Notepad++ asztali és hordozható változata is vanhttp://notepad-plus.sourceforge.net/hu/site.htm

28 Fejlesztőkörnyezet kialakítása (ha szerveroldali technológiákra is szükség van)  XAMPP telepítőcsomag   Multiplatform  XAMPP tartalmazza Apache MySQL PHP phpMyAdmin FileZilla FTP Server Tomcat 7.0.3

29 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

30 HTML és XHTML különbségei

31 XHTML 31  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

32 XHTML 32  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.

33 !!!

34 HTML, XHTML különbségek 34  Az elemek egymásbaágyazásánál ügyelnünk kell a sorrendre Vastag, aláhúzott szöveg

35 HTML, XHTML különbségek 35 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

36 HTML, XHTML különbségek 36 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

37 HTML, XHTML különbségek 37 Minden XHTML elemet kötelező lezárni. 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é

38 HTML, XHTML különbségek 38 A paramétereket kis betűvel kell írni.

39 HTML, XHTML különbségek 39 A paraméterek értékeit "" jelek közé kell zárnunk

40 HTML, XHTML különbségek 40 Az attribútumok minimalizálása, rövidítése tiltott HTML és XHTML attribútumok HTMLXHTML HTMLXHTML compactcompact="compact"ismapismap="ismap" checkedchecked="checked"nohrefnohref="nohref" declaredeclare="declare"noshadenoshade="noshade" readonlyreadonly="readonly"nowrapnowrap="nowrap" disableddisabled="disabled"multiplemultiple="multiple" selectedselected="selected"noresizenoresize="noresize"

41 HTML, XHTML különbségek 41 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.

42 HTML, XHTML különbségek 42 Az xml:lang elem szerepeltetése Hajrá Magyarok

43 HTML, XHTML különbségek 43 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.

44 DOCTYPE XHTML 1.0 Strict 2. XHTML 1.0 Transitional 3. XHTML 1.0 Frameset

45 HTML -> XHTML konverzió? 45  HTML Tidy   Parancsmódban használható program  tidy -help ParaméterMagyarázat -out filea kimeneti állomány megadása -modifyaz eredeti állományt módosítja -asxhtmla HTML állományt jól formázott XHTML állománnyá konvertálja - f filea feldolgozás során jelentkező hibák kiírása a megadott állományba -latin1ISO karakterkódolás használata -utf8UTF8 karakterkódolás használata -utf16UTF16 karakterkódolás használata

46 HTML -> XHTML konverzió? 46 tidy -f hiba.txt -asxhtml -utf8 -o pelda2.html pelda.html Eredeti kódKonvertált kód 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....

47 VÉGE


Letölteni ppt "HTML ALAPOK Abonyi-Tóth Andor, ELTE IK. Fontos szabványok."

Hasonló előadás


Google Hirdetések