< 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 " 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.: ... (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: (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 vastag" 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 vastag sima és dőlt sima és aláhúzott <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" " 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" " 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" " 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" " 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" " 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=" <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" " <html lang="hu" xml:lang="hu" xmlns=" <head></head> <body> ez itt az oldal törzse vastagon szedett szöveg <hr /> dőlt szöveg <hr color="red" /> aláhúzott szöveg <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" " <html lang="hu" xml:lang="hu" xmlns=" <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= /> </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" " <html lang="hu" xml:lang="hu" xmlns=" <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) .... Ő is rendelkezik alapesetben a térköz tulajdonsággal. Egy bekezdésen belül, a már ismert sortöréssel 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" " <html lang="hu" xml:lang="hu" xmlns=" <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> Ez itt egy bekezdés, benne pedig sortörések is lehetnek... majd néhány szóköz <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>blokk idézet</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" " <html lang="hu" xml:lang="hu" xmlns=" <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 kicsinyít Tag-ekkel. Beljebb húzáshoz a <q>behúzás</q>, vastagításhoz a bold~vastag, döntéshez a italic~dőlt, áthúzáshoz a <del>deleted~áthúzott</del>, alsó és felső indexhez pedig a felső és alsó használhatók. Utóbbiakat könnyen megjegyezhetjük, hiszen a "P" és "b" "karikája" jelzi a magasságot. Az kihangsúlyoz és a 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 underline~aláhúz és a <center>középre</center> is. Ők XHTML-ben kerülendők! A speciális formázáshoz a HTML-ben a ... címkét alkalmazták, az XHTMLben viszont kerülendő ez a forma, így a ... 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" " <html lang="hu" xml:lang="hu" xmlns=" <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> Ez itt egy bekezdés. Benne pedig különböző formázások, pl: piros szinű szöveg <code>írdki('helló Világ!');</code> pc-s kódsor <samp>írdki(ide,mit,mikor)</samp> példa <var>$válzotó</var> <kbd>f12</kbd> billentyű <cite>idézett szöveg</cite> <tt>nyomtatott szöveg</tt> <dfn>definíció</dfn> <abbr title="ez egy rövidítés">rövidítés</abbr> <big>nagyítás</big> és kicsinyítés <q>behúzott</q> vastag, dőlt, <del>áthúzott</del> Tartalmi elemek - Sorbeli szöveges elemek

18 felső és alsó index kihangsúlyozott és még hangsúlyozottabb </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: protokoll://felhasználónév:jelszó@teljes_tartománynév_vagy_ip:port/dokum 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 " 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=" /> 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" " <html lang="hu" xml:lang="hu" xmlns=" <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> ez egy abszolút hivatkozás a <a href=" ez egy relatív hivatkozás egy <a href="peldak/laptopgirl.jpg">képre</a>. könyvjelző a <a href="#b">b betűhöz</a> vagy az <a href="#a">a betűhöz</a>! küldése a <a href="mailto:nem@dom.meg">nem@dom.meg</a> címre! küldése az előző címre <a href="mailto:nem@dom.meg?subject=weblap">weblap</a> témával! <hr />a <hr />b </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: ) 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

Több megjelenítése