Upload
others
View
9
Download
0
Embed Size (px)
Citation preview
WEB TECHNOLÓGIÁK2.ELŐADÁS
Dr. Pál László, Sapientia EMTE, Csíkszereda
2.ELŐADÁS
A HTML nyelv alapjai2014-2015 tavasz
Mi a HTML?
� A HTML (angolul: HyperText MarkupLanguage=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.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 MarkupLanguage, szabványos általános jelölőnyelv) egy 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� 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 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<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. � 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><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 vanvan
� 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 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ípus-deklarációra (DTD) történő hivatkozásra
� A dokumentumtípus a <!DOCTYPE html> deklarációval � 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 � 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>� 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)� li: lista elem (list item)
� Példa:<ul>
<li>Elsı elem </li>
<li>Második elem </li>
<li>Harmadik elem </li>
</ul>
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<a href="barack/piros.html">Menj a piros.htmloldalra!</a>
� Hivatkozás egy könyvtárral feljebb lévő fájlra:<a href="../sarga.html">Menj a sarga.htmloldalra!</a>
� Hivatkozás két könyvtárral feljebb lévő fájlra:<a href="../../index.html">Menj az index.htmloldalra!</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><table>
<tr>
<td>1.sor, 1.cella</td>
<td>1.sor, 2.cella </td>
</tr>
<tr>
<td>2.sor, 1.cella </td>
<td>2.sor, 2.cella </td>
</tr>
</table>
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">
<h3>Ez egy cm</h3>
<p>Ez egy bekezdes</p><p>Ez egy bekezdes</p>
</div>
� 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ó� 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ítaniformá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:� 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), 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: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: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ólfü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 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:� 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>