2. A HTML NYELV ALAPJAI

Hasonló dokumentumok
Mester Gyula 2003 Internet

HTML kódok. A www jelentése World Wide Web.

ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK ÁLTALÁNOS HTML KÓDOLÁSI TUDNIVALÓK

HTML kódolás Web-lap felépítése. Az egész törzsre érvényes utasítás. <HTML> web-lap kezdő utasítás: a dokumentum kezdődik, a böngészőnek szól

HTML alapok 1. Minimális HTML file: <HTML> <HEAD> <TITLE> cím </TITLE> </HEAD> <BODY>... </BODY> </HTML> Formátum parancsok:

HTML, XML szerkesztés

Készítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés

Multimédia 2017/2018 II.

Webprogramozás HTML alapok előadás

Web programozás. 3. előadás

HTML alapok. A HTML az Internetes oldalak nyelve.

WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK

Villamosmérnöki szak Alkalmazott informatika mellék szakirány Laboratórium II. (VIAU5102) World Wide Web lapok készítése (Silabusz)

Internet, Az internet főbb szolgáltatásai web keresőszolgáltatásokkal Keresőrendszerek: Kulcsszavas 2) Egyéb keresők: Metakeresők gyűjtőkörű keresők

HTML. Dr. Nyéki Lajos 2016

Képek a HTML oldalon

WEB TECHNOLÓGIÁK 2.ELŐADÁS

HTML és CSS. Horváth Árpád május 6. Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár

Weblap készítése. Fapados módszer

Internet technológiák

Webkezdő. A modul célja

Kövér betűk (bold) 1-es fejléc

Táblázatok. Utolsó módosítás: 11/22/ :07:23

Szabadkai Műszaki Szakfőiskola. Web programozás. dr Zlatko Čović

A webprogramozás alapjai. Óbudai Egyetem Neumann János Informatikai Kar 2018/19/1 szemeszter

Lássuk, mik azok a szempontok, amelyeket be kell tartanunk egy HTML kód írásánál:

(statikus) HTML (XHTML) oldalak, stíluslapok

HTML parancsok (html tanfolyam témakörei)

Webprogramozás szakkör

A HTML Stuktúra. 1. oldal, összesen: 8 oldal. mhtml:file://d:\vizsga\1\html kódok.mht. Betűtípusok, stílusok <b> <i> <u> <tt>

Gazdasági informatika

HTML ÉS PHP ŐSZI FÉLÉV

Webszerkesztés stílusosan. Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján

CSS3 alapismeretek. Bevezetés a CSS-be. Mi is az a CSS? Alkalmazási formái, szintaxisa

Honlapkészítés. 1. Előadás Bevezető, HTML. Paksy Patrik

Informatika 1 CSS. Kovács Kristóf, Pálovics Róbert, Wettl Ferenc november 4. Budapesti M szaki Egyetem

HTML szerkesztés. HTML bevezetés

Természetesen készíts egy csempe nevű könyvtárat és ide mentsd az index.html állományt.

(statikus) HTML (XHTML) oldalak, stíluslapok

Készítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés

HTML é s wéblapféjlészté s

HTML sablon tervezése


Széchenyi István Egyetem. Műszaki Tudományi Kar. Informatikai és Villamosmérnöki Intézet Távközlési Tanszék. Villamosmérnöki szak HTML

HTML alapok. HTML = HyperText Markup Language

HTML ALAPOK. Abonyi-Tóth Andor, ELTE IK

HTML. Szerkesszünk honlapot.. az alapoktól

Számológép. Bármilyen számítógépen működik, amin található böngésző és Java alkalmazás. Indító képernyő

Webshop készítése ASP.NET 3.5 ben I.

Információs technológiák 1. Gy: HTML alapok

Informatika 1. Informatika el adás. Kovács Kristóf, Pálovics Róbert. Budapesti M szaki Egyetem november 5.

WWW Kliens-szerver Alapfogalmak Technológiák Terv. Web programozás 1 / 31

Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET) Cserép Máté.

Memória játék. Felhasználói dokumentáció

Web programoz as

Informatika 1. Informatika el adás. Kovács Kristóf, Pálovics Róbert. Budapesti M szaki Egyetem november 13.

Megoldás (HTML) <!DOCTYPE HTML> <html>

Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET)

Az image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése

w w w. h a n s a g i i s k. h u

Gazdasági informatika

HTML, Javascript és az objektumok

WCSS (Wap CSS), Wireless CSS

Weblapok az érettségin. 2. feladat: weblap vagy prezentáció és grafika 30 pont

Táblázatkezelés 2. - Adatbevitel, szerkesztés, formázás ADATBEVITEL. a., Begépelés

1. A HTML leíró nyelv. 2. Stíluslapok - CSS. 3. HTML sablonok. Tartalom

Tartalomjegyzék BEVEZETÉS... IX WEBSZERKESZTÉSI ALAPISMERETEK HTML. 1. II. Háttér beállítása I. Elsõ weblapunk III. Karakterformázás...

5-ös lottó játék. Felhasználói dokumentáció

Számítógép Architektúrák. 3. Gyakorlat (shell és HTML alapok)

1. fejezet Bevezetés a web programozásába (Balássy György munkája) Az internet működése... 11

ECDL Webszerkesztés, syllabus 2.0

SZAKDOLGOZAT. Barkócziné Filep Judit

A HTML ÉS A CSS ALAPJAI

Endrıdi Tamás: Internet alapú alkalmazásfejlesztés c.

Készítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés

Web Technológiák. Répási Tibor egyetemi tanársegéd. Miskolc Egyetem,Gépészmérnöki kar, Infomatikai és Villamosmérnöki Tanszékcsoport (IVM)

Dokumentumformátumok Jelölő nyelvek XML XML. Sass Bálint Bevezetés a nyelvtechnológiába 2. gyakorlat szeptember 20.

Egyszerűbb a Google keresőbe beírni a Sharepoint Designer 2007 letöltés kulcsszavakat és az első találat erre a címre mutat.

Stíluslapok használata (CSS)

TEXTAREA++ a JavaScript ereje

A html nyelv elemi. Megnevezés Leírás Példa/Magyarázat

3. modul - Szövegszerkesztés

TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL

Almási Pál: Hogyan szerkesszünk HTML-lapokat? TARTALOMJEGYZÉK

Sakk játék. Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket.

Információs technológiák 2. Gy: CSS, JS alapok

Rajz 06 gyakorló feladat

WEB PROGRAMOZÁS 3.ELŐADÁS. Űrlapok

Web technológiák. Barabás Péter, Általános Informatikai Tanszék, Miskolci Egyetem. Barabás Péter Web technológiák 1

VII. Appletek, grafika

BEVEZETÉS A HTML NYELV HASZNÁLATÁBA

A HTML nyelv alapjai

A HONALPSZERKESZTÉS ALAPJAI. 50 feladat. a Debreceni Egyetem Informatikai Karának. Informatikus Könyvtáros szakos hallgatói számára

Tamás Ferenc: CSS táblázatok 2.

<h1>...</h1> HTML utasítások összefoglalása. Készítette: SaNandor 2010., Veszprém

Oktatási segédanyag. Weboldalszerkesztési gyakorlatok

PHP alapjai, bevezetés. Vincze Dávid Miskolci Egyetem, IIT

Web programozás I. tantárgyi információk

WAP. A Wireless Application Protocol (WAP) a vezetéknélküli eszközök (pl. mobiltelefonok, PDA-k) számára készített alkalmazások nemzetközi szabványa.

3. modul - Szövegszerkesztés

Átírás:

2. A HTML NYELV ALAPJAI 2.1. Bevezetés Az Internet publikálás és alkalmazásfejlesztés nyelve. A HTML összes lehetőségét felhasználva jól megszerkesztett weboldalakat hozhatunk létre. A HTML (Hypertext Markup Language, 1989) az SGML (Standard Generalized Markup Language, 1986.) nyelvből ered. Eredetileg szövegalapú dokumentumok kezelésére fejlesztették ki. Idők folyamán multimédiális tartalommal dinamikusan fejlődött tovább. Jelenleg a HTML 4.0 verziónál tartunk. 2.1.1 HTML-dokumentumok előállítása A HTML-dokumentumok előállítása nem nehéz feladat. Az előállítás szempontjából a következő eszközökre lesz szükségünk: Szövegszerkesztő A HTML-dokumentum megszerkesztésére szolgál. Megfelel bármilyen egyszerű szövegszerkesztő, amely formázás nélküli ASCII-szöveget állít elő (általában minden operációs rendszerben megtalálható), például a Notepad. Webböngésző A HTML-dokumentumok megjelenítésére szolgál. Célszerű alkalmazni a szélleskörűen használt webböngészőket mint például a: Microsoft Internet Explorer Netscape Navigator. 1

Ha a számítógépünkön rendelkezünk a felsorolt eszközökkel akkor a HTMLdokumentumok előállítása a következő lépésekből áll: 1. Hivjunk be egy tetszöleges szövegszerkesztőt amely ASCII-szövegként ment, például a Notepad-et 2. Nyissunk meg a szerkesztőben egy új állományt és gépeljük be a HTMLdokumentum szövegét. 3. A begépelt szöveget mentsük el tetszőlegesen kiválsztott néven.html kiterjesztéssel. 4. Hívjuk be a webböngészőnket és töltsük be a megszerkesztett HTMLdokumentumot. Megjegyzés: A web maga nem egyéb mint az internet HTML-dokumentumainak összessége, amelyek linkekkel vannak egymással összekötve. Mindenki, aki hozzáféréssel rendelkezik egy szerverhez felkínálhatja a HTML-dokumentjait a World Wide Weben való publikálásra. 2.2 Alap HTML tag-ek A HTML dokumentum egy olyan szövegfájl, amely a szövegen kívül tartalmaz ún. "HTML tag"-ket formázóutasításokat. Ezeket az utasításokat a böngészőprogram értelmezi és végrehajtja. A HTML dokumentum elemekből áll, minden elemnek van nyitó és záró tag-je, amelyek szöveget fognak körül. A megjegyzéseket egy <!-- nyitó és egy --> záró tag között kell elhelyezni. Példa HTML elemre: <title> Szabadka </title> A HTML dokumentumban a szövegblokkot tehát két tag veszi körül, az első tag-et nyitó tag-nek a befejezőt pedig záró tag-nek nevezzük. A HTML tag egy kisebb jel < (vagy </ ) és egy nagyobb jel > közötti azonosítóból áll. Példa HTML tag-re: <head> A záró tag azonos azonosítója (</head>) megegyezik a hozzátartozó nyitó tag (<head>) azonosítójával, a különbség csak abból áll, hogy a kisebb jelet egy perjel követi (</). A HTML tag-nél nem különböztetjük meg a kisbetűket és nagybetűket! 2

A HTML dokumentum: <html> nyitó tag-el kezdődik és a </html> záró tag-el záródik. A dokumentum látható része a <body> és a </body> tag pár között helyezkedik el. A nyitó tag-ek a tag-azonosítón kívül különféle attribútum értéket is tartalmazhatnak (a záró tag-ek nem!): attribútum= érték alakban! Az attribútumokkal tovább szabályozhatjuk a körülfogott szöveg formázását. A továbbiakban a nyitó tag-ket az attribútumokkal adjuk meg. Fontos megjegyzés: A HTML programban a HTML elemek egymásba ágyazhatók, de egymást nem lapolhatják át! Ez azt jelenti, hogy az utoljára megnyitott utasítást kell legelőször lezárnunk. Jó példa: <azonosító1> <azonosító2> Szövegrész tartalom </azonosító2> </azonosító1> Rossz példa: <azonosító1> <azonosító2> Szövegrész - tartalom </azonosító1> </azonosító2> 2.3 A HTML dokumentumok alapszerkezete Egy tetszőleges dokumentumot az tesz HTML dokumentummá, hogy a <html> nyitó tag és a </html> záró tag öleli körül. Egy HTML dokumentum három szerkezeti egységre bontható: 1. Az első rész arról ad információt, hogy a dokumentumunk a HTML nyelv melyik verziójában íródott 1. Példa: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> 1 A következő példa esetében ezt bemutatjuk, a többi példáknál viszont, az egyszerűség kedvéért, az első résztől eltekintünk. 3

2. A második rész egy fejléc elem: <head>... </head> amely olyan információkat tartalmaz, amelyek az egész dokumentumra vonatkoznak. A <head> és a </head> fejléc tag-ek között helyezzük el a: <title>... </title> elemet melynek szöveges tartalma a böngésző címsorában jelenik meg (nem a Web lapon!). 3. A harmadik rész a dokumentum törzse test elem: <body{alink, background, bgcolor, link, onload, onunload, text, vlink}>... </body> ide kerül az a tartalom, amelyet meg szeretnénk jeleníteni a böngészőkben. Példa : 2.1. ábra A Feladat 01 kódrészlete A következő ábra a fenti kódrészlet eredményét mutatja az IE 6.0 böngészőprogramban. 2.2. ábra A Feladat 01 kódrészlet eredménye a böngészőprogramban 4

Az előbbi példánál jól látható a három szerkezeti egység. Az első két sor a dokumentum típusát jelzi. A fejrész a <head> és </head> tag- ek között található. A dokumentum törzse pedig a <body> és </body> tag- ek között helyezkedik el. A dokumentum típus jelzése után egy <html> tag jelzi a dokumentum kezdetét, melynek záró tag- je az utolsó tag a HTML dokumentumban (</html>). 2.4 A szövegformázó elemek A HTML dokumentumokban az információ egyik fő hordozója a szöveg. Formázására számos elem létezik, melyeket 2 csoportba sorolhatjuk: Karakter formázó HTML tag-ek, Sor és bekezdés formázó HTML tag-ek. 2.4.1. Karakter formázó HTML tag-ek Szöveges dokumentumok kezelésénél igen fontos feladat a szövegek formázása. E feladat elvégzésére a HTML nyelvben számos tag áll rendelkezésünkre. A fontok beállítására a <font> tag-ket használjuk (a {}zárójeleket az alkalmazásnál elhagyjuk): <font{size,color,face}> </font> size= szám - attribútum a font relatív nagyságát adja meg, color= színkód - attribútum meghatározza a font színét, face= név - attribútum a font betűtípusát határozza meg (pl. Ariel, Courier). 2.3. ábra A Feladat 02 kódrészlete 5

A következő ábra a fenti kódrészlet eredményét mutatja az IE 6.0 böngészőprogramban. 2.4. ábra A Feladat 02 kódrészlet eredménye a böngészőprogramban Félkövér karaktereket a: dőlt karaktereket az: áthúzott karaktereket a: alsó indexet a: felső indexet a: aláhúzott karaktereket az: <b> </b> <i> </i> <strike> </strike> <sub> </sub> <sup> </sup> <u> </u> elemek segítségével tudunk létrehozni. 2.5. ábra A Feladat 03 kódrészlete 6

2.6. ábra A Feladat 03 kódrészlet eredménye a böngészőprogramban 2.4.2. Sor és bekezdés formázó HTML tag-ek A HTML nyelv a: <p{align}> tag-et használja a paragrafus (bekezdés) létrehozására. Az új paragrafus előtt üres sort hagy. A <p> tag használata esetében a záró paragrafustag felírása nem kötelező! A:<br {clear}> tag soremelési tag záró tag nélkül. Amikor a WWW megjelenítő egy <br> elemhez ér, akkor az utána következő szöveget új sorban a bal margónál kezdi. 2.7. ábra A Feladat 04 kódrészlete 7

2.8. ábra A Feladat 04 kódrészlet eredménye a böngészőprogramban A hx tag a címszintet jelöli: <hx {align}>...</hx> Az x egy szám 1 és 6 között. A HTML nyelvben 6 címszint létezik. Az első szintű fejléc jelenik meg legnagyobb, a hatodik szintű fejléc pedig a legkisebb betűmérettel. A szintek megjelenítésekor nincs megadva pontosan a betűtípus és a fontméret, ezért a különböző böngészők másként jelenítik meg azokat. A <hx> tag alkalmazása után üres sor következik. 2.9. ábra A Feladat 05 kódrészlete 8

2.10. ábra A Feladat 05 kódrészlet eredménye a böngészőprogramban A: <pre {width}> </pre> elem segítségével előre formázott szöveget tudunk létrehozni. A szövegblokk ilyenkor pontosan úgy jelenik meg, ahogy azt begépeltük a HTML dokumentumba. Vonalakat a <hr> elem segítségével tudunk létrehozni: <hr { width, size, color, align}>...</hr> A width és size attribútumokkal a vonal hosszát ( pixel vagy százalék) és pixelben mért vastagságát adhatjuk meg. Példa (2.11. ábra): A sorformázó elemekkel létrehozott szövegblokkot az align attribútum segítségével: jobbra: align= right, balra: align= left és középre: align= center igazíthatók. A <center>..</center> elem közé írt szöveg középre igazítva jelenik meg. 9

2.11. ábra A Feladat 06 kódrészlete 2.12. ábra A Feladat 06 kódrészlet eredménye a böngészőprogramban 10

2.13. ábra A Feladat 07 kódrészlete 2.14. ábra A Feladat 07 kódrészlet eredménye a böngészőprogramban 2.5. Listák létrehozása A HTML nyelvben: egyszerű és sorszámozott listát használunk, melyek egymásba ágyazhatók így komplex listák hozhatók létre. 11

2.5.1 Egyszerű listák Akkor használjuk, ha nincs szükség a listaelemek számozására. A listát: <ul {compact, type} > </ul> elemmel tudjuk megnyitni (Unordered List). Az <ul> nyitó tag lehetséges attribútumai a következők (alapértelmezett disc ): A Listaelemeket: < ul type ="square"> < ul type ="circle"> < ul type ="disc"> <li{type, value}> </li> elemmel tudjuk elhelyezni a listában bajusz mögött (List Item). 2.15. ábra A Feladat 08 kódrészlete 2.16. ábra A Feladat 08 kódrészlet eredménye a böngészőprogramban 12

2.5.2. Sorszámozott listák Sorszámozott listát akkor használunk ha szükséges a listaelemek számozása. A sorszámozott listát: <ol {compact, start, type}> </ol> elemmel valósíthatjuk meg (Ordered List). Type attribútummal megadható a sorszámozás típusa (alapértemezett 1,2,3,...): <ol type="a,b,c,..."> <ol type="a,b,c,..."> <ol type="i,ii,iii,..."> <ol type=" i,ii,iii, "> <ol type=" 1,2,3..."> 2.17. ábra A Feladat 0 kódrészlete 2.18. ábra A Feladat 09 kódrészlet eredménye a böngészőprogramban 13

2.6 Képek beágyazása A képek beágyazására az: <img {align, alt, border, height, hspace, ismap, longdesc, src, name, usemap, vspace, width}> elem szolgál (záró tag nélkül). Több attribútuma is van tehát, például: src= elérési_út/fájlnév.kit - a képfájl helyét (URL-jét) tartalmazza, height= szám - megadja a kép magasságát képpontokban, width= szám - a kép szélességét adja meg képpontokban, border= szám -képkeret vastagsága képpontokban. Ha a képfájl a HTML dokumentummal megegyező könyvtárban található, akkor csak a fájlnevet kell megadnunk. Példa: guru.gif Ha a képfájl a HTML dokumentumhoz képest egy másik könyvtárban található, akkor a fájlnevet egy útvonallal kell kiegészíteni. Példa: images/guru.gif Ha a képfájl egy másik Web címen található, akkor a teljes http címet kell megadnunk. 2.19. ábra A Feladat 10 kódrészlete 14

2.20. ábra A Feladat 10 kódrészlet eredménye a böngészőprogramban 2.7 Hiperhivatkozások létrehozása A hiperhivatkozások létrehozására az: <a {acceskey, charset, cords, href, hreflang, name, onblur, onfocus, rel, rev, shape, tabindex, target, type}> </a> elemet használjuk. A nyitó tag legfontosabb attribútuma a href (hypertext reference), ami azt a Web címet azonosítja, ahová a hiperhivatkozás aktivizálása esetében kell elugrania a böngészőnek. Tehát a szövegmezőre rákattintva a href-ben megadott web címre kerülünk. 2.21. ábra A Feladat 11 kódrészlete 15

2.22. ábra A Feladat 11 kódrészlet eredménye a böngészőprogramban 2.8 Táblázatok létrehozása Egy HTML táblázatot a: <table {align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary, width}> </table> elemmel hozunk létre. A táblázat egészére érvényes egyes attribútumokat a nyitó <table> tag-ben adjuk meg a következőképpen: border= szám keretméret, cellpaddig= szám pixelben meghatározza az üres hely nagyságát a cellákon belül az adatok körül, cellspacing= szám pixelben meghatározza az üres hely nagyságát a cellák között, width= szám táblázatméret, bgcolor= színkód háttérszín. Egy HTML táblázat táblázatsorokból és cellákból áll. A táblázatsorokat a: <tr {align, bgcolor, char, charoff, valign}> </tr> elemmel hozunk létre és ezek között kell az adott táblázatsor egyes celláit meghatározni. A táblázatcellákat a: <td {abbr, align, axis, bgcolor, char, colspan, headers, height, id, nowrap, rowspan, scope, valign, width}> </td> elem segítségével hozunk létre. 16

2.23. ábra A Feladat 12 kódrészlete 2.24. ábra A Feladat 12 kódrészlet eredménye a böngészőprogramban A rowspan és a colspan attribútumok segítségével sorokat és oszlopokat lehet összevonni egy táblázatban: Colspan= szám vizszintesen egyesít több egymással szomszédos cellát, Rowspan= szám - függőlegesen egyesít több egymással alatti cellát, A cellák tartalmazhatnak szöveget, képet, de akár egy új táblázatot is. A táblázatnak a címét a: <caption {align}> </caption> elemmel adhatjuk meg, a cím a táblázat felett jelenik meg. A HTML táblázatok egymásba ágyazhatók, egy cellába elhelyezhető egy másik táblázat tartalma is. Összetett Web lapot megjeleníthetünk táblázatként is. 17

2.25. ábra A Feladat 12a kódrészlete 2.26. ábra A Feladat 12a kódrészlet eredménye a böngészőprogramban A táblázat fejlécének létrehozására a: thead {align, char, charoff, valign}> </thead> elem szolgál. A fejlécben lévő adatok félkövér karakterekkel íródnak ki. A táblázat láblécének létrehozására a: tfoot {align, char, charoff, valign}> </tfoot> elem szolgál. A láblécben lévő adatok is félkövér karakterekkel íródnak ki. 18

HTML táblázatok programtörzse: 1 sor és 2 cella: 2 sor és 2 cella: <body> <table> <tr> <td> </td> <td> </td> </tr> </table> </body> <body> <table> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </body> A táblázat törzsét: tbody {align, char, charoff, valign}> </tbody> elemmel hozhatjuk létre (a lábléc után kell megadni) A: <colgroup {align, char, charoff, span, valign, width}> </colgroup> elem segítségével a táblázat több oszlopát tudjuk egyszerre létrehozni. Az itt megadott attribútumok az összes létrehozott oszlopra érvényesek! A: <col {align, char, charoff, span, valign, width}> </col> elem segítségével megadhatjuk a táblázat egy oszlopát a: <colgroup> {align, char, charoff, span, valign, width} > </ colgroup > elemen belül. A: <th {abbr, align, axis, bgcolor, char, charoff, colspan, headers, height, id, nowrap, rowspan, scope, valign, width}> </th> elemet használjuk a cella megadására, ha azt akarjuk, hogy a cella úgy viselkedjen mintha fejléc lenne. A cella szövege félkövér lesz. Példa: <tr><th> Fejléc </th></tr> 19

2.27. ábra A Feladat 13 kódrészlete 2.28. ábra A Feladat 13 kódrészlet eredménye a böngészőprogramban 20

2.29. ábra A Feladat 14 kódrészlete 2.30. ábra A Feladat 14 kódrészlet eredménye a böngészőprogramban 21

2.9 HTML keretek A HTML keretek alkalmazásával a Web lapot részekre (régiókra) oszthatjuk. A régiókban az egy-egy önálló HTML dokumentum tartalmát jeleníthetjük meg. A keretek alkalmazása akkor célszerű, ha a Web oldal egyes részeinek a tartalma nem változik (így akkor nem kell mindig újra tölteni). A HTML kereteket az ún. frameset dokumentumban a: <frameset {cols, onload, rows, unload}> </ frameset > elem segítségével adjuk meg. Meghatározza a keretek számát és méretét. A <frameset> tag használata esetében nem használhatunk <body> tagot! A <frameset> nyitó tag cols és rows attribútumában az egyes keretek mérete függöleges és vizszintes irányban (% -ban vagy pixelben) adható meg. Az oszlop- és sorhatárok megadhatók pixelben vagy %. A maradék képernyőterületre * karakter használatával lehet hivatkozni. A: <frame> elem szolgál a tényleges kerettartalmak megadására. Egy <frameset> elem annyi <frame> elemet tartalmaz, ahány részre osztottuk a Web oldalt. A kerethatároló vonalak egér segítségével elmozdíthatók a böngészőben. Az: <iframe {frameborder, height, longdesc, marginheight, marginwidth, name, scrolling. scr, width} > </ iframe> elem Web oldalon belüli keret létrehozását teszi lehetővé. Felhasználható egy HTML oldal beágyazására egy másik HTML oldalba. A 2.31. ábra a Feladat 15a kódrészletét mutatja be (két vizszintes keret esetében), 2.32. ábrán pedig kódrészlet eredményét láthatjuk a böngészőprogramban. A 2.33. ábra a Feladat 15b kódrészletét mutatja be (három függőleges keret esetében), 2.34. ábrán pedig kódrészlet eredményét láthatjuk a böngészőprogramban. 22

2.31. ábra A Feladat 15a kódrészlete 2.32. ábra A Feladat 15a kódrészlet eredménye a böngészőprogramban 2.33. ábra A Feladat 15b kódrészlete 2.34. ábra A Feladat 15b kódrészlet eredménye a böngészőprogramban 23

2.10. Kérdőívek A kérdőívek (szövegablakok, adat- és jelszóbeviteli mezők, gombok, választógomb csoportok) a párbeszédet teszik lehetővé. Minden űrlap elem a: <form {accept, accept-chareset, action, enctype, method, name, onreset, onsubmit, target}> </ form> elem között kell, hogy elhelyezkedjen amely a kitöltendő űrlap tartalmát jelöli ki. A tartalmat az action attribútumban megadott program dolgozza fel. Ha a felhasználónak egy lista készletből szeretnénk választási lehetőséget adni akkor ezt a: <select {disabled, multiple, name, onblur, onchange, onfocus, size, és az: tabindex}> <select> <option {disable, label, selected, value}> < option > elem párral tudjuk megtenni. A <select>... </select> elem jelzi a lista kezdetét, alapbeállításban egy legördülő menüt eredményez. Minden választási lehetőség lejátszására a multiple attribútumot használjuk. A <select> listába az <option> </option> elem segítségével tudunk elemeket elhelyezni. Egyszerű gombot a: <button{acceskey, disabled, name, onblur, onfocus, tabindex, type, value}>... </button> elem segítségével tudunk létrehozni. A gombhoz scripteket rendelhetünk, melyek gombnyomással aktiválódnak. 24

2.35. ábra A Feladat 16 kódrészlete 2.36. ábra A Feladat 16 kódrészlet eredménye a böngészőprogramban Az adatbeviteli mezőket az: <input {accept, accesskey, align, alt, checked, disabled, ismap, maxlength, name, onblur, onchange, onfocus, onselect, readonly, size, scr, tabindex, type, type="button, type="checkbox, type="file, type="hidden, type="image, type="password, type="radio, type="reset, type="submit, type="text, usemap, value} >... </input> elemmel hozhatjuk létre. 25

A type attribútum határozza meg tehát a beviteli mező fajtáját (text, password, stb.). A: <textarea {accesskey, cols, align, disabled, name, onblur, onchange, onfocus, onselect, readonly, rows, tabindex}>...</textarea> elemmel hozhatjuk létre a többsoros szövegbeviteli mezőt. 2.37. ábra A Feladat 17 kódrészlete 2.38. ábra A Feladat 17 kódrészlet eredménye a böngészőprogramban Az információk csoportosítására a: <fieldset>...</fieldset> elemet használjuk, mely tagok közötti szövegblokkot a böngésző (a többi szövegtől elkülönítve) bekeretezve jeleníti meg. A: <legend {accesskey, align}>...</legend> elem alkalmazásával a keret bal felső szélén címkeszöveget is írhatunk. 26

A mezők a: <label {accesskey, for, onblur, onfocus}>...</label> elemmel feliratozhatók 2.39. ábra A Feladat 18 kódrészlete 2.40. ábra A Feladat 18 kódrészlet eredménye a böngészőprogramban 27

2.11. Objektumok beágyazása Egy HTML dokumentum multimediális tartalommal (ActiveX komponensek, applettek, kép, videó és hangállomány) rendelkezhet. Az objektumok beágyazására az: <object{align, archive, classid, codebase, codetype, data, declare, height, hspace, name, standby, tabindex, type, usemap, vspace, width}>... </object> elemet használjuk. A grafikus objektumokat részekre bonthatjuk, e részekhez kapcsolatok rendelhetők (mappolás).a: <map{name}>...</map> elem segítségével megvalósíthatjuk azt, hogy egy kép bizonyos részei önálló hyperlink-ként viselkedjenek. Az: <area {accesskey, alt, coords, href, nohref, onblur, onfocus, tabindex, target, title} >... </area> elem segítségével a képet tetszőleges részekre feloszthatjuk és minden ilyen részhez egy-egy hyperlink-et hozzárendelünk. 2.12 Scriptek Scripteknek azokat a kis programokat nevezzük, amelyek a HTML oldalakkal együtt, vagy azokba ágyazva töltődnek le a kliens számítógépére. A scripteket a böngészőprogramok futtatják. A HTML dokumentum fejlécében a: <script{charset, defer, language, scr, type} >... </script> elemet használjuk a script kód elhelyezésére. Segítségükkel futatni tudjuk a JavaScript, JScript és VBScript programokat. 28

Nem minden böngésző támogatja a scriptek használatát. Azok számára, akik ilyen böngészőt használnak, alternatív megoldást nyújt a <nonscript>... </nonscript> elem. Az elem nyitó és záró tag- ek közé szöveges megjegyzést tehetünk. Ez a szöveg akkor jelenik meg, ha a böngésző nem tudja futtatni a scriptet. 2.13. Appletek beillesztése a HTML-dokumentumba A Java Appletek beillesztése a HTML-dokumentumba az: <applet {code, width, height}>...</applet> tag-el végezhető. A code attributúmmal a lefordított.class kiterjesztésű Java-applet nevét adjuk meg. A width attributúmmal az Applet széllességét határozzuk meg képpontokban (pixel). A height attributúmmal az Applet magasságát határozzuk meg képpontokban (pixel). 2.14. Stíluslapok A W3C (World Wide Web Consortium) hozta létre a CSS (Cascading Style Sheet) specifikációt. Alapvető célja: bevezetni a stíluslapok alkalmazását a HTML dokumentum formázási utasításai helyet, szétválasztani a HTML dokumentum tartalmi részét a megjelenítési stíluselemektől. A stíluslapokat a HTML dokumentum fejrészében a <style> {media, type}>... < /style> elem segítségével definiáljuk. A type attribútum a stíluslapra történő hivatkozás formáját adja meg (text/css). A következő egyszerű példa három stílusdefiníciót tartalmaz amelyek a font típusára, színére és nagyságára vonatkozik alkalmazva a br, pre és code tag-ra. <style type="text/css"> <! br { font-face: arial; color: black; font-size: 12px" } pre { font-face: arial; color: red; font-size: 18px" } code { font-face: courier; color: blue; font-size: 15px" } --> </style> 29

2.15. Statikus Web oldalak A Web oldalak fejlesztésének első időszakában csak statikus Web oldalakkal találkozhattunk. A statikus Web oldal egy egyszerű szövegszerkesztőben megírt,.htm (vagy.html) kiterjesztésű HTML kódrészletből ált. A Web oldal tartalma (szöveg, kép, linkek) változatlan maradt, függetlenül attól, hogy ki, mikor és milyen módon látogat el a Web oldalra. A statikus Web oldal lekérésének és megjelenítésének a folyamata a következő ábrán látható. (1) A HTML dokument szerkesztése Web szerver (3) A Web szerver kiválasztja a.htm fájlt (4) A Web szerver a HTML dokumentumot a böngészõ felé küldi (2) A felhasználó lekéri a Web lapot A felhasználó számítógépe (5) A böngészõprogram értelmezi a HTML dokumentumot és megjeleníti a képernyõn 2.41. ábra A statikus Web oldal lekérésének és megjelenítésének a folyamata Melléklet: A továbbiakban bemutatjuk a HTML nyelv 4.0 verziójának össz elemét. 30