CSS-segédlet. 1. CSS és HTML Külső stíluslap HTML-hez csatolása
|
|
|
- Péter Vörös
- 9 évvel ezelőtt
- Látták:
Átírás
1 CSS-segédlet 1. CSS és HTML 1.1. Külső stíluslap HTML-hez csatolása A hivatkozást a HTML-dokumentum <HEAD> szakaszában kell elhelyezni. Ha a HTML- és a CSS-fájl nem ugyanazon könyvtárban van, akkor a HTML-ben a HREF után elérési utat is meg kell adni! Az elérési út lehetőleg relatív legyen! <HEAD> <LINK REL="stylesheet" TYPE="text/css" HREF="style.css"> </HEAD> A style.css helyett természetesen más nevet is kaphat a stíluslap, sőt, a.css kiterjesztés helyett is használhatunk bármit. Egy stíluslap több HTML-hez is csatolható, és egy HTML-hez több stíluslap is tartozhat. Ha egy szelektor több a HTML-hez csatolt stíluslapban is szerepel, akkor a beállítások mindegyike érvényes lesz rá. Ha ugyanazon szelektor ugyanazon tulajdonsága több stíluslapból is értéket kap, akkor a legutolsó beállítás lesz az érvényes. <HEAD> <LINK REL="stylesheet" TYPE="text/css" HREF="style1.css"> <LINK REL="stylesheet" TYPE="text/css" HREF="style2.css"> <LINK REL="stylesheet" TYPE="text/css" HREF="style3.css"> </HEAD> style1.css BODY { background-color: yellow; H1 { font-family: sans-serif; font-size: 16pt; style1.css H2 { font-family: sans-serif; font-size: 14pt; font-weight: bold; color: blue; H1 { font-weight: bold; style1.css BODY { background-color: gray; H2 { font-style: italic; H1 { font-weight: normal; A HTML-dokumentum háttérszíne szürke lesz, mert bár a style1.css sárgára állította be, a style3.css ezt felülbírálva szürkét határozott meg (a HTML-ben a style3.css-t importájuk később). A H1 elemek 16 pt-os talpnélküli betűből, de nem félkövérből (lásd style3.css) lesznek szedve. A H2-es címsorok 14 pt-os talpnélküli félkövér és dőlt, kék színű betűből fognak megjelenni. Ha a HTML <HEAD> szakaszában további stílusdefiníciókat adunk meg, esetleg közvetlenül a HTML- 1
2 elemhez rendelünk ilyeneket, akkor azok felülbírál(hat)ják a külső stíluslap definícióit. Mindig a legutolsó tulajdonság-érték páros határozza meg a végleges formátumot Stílus megadása a HTML <HEAD> szakaszában Stílusokat közvetlenül a HTML-dokumentum <HEAD> szakaszában is definiálhatunk. Az így definiált stílusok hatóköre csak az adott HTML-fájl lesz, más HTML-dokumentumokban nem tudjuk az itt definiált stílusokat felhasználni. <HEAD> <STYLE TYPE="text/css"> BODY { margin: 10px 2em 0 25pt; padding: 0; background-image: url(hatter.jpg); A:LINK { text-decoration: none; color: navy; </STYLE> </HEAD> 1.3. Stílus hozzárendelése HTML-elemhez (inline hozzárendelés) Stílusok közvetlenül HTML-elemekhez is rendelhetők. Ez némileg ellentmond a CSS filozófiájának, amennyiben a CSS alkalmazásának egyik fő oka a tartalom és formátum szétválasztása. <BODY> <H1>A lopótök</h1> <P STYLE="font-family: verdana; font-size: 12pt; color: #ffc579"> A lopótök más neveken butykos tök, nyakas tök, szívótök, sáritök vagy flaskatök a kabakosok családjába tartozó kétszikü növény. Ez az egyetlen olyan tökfajta, amit Európában már Amerika felfedezése elött is termesztettek. </P> </BODY> 2 2. Elemek és stílusuk 2.1. Szelektor, tulajdonság, érték Akárhogyan is rendeljük HTLM-dokumentumainkhoz, vagy azok egy-egy eleméhez a stílusokat, a definíció mindig két részből áll: szelektorból és formázásból. A formázás egy tulajdonság és egy érték párosa. szelektor { tulajdonság: érték; tulajdonság: érték;
3 Egy szelektor többször is előfordulhat a stílusdefinícióban, ebben az esetben az összes felsorolt tulajdonság uniója lesz a végleges formázás alapja. Egy formázás pedig több szelektorhoz is hozzárendelhető. Ilyenkor a szelektorokat vesszővel elválasztva kell felsorolnunk. A formázásokat ; (pontosvessző) választja el egymástól. H1 { margin-top: 20px; H1 { font-family: verdana, sans-serif; font-size: 16pt; font-weight: bold; color: black; H1, H2, H3 { text-align: center; Szelektorok lehetnek a HTML-ben használatos elemek (BODY a teljes dokumentumra vonatkozó beállítások; H1, H2, H3 1., 2., 3. stb. szintű címsorok; A hiperlink a dokumentumban, stb.), illetve használahtó ún. osztályalapú és azonosítóalapú kiválasztás is Osztályok, azonosítók A HTML-ben a nem címsor színtű bekezdéseket rendszerint <P> </P> tagek közé írjuk. Ha a CSS-ben a P elemhez rendelünk beállításokat, akkor az összes bekezdésünk azonos formátumot kap hacsak inline módon az egyes bekezdéseknél nem módosítjuk azok stílusát. Ennek hamar éreznénk a korlátait, hiszen egy viszonylag egyszerű szövegben is szerepelhet többféle, a dokumentumhierarchiában különböző helyet elfoglaló bekezdés (főszöveg, megjegyzés, lábjegyzet, definíció, fontos kiemelés, stb.), amelyek formázását meg kell különböztetnünk. Erre valók az ún. osztályok..normal,.megjegyzes,.definicio { text-align: justify; font-family: arial, tahoma, sans-serif; color: black;.normal { font-size: 12pt;.megjegyzes { margin: 1em 2em 1em 2em; font-style: italic;.definicio { padding-left: 2em; border-left: 3px solid black; 3
4 A CSS-ben az osztályok definíciójában az osztálynevek elé. (pont) karaktert kell írnunk. Az előző stílusdefiníciókra a HTML-dokumentumban így tudunk hivatkozni: Figyeljük meg, hogy az egyes szövegrészek mind-mind <P> </P> tagek közé kerülnek, de különböző formázást kapnak, mivel más-más osztályt rendelünk hozzájuk. A HTML-ben egy elemhez az elem neve után írott CLASS kulcsszóval rendelhetünk osztályt. Itt nem kell (nem szabad!) az osztály neve elé pontot írni! Az azonosítóalapú kiválasztás hasonlóan működik az osztályalapú kiválasztáshoz. Egy fontos különbség viszont az, hogy míg osztályokat bármelyik és bármennyi elemhez rendelhetünk, azonosítóalapú kiválasztással csak egyetlen elem jelölhető meg! A CSS-fájlban # (kettőskereszt) az azonosítók jele, míg a HTML-ben az elem neve után írott ID-vel hivatkozhatunk az azonosítóra. 4 <BODY> <P CLASS="normal"> A Csatorna-alagút (Channel Tunnel) vagy Csalagút (Chunnel), egy 51,5 km hosszú vasúti alagút a La Manche csatorna alatt a Doveri szorosnál, amely az angliai Dover melletti Folkestone-t köti össze a franciaországi Calais közelében fekvö Coquelles városával. </P> <P CLASS="megjegyzes > A hatalmas projekt többször megakadt, de végül 1994-ben sikerült befejezni az alagutat. Ez a világ második leghosszabb alagútja, a japán Szeikan-alagút után, amely összességében hosszabb, de tengeralatti része rövidebb; tehát a Csatorna alagút a világ leghosszabb tenger alatti alagútjának tekinthetö (39 km). </P> <P CLASS="definicio"> Az alagutat a Eurotunnel cég üzemelteti. Az American Society of Civil Engineers kijelentette, hogy az alagút egyike a modern világ hét csodájának. </P> </BODY> #elso { margin-top: 12px; padding-top: 12px; border-top: 3px dotted gray; <BODY> <P ID="elso"> Ezt a formázást csak ehhez az elemhez lehetett hozzárendelni, másikhoz már nem lehet. </P> 2.3. Látszólagos osztályok Bizonyos elemekhez rendelhetünk ún. látszólagos osztályokat. Tipikus példa erre az A elem, amely segítségével hiperlinkek definiálhatók egy HTML-dokumentumban. Egy A elemhez többféle látszólagos osztály is tartozhat, ezek segítségével a hiperlink különböző megjelenését szabályozhatjuk.
5 A:link, A:visited { font-family: sans-serif; font-weight: bold; font-size: 10pt; text-decoration: none; color: black; A:hover { color: blue; A:active { color: red; <A HREF=" Eszterházy Károly Föiskola honlapja</a> A CSS-ben a látszólagos osztályok megadásakor a szelektor neve után : (kettőspont) karakterrel kell jelölnünk a látszólagos osztály nevét. A fenti példában a link félkövér, 10 pt-os, fekete talpnélküli betűből fog megjelenni az oldalon, és a linkekre egyébként hagyományosan jellemző aláhúzás most nem fog látszódni. Ha az egérrel a link fölé állunk, a betűszín kékre fog változni. Ha az egér bal gombját nyomva tartjuk a linken, a nyomva tartás idejére a link szövege piros színűre vált. A CSS-ben általában lényegtelen az egyes szelektorok sorrendje. Hiperlinkek esetében azonban fontos, hogy mindig a következő sorrendben határozzuk meg a látszólagos osztályokat: :link, :visited, :hover, :active, különben nem a várt eredményt kapjuk! (Ha így könnyebb, jusson eszükbe ez a két szó: LoVe HAte [szeret utál]! A kiemelt betűk a látszólagos osztályok neveinek kezdőbetűivel egyeznek). 3. A háttér Bármely elem kaphat saját hátteret. Ez azt jelenti, hogy semmi akadálya, hogy ha a HTML-dokumentumunk pl. egy táblázatot tartalmaz, akkor külön definiáljuk a dokumentum hátterét (amelyet a BODY szelektorhoz kell megadnunk), külön hátteret állítsunk be a táblázat celláihoz, és a cellákon belül megjelenő egyes bekezdésekhez is. Ez utóbbi kettőt célszerű osztályalapú kiválasztással definiálni. (Nincs tehát akadálya az ilyen sokhátterű formázásnak, de értelme sincs túl sok ) BODY { background-color: white;.tablazatcella { background-color: gray;.szoveg { background-color: cyan; 5
6 A fenti példában a HTML-dokumentumunk háttérszíne fehér lesz. A Cím is fehér háttéren jelenik meg. A dokumentum egy egyetlen cellából álló táblázatot tartalmaz még, amelyben a háttérszín szürke. Szürke háttéren jelenik meg az 1. bekezdés felirat is. Mivel azonban a szoveg osztály hátterét kékeszöldre (türkizre) állítottuk, a 2. bekezdés felirat ilyen színű háttérrel jelenik meg. 1. táblázat: Az elemek hátterére vonatkozó lehetséges beállítások: Tulajdonság Felvehető értékek Hatás background-attachment scroll fixed Meghatározza, hogy a háttérkép az oldal görgetésekor együtt gördül-e az elemmel, vagy helyben marad. 6 <BODY> <H1>Cím</H1> <TABLE COLS=1 BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR> <TD CLASS="tablazatCella"> <P>1. bekezdés</p> <P CLASS="szoveg">2. bekezdés</p> </TD> </TR> </BODY> background-color transparent <szín neve>* <hexa-érték> rgb(vörös, zöld, kék), ahol <vörös>, <zöld>, <kék> = Beállítja a háttérszínt. Pl.: black, #cc7f00, rgb(13,0,7) A transparent érték átlátszóra állítja a hátteret. (Internet Explorerben nem mindig működik.) background-image url(képfájl) Beállítja a megadott képet háttérképnek. Ha szükséges, meg kell adni a kép elérési útját is. background-position top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos background-repeat repeat repeat-x repeat-y no-repeat background background-color background-image background-repeat background-attachment background-position Beállítja a háttérkép kezdő pozícióját. Beállítja, hogy a háttérkép ismétlődjön-e, ha többször is elfér a megadott elem háttereként. (Úgy, mint a Windows asztalon a tapéta.) A háttérre vonatkozó beállítások rövid megadása, egy utasítás segítségével. Pl.: background white url(hatterkep.png) no-repeat fixed top left * Alapszínek a következők: aqua (kékeszöld), black (fekete), blue (kék), fuchsia (erős rózsaszín, magenta), gray (szürke), green (zöld), lime (világoszöld), maroon (sötétvörös), navy (sötétkék), olive (zöldesbarna), purple (olyan, mint a fuchsia, csak sötétebb), red (vörös), silver (világosszürke), teal (sötét türkiz), white (fehér) és yellow (sárga).
7 4. Mértékegységek Bárhol, ahol mértéket (nagyságot) kell megadnunk, meg kell adnunk egy mértékegységet is. Egyetlen kivétel a 0 (nulla). A nulla mérőszám után nem kell mértékegységet megadnunk. Kétféle mértékegység-csoport létezik a CSS-ben, az abszolút és a relatív mértékek csoportja Abszolút mértékegységek Ezek a mértékegységek (elvileg) azonos méretet garantálnak képernyőfelbontástól függetlenül, illetve nyomtatásban is. Gyakorlatilag nem mindig, mert a különböző operációs rendszerek nem mindig tudják pontosan a különböző megjelenítők felbontását, ezért becsült vagy alapértelmezett értékkel számolnak. Abszolút mértékegységek a következők: mm milliméter, cm centiméter in inch (1 inch = 2,54 cm) pt pica pont (1 pt = 1/72 inch 0,351 mm) pc pica (12 pt = 1/6 inch 4,233 mm) Példák abszolút mértékegységgel megadott méretekre: height: 2mm; boder-width: 1.5pt; line-height: 1.2in; 4.2. Relatív mértékegységek Ezek a mértékegységek mindig az adott elem szülőeleméhez, illetve az adott megjelenítőeszköz jellemzőihez viszonyítva értelmezhetők. Relatív mértékegységek a következők: px pixel (azért relatív, mert a különböző képernyőkön egy pixel fizikailag eltérő méretű lehet) em a szülőelem betűméretével egyező méret. Pl. ha a BODY elemhez 16pt-s betűméretet határoztunk meg, és egy P elemhez rendelt osztályban a betűnagyságot 0.5em-ben állapítjuk meg, akkor ha ez a P bekezdés közvetlenül a BODY alá van rendelve (tehát nem mondjuk egy táblázaton belülre, amelyben más az alapértelmezett fokozat), akkor ennek a bekezdésnek a betűmérete 8pt lesz. ex a szülőelem betűméretét alapul véve az ilyen méretű x (kis x) betű magasságával egyező méret. A böngészők többnyire az 1 ex = 0.5 em képlettel számolnak. (Amely egyébként tipográfiailag általában nem is igaz.) % a szülőelem méretéhez vonatkoztatott %-os méret. 5. Bekezdésre (szövegre) vonatkozó beállítások Egy HTML-dokumentumban a szövegek megjelenését több szinten befolyásolhatjuk. A legkisebb egység a karakter, csakúgy, mint a szövegszerkesztő programokban. Egy szöveg akár minden egyes karakterére külön-külön beállíthajuk a betűtípust, -méretet, vastagságot, stb. A következő formázási szint a bekezdésekre vonatkozó beállításokat tartalmazza. Ebbe a kategóriában a sorköz, betűköz (bár ez tartozhatna a karakterfüggő csoportba is), sorzárás és hasonlók tartoznak. A következő szinten pedig egy szövegelem (pl. egy bekezdés, vagy egy címsor, vagy egy DIV elem) külső és belső margóit, szegélyét, körvonalát és hasonló tulajdonságait határozzuk meg. Ide tartoznak a korábban már bemutatott, háttérre vonatkozó beállítások is. A legkülső szintre vonatkozó beállítások előtt meg kell ismernünk még a CSS ún. dobozmodelljét is. Ezzel kapcsolatosan fontos megemlítenünk, hogy e téren a böngészők nem kompatibilisek. De térjünk vissza most a bekezdésekre vonatkozó beállításokhoz! 7
8 2. táblázat: Bekezdésekre vonatkozó beállítások (csak a fontosabbak): Tulajdonság Felvehető értékek Hatás color szín neve hexa-érték rgb(vörös, zöld, kék) Beállítja a szöveg színét. (Tulajdonképpen kerülhetett volna a karaktertulajdonságok közé is.) line-height normal <méret> % Beállítja a sorközt. letter-spacing normal <méret> Beállítja a betűközt. text-align left right center justify text-decoration none underline overline line-through blink Beállítja a bekezdés sorainak igazítását rendre a következőkre: balra zárt, jobbra zárt, középre zárt, sorkizárt. Dekorációt rendel az adott szövegre, amelyek rendre a következők lehetnek: nincs, aláhúzás, vonal a szöveg fölé, áthúzott, villogás. text-indent méret % A bekezdés első sorának behúzása. text-transform none capitalize uppercase lowercase Az adott elem szövegét változtatja meg rendre a következőkre: nincs változtatás, nagy kezdőbetűk, nagybetűs, kisbetűs. word-spacing normal <méret> Beállítja a szavak közötti távolságot (a szóközt). Balra zárt, jobbra zárt és középre zárt igazításnál pontos értéket kapunk, a sorkizárás azonban elronthatja. 6. Betűre vonatkozó beállítások 3. táblázat: Betűre vonatkozó beállítások (csak a fontosabbak): Tulajdonság Felvehető értékek Hatás font-family betütípus általános típus* Beállítja az adott elem betűtípusát. Több értéket is beállíthatunk vesszővel elválasztva, ekkor az első, a kliensgépen megtalálható betűtípus lesz az elem betűtípusa. Pl.: font-family: arial, helvetica, sans-serif; font-size xx-small x-small small medium large x-large xx-large smaller larger <méret> % Betűméret. xx-small és xx-large között különböző fix méreteket jelöl. A smaller és a larger a szülőelem méretéhez képest eggyel kisebb, illetve eggyel nagyobb méretet jelöl. font-style normal italic oblique Betűváltozat. Az italic a kurzív, az oblique a döntött változatot jelenti, bár a legtöbb betűtípusnál nincs a számítógépkre külön kurzív és döntött változat telepítve. Így hatásuk többnyire ugyanaz a dőlt (ferde) betű. font-variant normal small-caps Kiskapitális betűt állít be. font-weight normal bold bolder lighter Betűvastagság. A konkrét értékek csak azoknál a betűtípusoknál működnek, amelyeknél léteznek a különböző vastagságok. * Általános típusok a következők lehetnek: serif (talpas), sans-serif (talpnélküli), cursive (dőlt vagy kézírásos), fantasy, monospace (írógép) A dobozmodell Minden CSS-elem formázásakor beállíthatjuk a következő tulajdonságokat (kívülről befelé haladva): külső margó, szegély, belső margó. A külső margó (margin)az adott elem szegélye (vagy annak helye), és a tar-
9 talmazó szülőelem közötti távolságot jelenti. A margókat mind a négy oldalon megadhatjuk külön-külön, vagy egy értékkel mind a négy oldalra vonatkozóan. A margó értéke lehet negatív szám is. A szegély (border) esetében mind a négy oldalon külön-külön beállítható három-három tulajdonság: a szegély vastagsága, stílusa és színe. (A lenti ábrában most mind a négy oldalon egyforma a szegély.) A belső margó (padding) a szegély (vagy annak helye) és a belső tartalom közötti távolság. Lehet negatív is. padding-left margin-top border padding-top margin-left aaaaaa aaa aaaaa aaaaaaa aaaaaaaaa aaaa aaaaaa aaa aaa aaaa aaaa aaaaaa aaa aaa aaaaaaaaa aaaa aaaaaaaaaa aaaa aaa aaa margin-bottom margin-right padding-bottom padding-right 4. táblázat: A margó, a belső margó és a szegély beállításai Tulajdonság Felvehető értékek Hatás margin-top auto <mérték> % Felső margó. margin-right auto <mérték> % Jobb margó. margin-bottom auto <mérték> % Alsó margó. margin-left auto <mérték> % Bal margó. margin top right bottom left A margók gyors megadásának módja. A négy értéket szóközzel választjuk el. A mértékegységek lehetnek különbözők. Pl. margin 10px 0 20pt 1.4em; padding-top auto <mérték> % Felső belső margó. padding-right auto <mérték> % Jobb oldali belső margó. padding-bottom auto <mérték> % Alsó belső margó. padding-left auto <mérték> % Bal oldali belső margó. padding top right bottom left A belső margók gyors megadásának módja. Paraméterezése megegyezik a margin paraméterezésével. border-width thin medium thick <méret> Az adott szegély vastagsága. border-style none hidden dotted dashed solid double groove ridge inset outset border-color szín Az adott szegély színe. Az adott szegély stílusa. Rendre a következők: nincs, rejtett (a vastagsága számít, de nem látszik), pontozott, szaggatott, folytonos, dupla, gravírozott, perem, benyomódó, kidomborodó. A négy oldal szegélye külön-külön meghatározható. Pl.: border-top-color: black; border-bottom-style: ridge; stb. Egy értékadással mind a négy oldal egyszerre állítható be: border: 1px solid black; 8. Szélesség, magasság, pozíció CSS-sel meghatározható egy elem szélessége és magassága. Nagyon fontos azonban tudnunk azt, hogy ezeket a tulajdonságokat eltérő módon kezeli az Internet Explorer és a többi (Mozilla Firefox, Opera, Safari, Google Chrome) böngésző. Az Explorer szegélytől szegélyig számítja a szélességet és a magasságot (beleért- 9
10 ve a szegélyek vastagságait is), míg a többi böngésző a padding nélküli tényleges belső tartalmat veszi alapul. A pozíció az adott elem bal felső és jobb alsó sarkával határozható meg (left, top, right és bottom), de csak akkor, ha a position tulajdonságot is beállítjuk. 5. táblázat: Méret és pozíció Tulajdonság Felvehető értékek Hatás width auto <méret> % Az adott elem szélessége. height auto <méret> % Az adott elem magassága. position static relative absolute Az elem pozícionálásának típusa. fixed left auto <méret> % Az elem bal szélének távolsága a szülőelem bal szélétől. top auto <méret> % Az elem tetejének távolsága a szülőelem tetejétől. right auto <méret> % Az elem jobb szélének távolsága a szülőelem jobb szélétől. bottom Az elem aljának távolsága a szülőelem aljától. z-index auto <szám> Az adott elem takarást meghatározó értéke. vertical-align baseline sub super top Az elem tartalmának függőleges igazítása. text-top middle bottom text-bottom <érték> % overflow visible hidden scroll auto Az elem tartalmának túlcsordulása. A position az adott elem elhelyezésének módját határozza meg. A static az alapértelmezett. Választásakor az elem ott fog megjelenni, ahol egyébként is meg kellene jelennie a HTML-forrás alapján. A relative érték szintén azt jelenti, hogy az elem ott jelenik meg, ahol egyébként is meg kellene jelennie, de ez módosítható a top, right, bottom és left értékekkel, akár negatív irányban is. Az absolute érték használatával nem a szülőelemtől mérjük a távolságot a top, right, bottom és left tulajdonságokkal, hanem a böngészőablak bal felső sarkától, mint (0;0) koordinátájú kezdőponttól. Ha a böngészőablak tartalmát görgetjük, az absolute opcióval pozícionált elemek is gördülni fognak. A fixed opcióval ugyanúgy pozícionálhatunk, mint az absolute választásával, de a fixed pozíciójú elemek akkor is a helyükön maradnak, ha a böngészőablakot görgetjük. Az oldal többi tartalma tehát gördíthető, a fixed opcióval pozícionált elemek viszont állandóan a helyükön maradnak. A z-index opcióval azt határozhatjuk meg, hogy az egymásra pozícionált elemek hogyan takarják egymást. Egy adott z-index tulajdonságú elem takarni fogja az összes olyan elemet, amelyeknek legalább egy része ugyanazon a területen van, ahol ez az adott elem, és a z-index tulajdonságaik kisebb értékűek, mint ennek az adott elemnek. Az overflow tulajdonság az elem tartalmának túlcsordulását szabályozza. A visible opciót választva egy elem teljes tartalma (pl. szöveg esetén az összes karakter) akkor is látható lesz, ha az elem szélessége (width) és magassága (height) ezt egyébként nem tenné lehetővé. Ilyenkor a szöveg kifolyik a dobozából. A hidden opció választásával azt érhetjük el, hogy egy elem tartalmából csak annyi jelenjen meg, amennyit az elem szélessége és a magassága lehetővé tesz. A scroll opció mindkét gördítősávot megjeleníti az elem szélén és alján. Az auto opció csak azt, amelyikre szükség van. Az auto opcióval kikapcsolható az Internet Explorer inaktív függőleges gördítősávja is, ha a BODY elemhez rendeljük. A Firefox csak akkor jeleníti meg a függőeleges gördítősávot a lap szélén, ha arra tényleg szükség is van. 10 z-index:1 z-index:2 z-index:3
11 Jegyzetek 11
12 12
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
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
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
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
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
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
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
Stí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
(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
Multimédia 2017/2018 II.
Multimédia 2017/2018 II. 1. gyakorlat HTML5, CSS3 alapok Alapvető HTML5 elemek Egyszerű HTML dokumentum Oldal cime
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
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
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.
(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
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:
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,
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
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
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
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
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)
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
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
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
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
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:
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
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
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.
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;
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
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
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:
Feladatok 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
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
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
Á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
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
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,
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
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,
Ö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
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
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
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
A 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
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
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
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)
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
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
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,
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
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
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ő:
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
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
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ó)
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
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
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
Kelda 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.
Sakk játék. Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket.
Sakk játék Felhasználói dokumentáció Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket. Futtatási környezet: A http://10.0.0.101/~hgy/sakk/
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ő
Tili-Toli játék. Felhasználói dokumentáció
Tili-Toli játék Felhasználói dokumentáció Feladat: JavaScript és CSS segítségével tili-toli játék készítése. Futtatási környezet: A http://10.0.0.101/~szabby/ linkre kattintva megjelenik az oldal. Az oldal
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
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
Honlapké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!
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
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
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,
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
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Ó
A 2018/2019 tanévi Országos Középiskolai Tanulmányi Verseny első fordulójának feladatai. INFORMATIKA I. (alkalmazói) kategória
Oktatási Hivatal A 2018/2019 tanévi Országos Középiskolai Tanulmányi Verseny első fordulójának feladatai INFORMATIKA I. (alkalmazói) kategória Nem minden részfeladatot írunk le a feladatszövegben, többet
Tá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
1. Fejtsd meg a keresztrejtvényt! Írd le, mit tudsz a függőleges sorban olvasható
20. Fővárosi Informatika lkalmazói Tanulmány Verseny 2010/11. Elméleti feladatlap Szövegszerkesztés kategória Név:. Kerület: 1. Fejtsd meg a keresztrejtvényt! Írd le, mit tudsz a függőleges sorban olvasható
Weblapok az érettségin. 2. feladat: weblap vagy prezentáció és grafika 30 pont
Weblapszerkesztés Weblapok az érettségin 2. feladat: weblap vagy prezentáció és grafika 30 pont Weblapszerkesztők MS Front Page MS Share Point Designer Macromedia Dreamwaver Mozilla Composer / NVU / Kompozer
É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,
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õ
Oktatá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
18. Szövegszerkesztők
18. Szövegszerkesztők A szövegszerkesztés olyan számítógépes művelet, amelynek során később nyomtatásban megjelenő szövegegységeket, dokumentumokat hozunk létre, majd azokat papírra kinyomtatjuk. A különböző
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...
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
Tá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) -
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
A számítógép beállításainak megváltoztatása
Megjelenés és témák Először tekintsük át, hogy hogyan lehet a képernyőn megjelenő elemek küllemét módosítani. Válasszuk a Start menü Vezérlőpultban a Megjelenés és témák hivatkozást. Itt kattintsunk a
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?
Objektumok é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.)
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
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
FELHASZNÁLÓI KÉZIKÖNYV
FELHASZNÁLÓI KÉZIKÖNYV SZEGED VÁROS KÖZLEKEDÉSE 1.00 verzió Dátum: 2012.02.29. Tartalom 1. Rendszerigény... 3 2. Bevezető... 3 3. Az alkalmazás indítása... 3 4. Az oldal felépítése... 4 4.1. Főképernyő...
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,
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,
Tanmenet a 9. osztály információkezelés tantárgyának tanításához
Tanmenet a 9. osztály információkezelés tantárgyának tanításához Cél: Az információkezelés tanításának célja, hogy a tanulók el tudják látni a gazdálkodó szervezeteknél előforduló egyszerű ügyviteli munkákat,
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,
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
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
XML-HMTL Beadandó Dolgozat. Avagy, mit sikerült validálnunk fél év alatt
i XML-HMTL Beadandó Dolgozat Avagy, mit sikerült validálnunk fél év alatt Ed. Féléves XML-HTML munka 1.0.0 ii Copyright 2009 Varga Krisztina, Varga Máté Nevezd meg!-ne add el!-ne változtasd! 3.0 Unported
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í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
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