Web programozás jegyzet 0.1 verzió. Pál László. Sapientia EMTE, Csíkszereda
|
|
- Anna Rácz
- 8 évvel ezelőtt
- Látták:
Átírás
1 Web programozás jegyzet 0.1 verzió Pál László Sapientia EMTE, Csíkszereda 1
2 HTML alapok 1. A HTML nyelvtana A HTML jelölőnyelvben a megjelenítendő tartalomba címkéket (angolul tag=címke) helyezünk el, melyek megszabják, hogy a böngészők hogyan értelmezzék a megjelölt tartalmi részeket. A címkéket a < és > jelek közé kell zárnunk. Egy-egy utasítás hatását (néhány kivételtől eltekintve) a záró utasításpárja szünteti meg (</ >). A HTML utasítás a szabvány szerint lehet kisbetűs és nagybetűs is, de csupa kisbetűt célszerű használni. A címkének lehetnek jellemzői ( attribute=jellegzetes tulajdonság ) és a jellemzőknek értékei ( value=érték ): <címke jellemzı= érték > tartalom </címke> 2. A HTML oldal szerkezete Minden HTML oldal 3 fő részből áll: a) dokumentumtípus meghatározás b) fej c) törzs a) A dokumentumtípus meghatározás: A HTML kódot az alkalmazandó dokumentumtípus (DOCTYPE, vagy DTD) megadásával kezdjük. Ezzel informáljuk a böngészőprogramot, hogy milyen szabvány szerint készítettük a dokumentumot, hogy az megfelelő módon tudja megjeleníteni. Ha elhagyjuk a dokumentumtípus megadást azzal azt kockáztatjuk, hogy az oldal nem jelenik meg megfelelően a böngészőben. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>cím</title> </head> <body> Törzs 2
3 </body> </html> Ugyanez HTML 5-ben: <!doctype html> <html> <head> <title>cím</title> </head> <body> Törzs </body> </html> b) A fej (head=fej) az adott HTML-fájlra vonatkozó meta-adatokat tartalmazza. A metaadatok a fájlal kapcsolatos különféle jellemzők és utasítások tárolására szolgálnak. Néhány metaadatnak saját címkéje van ( pl. title=cím, link=kapocs, style=stílus ) a többiek a meta címke jellemzőjeként adhatók meg A fej HTML kódolása: <head> karakterkészlet megadása weblap címe külsı stíluslap csatolása beágyazott stílus </head> Karakterkészlet megadása (charset): Ahhoz, hogy a weblapunk a böngészőkben karakterhelyesen jelenjenek meg, meg kell adnunk, hogy annak szerkesztésekor milyen karakterkódolást használtunk. Az ISO a közép-kelet európai, így a magyar karakterkészletet is definiálja. Unicode a különböző írásrendszerek egységes kódolását és használatát leíró nemzetközi szabvány. <meta http-equiv= Content-type Content= text/html; charset=iso > <meta http-equiv= Content-type Content= text/html; charset=utf-8 > A weblap címének megadása: A cím tartalmazhat magyar ékezetes szavakat. A tartalmat jól kifejező cím segíti a keresők 3
4 helyes találatát. A cím a böngésző címsorában, ill. a keresők találatainak felsorolásában jelenik meg. Külső stíluslap csatolása: <link rel= stylesheet href= fajlnev.css > <!doctype html> <html> <head> <title>az elsı weblapom</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="fajlnev.css"/> </head> <body> Szép napot! </body> </html> 3. Alap HTML címkék A HTML elemeket általánosan két nagy kategóriára bonthatjuk, amelyek megfelelnek az elem által megjelenített tartalom és struktúra típusainak ezek a blokk szintű és az inline elemek. A blokk szintű (block level) elem egy felsőbb szintű elemet jelent, amely általában a dokumentum struktúráját jelzi. Ezek olyan elemek, amelyek egy új sort kezdenek, vagy elválasztanak valamit a korábbi tartalomtól. A leggyakoribb blokk szintű elemek a bekezdések (paragrafusok), listaelemek és táblázatok. Az inline (azaz soron belüli) elemek ezzel szemben azok az elemek, amelyeket a blokk szintű elemek tartalmaznak, és csak a dokumentum kis részeit fogják közre, nem teljes bekezdéseket vagy csoportokat. Egy inline elem nem fog új sort generálni a dokumentumban. Ezek azok az elemek, amelyek egy bekezdés szövegén belül találhatóak. A leggyakoribb inline elemek a hiperhivatkozások, a kiemelt szavak vagy mondatok és a rövid idézetek. a) Bekezdés (paragraph) <p> </p> A <p> tag segítségével a szöveget bekezdésekre oszthatjuk. Az adott bekezdés tartalmát a <p> és </p> elemek közé kell tenni. <p>ez alapértelmezett (balra igazított) bekezdés.</p> <p>ez pedig egy újabb bekezdés </p> 4
5 A böngészők a bekezdéseket is blokkszintű elemként kezelik, azaz külön sorban kezdődnek és az utánuk következő elem automatikusan új sorba kerül. Szövegbehúzás nincsen, két bekezdés között egy üres sort hagy a böngésző. b) Sortörés <br> vagy <br/> Amennyiben a szövegen belül egy sortörést szeretnénk elhelyezni, a <br> elemet kell használnunk. Ez is egy olyan tag, amelynek nincs záró párja. Ez az elsı sor<br>ez pedig a második c) Címsor (heading) <h1> </h1>, stb. A címsorok (heading) az oldalak logikai felosztását teszik lehetővé. Például h1 az oldal címe, h2 egy alcím, h3 egy mélyebb szintű alcím és így tovább. A HTML oldalak esetén 6 címsort használhatunk. <h1>1-es címsor </h1> <h2>2-es címsor </h2> <h3>3-as címsor </h3> <h4>4-es címsor </h4> <h5>5-ös címsor </h5> <h6>6-os címsor </h6> Egy címsor a HTML szerint blokkszintű elem, azaz külön sorban kezdődik és az utána következő elem automatikusan új sorba kerül. A böngészők alapértelmezett beállítása szerint félkövér betűvel van szedve, a betűméret a h1-nél a legnagyobb, majd a szám növekedésével ( h2, h3, ) egyre kisebb. Az ettől eltérő megjelenítést CSS-el kell létrehozni. d) Vízszintes vonal (horizontal line) <hr> A dokumentum további tagolását teszi lehetővé. Ez az elsı sor<hr>ez pedig a második 5
6 e) Megjegyzések a kódban A megjegyzés címke <!--.--> által befoglalt rész a forráskódban benne marad, de a böngésző nem jeleníti meg, nem veszi figyelembe. <!-- Ez itt egy szöveg, amely nem jelenik meg a böngészıben--> Másik alkalmazása a megjegyzésnek, ha ideiglenesen ki akarunk hagyni részeket a kódolásból. A megjegyzés címkében foglalt rész így olyan, mintha ott sem lenne, de nem kell törölni, és bármikor ismét felhasználható vagy ismét figyelmen kívül hagyható, ha a megjegyzést kivesszük a kódolásból vagy újból beírjuk. 4. Listák használata <ol><ul><li> A HTML nyelv lehetőséget ad arra, hogy különböző listákat (felsorolás, sorszámozott, meghatározás) hozzunk létre. a) Egyszerű felsoroláslista (unordered list) <ul> </ul> Egyszerű felsorolás esetén az <ul> és </ul> tagek közé kell elhelyeznünk a listaelemeket, amelyeket az <li> (list item) címkék vezetnek. <ul> <li>kenyér</li> <li>kávé</li> <li>tej</li> <li>vaj</li> </ul> Eredmény: kenyér kávé tej vaj Megjegyzés: a CSS-ben lecserélhetjük a pontokat néhány más beépített típusra. b) Sorszámozott lista (ordered list) <ol> </ol> 6
7 Sorszámozott lista esetén az <ol> és </ol> tagek közé kell elhelyeznünk a listaelemeket. <ol> <li>elsı</li> <li>második </li> <li>harmadik </li> </ol> Eredmény: 1. Első 2. Második 3. Harmadik A rendezett listákat többféle számozással és alfabetikus rendszerrel is jelölhetjük. Az alapértelmezett jelölés a böngészőkben a decimális számozás, de további lehetőségek is vannak: Betűk o o o ASCII kisbetűk (a, b, c ) ASCII nagybetűk (A, B, C ). Klasszikus kis görög betűk: (?, ß,? ) Számok o Decimális számok (1, 2, 3 ) o Decimális számok nullával kiegészítve (01, 02, 03 ) o o o o Kisbetűs római számok (i, ii, iii ) Nagybetűs római számok (I, II, III ) Tradicionális grúz számozás (an, ban, gan ) Tradicionális örmény számozás (mek, yerku, yerek ) A lista stílusát ebben az esetben is CSS-sel változtathatod meg, ha szükséges. Listák egymásba is ágyazhatók, pl. az egyes listaelemekbe újabb al-listákat helyezhetünk. Számozott és számozatlan listák is egymásba foglalhatók. <ol> <li>kenyér <ol> <li>fehér kenyér</li> <li>barna kenyér</li> </ol> </li> 7
8 <li>tej <ol> <li>zsíros tej</li> <li>zsírszegény tej</li> </ol> </li> <li>vaj <ol> <li> sózott vaj</li> <li> nem sózott vaj</li> <li> margarin</li> </ol> </li> </ol> c) Meghatározás (vagy definíciós) lista (definition list) <dl><dt><dd> Meghatározás lista esetén az <dl> és </dl> tagek közé kell elhelyeznünk a listaelemeket, amelyek a fogalom megadásából (<dt> tag vezeti be) és a magyarázatából (<dd> tag vezeti be) állnak. Egy egyszerű definíciós lista a kifejezésekkel és a definíciókkal így néz ki: <dl> <dt>kifejezés</dt> <dd>a kifejezés definíciója</dd> <dt>kifejezés</dt> <dd>a kifejezés definíciója</dd> <dt>kifejezés</dt> <dd>a kifejezés definíciója</dd> </dl> Ez a következőképpen jelenik meg: Kifejezés A kifejezés definíciója Kifejezés A kifejezés definíciója Kifejezés A kifejezés definíciója 8
9 5. Táblázatok használata <table> </table> Hosszú időn keresztül a táblázatok a weboldalak formázásának egyik fő eszközei voltak, de ennek az időnek a CSS elterjedése véget vetett. Táblázatokat a <table> tag segítségével lehet létrehozni. A vízszintes sorokat egyenként a <tr> </tr> páros címke (table row), a cellákban lévő adatokat egyenként a <td> </td> (table data), páros címke definiálja. A tábla cellái szöveget, képet, bekezdést, listát, űrlapokat, újabb táblázatokat is tartalmazhatnak. <table border="1"> <tr> <td>1. sor, 1. cella</td> <td>1. sor, 2. cella </td> </tr> <tr> <td>2. sor, 1. cella </td> <td>2. sor, 2. cella </td> </tr> </table> Eredmény: Fontosabb más tábla elemek: o <th> - ez az elem jelöli a táblázat oszlopainak a fejlécét o <caption> - ezzel az elemmel adhatsz egy címet a táblázat adatainak <table border="1"> <caption>ez egy táblázat</caption> <tr> <th>1.fejléc</th> <th>2.fejléc </th> </tr> <tr> 9
10 <td>1. sor, 1. cella</td> <td>1. sor, 2. cella </td> </tr> <tr> <td>2. sor, 1. cella </td> <td>2. sor, 2. cella </td> </tr> </table> Eredmény: Cellák egyesítése a colspan és rowspan attribútumok segítségével: <table border="1"> <tr> <th>név</th> <th colspan="2">telefon</th> </tr> <tr> <td>bill Gates</td> <td> </td> <td> </td> </tr> </table> Eredmény: <table border="1"> <tr> <th>név</th> <td>bill Gates</td> </tr> <tr> <th rowspan="2">telefon</th> 10
11 <td> </td> </tr> <tr> <td> </td> </tr> </table> Eredmény: Nagyméretű táblázatoknál az áttekinthetőséget segítik a thead, tbody, tfoot címkék. Ebben az esetben a táblázat formázása is könnyebb CSS-ben. Thead táblázatfej Tbody táblázattörzs Tfoot táblázat lábléce <table border="1"> <thead> <tr> <th>month</th> <th>savings</th> </tr> </thead> <tfoot> <tr> <td>sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>january</td> <td>$100</td> </tr> <tr> <td>february</td> <td>$80</td> </tr> 11
12 </tbody> </table> 6. Hivatkozások (Linkek) <a> </a> A hiperhivatkozásokkal (röviden link) hozhatunk létre kapcsolatot a különböző oldalak (objektumok) között. A böngészők a linkeket általában aláhúzással, illetve eltérő színnel jelölik. Oldalon belüli hivatkozásokat is létrehozhatunk, az ott elhelyezett "könyvjelzőre". Az <a> (anchor = horgony) címke paraméterei: o href webcím (URL), itt kell megadnunk a hivatkozás webcímét. o Szintaxis: <a href="url">szöveg, kép</a> o target A célkeret neve, ahova az oldalt be akarjuk tölteni. o Értékei: _blank, _self, _top, _parent o name nevet adhatunk a hivatkozásnak, így egy "könyvjelzőt" hozhatunk létre. o Szintaxis: <a name="cimke">szöveg</a> o Hivatkozás szintaxisa egy könyvjelzőre: <a href="#cimke">szöveg</a> a) Egy másik webhelyre hivatkozás esetén a kódolás: <a href= URI >szöveg és/vagy kép</a> <a href=" Sapientia honlapja</a> b) Azonos webhelyen belüli másik weblapra hivatkozás esetén: <a href= fajlnev.html >szöveg és/vagy kép</a> Alapértelmezetten a hivatkozott weboldal tetejére történik az ugrás. c) Ha az oldalon belülre, egy kiválasztott részhez kívánunk ugrani, akkor a kiválasztott részhez egy névvel ellátott horgonyt ( name jellemzővel ellátott a címkét ) kell kódolni: <a name="elol">szöveg</a> <a href="#elol"> Ugrás az oldal elejére</a> 7. Képek beillesztése a weboldalra 12
13 Állóképet az <img> tag segítségével helyezhetünk el az oldalon. Használható képformátumok: GIF, JPG, PNG. A kép inline elem (elhelyezkedése folyamatosan, az előtte lévő elemet követően történik, ill. a következő elem folytatólagosan követi), alapértelmezetten nincsen kerete. Ha HTML-ben önállóan kívánjuk pozícionálni, akkor vagy új paragrafus elembe, vagy egyéb tároló elembe kell helyezni. Az <img> tag fontosabb paraméterei: o src - itt adhatjuk meg a kép webcímét (kötelező jellemző) o alt - képet helyettesítő szöveges információ. Csak akkor látszódik, ha a kép nem jelenik meg ( nem töltődik le, nem érhető el, stb. ), o width - a kép szélessége képpontokban o height - a kép magassága képpontokban. Példák: <p>ez a kép <img src="logo.jpg"/> a Sapientia logoja.</p> <p>ez a kép <img src="logo2.jpg" alt= Sapientia logo /> a Sapientia logoja.</p> <p>ez a kép <img src="logo.jpg" height="50px"/> a Sapientia logoja.</p> 8. Logikai (Tartalmi) formázás A HTML címkék egy csoportja, melyeknek korábban a formázásban volt szerepe, a CSS alkalmazása óta olyan módon használatos, hogy bár a megjelenítésre is hatnak, tartalmi okok miatt használják őket, és a végső formázást továbbra is CSS-el lehet előállítani. a) Rövid idézet: <q> </q> <p>a világ egyik legismertebb idézete a Hamlet-ból a <q>lenni, vagy nem lenni, ez itt a kérdés.</q></p> b) Hosszabb idézet: <blockquote> </blockquote> A böngészők idézőjel nélkül, mindkét oldali behúzással, előtte és utána térközzel, blokkszintű elemként jelenítik meg a idézetblokkot. <blockquote> Ez egy hosszú idézet. Ez egy hosszú idézet. Ez egy hosszú idézet Ez egy hosszú idézet. Ez egy hosszú idézet. Ez egy hosszú idézet. Ez egy hosszú idézet. Ez egy hosszú idézet. Ez egy hosszú idézet. Ez egy hosszú idézet. Ez egy hosszú idézet. Ez egy hosszú idézet. Ez egy hosszú idézet </blockquote> c) Dőltbetűs megjelenítés: <i> </i> 13
14 <p><i>ez egy dılt betős szöveg</i></p> d) Címhivatkozás: <cite> </cite> Nem szerzőre, hanem műre - könyvre, újságra, versre, dalra, színdarabra, másik forrásra - lehet így hivatkozni. <p>a világ egyik legismertebb idézete a <cite>hamlet</cite>-ból a <q>lenni, vagy nem lenni, ez itt a kérdés.</q></p> e) Kulcsszó kiemelés: <b> </b> A böngészők alapértelmezetten félkövér betűt használnak ebben az esetben. <p>a digitális <b>videokamerák</b> egyre növekvı hányadban a Full HD felbontást alkalmazzák.</p> f) Tartalmi kiemelés, kihangsúlyozás: <strong> </strong> ( strong= erős kiemelés ) és <em> </em> ( emphasis=hangsúly) A böngészők a strong esetében félkövér betűkkel, az em esetén dőltbetűvel jelenítik meg a jelölt szavakat. <p>a medencébe ugrálni veszélyes és <strong>szigorúan tilos!</strong></p> g) Előre formázott szöveg: <pre> </pre> A közéjük zárt szöveg pontosan annyi szóközzel, pontosan annyi sorban és olyan állapotban fog a dokumentumban megjelenni, mint ahogy azt a HTML fájl tartalmazza. <pre> Este van, este van ki-ki nyúgalomba! Feketén bólintgat az eperfa lombja, zúg az éji bogár, nekimegy a falnak, nagyot koppan akkor, azután elhallgat. </pre> Írta: Arany János 9. Különleges karakterek (karakter entitások) 14
15 A HTML dokumentum tartalmának kialakítása során a foglalt karakterek ill. a billentyűzetről nem, vagy nehezen elérhető különleges karakterek esetében un. karakter entitásokat (character entity) kell alkalmazni, ami az adott karakter/szimbólum/jel kódolt megadását jelenti. Ilyen foglalt karakterek például azok amellyel tagolunk egy weboldalt. Ilyen a kisebb mint jel: <. Nagyobb mint jel: >, idézőjel, & és de előfordulhatnak más karakterek is amit valamiért szeretnénk különleges karakterként megadni. Billentyűzetről nem (vagy nehezen) bevihető különleges karakterek: görög betűk, pénznemek (euro, yen, font, cent) matematikai szimbólumok (mínusz, végtelen, gyök, hatványkitevő, összesen, közel egyenlő, azonos), stb. A különleges karaktereket a & karakter vezeti be, és ; karakter zárja. A különleges karaktereknek van egy kódjuk, ami egy szám. A legtöbbnek azonban neve is van. A & és a ; karakterek közzé ezt a kódot vagy nevet kell írnunk. karakter entitás szám entitás név angol megnevezés < < < ( less-than ) > > > ( greater-than ) " " ( quotation mark ) & ' & ( ampersand ) ( copyright ) ( registered trademark ) ( trademark ) ( degree ) ( euro ) ( cent ) ( non-breaking space ) Megjegyzés: a nem törhető szóköznek (non-breaking space) nincsen megjelenési formája - az a funkciója, hogy több szóból álló kifejezés/információ esetén a szavak közé helyezve megakadályozza azt, hogy a sor végén a böngésző a kifejezés/információ közben törhesse meg a sort, hanem egy sorban, sortörés nélkül tartja egyben azt A bekezdést <p> és </p> tagek közé kell írni. 15
16 Stíluslapok használata (CSS- Cascading Style Sheets) 1. Bevezető A CSS az angol Cascading Style Sheets kifejezés rövidítése, jelentése rangsorolt stíluslapok. A stíluslapot egy szöveges fájlban kell megírni, amit.css kiterjesztéssel kell elmenteni. A stíluslap nem más, mint kijelölők (selector) és meghatározásblokkok (declaration) felsorolása. A meghatározás két részből áll: tulajdonságból (property) és értékből (value). kijelölı { tulajdonság1: érték1; tulajdonság2: érték2; tulajdonság3: érték3;... A kijelölő egy címkét jelöl ki a HTML dokumentumban, és erre a kijelölt címkére vonatkozik a formázás. h1 { color: red; a) Mértékegységek Méretek megadásakor számos mértékegység áll rendelkezésünkre, beszélhetünk abszolút és relatív értékekről. A mértékegységet mindig közvetlenül a szám után kell írnunk, minden elválasztó nélkül. Ha nem egész számot szeretnénk használni, akkor tizedespontot kell használnunk. a.1. Relatív mértékegységek: px, em, ex és a százalék px: A pixelben, azaz képpontban megadott értékek a megjelenítő egységtől függenek, általában egy konkrét képpont méretét jelölik em: Ez a mértékegység az adott elemnél (vagy szülő eleménél) felhasznált betűtípus betűméretéhez viszonyított értéket jelenti. Amennyiben a dokumentumhierarchia legfelső elemének betűmérete is ebben a mértékegységben van megadva, úgy a legfelső elem betűmérete az alapértelmezett font-size kiindulási értéke. Alapértelmezett esetben, ha a dokumentum gyökerében 16
17 használjuk ezt a méretet, 16 pixelt szokott jelenteni (böngésző beállításoktól függően). Egy lehetséges érték például az 1.2em. ex: Az ex szintén egy relatív értéket jelöl, és hasonlít az em-hez, azzal a kivétellel, hogy ez nem az adott betűkészlet magasságához viszonyított méretet, hanem a betűkészlet kis x betű magasságát jelöli (bár azoknál a betűkészleteknél is definiálva van, ahol nem létezik x betű). Általában a böngészők az értékét egyszerűen az em felének veszik, így alapesetben általában 8 pixelnyi méretet jelöl. Százalék: Mindig relatív értéket képeznek valamely más értékhez viszonyítva, a kérdés csak az, hogy éppen milyen értéket vesznek alapul. Ez általában a leglogikusabb érték, de hogy egyértelmű legyen, minden tulajdonságnál, ahol használhatunk százalékos megadást, definiálva van, hogy mihez képest értendő. Egy lehetséges értéke az 50%. a.2. Abszolút mértékegységek Az abszolút mértékegységek neve onnan ered, hogy elvileg minden esetben a szemlélő számára ugyanakkora méretet jelentenek. Az mm a milliméter rövidítése, egy példa a használatára: 10mm. Az in az inch (=col, =hüvelyk) méretet jelöli, azaz 25.4 millimétert. Egy lehetséges megadása: 2in. A cm a centimétert takarja, mely mint köztudott, 10 mm-ert takar. A megadása nem tér el a korábbiaktól: 1cm. Most jönnek az érdekesebb mértékegységek, ezek közül az egyik a pt, mely a "pont" rövidítése. A pont tipográfiai mértékegység, egy pont 1/72 hüvelyket jelöl. Gyakran keverik össze a pixellel, pedig nem sok közük van egymáshoz. Egy példa a használatára: 16pt. b) Színek használata Több helyen is megadhatunk színeket tulajdonságként (háttérszín, szöveg színe, stb.). Alapvetően kétféleképpen: vagy a szín nevével, vagy pedig a 3 komponensével RGB (vörös, zöld, kék) formában. A használható 16 kulcsszó (a Windows VGA 16 színei közül): aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, és yellow. Az RGB megadás négyféleképpen is történhet, ebből az első két lehetőség hexadecimális, míg a továbbiak decimális és százalékos módok. 17
18 Az #rrggbb megadásnál az rr, gg és bb értékek hexadecimálisan, 00 és FF között adják meg az adott szín erősségét. A 00 a legsötétebb, a FF pedig a legvilágosabb. A hexadecimális számoknál a 9 feletti értékeket jelképező betűket mind kisbetűvel, mind nagybetűvel megadhatjuk. Pár példa: fekete: # piros: #FF0000 zöld: #00FF00 kék: #0000FF fehér: #FFFFFF Az #rgb megadásnál az előzőhöz hasonlóan, de csak egy számjegyes hexadecimális számokkal adhatjuk meg a színt. Az #123 megfelel az # színnek. Az előző példák ezzel a megadási móddal: fekete: #000 piros: #F00 zöld: #0F0 kék: #00F fehér: #FFF Az első megadáshoz hasonlóan, de decimális számokkal is meghatározhatjuk a komponensek értékeit, szintén 0 és 255 közötti értékekkel. Ekkor az rgb(r,g,b) formátumot használhatjuk. Maradva a példáknál: fekete: rgb(0,0,0) piros: rgb(255,0,0) zöld: rgb(0,255,0) kék: rgb(0,0,255) fehér: rgb(255,255,255) Amennyiben százalékosan ismerjük a szín komponenseit, erre is lehetőségünk van. Ekkor a 0% éppen nullát, a 100% pedig 255-öt jelent. A százalék jelet közvetlenül a szám után kell írni. A használandó formátum az előzőhöz hasonló: rgb(r%,g%,b%). Maradva a példáknál: fekete: rgb(0%,0%,0%) piros: rgb(100%,0%,0%) zöld: rgb(0%,100%,0%) kék: rgb(0%,0%,100%) fehér: rgb(100%,100%,100%) 2. Stíluslap beágyazása HTML dokumentumba 18
19 Ahhoz hogy egy stíluslap hatással legyen egy HTML dokumentumra, össze kell kötni őket. Ezt úgy tehetjük meg, hogy a fejrészbe (<head>...</head>) beírjuk a következő sort: <head> <link href="stiluslapneve.css" rel="stylesheet" type="text/css"> </head> 3. Kijelölők (szelektorok) használata a) Elem kijelölők (Type selector) A összes HTML elemet ki lehet választani szelektorokkal. A weblap összes azonos elemére vonatkoznak. Ebben az esetben csak annyi a dolgunk, hogy a kiválasztani kívánt elem nevét használjuk szelektornak. h1{ color: red; b{ color: #f8f8f8; <h1>ez egy piros színő cím</h1> <b>ez egy világos szürke színő, félkövér szöveg </b> b) Csoport kijelölés (Group of selectors) Több elemhez ugyanazt a stílust rendeli. A kijelölt elemek vesszővel és üres betűközzel elválasztva sorolandók fel h1, h2 { meghatározás(ok) kódolás a legnagyobb és második legnagyobb címhez rendel azonos megjelenítést. c) Azonosító kijelölők (ID selector) 19
20 Az id attribútum arra való, hogy egyértelműen azonosítson egy címkét, ezért két id ugyanolyan értékkel nem fordulhat elő egy oldalon belül. Ilyenkor egyedi, "személyreszabott" tulajdonságokkal láthatjuk el az elemeket. HTML attribútuma az id, CSS szelektora pedig a # (kettőskereszt) jel. Így kell megadni a HTML kódban: <h1 id="piros">piros színő címsor</h1> <h1 id="kek">kék színő címsor</h1> A stíluslapban pedig így tudunk bizonyos nevű id-ra stílust alkalmazni: #piros { color: red; #kek { color: blue; d) Származtatott kijelölők (descendant selector) Néha környezetfüggő kijelölőknek is fordítják őket egy id jellemzővel definiált szakaszon belüli elem-kijelölést végeznek. Ha a HTML oldal például két szakaszból áll, és az egyes szakaszokban lévő bekezdésekhez szakaszonként eltérő megjelenítést tervezünk, akkor a HTML oldal kódolása: <div id= szak1 > <p>..</p> <p>..</p> </div> <div id= szak2 > <p>..</p> <p>..</p> </div> CSS-ben az egyes szakaszok bekezdéseihez a megjelenítések kódolása: #szak1 p { meghatározás(ok) #szak2 p { más meghatározás(ok) Az azonosító kijelölőt tehát egy elemkijelölő követ, köztük egy üres betűköz van e) Osztály kijelölők (Class selector) 20
21 Lehetőségünk van több elemnek egyszerre megadni tulajdonságokat ezzel a módszerrel. Itt meg kell adni a HTML-ben minden egyes általunk egyformán formázni kívánt elemnek a class attribútumot. h1.szin{ color: red; Nem csak azonos, hanem különböző címkékhez ( pl. h1, p, blockquote, stb. ) is rendelhetők közös osztályok:.szin{ color: #f8f8f8; <h1 class="szin">szürke színő címsor</h1> <b class="szin">szürke színő kiemelt szöveg</b> <p class="szin">szürke színő bekezdés</p> A weboldal egy része stílusának kijelöléséhez a kijelölők, azonosítók és osztályok kombinációja is használható. Pl.: az alábbi CSS kódolás #header p.stilus1 { meghatározás(ok) csak a weblap fejléc szakaszában lévő bekezdések közül a stilus1 osztályba tartozókhoz rendeli a meghatározás(ok)ban definiált megjelenítést. f) Ál-osztály ( látszólagos osztály, pseudo-osztály ) kijelölők ( pseudo-class/element ) A hivatkozásokra és az első sorra/első betűre vonatkoznak. Az állapotok kijelölései ( a sorrend kötött, az alábbiak szerinti ): a:link { meghatározás(ok) ( link=kapocs, hivatkozás - itt: még nem látogatott ) a:visited { meghatározás(ok) ( visited=felkeresve, látogatva ) a:hover { meghatározás(ok) ( hover=lebeg itt: a kurzor felette van ) Természetesen származtatott kijelöléssel az ál-osztály kijelölése pontosítható/szűkíthető, pl.: #nav a:link, #nav a:visited, stb. A hivatkozások azért ál-osztályok, mert állapotuk nem a HTML kódtól, hanem a weboldal látogatójának tevékenységétől függ, és egyidejűleg két állapotban is lehetnek ( pl. már egyszer rákattintottak, majd később újból felé állnak a kurzorral ). 21
22 Blokkszintű elemek első soraira és/vagy első betűire definiálható külön stílus. Pl. ha minden bekezdés első sorát jelöljük ki: p:first-letter { meghatározás(ok) Minden bekezdés első betűje esetén ( iniciálé kialakítása! ): p:first-line { meghatározás(ok) 4. Weboldal hátterének beállítása Tulajdonság Leírás Lehetséges értékek background-color Egy elem háttérszínét adja meg color-rgb color-hex color-name transparent background-image Háttérképet állít be. url(url) background-repeat Beállítja, hogy a háttérkép vízszintesen, függőlegesen, mindkét módon, vagy sehogy se ismétlődjön. background-attachment Beállítja, hogy a háttérkép fixen maradjon-e az oldal görgetésekor, vagy sem. background Rövidítő tulajdonság az összes eddigi tulajdonság egyidejű megadásához. body { background-color: #4AF24F; h1 { background-color: #F55C54; none repeat repeat-x repeat-y no-repeat scroll fixed background-color background-image background-repeat background-attachment background-position h2 { background-color: maroon; 22
23 5. Szöveg formázása Tulajdonság Leírás Lehetséges értékek color Szöveg színének megadása. color-rgb color-hex color-name text-align text-decoration Szövegigazítás: bal, jobb, közép, sorkizárt. Aláhúzást, felülhúzást, áthúzást, vagy villogást állít be a szövegre. 23 left right center justify none underline overline line-through blink text-indent Bekezdés első sorának beljebb kezdése. length % line-height Sorközök megadására szolgál. normal number length % font-family font-style A használandó betűcsaládról ad prioritásos listát: Ha az első megadott font nem található, akkor próbálkozik a másodikkal és így tovább. Dőlt betűs szöveg megjelenítését teszi lehetővé. Betűcsalád neve, pl: Arial, "Times New Roman", Verdana; Vagy: általános típus: serif sans-serif cursive fantasy monospace normal italic oblique font-size Szöveg méretét lehet megadni. xx-small x-small small medium large x-large xx-large pt px smaller
24 font-style Dőlt betűs szöveg megjelenítését teszi lehetővé. larger % em normal italic oblique Megjegyzés: A font-size tulajdonság értékéhez csak ezeket az értékeket ajánlott megadni: %, em, smaller, larger. Ugyanis ezek az értékek a szülő elem betűméretéhez képest relatívan adják meg a betűméretet. Példák: 1. body { font-size: 200%; p.xxsmall { font-size: xx-small; <p>normál méret (örökli a body elem méretét)</p> <p class="xxsmall">xx-small betőméret(abszolut méret, nincs öröklés) </p> 2..smaller { font-size: smaller;.larger { font-size: larger;.em { font-size: 2em; <h1>alapértelmezett nagyságú h1-es címsor</h1> <p>alapértelmezett nagyságú betőméret.</p> <h1 class="smaller">smaller h1</h1> 24
25 <h1 class="larger">larger h1</h1> <p class="smaller">smaller p</p> Gyakran van szükségünk arra, hogy csak bizonyos szavak, szövegrészeket emeljünk ki, színezzünk át stb. Az ilyen formázandó szövegrészek kijelölésére kell használni a span tagot. Ehhez a címkéhez mindig adjuk meg a class értéket, hiszen így fogjuk tudni később elérni a stíluslapból. span.voros { color: red; <p>a szín egy érzet, amely az <span class="voros">agy reakciója</span> a fényre</p> 6. Linkek díszítése stíluslappal A linkek esetén, a különböző állapotokra különböző stílusokat alkalmazhatunk. A link négy állapota: o :link - A még meg nem látogatott linkek o :visited - A már meglátogatott link o :hover - Azt a linket választja ki, amelyik felett éppen áll az egér o :active - Azt linket választja ki, amelyiken állva az egérrel a felhasználó lenyomta az egérgombot, de még nem engedte fel. Nem kötelező mind a négy állapotra külön stílust megadni. Azonban ha megadjuk őket, akkor pontosan a fenti példában látható sorrendben alkalmazzuk őket. a:link { text-decoration: none; a:visited { text-decoration: line-through; a:hover { 25
26 color: orange; a:active { color: lime; 7. Listák formázása stíluslappal Tulajdonság Leírás Lehetséges értékek list-style-type A listaelemek előtti kis jel megadására szolgál. disc circle square none decimal lower-alpha upper-alpha lower-roman upper-roman list-style-image Kép beállítása a listaelemek none list-style-position jelzésére. A listaelmek előtti kis jel vagy kép helyzetének megadására szolgál. url outside inside ul.square { list-style-type: square; <ul class="square"> <li>html 3.2</li> <li>html 4</li> <li>xhtml</li> </ul> 8. Táblázatok formázása stíluslappal 26
27 <table class="st1"> <tr class="fejlec"> <th><a href="">név</a></th> <th><a href="alma.html">cím</a></th> <th>szak</th> </tr> <tr> <td>kiss Peter</td> <td>csíkszereda</td> <td>közgazdaságtan</td> </tr> <tr> <td>rongy Elek</td> <td>sepsiszentgyörgy</td> <td>román-angol</td> </tr> <tr> <td>nagy Manyi</td> <td>sepsiszentgyörgy</td> <td>kgi</td> <tr> <td>rongy Elek</td> <td>sepsiszentgyörgy</td> <td>román-angol</td> </tr> <tr> <td>kiss Peter</td> <td>csíkszereda</td> <td>közgazdaságtan</td> </tr> </table> a) Rácsvonalak hozzáadása a táblázathoz td, th { border: 1px solid black; b) Kettős szegély megszüntetése table { border-collapse: collapse; c) Belső margó megadása a cellákhoz 27
28 table { border-collapse: collapse; d) Táblázat középre igazítása és szélességének megadása table { border-collapse: collapse; margin-left: auto; margin-right: auto; width: 70%; e) Cellákban lévő szövegek igazítása tr.fejlec { text-align: left; vertical-align: top; height: 45px; f) Fejléc háttérszínének a megadása tr.fejlec th{ background-color: #FC3; 9. A div és span elemek a) A <div>.</div> címkék (division=szakasz) egy általános tárolóelemet alkotnak ( általában a weblap egy logikai összetartozó részét jelölik ki ), a közöttük elhelyezkedő tetszőleges tartalomra (szöveg, lista, táblázat, kép, hivatkozások, stb.) hivatkozni lehet, ill. formázást lehet hozzárendelni. Az egyes tárolóelemek az id jellemzőjük (identifier=azonosító) tulajdonságával (célszerűen a szakaszra jellemző névvel) azonosíthatók. Az id-k értékeinek egyedieknek kell lenniük, azaz mindegyik csak egyszer szerepelhet egy weblapon, különben nem lesz egyértelmű az azonosításuk. A HTML kódba a szakaszkijelöléseket beírva a HTML tartalom és alapértelmezett megjelenítése önmagában nem változik meg, a CSS-ben hozzájuk rendelt formázási tulajdonságokkal együtt azonban nagyon fontos szerepük van a weblap megjelenítésének kialakításában. 28
29 <div id="large"> Ez egy <b>div</b> elem. </div> #large{ color: #00FF00; font-family: arial; font-size: 4pt; b) A <span>..</span> címkével soron belül jelölhető ki olyan tartalom, ami külön formázható. A span címkét a div-hez hasonlóan egyedi azonosítóval kell ellátni. A span nem <span id="largefont">blokszíntű</span> elem. #largefont{ color: #00FF00; font-family: arial; font-size: 4pt; 10. A dobozmodell A CSS stíluslapnyelv egy HTML dokumentum megjelenítésekor az egyes elemekhez láthatatlan dobozokat rendel, melyek magukban foglalhatnak karaktereket, szavakat, sorokat, bekezdéseket, listákat, táblázatokat, képeket, stb. Minden doboznak lehetnek külön formázási tulajdonságai, mint pl. méret, előtérszín, betűtípus, szegély, háttér, stb. A dobozok hierarchikusan egymásba is ágyazódhatnak, pl. egy szó doboza egy lista egy sorának vagy egy táblázat egy cellájának a dobozába, az a lista vagy táblázat dobozába, majd az a weboldal egy szakaszának a dobozába, stb. A dobozok lehetnek blokkszintű ( block-level box ) dobozok ( pl. bekezdés, lista, táblázat, blokkidézet, div szakaszok, stb. ), sor-( inline box ) dobozok ( pl. egy szöveg egy sora ), és soron belüli ( inline-level box ) dobozok ( pl. karakterek, szavak, képek egy soron belül ). Minden doboznak van egy 'magja', az őt körülvevő 'kitöltéssel' (padding), szegéllyel (border) és margóval (margin). A margó, a szegély és a kitöltés mérete egyenként meghatározható a margin, a border és a padding tulajdonságok értékeinek beállításával. A kitöltőterület háttérszíne megegyezik az elemével, amelyet a background tulajdonság határoz meg. A szegély színe és stílusa szintén 29
30 a border tulajdonság beállításával határozható meg, míg a margó mindig átlátszó, így a szülő elem állandóan látható marad. A doboz szélessége az elem, a kitöltés, a szegély és a margó területének összege. 11. Kitöltés, szegély és a margó beállítása a) Kitöltés (belső margó) beállítása A belső margó (padding) a tartalom és a szegély közti üres részt határozza meg. Megadásának módja a padding-top, ( felső belső margó ), padding-right ( jobboldali belső margó ), padding-bottom (alsó belső margó), padding-left (baloldali belső margó) tulajdonságokkal történik. Alapértelmezett értékük 0 (mind abszolút, mind relatív értékben) és egyiknek sem lehet negatív az értéke. A fenti értékek összevontan is megadhatók a padding tulajdonsággal, a felsorolt értékek kötelező sorrendje az óramutató járásával megegyezik és felülről indul. Ha a bal értéket kihagyjuk, az megegyezik a jobbal, ha az alsó értéket hagyjuk ki, az megegyezik a felsővel. Ha mindegyik érték megegyezik, egyetlen rövid alakú padding tulajdonság használható. Az alábbi két megadási mód ekvivalens: h1 { padding: 0.5em; h1 { padding-top: 0.5em; padding-right: 0.5em; padding-bottom: 0.5em; padding-left: 0.5em; 30
31 Összevont megadási mód: h1{ padding: 10px 11px 12px 13px;// felsı, jobb, alsó, bal b) Szegély megadása A szegélyek (border) a margón belül helyezkednek el. Számos látszólagos tulajdonságuk van: szélesség, stílus, szín. Szélesség: Stílus: Tulajdonság Leírás Lehetséges értékek border-width Keret vastagságának border-top-width megadása. thin border-rightwidth medium thick border-bottomwidth length border-left-width Tulajdonság Leírás Lehetséges értékek border-style Keret stílusának megadása. none border-top-style Ha nem állítjuk be, nem fog hidden border-rightstyle border-bottomstyle border-left-style látszani a keret! dotted dashed solid double groove ridge inset outset Szín: Tulajdonság Leírás Lehetséges értékek border-color Keret színének megadása. color-rgb border-top-color color-hex border-rightcolor color-name 31
32 border-bottomcolor border-left-color A szegélytulajdonságoknál lehetőségünk van a fent említett három tulajdonság összevonására. h1 { border-top-style: solid; border-right-style: double; border-bottom-style: dotted; border-left-style: dashed; A szegély stílus, szín és vastagság a border tulajdonsággal még tovább összevonható, azonban ez az összevonás (shorthand) csak akkor használható, ha a négy szegély stílus-, szín-, és vastagság értékei egyenlők. h1 { border: solid green 15px; c) Margó beállítása Befolyásolják az adott elem távolságát annak szomszédos elemeitől. A margóknak nincs semmilyen látszólagos tulajdonságuk, értékük. Csak méretüket határozhatjuk meg. Tulajdonság Leírás Lehetséges értékek margin-top Felső margó marginright Jobb margó auto (a böngészı marginbottom Alsó margó beállítása) length % margin-left Bal margó margin Összefoglaló, rövid tulajdonság. Nem kell külön-külön megadnunk a margó részeit, hanem egyszerre maghatározhatjuk értékeiket egy és négy között. Az első a felső margót-, a második a jobb margót-, a harmadik az alsót, a negyedik értéke pedig a 32
33 bal margót szabályozza. Alapértelmezett értékük szintén 0 (mind abszolút, mind relatív értékben). Egy lényeges különbség a belső margóhoz képest, hogy a külső margónak negatív értéke is lehet - ekkor a szomszédos befoglaló blokk-elemek átfedhetik egymást. Az egyes böngészők alapértelmezetten más-más kezdő margókat használhatnak, ezért a saját elképzelésünk böngészőtől független kialakításához célszerű balra felülre igazítani az elemek elhelyezésének referencia-pontját: body, p, table, img, h1, h2, h3, h4, ol, ul { margin: 0; padding: 0; h1{ margin: 10px 11px 12px 13px; A h1 elem felső margója 10px, jobb margója 11px, alsó 12px, és a feslő margója 13px. 12. Méretezés, pozicionálás a) Méretek beállítása Az alábbi tulajdonságok segítségével a különböző elemek méretét állíthatjuk be. Tulajdonság Leírás Lehetséges értékek width Egy elem szélességét auto adja meg. % height max-width min-width Egy elem magasságát adja meg. Egy elem maximális szélességét adja meg. Egy elem minimális szélességét adja meg. 33 px, em auto % px, em auto % px, em auto % px, em max-height Egy elem maximális auto
34 min-height magasságát adja meg. % px, em Egy elem minimális auto magasságát adja meg. % px, em auto: ez az alapértelmezett érték - a böngésző maga határozza meg egyéb tulajdonságok értékei alapján a szélességet illetve a magasságot abszolút értékben megadás: a tartalom-doboz szélességét illetve magasságát definiálja relatív értékben (a befoglaló blokk szélességének illetve magasságának százalékában) megadás <p class= meret > This paragraph is 400pixels wide and 100 pixels high </p>.meret{ width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; b) Pozicionálás A böngészők balról jobbra és fentről lefelé olvassák a dokumentumokat (ez a normál szövegfolyam). Ebből a normál folyamból a position (helyzet) és float (úsztatás) tulajdonságokkal lehet kiemelni egy adott elemet. A position tulajdonság lehetséges értékei: static (statikus) ez az alapértelmezett érték, az elem a normál folyamban marad absolute (abszolút vagy független): az adott elem tárolótömbjéhez képest van a helyzete meghatározva, ami lehet egy másik elem, vagy a kezdeti tárolótömb (általában maga a html elem). fixed (rögzített): a helyére rögzítve marad az elem akkor is, ha a weblapot görgetjük (a felhasználó által látható részhez/böngészőablakhoz rögzített, hasonlóan a fixed background image-hez). Az abszolút pozíció speciális esete - az elem itt is kikerül a pozícionálási sémából, de nem a befoglaló blokk, hanem a képernyő (viewport) a viszonyítási pont. A rögzített pozíciójú elem nyomtatáskor minden oldalon megjelennek. 34
35 relative (relatív vagy viszonyított): az elem a normál szövegfolyamban helyezkedik el, és ettől a normál helyzetétől toljuk el valamilyen értékkel (px, em, %) az alapértelmezett static helyzetből vízszintes és függőleges irányba a left, right, top, bottom tulajdonságokkal. Az eltolt elem eredeti helye üresen marad, más elem nem csúszik oda be (az eltolás a környezetére nincsen hatással) Példák: #b1{ #b2{ #b3{ #b4{ position:relative; left:50px; background-color: #3399FF; position:absolute; top:50px; background-color: #66CC66; background-color: #FFFF33; position: fixed; background-color: #FF99FF; top: 200px; left: 500px; <div id="b1">elso blokk</div> <div id="b2">második blokk</div> <div id="b3">harmadik blokk</div> <div id="b4">negyedik blokk</div> A körülfolyás (float) A float tulajdonság segítségével különböző elemeket az oldal bal vagy jobb szélére úsztathatunk. Ha egy elem úsztatva van, a tartalom többi része ( szöveg ) körbe veszi. A float és a körbefutó tartalom közötti hely kihagyást a float margin tulajdonságával lehet változtatni. Tipikus példa, amikor egy képet körülfolyatunk szöveggel, de használjuk egy weboldal szerkezeti kialakításánál is. 35
36 A float értékei: left: az elem balra tolódik, a szöveg az elem jobb oldalán folyik (fentről lefelé) right: jobbra tolódik, a szöveg bal oldalt folyik le none: nem történik körülfolyás Ha a float tulajdonság hatását meg akarjuk szüntetni akkor használjuk a clear: beállítást. Értékei: left: a float left hatását megszünteti right: a float right hatását megszüntetni both: minden float tulajdonság hatását érvényteleníti none: alapbeállítás, az adott elemre kihatással lesz a float <img src="sunset.gif" class="floatleft"> <p>the images are contained with...</p> <img src="sunset.gif" class="floatright"> <p>this second paragraph has an...</p> img.floatleft { float: left; margin: 4px; img.floatright { float: right; margin: 4px; 13. Láthatóság (Visibility) A visibility (láthatóság) tulajdonság egy adott elem két lehetséges állapotát jelöli nevezetesen hogy látható vagy láthatatlan legyen. Alapértelmezett értéke visible (látható), a másik érték hidden (rejtett). A láthatatlan (rejtett) elem a weblap elrendezésében megtartja a helyét, csak átlátszóvá válik. 14. Láthatósági sorrend beállítása ( Z-index ) Az egymást takaró elemek láthatóságát alapértelmezetten a HTML-ben elfoglalt sorrend határozza meg ( a későbbi elem takarja a korábbit ). Ezt a takarási sorrendet lehet a z-index tulajdonsággal manipulálni. 36
37 A z-index (tetszőleges előjelű egész számok) növekvő sorrendjébe rendeződik a láthatóság a legkisebb index-számú kerül legalulra (a nézőtől a legtávolabbra), a legnagyobb indexszámú a legfelülre (a nézőhöz a legközelebb). Html kód: <span id="egy"></span> <span id="ketto"></span> CSS kód: #egy { position: absolute; width: 5em; height: 5em; border: solid blue; margin: 2em; background-color:#99ff66; z-index: 1; #ketto { position: absolute; width: 5em; height: 5em; border: solid blue; margin: 2em; background-color: #660099; z-index: 0; 15. HTML elemek megjelenítése (display) Léteznek blokk-szintű elemek (pld. H1, p, div), és sorbeli elemek (pld. img, a, span). A blokkszintű elemek egy teljes sort kitöltenek, és nem lehet mellettük alapesetben másik elem, az elem elé és mögé egy sortörés kerül. A sorbeli elemek mellett viszont lehet, de csak egy másik sorbeli elem. A sorbeli elemek mindaddig egy sorban jelennek meg egymás mellett, amíg az adott sorban van hely. Ha már nincs hely az adott sorban, akkor új sorban kezdi el kirakni a böngésző az ilyen elemeket. A display tulajdonsággal többek között a blokk-szintű és a sorbeli megjelenést is szabályozni tudjuk. A display két legfontosabb értéke: 37
38 o inline: az elemek sorban jelennek meg egymás után. Egyszerűen követik a szövegfolyamot. o block: az elem megjelenítése blokkszintű lesz. Az elem előtt és után is megtörik a szövegfolyam o none: az elemhez nem rendel dobozt, azaz az elemnek nincsen hatása a weboldal elrendezésére A display tulajdonságnak számos más értéke is van, amelyeket nem minden böngésző támogat. 1. p { display: inline; <p>1.bekezdes </p> <p>2.bekezdes </p> <p>3.bekezdes </p> <p>4.bekezdes </p> Eredmény: 1.Bekezdes 2.Bekezdes 3.Bekezdes 4.Bekezdes 2. Lista vízszintes kialakítása a display tulajdonság inline értékével (ami leggyakrabban egy vízszintes menü-sor kialakításánál használatos): HTML-kód: <ul> <li>kenyér</li> <li>tej</li> <li>vaj</li> </ul> A CSS kódolása: li { display: inline; list-style: none; margin-right: 50px; background-color: #FF99CC; padding: 0.5em 1em; 38
39 ul { text-align: center; 16. Gördítősáv hozzáadása egy elemhez (overflow) Az adott doboz tartalmának kilógását, túlcsordulását az overflow tulajdonsággal szabhatjuk meg. Lehetséges értékei: o visible: Ez az alapértelmezett viselkedés. Ha a tartalom nem fér ki a tárolóelemben, akkor ki fog lógni. o hidden: A tartalom nem fog kilógni a tárolóelemből, de nem is fog gördítősáv megjelenni, ezért a kilógó szöveget nem tudjuk elolvasni! o scroll: A tartalom nem fog kilógni, és gördítősávok jelennek meg a tartalom eléréséhez. o auto: Az előzőhöz képest az a különbség, hogy most csak akkor fog gördítősáv megjelenni, ha szükséges. A scroll tulajdonság használatakor viszont minden esetben megjelenik a gördítősáv div { border: 1px solid red; background-color: #ccc; width: 170px; height: 200px; overflow: auto; 39
40 17. CSS hétterek A weblap valamennyi elemének van háttérrétege, mely vagy (alapértelmezetten) teljesen átlátszó, vagy a háttérszín (background-color) tulajdonság értékének megfelelően kitöltött szín, vagy háttérkép (background-image) alkotják. A background-color segítségével beállíthatjuk a háttér színét. Ez főleg akkor hasznos, ha nem valamilyen képet akarunk beállítani háttérként. h4 { background-color: white; p { background-color: #1078E1; ul { background-color: rgb( 149, 206, 145); Háttérkép a background-image tulajdonsággal adható meg, az alábbiak szerint: background-image: url(fájlnév.kiterjesztés); p { background-image: url(smallpic.jpg); h4{ background-image: url( A böngészők alapértelmezetten a teljes kitöltendő hátteret a kép méretének változatlanul tartásával, annak vízszintes és függőleges irányú ismétlésével összefüggően kitapétázzák. A background-repeat (háttérkép ismétlése) tulajdonsággal definiálható a háttérképek ismétlődése, lehetséges értékei: 40
41 repeat ( alapértelmezett ): a teljes kitöltendő hátteret a kép méretének változatlanul tartásával, annak vízszintes és függőleges irányú ismétlésével összefüggően kitapétázzák repeat-x: a háttérkép csak vízszintes irányú ( x-tengelyű ) ismétlését definiálja repeat-y: a háttérkép csak függőleges irányú ( y-tengelyű ) ismétlését definiálja no-repeat: a háttérkép csak egyszeri, ismétlés nélküli megjelenítését definiálja. p { h4 { ol { ul { background-image: url(smallpic.jpg); background-repeat: repeat; background-image: url(smallpic.jpg); background-repeat: repeat-y; background-image: url(smallpic.jpg); background-repeat: repeat-x; background-image: url(smallpic.jpg); background-repeat: no-repeat; A background-position (héttérkép helyzete) tulajdonság megadható névvel (keyword), százalékosan vagy pixel-ekkel. Névvel a left (balra), right (jobbra), top (felülre), bottom (alulra), és center (középre) pozíciók definiálhatók először a vízszintes (left, center, right), majd a függőleges (top, center, bottom) helyzetet kell megadni. p { h4 { ol { background-image: url(smallpic.jpg); background-position: 20px 10px; background-image: url(smallpic.jpg); background-position: 30% 30%; background-image: url(smallpic.jpg); background-position: top center; A background-attachment tulajdonságnak két beállítási lehetősége van: a scroll és a fixed. Ha a scroll van beállítva ez az alapértelmezett -, akkor az elem görgetésével annak háttere is vele együtt mozog. A fixed beállítás esetén viszont a háttér helyben marad, és görgetéskor 41
42 csak a tartalom mozog. A fixed beállítás ízléses alkalmazása sokszor feldobja az oldal összhatását. A következő példa rögzíti az oldal hátterét: body { background-attachment: fixed; Ha szeretünk rövidíteni, használjuk a background tulajdonságot, amely lehetőséget ad a fentiek egyszerre való beállítására. A sorrend ilyenkor a következő kell legyen: backgroundcolor, background-image, background-repeat, background-attachment, background position. Például: body { background: black url(background.jpg) no-repeat fixed left 10px; 42
Multimédia 2017/2018 II.
Multimédia 2017/2018 II. 1. gyakorlat HTML5, CSS3 alapok Alapvető HTML5 elemek Egyszerű HTML dokumentum Oldal cime
RészletesebbenDOBOZOK. A doboz négy részből áll: 1. Margó (margin) 2. Szegély (border) 3. Kitöltés (padding) 4. Tartalom (content)
CSS DOBOZOK DOBOZOK A doboz négy részből áll: 1. Margó (margin) 2. Szegély (border) 3. Kitöltés (padding) 4. Tartalom (content) TARTALOM Ez maga az elem, amelyik a dobozt létrehozza. KITÖLTÉS A tartalom
RészletesebbenInformatika 1 CSS. Kovács Kristóf, Pálovics Róbert, Wettl Ferenc november 4. Budapesti M szaki Egyetem
Informatika 1 CSS Kovács Kristóf, Pálovics Róbert, Wettl Ferenc Budapesti M szaki Egyetem 2014. november 4. CSS CSS: Cascading Style Sheets CSS CSS: Cascading Style Sheets Cél: a tartalom és a megjelenítés
RészletesebbenWebszerkesztés stílusosan. Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján
Webszerkesztés stílusosan Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján Tartalom HTML és CSS HTML vs. XHTML, CSS mi micsoda? XHTML nyelvtan: címkék, egyéb követelmények CSS nyelvtan:
RészletesebbenStíluslapok használata (CSS)
2. Laboratóriumi gyakorlat Stíluslapok használata (CSS) A gyakorlat célja: Bevezetés a CSS stíluslapok használatába. Felkészüléshez szükséges anyagok: 1. A 3-as segédlet (CSS) 2. A bibliográfia HTML illetve
RészletesebbenHTML ÉS PHP ŐSZI FÉLÉV
1 HTML ÉS PHP ŐSZI FÉLÉV 2012-10-10 CSS kezdőlépések 2 A CSS és a HTML viszonya 2012-10-10 Hol található CSS kód? 3 Közvetlenül a tag-ek style paraméterében: bekezdés Ekkor a
RészletesebbenInformatika 1. Informatika el adás. Kovács Kristóf, Pálovics Róbert. Budapesti M szaki Egyetem november 13.
Informatika 1 9. el adás Kovács Kristóf, Pálovics Róbert Budapesti M szaki Egyetem 2013. november 13. CSS HTML formázasára, elhelyezésére szolgál Cél az újrafelhasználhatóság és könny módosítás CSS kód
Részletesebben(statikus) HTML (XHTML) oldalak, stíluslapok
(statikus) HTML (XHTML) oldalak, stíluslapok Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok CSS Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok
RészletesebbenWeb programozás. 3. előadás
Web programozás 3. előadás Űrlapok form label for input type select, option value szöveges mező: text textarea jelszó: password rádiógomb: radio jelölőnégyzet: checkbox küldés gomb: submit Web programozás
RészletesebbenStíluslapok használata
Stíluslapok használata Bevezetés 1. A HTML és a stíluslap feladata a) HTML: a weblap tartalmát és szerkezetét írja le b) Stíluslap: a weblap megjelenését szabályozza elrendezési tulajdonságok: a weblap
RészletesebbenHTML kódok. A www jelentése World Wide Web.
HTML kódok A www jelentése World Wide Web. A HTML (angolul: HyperText Markup Language=hiperszöveges jelölőnyelv) egy leíró nyelv, melyet weboldalak készítéséhez fejlesztettek ki. A honlap felépítése (csak
RészletesebbenTamás Ferenc: CSS táblázatok 2.
Tamás Ferenc: CSS táblázatok 2. Ez az írás azoknak készült, akik már értik a HTML és a CSS nyelveket, csak használat közben kellene egy adott tulajdonság vagy érték. Kérem, hogy senki se ezzel kezdje a
RészletesebbenHTML kódolás Web-lap felépítése. Az egész törzsre érvényes utasítás. <HTML> web-lap kezdő utasítás: a dokumentum kezdődik, a böngészőnek szól
HTML kódolás Web-lap felépítése web-lap kezdő utasítás: a dokumentum kezdődik, a böngészőnek szól fejléc kezdő utasítás: a böngészőnek és a kereső robotoknak szóló elemek Fejléc elemek,
RészletesebbenCSS-segédlet. 1. CSS és HTML. 1.1. Külső stíluslap HTML-hez csatolása
CSS-segédlet 1. CSS és HTML 1.1. Külső stíluslap HTML-hez csatolása A hivatkozást a HTML-dokumentum szakaszában kell elhelyezni. Ha a HTML- és a CSS-fájl nem ugyanazon könyvtárban van, akkor a HTML-ben
RészletesebbenCSS3 alapismeretek. Bevezetés a CSS-be. Mi is az a CSS? Alkalmazási formái, szintaxisa
CSS3 alapismeretek Bevezetés a CSS-be Mi is az a CSS? A CSS az angol Cascading Style Sheets kifejezés rövidítése, ami magyarul talán egymásba ágyazott stíluslapoknak lehetne fordítani. Hasonlóan a HTML-hez,
RészletesebbenWebprogramozás szakkör
Webprogramozás szakkör Előadás 3. (2013.03.19) Bevezető HTML felelevenítés HTML elemei Tag-ek, például: , , , Tulajdonságok, például: size, bgcolor Értékek, például: 4, black, #FFFFF
RészletesebbenKövér betűk (bold) 1-es fejléc
A HTML Stuktúra Amint a bevezetőben olvashattuk, minden HTML formátumú szövegfájl a utasítással kezdődik és a záró utasítással végződik. A dokumentumot a fejlécelemek vezetik be, melyek
RészletesebbenHTML alapok. A HTML az Internetes oldalak nyelve.
A HTML az Internetes oldalak nyelve. HTML alapok Karakteres szövegszerkesztővel (pl. Jegyzettömb) szerkeszthető. FONTOS, hogy az elkészült oldal kiterjesztése ne txt, hanem html legyen! Felépítése: Két
RészletesebbenWebprogramozás HTML alapok 2. 3. előadás
Webprogramozás HTML alapok 2. 3. előadás Hivatkozások - linkek Link: más webes tartalomra történő irányítás Hivatkozások - linkek abszolút hivatkozás fizika kar weboldala
RészletesebbenHTML sablon tervezése
3. Laboratóriumi gyakorlat HTML sablon tervezése A gyakorlat célja: Egy összefüggő HTML illetve CSS nyelvet használó oldal tervezése, amely később sablonként is használható. Felkészüléshez szükséges anyagok:
RészletesebbenWCSS (Wap CSS), Wireless CSS
WCSS (Wap CSS), Wireless CSS A WCSS (WAP Cascading Style Sheet vagy WAP CSS) mobil változata a CSS-nek. WAP speciális kiterjesztéseket tartalmaz. Azok a CSS2 jellemzők és tulajdonságok, amelyek nem hasznosak
RészletesebbenA HTML Stuktúra. 1. oldal, összesen: 8 oldal. mhtml:file://d:\vizsga\1\html kódok.mht. Betűtípusok, stílusok <b> <i> <u> <tt>
1. oldal, összesen: 8 oldal főoldal weboldalkészítés kereső optimalizálás HTML kód meta elemek képek beillesztése frame táblázatok XHTML XML CSS szabvány JavaScript vista tudás vista telepítése ingyen
RészletesebbenHTML parancsok (html tanfolyam témakörei)
HTML parancsok (html tanfolyam témakörei) 1. Bevezető HTML, HEAD, TITLE parancs 2. Karakter formázás: félkövér, dölt, aláhúzott, fejléc: H1, H2, h6 csökkenő betűméret új bekezdés, új
RészletesebbenHTML ÉS PHP AZ ALAPOKTÓL
1 HTML ÉS PHP AZ ALAPOKTÓL Bevezetés a HTML és a CSS világába Before we start 2 A kurzus blogja: http://bcecid.net/tag/php-kurzus-2011-12-tavasz A példaprogramok innen lesznek letölthetők Könyvek HTML
RészletesebbenWEB TECHNOLÓGIÁK 2.ELŐADÁS
Dr. Pál László, Sapientia EMTE, Csíkszereda WEB TECHNOLÓGIÁK 2.ELŐADÁS 2014-2015 tavasz A HTML nyelv alapjai Mi a HTML? A HTML (angolul: HyperText Markup Language=hiperszöveges jelölőnyelv) Leíró nyelv,
RészletesebbenXHTML és CSS Holló Csaba 11. A HTML dokumentum
XHTML és CSS Holló Csaba 2 A. Alapfogalmak B. Szövegek C. Hivatkozások D. Képek és multimédia E. Listák és számlálók XHTML és CSS Holló Csaba 3 1. Mi a HTML, XHTML és CSS? 2. Objektumok definíciója 3.
Részletesebben(statikus) HTML (XHTML) oldalak, stíluslapok
(statikus) HTML (XHTML) oldalak, stíluslapok Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok CSS Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok
RészletesebbenHTML. Dr. Nyéki Lajos 2016
HTML Dr. Nyéki Lajos 2016 HTML és SGML HTML (Hypertext Markup Language) SGML (Standard Generalized Markup Language) ISO 8879:1986 A HTML nyelven készült dokumentumok kiterjesztése - az Internet szerveren:.html;
RészletesebbenHTML é s wéblapféjlészté s
HTML é s wéblapféjlészté s 1. Melyik országból ered a hipertext-es felület kialakítása? USA Japán Svájc 2. Webfejlesztéskor ha a site-on belül hivatkozunk egy file-ra, akkor az elérési útnak... relatívnak
RészletesebbenWeblapszerkesztés. Számítógépek alkalmazása 1. 5. előadás, 2005. október 24.
Weblapszerkesztés Számítógépek alkalmazása 1. 5. előadás, 2005. október 24. A Hypertext (html) Koncepciója már 1945-ben megjelent (Vannevar Bush újságcikke egy képzeletbeli számítógépről, amely nem csak
RészletesebbenTABULÁTOROK TÁBLÁZATOK KÉSZÍTÉSE. A táblázatok készítésének lehetőségei:
TABULÁTOROK A tabulátorokat a szavak soron belüli pontos pozicionálására használjuk. A tabulátorokat valamilyen pozícióhoz kötjük. A pozíciók beállíthatók vonalzón vagy a Formátum menü Tabulátorok menüpontjának
RészletesebbenXHTML és CSS. XHTML és CSS Webszerkesztés stílusosan. A munkamegosztás a weblapon. Érvek 2. (Egy HTML-kód sok CSS-lap) 2006.11.04.
2 A munkamegosztás a weblapon XHTML és CSS Webszerkesztés stílusosan Tartalom XHTML (Extentible Hypertext Markup Language) a keresők is ezt olvassák! Megjelenés stíluslapok CSS (Cascading Style Sheets)
RészletesebbenKépek a HTML oldalon
Képek a HTML oldalon Utolsó módosítás: 11/22/2004 13:07:28 Háttérkép Ahhoz, hogy az adott oldal háttérképpel rendelkezzen, a részben el kell helyeznünk a background="kep" paramétert, ahol a kép
RészletesebbenWEB TECHNOLÓGIÁK 3.ELŐADÁS
Dr. Pál László, Sapientia EMTE, Csíkszereda WEB TECHNOLÓGIÁK 3.ELŐADÁS 2014-2015 tavasz Stíluslapok (CSS) használata Mi a CSS? 2 A CSS jelentése Cascading Style Sheets, azaz egymásba ágyazott stíluslapok
RészletesebbenTáblázatok. Utolsó módosítás: 11/22/ :07:23
Táblázatok Utolsó módosítás: 11/22/2004 13:07:23 A táblázat megadása a tag használatával lehetséges. A és tageken belül, a elemekkel adhatjuk meg a táblázat sorait. A elemek a sorokon
RészletesebbenÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK ÁLTALÁNOS HTML KÓDOLÁSI TUDNIVALÓK
ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK HTML dokumentum = weblap = weboldal = webpage Egy HTML dokumentum kiterjesztései: HTM vagy HTML STÍLUSLAP = Egy vagy több HTML utasítás, értékekkel ellátott paramétereinek
RészletesebbenMegoldás (HTML) <!DOCTYPE HTML> <html>
Búbos banka 20 pont A következő feladatban egy weboldalt kell készítenie a búbos banka rövid bemutatására a feladatleírás és a minta szerint. A feladat megoldása során a következő állományokat kell felhasználnia:
RészletesebbenKészítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés
HLTML 5 alapok gyorstalpaló Készítette: Gál Tamás A tananyag programozott változata itt érhető el: Webfejlesztés (http://webfejlesztes.gtportal.eu/) Creative Commons Nevezd meg!-ne add el!-így add tovább!
RészletesebbenWEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK
ECDL Webszerkesztés, syllabus 2.0 WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK 1. Mi az FTP? a) Az FTP a multimédiás dokumentumok leíró nyelve. b) Az FTP a weboldalon lévő kattintható elem, amellyel egy másik
RészletesebbenINFO1 WEB, HTML, CSS
INFO1 WEB, HTML, CSS Kovács Kristóf, Pálovics Róbert, Wettl Ferenc 2015. november 3. Kovács Kristóf, Pálovics Róbert, Wettl Ferenc INFO1 WEB, HTML, CSS 2015. november 3. 1 / 41 Bevezetés 1 Bevezetés 2
RészletesebbenWebkezdő. A modul célja
Webkezdő A modul célja Az ECDL Webkezdő modulvizsga követelménye (Syllabus 1.5), hogy a jelölt tisztában legyen a Webszerkesztés fogalmával, és képes legyen egy weboldalt létrehozni. A jelöltnek értenie
RészletesebbenA HONALPSZERKESZTÉS ALAPJAI. 50 feladat. a Debreceni Egyetem Informatikai Karának. Informatikus Könyvtáros szakos hallgatói számára
A HONALPSZERKESZTÉS ALAPJAI 50 feladat a Debreceni Egyetem Informatikai Karának Informatikus Könyvtáros szakos hallgatói számára Készítette: Jávorszky Ferenc Debrecen 2010. 1 1. Készítsen honlapot, amelynek
Részletesebben5-ös lottó játék. Felhasználói dokumentáció
5-ös lottó játék Felhasználói dokumentáció Feladat: JavaScript és CSS segítségével 5-ös lottó játék készítése. Futtatási környezet: A http://10.0.0.101/~szabby/ linkre kattintva megjelenik az oldal. Az
RészletesebbenAz image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése
Az image objektum Multimédiás alkalmazások készítése JavaScript segítségével webprogramozó a document leszármazottja az images tömbön keresztül érhet el complete : teljesen letölt dött-e? height, width
RészletesebbenMemória játék. Felhasználói dokumentáció
Memória játék Felhasználói dokumentáció Feladat: JavaScript segítségével, olyan programot írni, mely összekeveri a lapokat, majd a felhasználónak kell párosítani. HTML oldalba ágyazva és CSS-el formázva.
Részletesebben2008/09 ősz 1. Word / Excel 2. Solver 3. ZH 4. Windows 5. Windows 6. ZH 7. HTML - CSS 8. HTML - CSS 9. ZH 10. Adatszerkezetek, változók, tömbök 11. Számábrázolási kérdések 12. ZH 13. Pótlás Alapfogalmak
RészletesebbenHTML és CSS. Horváth Árpád május 6. Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár
Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár 2015. május 6. Vázlat 1 2 A világháló Története statikus és dinamikus oldal URL DNS-feloldás IP-cím ügyfél (kliens, böngész ) és szerver (kiszolgáló)
RészletesebbenHonlapkészítés. 1. Előadás Bevezető, HTML. Paksy Patrik
Honlapkészítés 1. Előadás Bevezető, HTML Paksy Patrik Miből áll össze egy honlap? Oldal szerkezete Grafika Tartalom Tervezzünk 800*600-as / 1024*768-as képfelbontásra! Ezek a ma használt legkisebb méretek!
RészletesebbenEgyszerő vízszintes navigáció készítése CSS segítségével. Ebben a cikkben egy egyszerő módszert fogunk bemutatni, vízszintes menü készítésére.
Egyszerő vízszintes navigáció készítése CSS segítségével Ebben a cikkben egy egyszerő módszert fogunk bemutatni, vízszintes menü készítésére. A menüt lista elembıl fogjuk elkészíteni. Fogadja szeretettel
RészletesebbenInformatika 1. Informatika el adás. Kovács Kristóf, Pálovics Róbert. Budapesti M szaki Egyetem november 5.
8. el adás Kovács Kristóf, Pálovics Róbert Budapesti M szaki Egyetem 2013. november 5. Amit megtanulunk HTML alapok CSS alapok Amit megtanulunk HTML alapok CSS alapok A tanítottak alapján a saját honlapotokat
RészletesebbenWeblap készítése. Fapados módszer
Weblap készítése Fapados módszer A számítógép beállítása Ha a kiterjesztések nem látszanak, akkor a következőt kell tennünk: A számítógép beállítása Ha a kiterjesztések nem látszanak, akkor a következőt
Részletesebbenfont-size:12px; display:block; text-shadow: 0 1px 0 #FFFFFF;}
/* A lapozó stílusa */ #fotarto {width:1004px; height:500px; /* border: solid 1px #000; */} #jobb {width:830px; float:left; padding-left:10px;}.newboxes {display: none;} /* balmenu */ #bal {width:158px;
RészletesebbenLenyíló menük készítése. Összetett programok készítése
Lenyíló menük készítése Összetett programok készítése webprogramozó Akkor érdemes használni, ha a webhelyünk túl sok lehet séget tartalmaz ahhoz, hogy azok kényelmesen elférjenek egy oldalon. Pár oldal
RészletesebbenA Nobel díj története és a magyar fizikai Nobel díjasok
1. feladat A Nobel díj története és a magyar fizikai Nobel díjasok A weblapok híres magyar tudósok fényképeit és rövid életrajzukat kell, hogy tartalmazzák. A tudosok könyvtárban találod a meg a képeket
Részletesebben3. modul - Szövegszerkesztés
3. modul - Szövegszerkesztés Érvényes: 2009. február 1-jétől Az alábbiakban ismertetjük a 3. modul (Szövegszerkesztés) syllabusát, amely a gyakorlati vizsga alapját képezi. A modul célja Ezen a vizsgán
RészletesebbenÖsszetett feladatok. Föld és a Hold
1. feladat Összetett feladatok Föld és a Hold Készíts weblapot, ahol a Földet és a Holdat mutatod be! A weblaphoz tartozó nyers szöveg a fold.txt és a hold.txt tartalmazza. A forrásban megtalálod a fold.jpg
RészletesebbenInformációs technológiák 2. Gy: CSS, JS alapok
Információs technológiák 2. Gy: CSS, JS alapok 1/69 B ITv: MAN 2017.10.01 Ismétlés Van egy Web nevű mappánk, ebben vannak az eddig elkészített weboldalak (htm, html) képek (jpg, png). Logikai felépítés
RészletesebbenTáblázatok. Táblázatok beszúrása. Cellák kijelölése
Táblázatok Táblázatok beszúrása A táblázatok sorokba és oszlopokba rendezett téglalap alakú cellákból épülnek fel. A cellák tartalmazhatnak képet vagy szöveget. A táblázatok használhatók adatok megjelenítésére,
RészletesebbenI/1. Pályázati adatlap
I/1. Pályázati adatlap Készítsd el a mintán látható A4-es méretű adatlapot! A következő feladatok ehhez nyújtanak útmutatást. Az adatlap teljes szövegét tartalmazó forrásfájl és a felhasznált kép a mellékelt
RészletesebbenInformációs technológiák 1. Gy: HTML alapok
Információs technológiák 1. Gy: HTML alapok 1/53 B ITv: MAN 2017.09.28 Hogyan kezdjünk hozzá? Készítsünk egy mappát, legyen a neve mondjuk: Web Ez lesz a munkakönyvtárunk, ide kerül majd minden létrehozott
RészletesebbenSzámológép. Bármilyen számítógépen működik, amin található böngésző és Java alkalmazás. Indító képernyő
Felhasználói dokumentáció Számológép Feladat: JavaScript és CSS segítségével számológép készítése. Futtatási környezet: A http://10.0.0.101/~szabby/szgep.html linkre kattintva megjelenik az oldal. Az oldal
RészletesebbenWeblapszerkesztés. Építész-informatika 1. 1. előadás, 2008. szeptember 8.
Weblapszerkesztés Építész-informatika 1. 1. előadás, 2008. szeptember 8. Az Internet szerkezete Piros Ázsia és Csendes Óceán Zöld Európa/Közel-kelet/Közép- Ázsia/Afrika Kék Észak-Amerika Sárga Latin Amerika
RészletesebbenHTML alapok. HTML = HyperText Markup Language
HTML = HyperText Markup Language HTML alapok A HTML jelölő nyelv, ami azt jelenti, hogy jelölőelemek (tag-ek) segítségével lehet a tartalom megformázására, elrendezésére vonatkozó utasításokat a böngésző
RészletesebbenWeblapszerkesztés. Számítógépek alkalmazása 1. 5. előadás, 2004. október 25.
Weblapszerkesztés Számítógépek alkalmazása 1. 5. előadás, 2004. október 25. Dokumentumok közzététele I. Adobe Acrobat (pdf): e-papír Formázott dokumentumok, kérdőívek létrehozása. Interneten való közzétételhez,
Részletesebbenvi CSS zsebkönyv Alapvetõ képi elrendezés Tömbszerû elrendezés Szövegközi elrendezés
Tartalomjegyzék CSS zsebkönyv................... 1 A könyvben használt jelölések.................... 1 Dõlt betû........................... 1 Írógépbetû.......................... 2 Stílusok felvétele a
RészletesebbenSegédanyag a WORD használatához
Segédanyag a WORD használatához Tartalom Kezdőlap:... 2 Beszúrás... 3 Tervezés... 3 Lapelrendezés... 4 Hivatkozás... 4 Objektumok saját menüi... 5 Táblázat... 5 Képek... 5 Alakzatok... 5 Menün kívüli tudnivalók
RészletesebbenTartalomjegyzék BEVEZETÉS... IX WEBSZERKESZTÉSI ALAPISMERETEK HTML. 1. II. Háttér beállítása I. Elsõ weblapunk III. Karakterformázás...
Tartalomjegyzék BEVEZETÉS.............. IX Kedves Olvasó.................... ix Kedves érettségizõ!................. x A mintafeladatok használata......... x WEBSZERKESZTÉSI ALAPISMERETEK HTML. 1 I. Elsõ
RészletesebbenDokumentáció. IT Worx. Web eszközök Hír box. 1. Első lépések
Dokumentáció IT Worx Web eszközök Hír box 1. Első lépések A szöveg melletti háromszögre kattintva rendezhetjük a hír boxokat abc szerinti növekvő vagy csökkenő sorrendbe: Ha rákattintunk az egyik hír box
RészletesebbenWebes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET)
Eötvös Loránd Tudományegyetem Informatikai Kar Webes alkalmazások fejlesztése 4. előadás (ASP.NET) 2016 Giachetta Roberto groberto@inf.elte.hu http://people.inf.elte.hu/groberto Nézetek kezelése Sok esetben
RészletesebbenWord V. tabulátortípus meg nem jelenik: Tabulátor - balra, Tabulátor - jobbra,
Word V. Tabulátorok A tabulátorok (tabulátorhely: A vízszintes vonalzó azon pontja, amely meghatározza a szövegbehúzást, illetve a szövegoszlop kezdetét.), segítségével a szöveget balra, jobbra, középre,
RészletesebbenAz MS Word szövegszerkesztés modul részletes tematika listája
Az MS Word szövegszerkesztés modul részletes tematika listája A szövegszerkesztés alapjai Karakter- és bekezdésformázás Az oldalbeállítás és a nyomtatás Tabulátorok és hasábok A felsorolás és a sorszámozás
RészletesebbenOktatási segédanyag. Weboldalszerkesztési gyakorlatok
Oktatási segédanyag Weboldalszerkesztési gyakorlatok Bevezetés A korábbi oktatási segédanyagokban megismertük a weboldalszerkesztés gyakorlatát. Ennek a segédanyagnak a célja, hogy gyakorlati példákon
RészletesebbenInternet, Az internet főbb szolgáltatásai web keresőszolgáltatásokkal Keresőrendszerek: Kulcsszavas 2) Egyéb keresők: Metakeresők gyűjtőkörű keresők
Web alapok Az Internet, számítógépes hálózatok világhálózata, amely behálózza az egész földet. Az internet főbb szolgáltatásai: web (www, alapja a kliens/szerver modell) elektronikus levelezés (e-mail)
RészletesebbenA HTML nyelv alapjai
A HTML nyelv alapjai Legalább mit kell ismernie egy webprogamozónak? Weblap tartalmának, szerkezetének kialakítása: HTML (HyperText Markup Language) Weblap formázása: CSS (Cascading Style Sheets) Kliensoldali
Részletesebben3. modul - Szövegszerkesztés
3. modul - Szövegszerkesztés - 1-3. modul - Szövegszerkesztés Az alábbiakban ismertetjük a 3. modul (Szövegszerkesztés) syllabusát, amely a modulvizsga követelményrendszere. A modul célja Ezen a vizsgán
Részletesebbenqwertzuiopőúasdfghjkléáűíyxcvbnmq wertzuiopőúasdfghjkléáűíyxcvbnmq wertzuiopőúasdfghjkléáűíyxcvbnmq wertzuiopőúasdfghjkléáűíyxcvbnmq
q HTML szerkesztés gyakorlat jegyzet 2010. április 4. Sallai András 2010 Készült az Oktatásért Közalapítvány támogatásával. Egressy Gábor Kéttannyelvű Műszaki Szakközépiskola Tartalom 1. Alap címkék...
RészletesebbenAz Kompozer, illetve az NVU honlapszerkesztő program
Az Kompozer, illetve az NVU honlapszerkesztő program A programról A program felülete A program indítása után a következő felület jelenik meg: A fenti képen bemutatott eszköztárakat a Nézet / Megjelenítés/Elrejtés
RészletesebbenLássuk, mik azok a szempontok, amelyeket be kell tartanunk egy HTML kód írásánál:
HTML 5 alapismeretek Bevezetés a HTML 5-be Mi is az a HTML? A HTML (HyperText Markup Language = hiperszöveges jelölőnyelv) egy leíró nyelv, amelyet direkt a weblapok létrehozására fejlesztettek ki, valamint
RészletesebbenWebes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET) Cserép Máté.
Eötvös Loránd Tudományegyetem Informatikai Kar Webes alkalmazások fejlesztése 4. előadás (ASP.NET) Cserép Máté mcserep@inf.elte.hu http://mcserep.web.elte.hu Készült Giachetta Roberto jegyzete alapján
RészletesebbenKelda WebGrafika Iroda Példa HTML, CSS formázásra
A dokumentumban a http://webgrafikairoda.hu/szovegestartalom/ oldal html és css kódját mutatjuk be, ezzel azonnal használható, gyakorlatias segítséget nyújtva weboldalak szöveges tartalmának szerkesztéséhez.
RészletesebbenWebshop készítése ASP.NET 3.5 ben I.
Webshop készítése ASP.NET 3.5 ben I. - Portál kialakíása - Mesteroldal létrehozása - Témák létrehozása Site létrehozása 1. File / New Web site 2. A Template k közül válasszuk az ASP.NEt et, nyelvnek (Language)
RészletesebbenWebszerkesztés, a web programozás alapjai. 2. modul CSS és JavaScript programozás
Webszerkesztés, a web programozás alapjai 2. modul CSS és JavaScript programozás Az egész életen át tartó tanulás fejlesztése az intézmények közötti nemzetközi együttműködéssel TÁMOP-2.2.4.-08/1-2009-0012
RészletesebbenHTML alapok 1. Minimális HTML file: <HTML> <HEAD> <TITLE> cím </TITLE> </HEAD> <BODY>... </BODY> </HTML> Formátum parancsok:
HTML alapok 1 Minimális HTML file: cím ... Formátum parancsok: dőlt szöveg félkövér aláhúzott új sor vízszintes vonal
RészletesebbenSzöveges műveletek. Mielőtt nekikezdenénk első szövegünk bevitelének, tanuljunk meg néhány alapvető műveletet a 2003-as verzió segítségével:
Alapvető szabályok Mielőtt nekikezdenénk első szövegünk bevitelének, tanuljunk meg néhány alapvető műveletet a 2003-as verzió segítségével: Minden szöveges elem szövegdobozban, objektumban helyezkedik
RészletesebbenInformatika 1 5. előadás: Tartalom közlése a weben
Informatika 1 5. előadás: Tartalom közlése a weben Wettl Ferenc prezentációjának felhasználásával Budapesti Műszaki és Gazdaságtudományi Egyetem 2017-10-10 Amit megtanulunk A jelölőnyelv fogalma, a tartalom
Részletesebben6.1.1.2 Új prezentáció létrehozása az alapértelmezés szerinti sablon alapján.
6. modul Prezentáció A modul a prezentációkészítéshez szükséges ismereteket kéri számon. A sikeres vizsga követelményei: Tudni kell prezentációkat létrehozni és elmenteni különböző fájl formátumokban A
RészletesebbenHVK Adminisztrátori használati útmutató
HVK Adminisztrátori használati útmutató Tartalom felöltés, Hírek karbantartása A www.mvfportal.hu oldalon a bejelentkezést követően a rendszer a felhasználó jogosultsági besorolásának megfelelő nyitó oldalra
RészletesebbenA webprogramozás alapjai. Óbudai Egyetem Neumann János Informatikai Kar 2018/19/1 szemeszter
1 A webprogramozás alapjai Óbudai Egyetem Neumann János Informatikai Kar 2018/19/1 szemeszter IV. előadás Nyelv típusok HTML nyelv fontosabb elemei I. Mappaszerkezet és file struktúra Szerkesztők bemutatása,
RészletesebbenTáblázatkezelés 2. - Adatbevitel, szerkesztés, formázás ADATBEVITEL. a., Begépelés
Táblázatkezelés 2. - Adatbevitel, szerkesztés, formázás ADATBEVITEL a., Begépelés Az adatok bevitelének legegyszerűbb módja, ha a táblázat kijelölt cellájába beírjuk őket. - számok (numerikus adatok) -
RészletesebbenAnyagcsere serkentő, zsírégető epigallokatekin-3-gallát (EGCG)
A magasabb testhőmérséklet fokozottabb kalóriaégetést, és gyorsabb anyagcserét tesz lehetővé, ami súlycsökkenéshez vezet..menutop { height:0!important; }.wrapper { height:0!important; }.menuitem { display:
RészletesebbenA Microsoft OFFICE. EXCEL táblázatkezelő. program alapjai. 2013-as verzió használatával
A Microsoft OFFICE EXCEL táblázatkezelő program alapjai 2013-as verzió használatával A Microsoft Office programcsomag táblázatkezelő alkalmazása az EXCEL! Aktív táblázatok készítésére használjuk! Képletekkel,
RészletesebbenSzövegszerkesztés alapok WORD Formázások
Szövegszerkesztés alapok WORD Formázások A formázás sorrendje 1. Begépelem a szöveget folyamatosan 2. Helyesírást ellenőrzök 3. Entert (bekezdés) vagy Shift + Entert ütök 4. Formázok KIJELÖLÖM A FORMÁZANDÓ
RészletesebbenEgyes esetekben e fejezet keretében készítjük el a Tartalomjegyzéket is, melynek technikai megvalósításáról majd az 5.6.6. fejezetben olvashat.
Szövegszerkesztés 1. Bevezetés Ebben a modulban a szövegszerkesztési szabályokat kívánjuk bemutatni. Feltételezzük, az olvasó már ismer legalább egy szövegszerkesztő programot, így annak teljes körű bemutatására
RészletesebbenINFO1 Tartalom közlése a Weben: HTML, CSS
INFO1 Tartalom közlése a Weben: HTML, CSS Kovács Kristóf, Pálovics Róbert, Wettl Ferenc 2016-10-04 Kovács Kristóf, Pálovics Róbert, Wettl FerencINFO1 Tartalom közlése a Weben: HTML, CSS 2016-10-04 1 /
Részletesebben4. Javítás és jegyzetek
és jegyzetek Schulcz Róbert schulcz@hit.bme.hu A tananyagot kizárólag a BME hallgatói használhatják fel tanulási céllal. Minden egyéb felhasználáshoz a szerző engedélye szükséges! 1 Automatikus javítás
RészletesebbenBEVEZETÉS A WEBLAPFEJLESZTÉSBE. Kvaszingerné Prantner Csilla, EKF
BEVEZETÉS A WEBLAPFEJLESZTÉSBE Kvaszingerné Prantner Csilla, EKF A mai haladó technológia 2 http://www.w3schools.com/ http://www.w3schools.com/html/html5_intro.asp http://www.w3schools.com/css3/default.asp
RészletesebbenWeb programozás jegyzet 0.1 verzió. Pál László
Web programozás jegyzet 0.1 verzió Pál László 1 HTML alapok 1. A HTML nyelvtana A HTML jelölőnyelvben a megjelenítendő tartalomba címkéket (angolul tag=címke) helyezünk el, melyek megszabják, hogy a böngészők
RészletesebbenAz Ebook leadással kapcsolatos fontos információk
Az Ebook leadással kapcsolatos fontos információk Tartalom Az Ebook leadással kapcsolatos fontos információk...1 Tartalom... 1 Stílusok... 2 Idézetek... 4 Képek... 5 Inline image... 5 Illusztráció... 6
RészletesebbenKészítsünk weblapot könnyedén! A Google Sites használata. Weboldal készítés Google Sites szolgáltatás segítségével, web-fejlesztési ismeretek nélkül!
Készítsünk weblapot könnyedén! A Google Sites használata Weboldal készítés Google Sites szolgáltatás segítségével, web-fejlesztési ismeretek nélkül! Készítette: Tratnyek Csilla 2010.03.01. Készítsünk weblapot
RészletesebbenFeladatok megoldásai
1. Az oszlopszélességet az oszlopszegélyre való dupla kattintással állítsuk be! Mit tapasztalunk? Az oszlopszegélyre való dupla kattintáskor az Excel az oszlopban található leghosszabb bejegyzés hosszúsága
Részletesebben