< WebKészítés 2.5 /> Az ingyenes weblapszerkesztői oktatás

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

Download "< WebKészítés 2.5 /> Az ingyenes weblapszerkesztői oktatás"

Átírás

1 < WebKészítés 2.5 /> Az ingyenes weblapszerkesztői oktatás

2 Tartalomjegyzék Üdvözlet, olvasó! 03 Internetes ismeretterjesztő 04 Nettöri röviden 05 Szerveroldali programok 06 Kliensoldali programok 07 Tartalmi elemek 08 HTML vagy XHTML? Honnét Tudnám, Mi Lenne A nyelv szintaktikája 10 A nyelv felépítése 11 A fejléc és tag-jei 13 Blokk-szerű szöveges elemek 15 Sorbeli szöveges elemek 17 Mire hivatottak a hivatkozások? 18 Képek beszúrása 20 Táblázatok 22 Űrlapok és elemeik 26 Érdekes címkék 30 Hasznos tanácsok 34 Végszó 35 Stílus és megjelenés 36 Szintek és rangsoruk 37 Szintaktika 37 Dokumentumfa 39 Dobozmodell 41 Szegélyek, külső és belső margók 42 Méretezés 44 Pozícionálás 46 Úsztatás 47 Megjelenés 48 Táblázatok stílusai 50 Listák formázása 52 Grafika testreszabása 54 Idézőjelek használata 56 Rövidítések, mozaikszavak 56 Szövegformázás 57 Álosztályok, álelemek 60 Elavult címkék és attribútumok 62 Oldalfelépítés kialakítása 63 Listák használata menüként 65 Hibakezelés 67 Az XML és a CSS kapcsolata 68 Modern CSS 69 Hogyan tovább? 70 Tartalomjegyzék -

3 Üdvözlet, olvasó! Szervusz, Programmer_G vagyok, a WebKészítés 2.5 szerkesztője. Üdvözöllek abban a leírásban, ahol a továbbiakban nagy eséllyel el fogod sajátítani a weblapok szerkesztésének minden fortélyát! Miért jó ez neked? Nem szeretném húzni senki idejét, hiszen "a Te időd nekem is drága". Ennél jobb reklámszöveget nem találtam, de a lényeget jól tükrözi. A következőkben lehetőséged nyílik megtanulni a webfejlesztést a manapság legelterjedtebben alkalmazott nyelvekkel. (XHTML, CSS, PHP, MySQL, JavaScript) Minden leírást igyekszem a reklámszöveghez hűen rövidre fogni és lényegre törően bemutatni. Ha végigolvasod az itt leírtakat, garantáltan képes leszel saját weblapot gyártani. De hiszen mindenhol ezt harsogják... miben különbözik az én leírásom a többi 100 másiktól? Következzenek a tények: a szabványos XHTML nyelvvel fogjuk elkészíteni a weblapok törzsanyagát, amely minden böngészőben garantáltan egyformán jelenik meg, akár a mobilkészüléken is. A CSS-nek köszönhetően olyan grafikai formázást végezhetünk, aminek csak töredéke lehetséges a HTML-ben. A JavaScript és a PHP (szerver- és kliensoldali műveletvégzők) lehetővé teszik, hogy honlapod dinamikussá tedd, saját fórumokat, hírleveleket kezelj, és a lehetőségeknek csak fantáziád szabhat határt. A MySQL - adatbázis kezelővel pedig gyors és egyszerű módon tárolhatod adataidat, és persze biztonságosan. Egy szó, mint száz... Ennyit a bevezetésről, ha sikerült meggyőzni, akkor "csapjunk is a lecsóba!" Eredményes tanulást kívánok! Ugorjunk az alapok elsajátításához! Üdvözlet, olvasó! -

4 Internetes ismeretterjesztő Ebben a fejezetben igyekszem röviden összefoglalni, amit feltétlen szükséges tudnod a honlapok működéséhez. Elkezdjük egy kis törivel, aztán bemutatásra kerülnek különböző programok, mik a későbbiekben hasznodra válhatnak... Internetes ismeretterjesztő -

5 Net töri röviden A sztorit manapság közel mindenki ismeri, hogy réges-régen (1969) az USA védelmi minisztériumában (ARPA) kifejlesztettek egy olyan csomagkapcsolt adatközlő rendszert (ARPAnet), ami a mai internet őseként emlegetett. A fő szempont egy olyan hálózat létrehozása volt, amely nem sérül meg, ha egyes elemek (szerverek) kiesnek, hiszen bármely másik pótolhatja azt (az esetleges támadásokra való tekintettel), hiszen minden gép kommunikál mindegyikkel. Szerencsére a hadviselés mellett a közéletben is gyorsan elterjedt. (1986 körül) A globális hálózat ma már korlátlan szabadságot biztosít és javítja az esélyegyenlőséget. A továbbiakban elsajátíthatod, hogy lehet a Tiéd is a Netes világ! [Továbbiak a net töriről: Az alapelvek közé tartozik, hogy minden gép elérhető legyen a másikról, ehhez viszont szükséges egy egyedi azonosító. Ez a gépek Internet Protokoll címe (IPv4 vagy csak IP) Ezt minden gép az őt internettel kiszolgálótól (kiszolgáló) kapja. Az IP cím 4 db, egymástól pontokkal elválasztott, 1 bájtos (1-256 ig terjedő) számból áll. (Pl.: ) Ez a 32 bites azonosítás azonban véges variációi miatt manapság nem elegendő. Elfogyóban vannak a még kiosztható IP címek. A legtöbb gép már támogatja az IPv6-ot, ami sokkal nagyobb lehetőségeket nyújt. (128 bit) Ennek formája a következő: 16 bites csoportosítás, köztük kettőspontok. (Pl.: 2001:610:240:11:0:0:C100:1319) Már most érezhetjük, hogy ezek megjegyzése bizony komoly emberi memóriát igényel. Sokkal könnyebben társítunk neveket egy géphez, mint sablonos számokat. Erre a megoldás a DNS (Domain Name Service). Ezt nagyjából úgy kell elképzelni, hogy egy-egy központi gép hozzárendel egy IP címhez egy nevet. (Pl.: google.hu mögé bújik el a ) Ezt a nevet domain címnek, magyarul tartománynévnek hívjuk. [Továbbiak az internetcímekről: Kétfajta számítógép létezik funkció szempontjából az interneten: a szerver és kliens. A szerver dolga hogy kiszolgálja a rajta lévő adatokkal a klienseket (amik mögött mi ülünk). A kiszolgálókon ugyanúgy programok futnak, mint otthoni klienseinken. Minden egyes szolgáltatás egy programhoz van kötve. Hogy az IP-re érkező adatok közül minden program kiválaszthassa a magának valót, az IP-k fölé kifejlesztettek egy-egy saját protokollt, melyek ún. portokat (átjárókat) használnak azonosításra. Pl.: :80 vagy :25 (http portja: 80, ftp portja 25 általában) Tartománynevekkel ugyanez: vagy ftp://sajatcim.hu. [Továbbiak a protokollokról: Fontos itt megemlíteni, hogy a Web nem ugyanaz, mint az Internet. Az Internet bármilyen kapcsolat jelenthet gépek között (ftp, levelezés, stb), a Web viszont csak az, ami a böngészőnkben megjelenik lapok formájában. A Web (World Wide Web) 1989-ben indult útjára az európai CERN-ből. (Európai Részecskefizikai Laboratórium) Tim Berners-Lee célja a kutatási eredmények megosztása volt, egyszerű szöveges formában, más eredményekre mutató hiperhivatkozásokkal összefűzve. Innét ered a név: Hipertextes dokumentum, és HTTP (HyperText transfer protocoll). [Az első weblap: A következőkben megismerkedünk néhány elterjedt kliens- és szerveroldali programmal, és azok telepítésével a gépünkön. Internetes ismeretterjesztő - Net töri röviden

6 Szerveroldali programok Napjainkban a szerverek jelentős többsége Linux operációs rendszeren fut. Nekünk csak annyit szükséges tudni róluk, hogy nagy hangsúlyt fektet az egyes felhasználók azonosítására és azok jogaira az egyes fájlokhoz. Az átlag felhasználók körében legelterjedtebb operációs rendszerre, a Windowsra fogom a továbbiakban bemutatni a szerverprogramok telepítését. Ha igazi honlapszerkesztők szeretnénk lenni, szükségünk lesz egy saját "szerverre", amin tesztelhetjük, hogy sikerültek alkotásaink. Megjegyzés: Ha csak helyi (offline) használatra szeretnénk (pl. CD-k, DVD-k menüjeként) weblapot készíteni, ez esetben nem lesz szükségünk a PHP és MySQL nyelvekre, sem a szerveroldali programokra. Első lépésként látogassuk meg a oldalt és töltsük le a WAMP (Windws Apache MySQL PHP server) legújabb Windowsra tervezett változatát. Ez a programcsomag tartalmazza a napjaink legelterjedtebb szerveroldali programjait, az Apache web szervert MySQL adatbázis kezelőt és a PHP műveletvégzőt. (Persze használhatsz akár IIS webszervert vagy Macintosh operációs rendszert is nyugodtan.) [További web szerverek: Kis help a WAMP-hoz Letöltés után futtasd a telepítőt. Rá fog kérdezni, mi legyen a telepítési könyvtár. Ajánlott a meghajtó gyökerében elhelyezni, pl.: "C:\Server\" Így ha szerverünk interneten elérhető is, más fájlokhoz nem fognak hozzáférni illetéktelenek. A sikeres telepítés és az indítás után a tálcán meg fog jelenni egy zöld/sárga/piros "W" ikon. A színek jelzik a 3 program állapotát. Jobb illetve bal kattintásokkal rajta megvizsgálhatjuk az egyes részek konfigurációs fájljait és beállíthatjuk a magyar nyelvű menüt is. A "C:\Server\www\" könyvtár lesz ezek után a házi web szerverünk gyökérmappája. (Ide kell majd bepakolni készülő honlapjaink mappáit.) Ha a szolgáltatások el vannak indítva, akkor pedig saját gépünkről a böngészőnkben beírt "http://localhost/" címre meg is jelenik szerverünk kezelőfelülete. Itt a phpmyadmin segítségével hozzáférhetünk adatbázisainkhoz vagy egy Projektet (mappát) választva megtekinthetjük honlapunk működés közben. Ha neten keresztül szeretnéd másoknak megmutatni, mit alkottál, fontos hogy ONLINE állapotban legyen a WAMP. A külső IP címed beírásával így meg fog jelenni nekik is az oldal. Internetes ismeretterjesztő - Szerveroldali programok

7 Kliensoldali programok A honlapszerkesztést a legegyszerűbben az angol WYSIWYG (What You See Is What You Get) mozaikszóval lehet jellemezni. Ez magyarul amolyan írd be és nézd meg kategória. (Beírsz pár kódot és megnézed az eredményt, majd újra...) Egyszóval a továbbiakban leírtakkal és egy kis leleményességgel Te is igazi honlapszerkesztővé válhatsz! Fontos megemlíteni, hogy nem kell semmiféle, a mátrix filmből ismert kódokra gondolni. Mindent szöveges formában fogunk leírni a fájljainkba. Tehát nem lesz másra, csak egy szövegszerkesztő programra szükségünk. Persze nem az Office-ból ismert Word a legmegfelelőbb erre a célra. Aki nem szeret telepítgetni, neki mindig kéznél lesz a Windowsba rejtett Jegyzettömb (Notepad). A többieknek javaslom az EditPlus program letöltését innét: vagy a mozilla Kompozerjét innét: Komolyabb célokra az Adobe Dreamwawerje talán a legmegfelelőbb választás... [Továbbiak: A leglényegesebbet persze ki is fejeltettem. Szükségünk lesz még ún. böngészőkre is hogy élvezhessük későbbi munkánk gyümölcsét. A Windowsban megbújt Internet Explorert senkinek sem kell bemutatnom, illetve feltehetően mindenki ismeri a Mozilla Firefoxát, vagy az Operát, Safarit, Google Chromeot, és a lista itt még közel sem ér véget. Javasolt egyszerre több, de legalább 2 használata a fentiekből. A későbbiekben ígérem, kiderül miért. [Továbbiak a böngészőkről: A böngészőkről viszont tudnunk kell egy fontos jellemzőt. Mégpedig, hogy honnét tudják, hogyan kell megjeleníteniük a különböző képi, hang, videó vagy szöveges elemeket. Amikor letöltünk/megtekintünk egy fájlt, akkor a böngésző egy kérést küld a fájlt tároló web szerver felé. Ezután a böngésző megkapja a fájlt, egy nyers adattömeg formájában. (Sok 1 és 0 ha úgy tetszik.) Hogy tudja, milyen típusúval áll szemben, a tárolótól a böngésző megkapja a fájl MIME típusát is. Ez alapján tudja, hogy mit kell kezdeni a fájllal. Pl.: ha képet kap, meg kell jelenítenie, ha videót, el kell indítani egy médialejátszót, ha HTML oldalt, akkor fel kell építenie a weboldalt stb. Néhány MIME típus példaként: weblap [text/html], stíluslap [text/css], JPEG kép [image/jpeg], MPEG videó [video/mpeg],... Most már minden lényeges program és alapismeret a rendelkezésünkre áll, hogy belecsapjunk a sűrűjébe! Ha még nem sikerült elvenni a kedved egy honlap készítésétől, várlak a következő fejezetben! Internetes ismeretterjesztő - Kliensoldali programok

8 Tartalmi elemek Csak semmi pánik! Most már mindent tudsz, hogy ténylegesen a honlapszerkesztéssel foglalkozhassunk. Meg fogod ismerni, miből épül fel egy honlap, majd bemutatom a fontosabb HTML elemeket és ezek XHTML-beli megfelelőit is. Sőt, kipróbálni is lesz alkalmad a frissen tanultakat. Ha itt végzel, gyakorlatilag képes leszel saját, statikus weblapot készíteni. Tartalmi elemek - Kliensoldali programok

9 HTML vagy XHTML? Honnét Tudnám Mi Lenne... Először egy kis törivel kezdeném. (Tudom, nem mindenki szereti az ilyet, de ez más lesz, mint a suliban!) A HTML nem más, mint a kb 1993-óta létező HyperText Markup Language rövidítése. Magyarul: Hipertextes dokumentum-leírónyelv. Fő előnye, hogy platform független. (Nem függ operációs rendszertől.) A funkciója eredetileg az volt, hogy egy gyors és könnyen formázható szöveges információkat közlő eszköz legyen egymásra mutató hivatkozásokkal. Tehát a HTML, mint leírónyelv, egy SGML (Standard Generalized Markup Language) jelölőrendszer. Ez a jelölőrendszer egyrészt ASCII karakterekből (egyszerű szöveg) áll, másrészt pedig olyan címkékből, amik a böngésző számára egyértelműen felismerhetők és velük formázhatók az oldal elemei. Azután létrejött egy új szervezet a World Wide Web Consortium (W3C), mely szárnyai alá vette a HTML-t és onnéttól kezdve elindult a Web úttörése. A W3C 1996-tól kezdve elfogadta a táblázatokat, a kereteket, a stíluslapokat, az appleteket, a szkripteket, (ezekről később részletesebben írok) és még sok minden mást, amivel a Web dokumentumok egyre inkább a látványvilág felé kezdtek orientálódni, és nem a szöveges információközlés felé, ami az eredeti cél volt. Egyre jobban grafikussá váltak a felületek. Elindult a böngészők versenye ezek minél gazdagabb megjelenítésére. Az események egyetlen nagy hátránya: a különböző böngészők nem teljesen kompatibilisek a szabványokkal. Ezért fennáll az esély, hogy egyes típusok másképpen jelenítenek meg egy s mást. Manapság a mobilinternet terjedésével együtt megindult egy szabványosítási folyamat. A W3C létrehozta az XHTML-t (Extensible HTML), ami már SGML helyett az XML jelölőrendszeren alapul és napjaink böngészői egységesen preferálják. Használata ajánlott, hiszen a sokkal korlátozottabb kódhasználatból adódóan javul oldalunk kompatibilitása, illetve egyszerűsödik azok egy külső szerveroldali programmal való generálása is. Végül pedig Neked, mint szerkesztőnek is sokkal könnyebb dolgod lesz. [HTML-ről bővebben: [XHTML-ről bővebben: El kell oszlatnom azonban néhány tévhitet. Az XHTML nem jelent feltétlenül előnyt a mobiltelefonos böngészésben, sem az elterjedtségben. A jelenleg XHTML-ben írt oldalak többsége is hibás. Illetve az sem igaz, hogy ezzel felkészítjük honlapunk a jövőre, hiszen a jövő nagy valószínűséggel a fejlesztés alatt álló HTML 5-é. (Ez a nyelv visszafele kompatibilis a régiekkel, mindezek mellett az XHTML-hez hasonló előnyökkel rendelkezik.) A szintén fejlesztés alatt álló XHTML 2 viszont egy teljesen új irányvonalat képvisel. Mivel a fent tárgyalt két nyelv nagyon hasonló és nem jelenthető ki egyértelműen, melyik "jobb", így a továbbiakban egyszerre fogom bemutatni a HTML és XHTML nyelveket, mindenhol felhívva a figyelmet a köztük lévő eltérésekre. Tartalmi elemek - HTML vagy XHTML? Honnét Tudnám Mi Lenne...

10 A nyelv szintaktikája A HTML nyelv szintaktikája nagyon egyszerű. Amint azt a bevezetőben is említettem szokták (WYSIWYG) írd be és nézd meg kategóriának nevezni. Felvetődik itt a kérdés: hogyan különbözeti meg a böngésző az egyszerű szöveget a Tag-ektől? (Talán a címke szó a legjobb magyar fordítás rá.) A válasz: őket relációjelek közé kell tenni. Így: <címke> (A gyengébbek kedvéért AltGr + í és AltGr + y.) Fontos hozzátennem, hogy ez a nyelv nem Chase Sensitive (A kis és nagybetűvel írt Tag-et egyaránt elfogadja.) Az XHTML viszont megköveteli a kisbetűk használatát! A jövőben erre ügyeljünk. A Tag-ek általában egy adott szakaszra vonatkoznak, így kezdő- és záró elemből állnak és közéjük kerül a formázandó szöveg. Pl.: <b>...</b> (bold ~ félkövér) Látható, hogy a záró elem egy "/" jellel különbözik csak a kezdőtől. Létezik egy másik típus is, mikor összevonjuk e kettőt: <br /> (break ~ új sor) vagy <hr /> (horizontal ruler ~ vízszintes vonal) Az XHTML szerint ez utóbbiakat is kötelező lezárni /-rel, a HTML-ben ezt elhagyhatjuk. Lehetőség van ezen elemek különálló tag-gel lezárására, de az emberi lustaság általában győz és marad az összevont. :) Tegyünk is egy próbát! A honlap Kódtesztelőjébe írjuk be a "sima és <b>vastag</b>" sort! Ha az eredmény: "sima és vastag", akkor létrehoztuk életünk első, picit gyenge honlapját! A címkét értelmezi a böngésző és nem írja ki, hanem formázza a szöveget. Most próbáljuk ki pár sorral (br) lejjebb ugyanezt dőlten (i ~ italic) és aláhúzva (u ~ underline)! Már csak egy megválaszolatlan kérdés merülhetett fel benned. Mi van olyankor, ha mondjuk színezni akarjuk a szövegeket. Minden színhez tartozik egy külön Tag? Sokkal egyszerűbb a megoldás: a Tag-eken belül lehetőség nyílik attribútumok megadására. Az adott attribútumot a Tag-be írjuk, majd utána egyenlőségjellel ( = ) adjuk meg neki az értékét. Az XHTML annyit csavar rajta, hogy idézőjelek közé kell tennünk az értékeket ( " " vagy ' ' ), illetve minden attribútumnak értékkel kell rendelkeznie. Tehát teljesen valahogy így néz ki: <címke attribútum="érték">...</címke> Akkor most lássuk hogyan is néz ki egy elválasztó vonal piros színben. A tanult módon kezdjük az írást: <hr color="red" /> Nem is olyan nehéz, csak egy kis angoltudást igényel, hiszen sokféle paraméter és érték létezik. (A későbbiekben részletes bemutatásra kerülnek.) peldak/xhtml/ismerkedes sima és <b>vastag</b> <br /> <br /> <br /> sima és <i>dőlt</i> <br/ > sima és <u>aláhúzott</u> <hr /> normál vonal <hr color="red" /> piros vonal <hr color="blue" /> kék vonal Remélem eddig érthető voltam, és sikerültek a lelkes gyakorlások. (Ha még nem említettem, a fájlokat ".htm" vagy ".html"-ként kell menteni!) Tartalmi elemek - A nyelv szintaktikája

11 A nyelv felépítése Mint azt már említettem, a HTML / XHTML nem egységes, így tudatnunk kéne valahogy a böngészőnkkel, hogy mit kap tőlünk. Erre szolgál a dokumentumtípus-definíció (DTD). Hiányában természetesen nem dől össze a világ, böngészőnk alapértelmezése veszi kézbe a dolgokat. Ennek ellenére erősen ajánlott mindig megadni. Honlapunk első sora ezekkel kezdődhet: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> Ez a sor általában a böngésző alapértelmezés is. Ezt alkalmazzuk, ha HTML 4-ben írjuk az oldalt! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> Ezt a meghatározást akkor használjuk, ha XHTML 1.0 kódot használunk, viszont még szeretnénk a HTML 4 néhány tulajdonságát kihasználni régebbi böngészőkön. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd"> Ezt csak akkor használjuk ha XHTML 1.0-ban is kereteket (frame) szeretnénk alkalmazni, hiszen ott nem tartozik a szigorított szabályok közé ez a módszer. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> Ezt akkor használjuk, ha szigorúan meg szeretnénk feleltetni az XHTML 1.0 szabványnak a stíluslapokkal együtt. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> Ez a meghatározás pedig XHTML 1.1 szerinti honlapkódokat jelent, ami jelenleg a legszigorúbb szabályok követését jelenti. A HTML jelölőrendszere strukturálisan felépített. (külön-külön egymásra épülő részekre osztott) A 2 legfőbb rész: a FEJLÉC (angolul: HEADER) és a TÖRZS (angolul: BODY). A fejlécbe tesszük az olyan dolgokat, ami általában nem látható (szerző neve, stb...). A törzs az oldal látható része. Itt mennek végbe a formázások és a szövegeket, adatokat is itt közöljük. Mindez pedig mivel a HTML része, ezért egy <html></html> tag közé tesszük. Most már nem nehéz kitalálni, hogy is fogjuk őket használni... <html lang="hu" xml:lang="hu" xmlns="http://www.w3.org/1999/xhtml"> <head>... </head> <body>... </body> </html> Hoppá, itt valami más is van! A lang honlapunk szöveges tartalmának elsődleges nyelvét határozza meg. Nem kell aggódni, ez leginkább csak a keresők és szövegfelolvasók miatt szükséges. (Ettől még írhatunk több nyelven is, ha azt az más tag-ekben ugyanezzel a Tartalmi elemek - A nyelv felépítése

12 módszerrel megadjuk.) Aztán jön a két xml-es attribútum. Ezek használata csak akkor szabad, ha az XHTML mellett döntünk. Most már ideje lenne megismerkedni a két... helyére írható kódokkal, nem? peldak/xhtml/szabalyos <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html lang="hu" xml:lang="hu" xmlns="http://www.w3.org/1999/xhtml"> <head></head> <body> ez itt az oldal törzse<br /> <br /> <b>vastagon szedett szöveg</b> <hr /> <i>dőlt szöveg</i> <hr color="red" /> <u>aláhúzott szöveg</u> <hr color="blue" /> </body> </html> Tartalmi elemek - A nyelv felépítése

13 A fejléc és tag-jei Lássunk neki a fejléc lefejezésének... Ahogy azt már említettem, a fejlécbe (<head></head>) kerül minden a böngésző számára fontos, számunkra viszont többnyire láthatatlan elem. Kezdjük hát rögtön a kivétellel: a <title></title>. Ezzel a Tag-gel adhatjuk meg leendő honlapunk címsorában megjelenő szöveget. Amit tudni kell róla, hogy nincsenek attribútumai és csak egyszerű szöveges szöveg (remélem, értitek... ) írható közé, illetve ennek hosszát egyes böngészők korlátozhatják. Ezt követi általában egy rakás <meta />. Létezik belőle http-equiv-es és name-es is (egyszerre csak az egyik alkalmazható), de mindkettőnek rendelkeznie kell a content attribútummal. Tulajdonképpen ők csak segítik a böngészők dolgát bizonyos tulajdonságok előre definiálásával. Hiányukban a böngésző alapértelmezése fog történni. A fontosabbak a következők: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Weblapunk tartalomtípusát (MIME) itt adhatjuk meg (text/html vagy application/xhtml+xml) és itt kap helyet a HTML fájl karaktereinek kódlapja. Ha nincs definiálva, akkor a iso lép életbe. Létezik még UTF-8, ANSI és Unicode... Megjegyzés: az application/xhtml+xml tartalomtípust sajnos nem támogatja az IE. Helyes XHTML lapokhoz ezt kéne alkalmazni, de a kompatibilitás érdekében erről le kell mondanunk. Érdemes a <title> elé tennünk. <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-language" content="hu-hun" /> Itt történik a javascript és a stíluslapok tartalomtípusának meghatározása. (Róluk később bővebben.) Az utolsó Tag pedig mondanom sem kell, a tartalom nyelvének kiválasztását végzi... <meta http-equiv="refresh" content="1860" /> Az előző segítségével megadható egy bizonyos időintervallum, mely eltelte után önmagától frissíti a böngésző a lapunkat. (Gyorsan változó tartalmú honlapok esetén célszerű.) Értéke másodpercben értendő. peldak/xhtml/frissit <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html lang="hu" xml:lang="hu" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="hu-hun" /> <title>ide KERÜL AZ OLDAL CÍME</title> <meta http-equiv="refresh" content="5;url=http://www.google.hu" /> </head> <body> Az oldal átirányítódik a 5 másodperc után... </body> </html> Tartalmi elemek - A fejléc és tag-jei

14 <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache, must-revalidate" /> A böngészők tárolnak egy példányt a weblapunk elemeiről a felhasználó merevlemezén a következő gyorsabb betöltés érdekében. Ezt az un. cache-t kapcsolhatjuk ki e két sorral. Böngészőtől függ, melyik működik. (Gyakran frissített képi elemek esetén ajánlott.) <meta http-equiv="x-ua-compatible" content="ie=8" /> <meta http-equiv="imagetoolbar" content="no" /> Csak az Internet Explorer értelmezi a fenti két sort. Az elsővel megadható, hogy az IE melyik változatára készült az oldalunk. A "kompatibilitási nézet" ennek megfelelően értelmezi. A másodikkal régebbi IE-k esetén a képeken megjelenő kis sávot tűntethetjük el. <meta name="revisit-after" content="5 days" /> A már meglátogatott hivatkozások egy rövid ideig más színnel jelennek meg. Ennek elévülését szabályozhatjuk a fenti formában. <meta name="author" content="készítő" /> <meta name="copyright" content="jogi tudnivalók" /> <meta name="description" content="rövid leírás" /> <meta name="keywords" content="kulcsszó1, kulcsszó2,..." /> A fenti 4 meta Tag-hoz nem szándékozom különösebb leírást mellékelni. peldak/xhtml/fejlec <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html lang="hu" xml:lang="hu" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="hu-hun" /> <title>oldal címe</title> <meta name="author" content="készítő" /> <meta name="copyright" content="jogi tudnivalók" /> <meta name="description" content="rövid leírás" /> <meta name="keywords" content="kulcsszó1, kulcsszó2,..." /> </head> <body> Ez egy komplett oldal fejléce. Érdemes mindig ebből kiindulni. </body> </html> Tartalmi elemek - A fejléc és tag-jei

15 Blokk szerű szöveges elemek Rajta hát, lessük meg a body-ját! Minden, mi szemnek ingere, itt követhetjük el, a <body></body> címkék között. Az XHTML-ben megkötés, hogy nem lehet kapásból szöveget írni a törzsbe, hanem előtte valamilyen szöveges elemet, például egy bekezdést kell nyitnunk. Mielőtt rátérnék a többi megoldásra, tisztáznunk kell a következőket: blokkszerűnek az egy v. több sor magas és teljes képernyő széles téglalapszerű elemet, sorbelinek pedig az egy sor magas és adott szélességü elemet hívjuk. Esztétikus és praktikus a címek és alcímek kiemelése. Erre szolgálnak a header tag-ek: <h1></h1>, <h2></h2>,... egészen <h6></h6>-ig. A számok itt a méreteket jelölik, ugyanis az 1 a legnagyobb és a 6 a legkisebb, de a gyakorlatban 1-3-ig használjuk őket. Jellemzőjük hogy általános esetben a böngésző alapértelmezése a tényleges méret, illetve előtte és utána térköz (üres sor) választja el őket a többi elemtől. Ez után jöhet a fent említett bekezdés (v. általános szöveg) <p>...</p>. Ő is rendelkezik alapesetben a térköz tulajdonsággal. Egy bekezdésen belül, a már ismert sortöréssel <br /> tördelhetjük a szöveget. Ha próbáltál már pár sort megjeleníteni, láthattad, teljesen mindegy a fájlban hová teszed a sortörést vagy hány szóközt, illetve tab-ot használsz. Folyamatos szöveget kapsz eredményként csak egy-egy szóközzel. Ha mindenképpen ragaszkodni szeretnél ehhez a szöveges (txt) fájlokból ismert formázáshoz, használhatod a <pre>...</pre> (Preformatted ~ előre formázott) címkét. Ha pedig több ún. törés nélküli közöket szeretnél egymás után tenni, azt az ismételt szóközök helyére tett speciális karakterrel (további speciális karakterek listája a kódjegyzékben) érheted el. Idézetekhez (beljebb húzott bekezdés) szokás a <blockquote></blockquote> blokk idézetet használata. Megegyezik gyakorlatilag a fentiekkel, csak bal oldali margója nagyobb és benne közvetlenül csak blokk egység következhet. peldak/xhtml/szovegblokk <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html lang="hu" xml:lang="hu" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="hu-hun" /> <title>szövegblokkok</title> </head> <body> <h1>ez egy H1-es szöveg.</h1> <h2>ez egy H2-es szöveg.</h2> <h3>ez egy H3-as szöveg.</h3> <h4>ez egy H4-es szöveg.</h4> <h5>ez egy H5-ös szöveg.</h5> <h6>ez egy H6-os szöveg.</h6> <p> Ez itt egy bekezdés, benne pedig<br /> sortörések is lehetnek... majd néhány szóköz </p> <pre> Szabad szöveg és Tartalmi elemek - Blokk szerű szöveges elemek

16 sortörés benne. majd néhány szóköz </pre> <blockquote><p>blokk idézet</p></blockquote> </body></html> Ha már a beljebb húzásoknál tartunk, meg kell említeni a klasszikus típusát, a felsorolást is. Három típusa, rendezett (Ordered List), rendezetlen (Unordered List) és definíció (Definition List) lista létezik. A Tag-jeik a rövidítésükből következnek: <ol></ol>, <ul></ul> és <dl></dl>. A különbség a rendezett és rendezetlen közt, hogy előbbi számozással illetve betűzéssel, ezzel szemben utóbbi csak egyforma szimbólumokkal jelölt. Ám ezekkel még csak a listát jeleztük, belső elemeiket (List Item) első kettőnél a <li>... </li> címkék fogják közre. A definíció kicsit bonyolultabb, hiszen kell lenni egy definiáltnak (<dt>... </dt>) és egy vagy több definíciónak (<dd>... </dd>). Megjegyezném, hogy HTML-ben elég volt csak a nyitó <li>,<dt>,<dd>-t használni. Az őt követő szöveg mind egy elemet jelentett, amíg a következővel új elem nem lett létrehozva. Bármilyen meglepő, a vonal (<hr />) is a fentiekhez hasonló ún. blokk egység. Végül pedig említeném a kontaktinformációk számára kitalált <address>...</address> címkét. Ritkán használjuk, tulajdonképpen csak egy sima bekezdés dőlt betűs szöveggel. peldak/xhtml/listak <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html lang="hu" xml:lang="hu" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <meta http-equiv="content-language" content="hu-hun" /> <title>listák</title> </head> <body> <ol> <li>rendezett listaelem</li> <li>rendezett listaelem</li> <li>rendezett listaelem</li> </ol> <ul> <li>rendezetlen listaelem</li> <li>rendezetlen listaelem</li> <li> <ul> <li>beágyazott rendezetlen listaelem</li> <li>beágyazott rendezetlen listaelem</li> </ul> </li> <li>rendezetlen listaelem</li> </ul> <dl> <dt>első definiálandó elem</dt> <dd>az első elem definíciója, amely lehet akár többsoros leírás is</dd> <dt>második definiálandó elem</dt> <dd>a második elem definíciója, amely lehet akár egy többsoros leírás is</dd> </dl> <hr /><address>készítő neve, címe, telefonszáma</address> </body></html> Tartalmi elemek - Blokk szerű szöveges elemek

17 Sorbeli szöveges elemek De hogy formázhatunk egy-egy, a blokkon belüli kisebb szövegegységeket? Magától érthetődik: sorbeli elemmel! A méretet a környezetéhez képest növelhetjük, illetve csökkenthetjük a <big>nagyít</big> és <small>kicsinyít</small> Tag-ekkel. Beljebb húzáshoz a <q>behúzás</q>, vastagításhoz a <b>bold~vastag</b>, döntéshez a <i>italic~dőlt</i>, áthúzáshoz a <del>deleted~áthúzott</del>, alsó és felső indexhez pedig a <sup>felső</sup> és <sub>alsó</sub> használhatók. Utóbbiakat könnyen megjegyezhetjük, hiszen a "P" és "b" "karikája" jelzi a magasságot. Az <em></em> kihangsúlyoz és a <strong></strong> pedig még ennél is jobban. A HTML weblapok számára még alkalmazható a <strike>áthúz</strike> és az <s>strike~áthúz</s>, az <u>underline~aláhúz</u> és a <center>középre</center> is. Ők XHTML-ben kerülendők! A speciális formázáshoz a HTML-ben a <font>...</font> címkét alkalmazták, az XHTMLben viszont kerülendő ez a forma, így a <span>...</span> javasolt. A későbbiekben megtanuljuk majd őt tovább formázni, jelenleg csak azt kell tudni, hogy vele elkülöníthetők bizonyos szavak, szócsoportok a többitől egy blokkon belül. Speciális esetben még lehet használni: a <code>kód</code>, <samp>példa</samp> és <var>változó</var> címkéket programkódok megjelenítésére, és a <kbd>keyboard</kbd>t billentyű jelzésére. A <cite>...</cite> más forrásból való ízelítésre jó, a <tt>...</tt> nyomtatott stílusú szöveget, a <dfn>...</dfn> zárt formula definícióját, a <bdo>...</bdo> kétirányú szöveget produkál. Az <abbr title="gyorstipp" >rövidítés~abbrevation</abbr> fontos funkciója pedig, hogy egy title attribútummal felvértezve meg fog jelenni a fölötte tartott egér hatására annak értéke (gyorstipp). Ennek egy változata az <acronym>mozaikszó</acronym>, mely ugyan szabványos, mégis egyre inkább kiszorulni látszik. Fontos, hogy ezt a title attribútumot minden HTML/XHTML body-beli eleme megkaphatja. peldak/xhtml/sorbeliszoveg <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html lang="hu" xml:lang="hu" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="hu-hun" /> <title>sorbeli szövegek</title> </head> <body> <p> Ez itt egy bekezdés. Benne pedig különböző formázások, pl:<br /> <span style="color:red">piros szinű szöveg</span><br /> <code>írdki('helló Világ!');</code> pc-s kódsor<br /> <samp>írdki(ide,mit,mikor)</samp> példa<br /> <var>$válzotó</var><br /> <kbd>f12</kbd> billentyű<br /> <cite>idézett szöveg</cite><br /> <tt>nyomtatott szöveg</tt><br /> <dfn>definíció</dfn><br /> <abbr title="ez egy rövidítés">rövidítés</abbr> </p> <p> <big>nagyítás</big> és <small>kicsinyítés</small><br /> <q>behúzott</q><br /> <b>vastag</b>, <i>dőlt</i>, <del>áthúzott</del><br /> Tartalmi elemek - Sorbeli szöveges elemek

18 <sup>felső</sup> és <sub>alsó</sub> index<br /> <em>kihangsúlyozott</em> és <strong>még hangsúlyozottabb</strong> </p> </body> </html> Mire hivatottak a hivatkozások? Az ötlet, hogy dokumentumok közt kapcsolatot létesítsünk egymásra mutató elemekkel már a HTML előtt is jelen volt, mégis a világhálót segítette mai pozíciójára. Az ilyen funkcióval bíró elem, az ún. hivatkozás lehet bármi, egy kép, egy szó, egy nyomógomb... Közös bennük, hogy a böngészőben a közismert kéz kurzor jelenik meg, ha fölöttük tartjuk egérmutatónkat. Az <a href="cim" title="gyorstipp" >szoveg</a> (anchor, azaz horgony) címke segítségével hozhatunk létre ilyen linket (magyarul hivatkozást). A nyitó és záró címkék közé írt szöveg fog megjelenni a link szövegeként. A kezdő címkébe mindössze a href attribútumot kötelező írni. Illetve a title ajánlott még a felhasználók miatt. Utóbbinak az értéke fog megjelenni mikor az egeret fölötte tartjuk, előbbinek az értéke annak a weblapnak vagy fájlnak (általánosan: erőforrás) a címe, ahová a link mutat. Ez a cím tulajdonképpen egy elérési útvonal a fájlhoz. További attribútumok még a tabindex, mely értéke az a szám, ahányadik TAB után ugorik linkünkre a kijelölés, illetve az accesskey, melynek értéke egy karakter, amit megnyomva ugrik ide a kijelölés. A type-pel pedig a cél fájl MIME típusát definiálhatjuk előre. Érdemes még megjegyezni, hogy ez a Tag sorbeli, tehát egy blokk egység köré nem tehető. Erőforrások megnevezése Hogy bármit egyértelműen meghatározhassunk az interneten, un. URL-t (Uniform Resource Locator-t ~ egységes erőforrás-megnevezőt) használunk. Egy URL a következőképpen néz ki: entum_elérési_útvonala. A protokollal kiválasztjuk a szerveren végrehajtani kívánt szolgáltatást. Néhány ismert: http, ftp, mailto, file... őket a kettőspont zárja le. A // után és a / előtt a szerver elérését kell megadnunk domain címmel vagy IP-vel. Ezt követi kettősponttal a szolgáltatás portszáma. Ez honlapoknál általában 80, ftp-nél általában 25. Ha nem névtelen bejelentkezést használunk, akkor ezt megelőzi még és előtte a felhasználónév és kettősponttal utána a jelszó. Belátható hogy ezen bejelentkezési mód lehetséges, ám nem feltétlen biztonságos. Végül a / után pedig magának a kívánt dokumentumnak az elérését adhatjuk meg a Linuxból ismert könyvtárszerkezet jelöléseivel (/). A file: protokoll esetén pedig az aktuális operációs rendszer könyvtárszerkezetének jelölése kell. Pl: Windowsnál a vissza per (\). Ezt követhetik még lekérdező, értékadó (?paraméter=érték&param2=érték2&...), dokumentumon belüli jelölő (#), stb. A hivatkozás URL-jét megadhatjuk abszolút módon, mikor a teljes fenti URL-t kiírjuk. Pl.: "file://c:\server\honlapom\kepek\kep.jpg" vagy "http://www.honlapom.hu/kepek/kep.jpg" Hátrány, hogy csak az adott helyi gépen vagy internetcímen működik. Az efféle problémát a relatív módszer oldja meg. Pl.: "kepek/kep.jpg" Ebben az esetben a példabeli kép helye a weboldalunkhoz képest lett meghatározva, ami később automatikusan kiegészül az adott weboldal teljes URL-jével. Ilyenkor mindig a Linuxbeli könyvtárjelölőket kell használnunk (/). Az egy mappával feljebblépést a../ jelöli, ezt kell ismételni, akárhányszor egy szinttel feljebb lépünk. Tartalmi elemek - Mire hivatottak a hivatkozások?

19 Tehát ha 2 mappával feljebb található a weblaptól, akkor: "../../kepek/kep.jpg" Érdemes még tudni, hogy egy a fejlécben elhelyezett <base href="http://www.honlapom.hu" /> az összes relatív útvonalat az itt megadottal egészíti ki és nem a weboldalunk URL-jével. E sorral minden relatív hivatkozás abszolúttá tehető. Lehetőség nyílik még lapunkon belüli ugrásokra, ún. helyi hivatkozásokra vagy könyvjelzőkre is. Ekkor egy a már előre definiált id="azonosito"-vel rendelkező elemhez ugorhatunk az <a href="#azonosito">ugrás az azonosítóhoz!</a> módszerrel. Természetesen a # előtt abszolút URL-t is megadhatunk. Itt fűzném még hozzá, hogy vannak bizonyos gyakori hibák, melyeket jó, ha figyelembe veszel a szerkesztéskor. Internetcímek esetén mindig normál per jelet alkalmazunk (/) a Windows vissza per jelével (\) ellentétben. A fájlok nevében lehetőleg ne használj ékezeteket, szóközöket és speciális karaktereket sem! Ha mégis szükséges, akkor ezt az URL-ben csak kódolva teheted. (pl: %xx, ahol az xx a karakter kétjegyű, hexadecimális ASCII kódja) Az & karaktert XHTML-ben csak így lehet: &! Végül pedig általában a szerverek kis/nagybetű érzékenyek! Szóval, ha a fájlod nagybetűvel kezdődik, akkor a honlapod hivatkozásában is úgy add meg azt! peldak/xhtml/hivatkozas <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html lang="hu" xml:lang="hu" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="hu-hun" /> <title>hivatkozások</title> </head> <body> <p>ez egy abszolút hivatkozás a <a href="http://www.google.hu">google.hu</a>-ra</p> <p>ez egy relatív hivatkozás egy <a href="peldak/laptopgirl.jpg">képre</a>.</p> <p>könyvjelző a <a href="#b">b betűhöz</a> vagy az <a href="#a">a betűhöz</a>!</p> <p> küldése a <a címre!</p> <p> küldése az előző címre <a témával!</p> <p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> <p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> <hr /><p id="a">a</p> <p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> <p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> <hr /><p id="b">b</p> <p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> <p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> </body> </html> Tartalmi elemek - Mire hivatottak a hivatkozások?

20 Színek megadása Először is színezném kicsit az eddig elhangzottakat... A színek meghatározása 2 féle képen is történhet a (X)HTML-ben. Az egyik mód, hogy a szín angol megfelelőjét alkalmazzuk, viszont ekkor csak 16 féle színt különböztethetünk meg. A másik lehetőség az ún. színkódok használata. Itt a színt számokkal (hexadecimálisan) adhatjuk meg. Minden, az RGB (Red,Green,Blue azaz Piros,Zöld,Kék) additív színkeveréssel előállítható színt átírhatunk ilyen formába is. A három alapszínnek a tartománya ig terjedhet. (Ez pontosan egy byte.) Így tehát a kikeverhető színek száma 16,7 milliót éri el (True Color). Ami az emberi szemnek már bőségesen elég. :) Tehát például ha fehér színt akarunk előállítani, akkor átszámolhatjuk a 255,255,255 GRB arányt és akkor #FFFFFF színkódot kapunk, vagy beírjuk angolul, hogy white. Ez az átszámolásos cucc gondolom, senkinek sem megy fejből, így az EditPlus-t használóknak ott a kis paletta ikon a második sorban, vagy használhatja bárki a WebKészítés kódjegyzékét is. A profiknak pedig létezik egy ügyes kis program, a Color Cop, mi kielégít minden szín igényt! Igyekeztem kihagyni, de szót kell ejteni a color (szövegszín) és bgcolor (háttérszín) attribútumról, ennek segítségével adhatjuk meg egy címkére vonatkozóan az előbb tanult színeket. Az XHTML-ben már ne használjuk ezeket! [A Color Cop letöltése: Képek beszúrása Manapság szinte nincs is olyan honlap, amin ne lennének képek. Őket az <img src="elérésiút" width="széles" height="hossz" alt="helyettesítőszöveg" /> címkével szúrhatjuk be. XHTML-ben a border="0" helyett a stíluslapban fogjuk megadni, hogy a keretet levegye hivatkozások esetén. Jut eszembe, a kép egy sorbeli elem, tehát egy blokkon (pl: <p> </p>) belül kell alkalmaznunk, illetve így a szintén sorbeli <a> </a> közé is tehetjük. Teszek egy gyors kitérőt a képformátumok irányába. Nem biztos, hogy mindenki ismeri a formátumok adta különbségeket. Kezdjük a BMP-vel (bitmap). Ez a Ms Paint-ból ismert formátum hatalmas mérete (pixelenként tárolt színadat) miatt kerülendő. A honlapokban általában tömörített (JPG, GIF, PNG) képeket használunk. JPG (Joint Photographic Experts Group) előnye a meglepően kicsi méret viszont csekély mértékben torzul a kép. Fotókhoz javasolt. A GIF (Graphics Interchange Format) szintén kicsi és már az átlátszóságot is támogatja, viszont kevés (max 8 bit) színt tud tárolni. Ez a honlap grafikájához ajánlott. A kettő ötvözése a PNG (Portable Network Graphics), ami kicsi is, átlátszóságot is támogat és TrueColor-t is torzulásmentesen. Régen kevés böngésző ismerte, manapság egyre jobban terjed. Ha egy képet több hivatkozásra akarunk osztani anélkül, hogy szétvágnánk, szükségünk lesz egy képre a usemap="azonosito"-val, mely az utána következő <map></map> azonosítójára hivatkozik. <map id="azonosito"> <area href="link" title="gyorstipp" alt="helyettesítő" shape="alakzat" coords="koordináták" />... </map> Itt az <area>-k jelölik az egyes helyeket. A shape (alakzat) értéke lehet: rect (ekkor a coords koordináták: "bal-x,fent-y,jobb-x,lent-y"), circle ("közép-x,közép- Tartalmi elemek - Képek beszúrása

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

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

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

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

HTML alapok 1. Minimális HTML file: cím ... 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

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

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

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

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

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

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

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

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

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

Á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

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

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

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

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

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

FTP Az FTP jelentése: File Transfer Protocol. Ennek a segítségével lehet távoli szerverek és a saját gépünk között nagyobb állományokat mozgatni. Ugyanez a módszer alkalmas arra, hogy a kari web-szerveren

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

PHP-MySQL. Adatbázisok gyakorlat

PHP-MySQL. Adatbázisok gyakorlat PHP-MySQL Adatbázisok gyakorlat Weboldalak és adatbázisok Az eddigiek során megismertük, hogyan lehet a PHP segítségével dinamikus weblapokat készíteni. A dinamikus weboldalak az esetek többségében valamilyen

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

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

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

Telenor Webiroda. Kezdő lépések

Telenor Webiroda. Kezdő lépések Telenor Webiroda Kezdő lépések Virtuális Tárgyaló Tartalom 1. Bevezetés...2 2. A szolgáltatás elérése és a kliensprogram letöltése...3 3. A kliensprogram telepítése...6 4. A Virtuális Tárgyaló használatba

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

Gyakorló 9. feladat megoldási útmutató

Gyakorló 9. feladat megoldási útmutató Gyakorló 9. feladat megoldási útmutató 1. Minek a leírása a következő? Aktív hálózati hardver eszközök (pl.: routerek) és szoftverek segítségével létrehozott biztonsági rendszer két hálózat (jellemzően

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

Olyan eszközre van szükség, amelynél a webszerkesztés folyamatát a fejlesztő, nem pedig a program vezérli

Olyan eszközre van szükség, amelynél a webszerkesztés folyamatát a fejlesztő, nem pedig a program vezérli Fejlesztőeszközök Olyan eszközre van szükség, amelynél a webszerkesztés folyamatát a fejlesztő, nem pedig a program vezérli Szerkesztők 2 alapvető szolgáltatása: kódszínezés, kódkiegészítés Alapvetően

Részletesebben

Cikktípusok készítése a Xarayában

Cikktípusok készítése a Xarayában Cikktípusok készítése a Xarayában A Xaraya legfontosabb tulajdonsága az egyedi cikktípusok egyszerű készítésének lehetősége. Ezzel kiküszöbölhető egyedi modulok készítése, hiszen néhány kattintással tetszőleges

Részletesebben

Az internet az egész világot behálózó számítógép-hálózat.

Az internet az egész világot behálózó számítógép-hálózat. Az internet az egész világot behálózó számítógép-hálózat. A mai internet elődjét a 60-as években az Egyesült Államok hadseregének megbízásából fejlesztették ki, és ARPANet-nek keresztelték. Kifejlesztésének

Részletesebben

SharePoint Designer 2007

SharePoint Designer 2007 SharePoint Designer 2007 Az elsı lépés, Programok/Microsoft Office/SharePoint Designer 2007 Az üres lapot rögtön el kell menteni, értelemszerően a feladat által megadott néven és helyre. A kiterjesztése

Részletesebben

Szilipet programok telepítése Hálózatos (kliens/szerver) telepítés Windows 7 operációs rendszer alatt

Szilipet programok telepítése Hálózatos (kliens/szerver) telepítés Windows 7 operációs rendszer alatt Szilipet programok telepítése Hálózatos (kliens/szerver) telepítés Windows 7 operációs rendszer alatt segédlet A Szilipet programok az adatok tárolásához Firebird adatbázis szervert használnak. Hálózatos

Részletesebben

Vihar 2.0 rendszer Felhasználói kézikönyv

Vihar 2.0 rendszer Felhasználói kézikönyv Vihar 2.0 rendszer Felhasználói kézikönyv Versenyzői funkciók O l d a l 0 21 Tartalomjegyzék Tartalom Tartalomjegyzék... 0 Bevezető... 1 Felhasználói funkciók... 2 Regisztráció... 2 Támogatott böngészők...

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

WEB-FEJLESZTÉS I. KURZUS 2. GYAKORLAT

WEB-FEJLESZTÉS I. KURZUS 2. GYAKORLAT WEB-FEJLESZTÉS I. KURZUS 2. GYAKORLAT Fontos szabványok 1 HTTP protokoll Protokoll = szabályrendszer HTTP HyperText Transfer Protocol (Hiperszöveg Átviteli Protokoll) a webböngésző (kliens) adatokat kérhet

Részletesebben

BARANGOLÁS AZ E-KÖNYVEK BIRODALMÁBAN Milyen legyen az elektonikus könyv?

BARANGOLÁS AZ E-KÖNYVEK BIRODALMÁBAN Milyen legyen az elektonikus könyv? BARANGOLÁS AZ E-KÖNYVEK BIRODALMÁBAN Milyen legyen az elektonikus könyv? Készítették: Névery Tibor és Széll Ildikó PPKE I. évf. kiadói szerkesztő hallgatók, közösen 1 BEVEZETŐ Az elektronikus könyv valamilyen

Részletesebben

NeoCMS tartalommenedzselő szoftver leírása

NeoCMS tartalommenedzselő szoftver leírása NeoCMS tartalommenedzselő szoftver leírása A NeoSoft Informatika NeoCMS márkanévvel ellátott rendszere könnyen, gyorsan testre szabható tartalommenedzselő rendszer, mely egyedileg átalakítható, és így

Részletesebben

Országos Területrendezési Terv térképi mel ékleteinek WMS szolgáltatással történő elérése, Quantum GIS program alkalmazásával Útmutató 2010.

Országos Területrendezési Terv térképi mel ékleteinek WMS szolgáltatással történő elérése, Quantum GIS program alkalmazásával Útmutató 2010. Országos Területrendezési Terv térképi mellékleteinek WMS szolgáltatással történő elérése, Quantum GIS program alkalmazásával Útmutató 2010. május 1. BEVEZETÉS Az útmutató célja az Országos Területrendezési

Részletesebben

A leírás bemutatja hogy mint minden másra, Favicon készítésre is alkalmas az ingyenes Gimp rajzolóprogram.

A leírás bemutatja hogy mint minden másra, Favicon készítésre is alkalmas az ingyenes Gimp rajzolóprogram. A leírás bemutatja hogy mint minden másra, Favicon készítésre is alkalmas az ingyenes Gimp rajzolóprogram. 1, Készítsünk egy 160 160-as új képet. Azért kell ekkora, hogy kényelmesen elférjünk benne, majd

Részletesebben

Felhasználói dokumentáció. a TávTagTár programhoz. Készítette: Nyíri Gábor, hdd@nc-studio.com GDF Abakusz regisztrációs kód: GDFAba43

Felhasználói dokumentáció. a TávTagTár programhoz. Készítette: Nyíri Gábor, hdd@nc-studio.com GDF Abakusz regisztrációs kód: GDFAba43 a TávTagTár programhoz Készítette: Nyíri Gábor, hdd@nc-studio.com GDF Abakusz regisztrációs kód: GDFAba43 Tartalomjegyzék Futási feltételek... 3 Telepítés... 3 Indítás... 3 Főablak... 4 Új személy felvétele...

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

Nemzeti Fejlesztési és Gazdasági Minisztérium támogatásával megvalósuló KKC-2008-V-08-08-101 számú projekt B2CR ONLINE KOMMUNIKÁCIÓ

Nemzeti Fejlesztési és Gazdasági Minisztérium támogatásával megvalósuló KKC-2008-V-08-08-101 számú projekt B2CR ONLINE KOMMUNIKÁCIÓ ONLINE KOMMUNIKÁCIÓ azaz, hogyan használjuk fel az internet lehetőségeit cégünk sikerei érdekében. MarkCon előadó: Vendler Balázs, ügyvezető TARTALOM (1) Az internetről általában (2) Webes megjelenések

Részletesebben

ELEKTRONIKUS MUNKABÉRJEGYZÉK MODUL

ELEKTRONIKUS MUNKABÉRJEGYZÉK MODUL ELEKTRONIKUS MUNKABÉRJEGYZÉK MODUL nexonbér elektronikus munkabérjegyzék modul Kiszámolta már valaha, hogy mennyibe kerül egyetlen munkavállaló egyetlen havi munkabérjegyzéke (a nyomtatás, a borítékolás

Részletesebben

Több oldalas dokumentum készítése. MS Word 2010 szövegszerkesztővel

Több oldalas dokumentum készítése. MS Word 2010 szövegszerkesztővel Több oldalas dokumentum készítése MS Word 2010 szövegszerkesztővel Egy többoldalas dokumentummal szemben támasztott követelmények (példa feladaton keresztül bemutatva) Készítsünk hat oldalas dokumentumot,

Részletesebben

Tartalom. Alapelemek. Célok. Eszközök. Szerkezet. Alapelvek. Prezentáció. Folyamat

Tartalom. Alapelemek. Célok. Eszközök. Szerkezet. Alapelvek. Prezentáció. Folyamat WEBLAPFEJLESZTÉS Tartalom Alapelemek Célok Eszközök Szerkezet Alapelvek Folyamat Prezentáció Célok Weboldalakkal szemben állított követelmények: - vonzó, egyszerű, igényes, harmonikus színvilág - felhasználóbarát

Részletesebben

A Microsoft OFFICE. EXCEL táblázatkezelő. program alapjai. 2013-as verzió használatával

A Microsoft OFFICE. EXCEL táblázatkezelő. program alapjai. 2013-as verzió használatával A Microsoft OFFICE EXCEL táblázatkezelő program alapjai 2013-as verzió használatával A Microsoft Office programcsomag táblázatkezelő alkalmazása az EXCEL! Aktív táblázatok készítésére használjuk! Képletekkel,

Részletesebben

Gyakorlati vizsgatevékenység A

Gyakorlati vizsgatevékenység A Gyakorlati vizsgatevékenység A Szakképesítés azonosító száma, megnevezése: 481 04 0000 00 00 Web-programozó Vizsgarészhez rendelt követelménymodul azonosítója, megnevezése: 1189-06 Web-alkalmazás fejlesztés

Részletesebben

Táblázatok. Táblázatok beszúrása. Cellák kijelölése

Táblázatok. Táblázatok beszúrása. Cellák kijelölése Táblázatok Táblázatok beszúrása A táblázatok sorokba és oszlopokba rendezett téglalap alakú cellákból épülnek fel. A cellák tartalmazhatnak képet vagy szöveget. A táblázatok használhatók adatok megjelenítésére,

Részletesebben

1. kép. A Stílus beállítása; új színskála megadása.

1. kép. A Stílus beállítása; új színskála megadása. QGIS Gyakorló Verzió: 1.7. Wroclaw Cím: A Print composer használata és a címkézés. Minta fájl letöltése innen: http://www.box.net/shared/87p9n0csad Egyre több publikációban szerepelnek digitális térképek,

Részletesebben

Akadálymentes weboldalkészítés dióhéjban

Akadálymentes weboldalkészítés dióhéjban Akadálymentes weboldalkészítés dióhéjban Készítette: Mezei Ádám Info-kommunikációs Akadálymentességi Műhelykonferencia 2008. november 20 Mi az oka, hogy NEM akadálymentes honlapokat készítünk? 1) Nem gondolunk

Részletesebben

Hozzávalók keresése és csatolása

Hozzávalók keresése és csatolása Hozzávalók keresése és csatolása VUE támogatja digitális tartalmak hozzáadását saját gépről, WEB-ről, távoli rendszerekből, mint az FTP oldalak, digitális forrásokból és Google szerverekről. A tartalmak

Részletesebben

Az MS Excel táblázatkezelés modul részletes tematika listája

Az MS Excel táblázatkezelés modul részletes tematika listája Az MS Excel táblázatkezelés modul részletes tematika listája A táblázatkezelés alapjai A táblázat szerkesztése A táblázat formázása A táblázat formázása Számítások a táblázatban Oldalbeállítás és nyomtatás

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

BaBér bérügyviteli rendszer telepítési segédlete 2011. év

BaBér bérügyviteli rendszer telepítési segédlete 2011. év BaBér bérügyviteli rendszer telepítési segédlete 2011. év Ajánlott konfiguráció A program hardverigénye: Konfiguráció: 2800 MHz processzor 512 Mbyte memória (RAM) / Szerver gépen 1G memória (RAM) Lézernyomtató

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

(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

- kilépés, - vissza a menülistába, - vissza a honlap főoldalára

- kilépés, - vissza a menülistába, - vissza a honlap főoldalára - kilépés, - vissza a menülistába, - vissza a honlap főoldalára - vissza a tételek listájához (szerkesztésen belül) - új tétel rögzítése - a kijelölt sorban lévő tétel törlése - a kijelölt sorban lévő

Részletesebben

Szia Ferikém! Készítek neked egy leírást mert bánt, hogy nem sikerült személyesen megoldani a youtube problémát. Bízom benne, hogy segít majd.

Szia Ferikém! Készítek neked egy leírást mert bánt, hogy nem sikerült személyesen megoldani a youtube problémát. Bízom benne, hogy segít majd. Szia Ferikém! Készítek neked egy leírást mert bánt, hogy nem sikerült személyesen megoldani a youtube problémát. Bízom benne, hogy segít majd. Első lépés: Töltsd le a programot innen: http://download.vessoft.com/files/fyds/freeyoutubedownoad.exe

Részletesebben

PC Connect. Unique ewsletter. program leírás

PC Connect. Unique ewsletter. program leírás PC Connect Unique ewsletter program leírás Tartalomjegyzék Bevezető...- 1 - Előkészületek...- 2 - Alap adatok, alap fájlok...- 2 - A program használata...- 3 - E-mail files...- 3 - Swich text...- 4 - Settings...-

Részletesebben

TERC V.I.P. hardverkulcs regisztráció

TERC V.I.P. hardverkulcs regisztráció TERC V.I.P. hardverkulcs regisztráció 2014. második félévétől kezdődően a TERC V.I.P. költségvetés-készítő program hardverkulcsát regisztrálniuk kell a felhasználóknak azon a számítógépen, melyeken futtatni

Részletesebben

Meglévő munkafüzet megnyitása, mentése új néven

Meglévő munkafüzet megnyitása, mentése új néven Példánkban a következő lépéseket végezzük el: megnyitunk egy korábban mentett munkafüzetet, a megnyitott munkafüzetről egy másolatot készítünk, azaz új néven mentjük el. Meglévő munkafüzet megnyitása Egy

Részletesebben

18. Szövegszerkesztők

18. Szövegszerkesztők 18. Szövegszerkesztők A szövegszerkesztés olyan számítógépes művelet, amelynek során később nyomtatásban megjelenő szövegegységeket, dokumentumokat hozunk létre, majd azokat papírra kinyomtatjuk. A különböző

Részletesebben

On-line értékelési módszerek II. Lengyelné Molnár Tünde

On-line értékelési módszerek II. Lengyelné Molnár Tünde On-line értékelési módszerek II. Lengyelné Molnár Tünde MÉDIAINFORMATIKAI KIADVÁNYOK On-line értékelési módszerek II. Lengyelné Molnár Tünde Eger, 2013 Korszerű információtechnológiai szakok magyarországi

Részletesebben

EDInet Connector telepítési segédlet

EDInet Connector telepítési segédlet EDInet Connector telepítési segédlet A cégünk által küldött e-mail-ben található linkre kattintva, a következő weboldal jelenik meg a böngészőben: Az EdinetConnectorInstall szövegre klikkelve(a képen pirossal

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

Felhasználói kézikönyv a WEB EDInet rendszer használatához

Felhasználói kézikönyv a WEB EDInet rendszer használatához Felhasználói kézikönyv a WEB EDInet rendszer használatához A WEB EDInet rendszer használatához internet kapcsolat, valamint egy internet böngésző program szükséges (Mozilla Firefox, Internet Explorer).

Részletesebben

PDF. Tartalomjegyzék 1/21

PDF. Tartalomjegyzék 1/21 PDF Napjainkban a publikálás elterjedt formája a PDF dokumentumok előállítása. A weben ez szinte szabvánnyá vált hosszú dokumentumok esetén. Akkor is nagyon hasznos lehet, ha a gondosan megformázott word

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

Internetes böngésző fejlesztése a mobil OO világban

Internetes böngésző fejlesztése a mobil OO világban Internetes böngésző fejlesztése a mobil OO világban Novák György és Pári Csaba Témavezető: Bátfai Norbert Debreceni Egyetem Matematikai és Informatikai Intézet Kitűzött cél A PC-s világban megszokotthoz

Részletesebben

OCSP Stapling. Az SSL kapcsolatok sebességének növelése Apache, IIS és NginX szerverek esetén 1(10)

OCSP Stapling. Az SSL kapcsolatok sebességének növelése Apache, IIS és NginX szerverek esetén 1(10) OCSP Stapling Az SSL kapcsolatok sebességének növelése Apache, IIS és NginX szerverek esetén 1(10) 1. Tartalomjegyzék 1. Tartalomjegyzék... 2 2. Bevezető... 3 3. OCSP Stapling támogatással rendelkező webszerverek...

Részletesebben

Tartalom jegyzék 1 BEVEZETŐ 2 1.1 SZOFTVER ÉS HARDVER KÖVETELMÉNYEK 2 2 TELEPÍTÉS 2 3 KEZELÉS 5

Tartalom jegyzék 1 BEVEZETŐ 2 1.1 SZOFTVER ÉS HARDVER KÖVETELMÉNYEK 2 2 TELEPÍTÉS 2 3 KEZELÉS 5 Tartalom jegyzék 1 BEVEZETŐ 2 1.1 SZOFTVER ÉS HARDVER KÖVETELMÉNYEK 2 2 TELEPÍTÉS 2 3 KEZELÉS 5 3.1 ELSŐ FUTTATÁS 5 3.2 TULAJDONOSI ADATLAP 6 3.3 REGISZTRÁLÁS 6 3.4 AKTIVÁLÁS 6 3.5 MÉRÉS 7 3.5.1 ÜGYFÉL

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

Gyakorlati vizsgatevékenység B

Gyakorlati vizsgatevékenység B Gyakorlati vizsgatevékenység Szakképesítés azonosító száma, megnevezése: 481 04 0000 00 00 Web-programozó Vizsgarészhez rendelt követelménymodul azonosítója, megnevezése: 1189-06 Web-alkalmazás fejlesztés

Részletesebben

Készítsünk weblapot könnyedén! A Google Sites használata. Weboldal készítés Google Sites szolgáltatás segítségével, web-fejlesztési ismeretek nélkül!

Készítsünk weblapot könnyedén! A Google Sites használata. Weboldal készítés Google Sites szolgáltatás segítségével, web-fejlesztési ismeretek nélkül! Készítsünk weblapot könnyedén! A Google Sites használata Weboldal készítés Google Sites szolgáltatás segítségével, web-fejlesztési ismeretek nélkül! Készítette: Tratnyek Csilla 2010.03.01. Készítsünk weblapot

Részletesebben

WordPress segédlet. Bevezető. Letöltés. Telepítés

WordPress segédlet. Bevezető. Letöltés. Telepítés WordPress segédlet Bevezető A WordPress egy ingyenes tartalomkezelő rendszer (Content Management System - CMS), amely legnagyobb előnye az egyszerű telepítés és a letisztult kezelhetőség és a változatos

Részletesebben

Nemzeti LEADER Kézikönyv LEADER HELYI FEJLESZTÉSI STRATÉGIA FELHASZNÁLÓI KÉZIKÖNYV. 2015. szeptember

Nemzeti LEADER Kézikönyv LEADER HELYI FEJLESZTÉSI STRATÉGIA FELHASZNÁLÓI KÉZIKÖNYV. 2015. szeptember Nemzeti LEADER Kézikönyv LEADER HELYI FEJLESZTÉSI STRATÉGIA 2014 2020 2015. szeptember Készült a Miniszterelnökség Agrár Vidékfejlesztési Programokért Felelős Helyettes Államtitkárság, mint a Magyarország

Részletesebben

Kezdő lépések Microsoft Outlook

Kezdő lépések Microsoft Outlook Kezdő lépések Microsoft Outlook A Central Europe On-Demand Zrt. által, a Telenor Magyarország Zrt. részére nyújtott szolgáltatások rövid kezelési útmutatója 1 Tartalom Áttekintés... 3 MAPI mailbox konfiguráció

Részletesebben

Webtárhely létrehozása a WWW.freeweb.hu helyen. Lépések Teendő 1. Böngészőbe beírni: www.freeweb.hu. 2. Jobb oldalon regisztrálni (tárhelyigénylés).

Webtárhely létrehozása a WWW.freeweb.hu helyen. Lépések Teendő 1. Böngészőbe beírni: www.freeweb.hu. 2. Jobb oldalon regisztrálni (tárhelyigénylés). Lépések Teendő 1. Böngészőbe beírni: www.freeweb.hu Kép 2. Jobb oldalon regisztrálni (tárhelyigénylés). 3. 4. Értelemszerűen kitölteni a regisztrációs lapot, és elküldeni. 5. Postafiókomra érkező levélben

Részletesebben

Általános e-mail fiók beállítási útmutató

Általános e-mail fiók beállítási útmutató Általános e-mail fiók beállítási útmutató Ennek az összeállításnak az a célja, hogy segítséget nyújtsunk azon Ügyfeleink számára, akik az IntroWeb Kft. által nyújtott e-mail szolgáltatáshoz be szeretnék

Részletesebben

Egy szabadon választott cég weboldalának elemzése (http://educatio.hu)

Egy szabadon választott cég weboldalának elemzése (http://educatio.hu) Egy szabadon választott cég weboldalának elemzése (http://educatio.hu) 1. Vizsgálat az általános webergonómiai alapelvek szempontjából 1.1. Megjelenés, nyitóoldal, menürendszer (navigáció) Az educatio.hu

Részletesebben

Tanúsítványkérelem készítése, tanúsítvány telepítése Microsoft Internet Information szerveren

Tanúsítványkérelem készítése, tanúsítvány telepítése Microsoft Internet Information szerveren Tanúsítványkérelem készítése, tanúsítvány telepítése Microsoft Internet Information szerveren Tartalomjegyzék 1. BEVEZETÉS...3 2. A MICROSOFT IIS INDÍTÁSA...3 3. TITKOS KULCS GENERÁLÁSA...3 4. TANÚSÍTVÁNYKÉRELEM

Részletesebben

Az alábbi kód egy JSON objektumot definiál, amiből az adtokat JavaScript segítségével a weboldal tartalmába ágyazzuk.

Az alábbi kód egy JSON objektumot definiál, amiből az adtokat JavaScript segítségével a weboldal tartalmába ágyazzuk. JSON tutorial Készítette: Cyber Zero Web: www.cyberzero.tk E-mail: cyberzero@freemail.hu Msn: cyberzero@mailpont.hu Skype: cyberzero_cz Fb: https://www.facebook.com/cyberzero.cz BEVEZETÉS: A JSON (JavaScript

Részletesebben

WIN-TAX programrendszer hálózatban

WIN-TAX programrendszer hálózatban WIN-TAX programrendszer hálózatban Számítógépes hálózat Hálózat kialakítása Szerver gépre telepítendő alkalmazások: Adatbázis kiszolgáló (Firebird 2.5-ös verzió) WIN-TAX programrendszer Kliens gépre telepítendő

Részletesebben

DuneHD.hu. Kompatibilis médialejátszók: Dune HD Center Dune BD Prime Dune HD Base 2.0 Dune HD Base 3.0 Dune BD Prime 3.0

DuneHD.hu. Kompatibilis médialejátszók: Dune HD Center Dune BD Prime Dune HD Base 2.0 Dune HD Base 3.0 Dune BD Prime 3.0 A Zappiti egy donationware, vagyis ingyenes program, mellyel kibővítheted Dune médialejátszód képességeit. A leírás a Zappiti 1.2.1 Beta változata alapján készült. Kompatibilis médialejátszók: Dune HD

Részletesebben

A számítástechnika gyakorlata WIN 2000 I. Szerver, ügyfél Protokoll NT domain, Peer to Peer Internet o WWW oftp opop3, SMTP. Webmail (levelező)

A számítástechnika gyakorlata WIN 2000 I. Szerver, ügyfél Protokoll NT domain, Peer to Peer Internet o WWW oftp opop3, SMTP. Webmail (levelező) A számítástechnika gyakorlata WIN 2000 I. Szerver, ügyfél Protokoll NT domain, Peer to Peer Internet o WWW oftp opop3, SMTP Bejelentkezés Explorer (böngésző) Webmail (levelező) 2003 wi-3 1 wi-3 2 Hálózatok

Részletesebben

Az MS Word szövegszerkesztés modul részletes tematika listája

Az MS Word szövegszerkesztés modul részletes tematika listája Az MS Word szövegszerkesztés modul részletes tematika listája A szövegszerkesztés alapjai Karakter- és bekezdésformázás Az oldalbeállítás és a nyomtatás Tabulátorok és hasábok A felsorolás és a sorszámozás

Részletesebben

OKTATÁSI MINISZTÉRIUM

OKTATÁSI MINISZTÉRIUM OKTATÁSI MINISZTÉRIUM Szakmai írásbeli vizsgatétel T Szakképesítés: 33 4641 01 Számítógép-kezelő (- használó) (azonosító száma, megnevezése) Tantárgy: Írásbeli feladat Kódszám: T OM 33 4641 01 C5 1 Jóváhagyta:

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

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

Kezdő lépések Outlook Web Access

Kezdő lépések Outlook Web Access Kezdő lépések Outlook Web Access A Central Europe On-Demand Zrt. által, a Telenor Magyarország Zrt. ügyfelei részére nyújtott szolgáltatások rövid kezelési útmutatója Tartalom Bevezetés... 3 Rendszerkövetelmények...

Részletesebben

Tanúsítvány feltöltése Gemalto TPC IM CC és ID Classic 340 típusú kártyára

Tanúsítvány feltöltése Gemalto TPC IM CC és ID Classic 340 típusú kártyára Tanúsítvány feltöltése Gemalto TPC IM CC és ID Classic 340 típusú kártyára Windows XP, Vista, Windows 7 és Windows 8 operációs rendszeren 1(6) 1. Tartalomjegyzék 1. Tartalomjegyzék... 2 2. Bevezető...

Részletesebben

ECDL Információ és kommunikáció

ECDL Információ és kommunikáció 1. rész: Információ 7.1 Az internet 7.1.1 Fogalmak és szakkifejezések 7.1.2 Biztonsági megfontolások 7.1.3 Első lépések a webböngésző használatában 7.1.4 A beállítások elévégzése 7.1.1.1 Az internet és

Részletesebben

INTERNET. internetwork röviden Internet /hálózatok hálózata/ 2010/2011. őszi félév

INTERNET. internetwork röviden Internet /hálózatok hálózata/ 2010/2011. őszi félév INTERNET A hatvanas években katonai megrendelésre hozták létre: ARPAnet @ (ARPA= Advanced Research Agency) A rendszer alapelve: minden gép kapcsolatot teremthet egy másik géppel az összekötő vezetékrendszer

Részletesebben

qwertzuiopőúasdfghjkléáűíyxcvbnmq wertzuiopőúasdfghjkléáűíyxcvbnmq wertzuiopőúasdfghjkléáűíyxcvbnmq wertzuiopőúasdfghjkléáűíyxcvbnmq

qwertzuiopőúasdfghjkléáűíyxcvbnmq wertzuiopőúasdfghjkléáűíyxcvbnmq wertzuiopőúasdfghjkléáűíyxcvbnmq wertzuiopőúasdfghjkléáűíyxcvbnmq q HTML szerkesztés elmélet jegyzet 2010. április 4. Sallai András 2010 Készült az Oktatásért Közalapítvány támogatásával. Egressy Gábor Kéttannyelvű Műszaki Szakközépiskola Tartalom 1. Az SGML nyelv...

Részletesebben

Ingyenes DDNS beállítása MAZi DVR/NVR/IP eszközökön

Ingyenes DDNS beállítása MAZi DVR/NVR/IP eszközökön Ingyenes DDNS beállítása MAZi DVR/NVR/IP eszközökön Fontos Amennyiben egy eszköz interneten keresztüli elérését lehetővé teszi, az illetéktelen hozzáférés megakadályozása érdekében: előtte az alapértelmezett

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

Táblázatok kezelése. 1. ábra Táblázat kezelése menüből

Táblázatok kezelése. 1. ábra Táblázat kezelése menüből Táblázat beszúrása, létrehozása A táblázatok készítésének igénye már a korai szövegszerkesztőkben felmerült, de ezekben nem sok lehetőség állt rendelkezésre. A mai szövegszerkesztőket már kiegészítették

Részletesebben

ContractTray program Leírás

ContractTray program Leírás ContractTray program Leírás Budapest 2015 Bevezetés Egy-egy szerződéshez tartozó határidő elmulasztásának komoly gazdasági következménye lehet. Éppen ezért a Szerződés kezelő program főmenü ablakában a

Részletesebben