html alapok
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/1.jpg)
HTML ALAPOK
Abonyi-Tóth Andor, ELTE IK
![Page 2: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/2.jpg)
Fontos szabványok
![Page 3: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/3.jpg)
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
![Page 4: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/4.jpg)
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.
![Page 5: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/5.jpg)
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
![Page 6: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/6.jpg)
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
![Page 7: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/7.jpg)
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
![Page 8: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/8.jpg)
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
![Page 9: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/9.jpg)
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).
URL URN
URI
1: http://hu.wikipedia.org/wiki/URI
![Page 10: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/10.jpg)
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. <b>félkövér</b>
Objektumhivatkozásokatpl. "../kepek/logo.gif”
A weboldalon megjelenő szöveget formázatlanul
![Page 11: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/11.jpg)
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 !!!
![Page 12: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/12.jpg)
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 !!!
![Page 13: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/13.jpg)
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
![Page 14: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/14.jpg)
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>
Dokumentumtípus(DTD)
Fej
Törzs
![Page 15: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/15.jpg)
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>
![Page 16: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/16.jpg)
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="…">
![Page 17: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/17.jpg)
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>
![Page 18: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/18.jpg)
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>
![Page 19: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/19.jpg)
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">Tar-ta-lom
MEnü
![Page 20: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/20.jpg)
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/
![Page 21: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/21.jpg)
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, minta W3C validátora!
![Page 22: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/22.jpg)
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
![Page 23: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/23.jpg)
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
![Page 24: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/24.jpg)
Honlapszerkesztés eszközei
szövegszerkesztő program (egyszerű szövegként (txt) képes menteni)
![Page 25: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/25.jpg)
Honlapszerkesztés eszközei
Kódszintű szerkesztőprogram
![Page 26: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/26.jpg)
Honlapszerkesztés eszközei
WYSIWYG (alakhű) programok
![Page 27: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/27.jpg)
Ajánlott szerkesztőprogram
Notepad++ http://notepad-plus.sourceforge.net/hu/site.htm asztali és hordozható változata is van
![Page 28: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/28.jpg)
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
![Page 29: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/29.jpg)
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
![Page 30: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/30.jpg)
HTML és XHTML különbségei
![Page 31: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/31.jpg)
XHTML31
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
![Page 32: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/32.jpg)
XHTML32
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.
![Page 33: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/33.jpg)
!!!
![Page 34: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/34.jpg)
HTML, XHTML különbségek34
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>
![Page 35: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/35.jpg)
HTML, XHTML különbségek35
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
![Page 36: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/36.jpg)
HTML, XHTML különbségek36
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
![Page 37: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/37.jpg)
HTML, XHTML különbségek37
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é
![Page 38: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/38.jpg)
HTML, XHTML különbségek38
A paramétereket kis betűvel kell írni.
<table WIDTH="250">
<table width="250">
![Page 39: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/39.jpg)
HTML, XHTML különbségek39
A paraméterek értékeit "" jelek közé kell zárnunk
<table WIDTH=250>
<table width="250">
![Page 40: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/40.jpg)
HTML, XHTML különbségek40
Az attribútumok minimalizálása, rövidítése tiltott
<input checked>
<input checked="checked" />
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"
![Page 41: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/41.jpg)
HTML, XHTML különbségek41
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" />
![Page 42: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/42.jpg)
HTML, XHTML különbségek42
Az xml:lang elem szerepeltetése<div lang="hu" >Hajrá Magyarok</div>
<div lang="hu" xml:lang="hu">Hajrá Magyarok</div>
![Page 43: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/43.jpg)
HTML, XHTML különbségek43
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>
![Page 44: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/44.jpg)
DOCTYPE44
1. XHTML 1.0 Strict
2. XHTML 1.0 Transitional
3. 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">
![Page 45: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/45.jpg)
HTML -> XHTML konverzió?45
HTML Tidy http://tidy.sourceforge.net/#binaries Parancsmódban használható program tidy -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
![Page 46: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/46.jpg)
HTML -> XHTML konverzió?46
tidy -f hiba.txt -asxhtml -utf8 -o pelda2.html pelda.html
Eredeti kód Konvertált kód
<html>
<head><meta http-equiv="Content-Language" content="hu"><meta http-equiv="Content-Type" content="text/html; charset=windows-1250"></head>
<body>
<p>Csak az teszteljük,<br>hogy mi történik az átalakítás során....</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><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" /><title></title></head><body><p>Csak az tesztelj�k,<br />hogy mi t�rt�nik az �talak�t�s sor�n....</p></body></html>
![Page 47: HTML alapok](https://reader033.vdocuments.net/reader033/viewer/2022061512/56812ab7550346895d8e7b9c/html5/thumbnails/47.jpg)
VÉGE