web technolÓgiÁkpallaszlo/webtech/eloadas/2.eloadas.pdfweb technolÓgiÁk 2.el Őad Ás dr. pál...

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

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


� É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


� 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


� 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">


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

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>


� 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


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



</tr>

</table>


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


� 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


� Példa idézetre:


� 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


� 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.


� 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


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

web technolÓgiÁkpallaszlo/webtech/eloadas/2.eloadas.pdfweb technolÓgiÁk 2.el Őad Ás dr. pál...

Documents