Dr. Pál László, Sapientia EMTE, Csíkszereda
WEB TECHNOLÓGIÁK 2.ELŐADÁS
2014-2015 tavasz
A HTML nyelv alapjai
Mi a HTML?
A HTML (angolul: HyperText Markup Language=hiperszöveges jelölőnyelv) Leíró
nyelv, melyet weboldalak készítéséhez fejlesztettek ki Mára már internetes szabvánnyá vált a W3C (World Wide Web Consortium) támogatásával
Mi a HTML?
A HTML a következő lehetőségeket biztosítja a felhasználó számára: Online (állandóan elérhető, számítógépen tárolt) dokumentumok létrehozása, címekkel, szöveggel, táblázatokkal, fotókkal, stb. Online információk lekérése hypertext linkeken keresztül Űrlapok (form) használata, távoli számítógépek által nyújtott szolgáltatások igénybevételére, mint például információ keresése, termékek megrendelése, stb. Videoklipek, zene-hang és más alkalmazások csatolása a dokumentumokhoz és ezeknek a megtekintése, lejátszása
A kezdetek
1990-ben Tim Berners-Lee, a WEB kezdeményezője és Daniel W. Connolly megalkotta a HTML-t A HTML eredeti verzióját is az SGML jelölés ihlette Az SGML (Standard Generalized Markup Language, szabványos általános jelölőnyelv) egy ISO szabványos jelölőnyelv dokumentumformátumok leírására. 1986-ban lett ISO szabvány Egy SGML dokumentum szintaxisát DTD-ben (Document Type Definition, dokumentum típusdefiníció) határozhatjuk meg
A kezdetek
Egyre bővül új funkciókkal, elemekkel. A mai létező HTML elemek fele már a kezdeti verzióban is benne volt Egyre nőtt az igény a szabványosítására Az IETF (Internet Engineering Task Force - a szabványos alap elkészítésére az internet egészéhez) a HTML ajánlásának első vázlatát 1993-ban adta ki
HTML verziók
1995-ben jelent meg a HTML 2.0: űrlapok, táblázatok bevezetése 1997-ben kiadják a HTML 3.2 verziót, mint ajánlást (appletek, scriptek támogatása, div tag megjelenése) 1997-ben a W3C kiadta ajánlásként a HTML 4.0-át, amelyben még több böngésző-specifikus kiterjesztést próbáltak meg ésszerűsíteni és egyszerűbbé tenni. Ezt azzal érték el, hogy több elemet elavultként jelöltek meg (keretek (framek) bevezetése, számos elavult elem) A HTML 4.01 1999-ben jelent meg, majd néhány elírást javítottak benne 2001-ben 2008 januárban megjelenik a HTML5 munkavázlata. A standardizálási folyamat 2014. október 28. Valamennyi böngésző már támogatja a HTML5 alkalmazását
HTML 5
Egyik fő tervezési célja, hogy a webes alkalmazásokhoz ne legyen szükség bővítmények (plugin) (pl. Adobe Flash, stb.) telepítésére Új elemek bevezetése (
, , , ). Számos elemet elavultnak tekintenek Hangsúlyt helyeztek a DOM szkriptek (Javascript) jelentőségére A HTML 4.01 és XHTML 1.1 egyesítése A HTML5 szintaxisa már nem az SGML-en alapul, de visszafele kompatibilis
XML és XHTML
2000-ben a W3C kiadta az XHTML 1.0 specifikációját is, amely a HTML átdolgozása volt érvényes XML dokumentumra Az XML (Extensible Markup Language) 1998-ban született meg, azóta többször módosították, és mára rengeteg nyelv épül rá SGML-ben sokkal több nyelvi elem megengedett, mint XML-ben. Például nincs különbség a kis- és nagybetűk között, az attribútumokat nem kell mindig idézőjelbe tenni, az elemeket nem kell mindig lezárni. Egy XHTML weboldal csak akkor jelenik meg a böngészőben, ha nem tartalmaz hibákat. Ha a böngésző egy hibás XHTML oldallal találkozik, akkor az oldal helyett csak egy hibaüzenetet jelenít meg. Ellenben egy HTML weboldal akkor is megjelenik, ha hemzseg a hibáktól. Az XHTML arra kényszeríti a holnapkészítőt, hogy helyes kódot írjon, ezáltal jobb lesz a honlapok minősége.
XML példa
XML példa
XHTML példa
A HTML nyelv alapjai
A HTML dokumentum felépítése A
HTML dokumentum egyszerű szövegállomány, amely rövid jelölő címkéket vagy tag-eket (ejtsd: teg) tartalmaz A jelölő tag-ek alapján tudja a böngésző, hogyan kell megjelenítenie az oldalt A HTML állomány htm vagy html kiterjesztéssel rendelkezik A HTML állományt egyszerű szöveges (editor) programokkal is létrehozhatunk, szerkeszthetünk
HTML elemek és tagok
Tag: A HTML állomány egyszerű szövegállomány, amely rövid jelölő tag-eket tartalmaz A
HTML tagot a „<” és „>” írásjelek veszik körül, a záró tagot a „” vagy „>” jelek
Elem: A HTML egy részét leíró struktúra Részei:
kezdő tag, törzs (content), befejező tag
Példa:
Ez egy bekezdés
HTML elemek és tagok
Kis- és nagybetűk között nincs különbség. Ajánlott a kis betűs írásmód A tagok nem keresztezhetik egymást Ez egy bekezdés
Egyes tagok esetén nincs befejező tag: br, img, hr, stb.
Tag tulajdonságok (attribútumok, jellemzők)
Attribútumok Egy
elem attribútumai az illető elem különböző tulajdonságait határozzák meg A tulajdonságok név-érték párokkal adhatók meg, a kezdő tagban Általános alakja: attribútum-név=„attribútum-érték” Példa: Bekezdés középre igazítva
Az
attribútum értéket "," vagy ',' határolja Amennyiben több paramétert is megadunk, azokat üres hellyel kell elválasztani
Speciális karakterek, ékezetes betűk
Speciális karakterek (karakter entitások) Előfordulhat,
hogy az oldalon speciális jeleket szeretnénk megjeleníteni. Speciális jelek például: „<”, „>”, „&” Más különleges karakterek: görög betűk, pénznemek (euro, yen, font, cent) matematikai szimbólumok (végtelen, gyök, hatványkitevő, összesen, közel egyenlő, azonos), stb.
Speciális karakterek, ékezetes betűk
Speciális karakterek (karakter entitások) A
különleges karaktereket a "&" karakter vezeti be, és ";" karakter zárja. A különleges karaktereknek van egy kódjuk, ami egy szám. A legtöbbnek azonban neve is van Példa: "<" - < (< - Unicode); ">" - > (> - Unicode); "&" - & (' - Unicode) Az (non-breaking space) karakter: üres helyet jelöl, amelyet a böngésző nem törhet meg, a táblázatok megjelenítésénél is van szerepe
Speciális karakterek, ékezetes betűk
Ékezetes betűk Ékezetes
karakterek megjelenítését HTML kód segítségével is megtehetjük. Példa: á = á; Á = Á; ö = ö;
Karakterkódolás A
karakterkódolást a HTTP kérésben (HTTP ContentType fejlécének charset paraméterével) továbbítja a webszerver ASCII: nem alkalmas ékezetes betűk ábrázolására
Speciális karakterek, ékezetes betűk
Karakterkódolás ISO-8859-1
(Latin-1): karakterkészlet: nem tartalmazza az ő és ű betűket ISO-8859-2 (Latin-2): tartalmazza az összes magyar ékezetet, sok egyéb fontos szimbólum ebből is hiányzik Unicode: különböző írásrendszerek egységes kódolását és használatát leíró nemzetközi szabvány UTF-8: változó hosszúságú Unicode karakterkódolási eljárás <meta http-equiv="content-Type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> (HTML 5)
Egy alap HTML dokumentum
Egy HTML állomány három fő részre bontható: A
Dokumentum Típus Definíció az állomány legelején, ami a használni kívánt DTD-t adja meg A HTML fejléc , ami technikai és dokumentációs adatokat tartalmaz, melyeket az internet böngésző nem jelenít meg A HTML törzs , amely a megjelenítendő információkat tartalmazza
Egy alap HTML dokumentum
Példa:
A dokumentumtípus (DOCTYPE, vagy DTD) megadása
A HTML dokumentum elején adjuk meg Ezzel informáljuk a böngészőprogramot, hogy milyen szabvány szerint készítettük a dokumentumot, hogy az megfelelő módon tudja megjeleníteni Ha elhagyjuk a dokumentumtípus megadást azzal azt kockáztatjuk, hogy az oldal nem jelenik meg megfelelően a böngészőben Előnye, hogy különböző eszközök segítségével egyszerűen ellenőrizni tudjuk, hogy az általunk létrehozott dokumentum megfelel-e az adott dokumentumtípus szabványának. Ezt a folyamatot validálásnak nevezik Online ellenőrzés a http://validator.w3.org/ weboldalon
A dokumentumtípus (DOCTYPE, vagy DTD) megadása
Három lehetséges dokumentumtípus: HTML
4.01 Strict: tiszta kód (prezentáció mentes), stíluslapok használata HTML 4.01 Transitional (Loose): HTML prezentáció, a böngésző nem támogatja a stíluslapokat HTML 4.01 Frameset: több keretes(frame) oldal esetén használjuk. A szükséges kód:
A dokumentumtípus (DOCTYPE, vagy DTD) megadása
Dokumentumtípus HTML 5-ben: A korábbi, SGML alapú HTML verziókkal ellentétben a HTML5 dokumentumokban nincs szükség dokumentumtípusdeklarációra (DTD) történő hivatkozásra A dokumentumtípus a deklarációval határozható meg Mivel a HTML5 text/html szérializációja nem SGML alapú, a HTML5 a DOCTYPE-ot csak módválasztásra használja. Szabványkövető módnak (standards mode) nevezzük azt a módot, amelyben a böngésző" a W3C szabványának megfelelően értelmezi az oldalt
Fontosabb HTML tagok
A head tag: olyan információkat tartalmaz, amelyek a HTML dokumentum egészére vonatkoznak A head-en belüli tagok: title:
megadja a dokumentum címét meta elemek: ezekben a dokumentum leírását, valamint a későbbi indexelés elősegítésére a kulcsszavakat adhatjuk meg link: jelzi a dokumentum kapcsolatát más dokumentumokkal (pld. stíluslappal) script: külső JavaScript fájlok betöltéséhez használjuk
Alap HTML tagok
p: segítségével a szöveget bekezdésekre oszthatjuk
br: sortörés
nincs záró párja Példa: Ez az elso sor Ez pedig a második
h1, h2,...,h6: címsorok (főcím, alcím, stb.)
a bekezdések között egy üres sor van Példa: Ez egy bekezdés
az oldalak logikai felosztását teszik lehetővé Példa: 1-es címsor
hr: vízszintes elválasztó vonal Megjegyzés a kódban:
Példa:
Alap HTML tagok - Listák
ol, ul: listákat hozhatunk létre segítségükkel ul:
felsoroláslista (unordered list) ol: sorszámozott lista (ordered list) li: lista elem (list item) Példa: Elsı elem Második elem Harmadik elem
Alap HTML tagok – Hivatkozások, linkek
a: hivatkozás (anchor = horgony)
Hiperszöveges rendszerek két elemét összekötő kapocs Böngészők a linkeket általában aláhúzással, illetve eltérő színnel jelölik
Az a címke paraméterei
href: webcím (URL), itt kell megadnunk a hivatkozás webcímét. Szintaxis: Szöveg, kép target: a célkeret neve, ahova az oldalt be akarjuk tölteni. Értékei: _blank, _self, _top, _parent name: segítségével "könyvjelzőt" hozhatunk létre
Szintaxis: Szöveg Hivatkozás szintaxisa egy könyvjelzőre:
Szöveg
Alap HTML tagok – Hivatkozások, linkek
Abszolút és relatív linkek Abszolút
link: olyan link, amely egy webhely URL címét tartalmazza Példa: A Sapientia weboldala
Relatív link: az a link, amelyik a rá hivatkozott dokumentumhoz képest valahol máshol helyezkedik el a webszerveren belül
Alap HTML tagok – Hivatkozások, linkek
Relatív link példák:
Hivatkozás ugyanabban a könyvtárban lévő másik fájlra
Menj a kek.html oldalra!
Hivatkozás alkönyvtárban lévő fájlra:
Menj a piros.html oldalra!
Hivatkozás egy könyvtárral feljebb lévő fájlra:
Menj a sarga.html oldalra!
Hivatkozás két könyvtárral feljebb lévő fájlra:
Menj az index.html oldalra!
Alap HTML tagok - Képek
img: segítségével állóképet helyezhetünk el az oldalon. Használható képformátumok: GIF, JPG, PNG. Az img tag fontosabb paraméterei: src: itt adhatjuk meg a kép webcímét (kötelező jellemző) alt: képet helyettesítő szöveges információ. Csak akkor látszódik, ha a kép nem jelenik meg width: a kép szélessége képpontokban height: a kép magassága képpontokban Példa: Ez a kép
height="50px"/> a Sapientia logoja.
Alap HTML tagok - Táblázatok
table, tr, td: táblázatokat a tag segítségével lehet létrehozni. Egy tábla sorokat tartalmaz ( table row), és minden sor cellákat ( - table data) Példa:
1.sor, 1.cella 1.sor, 2.cella 2.sor, 1.cella 2.sor, 2.cella
Alap HTML tagok - Táblázatok
Fontosabb más tábla elemek: th:
ez az elem jelöli a táblázat oszlopainak a fejlécét caption: ezzel az elemmel adhatsz egy címet a táblázat adatainak Cellák egyesítése a colspan és rowspan attribútumok segítségével lehetséges Példa:
Alap HTML tagok - Táblázatok
Fontosabb más tábla elemek: thead,
tfoot és tbody elemek a sorok csoportosításához használható Példa:
Alap HTML tagok – div, span elem
div: elhatárol egy részt a dokumentumon belül Soron belüli, illetve blokkszintű elemeket tartalmazhat. Példa:
Ez egy cm Ez egy bekezdes
span: HTML elemeket csoportosít Abban különbözik a div tagtól, hogy míg a div egy blokk szintű elem, addig a span egy soron belül alkalmazható gyűjtő elemű Példa: később a stíluslapoknál
Attribútumok
Standard attribútumok class:
az elemet egy (stílus)osztályba sorolja id: egyedi azonosítót rendel az elemhez style: inline stílusdefiníció title: helyi súgó
Nem standard attribútumok Valamennyi
tag attribútumai elavultak, ezért ezeket nem tárgyaljuk. Majd a stíluslapoknál nézzük át az attribútumokat
Logikai (Tartalmi) formázás
A HTML címkék egy csoportja, melyeknek korábban a formázásban volt szerepe, a CSS alkalmazása óta olyan módon használatos, hogy bár a megjelenítésre is hatnak, tartalmi okok miatt használják őket, és a végső formázást továbbra is CSS-el lehet előállítani Fontosabb tagok q: rövid idézet blockquote: hosszabb idézet. A böngészők idézőjel nélkül, mindkét oldali behúzással, előtte és utána térközzel, blokkszintű elemként jelenítik meg
Logikai (Tartalmi) formázás
Példa idézetre:
Logikai (Tartalmi) formázás
Fontosabb tagok i: dőltbetűs megjelenítés cite: címhivatkozás b: kulcsszó kiemelés strong: tartalmi kiemelés. A böngészők a strong esetében félkövér betűkkel jelenítik meg a jelölt szavakat em: kihangsúlyozás. A böngészők az em esetén dőltbetűvel jelenítik meg a jelölt szavakat pre: előre formázott szöveg code: számítógépes kód
Logikai (Tartalmi) formázás
Példa:
HTML űrlapok(form) használata
Az űrlapok célja, hogy a felhasználónak lehetőséget biztosítson különböző adatok bevitelére. Ezen adatok feldolgozása a szerver oldalon történik Az űrlapot a tagok jelzik A form tag paraméterei: name: az űrlap azonosító nevét adja meg, mely az adatok kezeléséhez szükséges method: értékei POST vagy GET, attól függően, hogy levélben (POST) vagy URL címként (GET) küldjük az adatokat action: a form küldésekor elvégzendő eseményt adja meg
Űrlap elemek
Az űrlap input tagja: minden egyes adatbeviteli mezőt az tag vezet be Az input tag fontosabb attribútumai: type:
az adatbeviteli mezők (űrlapelemek) típusát adja meg. Értékei lehetnek: text (szöveg), button (gomb), checkbox (jelölőnégyzet), file (fájl), hidden (rejtett), image (kép), password (jelszó), radio (választógomb), reset (visszaállítás) és submit (küldés) name: az adott űrlapelem azonosító neve value: a mezőben szereplő kezdeti érték
Űrlap elemek
Az tag fontosabb attribútumai: checked:
megadja, hogy RADIO vagy CHECKBOX típus esetén megjelölt-e alapállapotban a mező onSelect: az űrlapmező kijelölése esetén elvégzendő JavaScript utasítások kezelője Példa:
Űrlap elemek
Egyéb űrlap elemek textarea:
többsoros szövegbeviteli mezőt definiál. Attribútumai: name:
azonosító név cols: A beviteli mező oszlopainak számát (szélességét) adja meg rows: A mező sorainak számát (magasságát) határozza meg value: A szövegmező kezdeti értékét állíthatjuk be vele fieldset:
elem egy űrlap vezérlő csoportot definiál. Tartalmazhat egy legend elemet, amelyet blokkszintű és soron belüli elemek követhetnek
Űrlap elemek
button: egy küldő (submit), törlő (reset), vagy nyomógombot ("push", button) definiál. Ezeket létre lehetne hozni az INPUT segítségével is, de a BUTTON sokkal gazdagabb formai lehetőségekkel bír. Attribútumai: name,
value: meghatározzák a név/érték párost, amelyet a gomb küld a szerver felé lenyomásakor type: a gomb típusa. Értékei: submit, reset, button
Űrlap elemek
select: egy opcióválasztó menüt (listát) definiál. Tartalmaz egy, vagy több OPTGROUP, vagy OPTION elemet. Az OPTION elem segítségével adhatjuk meg az elemi opciókat, ezeket lehet választan. Attribútumai: name:
az elem neve multiple: több menüpont is kiválasztható egyszerre size: a látható opciók száma
HTML fram-ek (keret) használata
A frame-ek használata lehetővé teszi, hogy egyetlen böngésző ablakban több HTML oldalt jelenítsünk meg Mindenik HTML oldalt frame-nek hívunk, amelyek függetlenek egymástól A kereteket a tag vezeti be és a zárja le. Ezeket az utasításokat azonban nem a tag után, azaz a dokumentumtörzsben kell megadnunk, hanem közvetlenül a ... blokk után.
HTML fram-ek (keret) használata
A frameset tag attribútumai: cols: képernyőt osztó oszlopok szélességét adja meg a böngészőablak szélességének százalékában vagy pixelben rows: keretek szélességét adja a böngészőablak szélességének százalékában vagy pixelben az ablak sorokra osztása esetén frameborder: a kereteket határoló vonal vastagságát adja meg pixelben framespacing: a frame-ek közötti üres sáv szélességét határozza meg pixelben A frame-ekbe betöltendő oldalakat a taggal tehetjük meg
HTML fram-ek (keret) használata
Nem ajánlatos a frame-ek használata, ugyanis egyszerre több HTML oldalt kell nyilvántartani. Az ilyen weboldalakat nehéz kinyomtatni Példa:
iFram-ek használata
IFrame (inline frame) egy HTML-elem, amely lehetővé teszi más HTML dokumentumok beágyazását a fő dokumentumba Attribútumok: src: a dokumentum elérhetősége height: magasság width: szélesség
Példa:
<iframe src="http://www.w3schools.com">