Stíluslapok használata

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

Download "Stíluslapok használata"

Átírás

1 Stíluslapok használata

2 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 elemeinek az elrendezését szabályozzák formázási tulajdonságok: a weblap elemeinek a megjelenését szabályozzák 2. A stíluslapok használatának előnyei: a) Sok formázási lehetőség van b) Több weblap is formázható egyszerűen ugyanúgy c) A tartalom és a forma külön-külön is módosítható 3. A stíluslapok használatának hátránya: a) Nem minden böngésző értelmezi ugyanúgy ugyanazt a formázó utasítást (különösen az újdonságokat)

3 A CSS rövid története 1990: Egy weblap tartalmát és formázását szét kellene választani 1993: Az első grafikus böngésző, a Mosaic megjelenése 1994: A CSS (Cascading Style Sheets, 'lépcsőzetes stíluslapok') ötlete 1996: CSS 1 (javítása: 1999) 1997: CSS 2 (javítása: 2007) 2001: CSS 3 fejlesztésének elindítása

4 Stíluslapok és a weblapok kapcsolata Szövegközi (kódon belüli) stílus: a) A weblap törzsében helyezkedik el b) Csak egy elemre vonatkozik. c) Az elem style paraméterének értékeként adhatók meg (idézőjelben, az egyes stílusokat pontosvesszővel elválasztva). d) Nem minden stílus használható. e) Ritkán használják f) Az ugyanarra az elemre vonatkozó szövegközi stílusleírás felülbírálja a külső és belső stílusleírást

5 Stíluslapok és weblapok kapcsolata 2. Beágyazott (belső) stíluslap: A <head>...</head> tagok közötti fejrészbe helyezendő el: <style> itt jönnek a stílusleírások </style> Egy teljes weblapra vonatkozik Az ugyanarra az elemre vonatkozó belső stílusleírás felülbírálja a külső stílusleírást

6 Stíluslapok és weblapok Külső stíluslapok kapcsolata 3. A stílusok egy különálló,.css kiterjesztésű fájlban vannak felsorolva, ezért ez több weblaphoz is csatolható A stíluslapfájl leggyakoribb csatolási módja a HTMLfájlhoz: a <head>...</head> közé elhelyezve: <link>, a lehetséges paraméterek: rel= stylesheet (a hivatkozott fájl egy stíluslap) href= a css fájl elérési útvonala és azonosítója Több külső stíluslap csatolása a <head> és </head> közé elhelyezett megfelelő url(a stíluslap elérési útvonala és azonosítója) utasítással történik

7 Egy stílus (stílusszabály) szerkezete kijelölő {tulajdonság: érték} kijelölő (selector, elemválasztó, kiválasztó, szelektor): melyik HTML elem tulajdonságát állítjuk be tulajdonság (attributum): a HTML elem melyik jellemzőjét állítjuk be érték (value): a tulajdonságnak milyen értéket adunk

8 Meghatározások és kijelölők csoportos megadása meghatározás (declaration): a tulajdonság: érték páros együttes neve több meghatározás megadása esetén közéjük pontosvesszőt kell tenni meghatározásblokk: a kapcsos zárójelben lévő egy vagy több meghatározás együtt több kijelölő esetén (ha mindegyikhez ugyanaz a meghatározásblokk tartozik) közéjük vesszőt kell tenni

9 A kijelölők legfontosabb típusai általános kijelölő: * az összes HTML elemre vonatkozik egyszerű kijelölő: elemnév csak a megadott nevű elemre vonatkozik (a weblapon az összesre) osztálykijelölő: elemnév.osztálynév az adott osztályba tartozó adott elemre vonatkozik egy HTML elemet osztályba sorolni a class paraméterrel lehet egy weblapon több elem is lehet ugyanabban az osztályban ha nincs elemnév, akkor az összes adott osztályú elemre vonatkozik azonosító kijelölő: elemnév#azonosítónév az adott elemek közül az adott azonosítójúra vonatkozik egy HTML elemnek azonosítót adni az id paraméterrel lehet egy weblapon több elemnek nem lehet ugyanaz az azonosítója ha nincs elemnév, az összes olyan azonosítójú elemre vonatkozik gyermekkijelölő: szülőelem > gyermekelem

10 Az értékek fajtái 1. Szám Csak a 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 számjegyeket és (tizedesvesszőként) a pontot tartalmazhatja Ha egy tizedes tört egész része 0, akkor elhagyható A + vagy előjel és a szám közé nem kell szóköz Százalék A számot szóköz nélkül követő % jel a szám századrészét jelenti

11 Az értékek fajtái 2. Mennyiségek: a mérőszám és a mértékegység közé nem kell szóköz ha a mérőszám 0, nem kell kiírni a mértékegységet Hossz-mértékegységek Abszolút (független) hossz-mértékegységek: a megjelenítő eszköztől függ, más hosszmértékegységtől független in (", inch, hüvelyk, coll): 1in = 2.54cm cm (centiméter): 1cm = 0.394in mm (milliméter): 1mm = 0.1cm = in pt (pont): 1pt = 0.352mm, 1in = 72pt pc (pica): 1pc = 12pt = 4,23mm

12 Az értékek fajtái 3. Relatív hossz-mértékegységek: a megjelenítő eszköztől független, más hossz-mértékegységtől függ em: Az adott méretű karaktertípusban a nagy M betű magasságához (mint 100%-hoz) viszonyított érték. ex: Az adott méretű karaktertípusban a kis x betű magasságához (mint 100%-hoz) viszonyított érték. A legtöbb böngésző úgy számolja,hogy 1ex = 0.5em. px (pixel): A képernyőn megjelenő ki négyzet (a képpont vagy pixel) nagysága. Bár a CSS a 96px = 1in összefüggéssel határozza meg a px mértékegységet, a legtöbb böngésző a képernyőn lévő képpontok egy oldalának a hosszát tekinti 1px-nek

13 Az értékek fajtái 4. Színek #RRGGBB: az egyes alapszínek (vörös, zöld, kék) mértékét megadó, egyenként kétjegyű (00 és FF közötti) hexadecimális (tizenhatos számrendszerbeli) szám #RGB: a hat hexadecimális számjegyből álló jelölés rövidebb formában, ahol mindegyik számjegyet duplán kell érteni Ezzel a módszerrel nem minden szín adható meg. rgb(r,g,b): mindegyik alapszín mértékét megadó szám 0 és 255 közötti egész szám lehet

14 Az értékek fajtái 5. Színek (folytatás) rgb(rrr.rr%, bbb.bb%, ggg.gg%): mindegyik alapszín mértékét megadó, legfeljebb két tizedesjegy pontosságú, %-ban kifejezett, 0.00% és % közötti érték név: aqua (akvamarinkék), black (fekete), blue (kék), fuchsia (mályvaszín), gray (szürke), green (zöld), lime (világoszöld), maroon (gesztenyebarna), navy (mélykék), olive (olajzöld), orange (narancssárga), purple (lila), red (vörös), silver (ezüstszürke), teal (pávakék), white (fehér), yellow (sárga) stb. nem minden böngésző értelmezi mindet ugyanúgy transparent: átlátszó

15 Az értékek fajtái 6. fájlok elérési útvonala: url("elérési útvonal/fájl-azonosító") Kulcsszavak minden tulajdonságnál mások a kulcsszavak még az ugyanolyan alakú kulcsszavak (pl.: normal, none) más tulajdonságnál mást jelentenek az inherit (öröklés) kulcsszót minden tulajdonságnál használhatjuk, és a jelentése is ugyanaz: a tulajdonság a szülőelemtől veszi át az értékét

16 Öröklődés egy weblapon szülőelem az a HTML elem, amely tartalmaz egy másik HTML elemet gyermekelem az a HTML elem, amelyet tartalmaz egy másik HTML elem öröklődés egy gyermekelemnek alapértelmezésben (ha nem adjuk meg külön) ugyanazok a tulajdonságai, mint a szülőelemnek

17 Háttértulajdonságok 1. background-color: háttérszín background-image: háttérkép background-attachment: a háttérkép csatolási módja (viselkedése) scroll: a dokumentummal együtt gördül (alapérték) fixed: a dokumentum gördülésekor a háttérkép a helyén marad

18 Háttértulajdonságok 2. background-position: a háttérkép helye először a vízszintes helyzet adható meg: % vagy px értékkel, left (balra), center (középen) vagy right (jobbra) utána a függőleges helyzet adható meg: % vagy px értékkel, top (fent), center (középen) vagy bottom (lent) negatív értékek is megadhatók az alapérték mindkét irányban: center (50%)

19 Háttértulajdonságok 3. background-repeat: háttérkép ismétlődése repeat: mindkét irányban, mozaikszerűen (alapérték) repeat-x: csak vízszintesen repeat-y: csak függőlegesen no-repeat: nincs ismétlődés

20 Szövegtulajdonságok 1. color: szövegszín direction: a szöveg kiírási iránya ltr: balról jobbra (alapérték) rtl: jobbról balra font-family: karaktertípus font-style: karakterstílus normal: normál italic: dőlt

21 Szövegtulajdonságok 2. font-size: karakterméret adott méret xx-small, x-small, small, medium, large, x-large, xx-large: előre beállított értékek smaller: a szülőobjektum karakterméreténél kisebb larger: a szülőobjektum karakterméreténél nagyobb

22 Szövegtulajdonságok 3. font-weight: a karakter kövérsége (vonalának vastagsága) normal: normál bold: vastag bolder: az előzőnél vastagabb lighter: az előzőnél vékonyabb 100, 200, 300, 400, 500, 600, 700, 800, 900: egyre kövérebb karakterek

23 Szövegtulajdonságok 4. letter-spacing: a karakterek közötti vízszintes távolság (betűköz) normal: normál adott méret a negatív szám sűrített karaktereket eredményez text-decoration: szövegdíszítés none: nincs underline: aláhúzott overline: felülhúzott line-through: áthúzott blink: villogó

24 Szövegtulajdonságok 5. text-indent: a szövegblokk első sorának behúzása adott méret a blokk szélességének %-a text-transform: a szöveg átalakítása none: nincs capitalize: szavak nagybetűvel kezdődnek uppercase: nagybetűs lowercase: kisbetűs

25 Szövegtulajdonságok 6. white-space: térközkezelés normal: hagyományos, normál pre: megőrzi a szóközöket, sortöréseket, tabulátorokat nowrap: nincs sortörés, csak a következő <br> HTML elemnél word-spacing: a szavak közötti szóköz normal: normális adott méret

26 Szövegtulajdonságok 7. line-height: a sorok közötti távolság (sorköz) normal: normál (a böngésző beállítása határozza meg) adott méret az aktuális karakterméret valahány %-a text-align: a bekezdés igazítása left: balra right: jobbra center: középre justify: sorkizárt

27 Listatulajdonságok 1. list-style-type: a listajel stílusa none: nincs listajel rendezetlen lista (felsorolás) esetén: disc (kitöltött kör, alapértelmezett), circle (üres kör), square (kitöltött négyzet) rendezett (számozott) lista esetén: decimal (arab számok, alapértelmezett), decimal-leading-zero (arab számok bevezető nullával), upper-alpha (nagybetűk), lower-alpha (kisbetűk), upper-roman (nagybetűs római számok), lower-roman (kisbetűs római számok), lower-greek (görög kisbetűk), hebrew (héber számok), armenian (örmény számok), georgian (grúz számok) stb.

28 Listatulajdonságok 2. list-style-position: a listajel helye inside: benn a szövegben, a szöveggel együtt behúzva outside: a szövegen kívül list-style-image: egy kép megadása listajelként a list-style-type tulajdonságot is meg kell adni, bár a kép fog megjelenni a beállított alakzat helyett megadási módok: a képfájl elérési útvonala none: nincs

29 Dobozmodell 1. külső margó (margin) szegély, keret (border) térköz, belső margó (padding) tartalom (content)

30 Dobozmodell 2. A tartalom tulajdonságai: width: a tartalom szélessége height: a tartalom magassága A térköz (belső margó, a tartalom és a szegély távolságának) tulajdonságai: padding: a négy térköz együttes mérete padding-bottom: az alsó térköz mérete padding-top: a felső térköz mérete padding-left: a bal térköz mérete padding-right: a jobb térköz mérete

31 Dobozmodell 3. A szegély (keret) vastagsága: border-width: az összes szegély vastagsága border-bottom-width: az alsó szegély vastagsága border-top-width: a felső szegély vastagsága border-left-width: a bal szegély vastagsága border-right-width: a jobb szegély vastagsága ezek lehetséges értékei: konkrét érték, thin (vékony), medium (közepes), thick (vastag)

32 Dobozmodell 4. A szegély (keret) színe: border-color: az összes szegély színe border-bottom-color: az alsó szegély színe border-top-color: a felső szegély színe border-left-color: a bal szegély színe border-right-color: a jobb szegély színe ezek lehetséges értékei: konkrét érték

33 Dobozmodell 5. A szegély (keret) stílusa: border-style: az összes szegély stílusa border-bottom-style: az alsó szegély stílusa border-top-style: a felső szegély stílusa border-left-style: a bal szegély stílusa border-right-style: a jobb szegély stílusa ezek lehetséges értékei: none (nincs szegély), double (kettős), hidden (rejtett), groove (bemélyített), dotted (pontozott), ridge (kidomborodó), dashed (szaggatott), inset (süllyesztett, befelé árnyékolt), outset (kiemelkedő, kifelé árnyékolt), solid (folytonos, alapértelmezett)

34 Dobozmodell 6. A külső margó tulajdonságai: margin: az összes margó mérete margin-bottom: az alsó margó mérete margin-top: a felső margó mérete margin-left: a bal margó mérete margin-right: a jobb margó mérete

35 A relatív (más elemhez viszonyított) elrendezés display: az adott elemnek más elemhez viszonyított relatív elrendezésének megadása, a leggyakoribb értékek: block: az elem új bekezdésben jelenik meg list-item: az elem új sorban jelenik meg, előtte egy listacímkével inline: az elem az előzővel egy bekezdésben jelenik meg none: az elem nem jelenik meg

36 A pozicionálás (az abszolút elrendezés) módja position: annak megadása, hogy mihez viszonyítjuk egy elem helyzetét, a leggyakoribb értékek: static (statikus): az elem ott jelenik meg, ahol éppen tartunk a weblapon relative (relatív): a statikus helyzetéhez képest eltolva absolute (abszolút): a weblap bal felső sarkához viszonyított helyzet fixed (rögzített): az elem helyzete a képernyő adott helyéhez igazodik görgetésnél az elem a képernyőn mindig ugyanott marad

37 A pozíciók értéke annak megadása, hogy az elemnek melyik részét igazítjuk a lehetséges tulajdonságok: left: az elem bal széle top: az elem teteje bottom: az elem alja right: az elem jobb széle

38 Körbefolyatás annak megadása, hogy egy elem hogyan illeszkedjen egy másik elemhez a float tulajdonság leggyakoribb értékei: left: az elem a másik elem mellett balra lesz (a másik elem jobbról folyja körbe az elsőt) right: az elem a másik elem mellett jobbra lesz (a másik elem balról folyja körbe az elsőt) none: az elem mellett nem lesz másik elem (nem illeszkedik egy másik elembe)

39 Körbefolyatás tiltása a clear tulajdonság lehetséges értékei: left: a bal oldal tiltása (a másik elem jobbról nem folyhatja körbe az elsőt) right: a jobb oldal tiltása (a másik elem balról nem folyhatja körbe az elsőt) both: mindkét oldal tiltása (a másik elem egyik oldalról sem folyhatja körül az elsőt) none: nincs tiltás (egy másik elem mindkét oldalról körbefolyhatja az elsőt) a körbefolyatás szabályozására vagy a float, vagy a clear tulajdonságot használjuk, együttesen nem célszerű őket használni

40 Rétegek kezelése cél: a dobozként kezelt elemek egymásra helyezése úgy, hogy fedjék egymást a z-index tulajdonság kezelése: érték: egész szám (alapértelmezés: 0) ha egy doboz z-indexe nagyobb, mint a másiké, akkor az feljebb van (eltakarja a másikat) azonos z-indexű dobozok közül az takarja el a másikat, amelyik később van megjelenítve (a HTML kód szövegében hátrébb van)

41 Megjelenítés a láthatóság (vagyis az, hogy az elem elfoglalja azt a helyet, amelyet rendes körülmények között elfoglalna, de közben látható vagy láthatatlan legyen-e) a visibility tulajdonsággal szabályozható, amelynek leggyakoribb értékei: visible: az elem látható hidden: az elem nem látható, rejtett (de a helye a weblapon megmarad) collapse: táblázatelemek (sorok vagy oszlopok) elrejtése, becsukása

42 Látszólagos (virtuális) elemválasztók Nem egy konkrét elemet jelölnek ki Jelölés: a (valódi) elem vagy osztály neve után, kettőspontot követően, szóköz nélkül a látszólagos elem vagy osztály neve következik Látszólagos elem (álelem): az adott elem egy részére hivatkozik Látszólagos osztály (álosztály): az adott elem állapotától teszik függővé a formázást

43 Látszólagos elemek (álelemek) :after: a böngésző által létrehozott tartalmat fűzi az elem tartalmának a végéhez :before: a böngésző által létrehozott tartalmat szúrja be az elem tartalma elé :first-letter: az elem első karaktere formázható vele (pl.: iniciálé készítése) :first-line: az elem első sora formázható vele

44 Látszólagos osztályok (álosztályok) :link: még nem látogatott hivatkozás :visited: már látogatott hivatkozás :hover: ha az egérkurzor az elem fölött áll (de még nem kattintottunk) :active: ha az elem aktív (rajta van az egérkurzor és le van nyomva az egérgomb, de még nincs felengedve) :focus: ha az elem fókuszban van (pl. egy szövegbeviteli mezőben van a szövegkurzor) :first-child: minden olyan elem, amelyik egy másik elem közvetlen (első szintű) gyermekeleme :lang: minden olyan elem, amelyik a megadott emberi nyelvű

DOBOZOK. A doboz négy részből áll: 1. Margó (margin) 2. Szegély (border) 3. Kitöltés (padding) 4. Tartalom (content)

DOBOZOK. 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észletesebben

Tamás Ferenc: CSS táblázatok 2.

Tamá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észletesebben

Informatika 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 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észletesebben

Informatika 1. Informatika el adás. Kovács Kristóf, Pálovics Róbert. Budapesti M szaki Egyetem november 13.

Informatika 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

CSS-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 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észletesebben

Stíluslapok használata (CSS)

Stí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észletesebben

HTML ÉS PHP ŐSZI FÉLÉV

HTML É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észletesebben

Webszerkesztés stílusosan. Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján

Webszerkesztés stílusosan. Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján Webszerkesztés stílusosan Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján Tartalom HTML és CSS HTML vs. XHTML, CSS mi micsoda? XHTML nyelvtan: címkék, egyéb követelmények CSS nyelvtan:

Részletesebben

HTML parancsok (html tanfolyam témakörei)

HTML 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észletesebben

Multimédia 2017/2018 II.

Multimédia 2017/2018 II. Multimédia 2017/2018 II. 1. gyakorlat HTML5, CSS3 alapok Alapvető HTML5 elemek Egyszerű HTML dokumentum Oldal cime

Részletesebben

Web programozás. 3. előadás

Web programozás. 3. előadás Web programozás 3. előadás Űrlapok form label for input type select, option value szöveges mező: text textarea jelszó: password rádiógomb: radio jelölőnégyzet: checkbox küldés gomb: submit Web programozás

Részletesebben

(statikus) HTML (XHTML) oldalak, stíluslapok

(statikus) HTML (XHTML) oldalak, stíluslapok (statikus) HTML (XHTML) oldalak, stíluslapok Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok CSS Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok

Részletesebben

Tartalomjegyzé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 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észletesebben

XHTML é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.

XHTML é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észletesebben

vi CSS zsebkönyv Alapvetõ képi elrendezés Tömbszerû elrendezés Szövegközi elrendezés

vi 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észletesebben

HTML kódok. A www jelentése World Wide Web.

HTML 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észletesebben

HTML ÉS PHP AZ ALAPOKTÓL

HTML É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észletesebben

Weblapszerkeszté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. 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észletesebben

WCSS (Wap CSS), Wireless CSS

WCSS (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

Web programozás jegyzet 0.1 verzió. Pál László. Sapientia EMTE, Csíkszereda

Web programozás jegyzet 0.1 verzió. Pál László. Sapientia EMTE, Csíkszereda Web programozás jegyzet 0.1 verzió Pál László Sapientia EMTE, Csíkszereda 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,

Részletesebben

WEB TECHNOLÓGIÁK 3.ELŐADÁS

WEB 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észletesebben

XHTML és CSS Holló Csaba 11. A HTML dokumentum

XHTML é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

ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK ÁLTALÁNOS HTML KÓDOLÁSI TUDNIVALÓK

ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK ÁLTALÁNOS HTML KÓDOLÁSI TUDNIVALÓK ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK HTML dokumentum = weblap = weboldal = webpage Egy HTML dokumentum kiterjesztései: HTM vagy HTML STÍLUSLAP = Egy vagy több HTML utasítás, értékekkel ellátott paramétereinek

Részletesebben

(statikus) HTML (XHTML) oldalak, stíluslapok

(statikus) HTML (XHTML) oldalak, stíluslapok (statikus) HTML (XHTML) oldalak, stíluslapok Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok CSS Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok

Részletesebben

Webprogramozás szakkör

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észletesebben

CSS3 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? 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észletesebben

HTML 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. 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észletesebben

Webszerkeszté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 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észletesebben

Képek a HTML oldalon

Képek a HTML oldalon Képek a HTML oldalon Utolsó módosítás: 11/22/2004 13:07:28 Háttérkép Ahhoz, hogy az adott oldal háttérképpel rendelkezzen, a részben el kell helyeznünk a background="kep" paramétert, ahol a kép

Részletesebben

HTML alapok. HTML = HyperText Markup Language

HTML 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észletesebben

HTML alapok. A HTML az Internetes oldalak nyelve.

HTML 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

Lenyí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 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észletesebben

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.

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. 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észletesebben

Megoldás (HTML) <!DOCTYPE HTML> <html>

Megoldá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észletesebben

CSS-szintaxis. CSS alkalmazása HTML-re. <head> <style type="text/css"> </style> </head> <style "stilus.

CSS-szintaxis. CSS alkalmazása HTML-re. <head> <style type=text/css> </style> </head> <style stilus. CSS-szintaxis CSS alkalmazása HTML-re Külső stíluslap alkalmazása Médiatípus meghatározása (a deklarációk csak a megadott médiumon történő megjelenítésre lesznek érvényesek): Ugyanezzel az attribútummal

Részletesebben

INFO1 WEB, HTML, CSS

INFO1 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észletesebben

Szövegszerkesztés alapok WORD Formázások

Szö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észletesebben

HTML é s wéblapféjlészté s

HTML é s wéblapféjlészté s HTML é s wéblapféjlészté s 1. Melyik országból ered a hipertext-es felület kialakítása? USA Japán Svájc 2. Webfejlesztéskor ha a site-on belül hivatkozunk egy file-ra, akkor az elérési útnak... relatívnak

Részletesebben

HONLAPOK FORMÁZÁSI LEHETŐSÉGEINEK BŐVÍTÉSE A CSS NYELV SEGÍTSÉGÉVEL

HONLAPOK FORMÁZÁSI LEHETŐSÉGEINEK BŐVÍTÉSE A CSS NYELV SEGÍTSÉGÉVEL SZEGEDI TUDOMÁNYEGYETEM BÖLCSÉSZETTUDOMÁNYI KAR SZEGED HONLAPOK FORMÁZÁSI LEHETŐSÉGEINEK BŐVÍTÉSE A CSS NYELV SEGÍTSÉGÉVEL Szakdolgozat Készítette: Rimár Miklós Könyvtári informatikus szak Témavezető:

Részletesebben

HTML sablon tervezése

HTML 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észletesebben

Weblapszerkeszté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. 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észletesebben

Weblap készítése. Fapados módszer

Weblap készítése. Fapados módszer Weblap készítése Fapados módszer A számítógép beállítása Ha a kiterjesztések nem látszanak, akkor a következőt kell tennünk: A számítógép beállítása Ha a kiterjesztések nem látszanak, akkor a következőt

Részletesebben

5-ös lottó játék. Felhasználói dokumentáció

5-ö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észletesebben

Hol használjuk a szövegszerkesztőt? Az élet minden területén megtalálható: levelet, meghívót, dolgozatot, feladatlapot, könyvet is készíthetünk vele.

Hol használjuk a szövegszerkesztőt? Az élet minden területén megtalálható: levelet, meghívót, dolgozatot, feladatlapot, könyvet is készíthetünk vele. Szövegszerkesztés ALAPOK 2 3 Hol használjuk a szövegszerkesztőt? Az élet minden területén megtalálható: levelet, meghívót, dolgozatot, feladatlapot, könyvet is készíthetünk vele. 4 Miért használjuk a szövegszerkesztőt?

Részletesebben

Kövér betűk (bold) 1-es fejléc

Kövér betűk (bold) 1-es fejléc A HTML Stuktúra Amint a bevezetőben olvashattuk, minden HTML formátumú szövegfájl a utasítással kezdődik és a záró utasítással végződik. A dokumentumot a fejlécelemek vezetik be, melyek

Részletesebben

3. modul - Szövegszerkesztés

3. 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

Weblapszerkeszté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. 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észletesebben

SZE INFORMATIKAI KÉZÉS 1

SZE INFORMATIKAI KÉZÉS 1 SZE INFORMATIKAI KÉZÉS 1 A feladat megoldása során a Word 2010 használata a javasolt. Ebben a feladatban a következőket fogjuk gyakorolni: A papírméret és a margók beállítása. Stílusok létrehozása, módosítása

Részletesebben

Az 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. 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észletesebben

Táblázatok. Utolsó módosítás: 11/22/ :07:23

Tá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

Számológép. Bármilyen számítógépen működik, amin található böngésző és Java alkalmazás. Indító képernyő

Számológép. Bármilyen számítógépen működik, amin található böngésző és Java alkalmazás. Indító képernyő Felhasználói dokumentáció Számológép Feladat: JavaScript és CSS segítségével számológép készítése. Futtatási környezet: A http://10.0.0.101/~szabby/szgep.html linkre kattintva megjelenik az oldal. Az oldal

Részletesebben

font-size:12px; display:block; text-shadow: 0 1px 0 #FFFFFF;}

font-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észletesebben

3. modul - Szövegszerkesztés

3. 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észletesebben

Honlapkészítés. 2. Előadás CSS (Cascading Stlye Sheets Egymásba ágyazott stíluslapok) Paksy Patrik

Honlapkészítés. 2. Előadás CSS (Cascading Stlye Sheets Egymásba ágyazott stíluslapok) Paksy Patrik Honlapkészítés 2. Előadás CSS (Cascading Stlye Sheets Egymásba ágyazott stíluslapok) Paksy Patrik HTML nem elég jó! Minden szöveg formázása külön történik, így egy jól formázott oldalnál ugyanazt a stílust

Részletesebben

ÉRETTSÉGI MÁSODIK GYAKORLAT ELINDULÁS A PAPÍRMÉRET ÉS A MARGÓK BEÁLLÍTÁSA. ÜZLETI INFORMATIKAI ESZKÖZÖK Kiadványszerkesztés

ÉRETTSÉGI MÁSODIK GYAKORLAT ELINDULÁS A PAPÍRMÉRET ÉS A MARGÓK BEÁLLÍTÁSA. ÜZLETI INFORMATIKAI ESZKÖZÖK Kiadványszerkesztés 1 MÁSODIK GYAKORLAT ÉRETTSÉGI A feladat megoldása során a Word 2010 használata a javasolt. Ebben a feladatban a következőket fogjuk gyakorolni: A papírméret és a margók beállítása. Stílusok létrehozása,

Részletesebben

Információs technológiák 1. Gy: HTML alapok

Informá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észletesebben

I/1. Pályázati adatlap

I/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észletesebben

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

A HTML Stuktúra. 1. oldal, összesen: 8 oldal. mhtml:file://d:\vizsga\1\html kódok.mht. Betűtípusok, stílusok <b> <i> <u> <tt> 1. oldal, összesen: 8 oldal főoldal weboldalkészítés kereső optimalizálás HTML kód meta elemek képek beillesztése frame táblázatok XHTML XML CSS szabvány JavaScript vista tudás vista telepítése ingyen

Részletesebben

Memória játék. Felhasználói dokumentáció

Memória játék. Felhasználói dokumentáció Memória játék Felhasználói dokumentáció Feladat: JavaScript segítségével, olyan programot írni, mely összekeveri a lapokat, majd a felhasználónak kell párosítani. HTML oldalba ágyazva és CSS-el formázva.

Részletesebben

TABULÁTOROK TÁBLÁZATOK KÉSZÍTÉSE. A táblázatok készítésének lehetőségei:

TABULÁ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észletesebben

Képnézeget. Gépigény: Bármilyen számítógépen m ködik, amin található böngész és Internet elérés.

Képnézeget. Gépigény: Bármilyen számítógépen m ködik, amin található böngész és Internet elérés. Képnézeget Felhasználói dokumentáció Feladat: Java Script segítségével, olyan programot írni, mely képnézeget ként szolgál. Legalább 10 képet kell elhelyezni benne. Gombok választásával kell a design-ok

Részletesebben

2. ALKALOM. Bekezdés Elválasztás Tabulátor Vezérlıkarakterek Beállítás Oldalbeállítás BEKEZDÉS

2. ALKALOM. Bekezdés Elválasztás Tabulátor Vezérlıkarakterek Beállítás Oldalbeállítás BEKEZDÉS 2. ALKALOM Bekezdés Elválasztás Tabulátor Vezérlıkarakterek Beállítás Oldalbeállítás BEKEZDÉS Két ENTER közé esı szövegrészt kezel egy bekezdésként a szövegszerkesztı program. Bekezdés (alinea) tulajdonságok:

Részletesebben

HTML és CSS. Horváth Árpád május 6. Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár

HTML é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észletesebben

Szövegszerkesztés alapok

Szövegszerkesztés alapok Szövegszerkesztés alapok Libre Office Writer http://szabadut.fsf.hu/ Szöveg szerkesztő programok Editorok Szövegszerkesztők (Word processor) Kiadványszerkesztők (DTP) Fájlformátumok TXT fájlok editorok

Részletesebben

4. Javítás és jegyzetek

4. 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észletesebben

Minta a Szigetvár feladathoz

Minta 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észletesebben

Összetett feladatok. Föld és a Hold

Ö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észletesebben

Az Kompozer, illetve az NVU honlapszerkesztő program

Az 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észletesebben

Tervezés eszköztár. Alapszínek alap betűk. Háttérszín (háttérstílus) Betűszínek. Betűtípusok. w w w. h a n s a g i i s k. h u

Tervezés eszköztár. Alapszínek alap betűk. Háttérszín (háttérstílus) Betűszínek. Betűtípusok. w w w. h a n s a g i i s k. h u 6 Tervezés eszköztár Alapszínek alap betűk Háttérszín (háttérstílus) A diák háttere legyen világossárga! RGB (255,255,200) Betűszínek Állítsd át a betűszínt! Az 1. szöveg módosításával minden szövegszín

Részletesebben

Szö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:

Szö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észletesebben

Word IV. Élőfej és élőláb

Word IV. Élőfej és élőláb Word IV. Élőfej és élőláb A menüpont a Nézet legördülő menü Élőfej és élőláb parancsával érhető el. Ezután a megjelenő szaggatott részbe írhatjuk be a kíván szöveget. OLDALSZÁMFORMÁZÁS DÁTUMBESZÚRÁS VÁLTÁS

Részletesebben

6. Alkalom. Kép ClipArt WordArt Szimbólum Körlevél. K é p

6. Alkalom. Kép ClipArt WordArt Szimbólum Körlevél. K é p 6. Alkalom Kép ClipArt WordArt Szimbólum Körlevél K é p Képet már létezı képállományból vagy a Word beépített CLIPART képtárgyőjteményébıl illeszthetünk be. Képállományból kép beillesztése A szövegkurzort

Részletesebben

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

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

Részletesebben

A HONALPSZERKESZTÉS ALAPJAI. 50 feladat. a Debreceni Egyetem Informatikai Karának. Informatikus Könyvtáros szakos hallgatói számára

A HONALPSZERKESZTÉS ALAPJAI. 50 feladat. a Debreceni Egyetem Informatikai Karának. Informatikus Könyvtáros szakos hallgatói számára A HONALPSZERKESZTÉS ALAPJAI 50 feladat a Debreceni Egyetem Informatikai Karának Informatikus Könyvtáros szakos hallgatói számára Készítette: Jávorszky Ferenc Debrecen 2010. 1 1. Készítsen honlapot, amelynek

Részletesebben

Word V. tabulátortípus meg nem jelenik: Tabulátor - balra, Tabulátor - jobbra,

Word 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észletesebben

Hogyan készítsünk Colorbox-os képgalériát Drupal 7-ben?

Hogyan készítsünk Colorbox-os képgalériát Drupal 7-ben? Hogyan készítsünk Colorbox-os képgalériát Drupal 7-ben? (Jó segítség: http://www.youtube.com/watch?v=gstnfznz3hg) I. Telepteni kell az alábbi három dolgot 1. A Colorbox modult (https://www.drupal.org/project/colorbox)

Részletesebben

JAVÍTÁSI ÚTMUTATÓ Az útmutatóban szereplő pontszámok nem bonthatók tovább, csak a megadott módon! 1. Képszerkesztés feladat Meghívó

JAVÍTÁSI ÚTMUTATÓ Az útmutatóban szereplő pontszámok nem bonthatók tovább, csak a megadott módon! 1. Képszerkesztés feladat Meghívó F204-.foruló I. KATEGÓRIA JAVÍTÁSI ÚTMUTATÓ Az útmutatóban szereplő pontszámok nem bonthatók tovább, csak a megadott módon!. Képszerkesztés feladat Meghívó Meghívó Méret 000x500, mentés meghivo.png néven

Részletesebben

w w w. h a n s a g i i s k. h u

w w w. h a n s a g i i s k. h u Weblapkészítés weblap: hypertext kódolású dokumentumok, melyek szöveget képet linkeket, könyvjelzőket/horgonyokat táblázatokat / szövegdobozokat és más objektumokat tartalmaznak. Kódolásuk HTML (Hypertext

Részletesebben

ÜZLETI WEBTECHNOLÓGIÁK

ÜZLETI WEBTECHNOLÓGIÁK Írta: HOLLÓ CSABA ÜZLETI WEBTECHNOLÓGIÁK Egyetemi tananyag 2011 COPYRIGHT: 2011 2016, Dr. Holló Csaba, Szegedi Tudományegyetem Természettudományi és Informatikai Kar Szoftverfejlesztés Tanszék LEKTORÁLTA:

Részletesebben

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

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

Részletesebben

A 10/2007 (II. 27.) 1/2006 (II. 17.) OM

A 10/2007 (II. 27.) 1/2006 (II. 17.) OM A 10/2007 (II. 27.) SzMM rendelettel módosított 1/2006 (II. 17.) OM rendelet Országos Képzési Jegyzékről és az Országos Képzési Jegyzékbe történő felvétel és törlés eljárási rendjéről alapján. Szakképesítés,

Részletesebben

1. Számítógép-használati rend 19. Számonkérés 2. Mire jó a számítógép? 20. Az imagine varázslatos világa 3. A számítógép részei; Hardver, perifériák

1. Számítógép-használati rend 19. Számonkérés 2. Mire jó a számítógép? 20. Az imagine varázslatos világa 3. A számítógép részei; Hardver, perifériák 1. Számítógép-használati rend 19. Számonkérés 2. Mire jó a számítógép? 20. Az imagine varázslatos világa 3. A számítógép részei; Hardver, perifériák 21. Előre és hátra, jobbra és balra 4. Tartsunk előadást!

Részletesebben

Információs technológiák 2. Gy: CSS, JS alapok

Informá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észletesebben

Szövegszerkesztés. Microsoft Office Word 2010

Szövegszerkesztés. Microsoft Office Word 2010 Szövegszerkesztés Microsoft Office Word 2010 Szövegformázás A dokumentumszöveg formátumát meghatározó felépítés formázott - szöveg, - táblázat, - kép + stílusok + eszköztár beállítások Karakterek Bekezdések...

Részletesebben

élőfej és élőláb távolsága a lapszéltől (0,5 cm)

élőfej és élőláb távolsága a lapszéltől (0,5 cm) 0-.foruló. KGÓR. Harry Potter étezik harrypotter nevű állomány (típusa megfelelő), lapméret R a margók jók mindenhol a. oldaltól (f:,6 al:,9 bel:, kül:, tükör) sorköz a szövegtörzsben,-szeres (ahol nem

Részletesebben

Szövegkezelő programok általuk kínált lehetőségek

Szövegkezelő programok általuk kínált lehetőségek Szövegszerkesztés Szövegkezelő programok általuk kínált lehetőségek formázási lehetőségek WYSIWYG elv (What You See Is What You Get Amit látsz azt kapod) táblázat, grafika és egyéb objektumok nyelvi modulok

Részletesebben

Responsive Web Design. Dr. Nyéki Lajos 2019

Responsive Web Design. Dr. Nyéki Lajos 2019 Responsive Web Design Dr. Nyéki Lajos 2019 Bevezetés A responsive web design tervezési technika által létrehozott web oldalak skálázhatók, a web oldalt mobil telefon, táblagép és asztali számítógép böngészőjével

Részletesebben

Webprogramozás HTML alapok 2. 3. előadás

Webprogramozás HTML alapok 2. 3. előadás Webprogramozás HTML alapok 2. 3. előadás Hivatkozások - linkek Link: más webes tartalomra történő irányítás Hivatkozások - linkek abszolút hivatkozás fizika kar weboldala

Részletesebben

INFORMATIKA JAVÍTÁSI-ÉRTÉKELÉSI ÚTMUTATÓ

INFORMATIKA JAVÍTÁSI-ÉRTÉKELÉSI ÚTMUTATÓ Informatika középszint 0802 ÉRETTSÉGI VIZSGA 2008. május 27. INFORMATIKA KÖZÉPSZINTŰ GYAKORLATI ÉRETTSÉGI VIZSGA JAVÍTÁSI-ÉRTÉKELÉSI ÚTMUTATÓ OKTATÁSI ÉS KULTURÁLIS MINISZTÉRIUM Bevezetés A feladatok értékelése

Részletesebben

Szövegszerkesztés. Munkánk során figyelembe vesszük azt, hogy az irodai programcsomag szövegszerkesztői az alábbi elemeket kezelik.

Szövegszerkesztés. Munkánk során figyelembe vesszük azt, hogy az irodai programcsomag szövegszerkesztői az alábbi elemeket kezelik. erdeigrete.webnode.hu greta@korosy.hu Szövegszerkesztés Szövegszerkesztő programot használunk akkor, ha írásos munkánkat igényesen, esztétikusan, esetleg nyomtatásra szeretnénk elkészíteni. Munkánk során

Részletesebben

Internet, Az internet főbb szolgáltatásai web keresőszolgáltatásokkal Keresőrendszerek: Kulcsszavas 2) Egyéb keresők: Metakeresők gyűjtőkörű keresők

Internet, Az internet főbb szolgáltatásai web keresőszolgáltatásokkal Keresőrendszerek: Kulcsszavas 2) Egyéb keresők: Metakeresők gyűjtőkörű keresők Web alapok Az Internet, számítógépes hálózatok világhálózata, amely behálózza az egész földet. Az internet főbb szolgáltatásai: web (www, alapja a kliens/szerver modell) elektronikus levelezés (e-mail)

Részletesebben

HTML és CSS színes táblák

HTML és CSS színes táblák HTML és CSS színes táblák Ez a színes táblákból álló rész tovább gyarapítja és bõvíti a könyvben tanult XHTML és CSS megoldásokkal kapcsolatos ismereteinket. Az elsõ rész egy színmintasor, amelynek segítségével

Részletesebben

Fővárosi Középiskolai Informatika Alkalmazói Verseny Döntő

Fővárosi Középiskolai Informatika Alkalmazói Verseny Döntő Fővárosi Középiskolai Informatika Alkalmazói Verseny Döntő 1. Olimpia Általános Tartalom Címoldal Címek Alcímek Felsorolás Élőfej Létezik Olimpia nevű állomány (típusa megfelelő) lapméret: A/4, automatikus

Részletesebben

SZABÁLYZATOK FORMÁTUMLEÍRÁSA

SZABÁ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

Webkezdő. A modul célja

Webkezdő. 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észletesebben

2008/09 ősz 1. Word / Excel 2. Solver 3. ZH 4. Windows 5. Windows 6. ZH 7. HTML - CSS 8. HTML - CSS 9. ZH 10. Adatszerkezetek, változók, tömbök 11. Számábrázolási kérdések 12. ZH 13. Pótlás Alapfogalmak

Részletesebben

Szakdolgozat. Kmetti László

Szakdolgozat. Kmetti László Szakdolgozat Kmetti László Debrecen 2010 Debreceni Egyetem Informatikai Kar ( és web-marketing) Belső Témavezető: Dr. Zichar Marianna Egyetemi adjunktus Külső Témavezető: Vágvölgyi Csaba Főiskolai adjunktus

Részletesebben

Tájékoztató. Használható segédeszköz: -

Tá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észletesebben

Segédanyag a WORD használatához

Segé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észletesebben

Villamosmérnöki szak Alkalmazott informatika mellék szakirány Laboratórium II. (VIAU5102) World Wide Web lapok készítése (Silabusz)

Villamosmérnöki szak Alkalmazott informatika mellék szakirány Laboratórium II. (VIAU5102) World Wide Web lapok készítése (Silabusz) Villamosmérnöki szak Alkalmazott informatika mellék szakirány Laboratórium II. (VIAU5102) World Wide Web lapok készítése (Silabusz) HTML (Hyper Text Markup Language)...2 A HTML dokumentumokról...2 Néhány

Részletesebben