CSS-szintaxis. CSS alkalmazása HTML-re. <head> <style type="text/css"> </style> </head> <style "stilus.
|
|
|
- Fanni Vörös
- 6 évvel ezelőtt
- Látták:
Átírás
1 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 lehet bizonyos kijelzőméretek esetén más és más stíluslapot aktiválni: HTML-lapon belüli stílusok <link rel="stylesheet" type="text/css" href="stilus.css" /> media="screen" (all, braille, handheld, monochrome, print, projection, screen, speech, tv) <link href="tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width:481px) and (maxwidth:768px)" /> <head> <style type="text/css"> </style> </head> Külső CSS importálása a fejléc style-tagjébe (minden további deklaráció elé kell tenni): Konkrét kiválasztó médiaspecifikus formázása: A bekezdések betűmérete minden kijelzőn 20px legyen kivéve nyomtatásban, ahol el kell rejteni: HTML-tagre vonatkozó stílus <style "stilus.css" </style> <style type="text/css"> p { font-size: "print" p { display: none </style> <body> <p style=" ">Tartalom</p> </body> Általános szintaxis szelektor { tulajdonság: érték; tulajdonság: érték mértékegység; tulajdonság: érték Többszörös kiválasztás (ÉS-kapcsolat) szelektor, szelektor { tulajdonság: érték
2 Kiválasztók (szelektorok) Tagek Az előre definiált sztenderd HTML-tagek megcímzése. body { font-family: Calibri, serif Osztályok Ha egy lapon belül több HTML-elemre akarunk azonos formázásokat alkalmazni, osztályhoz kell rendelnünk. HTML: CSS: Másfajta elemet is be lehet sorolni az osztályba: <p class="idezet"> </p>.idezet { font-size: 75%; letter-spacing: 2px <h1 class="idezet"> </h1> Azonosítók Ha egy weboldalon belül több elemre akarunk azonos formázásokat alkalmazni, azonosítókhoz is rendelhetjük őket. A lapon belül csak egyszer szerepelhetnek. HTML: CSS: Univerzális kiválasztó Minden elem kiválasztása. <div id="header"> </div> #header { height: 160px * { margin: 0; padding: 0 Gyermekkiválasztó Egy elemen belül elhelyezett másik elem megcímzése. HTML: CSS: A következő beágyazás esetén azonban ez a CSS-címzés nem működne: Az egyszerű szóköz azonban olyan sarjkiválasztó, amely átlép minden köztes sarjelemen: <p>én vagyok a szülőelem, aki egy <strong>gyermekelemet</strong> tartalmaz.</p> p > strong { text-decoration: underline <p>én vagyok a szülőelem, aki egy <em><strong>sarjelemet</strong></em> tartalmaz.</p> p strong { text-decoration: underline
3 Testvérkiválasztó Csak az adott elem után közvetlenül álló másikat címezi meg. HTML: Ez a CSS-kiválasztó csak a fejezetcímet követő első bekezdést címezi meg: <h1>fejezetcím</h1> <p>bekezdés</p> <p>bekezdés</p> h1 + p { color: red Attribútumkiválasztó Segítségével olyan elemek választhatók ki, amelyek bizonyos attribútumot hordoznak, sőt akár egy konkrét értékkel ellátott attribútumot horodzó elemek is. Ez az összes linket címezi meg (a hivatkozási pontokat nem): Ez csak a kapcsolat.html-re mutató linkeket címezi meg: Ez azokat a linkeket választja ki, amelyek céloldala tartalmazza a megadott karakterláncot; azaz minden olyan linket, amelynek célja ezen domain alatti lapra hivatkozik. a[href] { color: red a[href="kapcsolat.html"] { color: red a[href*="timetodesign.hu"] { color: red Látszólagos kiválasztók Olyan kiválasztók, amelyek nem mint HTML-elemek léteznek, hanem a megjelenítő eszköz pl. böngésző által meghatározott körülmények között keletkeznek. Dinamikus látszólagos kiválasztók Első betű kiválasztó: p:first-letter { font-size: 200% Első sor kiválasztó: Első gyermek kiválasztó (a gyermekelemnek csak az első előfordulását címezi meg): Elem előtti kiválasztó tartalom (itt: kép) beszúrására: p:first-line { font-weight: bold p:first-child { font-size: 200% h2:before { content: url(img/strigula.png)
4 Elem utáni kiválasztó tartalom (itt: szöveg) beszúrására: h2:before { content: ' ' Linkek státuszainak kiválasztói rollover-státusz: fókusz-státusz: megkattintott státusz: meglátogatott link: a:hover { color: green a:focus { color: red a:active { color: black a:visited { color: pink Öröklődés A szülőelemek tulajdonságait gyermekelemeik öröklik. Ezt a tulajdonságot pl. a html-be ágyazott valamennyi elem örökli: html { font-family: Calibri, sans-serif Nem minden tulajdonság öröklődik tovább. Részletek a CSS-referenciákban. Kaszkádolás A kiértékelés során a megjelenítő a következő helyeken szereplő stílusdeklarációkat veszi figyelembe (növekvő prioritással): 1. A böngésző alapértelmezése. 2. Külső stíluslap. 3. A HTML-fejléc <style>-tagje. 4. Inline-deklarációk (kokrét elem style="" attribútuma). Azaz a böngésző először is a saját alapértelmezései alapján formázza meg a dokumentumot. A külső stíluslapok deklarációi azonban felülírják a böngészőjéit. A konkrét HTML-lap fejlécében deklarált stílusok felülírják a külső CSS-ekben foglaltakat. Végül a konkrét HTML-hez kapcsolt deklarációk felülírják a fejlécben foglaltakat. Más szóval minél közelebb szerepel a stílusdeklaráció a taghez, annál erősebb. A kiértékelésnek ez a prioritási rendje az!important utasítással írható felül. Ha a következő sor szerepel a külső CSS-ben p { color: grey!important
5 akkor a következő HTML-bekezdés is szürke lesz: Igaz, a taghez közelebbi!important is felülírja a távolabbit, így a bekezdés mégis pirosra festhető: <p style="color: red">bekezdés</p> <p style="color: red!important">bekezdés</p> Mértékegységek Színek HTML Color Names pl. purple Hexadecimális kód: #RRGGBB (2-2 hexadecimális karaktere az egyes szín-komponensek (piros, zöld, kék) ereje) pl: #FF00FF ennek rövidítése: #F0F RGB-meghatározás: rgb(rrr,ggg,bbb) 0-tól 255-ig terjedő decimális számok pl: rgb(255,0,255) vagy 0%-tól 100%-ig terjedő értékek pl: rgb(100%,0%,100%) RGBA-meghatározás: rgba(rrr,ggg,bbb,a) Így megadható az alpha-csatorna is (áttetszőségi érték), 0-tól 1-ig. pl: rgba(255,0,255,0.5) Méretek Relatív mértékegységek Pixel: EM és EX: Százalék: Abszolút mértékegységek SI-mértékegységek: Tipográfiai pont (= 1/72 hüvelyk): Tipográfiai pica (= 12 pont): font-size: 12px A pixel mérete függ a kijelző felbontásától. A képernyők általában pixel / hüvelyk (Zoll, inch) felbontásúak. font-size: 1.2em font-size: 1.2ex Az m ill. az x betű magasságához képesti érték. 1 em vagy ex a betűméret 100%-ának felel meg. width: 75% Egy máshonnan örökölt mérethez képesti érték. font-size: 1cm font-size: 10mm font-size: 1in (Zoll, inch = 25,4 mm) Elvileg nem függenek a kijelző felbontásától. font-size: 12pt font-size: 1pc
6 CSS-tulajdonságok Betűtulajdonságok Betűtípus Vesszőkkel elválasztva alternatívák adhatók meg arra az esetre, ha a kliens gépén nincs meg az első, ill. nincs meg benne valamelyik ékezetes vagy speciális írásjel. Betűstílus Betűváltozat (kiskapitális) Betűvastagság Betűméret Orientációként: az alap szövegméret 16px, h1: 36px, h2: 24px, h3: 21px, h4: 18px, h5: 16px, h6: 14px Sormagasság font-family: 'Times New Roman', Times, serif betűcsaládok: serif, sans-serif, cursive, monospace font-style: italic oblique (ugyanaz) normal (felülír egy másonnan örökölt értéket) font-variant: small-caps normal inherit (örökölt érték) font-weight: bold lighter, light, normal, bold, bolder vagy a százasok 100-tól 900-ig (nem mindegyik betűtípusban van 9 különböző súlyosság, sőt a legtöbben jó, ha 2-nél több van) font-size: 16px vagy xx-small, x-small, smaller, small, medium, large, larger, x-large, xx-large line-height: 20px Fentiek egyetlen deklarációban is megadhatók: font: 'Times New Roman', Times, serif, italic, small-caps, bold, 16px/20px Szövegtulajdonságok Szín Betűköz Szóköz Szöveg-igazítás color: grey HTML Color Names hexakód rgb(rrr,ggg,bbb) //0-255// rgb(rrr%,ggg%,bbb%) //0%-100%// rgba(rrr,ggg,bbb,a) //R, G, B: A: 0.1 1// letter-spacing: 2px word-spacing: 10px text-align: left, center, right, justify, start (balról-jobbra írásnál ugyanaz mint a left) end (balról-jobbra írásnál ugyanaz mint a right)
7 Első sor bekezdése text-indent: 40px Negatív értékeket is felvehet. Szöveg-dekoráció Szöveg-transzformáció text-decoration: underline (aláhúzott) overline (föléhúzott) line-through (áthúzott) blink (villogó) text-transform: uppercase (csupa nagybetűs) lowercase (csupa kisbetűs) capitalize (minden szó első betűje nagybetűs) Szövegárnyék text-shadow: 2px 2px 2px #333 paraméterei rendre: eltérés jobbra, eltérés lefelé (negatív értéket is felvehetnek), elmosottság, szín Sortörés és űrök kezelése Föggőleges igazítás Konténeren vagy táblázatcellán belüli szöveg függőleges igazítása. Szövegkörnyezetben felső / alsó indexbe teszi a kiválasztott szöveget (de méretét nem csökkenti). white-space: normal (hosszú sorok tördelése) nowrap (tördelés megszűntetése) pre (nincs tördelés és megtartja az eredeti white-space-eket) vertical-align: bottom, middle, top sub, baseline, super text-bottom, text-top Felsorolások Strigula rendezetlen felsorolásnál: rendezett felsorolásnál: egyéni kép mint strigula: listaelem bekezdése: list-style-type: disc, square, circle decimal, decimal-leading-zero, lower- és upper- roman, alpha, greek és latin hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha list-style-image: url(img/strigula.png) list-style-position: inside, outside A deklarációk itt is csoportosíthatók: list-style: square inside url(img/strigula.png) Táblázatok
8 Táblázatcím alul / felül Szélesség caption-side: bottom, top width: 600px Százalékos meghatározással rugalmas táblázat is kialakítható. table-layout: fixed (azonos oszlopszélességek), auto, inherit Megadja, hogy a a böngésző hogyan kezelje a szélességeket. Keret border-collapse: separate (cellaközök vannak ez az alapértelmezés) collapse (nincsenek cellaközök; a cellakeretek egybeesnek) border-spacing: Cellaköz mértéke, megfelel a cellspacing="" attribútumnak. Üres cellák kezelése empty-cells: show, hide Megjelenjenek e az üres cellák. Hivatkozások Státusz-kiválasztók Alapállapot (megegyezik az a címzéssel) Fókusz-státusz Rollover-státusz Megkattintott státusz Meglátogatott státusz a:link { a:focus { a:hover { a:active { a:visited { Háttér Háttérszín Háttérkép elérése: ismétlődése: Görgetése background-color: grey HTML Color Names hexakód rgb(rrr,ggg,bbb) //0-255// rgb(rrr%,ggg%,bbb%) //0%-100%// rgba(rrr,ggg,bbb,a) //R, G, B: A: 0.1 1// background-image: url(img/bg1.png); background-repeat: repeat, no-repeat, repeat-x, repeat-y background-attachment:
9 scroll (az alapértelmezés) fixed (a háttér marad a helyén) local (csúszkákkal ellátott dobozban a tartalommal együtt gördül) Pozíciója background-position top, bottom, left, right, center Fentiek egyetlen deklarációban is megadhatók: background: grey url(img/bg1.png) repeat-x fixed További tulajdonságok Láthatóság Megjelenítés További megjelenítések: marker, tablecaption, table-cell, table-column, tablecolumn-group, table-footer-group, tableheader-group, table-row, table-row-group visibility: collapse táblázat sorának elrejtése (a helye megmarad) hidden elem elrejtése (a helye megmarad) inherit örökölt érték visible látható display: none elem és összes gyermekelemének elrejtése (helyet sem foglal) block dobozszerű megjelenítés (inline elemek konvertálása) inline soron belüli megjelenítés (block elemek konvertálása) inline-block soron belüli doboz megjelenítés inline-table táblázat soron belüli megjelenítése list-item felsoroláselemként történő megjelenítés run-in befutó megjelenítés; az elem az utána köv. blokk első soron belüli eleme lesz compact kompakt megjelenítés; az elem az utána köv. blokk elembe soron belüli elemként kerül; ha nem fér be, akkor külön blokkba kerül Dinamikus tartalmak Karakterláncok p:after { content:'szöveg' Képek p:before { content: url(strigula.png) Idézőjelek p:before { content: open-quote Számláló (rugalmasabbá teszi a fejezetek vagy p:after { content: close-quote
10 bekezdések számozását) változó deklarálása és nullázása: változó megnövelése és kiírása: Kurzor beállítása body { counter-reset: fejezetsz h2:before { counter-increment: fejezetsz; content: counter(fejezetsz) ". fejezet:" cursor: alias, all-scroll, auto, cell, context-menu, copy, crosshair, default, help, inherit, move, no-drop, not-allowed, pointer, progress, text, vertical-text col-resize, row-resize e-resize, ew-resize, n-resize, ne-resize, nesw-resize, ns-resize, nwresize, nwse-resize, s-resize, se-resize, sw-resize, w-resize Doboz-modell Minden HTML-elemet téglalapként kell felfogni, amely a következő tulajdonságokkal rendelkezik: A szöveget tartalmazó <p>-tag is egy ilyen doboz. A kitöltés (padding) az a távolság, amennyivel tartalmát jelen esetben a szöveget befelé tolja. A doboz szélességét (width) és magasságát (height) a kitöltés megtoldja; ha pl. egy 400px széles és 300 px magas doboznak 20px kitöltést adunk, a ténylegesen renderelt doboz 440 px-t fog elfoglalni széltében és 340 px-t hosszában. Ekkora lesz tehát az a terület, amelyet a háttérszín vagy mint fent a háttérkép kitölt. A doboznak keret (border) adható, ami szintén kifelé növekszik és a testvérelemeket eltolja. Létezik olyan körvonal (outline) is, ami a testvérelemeket nem tolja el, hanem elfedi. A margó (margin) a külső távolság; ez adja meg, hogy a doboz testvérelemeitől és szülőelemétől mekkora távolságot tartson. Tehát erre a dobozra vonatkoztatva ugyanazt az eredményt érjük el, ha szülőjének adunk paddinget. Ha a szülőnek paddinget, ÉS a gyermeknek margint adunk, a kettő összeadódik.
11 A padding, a border, az outline és a margin mind a négy irányba külön-külön is megadható az angol irányszavak (-top, -right, -bottom, -left) hozzáfűzésével. A múltban sok problémát okozott az InternetExplorer 5 és 5.5 sajátos felfogása a doboz-modellről, de a 6. verzió óta a Microsoft is a W3C ajánlását követi (ebben a kérdésben), így ma már nincs szükség hackekre. Kitöltések Az előbbi egy deklarációban (az óramutató járása szerinti sorrendben): Ugyanez 3 paraméterrel (fent, jobbra és balra azonos, lent) Ha a függőleges és vízszintes értékek azonosak, elég csak két érték (függőleges és vízszintes): Ha mind a 4 irányban azonos a kitöltés, elég 1 érték: padding-top: 10px; padding-right: 30px; padding-bottom: 10px; padding-left: 30px; padding: 10px 30px 10px 30px padding: 10px 30px 10px padding: 10px 30px padding: 20px Ugyanezt a logikát követik Külső margók margin-top: 10px; margin-right: 30px; margin-bottom: 10px; margin-left: 30px; margin: 10px 30px 10px 30px margin: 10px 30px 10px margin: 10px 30px margin: 20px Keretek border-top-width: 10px; border-right-width: 30px; border-bottom-width: 10px; border-left-width: 30px; border-width: 10px 30px 10px 30px border-width: 10px 30px 10px border-width: 10px 30px border-width: 20px A keretek paraméterei: szélesség: szín: stílus: border-width: 5px numerikus érték vagy thin, medium, thick border-color: grey border-style: ridge dashed (szaggatott), dotted (pontozott), double (kettős), groove (domborzat-árnyékolt 1), hidden (rejtett), inherit (örökölt), inset (homorú), none (nincs keret), outset (domború), ridge (domborzatárnyékolt 2), solid (egyszerű; alapértelmezés)
12 Fentiek egy deklarációban is megadhatók (de abban mindhárom tulajdonságnak értéket kell adni): Így a keret minden oldalon azonos stílusú lesz. Az irányszavak beszúrásával azonban akár minden oldalon eltérő szélességű, színű és stílusú keretünk lehet, azaz a CSS2 összesen 16 további keret-tulajdonságot ismer: Ez a részletesség pl. akkor hasznosul, amikor a dobozokat egymástól vízszintes vagy függőleges egyenesekkel választjuk el. border: 5px grey ridge border-top: 2px red dashed; border-right: 4px yellow dotted; border-bottom: 6px green double; border-left: 8px blue groove; border-top-width border-top-color border-top-style border-right-width border-right-color border-right-style border-bottom-width border-bottom-color border-bottom-style border-left-width border-left-color border-left-style A körvonalak paraméterei: A körvonalak annyiban különböznek a kerettől, hogy a testvérelemeket nem tolják el, hanem elfedik, tehát az elemek elhelyezkedésére semmilyen hatással nincsenek. Szélességük, színük és stílusuk minden irányban azonos. outline: 2px red dashed annyit tesz, mint: outline-width: 2px; outline-color: red; outline-style: dashed; Méretezés A szélesség és a magasság megadja, hogy mekkora legyen az elem. Méret alsó korlátozása A minimális szélesség és a minimális magasság megadja, hogy legalább mekkora legyen az elem. Ezt a méretet akkor is megtartja, ha a tartalom nem tölti ki és akkor is, ha a böngészőablakot lekicsinyítjük. width: height: min-width: min-height: Méret felső korlátozása A maximális szélesség és maximális magasság megadja, hogy az elem maximálisan mekkora lehet. Ezt a méretet akkor sem lépheti túl, ha a tartalom nem fér el benne ( túlcsordul ) és akkor sem, ha a böngészőablakot megnöveljük. max-width: max-height: Túlcsordulás
13 Ez a tulajdonság adja meg, mi történjék azzal a tartalommal, ami nem fér el egy dobozban, pl. egy width vagy egy max-width tulajdonság miatt. overflow: visible: a tartalom látható (a dobozon kívül) az alapértelmezés hidden elrejti a túlcsorduló tartalmat scroll MINDKÉT csúszkát megjeleníti (amelyik nem szükséges, az inaktív) auto csak a szükséges csúszkát jeleníti meg (a függőlegeset, a vízszinteset, mindkettőt vagy egyiket sem) inherit örkölt érték Maguk a csúszkák nem növelik meg az elem méretét.
14 CSS-pozícionálás A pozíció és a kapcsolódó tulajdonságok és értékeik Pozícionálás position: static A sztatikus pozícionálás alapértelmezés; az elemek normális folyama. Az elem ott jelenik meg, ahol éppen tartunk a dokumentumban. relative A relatívan pozícionált elem a balról és fentről tulajdonságokkal elmozdítható (a sztatikus helyzetéhez képest). Az utána következő elem elhelyezése azonban ugyanúgy történik, mintha ez a helyén maradt volna, tehát a relatív pozícionálás az elemek folyamát nem módosítja. absolute A legközelebbi nem-static pozícionálású szülőelemhez képesti pozícionálás; itt a balról és fentről való távolságon kívül a lentről és jobbról tartandó távolság is megadható. A kódban utána következő elem elfoglalja a megüresedett helyet. fixed A rögzített pozícionálás az abszolúthoz hasonlóan kiemeli az elemet az elemfolyamból, de az elmozdítás mindig a bodyhoz képest történik. Doboz elmozdítása fentről számított távolság: balról számított távolság: lentről számított távolság: jobbról számított távolság: Hogy mihez képest történik az elmozdítás, azt a position: értéke határozza meg. top: 150px left: 150px bottom: 150px right: 150px A top és a left a doboz bal felső sarkának, a bottom és a right a jobb alsó sarkának helyzetére vonatkozik. Mind a 4 tulajdonság negatív értéket is felvehet, amivel a doboz akár képen kívülre is helyezhető. Lebegés Elem körülfuttatása a forráskódban utána következő elemekkel. Hasonló az img tag align="" attribútumához. Lebegés törlése: azt az elemet, amellyel körülfuttattuk az előzőt, ki lehet vonni ezen viselkedés hatálya alól. Azok az elemek, amelyeknél törölték a lebegést, maguk körülfuttathatók maradnak (ha kapnak egy floatot). h1 { float: right left az elem baloldalt áll (körülfuttatás jobbra) right az elem jobboldalt áll (körülfuttatás balra) none az alapértelmezés p { clear: left left az elem nem futja körül az előzőt jobbra right az elem nem futja körül az előzőt balra both az elem nem futja körül az előzőt
15 Rétegek Ha több elemet úgy pozícionálunk, hogy egymást fedjék, a kódban később álló elem eltakarja a korábban állót. Az elemek z-tengelyen elfoglalt pozícióját a z-indexszel változtathatjuk meg. A z-tengelyt a kijelzőre merőleges tengelyként képzelhetjük el. Minél magasabb egy elem z-indexe, annál közelebb van a nézőhöz. z-index: 1 Ha két elem ugyanazt a z-indexet kapja, akkor megint a kódbeli sorrend lesz a döntő. Kommentálás kód strukturálására, magyarázására, deklarációk hatályon kívül helyezésére (kikommentelés) az egész soros kommentek elhelyezése még gyorsabb /* B E K E Z D É S E K */ /* p { margin-top: 10px; margin-left: 20px; */ p { margin-top: 10px; // margin-left: 20px; Több jegyzet letöltéséhez látogasson ide: timetodesign.hu/tananyag.html
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
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
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
Multimédia 2017/2018 II.
Multimédia 2017/2018 II. 1. gyakorlat HTML5, CSS3 alapok Alapvető HTML5 elemek Egyszerű HTML dokumentum Oldal cime
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
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:
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
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
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
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
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
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
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
(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
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
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 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,
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
CSS-segédlet. 1. CSS és HTML. 1.1. Külső stíluslap HTML-hez csatolása
CSS-segédlet 1. CSS és HTML 1.1. Külső stíluslap HTML-hez csatolása A hivatkozást a HTML-dokumentum szakaszában kell elhelyezni. Ha a HTML- és a CSS-fájl nem ugyanazon könyvtárban van, akkor a HTML-ben
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:
CSS3. I. Mediaqueries
CSS3 I. Mediaqueries Responsive webdesign A médialekérdezések legfontosabb alkalmazási esete az adaptív weboldalak készítése. Az áttekinthetőség érdekében a HTML-dokumentumot több CSS-sel kötik össze.
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
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ó)
Á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
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,
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
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
(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
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
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.
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
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
Ö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
i1400 Image Processing Guide A-61623_zh-tw
i1400 Image Processing Guide A-61623_zh-tw ................................................................. 1.............................................................. 1.........................................................
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
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
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)
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
Témák. Bevezetés az informatikába 7. Előadás. Szövegfile-ok típusai. Szövegszerkesztők típusai. Mértékegységek. Szövegszerkesztők szolgáltatásai
Bevezetés az informatikába 7. Előadás Számítógépes dokumentumkészítés I Témák Szövegfile-ok típusai Szövegszerkesztők típusai Szövegszerkesztők szolgáltatásai Microsoft Word szövegszerkesztők Szövegfile-ok
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
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,
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ő
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õ
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) -
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
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
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
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
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
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
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
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;
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)
HTML alapok 1. Minimális HTML file: <HTML> <HEAD> <TITLE> cím </TITLE> </HEAD> <BODY>... </BODY> </HTML> Formátum parancsok:
HTML alapok 1 Minimális HTML file: cím ... Formátum parancsok: dőlt szöveg félkövér aláhúzott új sor vízszintes vonal
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
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
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!
8. Gyakorlat AWK 1, CSS
8. Gyakorlat AWK 1, CSS Az awk egy általános célú programozási nyelv, amelyet szöveges állományok földolgozására terveztek. Elnevezése a megalkotói Alfred Aho, Peter Weinberger és Brian Kernighan családnevének
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
Az MS Excel táblázatkezelés modul részletes tematika listája
Az MS Excel táblázatkezelés modul részletes tematika listája A táblázatkezelés alapjai A táblázat szerkesztése A táblázat formázása A táblázat formázása Számítások a táblázatban Oldalbeállítás és nyomtatás
Tájékoztató. Használható segédeszköz: -
A 35/2016. (VIII. 31.) NFM rendelet szakmai és vizsgakövetelménye alapján. Szakképesítés, azonosító száma és megnevezése 54 481 06 Informatikai rendszerüzemeltető Tájékoztató A vizsgázó az első lapra írja
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
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
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
Ismétlés Érdemes megjegyezni: a HTML nyelv nem azért készült, hogy segítségével formázzuk a kinézetét/stílusát az oldalunknak, hanem azért, hogy leírj
CSS-től az űrlapig Ismétlés Érdemes megjegyezni: a HTML nyelv nem azért készült, hogy segítségével formázzuk a kinézetét/stílusát az oldalunknak, hanem azért, hogy leírjuk vele az oldalunk tartalmát, ezeket
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
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?
(statikus) (X)HTML oldalak, stíluslapok. Mi a HTML? HTML (HyperText Markup Language) - Hiperszöveges
Áttekintés (statikus) (X)HTML oldalak, stíluslapok A HTML története (X)HTML oldal felépítése Egymásba ágyazható stíluslapok CSS 1 / 1 2 / 1 Mi a HTML? A HTML története HTML (HyperText Markup Language)
(statikus) (X)HTML oldalak, stíluslapok
(statikus) (X)HTML oldalak, stíluslapok 1 / 37 Áttekintés A HTML története (X)HTML oldal felépítése Egymásba ágyazható stíluslapok CSS 2 / 37 Áttekintés A HTML története (X)HTML oldal felépítése Egymásba
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.
A webprogramozás alapjai. Óbudai Egyetem Neumann János Informatikai Kar 2018/19/1 szemeszter
1 A webprogramozás alapjai Óbudai Egyetem Neumann János Informatikai Kar 2018/19/1 szemeszter V. előadás HTML nyelv fontosabb elemei II. Weboldal építése blokkokból (div) A -ről bővebben (metaadatok)
Témák. Informatika I Eladás. Szövegfile-ok típusai. Szövegszerkesztk típusai. Mértékegységek. Szövegszerkesztk szolgáltatásai
Informatika I Eladás Számítógépes dokumentumkészítés I Témák Szövegfile-ok típusai Szövegszerkesztk típusai Szövegszerkesztk szolgáltatásai Microsoft Word szövegszerkesztk Szövegfile-ok típusai Formázatlan
Microsoft Word előadás. Bevezetés az informatikába I.
Microsoft Word előadás Bevezetés az informatikába I. A Word felépítése Menüsor Eszköztár Vonalzók Kurzor Dokumentum Állapotsor Betűk betűtípus fogalma betűméret félkövér, dőlt, aláhúzott proporcionális
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.
ECDL Táblázatkezelés. www.nomina3p.hu 1. 4.1.1 A táblázatkezelés első lépései. 4.1.2 Beállítások elvégzése
4.1 Az alkalmazás 4.1.1 A táblázatkezelés első lépései 4.1.2 Beállítások elvégzése 4.1.1.1 A táblázatkezelő alkalmazás megnyitása és bezárása. 4.1.1.2 Egy és több munkafüzet (dokumentum) megnyitása. 4.1.1.3
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
Az SVG egy olyan XML alkalmazás, amit vektoros grafikai tartalmak létrehozására fejlesztettek ki.
SVG SVG Az SVG egy olyan XML alkalmazás, amit vektoros grafikai tartalmak létrehozására fejlesztettek ki. SVG = Scalable Vector Graphics A W3C fejlesztette ki, olyan neves cégekkel, mint pl. az Adobe Teljes
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
INFO1 Tartalom közlése a Weben: HTML, CSS
INFO1 Tartalom közlése a Weben: HTML, CSS Kovács Kristóf, Pálovics Róbert, Wettl Ferenc 2016-10-04 Kovács Kristóf, Pálovics Róbert, Wettl FerencINFO1 Tartalom közlése a Weben: HTML, CSS 2016-10-04 1 /
É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,
Web-fejlesztés NGM_IN002_1
Web-fejlesztés NGM_IN002_1 Alap reprezentációs technológiák HTML Hyper Text Markup Language SGML alkalmazás Dokumentum-struktúra leírásra nem lap leírás! hiperszöveg dokumentum szemantika fejlécek listák
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
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
3. modul - Szövegszerkesztés
3. modul - Szövegszerkesztés - 1-3. modul - Szövegszerkesztés Az alábbiakban ismertetjük a 3. modul (Szövegszerkesztés) syllabusát, amely a modulvizsga követelményrendszere. A modul célja Ezen a vizsgán
1. Számítógép-használati rend 19. Számonkérés 2. Mire jó a számítógép? 20. Az imagine varázslatos világa 3. A számítógép részei; Hardver, perifériák
1. Számítógép-használati rend 19. Számonkérés 2. Mire jó a számítógép? 20. Az imagine varázslatos világa 3. A számítógép részei; Hardver, perifériák 21. Előre és hátra, jobbra és balra 4. Tartsunk előadást!
Villamosmérnöki szak Alkalmazott informatika mellék szakirány Laboratórium II. (VIAU5102) World Wide Web lapok készítése (Silabusz)
Villamosmérnöki szak Alkalmazott informatika mellék szakirány Laboratórium II. (VIAU5102) World Wide Web lapok készítése (Silabusz) HTML (Hyper Text Markup Language)...2 A HTML dokumentumokról...2 Néhány
JAVÍTÁSI ÚTMUTATÓ Az útmutatóban szereplő pontszámok nem bonthatók tovább, csak a megadott módon! 1. Képszerkesztés feladat Meghívó
F204-.foruló I. KATEGÓRIA JAVÍTÁSI ÚTMUTATÓ Az útmutatóban szereplő pontszámok nem bonthatók tovább, csak a megadott módon!. Képszerkesztés feladat Meghívó Meghívó Méret 000x500, mentés meghivo.png néven
A CorinMail hírlevélküldő rendszer szerkesztőfelületének használata:
A CorinMail hírlevélküldő rendszer szerkesztőfelületének használata: CMS tartalom szerkesztő használata A CMS szerkesztő felületet alapvetően két nézetben tudjuk használni. Az alapbeállítás a vizuális
STÍLUSLAPOK HASZNÁLATA
STÍLUSLAPOK HASZNÁLATA Abonyi-Tóth Andor Egyetemi tanársegéd 1117, Budapest XI. kerület, Pázmány Péter sétány 1/C, 2.404 Tel: (1) 2090555/8466 http://abonyita.inf.elte.hu CSS utasítás 2 A CSS utasítás
DKÜ ZRT. A Portál rendszer felületének általános bemutatása. Felhasználói útmutató. Támogatott böngészők. Felületek felépítése. Információs kártyák
A Portál rendszer felületének általános bemutatása Felhasználói útmutató Támogatott böngészők Internet Explorer 9+ Firefox (legújabb verzió) Chrome (legújabb verzió) Felületek felépítése Információs kártyák
Gyorselérési eszköztár. Szerkesztőléc. Oszlopcímkék. Menüszalag. Office gomb. Aktív cellát jelölő keret - cellakurzor Sorcímkék Munkalapok.
Munkafelület Számítógépes ismeretek Név mező Szerkesztőléc Gyorselérési eszköztár Oszlopcímkék Táblázatkezelés Office gomb Menüszalag Aktív cellát jelölő keret - cellakurzor Sorcímkék Munkalapok Állapotsor
ACTA AGRARIA DEBRECENIENSIS A kézirat elkészítésére vonatkozó elıírások
ACTA AGRARIA DEBRECENIENSIS A kézirat elkészítésére vonatkozó elıírások ACTA AGRARIA DEBRECENIENSIS Manuscript Editing Instructions (short version, see also the examples given in the full Hungarian version)
HTML, XML szerkesztés
HTML, XML szerkesztés Vezető: Majzik Zsuzsa Előadó: Rigó Ernő http://gdf.tricon.hu/html Előzmények 1960-as évek: GML IBM SGML Standard Generalized Markup Language 1986-os
Hogyan készítsünk Colorbox-os képgalériát Drupal 7-ben?
Hogyan készítsünk Colorbox-os képgalériát Drupal 7-ben? (Jó segítség: http://www.youtube.com/watch?v=gstnfznz3hg) I. Telepteni kell az alábbi három dolgot 1. A Colorbox modult (https://www.drupal.org/project/colorbox)
I. Internetes keresési feladatok (ajánlott idő: 20 perc)
I. Internetes keresési feladatok (ajánlott idő: 20 perc) A talált oldalak internet címét (URL) másold ki egy szöveges dokumentumba és mentsd Csapatnev_internet néven! A konkrét válaszokat ide a papírra
PCLinuxOS Magazine január
PCLinuxOS Magazine - 2018. január Írta: M. Hanny Sabbagh The FOSS Post https://fosspost.org/tutorials/how-to-customize-firefox-57-user-interface CC BY-NC-SA 4.0 licence alapján felhasználva. A Mozilla
Bevezetés az Excel 2010 használatába
Molnár Mátyás Bevezetés az Excel 2010 használatába Csak a lényeg érthetően! Tartalomjegyzék A TÁBLÁZATKEZELÉS ALAPJAI 1 AZ EXCEL PROGRAMABLAK FELÉPÍTÉSE 1 GYORSELÉRÉSI ESZKÖZTÁR 5 ÁLLAPOTSOR 6 AZ EXCEL
4. modul - Táblázatkezelés
4. modul - Táblázatkezelés Az alábbiakban ismertetjük a 4. modul (Táblázatkezelés) syllabusát, amely a gyakorlati modulvizsga követelményrendszere. A modul célja Ez a modul a táblázatkezeléssel kapcsolatos