CSS3 alapismeretek. Bevezetés a CSS-be. Mi is az a CSS? Alkalmazási formái, szintaxisa
|
|
- Ottó Orosz
- 5 évvel ezelőtt
- Látták:
Átírás
1 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, ez sem programozási, hanem leíró nyelv, amellyel a HTML elemeink megjelenését tudjuk meghatározni, olyan dolgokkal, mint például betűméret, szín, margók, elhelyezkedések, stb. Az egymásba ágyazhatóság pedig azt takarja, hogy több stílust is definiálhatunk, illetve egy stílust több HTML elemre is alkalmazhatunk, amit akár egy újabb stílussal felül is írhatunk. Továbbá a stílusok öröklődnek is a HTML struktúra szerint. Például a tagre beállított betűszínt megörökli minden további elem a dokumentumunkban. Alkalmazási formái, szintaxisa CSS stílusok alkalmazására háromféle módunk van: Közvetlenül a HTML tageken Tudjuk alkalmazni közvetlen a HTML elemeken a style= attribútum megadásával. Például ha egy szöveg színét szeretnénk pirosra állítani, és a méretét 20 pixelre venni: <p style= color:red; font-size:20px; >Ez egy piris szöveg</p> Mint a példában látható, a style attribútumnak egyszerűen csak felsoroljuk, hogy milyen stílusokkal szeretnénk azt ellátni. Egyszerű módszer, de az alkalmazása kerülendő, mert egyrészt nehezen átlátható HTML kódot eredményez egy nagyobb dokumentumnál, másrészt nem tudjuk ezt a stílust több elemre alkalmazni, hanem mindegyikhez meg kell adni ezt az attribútum értéket külön: <p style= color:red; font-size:20px; >Piros szöveg első bekezdés</p> <p style= color:red; font-size:20px; >Piros szöveg második bekezdés</p> <p style= color:red; font-size:20px; >Piros szöveg harmadik bekezdés</p> HTML dokumentum fejlécében Sokkal elegánsabb és jobban is alkalmazható módszer, ha a stílus definíciókat külön írjuk a HTML elemektől. Ehhez az egyik módszer, ha a HTML dokumentumunk fejlécébe tesszük azokat:
2 <head> <style> p { color:red; font-size:20px; } </style> </head> <p>piros szöveg első bekezdés</p> <p>piros szöveg második bekezdés</p> <p>piros szöveg harmadik bekezdés</p> A fenti példában is ugyanazt érjük el, mint az elsőben láthatót, azaz pirosra állítjuk a paragrafus tagek színét és 20 pixel betűméretet adunk nekik. Viszont ahelyett, hogy külön megadnánk ezt minden tagnek, egyszerűen hivatkozunk mindegyikre, ezáltal mindegyiknek megadva ugyanazt a stílust. Ebben az esetben a stílus definíciókat a <style> és </style> tagek között kell elhelyezni, amiket pedig a HTML dokumentumunk fejlécébe, azaz a <head> </head> között kell elhelyezni. Mivel stílus definícióban csak egy p szelektort (ezekről részletesebben is szót ejtünk még) adtunk meg, ez azt fogja jelenteni, hogy érvényes lesz a HTML dokumentumunk minden p tagjére. Fontos, hogy a szelektor után, magukat a stílus paramétereket { } jelek között kell megadnunk és ; -vel kell őket lezárni. Külső fájlként. A második megoldás már sokkal esztétikusabb, és mint látható, jobban is alkalmazható volt az elsőnél, azonban egy összetettebb weboldalnál ez sem a legpraktikusabb. Hiszen ha több HTML fájlból áll az oldalunk, akkor mindegyik fejlécébe el kell helyeznünk ezeket a stílusokat. Ez nagyon nehézé teszi a későbbi szerkesztést, hiszen ha valamin változtatni szeretnénk, akkor minden fájlban át kell írnunk, amit szeretnénk. Szerencsére lehetőségünk van külön CSS fájlok alkalmazására, amire aztán minden HTML fájlból hivatkozhatunk. Hogy is valósítható ez meg? Nagyon egyszerűen: <head> </head> <link rel="stylesheet" href="style.css" /> A példában látható <link> taggel tudunk külső fájlra hivatkozni, ami a mi esetünkben egy stylesheet, azaz stíluslap. A href= paraméternek pedig a CSS fájlunk nevét és elérési útját kell megadnunk. Mivel ebben a példában a style.css fájlunk azonos mappában foglal helyet pl. a
3 tárhelyünkön, mint a html fájlunk, amiből hivatkozunk rá, így elérési útvonalat itt most nem adunk meg, ez egyértelműen azt jelenti, hogy az adott css fájl azonos mappában található a hivatkozó html fájllal. Magába a style.css-be pusztán a CSS kódot kell elhelyeznünk. Tehát ha a fenti példákat szeretnénk így megvalósítani, akkor a fájlba csupán ennyi kerül: p { color:red; font-size:20px; } Ez a legjobban alkalmazható megoldás a CSS használatára. Könnyen szerkeszthető, hiszen minden definíciót egy fájlban látunk, és ezt alkalmazhatjuk akár több száz HTML dokumentumra is, ami módosításnál nagyon megkönnyíti a dolgunkat. A tananyag további részében mi a harmadik, azaz a külső fájlos megoldást használjuk. Azonban az első két példának is van létjogosultsága, csak többnyire speciális esetben láthatunk példát az alkalmazására. Szelektorok A szelektorok segítségével tudunk hivatkozni a HTML elemekre, melyeknek a stílusát szeretnénk definiálni. A HTML elemeket négyféle szelektorral tudunk kiválasztani: Minden tag kiválasztása Lehetőségünk van a HTML dokumentum összes elemének kiválasztására a * karakter használatával. Például: * { color:red; } Hatására minden HTML tagben elhelyezett szöveg piros lesz. Ezt azonban nagyon ritkán alkalmazzuk. Tag neve alapján Az előző részben ezzel már kicsit megismerkedtünk. Tudunk taget kiválasztani, pusztán a neve megadásával: p { color:red; } h1 { color:blue } Ez a HTML dokumentum összes p és h1 elemére hivatkozunk.
4 Leszármaztatás alapján Ha bizonyos HTML tageken belüli tagekre szeretnénk hivatkozni, azt is egyszerűen kivitelezhetjük: p span { color:red } table h2 { color:blue } Ez esetben az első definíció minden span tagre vonatkozik, ami egy p tagben van, még a második minden olyan h2 tagre, ami egy táblázatban foglal helyet. Ezt tetszőlegesen bármilyen mélységig tudjuk alkalmazni, ha szeretnénk szűkíteni a stílus alkalmazásának körét. Például: table form p span { color:red; } Class vagy id attribútumok alapján A HTML tageket lehetőségünk van ellátni osztályokkal és egyedi azonosítókkal, amikre aztán a CSS-ünkben hivatkozni tudunk. A tagekhez osztályt a class= attribútummal tudunk rendelni, még azonosítót az id= attribútummal. Osztály és azonosító között egy fontos különbség van, hogy még egy tag rendelkezhet több osztállyal, vagy több tag egyazon osztállyal, addig azonosítóból csak egy lehet egy tagnek, illetve egy azonosító csak egyszer szerepelhet a HTML fájlunkban. Egy egyszerű példák a szelektorok használatára A HTML rész, amely a HTML dokumentumunkban foglal helyet: <h1 id= nagy-zold >Egy nagy, zöld színű cím</h1> <p class= piros >Piros betűs szöveg</p> <p class= piros nagybetus >Nagy, piros betűs szöveg</p> A CSS rész, amely egy külső CSS fájlba, vagy a HTML fájlunk fejlécébe kerül: #nagy-zold { font-size:40px; color:green;}.piros { color:red; }.nagybetus { font-size:20px; } Mint a példában látható <h1> tagnek azonosítót adtunk. Ez csak az övé, máshol nem használhatjuk a dokumentumban. CSS-ben a # jelel tudunk hivatkozni a nevére, ez jelöli, hogy ő egy azonosító szelektor. A p tageket osztályokkal láttunk el. Ezeket akár több elemre is lehet használni és szóközzel elválasztva bármennyit megadhatunk. A példában minden piros osztályú <p> taget piros szövegszínre állítottunk, még az utolsó <p> taget nagybetűsre is vettünk. További használati példák: <h1 class= piros >Piros betűs cím</h1>
5 <p class= piros >Piros betűs szöveg</p> <p class= kek >Ez pedig egy <span class= vastag >kék betűs szöveg</span></p> h1.piros { color:red } Csak azokat a <h1> tageket választja ki, amelyek rendelkeznek.piros osztállyal. Tehát megadjuk a tag nevét, és hozzáírva az osztályát..piros,.kek { font-size:20px; } Vesszővel való felsorolással több szelektornak is megadhatjuk ugyanazt a stílust. Például minden.piros és.kek szelektorú elem legyen 20 pixel méretű. Ugyanezt alkalmazhatjuk tag felsorolással is: h1, p { } h1, p span.vastag { font-weight:bold; } Minden <H1> tag és olyan span elem amely rendelkezik a.vastag osztállyal és egy <p> tagben van. h1 { color:green; }.piros { color:red } Első definícióval beállítunk minden <h1> tagnek zöld szint. Másodikban pedig minden.piros osztálynak egy piros szint. Mivel a <h1> tag is rendelkezik a.piros osztállyal, így ez a zöld beállítást felül fogja bírálni. Viszont azok a <h1> elemek, amelyek nem rendelkeznek.piros osztállyal, maradnak zöldek. Pszeudo osztályok A pszeudo osztályokkal olyan elemeket, vagy állapotokat tudunk kiválasztani, amiket azonosítóval, vagy osztállyal nem. Ilyen például egy link rámutatáskor, vagy egy lista első, vagy legutolsó eleme. Például: a { color:red; } a:hover { color:blue; } Ezzel megadtuk, hogy minden link a HTML dokumentumunkban piros színű legyen, viszont ha rámutatunk, akkor kékre változzon. A pszeudo osztályokat mindig : -al kezdjük, ez utal arra, hogy ő nem egy sima, hanem pszeudo szelektor. Ugyanúgy összefűzhetjük egy láncba, mint sima szelektorokat: p.nagybetus a:hover { color: blue; } Tehát: Minden link legyen rámutatásra kék, amely egy olyan <p> elemben van, amelynek az
6 osztálya nagybetűs. Leggyakrabban használt pszeudo osztályok: :hover - Rámutatás esemény. Bármilyen elemre használható, nem csak linkekhez. :first-child - Valaminek az első eleme :last-child - Valaminek az utolsó eleme :nth-child(n) - Valaminek az n-edik eleme Tegyük fel, hogy van egy 5 elemből álló listánk: <ul class= lista > <li>lista első eleme</li> <li>lista második eleme</li> <li>lista harmadik eleme</li> <li>lista negyedik eleme</li> <li>lista ötödik eleme</li> </ul> Ha csak a lista első elemét szeretnénk színezni, akkor a :first-child szelektorral tudjuk azt elérni:.lista li:first-child { color: red; } Ha az utolsó elemet szeretnénk színezni:.lista li:last-child { color: red; } Ha pedig mindkettőnek egy stílust szeretnénk adni:.lista li:first-child,.lista:last-child { color: red; } Továbbá az :nth-cild segítségével lehetőségünk van bármelyik, vagy egy minta szerint, több elem kiválasztására: li:nth-child(3) { } - a lista elemekből a harmadikat fogja kiválasztani li:nth-child(2n) { } - a lista elemekből minden másodikat fogja kiválasztani li:nth-child(2n+3) { } - a lista elemekből minden másodikat választja ki, a harmadik elemtől kezdve li:nth-child(odd) { } - n paraméterként használhatjuk az odd (páratlan) és even (páros) szavakat A fentieket alkalmazhatjuk táblázat soraira, celláira, listákra, és tulajdonképpen minden olyan tagre, amiből több van, mint egy.
7
Webprogramozás szakkör
Webprogramozás szakkör Előadás 3. (2013.03.19) Bevezető HTML felelevenítés HTML elemei Tag-ek, például: , , , Tulajdonságok, például: size, bgcolor Értékek, például: 4, black, #FFFFF
RészletesebbenMultimédia 2017/2018 II.
Multimédia 2017/2018 II. 1. gyakorlat HTML5, CSS3 alapok Alapvető HTML5 elemek Egyszerű HTML dokumentum Oldal cime
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é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é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é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é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é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é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é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é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észletesebben2. Készítsen awk szkriptet, amely kiírja az aktuális könyvtár összes alkönyvtárának nevét, amely februári keltezésű (bármely év).
1. fejezet AWK 1.1. Szűrési feladatok 1. Készítsen awk szkriptet, ami kiírja egy állomány leghosszabb szavát. 2. Készítsen awk szkriptet, amely kiírja az aktuális könyvtár összes alkönyvtárának nevét,
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é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észletesebben1, Megnézzük a grafikát és megtervezzük az összerakáshoz szükséges blokkokat. Megkeressük, mi a fix elem és mi fog ismétlődni.
A kész Gimppel rajzolt grafikát összerakjuk CSS és XHTML sablonként. Az előzményekből egy állományra lesz szükség a veglegesweblap-sablon.xcf állományra. A fájlt kapjon egy m_ (m_vegleges-weblap-sablon.xcf)
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észletesebbenIsmétlés Érdemes megjegyezni: a HTML nyelv nem azért készült, hogy segítségével formázzuk a kinézetét/stílusát az oldalunknak, hanem azért, hogy leírj
CSS-től az űrlapig Ismétlés Érdemes megjegyezni: a HTML nyelv nem azért készült, hogy segítségével formázzuk a kinézetét/stílusát az oldalunknak, hanem azért, hogy leírjuk vele az oldalunk tartalmát, ezeket
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észletesebbenNeoCMS tartalommenedzselő szoftver leírása
NeoCMS tartalommenedzselő szoftver leírása A NeoSoft Informatika NeoCMS márkanévvel ellátott rendszere könnyen, gyorsan testre szabható tartalommenedzselő rendszer, mely egyedileg átalakítható, és így
Részletesebben(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é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é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é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é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észletesebben1. fejezet Bevezetés a web programozásába (Balássy György munkája)... 11 Az internet működése... 11
Tartalomjegyzék 1. fejezet Bevezetés a web programozásába (Balássy György munkája)... 11 Az internet működése... 11 Géptől gépig... 11 Számok a gépeknek... 13 Nevek az embereknek... 14 Programok egymás
Részletesebben1.1.1 Dátum és idő függvények
1.1.1 Dátum és idő függvények Azt már tudjuk, hogy két dátum különbsége az eltelt napok számát adja meg, köszönhetően a dátum tárolási módjának az Excel-ben. Azt is tudjuk a korábbiakból, hogy a MA() függvény
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é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é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észletesebbenAz SVG egy olyan XML alkalmazás, amit vektoros grafikai tartalmak létrehozására fejlesztettek ki.
SVG SVG Az SVG egy olyan XML alkalmazás, amit vektoros grafikai tartalmak létrehozására fejlesztettek ki. SVG = Scalable Vector Graphics A W3C fejlesztette ki, olyan neves cégekkel, mint pl. az Adobe Teljes
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észletesebbenw w w. h a n s a g i i s k. h u
Weblapkészítés weblap: hypertext kódolású dokumentumok, melyek szöveget képet linkeket, könyvjelzőket/horgonyokat táblázatokat / szövegdobozokat és más objektumokat tartalmaznak. Kódolásuk HTML (Hypertext
RészletesebbenA programozás alapjai 1 Rekurzió
A programozás alapjai Rekurzió. előadás Híradástechnikai Tanszék - preorder (gyökér bal gyerek jobb gyerek) mentés - visszaállítás - inorder (bal gyerek gyökér jobb gyerek) rendezés 4 5 6 4 6 7 5 7 - posztorder
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é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é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é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é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é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é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é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észletesebbenFelsô menü: Jogszabály- és dokumentumtár menüpont. Almenüpontok:
JogTárház Használati útmutató Felsô menü: Jogszabály- és dokumentumtár menüpont Almenüpontok: Jogszabályok Megjeleníti a teljes jogszabálylistát. A Következô oldal illetve az Elôzô oldal linkekre kattintva
RészletesebbenTájékoztató. Használható segédeszköz: -
A 35/2016. (VIII. 31.) NFM rendelet szakmai és vizsgakövetelménye alapján. Szakképesítés, azonosító száma és megnevezése 54 481 06 Informatikai rendszerüzemeltető Tájékoztató A vizsgázó az első lapra írja
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é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 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észletesebbenSzövegszerkesztés haladó MS word
Szövegszerkesztés haladó MS word Hosszú szövegek kezelése Ha változtatunk vmit, változik a tördelés. Ez hosszú szövegeknél gondot okozhat: Megváltozik az oldaltördelés A címek nem a lap tetején lesznek,
RészletesebbenA 35/2016. (VIII. 31.) NFM rendelet szakmai és vizsgakövetelménye alapján.
A 35/2016. (VIII. 31.) NFM rendelet szakmai és vizsgakövetelménye alapján. Szakképesítés azonosítószáma és megnevezése 54 481 06 Informatikai rendszerüzemeltető Tájékoztató A vizsgázó az első lapra írja
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észletesebbenGreenBox CMS - Smink modul Felhasználói kézikönyv
GreenBox CMS - Smink modul Felhasználói kézikönyv 2018. március Tartalom 1 A nulladik lépés: Tervezés... 3 2 Az első lépés... 3 3 Menürendszer kialakítása... 4 4 Tartalom feltöltése... 10 5 Portál kinézetének
RészletesebbenTájékoztató. Használható segédeszköz: -
A 12/2013. (III. 29.) NFM rendelet szakmai és vizsgakövetelménye alapján. Szakképesítés, azonosítószáma és megnevezése 54 481 06 Informatikai rendszerüzemeltető Tájékoztató A vizsgázó az első lapra írja
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észletesebbenONLINE SZAKÉRTŐI KERETRENDSZER
FELHASZNÁLÓI SEGÉDLET 1. ÁBRA 1.Lépés Szakértői rendszer főbb paramétereinek megadása 0. Ellenőrzés bekapcsolása (Ha első alkalommal használja a rendszert ajánlott kipipálni). A rendszer a megadott paramétereket
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észletesebbenMÁV-START Tudáspróba Felhasználói kéziköny
MÁV-START Tudáspróba Felhasználói kéziköny Tartalomjegyzék Bejelentkezés a tudáspróbára... 3 Kijelentkezés... 3 Megkezdett tudáspróba folytatása... 4 Tudáspróba kiválasztása... 5 Tudáspróba kiválasztása...
Részletesebben1. oldal, összesen: 5
1. oldal, összesen: 5 Elmélet Word 1. Döntse el az alábbi állításról, hogy a tagmondatok tartalma igaz-e, s A WORD helyesírás-ellenőrző rendszere minden helyesírási hibánkat kijavítja, mert felismeri,
Részletesebbenopenbve járműkészítés Leírás az openbve-hez kapcsolódó extensions.cfg fájl elkészítéséhez
Leírás az openbve-hez kapcsolódó extensions.cfg fájl elkészítéséhez 1. oldal openbve járműkészítés Leírás az openbve-hez kapcsolódó extensions.cfg fájl elkészítéséhez A leírás az openbve-hez készített
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észletesebbenEDInet Connector telepítési segédlet
EDInet Connector telepítési segédlet A cégünk által küldött e-mail-ben található linkre kattintva, a következő weboldal jelenik meg a böngészőben: Az EdinetConnectorInstall szövegre klikkelve(a képen pirossal
RészletesebbenA leírás bemutatja hogy mint minden másra, Favicon készítésre is alkalmas az ingyenes Gimp rajzolóprogram.
A leírás bemutatja hogy mint minden másra, Favicon készítésre is alkalmas az ingyenes Gimp rajzolóprogram. 1, Készítsünk egy 160 160-as új képet. Azért kell ekkora, hogy kényelmesen elférjünk benne, majd
Ré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észletesebbenA. Webes metaadat szerkesztő
ADATSZOLGÁLTATÁS központi honlap használata esetén 1. A 18/2005. IHM rendelet melléklete alapján össze kell állítani a közérdekű adatokat 2. Az elkészített dokumentumok feltöltése a központi honlapra:
Részletesebben1. kép. A Stílus beállítása; új színskála megadása.
QGIS Gyakorló Verzió: 1.7. Wroclaw Cím: A Print composer használata és a címkézés. Minta fájl letöltése innen: http://www.box.net/shared/87p9n0csad Egyre több publikációban szerepelnek digitális térképek,
Ré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é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észletesebbenII. ADATLAP - Programmodul részletes bemutatása
II. ADATLAP - Programmodul részletes bemutatása 1. A programmodul azonosító adatai 1.1. Program megnevezése Webszerkesztés, a web programozás alapjai 1.2.. A modul sorszáma 1 1.3. A modul megnevezése Web
RészletesebbenFelhasználói kézikönyv
Felhasználói kézikönyv Elektronikus Ügyintézés (EÜHT) Kézbesítési tárhely V 1.6 Utolsó mentés: 2015. 08. 11. TARTALOMJEGYZÉK 1. Bevezető... 3 2. Fogalomtár... 3 3. Kézbesítési Tárhely - szolgáltatás Intézmények
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észletesebbenWebAromo elindítása, bejelentkezés
WebAromo segédlet Tartalom WebAromo elindítása, bejelentkezés... 3 Jelszó beállítása... 3 Foglalkozások kezelése... 4 Hiányzások megadása... 5 Érdemjegy bevitele... 6 Érdemjegyek megtekintése... 8 Egy
RészletesebbenTáblázatok. Feladatok Szegélyek és cellák. 1. feladat. 2. feladat
Táblázatok A táblázatok cellákat tartalmazó sorokból és oszlopokból épülnek fel. A cellában szöveg, szövegközi grafikák és egyéb táblázatok is elhelyezhetők. A táblázat táblázatba történő beszúrásánál
RészletesebbenMinta a Szigetvár feladathoz
Minta a Szigetvár feladathoz A forrást (sziget.txt) megnyitjuk a Jegyzettömb segítségével és a szöveget a Vágólap segítségével átmásoljuk az alapértelmezetten megnyíló üres dokumentumba, majd elmentjük
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észletesebbenSZÁMÍTÁSOK A TÁBLÁZATBAN
SZÁMÍTÁSOK A TÁBLÁZATBAN Az Excelben az egyszerű adatok bevitelén kívül számításokat is végezhetünk. Ezeket a cellákba beírt képletek segítségével oldjuk meg. A képlet: olyan egyenlet, amely a munkalapon
RészletesebbenEgyszerűbb a Google keresőbe beírni a Sharepoint Designer 2007 letöltés kulcsszavakat és az első találat erre a címre mutat.
A feladat megoldásához a Sharepoint Designer 2007 programot használjuk, mely ingyenesen letölthető a Microsoft weboldaláról. Az érettségi aktuális szoftverlistája alapján az Expression Web 2, az Expression
Részletesebben8. Gyakorlat AWK 1, CSS
8. Gyakorlat AWK 1, CSS Az awk egy általános célú programozási nyelv, amelyet szöveges állományok földolgozására terveztek. Elnevezése a megalkotói Alfred Aho, Peter Weinberger és Brian Kernighan családnevének
RészletesebbenADATSZOLGÁLTATÁS központi honlap használata esetén
ADATSZOLGÁLTATÁS központi honlap használata esetén 1. A 18/2005. IHM rendelet melléklete alapján össze kell állítani a közérdekű adatokat 2. Az elkészített dokumentumok feltöltése a központi honlapra:
RészletesebbenAz MS Excel táblázatkezelés modul részletes tematika listája
Az MS Excel táblázatkezelés modul részletes tematika listája A táblázatkezelés alapjai A táblázat szerkesztése A táblázat formázása A táblázat formázása Számítások a táblázatban Oldalbeállítás és nyomtatás
Ré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é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észletesebben2013/2014.tanév TANMENET
2013/2014.tanév TANMENET a. osztály.. tantárgyának tanításához. Összeállította: Ellenőrizte: Jóváhagyta:... tanár munkaközösség vezető igazgató Sopron, 2013. szeptember 01. Informatika tanmenet a 12G.
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észletesebbenCikktípusok készítése a Xarayában
Cikktípusok készítése a Xarayában A Xaraya legfontosabb tulajdonsága az egyedi cikktípusok egyszerű készítésének lehetősége. Ezzel kiküszöbölhető egyedi modulok készítése, hiszen néhány kattintással tetszőleges
RészletesebbenDiagram készítése. Diagramok formázása
Diagram készítése Diagramok segítségével a táblázatban tárolt adatainkat különféle módon ábrázolhatjuk. 1. A diagram készítésének első lépése az adatok kijelölése a táblázatban, melyekhez diagramot szeretnénk
RészletesebbenVihar 2.0 rendszer Felhasználói kézikönyv
Vihar 2.0 rendszer Felhasználói kézikönyv Versenyzői funkciók O l d a l 0 21 Tartalomjegyzék Tartalom Tartalomjegyzék... 0 Bevezető... 1 Felhasználói funkciók... 2 Regisztráció... 2 Támogatott böngészők...
Ré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észletesebbenVáltozáskezelés Verzió Dátum Változás Pont Cím Oldal Kiadás: Verzió: 2.0. Oldalszám: 2 / 7
Átsorolás Felhasználói dokumentáció verzió 2.0. Budapest, 2008. Változáskezelés Verzió Dátum Változás Pont Cím Oldal Kiadás: 2008.07.10. Verzió: 2.0. Oldalszám: 2 / 7 Tartalomjegyzék 1. Átsorolás-kérési
RészletesebbenC++ referencia. Izsó Tamás február 17. A C++ nyelvben nagyon sok félreértés van a referenciával kapcsolatban. A Legyakoribb hibák:
C++ referencia Izsó Tamás 2017. február 17. 1. Bevezetés A C++ nyelvben nagyon sok félreértés van a referenciával kapcsolatban. A Legyakoribb hibák: Sokan összetévesztik a pointerrel. Keveset alkalmazzák
Részletesebben(statikus) (X)HTML oldalak, stíluslapok. Mi a HTML? HTML (HyperText Markup Language) - Hiperszöveges
Áttekintés (statikus) (X)HTML oldalak, stíluslapok A HTML története (X)HTML oldal felépítése Egymásba ágyazható stíluslapok CSS 1 / 1 2 / 1 Mi a HTML? A HTML története HTML (HyperText Markup Language)
RészletesebbenSZABÁLYZATOK FORMÁTUMLEÍRÁSA
TOMORI PÁL FİISKOLA SZABÁLYZATOK FORMÁTUMLEÍRÁSA Változat száma: 1. Elfogadás dátuma: 2007. január 3. Határozat száma: 2007/1/6. Hatályos: 2007. január 3. Felelıs személy: Tóth Péter, fıtitkár oldalszám:
Részletesebben(statikus) (X)HTML oldalak, stíluslapok
(statikus) (X)HTML oldalak, stíluslapok 1 / 37 Áttekintés A HTML története (X)HTML oldal felépítése Egymásba ágyazható stíluslapok CSS 2 / 37 Áttekintés A HTML története (X)HTML oldal felépítése Egymásba
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észletesebben91. MP költséghelyek felvitele, 94. MP mozgástípus konfigurálása
91. MP költséghelyek felvitele, 94. MP mozgástípus konfigurálása 91. MP - költséghelyek felvitele Ez a menüpont arra alkalmas, hogy új költséghelyeket egyesével vigyünk fel. A menüpontba belépve az alábbi
RészletesebbenObjektumok és osztályok. Az objektumorientált programozás alapjai. Rajzolás tollal, festés ecsettel. A koordinátarendszer
Objektumok és osztályok Az objektumorientált programozás alapjai Rajzolás tollal, festés ecsettel A koordinátarendszer A vektorgrafikában az egyes grafikus elemeket (pontokat, szakaszokat, köröket, stb.)
RészletesebbenAromo Szöveges Értékelés
Aromo Szöveges Értékelés AROMO Iskolaadminisztrációs Szoftver v2.50 - Felhasználói kézikönyv- Szöveges értékelés 1 Tartalomjegyzék Aromo Szöveges Értékelés 1 Bevezetés 3 A Szöveges Értékelés modul koncepciója
RészletesebbenAlapok: Használd számológép helyett
Alapok: Használd számológép helyett Az Excelt ugyanúgy használhatod, mint a számológépet, vagyis bármit ki tudsz vele számolni. Egész egyszerűen csak írj egy egyenlőségjelet a sor elejére és aztán ugyanúgy,
RészletesebbenFatömegbecslési jegyzőkönyvek
Fatömegbecslési jegyzőkönyvek ERDŐGAZDÁLKODÁS/FAHASZNÁLAT/FATÖMEGBECSLÉSI JEGYZŐKÖNYVEK A fatömegbecslési jegyzőkönyvek erdőrészlethez kapcsolódnak. Egy erdőrészlethez több jegyzőkönyv készíthető. Egy
RészletesebbenMindezek közben célszerű bekapcsolva tartani a Minden látszik gombot, hogy a bekezdésjelek és az egyéb rejtett formázási szimbólumok megjelenjenek.
Részlet a mintából A forrást megnyitjuk a Jegyzettömb segítségével és a szöveget a Vágólap segítségével átmásoljuk az alapértelmezetten megnyíló üres dokumentumba, majd elmentjük a vizsgamappába. Ügyeljünk
RészletesebbenProgramozási környezetek
KOVÁSZNAI GERGELY ÉS BIRÓ CSABA EKF TTK Információtechnológia Tanszék Programozási környezetek Alkalmazható természettudományok oktatása a tudásalapú társadalomban TÁMOP-4.1.2.A/1-11/1-2011-0038 WPF Bevezetés
RészletesebbenMinőségellenőrzési kérdőív kitöltő program Felhasználói kézikönyv
Minőségellenőrzési kérdőív kitöltő program Felhasználói kézikönyv Magyar Könyvvizsgálói Kamara 2010. augusztus 18. Tartalom A program főablaka... 3 A fejléc, a felső menüsor valamint az eszköztár... 4
Részletesebben