CSS-segédlet. 1. CSS és HTML Külső stíluslap HTML-hez csatolása

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

Download "CSS-segédlet. 1. CSS és HTML. 1.1. Külső stíluslap HTML-hez csatolása"

Á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

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

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

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

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

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

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

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

Stíluslapok használata

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

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

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

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

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

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

(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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Feladatok megoldásai

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

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

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

Á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

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

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

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

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

Ö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

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

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

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 Nobel díj története és a magyar fizikai Nobel díjasok

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Kelda WebGrafika Iroda Példa HTML, CSS formázásra

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.

Részletesebben

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

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

Tili-Toli játék. Felhasználói dokumentáció

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

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

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

Honlapkészítés. 1. Előadás Bevezető, HTML. Paksy Patrik

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!

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

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

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

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

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

A 2018/2019 tanévi Országos Középiskolai Tanulmányi Verseny első fordulójának feladatai. INFORMATIKA I. (alkalmazói) kategória

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

Részletesebben

Táblázatok. Feladatok Szegélyek és cellák. 1. feladat. 2. feladat

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

Részletesebben

1. Fejtsd meg a keresztrejtvényt! Írd le, mit tudsz a függőleges sorban olvasható

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ó

Részletesebben

Weblapok az érettségin. 2. feladat: weblap vagy prezentáció és grafika 30 pont

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

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

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

Oktatási segédanyag. Weboldalszerkesztési gyakorlatok

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

Részletesebben

18. Szövegszerkesztők

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ő

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

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

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 Táblázatkezelés 2. - Adatbevitel, szerkesztés, formázás ADATBEVITEL a., Begépelés Az adatok bevitelének legegyszerűbb módja, ha a táblázat kijelölt cellájába beírjuk őket. - számok (numerikus adatok) -

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

A számítógép beállításainak megváltoztatása

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

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

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 Objektumok és osztályok Az objektumorientált programozás alapjai Rajzolás tollal, festés ecsettel A koordinátarendszer A vektorgrafikában az egyes grafikus elemeket (pontokat, szakaszokat, köröket, stb.)

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

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

FELHASZNÁLÓI KÉZIKÖNYV

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

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

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

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 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,

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

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

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

XML-HMTL Beadandó Dolgozat. Avagy, mit sikerült validálnunk fél év alatt

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

Részletesebben

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ítsünk weblapot könnyedén! A Google Sites használata Weboldal készítés Google Sites szolgáltatás segítségével, web-fejlesztési ismeretek nélkül! Készítette: Tratnyek Csilla 2010.03.01. Készítsünk weblapot

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