HTML, CSS. Morabito Érdi SzC Eötvös József Szakképző Iskolája

Átírás

1 HTML, CSS Morabito Érdi SzC Eötvös József Szakképző Iskolája

2 Tartalomjegyzék HTML elemek... 3 Címkék jelölése... 3 Páros és páratlan címkék... 3 Egy egyszerű weboldal készítésének lépései... 3 Böngésző független weblapok... 3 Összetett webhelyek, webáruházak készítése... 4 Igényfelmérés... 4 Célok megfogalmazása... 4 Eszközök megnevezése (mire van szükség a célok eléréséhez)... 4 A fejlesztési folyamat megtervezése... 4 Költségterv... 4 A webhely megtervezése... 4 Dokumentálás... 4 Közzététel... 4 Hirdetések, kereső optimalizálás... 4 Webhelyek akadálymentesítése... 4 Látássérültek igényeinek figyelembevétele... 4 Végtagsérültek igényeinek figyelembevétele... 4 Színvak személyek igényeinek figyelembevétele... 5 HTML oldalak felépítése... 5 HTML oldalak 3 fő része:... 5 Dokumentumtípus definíció célja... 5 HTML5 dokumentumtípus definíció:... 5 A dokumentumfej (head )... 6 A fejléc elemei... 6 Az oldal neve... 6 A meta címkék... 7 A karakterkészlet megadása HTML5 szabvány szerint... 7 Link elem... 8 Külső stíluslap használata... 8 Külső stíluslapok beillesztése... 8 Belső vagy beágyazott stílusok... 9 Beágyazott stílusok jellemzői Médiatípusok A szöveg tagolása Bekezdések, sortörések és megjegyzések Címsor (heading) Karakterformázás HTML elemekkel Valamennyi páros címke A szöveg változásának jelzése A tartalom változásának jelzése (nem csupán szövegformázás) Előformázás és szövegirány beállítása Idézetek, címek, szerzők jelolése Definíciók és rövidítések jelölésére használható HTML elemek Számítógépes kódok megjelenítése Időpont megadása HTML dokumentumban: Linkek (hivatkozások) Linkeknél használható HTML attribútumok (HTML Attributes) Külső hivatkozások Belső hivatkozások link Számozatlan lista (unordered list ) Több szintű számozatlan lista Számozott lista (ordered list ) Számozott lista jellemzői A sorszámok típusai: Több szintű számozott lista Meghatározáslista Egyszerű táblázat Sor és oszlop fejlécek Táblázat címének jelölése Cellák összevonása... 21

3 Oszlopok, oszlopcsoportok Táblázat tagolása Állókép beillesztése Képek beillesztése HTML dokumentumba Képtérképek (image map) beillesztése HTML dokumentumba Dokumentumok beágyazása Az <iframe> címke Beágyazott <iframe> dokumentum jellemzői Biztonsági beállítások Beágyazott <iframe> dokumentum biztonsági beállításai Hang videó és animáció beillesztés YouTube videó beágyazása iframe segítségével HTTPS Beágyazás object elem segítségével Object és param elemek Tárolóelem létrehozása HTML5 - Video elem HTML5 video elemben használható MIME típusok HTML5 - Audio elem HTML oldalak szerkezete DIV - Általános tárolóelem Egyoszlopos elrendezés Kétoszlopos HTML elrendezés HTML5 tartalomfüggő tárolóelemek Kétoszlopos HTML5 elrendezés HTML5 Speciális tárolóelem ábrákhoz HTML5 címsor csoportok HTML5 Speciális tárolóelem Általános HTML jellemzők Globális HTML attribútumok (HTML Global Attributes) HTML események Ablak-események (A Body elem eseményei.) Úrlap-események (A Form elem eseményei.) Média-események Billentyűzet-események Egér-események CSS3 stíluslapok készítése CSS (Cascading Style Sheet) Színkezelés HTML színkódok HTML alapszínek Web biztos színek Átlátszóság (fedettség) CSS stílusdeklaráció A stílusdeklaráció felépítése: CSS megjegyzések... 41

4 HTML HTML elemek Címkék jelölése A HTML oldal egyes elemeit címkékkel (tag-ekkel) jelöljük, amelyeket < és > között helyezünk el. < > között minden esetben megtalálható az adott címke neve: ( <cimkenév >). A definiált elemektől függően tulajdonságok is megadhatók: <cimkenév tulajdonságnév="érték">, Erőforrások kapcsolhatók az adott elemhez: <cimkenév tulajdonságnév="erőforrás"> A címkenevek, tulajdonságneve és néhány kivételtől eltekintve a tulajdonságok értékei sem tartalmazhatnak magyar ékezetes karaktereket, és nem kezdődhetnek számjeggyel! Páros és páratlan címkék Egy-egy címke a definiált elemtől függően lehet páros vagy páratlan. Páratlan pl. <br> soremelést helyez el az oldalon. Páros pl. <b> </b> megvastagított betűk <i> </i> dőlt betűk Páros címkék esetén a záró címke neve elé egy / jel kerül pl. </b>. A páros címkéket kötelező párban használni. A záró címke elhagyása a weboldal hibás megjelenítéséhez vezethet. A páros címkék egymásba ágyazása A páros címkék egymásba ágyazhatók Helyes: <b><i> </i></b> vagy <i><b>..</b></i> Helytelen: <b><i> </b></i> Az egymásba ágyazás több szintű is lehet: <p><b><i> </i></b></p> Egy egyszerű weboldal készítésének lépései 1. A HTML dokumentum forráslistáját egy tetszőleges szövegszerkesztőben megírjuk. 2. Az elkészített dokumentumot egyszerű szövegként.html kiterjesztéssel elmentjük. 3. Kedvenc fájlkezelőkben a mentett fájl nevére vagy ikonjára kattintva az alapértelmezett böngészőnkben megnyitjuk. Ez módszer jól használható a tananyag példakódjainak kipróbálására, módosítására, de összetettebb webhelyek készítését sose s HTML kód írásánál kezdjük. Fontos! Windows Operációs rendszer használata esetén a szövegszerkesztők rendszerint a iso kódkészlet, míg Linux Operációs rendszer alatt UTF 8 kódkészlet használatával mentik a dokumentumot. Ezt a karakterkészlet megadásánál figyelembe kell venni! Böngésző független weblapok A következő böngészők támogatják: Minden webfejlesztő álma, hogy weblapjai valamennyi operációs rendszeren, valamennyi böngésző program valamennyi változatán, egyformán és úgy jelenjenek meg, ahogy azt ő megtervezte. Ezt a célt meg lehet közelíteni, de elérni sosem fogjuk. Már egy egyszerű vízszintes vonal <hr> is másként jelenik meg a különböző böngészőkben. A stíluslapok használatánál, de különösen az aktív tartalmak megjelenítésénél még nagyobbak a különbségek. Az egyes böngésző programok működése kisebb, nagyobb mértékben eltér a webhelyen közzétett internetes szabványoktól. (Tananyagunk ezekre épül. Az ismert eltéréseket jelezzük.) A szabványban leírt funkciók, elemek és jellemzők egy részét nem minden böngésző ismeri. (A tananyagban a böngészőprogramok ikonjai jelzik. Azokat, amelyek adott elemet vagy jellemzőt képesek kezelni.) Ha a teljes böngészőfüggetlenség nem is érhető el mindenképpen érdemes arra törekedni, weboldalainkat minél több látogató legyen képes használni. Ennek érdekében az elkészült weboldalainkat a mindig ellenőrizzük le a legnagyobb böngészőkben. Ha működésében vagy megjelenítésében zavaró hibát találunk, akkor az próbáljuk orvosolni.

5 Összetett webhelyek, webáruházak készítése Az összetett webhelyek és webáruházak készítése nem a kód elkészítésével kezdődik, és a kód elkészültével közel sem ér véget. A következő lépéseket meg lehet ugyan spórolni, de nem érdemes. Igényfelmérés Szükség van az adott oldalra? Célok megfogalmazása Mit szeretnénk elérni? Kiket szeretnénk elérni? Eszközök megnevezése (mire van szükség a célok eléréséhez) A fejlesztéshez szükséges HW és SW. Domain név? Tárhely (PHP?; MySQL; emal?; aldomai-ok?) Multimédia elemek (pl. webáruház esetén a termékek fotói) A fejlesztési folyamat megtervezése A fejlesztéshez szükséges HW és SW kiválasztása (Mit? Miét? Mennyiért?) Domain kiválasztása (Illeszkedjen a célokhoz!) Tárhely szolgáltató, tárhely csomag kiválasztása. (Ár? Tartalom? Megbízhatóság?) A multimédia elemek (Készítői?; Formátumok? Mennyiség? Költségek?) HTML, PHP; MySQL, JavaScript kódok (Készítői? Tartalom? Mennyiség? Költségek?) Költségterv A munka várható költségei. (Megéri? Belefér a keretbe?) A webhely megtervezése Adatbázis megtervezése (MySQL adattáblák és kapcsolataik) Weboldalak illetve azok kapcsolatainak megtervezése. (HTML, PHP; MySQL, JavaScript kódok, könyvtárszerkezet) A multimédia elemek részletes megtervezése (Melyik oldalra mi kerül. Tartalom? Forma?) Kódolás, multimédia elemek elkészítése A multimédia elemek elkészítése HTML, PHP; MySQL, JavaScript kódok elkészítése Tesztelés, hibakeresés és javítás Webhelyek készítésénél különösen fontos, hogy a legnagyobb böngészőkkel ellenőrizzük megjelenítésüket és működésüket! Dokumentálás Fejlesztői dokumentáció (Lehetővé teszi a későbbi javításokat, módosításokat a fejlesztés folytatását.) Felhasználói dokumentáció (Súgó és/vagy használati útmutató). Közzététel A webhely közzétételével a munka koránt sem ért véget. Még senki nem tud róla. (Sem a felhasználók, sem a keresők.) Maradhattak benne hibák, amiket később javítani kell. Hirdetések, kereső optimalizálás Ha a webhely már működik, akkor erről tájékoztassuk a lehetséges felhasználókat! ( hirdetések, reklámok, újságcikkek, szóbeli tájékoztatók) A webhely megszületéséről tájékoztassuk a keresőket is (Linkek elhelyezése az interneten, Keresők webmester eszközei). Webhelyek akadálymentesítése Látássérültek igényeinek figyelembevétele Látássérült személyek használhatnak képernyő felolvasó programot, ezért képek, animációk vagy videók használata esetén ne felejtsünk el helyettesítő szöveget megadni! A helyettesítő szöveget nem csak a felolvasó programok használják, hanem a böngészők is ezeket jelenítik meg, ha egy multimédia elemet nem sikerül betölteni. Végtagsérültek igényeinek figyelembevétele Végtagsérült személyek lehet, hogy nem képesek egeret használni, ezért honlapunk minden részét elérhetővé kell tenni számukra csak billentyűzettel is.

6 Színvak személyek igényeinek figyelembevétele Színtévesztő, színvak személyek számára nem jelent plusz információt a figyelmeztető színek használata. A honlap kiemelt elemeit ezért a színeken túl egyéb módon is különböztessük meg a többitől. (pl. linkek aláhúzása, nyilacskák és/vagy megfelelő pozicionálás) HTML oldalak felépítése Minden weboldal 3 fő részből áll. HTML oldalak 3 fő része: a dokumentumtípus meghatározása, a dokumentum feje, a dokumentum törzse. A következő 3 címke valamennyi HTML5 weboldalon megtalálható: Angol eredete Hatás <!DOCTYPE html> Document type Dokumentumtípus páratlan címke.. <html> HTML* A dokumentum tartalma nyitó- és záró html címke (tag) közé kerül. <head> Head A dokumentumfej páros címkéje. Body A dokumentumtörzs páros címkéje. *HTML = HyperText Markup Language Forráskód <!DOCTYPE html> <html lang="hu"> <head> fej (meta-adatok...) </head> törzs (Megjelenítendő tartalom) </html> Dokumentumtípus definíció célja A dokumentumtípus definíció mondja meg a böngészőnek, hogy a HTML-nek melyik verzióját fogjuk használni. Ez biztosítja számunkra, hogy a különböző gyártmányú és verziójú böngészőkben a weblapunk látványa minél inkább hasonló legyen. A dokumentumtípus definíciót mindig a HTML oldal legelején kell megadni. HTML5 dokumentumtípus definíció: <!DOCTYPE html> Néhány korábbi HTML verzió dokumentumtípus definíciója: HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " > HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "

7 A dokumentumfej (head ) A fej (angolul: head ) A fej a weboldalra vonatkozó információk megadását teszi lehetővé. Ezek nem lesznek megjelenítve, de befolyásolják a tartalom megjelenítését. Lehetőség van itt külső erőforrások illesztésére (pl. CSS, Java, JavaScript, ikon ), a böngésző vagy a keresők számára szükséges információk megadására. A fejlécet a <head> és a </head> címkék közzé kell elhelyezni. Angol eredete Hatás <head> Head A dokumentumfej páros címkéje. Forráskód <!DOCTYPE html> <html lang="hu"> <head> meta-adatok, külső erőforrások... </head> a megjelenítendő tartalom (szöveg, multimédia...) </html> A fejléc elemei A HTML weboldal fejlécében (head) használható elemek (tag-ek) Angol eredete Hatás <head> Head A HTML dokumentum feje páros címke.. <title> Title A HTML dokumentum címe páros címke. <base> Base Alapértelmezett URL. (Relatív címzésnél ez az alap.) Páratlan címke. <link> Link Kapcsolatot teremt a weboldal és egy külső erőforrás között. Páratlan címke. <meta> Meta A böngészők és a keresők számára nyújtanak plusz információt. Páratlan címke. <script> Script Külső scriptet (programkódot) definiál. Páros címke. <style> Style Belső stílusinformációk megadását teszi lehetővé. Páros címke. Az oldal neve A <title> és a </title> címkék közé írt szöveg jelenik meg a böngészők címsorában, a weoldalhoz tartozó fülén és a keresők találati listáján. A felhasználó a böngészőkben a kedvencek vagy a könyvjelzők közé felvett oldalak közül is nevük alapján válogathat. Legyen rövid, és utaljon az oldal tartalmára. Angol eredete Hatás <title> Title A HTML dokumentum címe. Páros címke. Forráskód <!DOCTYPE html> <html lang="hu"> <head> <title> EZ AZ OLDAL NEVE </title> </head> Ennek az oldalnak már neve is van, de az ékezetekkel még baj lehet.

8 </html> A meta címkék A meta adatok nem jelennek meg az oldalon. A böngészők és a keresők számára nyújtanak plusz információt. A meta elem : Angol eredete Hatás <meta> Meta A böngészők és a keresők számára nyújtanak plusz információt. Páratlan címke. A meta elem jellemzői: Érték Leírás name application-name; author; description; generator; keywords Megadja a metaadatok nevét. content szöveg Meghatározza a http-equiv vagy a name jellemzőhőz társított értéket http-equiv content-type; default-style; refresh Segítségével a tartalomra és annak feldolgozására vonatkozó plussz infókat adhatunka böngészőnek. (karakterkódolás, alapértelmezett stíluslap, frissítés gyakorisága) Kiemelkedő jelentősége van a leírásnak (description), amelyben az oldal tartalmának rövid, egy-két mondatos összefoglalását adhatjuk meg. A keresőknek segít, annak eldöntésében, hogy miről szól weboldalunk, mely kifejezésekre történő keresés esetén érdemes megjeleníteni. Sok esetben az itt megadott szöveget jelenítik meg a keresési találatok között az oldal neve, és URL-je alatt. Az már kevésbé biztos, hogy az általunk megadott keresőszavakat (keywords) figyelembe veszik a keresők. Ugyanakkor, ha sikerül azt az 5-10 szót, illetve kifejezést megadnunk, amelyekre keresve a szeretnénk a találati listák élére kerülni, az már fél siker. Nagyon fontos, hogy a weboldal neve (title), leírása (description) és keresőszavai (keywords) összhangban legyenek a tartalommal. A keresők sokszor büntetik a webmesterek átverési kisérleteit. (Amikor egy oda nem illő keresőszóra próbálják elhitetni a keresővel, hogy oldalukat adott szóra érdemes megjeleníteni a találatok között. ) Már domain nevének kiválasztásánál érdemes arra odafigyelni, hogy a választott név illeszkedjen a webhely tartalmához. Forráskód Leírás: <meta name="description" content="megismerkedünk a meta címkékkel"> Kulcsszavak: <meta name="keywords" content="keywords, description, author"> Szerző: <meta name="author" content="példa Pál"> Frissítés (minden 30 másodpercben) <meta http-equiv="refresh" content="30"> A karakterkészlet megadása HTML5 szabvány szerint A karakterkészlet megadása meta címkével történik a következő módon: Forráskód <meta charset="utf-8"> vagy <meta charset="iso "> A példakód külön ablakban tekinthető meg: html5_charset.html A karakterkészlet megadásának elmulasztása hibás megjelenítéshez vezet(het). Magyar nyelvű weblapoknál az UTF-8 vagy az ISO karakterkódolást használhatjuk.

9 Interaktív weboldalak esetén szinkronban kell, hogy legyenek a szerkesztőprogram, az adatbázis kezelő és a böngésző karakterkódolási beállításai. A karakterkészlet megadásának biztonságos módja Forráskód <meta http-equiv="content-type" content="text/html; charset=utf-8"> vagy <meta http-equiv="content-type" content="text/html; charset=iso "> Ha azt szeretnénk, hogy ékezetes karaktereinket minden böngésző helyesen jelenítse meg, akkor ezt a formát célszerű használni. Link elem A <link> címke kapcsolatot teremt a weboldal és egy külső erőforrás (pl. stíluslap, ikon.. ) között. ( link magyarul: kapocs ) A link elem: Angol eredete Hatás <link> Link Kapcsolatot teremt a weboldal és egy külső erőforrás (pl. stíluslap, ikon.. ) között. Páratlan címke. A link elem jellemzői: Érték Leírás href URL Az erőforrás helye (URL-je) hreflang nyelvkód Megadja az erőforrás nyelvét. (Magyar = hu) media rel screen; tty; tv; projection; handheld; print; braille; aural; all; alternate; archives; author; first; help; icon; index; last; license; next; pingback; prefetch; prev; search; stylesheet; sidebar; tag; up; Megadja a megjelenítő eszköz típusát. Például megadhatjuk, hogy egy stíluslapot a képernyőn történő megjelenítésénél vagy nyomtatásnál használjon a böngésző. Weboldalunk és az erőforrás közötti kapcsolatot adja meg. ( relation magyarul: viszony ) sizes magasság x szélesség Az erőforrás méretének meghatározása ikonok esetén. (pl. 16x16) type MIME típus pl. text/css; text/javascript; image/gif Forráskód <!DOCTYPE html> <html lang="hu"> <head> <title> EZ AZ OLDAL NEVE </title> <meta charset="utf-8"> Az erőforrás MIME típusa. <link rel="icon" type="image/gif" href="favicon.ico"> </head> Már ikonunk is van! Mérete: 16*16 px </html> Külső stíluslap használata Külső stíluslapok beillesztése A stíluslapok használatával szétválik a tartalom és a forma.

10 A weboldalak tartalmi elemeit a HTML kód, míg a tartalom megjelenítésére vonatkozó stílusdeklarációkat a CSS kód tartalmazza egyegy külön szöveges állományban. A HTML kódot tartalmazó fájl kiterjesztése.html, a CSS kódot tárolóé.css. Különösen összetett webhelyek esetén hasznos a külső stíluslapok használata. Ekkor ugyanis csupán egyszer kell beállítanunk a webhely oldalain található HTML elemek stílusjellemzőit. Az elkészült CSS fájlt (stíluslapot) használva valamennyi weboldalon könnyen biztosítható az egységes megjelenés. Ha egy stíluselemet kívánunk később módosítani a webhely valamennyi oldalán (mai lehet több száz vagy több ezer is.) elegendő egy helyen elvégezni a változtatást. HTML kód <!DOCTYPE html> <html lang="hu"> <head> <title> EZ AZ OLDAL NEVE </title> <meta charset="utf-8"> <link rel="icon" type="image/gif" href="favicon.ico"> <link rel="stylesheet" type="text/css" href="f_5.css"> </head> Külső CSS stíluslapot használunk. </html> CSS kód body { font-size: 34px; text-align: center; } Belső vagy beágyazott stílusok Angol eredete Hatás <style> Style A HTML dokumentumon belüli stílusdefiníciók megadását teszi lehetővé. Páros címke. A külső stíluslap beállításait módosíthatjuk a beágyazott stílusdefinícióval, az aktuális weboldal egyedi jellemzőinek megfelelően. Egyszerűbb weboldal esetén (pl. egy oldalas webhely) a külső stíluslapot akár el is hagyhatjuk. Összetett webhely fejlesztésekor beágyazott stílusdeklarációkkal alakítható ki a főbb oldalak megjelenése. Ekkor csak egy-egy fájlt kell megfelelően elkészíteni. Ezt követően a stílusdeklarációk külső stíluslapokba helyezhetők át. Egy HTML oldalon több < style> elem is elhelyezhető. HTML kód <!DOCTYPE html> <html lang="hu"> <head>... <link rel="stylesheet" type="text/css" href="f_5.css"> <style> body { background-color:#d0e4fe; } </style> </head> A külső stíluslap beállításait módosítjuk. </html> CSS kód body { font-size: 34px; text-align: center; }

11 Beágyazott stílusok jellemzői Érték Leírás media screen; tty; tv; projection; handheld, print; braille; aural; all type text/css A tartalom típusa. A weboldal megjelenítésére haszált eszköz típusa. Külön stíluslap készíthatő a különböző eszközökhöz. (nyomtató, képerny...) scoped scoped Felhasználásával a dokumentumtörzsben is megadható stílusdeklaráció, ami a megadás helyén található elemre, és az abba közvetlenűl beágyazott elemekre vonatkozik csupán. Médiatípusok all screen tv handheld print projection tty aural braille Példa: Eszköz Valamennyi eszköz Képernyő Televízió Kézi eszközök (kis képernyős, korlátozott sávszélesség) Nyomtató (nyomtatás előnézete) Projektor Karakteres kiviteli eszköz, fix szélességű karakterekkel Beszéd szintetizátor Braille média A példában a nyomtatóra megadott stílusdefiníció, a képernyőn történő megjelenítést nem befolyásolja. HTML kód <!DOCTYPE html> <html lang="hu"> <head>.. <link rel="stylesheet" type="text/css" href="f_5.css"> <style type="text/css" media="print"> body { background-color:blue; } </style> <style type="text/css" media="screen"> body { color:red; } </style> </head> A külső stíluslap beállításait módosítjuk. </html> CSS kód body { font-size: 34px; text-align: center; }

12 A szöveg tagolása Bekezdések, sortörések és megjegyzések Angol eredete Hatás <p> paragraph Bekezdések létrehozására használható páros címke. <br> break A sortörés páratlan címkéje. <wbr> word break Hosszú szavakba lehetővé teszi a sortörést. (Ha a szó nem fér ki egy sorban.) <hr> horizontal rule Vízszintes vonal páratlan címkéje. A vonal egy új sorba kerül, és utána is új sor következik. <!-- --> - A megjegyzés páros címkéje. A weboldalon nem jelenik meg a tartalma. A webfejlesztők emlékeztetőit tárolja. A bekezdéseket a böngészők blokkszintű elemként kezelik. Új sorban kezdődnek és az utánuk szintén soremelés következik. Az utánuk következő elem így szintén új sorba kerül. A sortörést követő elem már új sorba kerül. A sortörés használható egy bekezdésen belül is. A megjegyzések (emlékeztetők) használata hasznos, összetett webhely és/vagy hosszú forráskód készítésénél. A jól megírt emlékeztetők megkönnyítik a webhely későbbi továbbfejlesztését, vagy az eseteleges hibák feltárását Forráskód <!-- Az oldal célja a szöveg függőleges tagolásának bemutatása --> <p>ez az első bekezdés szövege: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. </p> <p>ez az második bekezdés szövege két sortöréssel: szöveg <br> szöveg szöveg szöveg szöveg szöveg szöveg szöveg <br> szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg </p> <hr> <p>ez az harmadik bekezdés előtte vonal</p> Címsor (heading) A <h1>-től <h6>-ig terjedő címsor hierarchia lehetővé teszi a tartalom strukturált közreadását. (Nyomtatott könyvek tartalomjegyzékében jól követhető, ha strukturált a felépítésük.) Sose használjuk csupán bekezdésformázásra! A legfelső szinten a <h1> áll. A legkevésbé fontos a <h6>. Angol eredete Hatás <h1>... <h6> Heading Címsorok páros címkéi. Forráskód <html lang="hu"> <head> <title> Címsorok </title> <meta charset="utf-8"> </head> <h1>címsor 1.</h1> <h2>címsor 2.</h2> <h3>címsor 3.</h3> <h4>címsor 4.</h4>

13 </html> <h5>címsor 5.</h5> <h6>címsor 6.</h6> Karakterformázás HTML elemekkel Egy-egy karakter, szórészlet vagy szövegrész formázására alkalmas elemek. Valamennyi páros címke. Angol eredete Hatás <b> Bold Félkövér karakterek. <i> Italian Dőlt karakterek. <em> Emphasized Kiemelt karakterek. <strong> Strong Erős kiemelés. <small> Small Kis méretű karakterek. <sup> Superscript Felső index. <sub> Subscript Alsó index. <s> Strikeout Nem érvényes áthúzott szöveg. <u> Underlined Aláhúzott karakterek. <mark> Mark Kiemelés. <span> Span Stíluslap segítségével formázható szövegrész kijelölése. Forráskód <html lang="hu"> <head> <title> Címsorok </title> <meta charset="utf-8"> <style type="text/css" > #piros { color:#990000; } </style> </head> <b>félkövér</b><br> <i>dőlt</i><br> <em>kiemelt </em><br> <strong>erős kiemelés</strong> <br> <small>kis méretű szöveg </small><br> Felső index 2ⁿ<br> Alsó index U_be<br> <s>nem érvényes áthúzott szöveg </s><br> <u>aláhúzott szöveg </u><br> <mark>szövegrész kiemelése</mark><br> <span id="piros" >Stíluslap segítségével formázott</span><br> </html> A szöveg változásának jelzése A tartalom változásának jelzése (nem csupán szövegformázás) A weboldal tartalmának változására a törölt és a helyébe beszúrt szöveg együttes megjelenítésével hívhatjuk fel a figyelmet. Az új szöveg aláhúzott a régi pedig áthúzott formában jelenik meg. Angol eredete Hatás <del> Delete Törölt szöveg. <ins> Insert Beszúrt szöveg.

14 Forráskód <html lang="hu"> <head> <title>a tartalom változása</title> <meta charset="utf-8"> </head> <del>ez a szöveg változott</del> <ins>erre a szövegre.</ins> </html> Előformázás és szövegirány beállítása Egy vagy több sor, bekezdés formázására alkalmas elemek. Valamennyi páros címke. Angol eredete Hatás <pre> Preformatted Előformázott szöveg. Állandó szélességű tarakterekkel, a szőközök és soremelések megtartásával jeleníti meg a tartalmat. (Lásd. mintakódok.) <bdo> Forráskód Bidirectional order <pre> Az előformázott A szöveg olvasási irányánek beállítása. A szövegirányt az elem dir jellemzője adja meg rtl esetén jobbról balra ltresetén ablról jobbra. szövegben valamennyi soremelés és szóköz megjelenik. </pre> <bdo dir="rtl"> A szöveg olvasási iránya 1. </bdo> <bdo dir="ltr"> A szöveg olvasási iránya 2. </bdo> Idézetek, címek, szerzők jelolése Idézetek jelölésére használható HTML elemek Valamennyi páros címke. Angol eredete Hatás <q> Quotation Rövid sorközi idézet. A CITE attribútum használható a forrás megnevezéséhez <blockquote> Block quote Idézetblokk. (hosszabb idézet) <address> Address A dokumentum vagy adott szakasz szerzőjének elérhetősége név, cím, postai cím, telefon, honlap... <cite> Citation Könyv, kiadvány, cikk címe Forráskód <h2>idézetek, címek, szerzők</h2> <address>petőfi Sándor</address> <cite>pató PÁL ÚR</cite> <blockquote> Mint elátkozott királyfi<br> Túl az Óperencián,<br> Él magában falujában<br> Pató Pál úr mogorván.<br> Be más lenne itt az élet,<br> Ha egy ifjú feleség...<br>

15 Közbevágott Pató Pál úr:<br> "Ej, ráérünk arra még! <br> </blockquote>.. Definíciók és rövidítések jelölésére használható HTML elemek Valamennyi páros címke. Angol eredete Hatás <abbr> Abbreviation Rövidítés, mozaikszó. <dfn> Definition Meghatározás, definió. Minden kifejezésre csak egyszer definiáljunk az oldalon belül! Az <abbr> címke title jellemzőjének értéke buborékszövegként megjelenik. Többszavas szöveg esetén nem törhető szóközöket ( ) használva a teljes szöveg megjelenik, míg sima szóközök esetén csak az első szó. Forráskód. <h2>rövidítések</h2> <abbr title= Általános Szerződési Feltételek > AFSZ</abbr><br> <abbr title= Central processing unit > CPU</abbr><br> <h2>meghatározás</h2> <dfn title= Egy fogalom jelentésének meghatározása. > Definíció</dfn>: általában egy fogalom jelentésének meghatározása.<br>.. Számítógépes kódok megjelenítése Számítógépes kódok megjelenítésére használható HTML elemek Valamennyi páros címke. Angol eredete Hatás <code> Code Számítógépes kódok vagy programozási nyelvek kódjainak megjelenítésére szolgál. <var> Variable Változók jelölésére használhatjuk szöveges környezetben. Lehet matematikai változó vagy programkódban található változó. <samp> Sample Számítógépes program kimenetének jelölésére használhatjuk. <kbd> Keyboard Felhasználó által bevitt információt jelöl. A bemenet tipikusan billentyűzet, de nem csak az lehet. (például hangparancsok) Forráskód. <h2>billentyű kombináció</h2> CTR+C = <kbd><kbd>ctr</kbd>+<kbd>c</kbd></kbd> <h2>változó</h2> Az a változó értéke = Az <var>a</var> változó értéke <h2>programkód</h2> <code> for i:=1 to 20 writeln(i);</code> <h2>egy program által megjelenített üzenet</h2> <samp>.loaded, skipping.</samp>..

16 Időpont megadása HTML dokumentumban: Angol eredete Hatás <time> Time Felhasználható dátumok és időpontok, a keresők és a felhasználó naptárak számára olvasható módon történő kódolására. Páros címke. Hasznos a közzététel időpontjának, születésnapi emlékeztetők vagy ütemezett események dátumának, idejének megadásánál. Egyetlen jellemzője a datetime, amely a dátum és idő szabványos módon történő megadását teszi lehetővé. <time datetime="yyyy-mm-ddthh:mm:sstzd">a képernyőn ez jelenik meg. <time> TZD = Time Zone Designator = időzóna / GMT (Greenwich Mean Time) + 1 Forráskód. <h2>a time elem használata</h2> <h3>1. pl:</h3> <time datetime=" ">2013. március 15.</time> <h3>2. pl:</h3> <time datetime="14:00">kezdés 14 órakor</time> <h3>3. pl:</h3> <time datetime=" t20:00+00:00"> március 15 20:00 </time> Linkek (hivatkozások) A linkek kötik össze a weblapokat, és lehetőséget teremtenek egy hosszabb oldalon található fejezetek gyors elérésére is. Egy linkre kattintva a látogatók href jellemzőnél megadott weboldalt érhetik el. Angol eredete Hatás <a> Link, hivatkozás A számozatlan lista páros címkéje. A webhelyek menüi rendszerint belső hivatkozásokat tartalmaznak. Segítségükkel a webhelyhez tartozó weboldalakat érhetjük el. Külső hivatkozások segítségével weboldalunkról elérhetővé tehetünk más webhelyeket is. A href jellemzőnél kel megadni annak az weboldalnak a címét (URL) ahová a link mutat. Ha a látogató a linkre kattint, akkor a böngésző program ezt a weboldalt fogja betölteni. A böngésző a nyitó és a záró címke között lévő tartalmat (lehet szöveg, vagy kép) fogja megjeleníteni. Példa: Az oldalra mutató link: Informatika tananyag Forráskód <a href=" Informatika tananyag</a> Linkeknél használható HTML attribútumok (HTML Attributes) Érték Leírás href URL Megadja a hivatkozás (ugrás) célpontját. hreflang Nyelv kód Megadja a céloldal nyelvét. (pl. hu) rel alternate author bookmark help license next nofollow noreferrer prefetch prev search tag Megadja a forrás és a céloldal kapcsolatát.

17 target _blank _self _parent _top framename Megadja, hogy hol jelenjen meg a céloldal rartalma. A target jellemzővel meghatározhatjuk a weboldal megjelenítésének helyét/módját. Értéke lehet: Forráskód _blank: új ablak vagy fül. _parent: a szülő-dokumentumban nyílik meg a cél-url. _self: az eredeti ablak. (Alapértelmezett) _top: a cél-url az ablak tetején nyílik meg <a href=" target="_blank" > Informatika tananyag (_blank) <a> <a href=" target="_parent" > Informatika tananyag (_parent) <a> <a href=" target="_self" > Informatika tananyag (_self) <a> <a href=" target="_top" > Informatika tananyag (_top) <a> Külső hivatkozások Külső hivatkozás a címre <a href=" > index.html vagy index.php </a> Ekkor az index.html vagy az index.php oldalakat érjük el. Külső hivatkozás a címen található html2.html oldalra <a href=" > html2.html</a> Ekkor az html2.html oldalt érjük el. Külső hivatkozás a címen található html2.html oldal meghatározott pontjára <a href =" >Egy távoli weboldalkonkrét részére ugrik</a> Ekkor az html2.html oldal horgonnyal kijelölt részét érjük el. A céloldal URL-je végén, # jellel elválasztva megadjuk a horgonynak használt linkelem nevét. Horgony html2.html weboldalon: <a name="horgony"> Ugorj ide</a> Ekkor az index.html vagy az index.php oldalakat érjük el. Belső hivatkozások Belső hivatkozás az aktuális oldalunk könyvtárban lévő másik oldalra: <a href="html2.html" > html2.html</a> Belső hivatkozás az aktuális oldalunk könyvtárából nyíló alkönyvtárban lévő másik oldalra: <a href="konyvtar/html2.html" > html2.html</a> Belső hivatkozás az aktuális oldalunkkal a könyvtárstruktúrában azonos szinten, de másik könyvtárban lévő oldalra: <a href="../konyvtar/html2.html" > html2.html</a> A két pont (../) segítségével ekkor a könyvtárstruktúrában egy szinttel feljebb lépünk. Belső hivatkozás megadása a web szerver gyökér könyvtárából kiindulva: <a href="/konyvtar1/konyvtar2/konyvtar3/html2.html" > html2.html</a> A / segítségével ekkor a könyvtárstruktúrában a gyökérkönyvtárhoz jutunk. link Ha a felhasználó rákattint a következő linkre, akkor az alapértelmezett levelezőprogram nyílik meg, és a címzett automatikusan a href jellemzőnél megadott cím lesz. <a href ="mailto:nev@xy .hu">kapcsolat</a>

18 Számozatlan lista (unordered list ) A lista elemei rendezett formában, de sorszámok nélkül kerülnek megjelenítésre. Angol eredete Hatás <ul> Unordered list A számozatlan lista páros címkéje. <li> List item A listaelemek páros címkéje. Számozatlan listák stíluslap segítségével formázhatók. A felsorolásjelek képekre cserélhetők. Forráskód <html lang="hu"> <head> <title> Számozatlan lista </title> <meta charset="utf-8"> </head> <h2>számozatlan lista</h2> <ul> <li>elem</li> <li>elem</li> <li>elem</li> </ul> </html> Több szintű számozatlan lista Jól használható több szintű tartalomjegyzékek készítéséhez. A belső lista mindig a külső lista egy listaelemében helyezkedik el.. <html lang="hu"> <head> <title> Egymásba ágyazott számozatlan listák </title> <meta charset="utf-8"> </head> <h2>egymásba ágyazott számozatlan listák</h2> <ul> <li>külső elem <ul> <li>belső elem</li> <li>belső elem</li> <li>belső elem</li> </ul> </li> <li>külső elem <ul> <li>belső elem</li> <li>belső elem</li> <li>belső elem</li> </ul> </li> </ul> </html> Számozott lista (ordered list ) A lista elemei rendezett formában, sorszámokkal kerülnek megjelenítésre. Angol eredete Hatás <ol> Ordered list A számozott lista páros címkéje. <li> List item A listaelemek páros címkéje. A számozott listák stíluslap segítségével formázhatók. <html lang="hu">

19 <head> <title> Számozott lista </title> <meta charset="utf-8"> </head> <h2>számozott lista</h2> <ol> <li>elem</li> <li>elem</li> <li>elem</li> </ol> </html> Számozott lista jellemzői Érték Leírás start szám A kezdő sorszám beállítása. type 1 a A i I A sorszámok típusának beállítása. reversed reversed A csökkenő sorrend beállítása. A sorszámok típusai: type Minta Leírás 1 1, 2, 3, 4... Arab számok (ez az alapértelmezett) a a, b, c, d... Az abc kisbetűi A A, B, C, D... Az abc nagybetűi. i i, ii, iii, iv... Római számok kisbetűkkel I I, II, III, IV... Római számok nagybetűkkel. <html lang="hu"> <head> <title> A listák jellemzői </title> <meta charset="utf-8"> </head> <h2>csökkenő ABC</h2> <ol type="a" reversed="reversed"> <li>elem</li> <li>elem</li> <li>elem</li> </ol> <h2>9-től csökkenő </h2> <ol start="9" reversed="reversed"> <li>elem</li> <li>elem</li> <li>elem</li> </ol> <h2>római számok </h2> <ol type="i"> <li>elem</li> <li>elem</li> <li>elem</li> </ol> </html> Több szintű számozott lista Jól használható több szintű tartalomjegyzékek készítéséhez. A belső lista mindig a külső lista egy listaelemében helyezkedik el. <html lang="hu"> <head> <title> Egymásba ágyazott számozott listák </title>

20 <meta charset="utf-8"> </head> <h2>egymásba ágyazott számozott listák</h2> <ol type="i"> <li>külső elem <ol type="a"> <li>belső elem</li> <li>belső elem</li> <li>belső elem</li> </ol> </li> <li>külső elem <ol type="a"> <li>belső elem</li> <li>belső elem</li> <li>belső elem</li> </ol> </li> </ol> </html> Meghatározáslista Számozatlan lista (unordered list ) A lista elemei rendezett formában, de sorszámok nélkül kerülnek megjelenítésre. Angol eredete Hatás <dl> Definition list Szavakat, fogalmakat, kifejezéseket és azok meghatározását társítja egymáshoz.páros címke. <dt> Definition term Definíciós kifejezés páros címkéje. A meghatározandó kifejezést tartalmazza. <dd> Definiton description A meghatározást, a definíciót tartalmazza. Páros címke. Számozatlan listák stíluslap segítségével formázhatók. A felsorolásjelek képekre cserélhetők. <html lang="hu"> <head> <title> EZ AZ OLDAL NEVE </title> <meta charset="utf-8"> </head> <h2>meghatározás lista</h2> <dl> <dt>címsor</dt> <dd>az aktív dokumentum címét mutatja.</dd> <dt>menüsor</dt> <dd>az aktív dokumentumban használható parancsok csoportjai.</dd> </dl> </html> Egyszerű táblázat Táblázat (table) A HTML táblázat tartalmaz oszlopokat, sorokat és persze adatokat. Tartalmazhat fejlécet, láblécet és megadhatjuk címét is. 1. A HTML táblázat egy sora azonos magasságú cellákat tartalmaz. 2. A HTML táblázat minden sora azonos számú cellát tartalmaz. 3. A HTML táblázat egy oszlopa azonos szélességű cellákat tartalmaz. 4. A HTML táblázat minden oszlopa azonos számú cellát tartalmaz. 5. Egy HTML táblázat során ill. egy oszlopán belül a cellák száma, a cellák egyesítésével csökkenthető.

21 A következő 3 címke valamennyi HTML táblázatnál megtalálható: Angol eredete Hatás <table> table Táblázat páros címke.. <tr> table row Táblázat egy sora páros címke. <td> table data A táblázat cellájában lévő adat páros címke. <h2>egyszerű táblázat kerettel</h2> <table border="1"> <tr> <td> 1. sor és 1. oszlop </td> <td> 1. sor és 2. oszlop </td> </tr> <tr> <td> 2. sor és 1. oszlop </td> <td> 2. sor és 2. oszlop </td> </tr> </table> <h2>egyszerű táblázat keret nélkül</h2> <table border=""> <tr> <td> 1. sor és 1. oszlop </td> <td> 1. sor és 2. oszlop </td> </tr> <tr> <td> 2. sor és 1. oszlop </td> <td> 2. sor és 2. oszlop </td> </tr> </table>... Sor és oszlop fejlécek A sorok és oszlopok fejléceit egyenként a <th>...</th> páros címkével adhatjuk meg. Ezek stílusát külön beállíthatjuk. Angol eredete Hatás <th> table header A <td> páros címke helyett ezt használjuk a fejlcéhez tartozó adatok (cellák) jelölésénél. <h2>sor és oszlop fejlécek</h2> <table border="1"> <tr> <th> 1. sor-oszlop fejléc </th> <th> 2. oszlop fejléc </th> <th> 3. oszlop fejléc </th> </tr> <tr> <th> 2. sor fejléc</th> <td> adat </td> <td> adat </td> </tr> <tr> <th> 3. sor fejléc</th> <td> adat </td> <td> adat </td> </tr> </table> Táblázat címének jelölése A táblázat címét nem <h1>...<h6>, hanem <caption> páros címkék között adjuk meg. Angol eredete Hatás <caption> Caption A <caption> páros címke segítségével a tábálzatnak címet adhatunk.

22 <h2>a táblázat címe</h2> <table border="1"> <caption> Árjegyzék</caption> <tr> <th> Termékkód </th> <th> Megnevezése </th> <th> Ár </th> </tr> <tr> <th> XU1587</th> <td> Irodai PC 2 </td> <td> Ft </td> </tr> <tr> <th> XU1583c</th> <td> Irodai PC 6 </td> <td> Ft </td> </tr> </table> Cellák összevonása Egymás melletti cellák összevonása Annak érdekében, hogy táblázatunk áttekinthető legyen: - Összevonhatunk két vagy több egy sorban egymás mellett elhelyezkedő cellát. - Összevonhatunk két vagy több egy oszlopban egymás mellett (alatt, felett) elhelyezkedő cellát. A <td> és <th> elemek összevonásra szolgáló jellemzői: Érték Leírás rowspan rowspan Értéke megadja, hogy adott cella hány sor magas lesz. (cellák egyesítése függőlegesen - sorátfogás) colspan colspan Értéke megadja, hogy adott cella hány oszlop széles lesz (cellák egyesítése vízszintesen - oszlopátfogás) <h2>oszlopátfogás</h2> <table border="1"> <caption>a táblázat címe </caption> <tr> <td colspan="2"> 1. sor két összevont cellája</td> </tr><tr> <td> 2. sor és 1. oszlop </td> <td> 2. sor és 2. oszlop </td> </tr> </table> <h2>sorátfogás</h2> <table border="1"> <caption>a táblázat címe </caption> <tr> <td rowspan="2"> 1. oszlop két összevont cellája </td> <td> 1. sor és 2. oszlop </td> </tr><tr> <td> 2. sor és 2. oszlop </td> </tr> </table> Oszlopok, oszlopcsoportok A táblázat egy vagy több oszlopa, ill. azokból képzett oszlopcsoportok definiálható, melyeket együtt kezelhetünk (pl. közös stílus). Angol eredete Hatás <colgroup> Coloumn group Páros címke. Segítségével a tábálzat több oszlopának stílusa egy lépésben beállítható.

23 <col> Coloumn Páratlan címke. Segítségével a tábálzat egy oszlopának stílusa egy lépésben beállítható. A <colgroup> és <col> elemek speciális jellemzői: Érték Leírás span szám Megadja az egyesített oszlopok számát. A span jellemző pozitív egész szám, amely megadja az átfogott oszlopok számát. <table border="1"> <caption>osztályzatok </caption> <colgroup> <col style="background-color:#88a"> <col span="3" style="background-color:#8a8" > <col style="background-color:#a88"> </colgroup> <tr> <th> </th> <th> szeptember </th> <th> október </th> <th> november </th> <th> átlag </th> </tr><tr> <th> matek </th> <td> 4 </td> <td> 5 </td> <td> 3 </td> <td> 4,00 </td> </tr><tr> <th> fizika </th> <td> 4 </td> <td> 3 </td> <td> 2 </td> <td> 3,00 </td> </tr> </table> Táblázat tagolása A nagyméretű táblázatokat célszerű 3 részre tagolni. Így nyomtatásnál minden oldalon olvasható lesz a táblázat fejléce és lábléce is. A táblázat részei: 1. fejléc, 2. törzs, 3. lábléc. A HTML táblázatok tagolását a következő páros címkékkel valósíthatjuk meg: <thead> Angol eredete table header Hatás A táblázat fejléce páros címke. Egy táblázaton belül csak egy-egy lehet, de több sort is átfoghat. Nyomtatásnál minden oldalon megjelenik. <tbody> table body A táblázat törzsének páros címkéje. Egy táblázaton belül több lehet, és rendszerint több sort is átfog. <tfoot> table footer A lábléc tartalmazhat egyszerű szöveget, vagy lehet egy táblázatsor. <h2>táblázat tagolása</h2> <table border="1"> <caption>osztályzatok </caption> <thead> <tr> <th> </th> <th> szeptember </th> A táblázat lábléce páros címke. Egy táblázaton belül csak egy-egy lehet, de több sort is átfoghat. Nyomtatásnál minden oldalon megjelenik.

24 <th> október </th> <th> november </th> </tr> <thead> <tbody> <tr> <th> matek </th> <td> 4 </td> <td> 5 </td> <td> 3 </td> </tr> <tr> <th> fizika </th> <td> 4 </td> <td> 4 </td> <td> 5 </td> </tr> <tbody> <tfoot> <tr> <td colspan="4"> Csak tájékoztató jellegű adatok </td> </tr> </tfoot> </table> Állókép beillesztése Képek beillesztése HTML dokumentumba Angol eredete Hatás <img> Image Állókép elhelyezése a weboldalon páratlan címke. Kötelező jellemzője a src (source), ami megadja a kép forrásának URL-jét. Használható képformátumok: JPEG, GIF, PNG A kép Inline elem: a sorban előtte állót követi, a sor mögötte tovább folytatódik. Blokkszintű elemmé a stíluslap segítségével tehető. Az alt jellemzővel kell megadni a képet helyettesítő szöveget, ami akkor jelenik meg, ha a kép nem elérhető. A látássérült emberek által használt felolvasó szoftverek az alt attribútum szövegét olvassák fel, így használata az oldal akadálymentesítéséhez is elengedhetetlen. A kép Inline elem: <img src="akku.png" alt="akkumulátor" /> a sorban előtte állót követi, a sor mögötte tovább folytatódik. Blokkszintű elemmé a stíluslap segítségével tehető. <img src="akku.png" alt="akkumulátor" style="display:block; float:left"/> Érdemes megadni a kép méretét. Hibás méretmegadásnál azonban a böngésző a képümket torzíthatja. <img src="akku.png" alt="akkumulátor" height="40" width="300" />

25 Képek beillesztése HTML dokumentumba Érték Leírás src URL Meghatározza a kép forrásának URL-jét. ( és útvonal.) alt szöveg A képet helyettesítő szöveg, ami akkor jelenik meg, ha a kép nem elérhető. width szám Meghatározza a kép szélességét a weboldalon. height szám Meghatározza a kép magasságát a weboldalon. usemap usemap neve Képtérképet illeszt az állóképhez. Kötelező jellemzője a src (source), ami megadja a kép forrásának URL-jét. Az alt jellemzővel kell megadni a képet helyettesítő szöveget, ami akkor jelenik meg, ha a kép nem elérhető. A látássérült emberek által használt felolvasó szoftverek az alt attribútum szövegét olvassák fel, így használata az oldal akadálymentesítéséhez is elengedhetetlen. Érdemes megadni a kép méretét. Széllességét a width, a magasságát a height jellemzővel. Ekkor ugyanis a böngészők a kép letöltése előtt is tudják folytatni az oldal megjelenítését, és nem ugrál az oldal egy-egy kép letöltésének befejezésekor. Fontos, hogy a valós méretet adjuk meg! Hibás méretnél a böngésző torzíthatja (nagyításnál, egy irányú nyújtásnál) a képet, és a számolgatás miatt lassul a megjelenítés. A title általános jellemző segítségével plusz információt adhatunk a képhez, amelyet a felhasználó akkor lát, ha az egérkurzort a kép fölé mozgatja. Ez a funkció hasznos lehet képes nyomógombok esetében is. Képtérképek (image map) beillesztése HTML dokumentumba Angol eredete Hatás <map> Map Képtérkép definíció. Páros címke. <area> Area Terület meghatározása és a adott területhez hivatkozás hozzárendelése. Páratlan címke. A <map> címke használata esetén kötelező a name jellemző megadása. Ennek segítségével kapcsolhatjuk a képtérképet egy állóképhez. Az <area> címke shape jellemzője megadja a terület alakját. Az alak lehet "rect" (téglalap), "circle" (kör) vagy "poly" (általános sokszög) Az <area> címke coords jellemzője megadja a geometriai alakzat koordinátáit: rect: balfelsősarok-x, balfelsősarok-y, jobbalsósarok-x, jobbalsósarok-y circle: középont-x, középpont-y, sugár poly: x 1,y 1, x 2,y 2,... x n,y n <h2>kattintson a kiválasztott alkatrészre:</h2> <img src="alaplap.jpg" usemap="#map_name"> <map name=" map_name"> <area shape="rect" coords="0,0,82,126" alt="processzor" href="processzor.htm"> <area shape="rect" coords="55,65,282,326" alt="memória" href="memoria.htm">. <area shape="circle" coords="124,58,8" alt="akkumulátor" href="akku.htm"> </map> Dokumentumok beágyazása HTML oldalunkba beágyazott keret segítségével egy másik dokumentum (pl. weblap, szöveges dokumentum vagy akár multimédia ) tartalmát illeszthetjük be. Megjegyzés: akár egyszerű szöveget (txt) is beilleszthetünk. A beágyazott dokumentumot le lehet cserélni anélkül, hogy az anyaoldalt újra be kellene tölteni Az <iframe> címke Angol eredete Hatás <iframe> inline frame Egy másik dokumentum (pl. weblap ) tartalmának beágyazását teszi lehetővé. Páros címke..

26 <!DOCTYPE html> <html> <h2>ez egy beágyazott oldal:</h2> <iframe src=" height= 800" width= 600 > <p> A beágyazott dokumentumot nem sikerült megjeleníteni.</p> </iframe> </html> Beágyazott <iframe> dokumentum jellemzői Érték Leírás name szöveg A beágyazott keret egyedi nevét adhatjuk meg. src URL Megadja a dokumentum forrását. srcdoc HTML kód Ha a bongésző ismeri ezt a jellemzőt, akkor az itt megadott HTML kódot, ha nem, akkor a src jellemzőnél megadott dokumentumot jeleníti meg. sandbox "" allow-forms allow-sameorigin allow-scripts allow-topnavigation Biztonsági beállítások. Részletesen a következő oldalon tárgyaljuk. height képpont A beágyazott dokumentum megjelenítésére használt terület magassága. width képpont A beágyazott dokumentum megjelenítésére használt terület szélessége. Kötelező jellemzője a src (source), ami megadja a dokumentum forrásának URL-jét. Érdemes megadni az iframe elem méretét. Széllességét a widthwidth, a magasságát a heightheight jellemzővel. A nyitó és záró címkék közötti tartalom csak akkor jelenik meg, ha a böngésző nem támogatja az <iframe> elemet. Egyes webhelyek nem engedélyezik a keretben történő megjelenítés! A name jellemzőben megadott nevet (name) a JavaScriptek használhatják, és céként megadható a <a> vagy <form> elemek target, valamint <input> vagy <button>elemek formtarget jellemzőjénél. Biztonsági beállítások Beágyazott <iframe> dokumentum biztonsági beállításai sandbox jellemző segítségével extra korlátozások adhatók meg a beágyazott keret tartalom tartalmára vonatkozóan. <iframe sandbox=""...> = Minden lehetőséget tilt <iframe sandbox="allow-same-origin"...> = Lehetővé teszi az iframe az őt tartalmazó dokumentummal azonos helyről származó tartalmak kezelését <iframe sandbox="allow-top-navigation"...> = Lehetővé teszi az iframe tartalmának navigációját az őt tartalmazó dokumentumban. (A beágyazott tartalom könyvjelzői (horgonyok) nem működnek.) <iframe sandbox="allow-forms"...> = Lehetővé teszi űrlapok beküldését <iframe sandbox="allow-scripts"...> = Lehetővé teszi parancsfájlok (scriptek) végrehajtását Az egyes lehetőségeket egymástól szóközzel felsorolva, egyszerre több engedély is megadható. Hang videó és animáció beillesztés Hang videó és animáció beillesztés HTML5 dokumentumba történhet: 1. a 2. iframe 3. object 4. video 5. audio

27 elemek segítségével. Amit már tudunk: A hivatkozások használat már megismertük. Megtudtuk, hogy a <a> címke href jellemzőjénél megadott fájl kiterjesztésétől (típusától) függően a böngésző megnyitja a lejátszásához, esetenként a szerkesztéséhez szükséges programot. A beágyazott keret használatával is találkoztunk már, de ebben a fejeleztben látunk néhány példát videók beillsztésére <iframe> címke segítségével YouTube videó beágyazása iframe segítségével Korábban már láttuk, hogy beillesztett keretek segítségével egy másik weboldal tartalmát illeszthetjük Html oldalunkba. A iframe elem segítségével azonban nem csak más weboldalak tartalmát, hanem egyéb dokumentumokat (pl. txt) és multimédia elemeket is beilleszthetünk. Ha egy videót feltöltöttünk a YouTube videómegosztó portálra, akkor a beillesztéshez szükséges kódot készen kapjuk. Egyúttal takarékoskodhatunk tárhelykapacitásunkkal. Sőt a videó látogatói közül további érdeklődők érkezhetnek webhelyünkre. 1. példa: <h2>youtube videó beágyazása iframe segítségével</h2> <iframe width="420" height="315" src=" frameborder="0" allowfullscreen> </iframe> Ezt a videót sajnos nem tudjuk most megnézni. HTTPS Ha egy weboldalon szükség van a fokozott adatvédelem biztosítására, mivel a felhasználók személyes adatai is továbbításra kerülnek, (pl. webáruháznál a megrendelők adatai, de hasonlóak a levelező vagy azonnali üzenetküldő szolgáltatást biztosító oldalak) akkor a http protokoll helyett https protokollt használnak. Ekkor a kliens számítógép és a webszerver közötti adatforgalom titkosított formában zajlik. Ha https protokollt használó webhelyre http protokollal elérhető tartalmak kerülnek beágyazásra, akkor a felhasználó "kevert tartalom" figyelmeztetést kap. Ennek elkerülésére biztonságos webhelyek esetén a beágyazott tartalmakat is https protokollal célszerű beágyazni. Beágyazás object elem segítségével <object> páros címke külső objektumok (pl. audio, video, Java appletek, ActiveX, PDF, Flash) beillesztésére szolgál. A nyitó és záró címkék között elhelyezett alternatív szöveg, akkor kerül megjelenítésre, ha egy böngésző nem képes kezelni az adott objektumot. Itt elhelyezhetünk egy az erőforrásra mutató hivatkozást is. A beágyazott elemek jellemzőinek meghatározására <param> páros címke szolgál. A beágyazott tartalomtól és plug-intől függően változnak a beállítható paraméterek. Object és param elemek Angol eredete Hatás <object> Object Külső objektumok (pl. audio, video, Java appletek, ActiveX, PDF, Flash) beillesztése. Páros címke.. <param> Parameter A beágyazott elemek jellemzőinek meghatározása. Páratlan címke. 1. példa: <h2>flash videó beagyazasa</h2> <object id="presentation" width="409" height="322" type="application/x-shockwave-flash" data="gorog_1.swf">

28 <param name="allowscriptaccess" value="samedomain"> <param name="movie" value="gorog_1.swf"> <param name="quality" value="best"> <param name="bgcolor" value="#000000"> <param name="allowfullscreen" value="true"> <param name="play" value="true"> </object> Az object elem jellemzői: Érték Leírás data URL Meghatározza az objektum forrásának URL-jét. ( és útvonal.) width képpont Meghatározza az ojektum szélességét a weboldalon. height képpont Meghatározza az objektum magasságát a weboldalon. name szöveg Meghatározza az objektum egyedi nevét. type MIME_type Meghatározza az adattovábbításhoz használt MIME-típust. usemap #map_name Képtérképet illeszt az objektumhoz. Meghatározza a kliens-oldali képtérkép nevét. form form_id Meghatározza, hogy az objektum melyik űrlaphoz tartozik. A (param) címképvel beállítható jellemzők: Érték Leírás quality low; autolow; autohigh; medium; high; best A megjelenítés minősége. A minőség növelése esetén növekszik a szaggatás mentes lejátszáshoz szükséges erőforrásigény. (Hálózat, számítógép, forrás állomány..) menu true; false False érték elrejti a lejátszást kezelő vezérlő elemeket. loop true; false Megadása esetén a videó/hang lejátszása után újra indul. play true; false A fájl betöltését követően megkezdődik a lejátszása. Scale Default; Noborder; Exactfit; Noscale bgcolor #színkód A háttérszín beállítása. AllowScriptAccess Always; SameDomain; never Meghatározza, hogy a kép miként illeszkedjen a rendelkezésre álló területhez. Legyen megnyújtva (torzítás), vagy a méretarány megtartása mellett lehetnek üres csíkok. Megadja, hogy a betöltött fájl tud kommunikálni a HTML oldallal, amelybe be van ágyazva. (Always= mindig; SameDomain=saját domai esetén; never=soha) pluginspage URL Megadja a lejátszáshoz szükséges plug-in (böngésző bővítmény) helyét. Base URL Báziskönyvtár megadása. wmode Window; Direct; opaque; Transparent; GPU Meghatározza, hogy a videó miként illeszkedjen a HTML elemek közé. Legyen-e átlátszó. Használjon hardveres gyorsítást. Tárolóelem létrehozása Az <object> címkét gyakran együtt használják az <embed> páros címkével, annak érdekében, hogy minden böngésző képes legyen megjeleníteni az objektumot.

29 Embed elem Angol eredete Hatás <embed> Embed Tárolóelem létrehozása egy külső alkalmazás vagy interaktív tartalomszámára.. 1. példa: <h2>youtube videó beágyazása object segítségével</h2> <object width="420" height="315"> <param name="movie" value=" version=3"> <param name="allowfullscreen" value="true"> <param name="allowscriptaccess" value="always"> <embed src=" version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"> </embed> </object> Az embed elem jellemzői: Érték Leírás src URL Meghatározza az objektum forrásának URL-jét. ( és útvonal.) width képpont Meghatározza az ojektum szélességét a weboldalon. height képpont Meghatározza az objektum magasságát a weboldalon. type MIME_type Meghatározza az adattovábbításhoz használt MIME-típust. HTML5 - Video elem Video elem Angol eredete Hatás <video> Video Mozgóképek beillesztése HTML5 weboldalba. <source> Source Meghatározza a videó forrásának URL-jét. ( és útvonal.) 1. példa: <h2>video elem használata</h2> <video width="320" height="240" controls> <source src="robi2.mp4" type="video/mp4"> <source src="robi1.avi" type="video/avi"> Az Ön böngészője nem támogatja még ezt a funkciót. Sebaj: <a href="robi1.avi"> a videót itt elérheti.</a> </video> HTML5 video elemben használható MIME típusok Formátum MIME típus Videó+ audió Támogatja MP4 video/mp4 H AAC Microsoft, Apple WebM video/webm VP8 + Vorbis Firefox, Google, Opera Ogg video/ogg Theora + Vorbis Firefox, Google, Opera

30 Lejátszásnál a mozgóképhez tartozó adatokat a video codec -ek, a hanghoz tartozó adatokat az audio codec - ek dekódolják és alakítják a kliens számítógép számára megjeleníthető formára. A codec -ek rendszerint az internetről ingyenesen letölthető a böngészőkbe beépülő alkalmazások. A videók rendszerint egyszerre tartalmaznak mozgóképet és hangot is. A két adatfolyamot egy container formátumban együtt tárolják. Igen sok video és audio kódolási és tömörítési eljárás terjedt el, és ezeknek kombinációjaként nagy számú container formátum létezik. Abban sosem lehetünk biztosak, hogy a felhasználó számítógépén mely codec -ek vannak telepítve, ezért lehetőség szerint több formátumban is célszerű a videó és hanganyagokat elérhetővé tenni. <h2>video elem használata 2</h2> <video width="320" height="240" controls > <source src="video_neve.ogg" type="video/ogg"> <source src=" video_neve.mp4" type="video/mp4"> <source src=" video_neve.webm" type="video/webm"> <object data=" video_neve.mp4" width="320" height="240"> <embed width="320" height="240" src=" video_neve.swf"> </object> Az Ön böngészője nem támogatja még ezt a funkciót. Sebaj: <a href="video_neve.avi"> a videót itt elérheti.</a> </video> Az video elem jellemzői: Érték Leírás src URL Meghatározza a videó forrásának URL-jét. ( és útvonal.) width képpont Meghatározza az ojektum szélességét a weboldalon. height képpont Meghatározza az objektum magasságát a weboldalon. controls controls Megadása esetén megjelennek a videó lejátszásához szükséges kezelőgombok. loop loop Megadása esetén a videó lejátszása a befejezést követően után újra indul. autoplay autoplay Megadása esetén a videó letöltése után automatikusan megkezdődik lejátszása. preload auto; metadata; none Auto érték esetén a videó letöltése automatikusan megkezdődik a HTML oldal betöltése után. A metadata csak a videó jellemzőinek letöltését eredményezi. poster URL Meghatározza a videó lejátszása előtt megjelenő képet. (címlapkép) muted muted Megadása esetén a hangot elnémítja. <h2>a video elem jellemzői 1</h2> <video src="video_neve.ogg" controls muted preload="none" poster="/kepek/video_1.jpg"> Az Ön böngészője nem támogatja még ezt a funkciót. Sebaj: <a href="video_neve.avi"> a videót itt elérheti.</a> </video> HTML5 - Audio elem Audióelem Angol eredete Hatás <audio> Audio Segítségével hanganyagokat illeszthetünk weboldalunkba. <source> Source Meghatározza a hangfájl forrásának URL-jét. ( és útvonal.) Használata hasonló a video elem használatához.

31 A HTML5 audio elemben használható MIME típusok Formátum MIME típus Audió Támogatja MP3 audio/mpeg AAC Microsoft, Apple WebM audio/wav Vorbis Firefox, Google, Opera, Microsoft, Apple Ogg audio/ogg Vorbis Firefox, Google, Opera <h2>audio elem használata</h2> <audio controls> <source src="zene.wav" type="audio/wav"> <source src="zene.ogg" type="audio/ogg"> <source src="zene.mp3" type="audio/mpeg"> Az Ön böngészője nem támogatja még ezt a funkciót. Sebaj: <a href="zene.wav"> a videót itt elérheti.</a> </audio> A audio elem jellemzői: Érték Leírás src URL Meghatározza a hanganyag forrásának URL-jét. ( és útvonal.) controls controls Megadása esetén megjelennek a hang lejátszásához szükséges kezelőgombok. loop loop Megadása esetén az audio fájl lejátszása a befejezést követően után újra indul. autoplay autoplay Megadása esetén az audio fájl letöltése után automatikusan megkezdődik lejátszása. preload auto; metadata; none Auto érték esetén az audio fájl letöltése automatikusan megkezdődik a HTML oldal betöltése után. A metadata csak a jellemzőinek letöltését eredményezi. muted muted Megadása esetén a hangot elnémítja. <h2>a video elem jellemzői 1</h2> <audio src="zene.ogg" controls autoplay loop> Az Ön böngészője nem támogatja még ezt a funkciót. Sebaj: <a href="zene.wav"> a fájt itt elérheti.</a> </audio> HTML oldalak szerkezete A HTML weboldalak szerkezetét két módon alakíthatjuk ki. Táblázatos elrendezéssel (table) Nehezen átlátható forráskódot eredményez. (Nehezen javítható, bővíthető, módosítható) A táblázatokat csak a teljes táblázat, és annak minden eleme betöltése után tudják a böngészők helyesen megjeleníteni. Lassú a megjelenítés. A táblázatok valódi célja az adatok rendezett formában történő megjelenítése. A táblázatos szerkezet a képernyő felolvasók dolgát is megnehezíti. (Celláról cellára ugrálna.) A táblázatos felépítés statikus szerkezetet eredményez, ami nem módosítható stíluslapokkal. Általános tároló elemekkel (div) és stíluslapokkal (css) Áttekinthető forráskódot eredményez Az egymás mellett található általános tároló elemek megjelenítésének sorrendje nem a képernyőn való helyzetüktől függ. A forráskód kialakításánál a hasznos tartalom előre helyezésével elérhetjük, hogy a felhasználó már tudja olvasni azt, miközben az oldal kevésbé fontos elemei még töltődnek. A tároló elemek helyzete és a tartalom megjelenítése stíluslapokkal módosítható, weboldalaink megjelenését stíluslapok segítségével gyorsan és látványosan megváltoztathatjuk. Akár a felhasználó is kiválaszthatja a neki leginkább tetsző megjelenítési formát.

32 A tároló elemekkel kialakított szerkezet dinamikusan illeszkedhet a képernyő felbontásához. Napjainkban már nem elegendő egy weblapot egy szabványos felbontáshoz optimalizálni. Fontos mobil eszközök kis képernyőkén és a egyre nagyobb felbontást lehetővé tévő megjelenítő eszközökön is jól mutasson. Lehetőség szerint egy nagy felbontású monitorral rendelkező látogatónak ne kelljen a képernyőt görgetni, miközben két oldalt széles nem használt csíkok éktelenkednek. DIV - Általános tárolóelem Az oldalak elrendezését általános tárolóelemek segytségével fogjuk kialakítani. A DIV elem Angol eredete Hatás <div> Division A weboldal egy logikailag összetartozó részének kijelölésére és blokkszínktű formázásra használhatjuk. Páros címke.. Az általános tároló elemek formázását stíluslapok segítségével szokás megoldani. A következő oldalakon azonban az egyszerűség (és a példa) kedvéért a style jellemzőt fogjuk erre a célra használni. Az egyes tárolóelemeket id (egyedi azonosító) jellemzőjük értékével azonosíthatjuk. Ha a weboldalon több tárolóelem class (osztály) jellemzőjének azonos értéket adunk, akkor az azonos nevű osztályba tartozó tárolóelemeket egyes tulajdonságai egy lépésbe beállíthatóak. Az id és class jellemzők értékeit használják a JavaScript-ek is az egyes elemek azonosítására. Az általános tárolóelemek egymásba ágyazhatók, és tartalmazhatnak a HTML oldalon megjeleníthető bármely elemet. Példa: <h2>div-ek használata.</h2> <div id="piros_1" style="backgroundcolor:#ff0000;height:200px;width:200px;float:l eft;"> Piros 1 <div id="kek_1" style="backgroundcolor:#0000ff;height:200px;width:200px;float:l eft;"> Kék 1 <div id="zold_1" style="backgroundcolor:#00ff00;height:100px;width:100px;float:l eft;"> Zold 1 Egyoszlopos elrendezés A weboldalunk fő szerkezeti elemei: Fejléc: Rendszerint az oldal vagy cég logóját és nevét tartalmazza. Esetleg reklámot. Az oldal bal felső sarkának kiemelt szerepe van, hiszen a felhasználók rendszerint ott kezdik az oldal olvasását. Menüsor: A legfontosabb navigációs elemek (menüpontok) gyűjtőhelye. Tartalom: A konkrét oldalon közreadott egyedi tartalom. Lábléc: Céginfó, jogi információk, az oldal készítőjének linkje a leggyakoribb elemei. A fenti elemeket egy tároló elemben helyezzük el. A tároló elem szélességének és magasságának megadásával meghatározzuk az oldal megjelenítésére használt terület méretét. A fő szerkezeti elemeknél, így már elegendő csupán a magasságot meghatározni. A style jellemzőben használható stílusdefiníciókról a CSS3 fejezetben részletesen lesz szó. <div id="tarolo" style="height:400px;width:400px;"> <div id="fejlec" style="background-color:#98fb98;height:50px;"> Webáruház neve és lógója <div id="menu" style="background-color:#6b8e23;height:30px;text-align:center;"> Termkek Vásárlás Kapcsolatok <div id="tartalom" style="background-color:#98fb98;height:260px;">

33 Az oldal tarlama <div id="lablec" style="background-color:#6b8e23;height:30px;text-align:center;"> Céginfó, jogi információk Kétoszlopos HTML elrendezés A weboldalunk fő szerkezeti elemei: Fejléc: Rendszerint az oldal vagy cég logóját és nevét tartalmazza. Esetleg reklámot. Az oldal bal felső sarkának kiemelt szerepe van, hiszen a felhasználók rendszerint ott kezdik az oldal olvasását. Menüsor: A legfontosabb navigációs elemek (menüpontok) gyűjtőhelye. Menüsáv: Itt tehetjük elérhetővé a webhely belső oldalait. Tartalom: A konkrét oldalon közreadott egyedi tartalom. Lábléc: Céginfó, jogi információk, az oldal készítőjének linkje a leggyakoribb elemei. A fenti elemeket egy tároló elemben helyezzük el. A tároló elem szélességének és magasságának megadásával meghatározzuk az oldal megjelenítésére használt terület méretét. A fő szerkezeti elemeknél, így már elegendő csupán a magasságot meghatározni. A menüsáv és a Tartalom most egymás mellé kerül. Ezt többféle képen elérhetjük. Példánknál a menüsávnál float:left; stílusdefiníció használva érjük el, hogy a következő tárolóelem esetünkben a tartalom vele egy sorba kerüljön. A style jellemzőben használható stílusdefiníciókról a CSS3 fejezetben részletesen lesz szó. <div id="tarolo" style="height:400px; width:400px;"> <div id="fejlec" style="background-color:#98fb98; height:50px;"> Webáruház neve és lógója <div id="menu" style="background-color:#6b8e23; height:30px; text-align:center;"> Termkek Vásárlás Kapcsolatok <div id="balmenu" style="background-color:#2e8b57; height:260px; width:100px; float:left;"> <b>kínálat</b><br>-pc<br>-laptop<br>-egér <div id="tartalom" style="background-color:#98fb98; height:260px;"> Az olda tarlama <div id="lablec" style="background-color:#6b8e23; height:30px;text-align:center;"> Céginfó, jogi információk HTML5 tartalomfüggő tárolóelemek Angol eredete Hatás <header > Header A weboldal fejléce. Páros címke.. <nav> Navigation A navigációs elemek (menüpontok) tárolóeleme. Páros címke.. <article> Article Független, önálló tartalmat jelöl. (Cikk, Hír, fórum hozzászólás, blog bejegyzés, megjegyzés) Páros címke.. <aside> Aside A fő tartalomhoz nem közvetlenül kapcsolódó információk megjelenítésére szolgáló oldalsáv. Páros címke..

34 <section> Section A weboldal tartalmi részének egy nagyobb szakasza, egy fejezete. Páros címke.. <footer> Footer Lábléc. Páros címke.. <div id="tarolo" style="height:400px;width:400px;"> <header id="fejlec" style="background-color:#98fb98;height:50px;"> Webáruház neve és lógója </header> <nav id="menu" style="background-color:#6b8e23;height:30px;text-align:center;"> Termkek Vásárlás Kapcsolatok </nav> <div id="balmenu" style="background-color:#2e8b57; height:260px; width:100px; float:left;"> <b>kínálat</b><br>-pc<br>-laptop<br>-egér <div id="tartalom" style="background-color:#98fb98;height:260px;"> Az olda tarlama <footer id="lablec" style="background-color:#6b8e23;height:30px;text-align:center;"> Céginfó, jogi információk </footer> Kétoszlopos HTML5 elrendezés Példánkban szereplő kód csupán annyiban tér el a kétoszlopos HTML elrendezésnél megismerttől, hogy a HTML5-ben bevezetett új elemeket használjuk a szerkezeti elemek megvalósításához. A HTML5 weboldalunk fő szerkezeti elemei: Fejléc: Rendszerint az oldal vagy cég logóját és nevét tartalmazza. Esetleg reklámot. Az oldal bal felső sarkának kiemelt szerepe van, hiszen a felhasználók rendszerint ott kezdik az oldal olvasását. Menüsor: A legfontosabb navigációs elemek (menüpontok) gyűjtőhelye. Menüsáv: Itt tehetjük elérhetővé a webhely belső oldalait. Tartalom: A konkrét oldalon közreadott egyedi tartalom. Lábléc: Céginfó, jogi információk, az oldal készítőjének linkje a leggyakoribb elemei. A fenti elemeket egy tároló elemben helyezzük el. A tároló elem szélességének és magasságának megadásával meghatározzuk az oldal megjelenítésére használt terület méretét. A fő szerkezeti elemeknél, így már elegendő csupán a magasságot meghatározni. A menüsáv és a Tartalom most egymás mellé kerül. Ezt többféle képen elérhetjük. Példánknál a menüsávnál float:left; stílusdefiníció használva érjük el, hogy a következő tárolóelem esetünkben a tartalom vele egy sorba kerüljön. A style jellemzőben használható stílusdefiníciókról a CSS3 fejezetben részletesen lesz szó. Nézzük meg a korábban tárgyalt kétoszlopos HTML5 elrendezést külső CSS használata esetén. A stílusdefiníciók nélkül már könnyen áttekinthető HTML kódhoz jutunk. A stíluslapok használatának előnyei: Több oldalas webhelyen csak egyszer kell megadni a stílusdefiníciókat. A több oldalas webhely esetén csak egy helyen kell módosítani egy jellemző értékét, és a változás minden oldalon megjelenik. (Egyébként minden oldalon külön, külön kellene a módosítást végrehajtani.) A CSS fájl cseréjével egy teljesen új külsőt adhatunk a webhely összes oldalának. A style jellemzők elhagyásával a kétoszlopos HTML elrendezés is hasonló képen néz ki. HTML5 Speciális tárolóelem ábrákhoz Angol eredete Hatás <figure> Figure Páros címke, amelybe több ábra is beágyazható. <figcaption> figure caption Páros címke. Az ábrá(k)hoz tartozó felírat (cím, képaláírás, leírás, magyarázat) adható meg segítségével. A <figcaption> közvetlen <figure> címke után vagy a </figure> előtt adható meg. Hasonlókép használjuk, mint a nyomtatott anyagokban (pl. a könyvek és folyóiratok) a képek, diagramok, vagy példakódok képaláírásainál megszoktuk.

35 A div vagy aside elemekkel hasonló módon kezeljük. Ha a fő tartalomhoz tartozó fontos információt adunk közre, akkor a <figure >, ha kevésbé fontos vagy a tartalomhoz csupán érintőlegesen kapcsolódó információkat, akkor az< aside > elemet használjuk. Példa 1: Egy kép képaláírással és forrásmegjelöléssel. <figure> <blockquote> <img src="i5_processzor_300.jpg" alt="az Intel P5 processzora"> </blockquote> <figcaption> 1. ábra Intel P5 processzora... <br> <cite> <a href=" Intel Corporation</a> </cite> </figcaption> </figure> Példa 2: Több kép képaláírással <figure style="text-align:center;"> <img src="i5_processzor_180.jpg" alt="az Intel P5 processzora"> <img src="i5_processzor_huto_180.jpg" alt="processzor hűtő"> <img src="memoria_modul_180.jpg" alt="memória modulok"> <figcaption> A kiválasztott alaplaphoz még egy processzort, egy processzor hűtőventilátort és memória modulokat is kell vásárolni. </figcaption> </figure> Példa 3: Kód képaláírással. Megjegyzés: az entitások használatánál a példakód plusz szóközöket tartalmaz. <figure> <figcaption> Ha HTML forráskódot jelenítünk meg, akkor a <code> < és ></code> karakterek helyett entitásukat használjuk: </figcaption> <p><code> & lt;a rel="license" href=" & gt; Creative Commons licenc & lt;/a& gt; </code></p> </figure> HTML5 címsor csoportok Angol eredete Hatás <hgroup> heading Speciális tároló elem, amely jelzi a különböző szintű címsorok összetartozását.

36 group Páros címke. Jelzi, hogy az alacsonyabb szintű címsor a magasabban megadott címhez tartozó alcímet tartalmazza és nem külön fejezet kezdetét jelöli. Csak a címsor elemek lehetnek benne! ( <h1>...<h6> ) Példa 2: Egy cikk címmel és alcímmel. <article> <header> <hgroup> <h1> Cím </h1> <h2> Alcím </h2> </hgroup> <p> <time datetime = " " > </time> </p> </header> <p> Tartalom </p> </article> HTML5 Speciális tárolóelem Angol eredete Hatás <details> Details Tartalmát a címére kattintva a felhasználó megjelenítheti vagy elrejtheti.páros címke. <summary> Summary Az elrejthető tartalom rövid összefoglalása, amely mindig látszik. Páros címke. A felhasználó az összefoglalásra kattintva rejtheti illetve jelenítheti meg a részletes tartalmat. Példa 1: Egy kép képaláírással és forrásmegjelöléssel. <details> <summary> A details elem tartalma elrejthető </summary> <p> A felhasználó az összefoglalásra kattintva rejtheti, illetve jelenítheti meg a részletes tartalmat.. </p> </details> Általános HTML jellemzők Globális HTML attribútumok (HTML Global Attributes) Érték Leírás accesskey Karakter Gyorsbillentyűt rendel az elemhez class Osztály azonosító Egy vagy több elem tartozhat egy osztályba. Ezek együtt (kezelhetők) formázhatók. dir lrt, rtl Megadja a szöveg irányát egy elememen belül id Egyedi azonosító Az adott elem azonosítására szolgál. (Két vagy több elemnél nem lehet azonos.) lang Nyelvkód Az elem tartalmának nyelvét adja. meg Pl...lang="hu".. style Stílusdefiníció Inline CSS stílus jellemzőket rendel az elemhez. Pl. style = "color: blue, textalign: center"..

37 TabIndex Szám Megadja az elemek bejárási sorrendjét. (1 az első.) title Szöveg Extra információkat rendel az elemhez. Példa: <html lang="hu"> <head> <title> Általános HTML jellemzők </title> <meta charset="utf-8"> <style>.kek {color: blue;} #zold {color: green;} #piros {color: red;} </style> </head> <p class="kek" lang="hu" dir="rtl" >Kék osztály</p> <p class="kek" id="piros">kék osztály, piros egyede.</p> <p class="kek" id="zold" style="color: purple">kék osztály, zöld egyede, lila stílusban.</p> <a href=" accesskey="i"><b>i</b>nformatika</a> <kbd>alt + i</kbd> vagy tananyagot. </html> Érték Leírás <kbd>shift + Alt + i</kbd> megnyitja az informatika contenteditable true false inherit Megadja, hogy egy elem tartalma szerkeszthető vagy sem./td> ContextMenu Menü azonosító Helyi menüt rendel az elemhez. A helyi menü jelenik meg, amikor a felhasználó az egér jobb billentyűjével kattint az elemen. draggable true false auto Megadja, hogy egy elem mozgatható vagy sem. dropzone copy move link Még egy nagy böngésző sem támogatja ( ) hidden hidden Meghatározza, hogy egy elem rejtett vagy látható. spellcheck true false Meghatározza, hogy az elemben működjön helyesírás ellenőrzés, vagy sem. Példa: <html lang="hu"> <head> <title> Általános HTML5 jellemzők </title> <meta charset="utf-8"> </head> <p hidden>ez nem fog látszani.</p> <p contenteditable="true">ezt lehet szerkeszteni.</p> <p contenteditable="false">ez nem szekeszthető.</p> <p draggable="true">ez mozgatható.</p> <p draggable="false">ez nem mozgatható.</p> <p contenteditable="true" spellcheck="true"> Írj be egy híbás szöveget!</p> </html> HTML események Ablak-események (A Body elem eseményei.) Érték Leírás onload script A script lefut a dokumentum letöltését követően. onunload script A script lefut, amikor a látogató elhagyja a dokumentumot.

38 Úrlap-események (A Form elem eseményei.) Érték Leírás onblur script A script akkor fut le, amikor az elem elveszíti a fókuszt. (Egy másik elem lesz aktív.) onchange script A script akkor fut le, amikor az elem megváltozik. onfocus script A script akkor fut le, amikor az elem megkapja a fokuszt. (Aktív lesz.) onreset script A script akkor fut le, amikor a form alaphelyzetbe áll. onselect script A script akkor fut le, amikor az elem aktív lesz. (Kiválasztják.) onsubmit script A script akkor fut le, amikor a form elküldésre kerül. Média-események Érték Leírás onabort script A script lefut egy esemény megszakításakor. (Kép letöltése.) Billentyűzet-események Érték Leírás onkeydown onkeypress onkeyup script A script akkor fut le, amikor egy billentyűt megnyomtak. script A script akkor fut le, amikor egy billentyűt megnyomtak és felengedték. script A script akkor fut le, amikor egy billentyűt felengedtek. Egér-események Érték Leírás onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup Érték szemléltetése script A script lefut az egér kattintásakor. script A script lefut az egér dupla kattintásakor. script A script akkor fut le, amikor az egér gombját lenyomták. script A script akkor fut le, amikor az egérmutatót az elem fölött mozgatják. script A script akkor fut le, amikor az egérmutató elhagyja az elemet. script A script akkor fut le, amikor az egérmutató az elem fölé ér. script A script akkor fut le, amikor az egér gombját felengedik. Képek beillesztése HTML dokumentumba Angol eredete Hatás <meter> Meter Egy a tartományon belüli érték, szemléltetésére használható. Páros címke. A nyitó és a záró címke közé az értéket célszerű beírni, mivel a funkciót nem támogató böngészők esetén (IE és a szabványkövető böngészők régebbi verziói) a címkékkel közrefogott tartalom jelenik meg. Meg kell adni a tartomány két szélső értékét a min és max jellemzőkkel. Valamint az aktuális értéket a value jellemzővel. Az opcionális jellemző title. ( tooltip ) Az érték megadható abszolút számként vagy százalékosan. Példa: <h2>a minimális és maximális értékek megadásával</h2>

39 60 : <meter value="60" min="0" max="100">a százból 60 pont</meter> 100 : <meter value="100" min="0" max="100">a százból 100 pont</meter> 12 : <meter value="12" min="0" max="100">a százból 12 pont</meter> 0 : <meter value="0" min="0" max="100">a százból 0 pont</meter> <h2>százalékos forma</h2> 80% : <meter value="0.8" title="az eredmény: 80%">80%</meter><br> 10% : <meter value="0.1" title="az eredmény: 10%">10%</meter><br> Folyamatok szemléltetése Angol eredete Hatás <progress> Progress Egy folyamat pillanatnyi állapotának szemléltetése. Páros címke. A nyitó és a záró címke közé az értéket célszerű beírni, mivel a funkciót nem támogató böngészők esetén (IE és a szabványkövető böngészők régebbi verziói) a címkékkel közrefogott tartalom jelenik meg. A < progress > címke esetén meg kell adni a maximális értéket a max és az aktuális értéket a value jellemzőkkel Példa: <h2>folyamatok pillanatny állapota</h2> 11% : <progress value="11" max="100">88%</progress><br> 88% : <progress value="88" max="100">88%</progress><br> 65% : <progress value="65" max="100">88%</progress> CSS3 stíluslapok készítése A stíluslapok készítése az alapoktól a CSS3 speciális lehetőségeinek használatáig. A honlapkészítés első állomásán, a HTML nyelv megismerésén már túljutottunk. A tartalom után jöhet a forma, honlapunk csinosítása. CSS (Cascading Style Sheet) Stíluslapok segítségével tehetjük tetszetőssé és áttekinthetővé weboldalainkat. A HTML5 fejezetben többször utaltunk arra, hogy weboldalak esetén fontos a tartalom és a forma szétválasztása. Ez teszi lehetővé, hogy: átlátható kódot készítsünk, egyszerűen megadhassuk a különböző eszközökön használható stílusinformációkat. (pl. más beállításokat használjunk nyomtatásnál és a képernyőn történő megjelenítésnél.) az esetleg több száz vagy akár több ezer weboldallal rendelkező webhely esetén is csupán egy helyen kelljen egy elemtípus megjelenítési formáját módosítani. Gyorsan és egyszerűen új ruhába öltöztethessük webhelyünk valamennyi oldalát. Az operációs rendszereknél, és más programoknál már megszokott témaválasztáshoz hasonlóan. Színkezelés A weboldalak tartalmának megjelenítése rendszerint a számítógépek monitorán történik. A monitorok és a napjainkban egyre inkább terjedőben lévő táblagépek, okos telefonok kijelzői is az additív (összeadó) színkeverést használja a különböző színek és színárnyalatok előállítására. Az additív modellben a három alapszín : piros (Red), zöld (Green), kék (Blue). Az alapszínek keverésével megjeleníthetjük az összes többi színt. Pl. azonos intenzitású piros és a zöld fény keverésével sárgához jutunk. Pl. piros + zöld = sárga piros + kék = lila HTML színkódok Weboldalakon az egyes HTML elemek színeit többféleképpen is megadhatjuk: 1. Megadható a választott szín angol neve. Pl. Red, Blue, Cyan, Coral, BlueViolet, HotPink, Green Megadható a 3 alapszín intenzitásának decimális értékeivel a következő formában: rgb( 169, 169, 169 ), rgb( R, G, B )

40 3. Megadható a 3 alapszín intenzitásának hexadecimális értékeivel a következő formában: #a9a9a9 / #RRGGBB, ahol az első két hexadecimális számjegy piros, a második kettő a zöld, az utolsó kettő pedig a kék szín intenzitását határozza meg. 4. Megadható a 3 alapszín intenzitásának százalékos értékével: rgb( R%, G%, B% ) / rgb( 50%, 50%, 50% ) HTML alapszínek A CSS 2 szabvány 16 alapszínt ismert, amelyekre stílusdeklarációkban angol nevük felhasználásával lehetett hivatkozni. A CSS 2.1 szabványban a színek száma eggyel nőtt. Bekerült a narancssárga. Mellette megjelent a teljes átlátszóság beállításának lehetősége: transparent. A 16 alapszín és kódjai Angol név Hexadecimális RGB kód Decimális RGB kód Fekete black # rgb(0,0,0) Gesztenyebarna maroon # rgb(128,0,0) Zöld green # rgb(0,128,0) Olajzöld olive # rgb(128,128,0) Sötétkék navy # rgb(0,0,128) Püspöklila purple # rgb(128,0,128) Pávakék teal # rgb(0,128,128) Szürke gray # rgb(128,128,128) Ezüst silver #C0C0C0 rgb(192,192,192) Piros red #FF0000 rgb(255,0,0) Világoszöld lime #00FF00 rgb(0,255,0) Sárga yellow #FFFF00 rgb(255,255,0) Kék blue #0000FF rgb(0,0,255) Világoslila fuchsia #FF00FF rgb(255,0,255) Akvamarinkék aqua #00FFFF rgb(0,255,255) Fehér white #FFFFFF rgb(255,255,255) * Narancssárga orange #FFA500 rgb(255,165,0) *A CSS 2.1 -től használható. Web biztos színek A színkódokat 3*8 biten megadva = színárnyalat megjelenítésére lenne lehetőség. Mivel: ennyit az emberi szem nem képes megkülönböztetni, az egyes megjelenítőknél amúgy is kisebb nagyobb különbség van a színek megjelenítése között, nem minden eszköz támogatja valamennyi ( ) színárnyalat megjelenítését, ezért célszerű önmérsékletet gyakorolni. Korábban a 216 db valamennyi böngésző és eszköz által ismert szín ("Web Safe Colors" ) használatát ajánlották, amely 40 db rendszerszínnel kiegészítve összesen 256 szín megkülönböztetését tette lehetővé. A technika ezt már meghaladta.

41 Web Safe Colors A CSS3 stílusdefiníciókban 147 színre angol nevük alapján is hivatkoztatunk. (17 alapszín plusz 130 szín). Angol nevük alapján használható CSS3 színek AliceBlue DarkTurquoise AntiqueWhite Aqua Aquamarine Azure Beige Bisque Black BlanchedAlmond Blue BlueViolet Brown BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGreen DarkKhaki DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkViolet DeepPink DeepSkyBlue DimGray DimGrey DodgerBlue FireBrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite Gold GoldenRod Gray Green GreenYellow HoneyDew HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan LightGoldenRodYellow LightGray LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSteelBlue LightYellow Lime LimeGreen Linen Magenta Maroon MediumAquaMarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip Átlátszóság (fedettség) Az opacity tulajdonság segítségévek megadható, hogy egy elem milyen mértékben legyen átlátszó. opacity:1 érték esetén az elem teljesen eltakarja az alatta lévőt. opacity:0 érték esetén az elem teljesen átlátszó. opacity:0.5 érték esetén az elem teljesen 50%-ban átlátszó. Átlátszóság beállítása: kijelölő {opacity:érték;} Példa: <style>... PeachPuff Peru Pink Plum PowderBlue Purple Red RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue SlateGray Snow SpringGreen SteelBlue Tan Teal Thistle Tomato Turquoise Violet Wheat White WhiteSmoke Yellow YellowGreen

42 #div1 { background-color:#0000cc; opacity:1; } #div2 { background-color:#00cc00; opacity:0.8; } #div3 { background-color:#cc0000; opacity:0.4; } #div4 { background-color:#cccc00; color:#000000; opacity:0.2; } </style>... <body > <div id="tarolo"> <div id="div1">div1 <div id="div2">div2 <div id="div3">div3 <div id="div4">div3 CSS stílusdeklaráció Egy stíluslapon a HTML elemek megjelenítésének módját meghatározó, stílusát leíró szabályokat soroljuk fel. Minden CSS szabály egy vagy több kijelölővel (szelektorral) kezdődik, ezt követi kapcsos zárójelek között a deklarációs szakasz (meghatározásblokk). kijelölő {meghatározásblokk} A stílusdeklaráció felépítése: a meghatározandó tulajdonság neve kettőspont tulajdonság értéke(i) pontos vessző A deklarációs szakasz több stílusdeklarációt (stílusmeghatározást) tartalmazhat egymástól pontos vesszővel elválasztva. kijelölő {tulajdonság1:érték1; tulajdonság2:érték2;} A stílusdeklaráció példa: p {color:blue; background-color:red;} kijelölő = p /* bekezdésekre vonatkozil */ 1. tulajdonság = color /* a szöveg színét állítjuk */ 1. érték = blue /* a szöveg színe kék lesz */ 2. tulajdonság = background-color /* a szöveg háttérszínét állítjuk */ 2. érték = red /* a szöveg piros kék lesz */ CSS megjegyzések A HTML dokumentumok készítésénél már megismert fejlesztőknek szóló emlékeztetők, megjegyzések a stíluslapokon is használhatók. Összetett webhelyek készítésekor érdemes is használni őket. A megjegyzések megadásának módja, szintaktikája eltér a HTML dokumentumban megismert formától. Stíluslapokon /* és */ jelek közé írjuk emlékeztetőinket. kijelölő {meghatározásblokk} /*Ez egy megjegyzés*/ A jól megírt megjegyzések lehetővé teszik, hogy az elkészült kód hónapokkal vagy akár évekkel később is áttekinthető legyen. Megkönnyíti több webfejlesztő közös munkáját is. Ha egy kódrészletet ideiglenesen kívánunk csupán eltávolítani egy stíluslapról, akkor azt célszerű megjegyzéssé alakítani. Így bármikor visszaalakítható.

43 CSS HTML példafeladat <html> <head> <title>my website</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <div id="container"> <div id="header"> <h1>my website</h1> <div id="content"> <div id="nav"> <h3 style="color: white;">navigation</h3> <ul> <li><a class="selected" href="">home</a></li> <li>about</li> <li>contact</li> </ul> <div id="main"> <h2>home page</h2> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. <div id="footer"> Copyright 2016 Jake the Snake </html> body { background-color: #eee; font-family: Helvetica, arial, sans-serif; } a { text-decoration: none; color: red; } h1, h2, h3 { margin: 0; } #container { background-color: white; width: 800px; margin-left: auto; margin-right: auto; } #header { background-color: #66ccff; color: white; text-align: center; padding: 10px; } #content { padding: 10px; }

44 #nav { width: 180px; float: left; } #nav ul { list-style-type: none; padding: 0; } #nav.selected { font-weight: bold; } #main { width: 600px; float: right; } #footer { clear: both; padding: 10px; background-color: #999999; color: white; text-align: right; } Projekt feladat