2. A HTML NYELV ALAPJAI

Méret: px
Mutatás kezdődik a ... oldaltól:

Download "2. A HTML NYELV ALAPJAI"

Átírás

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

2 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

3 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

4 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 ábra A Feladat 01 kódrészlet eredménye a böngészőprogramban 4

5 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 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) ábra A Feladat 02 kódrészlete 5

6 A következő ábra a fenti kódrészlet eredményét mutatja az IE 6.0 böngészőprogramban á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 ábra A Feladat 03 kódrészlete 6

7 2.6. ábra A Feladat 03 kódrészlet eredménye a böngészőprogramban 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 ábra A Feladat 04 kódrészlete 7

8 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 ábra A Feladat 05 kódrészlete 8

9 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

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

11 2.13. ábra A Feladat 07 kódrészlete á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

12 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) ábra A Feladat 08 kódrészlete ábra A Feladat 08 kódrészlet eredménye a böngészőprogramban 12

13 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..."> ábra A Feladat 0 kódrészlete ábra A Feladat 09 kódrészlet eredménye a böngészőprogramban 13

14 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 ábra A Feladat 10 kódrészlete 14

15 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 ábra A Feladat 11 kódrészlete 15

16 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

17 2.23. ábra A Feladat 12 kódrészlete á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

18 2.25. ábra A Feladat 12a kódrészlete á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

19 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

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

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

22 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 ábra a Feladat 15a kódrészletét mutatja be (két vizszintes keret esetében), ábrán pedig kódrészlet eredményét láthatjuk a böngészőprogramban. A ábra a Feladat 15b kódrészletét mutatja be (három függőleges keret esetében), ábrán pedig kódrészlet eredményét láthatjuk a böngészőprogramban. 22

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

24 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

25 2.35. ábra A Feladat 16 kódrészlete á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

26 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 ábra A Feladat 17 kódrészlete á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

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

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

29 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 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) 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

30 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 á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

Mester Gyula 2003 Internet

Mester Gyula 2003 Internet Internet Windows környezetben A HTML nyelv alapjai Kliensoldali programozás Szerveroldali programozás XML WAP Bevezetés Alapfogalmak Az Internet főbb szolgáltatásai Windows környezetben 1.1. Bevezetés

Részletesebben

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

HTML kódok. A www jelentése World Wide Web. HTML kódok A www jelentése World Wide Web. A HTML (angolul: HyperText Markup Language=hiperszöveges jelölőnyelv) egy leíró nyelv, melyet weboldalak készítéséhez fejlesztettek ki. A honlap felépítése (csak

Részletesebben

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

ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK ÁLTALÁNOS HTML KÓDOLÁSI TUDNIVALÓK ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK HTML dokumentum = weblap = weboldal = webpage Egy HTML dokumentum kiterjesztései: HTM vagy HTML STÍLUSLAP = Egy vagy több HTML utasítás, értékekkel ellátott paramétereinek

Részletesebben

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 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 kódolás Web-lap felépítése web-lap kezdő utasítás: a dokumentum kezdődik, a böngészőnek szól fejléc kezdő utasítás: a böngészőnek és a kereső robotoknak szóló elemek Fejléc elemek,

Részletesebben

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

HTML alapok 1. Minimális HTML file: <HTML> <HEAD> <TITLE> cím </TITLE> </HEAD> <BODY>... </BODY> </HTML> Formátum parancsok: HTML alapok 1 Minimális HTML file: cím ... Formátum parancsok: dőlt szöveg félkövér aláhúzott új sor vízszintes vonal

Részletesebben

HTML, XML szerkesztés

HTML, XML szerkesztés HTML, XML szerkesztés Vezető: Majzik Zsuzsa Előadó: Rigó Ernő http://gdf.tricon.hu/html Előzmények 1960-as évek: GML IBM SGML Standard Generalized Markup Language 1986-os

Részletesebben

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

Készítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés HLTML 5 formok gyorstalpaló Készítette: Gál Tamás A tananyag programozott változata itt érhető el: Webfejlesztés (http://webfejlesztes.gtportal.eu/) Creative Commons Nevezd meg!-ne add el!-így add tovább!

Részletesebben

Multimédia 2017/2018 II.

Multimédia 2017/2018 II. Multimédia 2017/2018 II. 1. gyakorlat HTML5, CSS3 alapok Alapvető HTML5 elemek Egyszerű HTML dokumentum Oldal cime

Részletesebben

Webprogramozás HTML alapok 2. 3. előadás

Webprogramozás HTML alapok 2. 3. előadás Webprogramozás HTML alapok 2. 3. előadás Hivatkozások - linkek Link: más webes tartalomra történő irányítás Hivatkozások - linkek abszolút hivatkozás fizika kar weboldala

Részletesebben

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

Web programozás. 3. előadás Web programozás 3. előadás Űrlapok form label for input type select, option value szöveges mező: text textarea jelszó: password rádiógomb: radio jelölőnégyzet: checkbox küldés gomb: submit Web programozás

Részletesebben

HTML alapok. A HTML az Internetes oldalak nyelve.

HTML alapok. A HTML az Internetes oldalak nyelve. A HTML az Internetes oldalak nyelve. HTML alapok Karakteres szövegszerkesztővel (pl. Jegyzettömb) szerkeszthető. FONTOS, hogy az elkészült oldal kiterjesztése ne txt, hanem html legyen! Felépítése: Két

Részletesebben

WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK

WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK ECDL Webszerkesztés, syllabus 2.0 WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK 1. Mi az FTP? a) Az FTP a multimédiás dokumentumok leíró nyelve. b) Az FTP a weboldalon lévő kattintható elem, amellyel egy másik

Részletesebben

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

Villamosmérnöki szak Alkalmazott informatika mellék szakirány Laboratórium II. (VIAU5102) World Wide Web lapok készítése (Silabusz) Villamosmérnöki szak Alkalmazott informatika mellék szakirány Laboratórium II. (VIAU5102) World Wide Web lapok készítése (Silabusz) HTML (Hyper Text Markup Language)...2 A HTML dokumentumokról...2 Néhány

Részletesebben

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

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 Web alapok Az Internet, számítógépes hálózatok világhálózata, amely behálózza az egész földet. Az internet főbb szolgáltatásai: web (www, alapja a kliens/szerver modell) elektronikus levelezés (e-mail)

Részletesebben

HTML. Dr. Nyéki Lajos 2016

HTML. Dr. Nyéki Lajos 2016 HTML Dr. Nyéki Lajos 2016 HTML és SGML HTML (Hypertext Markup Language) SGML (Standard Generalized Markup Language) ISO 8879:1986 A HTML nyelven készült dokumentumok kiterjesztése - az Internet szerveren:.html;

Részletesebben

Képek a HTML oldalon

Képek a HTML oldalon Képek a HTML oldalon Utolsó módosítás: 11/22/2004 13:07:28 Háttérkép Ahhoz, hogy az adott oldal háttérképpel rendelkezzen, a részben el kell helyeznünk a background="kep" paramétert, ahol a kép

Részletesebben

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

WEB TECHNOLÓGIÁK 2.ELŐADÁS 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,

Részletesebben

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

HTML és CSS. Horváth Árpád május 6. Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár 2015. május 6. Vázlat 1 2 A világháló Története statikus és dinamikus oldal URL DNS-feloldás IP-cím ügyfél (kliens, böngész ) és szerver (kiszolgáló)

Részletesebben

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

Weblap készítése. Fapados módszer Weblap készítése Fapados módszer A számítógép beállítása Ha a kiterjesztések nem látszanak, akkor a következőt kell tennünk: A számítógép beállítása Ha a kiterjesztések nem látszanak, akkor a következőt

Részletesebben

Internet technológiák

Internet technológiák Szabadkai Műszaki Szakfőiskola Internet technológiák dr Zlatko Čović chole@vts.su.ac.rs 1 XHTML űrlapok 2 XHTML űrlapok Minden űrlap jelölőelem a: form{action, enctype, method} Űrlaptartalom /form jelölőelem

Részletesebben

Webkezdő. A modul célja

Webkezdő. A modul célja Webkezdő A modul célja Az ECDL Webkezdő modulvizsga követelménye (Syllabus 1.5), hogy a jelölt tisztában legyen a Webszerkesztés fogalmával, és képes legyen egy weboldalt létrehozni. A jelöltnek értenie

Részletesebben

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

Kövér betűk (bold) 1-es fejléc A HTML Stuktúra Amint a bevezetőben olvashattuk, minden HTML formátumú szövegfájl a utasítással kezdődik és a záró utasítással végződik. A dokumentumot a fejlécelemek vezetik be, melyek

Részletesebben

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

Táblázatok. Utolsó módosítás: 11/22/ :07:23 Táblázatok Utolsó módosítás: 11/22/2004 13:07:23 A táblázat megadása a tag használatával lehetséges. A és tageken belül, a elemekkel adhatjuk meg a táblázat sorait. A elemek a sorokon

Részletesebben

Szabadkai Műszaki Szakfőiskola. Web programozás. dr Zlatko Čović chole@vts.su.ac.rs

Szabadkai Műszaki Szakfőiskola. Web programozás. dr Zlatko Čović chole@vts.su.ac.rs Szabadkai Műszaki Szakfőiskola Web programozás dr Zlatko Čović chole@vts.su.ac.rs 1 DOM események (events) JavaScriptben interaktív programok készítésére az események által vezérelt programozási modellt

Részletesebben

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

A webprogramozás alapjai. Óbudai Egyetem Neumann János Informatikai Kar 2018/19/1 szemeszter 1 A webprogramozás alapjai Óbudai Egyetem Neumann János Informatikai Kar 2018/19/1 szemeszter IV. előadás Nyelv típusok HTML nyelv fontosabb elemei I. Mappaszerkezet és file struktúra Szerkesztők bemutatása,

Részletesebben

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

Lássuk, mik azok a szempontok, amelyeket be kell tartanunk egy HTML kód írásánál: HTML 5 alapismeretek Bevezetés a HTML 5-be Mi is az a HTML? A HTML (HyperText Markup Language = hiperszöveges jelölőnyelv) egy leíró nyelv, amelyet direkt a weblapok létrehozására fejlesztettek ki, valamint

Részletesebben

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

(statikus) HTML (XHTML) oldalak, stíluslapok (statikus) HTML (XHTML) oldalak, stíluslapok Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok CSS Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok

Részletesebben

HTML parancsok (html tanfolyam témakörei)

HTML parancsok (html tanfolyam témakörei) HTML parancsok (html tanfolyam témakörei) 1. Bevezető HTML, HEAD, TITLE parancs 2. Karakter formázás: félkövér, dölt, aláhúzott, fejléc: H1, H2, h6 csökkenő betűméret új bekezdés, új

Részletesebben

Webprogramozás szakkör

Webprogramozás szakkör Webprogramozás szakkör Előadás 3. (2013.03.19) Bevezető HTML felelevenítés HTML elemei Tag-ek, például: , , , Tulajdonságok, például: size, bgcolor Értékek, például: 4, black, #FFFFF

Részletesebben

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>

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> 1. oldal, összesen: 8 oldal főoldal weboldalkészítés kereső optimalizálás HTML kód meta elemek képek beillesztése frame táblázatok XHTML XML CSS szabvány JavaScript vista tudás vista telepítése ingyen

Részletesebben

Gazdasági informatika

Gazdasági informatika Gazdasági informatika Nyugat-Magyarországi Egyetem Faipari Mérnöki Kar Informatikai és Gazdasági Intézet Soós Sándor 2007. november 22-23. Internet - HTML Gazdasági informatika I. Soós Sándor 1 Napjaink

Részletesebben

HTML ÉS PHP ŐSZI FÉLÉV

HTML ÉS PHP ŐSZI FÉLÉV 1 HTML ÉS PHP ŐSZI FÉLÉV 2012-10-10 CSS kezdőlépések 2 A CSS és a HTML viszonya 2012-10-10 Hol található CSS kód? 3 Közvetlenül a tag-ek style paraméterében: bekezdés Ekkor a

Részletesebben

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

Webszerkesztés stílusosan. Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján Webszerkesztés stílusosan Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján Tartalom HTML és CSS HTML vs. XHTML, CSS mi micsoda? XHTML nyelvtan: címkék, egyéb követelmények CSS nyelvtan:

Részletesebben

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

CSS3 alapismeretek. Bevezetés a CSS-be. Mi is az a CSS? Alkalmazási formái, szintaxisa CSS3 alapismeretek Bevezetés a CSS-be Mi is az a CSS? A CSS az angol Cascading Style Sheets kifejezés rövidítése, ami magyarul talán egymásba ágyazott stíluslapoknak lehetne fordítani. Hasonlóan a HTML-hez,

Részletesebben

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

Honlapkészítés. 1. Előadás Bevezető, HTML. Paksy Patrik Honlapkészítés 1. Előadás Bevezető, HTML Paksy Patrik Miből áll össze egy honlap? Oldal szerkezete Grafika Tartalom Tervezzünk 800*600-as / 1024*768-as képfelbontásra! Ezek a ma használt legkisebb méretek!

Részletesebben

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

Informatika 1 CSS. Kovács Kristóf, Pálovics Róbert, Wettl Ferenc november 4. Budapesti M szaki Egyetem Informatika 1 CSS Kovács Kristóf, Pálovics Róbert, Wettl Ferenc Budapesti M szaki Egyetem 2014. november 4. CSS CSS: Cascading Style Sheets CSS CSS: Cascading Style Sheets Cél: a tartalom és a megjelenítés

Részletesebben

HTML szerkesztés. HTML bevezetés

HTML szerkesztés. HTML bevezetés HTML szerkesztés HTML bevezetés Az internet fogalma: egy világméretű számítógép-hálózat, amely kisebb hálózatok összekapcsolódásából áll össze, a hálózatok hálózata, mely adatok továbbítását teszi lehetővé

Részletesebben

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

Természetesen készíts egy csempe nevű könyvtárat és ide mentsd az index.html állományt. Csempe kalkula tor A küldetésünk az, hogy segítsünk kiszámítani egy fürdőszoba csempeszükségletét (felületét). Sőt, ha a kalkulátort használó ügyfél elégedett egyből elküldheti az e-mail címét, hogy a

Részletesebben

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

(statikus) HTML (XHTML) oldalak, stíluslapok (statikus) HTML (XHTML) oldalak, stíluslapok Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok CSS Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok

Részletesebben

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

Készítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés HLTML 5 alapok gyorstalpaló Készítette: Gál Tamás A tananyag programozott változata itt érhető el: Webfejlesztés (http://webfejlesztes.gtportal.eu/) Creative Commons Nevezd meg!-ne add el!-így add tovább!

Részletesebben

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

HTML é s wéblapféjlészté s HTML é s wéblapféjlészté s 1. Melyik országból ered a hipertext-es felület kialakítása? USA Japán Svájc 2. Webfejlesztéskor ha a site-on belül hivatkozunk egy file-ra, akkor az elérési útnak... relatívnak

Részletesebben

HTML sablon tervezése

HTML sablon tervezése 3. Laboratóriumi gyakorlat HTML sablon tervezése A gyakorlat célja: Egy összefüggő HTML illetve CSS nyelvet használó oldal tervezése, amely később sablonként is használható. Felkészüléshez szükséges anyagok:

Részletesebben

2008/09 ősz 1. Word / Excel 2. Solver 3. ZH 4. Windows 5. Windows 6. ZH 7. HTML - CSS 8. HTML - CSS 9. ZH 10. Adatszerkezetek, változók, tömbök 11. Számábrázolási kérdések 12. ZH 13. Pótlás Alapfogalmak

Részletesebben

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

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 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 segédlet számítógép hálózatok tárgy gyakorlatához A jegyzet teljes

Részletesebben

HTML alapok. HTML = HyperText Markup Language

HTML alapok. HTML = HyperText Markup Language HTML = HyperText Markup Language HTML alapok A HTML jelölő nyelv, ami azt jelenti, hogy jelölőelemek (tag-ek) segítségével lehet a tartalom megformázására, elrendezésére vonatkozó utasításokat a böngésző

Részletesebben

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

HTML ALAPOK. Abonyi-Tóth Andor, ELTE IK HTML ALAPOK Abonyi-Tóth Andor, ELTE IK Fontos szabványok HTTP protokoll Protokoll = szabályrendszer HTTP HyperText Transfer Protocol (Hiperszöveg Átviteli Protokoll) a webböngésző (kliens) adatokat kérhet

Részletesebben

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

HTML. Szerkesszünk honlapot.. az alapoktól HTML Szerkesszünk honlapot.. az alapoktól HTML A www jelentése World Wide Web. A HTML (angolul: HyperText Markup Language=hiperszöveges jelölőnyelv) egy leíró nyelv, melyet weboldalak készítéséhez fejlesztettek

Részletesebben

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ő

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ő Felhasználói dokumentáció Számológép Feladat: JavaScript és CSS segítségével számológép készítése. Futtatási környezet: A http://10.0.0.101/~szabby/szgep.html linkre kattintva megjelenik az oldal. Az oldal

Részletesebben

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

Webshop készítése ASP.NET 3.5 ben I. Webshop készítése ASP.NET 3.5 ben I. - Portál kialakíása - Mesteroldal létrehozása - Témák létrehozása Site létrehozása 1. File / New Web site 2. A Template k közül válasszuk az ASP.NEt et, nyelvnek (Language)

Részletesebben

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

Információs technológiák 1. Gy: HTML alapok Információs technológiák 1. Gy: HTML alapok 1/53 B ITv: MAN 2017.09.28 Hogyan kezdjünk hozzá? Készítsünk egy mappát, legyen a neve mondjuk: Web Ez lesz a munkakönyvtárunk, ide kerül majd minden létrehozott

Részletesebben

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

Informatika 1. Informatika el adás. Kovács Kristóf, Pálovics Róbert. Budapesti M szaki Egyetem november 5. 8. el adás Kovács Kristóf, Pálovics Róbert Budapesti M szaki Egyetem 2013. november 5. Amit megtanulunk HTML alapok CSS alapok Amit megtanulunk HTML alapok CSS alapok A tanítottak alapján a saját honlapotokat

Részletesebben

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

WWW Kliens-szerver Alapfogalmak Technológiák Terv. Web programozás 1 / 31 Web programozás 2011 2012 1 / 31 Áttekintés Mi a web? / A web rövid története Kliens szerver architektúra Néhány alapfogalom Kliens- illetve szerver oldali technológiák áttekintése Miről lesz szó... (kurzus/labor/vizsga)

Részletesebben

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

Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET) Cserép Máté. Eötvös Loránd Tudományegyetem Informatikai Kar Webes alkalmazások fejlesztése 4. előadás (ASP.NET) Cserép Máté mcserep@inf.elte.hu http://mcserep.web.elte.hu Készült Giachetta Roberto jegyzete alapján

Részletesebben

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

Memória játék. Felhasználói dokumentáció Memória játék Felhasználói dokumentáció Feladat: JavaScript segítségével, olyan programot írni, mely összekeveri a lapokat, majd a felhasználónak kell párosítani. HTML oldalba ágyazva és CSS-el formázva.

Részletesebben

Web programoz as 2009 2010

Web programoz as 2009 2010 Web programozás 2009 2010 Áttekintés A web rövid története Kliens szerver architektúra Néhány alapfogalom Kliens- illetve szerver oldali technológiák áttekintése Áttekintés: miről lesz szó (kurzus/labor/vizsga)

Részletesebben

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

Informatika 1. Informatika el adás. Kovács Kristóf, Pálovics Róbert. Budapesti M szaki Egyetem november 13. Informatika 1 9. el adás Kovács Kristóf, Pálovics Róbert Budapesti M szaki Egyetem 2013. november 13. CSS HTML formázasára, elhelyezésére szolgál Cél az újrafelhasználhatóság és könny módosítás CSS kód

Részletesebben

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

Megoldás (HTML) <!DOCTYPE HTML> <html> Búbos banka 20 pont A következő feladatban egy weboldalt kell készítenie a búbos banka rövid bemutatására a feladatleírás és a minta szerint. A feladat megoldása során a következő állományokat kell felhasználnia:

Részletesebben

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

Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET) Eötvös Loránd Tudományegyetem Informatikai Kar Webes alkalmazások fejlesztése 4. előadás (ASP.NET) 2016 Giachetta Roberto groberto@inf.elte.hu http://people.inf.elte.hu/groberto Nézetek kezelése Sok esetben

Részletesebben

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

Az image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése Az image objektum Multimédiás alkalmazások készítése JavaScript segítségével webprogramozó a document leszármazottja az images tömbön keresztül érhet el complete : teljesen letölt dött-e? height, width

Részletesebben

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

w w w. h a n s a g i i s k. h u Weblapkészítés weblap: hypertext kódolású dokumentumok, melyek szöveget képet linkeket, könyvjelzőket/horgonyokat táblázatokat / szövegdobozokat és más objektumokat tartalmaznak. Kódolásuk HTML (Hypertext

Részletesebben

Gazdasági informatika

Gazdasági informatika Gazdasági informatika TOVÁBBKÉPZÉS A FAIPARI INNOVÁCIÓVEZÉRELT VÁLLALKOZÁSFEJLESZTÉSÉRT I. Blokk, 5. Képzési modul INFORMATIKAI ALAPÚ IRÁNYÍTÁSI ÉS KOMMUNIKÁCIÓS RENDSZEREK Nyugat-Magyarországi Egyetem

Részletesebben

HTML, Javascript és az objektumok

HTML, Javascript és az objektumok Javascript referencia Bevezetés A Javascript egy HTML fájlokba tervezett objektum-orientált nyelv. Alapjai a C és C++ nyelvek, így ezekre sokban hasonlít. Ez a dokumentum egy gyors összefoglaló a nyelvrõl,

Részletesebben

WCSS (Wap CSS), Wireless CSS

WCSS (Wap CSS), Wireless CSS WCSS (Wap CSS), Wireless CSS A WCSS (WAP Cascading Style Sheet vagy WAP CSS) mobil változata a CSS-nek. WAP speciális kiterjesztéseket tartalmaz. Azok a CSS2 jellemzők és tulajdonságok, amelyek nem hasznosak

Részletesebben

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

Weblapok az érettségin. 2. feladat: weblap vagy prezentáció és grafika 30 pont Weblapszerkesztés Weblapok az érettségin 2. feladat: weblap vagy prezentáció és grafika 30 pont Weblapszerkesztők MS Front Page MS Share Point Designer Macromedia Dreamwaver Mozilla Composer / NVU / Kompozer

Részletesebben

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

Táblázatkezelés 2. - Adatbevitel, szerkesztés, formázás ADATBEVITEL. a., Begépelés Táblázatkezelés 2. - Adatbevitel, szerkesztés, formázás ADATBEVITEL a., Begépelés Az adatok bevitelének legegyszerűbb módja, ha a táblázat kijelölt cellájába beírjuk őket. - számok (numerikus adatok) -

Részletesebben

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

1. A HTML leíró nyelv. 2. Stíluslapok - CSS. 3. HTML sablonok. Tartalom 1. A HTML leíró nyelv 2. Stíluslapok - CSS 3. HTML sablonok Tartalom 1. A HTML leíró nyelv...1 2. Stíluslapok - CSS...1 3. HTML sablonok...1 1. A HTML megjelenítő nyelv...3 1.1. Bevezető...3 1.1.1. HTML

Részletesebben

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

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... Tartalomjegyzék BEVEZETÉS.............. IX Kedves Olvasó.................... ix Kedves érettségizõ!................. x A mintafeladatok használata......... x WEBSZERKESZTÉSI ALAPISMERETEK HTML. 1 I. Elsõ

Részletesebben

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

5-ös lottó játék. Felhasználói dokumentáció 5-ös lottó játék Felhasználói dokumentáció Feladat: JavaScript és CSS segítségével 5-ös lottó játék készítése. Futtatási környezet: A http://10.0.0.101/~szabby/ linkre kattintva megjelenik az oldal. Az

Részletesebben

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

Számítógép Architektúrák. 3. Gyakorlat (shell és HTML alapok) Számítógép Architektúrák 3. Gyakorlat (shell és HTML alapok) Gyakorlati feladatok 1 3. gyakorlat feladatai: 1. és 2. bekezdés Eredeti: Google: Linux:Könyvtár és fájlkezelés http://wiki.koczka.hu/index.php/linux:k%c3%

Részletesebben

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

1. fejezet Bevezetés a web programozásába (Balássy György munkája)... 11 Az internet működése... 11 Tartalomjegyzék 1. fejezet Bevezetés a web programozásába (Balássy György munkája)... 11 Az internet működése... 11 Géptől gépig... 11 Számok a gépeknek... 13 Nevek az embereknek... 14 Programok egymás

Részletesebben

ECDL Webszerkesztés, syllabus 2.0

ECDL Webszerkesztés, syllabus 2.0 2014 ECDL Foundation (ECDL-F) és Neumann János Számítógép-tudományi Társaság (NJSZT) Minden jog fenntartva. Jelen kiadványt, ill. annak részeit tilos reprodukálni, bármilyen formában vagy eszközzel közölni

Részletesebben

SZAKDOLGOZAT. Barkócziné Filep Judit

SZAKDOLGOZAT. Barkócziné Filep Judit SZAKDOLGOZAT Barkócziné Filep Judit DEBRECEN, 2008 DEBRECENI EGYETEM INFORMATIKA KAR HTML ALAPÚ TANÍTÁST - TANULÁST SEGÍTŐ MULTIMÉDIÁS TANANYAG KÉSZÍTÉSE Témavezető: Dr. Nyakóné Dr. Juhász Katalin Készítette:

Részletesebben

A HTML ÉS A CSS ALAPJAI

A HTML ÉS A CSS ALAPJAI Dr. Öveges Ferenc A HTML ÉS A CSS ALAPJAI Segédlet a Lovassy László Gimnázium informatika tagozata számára Veszprém 2011. Tartalomjegyzék Bevezetés 6 1. Előzetes tudnivalók 6 1.1 A HTML és XHTML szabvány

Részletesebben

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

Endrıdi Tamás: Internet alapú alkalmazásfejlesztés c. Részletek Endrıdi Tamás: Internet alapú alkalmazásfejlesztés c. jegyzetébıl A jegyzet 1. fejezete a HTML nyelvet mutatja be az alap HTML tagoktól kezdve az összetettebb táblák és keretek megvalósításáig.

Részletesebben

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

Készítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés HLTML 5 hang videó gyorstalpaló Készítette: Gál Tamás A tananyag programozott változata itt érhető el: Webfejlesztés (http://webfejlesztes.gtportal.eu/) Creative Commons Nevezd meg!-ne add el!-így add

Részletesebben

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)

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) 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) Általános Informatikai Tanszék Iroda: Inf.Int. 108. Tel: 2108 Mai

Részletesebben

Dokumentumformátumok Jelölő nyelvek XML XML. Sass Bálint sass@digitus.itk.ppke.hu. Bevezetés a nyelvtechnológiába 2. gyakorlat 2007. szeptember 20.

Dokumentumformátumok Jelölő nyelvek XML XML. Sass Bálint sass@digitus.itk.ppke.hu. Bevezetés a nyelvtechnológiába 2. gyakorlat 2007. szeptember 20. XML Sass Bálint sass@digitus.itk.ppke.hu Bevezetés a nyelvtechnológiába 2. gyakorlat 2007. szeptember 20. 1 DOKUMENTUMFORMÁTUMOK 2 JELÖLŐ NYELVEK 3 XML 1 DOKUMENTUMFORMÁTUMOK 2 JELÖLŐ NYELVEK 3 XML DOKUMENTUMFORMÁTUMOK

Részletesebben

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.

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. A feladat megoldásához a Sharepoint Designer 2007 programot használjuk, mely ingyenesen letölthető a Microsoft weboldaláról. Az érettségi aktuális szoftverlistája alapján az Expression Web 2, az Expression

Részletesebben

Stíluslapok használata (CSS)

Stíluslapok használata (CSS) 2. Laboratóriumi gyakorlat Stíluslapok használata (CSS) A gyakorlat célja: Bevezetés a CSS stíluslapok használatába. Felkészüléshez szükséges anyagok: 1. A 3-as segédlet (CSS) 2. A bibliográfia HTML illetve

Részletesebben

TEXTAREA++ a JavaScript ereje

TEXTAREA++ a JavaScript ereje TEXTAREA++ a JavaScript ereje Bártházi András email: andras@barthazi.hu web: http://barthazi.hu tevékenységek: Weblabor szerkesztő NJSZT-WFSZ titkár stb. :) Fejlődő web A JavaScript a reneszánszát éli

Részletesebben

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

A html nyelv elemi. Megnevezés Leírás Példa/Magyarázat A html nyelv elemi Megnevezés Leírás Példa/Magyarázat Sortörés Karakter formázás Félkövér Dılt aláhúzott betőméret betőstílus Alapméret

Részletesebben

3. modul - Szövegszerkesztés

3. modul - Szövegszerkesztés 3. modul - Szövegszerkesztés Érvényes: 2009. február 1-jétől Az alábbiakban ismertetjük a 3. modul (Szövegszerkesztés) syllabusát, amely a gyakorlati vizsga alapját képezi. A modul célja Ezen a vizsgán

Részletesebben

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

TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL http://bit.ly/a1lhps Abonyi-Tóth Andor Egyetemi tanársegéd 1117, Budapest XI. kerület, Pázmány Péter sétány 1/C, 2.404 Tel: (1) 372-2500/8466 http://abonyita.inf.elte.hu

Részletesebben

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

Almási Pál: Hogyan szerkesszünk HTML-lapokat? TARTALOMJEGYZÉK Almasi Pal: Hogyan szerkesszunk HTML-lapokat? Almási Pál: Hogyan szerkesszünk HTML-lapokat? TARTALOMJEGYZÉK 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. Bevezetô HTML-struktúra Fejléc

Részletesebben

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.

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. Sakk játék Felhasználói dokumentáció 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. Futtatási környezet: A http://10.0.0.101/~hgy/sakk/

Részletesebben

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

Információs technológiák 2. Gy: CSS, JS alapok Információs technológiák 2. Gy: CSS, JS alapok 1/69 B ITv: MAN 2017.10.01 Ismétlés Van egy Web nevű mappánk, ebben vannak az eddig elkészített weboldalak (htm, html) képek (jpg, png). Logikai felépítés

Részletesebben

Rajz 06 gyakorló feladat

Rajz 06 gyakorló feladat Rajz 06 gyakorló feladat Attribútumos szövegmező A feladat megoldásához szükséges fájlok: Rjz06k_Szelepház.ipt Feladat: Készítsen attribútumos szövegmezőt, ahol is a szövegmező rovatai a modell iproperties

Részletesebben

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

WEB PROGRAMOZÁS 3.ELŐADÁS. Űrlapok WEB PROGRAMOZÁS 3.ELŐADÁS Űrlapok 2 Globális és környezeti változók Globális és környezeti változók 3 A globális változók azok a változók, amelyeket a program legfelső szintjén, azaz a függvényeken kívül

Részletesebben

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

Web technológiák. Barabás Péter, Általános Informatikai Tanszék, Miskolci Egyetem. Barabás Péter Web technológiák 1 Web technológiák Barabás Péter, Általános Informatikai Tanszék, Miskolci Egyetem Barabás Péter Web technológiák 1 Témakörök 1 2 3 HTTP/1.1 HTML4 Thi CSS is an example text. Go ahead and replace it 4 JavaScript,

Részletesebben

VII. Appletek, grafika

VII. Appletek, grafika VII. Appletek, grafika 1. Bevezetés A tantárgy elején említettük, hogy a Java alkalmazásokat két nagy csoportba sorolhatjuk. Ezek: alkalmazások (applications) alkalmazáskák (applets) Az eddig megírt programjaink

Részletesebben

BEVEZETÉS A HTML NYELV HASZNÁLATÁBA

BEVEZETÉS A HTML NYELV HASZNÁLATÁBA BEVEZETÉS A HTML NYELV HASZNÁLATÁBA TARTALOM Bevezetı... 1 A HTML dokumentumok szerkezete... 1 Kezdjük a címmel... 1 Címsorok és bekezdések használata... 2 Színek és háttér... 2 Szövegrészek formázása...

Részletesebben

A HTML nyelv alapjai

A HTML nyelv alapjai A HTML nyelv alapjai Legalább mit kell ismernie egy webprogamozónak? Weblap tartalmának, szerkezetének kialakítása: HTML (HyperText Markup Language) Weblap formázása: CSS (Cascading Style Sheets) Kliensoldali

Részletesebben

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

A HONALPSZERKESZTÉS ALAPJAI. 50 feladat. a Debreceni Egyetem Informatikai Karának. Informatikus Könyvtáros szakos hallgatói számára A HONALPSZERKESZTÉS ALAPJAI 50 feladat a Debreceni Egyetem Informatikai Karának Informatikus Könyvtáros szakos hallgatói számára Készítette: Jávorszky Ferenc Debrecen 2010. 1 1. Készítsen honlapot, amelynek

Részletesebben

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

Tamás Ferenc: CSS táblázatok 2. Tamás Ferenc: CSS táblázatok 2. Ez az írás azoknak készült, akik már értik a HTML és a CSS nyelveket, csak használat közben kellene egy adott tulajdonság vagy érték. Kérem, hogy senki se ezzel kezdje a

Részletesebben

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

<h1>...</h1> HTML utasítások összefoglalása. Készítette: SaNandor 2010., Veszprém HTML utasítások összefoglalása A HTML program több részre tagolható (fejléc, törzs, megjegyzés), utasításai < > jelek közé kerülnek. Az egyes utasításokra jellemző, hogy van egy nyitó és egy záró részük

Részletesebben

Oktatási segédanyag. Weboldalszerkesztési gyakorlatok

Oktatási segédanyag. Weboldalszerkesztési gyakorlatok Oktatási segédanyag Weboldalszerkesztési gyakorlatok Bevezetés A korábbi oktatási segédanyagokban megismertük a weboldalszerkesztés gyakorlatát. Ennek a segédanyagnak a célja, hogy gyakorlati példákon

Részletesebben

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

PHP alapjai, bevezetés. Vincze Dávid Miskolci Egyetem, IIT alapjai, bevezetés Vincze Dávid Miskolci Egyetem, IIT vincze.david@iit.uni-miskolc.hu PHP Personal Home Page (Tools) Script nyelv -> interpretált Elsősorban weboldal (dinamikus) tartalmak előállítására

Részletesebben

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

Web programozás I. tantárgyi információk Web programozás I. tantárgyi információk Nagy Gusztáv honlap: http://nagygusztav.hu jegyzet e-mail: nagy.gusztav@gamf.kefo.hu tantárgy honlapja: http://webprog.hu/ tantárgyi hírek (nem ETR kurzusfórum!)

Részletesebben

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.

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. 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. A WAP lehetővé tette, hogy a mobiltelefon tulajdonosok

Részletesebben

3. modul - Szövegszerkesztés

3. modul - Szövegszerkesztés 3. modul - Szövegszerkesztés - 1-3. modul - Szövegszerkesztés Az alábbiakban ismertetjük a 3. modul (Szövegszerkesztés) syllabusát, amely a modulvizsga követelményrendszere. A modul célja Ezen a vizsgán

Részletesebben