1 / 47

HTML alapok

HTML alapok. Abonyi-Tóth Andor, ELTE IK. Fontos szabványok. 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

zeph-shields
Download Presentation

HTML alapok

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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, 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ó. • URL:protokoll://tartománynév:portszám/elérési_útvonal

  6. URL példák • http://www.elte.hu/ • https://etr.elte.hu/etrweb/login.asp • ftp://ftp.externet.hu/.lib/disk5/pub/win/ssh/putty.exe • http://lib.nyme.hu:8080/corvina/opac/wpac.cgi

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

  9. URI • URI: Uniform Resource Identifier (Egységes erőforrás azonosító) • URL+URN=URI • Az URI1 az erőforrást kétféleképp azonosíthatja: hely szerint (URL) vagy név szerint (URN). URI URL URN 1: http://hu.wikipedia.org/wiki/URI

  10. A HTML nyelv • HyperTextMarkupLanguage - Hiperszöveg jelölőnyelv • SGML (Standard GeneralizedMarkupLanguage - 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. <b>félkövér</b> • Objektumhivatkozásokatpl. "../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 • 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 !!!

  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. Dokumentumtípus(DTD) Fej Törzs HTML Struktúra <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html> <head>   <title>Oldalcím</title> </head> <body>tartalom </body></html>

  15. HTML példa <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head>   <title>Első weblapom</title></head><body><p>Ez az első próbálkozásom. <b>Remélem sikerül!</b></p></body></html>

  16. Néhány gyakran használt HTML tag • Bekezdés létrehozás: <p> </p> • Sortörés: <br> • 1-es szintű címsor: <h1> </h1> • Erősen kiemelt szöveg: <strong> </strong> • Hiperhivatkozás: <a href="…"> </a> • Kép beszúrása: <img src="…">

  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: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"http://www.w3.org/TR/html4/strict.dtd>

  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: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>

  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: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd"> MEnü Tar-ta-lom

  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: • http://validator.w3.org/

  21. 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!

  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 <p align="left">Szia</p> <p style="text-align: left;"> Szia </p> 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++http://notepad-plus.sourceforge.net/hu/site.htmasztali és hordozható változata is van

  28. Fejlesztőkörnyezet kialakítása (ha szerveroldali technológiákra is szükség van) • XAMPP telepítőcsomag • http://www.apachefriends.org/en/xampp.html • Multiplatform • XAMPP 1.7.4 tartalmazza • Apache 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

  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 • 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 • XHTML: eXtensibleHTML • 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 • Az elemek egymásbaágyazásánál ügyelnünk kell a sorrendre <b><u>Vastag, aláhúzott szöveg</b></u> <b><u>Vastag, aláhúzott szöveg</u></b>

  35. HTML, XHTML különbségek Jól formázott (well formed) dokumentumot kell létrehozni • minden elemet a <html> 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 A tag neveket kis betűkkel kell írnunk. • az XML szabvány megkülönbözteti a kis- és nagybetűket a <br> és <BR> tag két különböző dolgot jelölhet

  37. HTML, XHTML különbségek Minden XHTML elemet kötelező lezárni. <p>Első bekezdés<p>Második bekezdés <p>Első bekezdés</p><p>Második bekezdés</p> 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. <br><br /><img src="kep.gif"><img src="kep.gif" /> 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 A paramétereket kis betűvel kell írni. <table WIDTH="250"> <table width="250">

  39. HTML, XHTML különbségek A paraméterek értékeit "" jelek közé kell zárnunk <table WIDTH=250> <table width="250">

  40. HTML, XHTML különbségek Az attribútumok minimalizálása, rövidítése tiltott <input checked> <input checked="checked" /> HTML és XHTML attribútumok

  41. HTML, XHTML különbségek A name attribútumok helyett id attribútumot kell használni <img src="kep.gif" name="kep1" /> <img src="kep.gif" id="kep1" /> A régebbi böngészők miatt érdemes egy ideig mindkét attribútumot szerepeltetni, ugyanazon értékkel. <img src="kep.gif" name="kep1" id="kep1" />

  42. HTML, XHTML különbségek Az xml:lang elem szerepeltetése <div lang="hu" >Hajrá Magyarok</div> <div lang="hu" xml:lang="hu">Hajrá Magyarok</div>

  43. HTML, XHTML különbségek 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. <!DOCTYPE ide jön a dokumentumtípus><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Oldalcím</title></head><body>Ide jön a tartalom.</body></html>

  44. DOCTYPE • XHTML 1.0 Strict • XHTML 1.0 Transitional • XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

  45. HTML -> XHTML konverzió? • HTML Tidy • http://tidy.sourceforge.net/#binaries • Parancsmódban használható program • tidy -help

  46. HTML -> XHTML konverzió? tidy -f hiba.txt -asxhtml -utf8 -o pelda2.html pelda.html

  47. VÉGE

More Related