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 (<nav>, <footer>, <audio>, <video>). 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: <p>ez egy bekezdés</p>
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 <p>ez egy <b>bekezdés</p></b> 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: <p align="center"> Bekezdés középre igazítva</p> 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 Content- Type 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 <head>, ami technikai és dokumentációs adatokat tartalmaz, melyeket az internet böngésző nem jelenít meg A HTML törzs <body>, 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: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN "http://www.w3.org/tr/html4/frameset.dtd">
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 <!DOCTYPE html> 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 a bekezdések között egy üres sor van Példa: <p> Ez egy bekezdés </p> br: sortörés nincs záró párja Példa: <p> Ez az elso sor<br>ez pedig a második</p> h1, h2,...,h6: címsorok (főcím, alcím, stb.) az oldalak logikai felosztását teszik lehetővé Példa: <h1>1-es címsor </h1> hr: vízszintes elválasztó vonal Megjegyzés a kódban: Példa: <!-- Ez itt egy megjegyzés-->
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: <ul> </ul> <li>elsı elem </li> <li>második elem </li> <li>harmadik elem </li>
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. href: webcím (URL), itt kell megadnunk a hivatkozás webcímét. Szintaxis: <a href="url">szöveg, kép</a> 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: <a name="cimke">szöveg</a> Hivatkozás szintaxisa egy könyvjelzőre: <a href="#cimke">szöveg</a>
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 href= "http://www.sapientia.ro"> A Sapientia weboldala</a> 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 <a href="kek.html">menj a kek.html oldalra!</a> Hivatkozás alkönyvtárban lévő fájlra: <a href="barack/piros.html">menj a piros.html oldalra!</a> Hivatkozás egy könyvtárral feljebb lévő fájlra: <a href="../sarga.html">menj a sarga.html oldalra!</a> Hivatkozás két könyvtárral feljebb lévő fájlra: <a href="../../index.html">menj az index.html oldalra!</a>
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: <p>ez a kép <img src="logo.jpg" height="50px"/> a Sapientia logoja.</p>
Alap HTML tagok - Táblázatok table, tr, td: táblázatokat a <table> tag segítségével lehet létrehozni. Egy tábla sorokat tartalmaz (<tr> - table row), és minden sor cellákat (<td> - table data) Példa: <table> <tr> </tr> <tr> </tr> </table> <td>1.sor, 1.cella</td> <td>1.sor, 2.cella </td> <td>2.sor, 1.cella </td> <td>2.sor, 2.cella </td>
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: <div style="color:#00ff00"> </div> <h3>ez egy cm</h3> <p>ez egy bekezdes</p> 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: <code>
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 <form> és </form> 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 <input> 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 <input> 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 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 <frameset> tag vezeti be és a </frameset> zárja le. Ezeket az utasításokat azonban nem a <body> tag után, azaz a dokumentumtörzsben kell megadnunk, hanem közvetlenül a <head>...</head> 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 <frame> 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: <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset>
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"></iframe>