Webprogramozás szakkör
|
|
|
- Lili Orosz
- 7 évvel ezelőtt
- Látták:
Átírás
1 Webprogramozás szakkör Előadás 3. ( ) Bevezető HTML felelevenítés HTML elemei Tag-ek, például: <html>, <h1>, <ol>, <li> Tulajdonságok, például: size, bgcolor Értékek, például: 4, black, #FFFFF Oldalkeret <html> <head><title></title></head> <body>tartalom HELYE</body> </html> Táblázatok <table> <tr> </tr> <tr> </tr> </table> <td>1. sor, 1. cella</td> <td>1. sor, 2. cella</td> <td>1. sor, 3. cella</td> <td>2. sor, 1. cella</td> <td colspan= 2 >2 sor, 2-3. cellái összevonva</td> HTML gyengeségei Formázás: a weboldal elrendezése és a használt stílusok (színek, elválasztó vonalak, betűk stb.) összessége HTML-ben is formázható az oldal, de nem elég hatékonyan o Minden helyre külön beírjuk, hogy például piros, félkövér szöveg legyen Ez egy adott stílus, hogy piros és félkövér Így o Fölösleges plusz időtöltés a formázás o Sok fölösleges kód átláthatóság o Sok fölösleges kód nagyobb fájlméret o Összemosódik az oldal szerkezete és a formázás
2 CSS koncepció CSS: egymásba ágyazott stíluslapok Írjuk meg egyszer, hogy milyen stílusokat szeretnénk használni Adjunk nevet a stílusoknak Ahol használni szeretnénk, ott csak a nevet kell megadni Persze ez nem ilyen egyszerű CSS előnyök, célok Rendezettebb lesz a honlapod Egy sablont hozol létre, majd ha változtatni akarsz, akkor elég csak a css fájlt megváltoztatni Egy külön fájlba (*.css) tárolod az általad használt sablonokat Jegyzettömbben lehet megírni a fájlt, és pl.: "styles.css" néven kell elmenteni A html kódba csak hivatkoznod kell rá Leegyszerűsíti az oldalak forráskódjának írását Szétválik a tartalom a szerkezettől illetve a megjelenítéstől CSS szabályai A nyelv megtanulása talán könnyebb, mint a HTML, csak ennyit kell megjegyezni: szelektor { tulajdonság1: érték1; tulajdonság2: érték2; Ez egy sablon, a fentebb látható elemei a következők: A szelektor helyére valamilyen nevet írunk. A tulajdonság helyén azt adjuk meg, hogy mit formázunk (pl. szín, betűméret). Az érték esetében pedig megadjuk, hogy pl. a betűméret az mekkora is legyen pontosan. Konkrét példával:.piros_fk { font-weight: bold; // piros_fk a sablon neve // piros betűszín // vastag betűk (félkövér) CSS kód helye Hova írhatunk ilyen sablonokat? 3 lehetőség van: Egy külön fájlba, aminek.css kiterjesztést adunk HTML kód HEAD részébe Tetszőleges HTML tag-ba
3 Külön fájlba írt CSS kód Semmi mást nem kell tenni, mint az előző példánkat egy külön fájlba elhelyezni, a fájlt css kiterjesztéssel elmenteni (pl. style.css néven), majd importálni a fájlt a HTML kód HEAD részében (<link> tag): <html> <head> <title>honlapom</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html> Előnye, hogy több oldalba is importálhatjuk ugyanazt a fájlt, így minden sablon használható lesz az összes oldalon. Ide a sokat használt sablonokat helyezzük el. HTML kód HEAD részébe írt CSS kód Elhelyezhetünk CSS kódot az alábbi módon is, a HTML <style> tagba: <html> <head> <title>honlapom</title> <style type= text/css >.piros_fk { font-weight: bold; </style> </head> <body> </body> </html> Ennek hátránya, hogy csak azon az oldalon lesz érvényes, ahol megadtuk, de érdemes lehet itt megadni sablonokat, ha azt más oldalon nem használjuk. Tetszőleges HTML tag-ba írt CSS kód <html> <head> <title>honlapom</title> </head> <body> <p style= color:red;font-weight:bold; >Szöveg</p> </body> </html> Ekkor a HTML tag-ek style nevű tulajdonságában adhatjuk meg azt, amit a fenti példákban a kapcsos zárójelek közé írtunk. CSS kiválasztók (szelektorok) A szelektor helyén egy nevet kell megadunk, mely 3 féle lehet.
4 HTML tag neve Ha egy HTML tag nevét adjuk meg, akkor az oldalunkon minden ilyen nevű HTML tag-ra érvényesek lesznek a megadott stílusok. Például az összes <h1> címsor legyen kék: h1 { Azonosító A HTML oldalunkban a tag-eknek adhatunk egy azonosítót (id): <p id= alma >Szöveg</p> Itt a <p> HTML tag azonosítója az alma. Az azonosítóknak egyedinek kell lenniük, tehát egy oldalon csak egyszer szerepelhet minden azonosító név. Ha azt szeretnénk, hogy az alma azonosítón belül lévő részre érvényes legyen egy CSS sablon, akkor a kiválasztót egy kettős kereszttel kell kezdenünk: #alma { Ez tehát egy oldalon belül csak egyetlen HTML tag-ra lehet érvényes. Tetszőleges elnevezésű sablon A leggyakoribb, hogy egy tetszőlegesen választott nevet adunk a sablonunknak, majd ezt bármennyi alkalommal használjuk. Ekkor a CSS kiválasztót egy PONT-tal kell kezdeni:.barack { Ebben az esetben is valamilyen módon meg kell adnunk, hogy hol legyen érvényes, ezt a HTML tag-ek class tulajdonságában tehetjük meg: <p class= barack >Szöveg</p> Összetett kiválasztók Példa 1: csak azokra a h1 elemekre legyen érvényes, ahol alma sablont is megadtunk. CSS: h1.alma { HTML: <h1>erre nem lesz érvényes, nem lesz kék a szöveg</h1> <h1 class= alma >Erre viszont igen</h1> Példa 2: csak azokra a h1 elemekre legyen érvényes, ami egy alma sablonon belül van.
5 CSS:.alma p { HTML: <p>erre nem lesz érvényes</p> <p class= alma >Erre sem</p> <h1 class= alma >Erre nem <p>de erre már igen</p> itt újra nem</h1> Kiválasztók csoportosítása Ha ugyanazokat a stílusokat szeretnénk több kiválasztóval alkalmazni, akkor vesszővel elválasztva adjuk meg a kiválasztókat. Például a h1 és h2-es címsorok legyenek aláhúzottak: h1, h2 { text-decoration: underline; További megjegyzések Fontos megjegyezni szabályként, hogy minden HTML kódrészletre az a sablon lesz érvényes, ami a legközelebb van hozzá. Tehát ha egy külső fájlban megadnánk, hogy piros legyen a szöveg, az importálás után pedig megadjuk, hogy kék legyen, akkor kék lesz, hiszen azt adtuk meg később, és felülírja a később megadott a korábbit. Előfordulhat olyan eset, hogy nem tudjuk milyen HTML tag-ot lehetne használni, hogy megadhassuk a class tulajdonságot. Ekkor a <span> nevű, semleges, vagyis semmit sem módosító HTML tag használata célszerű, például: <p class= barack >Szöveg <span class= szilva >Ez más stílusú</span> ez újra brack stílusú</p> HTML vs CSS Hogyan állítottuk be egy szövegre HTML-ben, hogy piros színű és félkövér legyen? <b><font color= red >Szöveg</font></b> Egyszer leírva még kényelmes így is, de ha egy oldalon akár x meg kell ismételni, akkor már nem annyira, főleg, ha nem ilyen egyszerű formázást szeretnénk. Hogyan adhatjuk meg CSS-ben? CSS:.piros_fk { font-weight: bold; HTML: <span class= piros_fk >Szöveg</span>
6 Dobozmodell Egy adott szöveg gyakorlatilag egy szabályos doboznyi helyet foglal el. A szöveget körülveszi a kitöltés (padding), annak a határán található a körvonal (border), majd a körvonal és az őt befoglaló doboz (szülő HTML elem) közti távolság a margó (margin). Mind a négy oldal (fent, jobbra, lent, balra) külön szabályozható. Például egy <p> tag, nem egy egyszerű szöveget, hanem bekezdést jelöl, így egy teljes sort foglal el az általa alkotott doboz. Az ilyen elemeket blokkszintű HTML elemeknek hívjuk. Ha csak egy sima szövegről van szó, nem bekezdésről, az önmagában úgynevezett sorközi (inline) elem. Ekkor az őt körülvevő doboz csak addig tart, amíg a tartalom is, nem foglalja el a teljes sort. A körvonalat sokszor használjuk a weboldal egyes részeinek tagolására vagy díszítőelemként, míg a kitöltés és a margó a szövegek tagolását, jobb áttekinthetőséget, térközök beállítását segíti.
7 Órai feladat 1. Apple (lásd a honlapon) a. Betűtípus: a teljes dokumentumban Verdana. b. Betű igazítása sorkizárt a teljes dokumentumban (text-align: justify); c. Betű színek: a törzsben (body): #333333, egyes címsor: #666666, kettes címsor: #999999, hármas címsor: #CC6600. d. Betűméretek: egyes címsor: 32pt, kettes címsor: 16pt, hármas címsor: 16pt. e. Margók (margin): a dokumentum törzsnél 0, a fejlécnél 5 pixel. f. Bélések (padding): a képnek (csak felül) 15 pixel és minden táblázatcellának (<td>) 15px minden oldalon. g. A fejléc beállításai: alul 1 pixel széles folytonos (solid) keret (border) # színnel. Balra igazított szöveg (text-align: left). Otthoni gyakorló példa 1. A weboldalra feltöltött gyakorló feladatot (feladat 2) töltsük le, majd a start mappában lévő index.html fájlt nyissuk meg. Tetszőlegesen formázzuk, legyünk kreatívak és próbáljunk meg egy egyszerű, de szép oldalt készíteni. A végeredményre egy példát a final mappában találhatunk. 2. A hp könyvtár final mappájában található végeredménynek nézzük meg a CSS fájlját és válaszoljuk meg a következő kérdéseket: a. Adjuk meg azoknak a sablonoknak a nevét, ahol azonosító segítségével választjuk ki, hogy hol legyen érvényes a sablon. Miért pont itt használtuk? b. Adjuk meg azoknak a sablonoknak a nevét, ahol tetszőleges nevet választottunk a sablonunknak. c. Milyen HTML tag-ekre készítettünk sablont? d. Keressük meg, hogy a végeredményben látható piros vonalakat hogyan készítettük el. e. Adjuk meg a szaggatott vonalat előállító kódrészt. f. Szavakkal fogalmazzuk meg, hogy a láblécre (footer) milyen formátumot készítettünk (például: a betűmérete 25 pixel stb.). g. Kis módosítással érjük el, hogy a fejlécben lévő kép körül legyen egy körvonal, 2px távolságra a kép széleitől. Haladó++ feladat Táblázat helyett <div>-ekkel készítsünk két hasábos elrendezést. Help:
8 CSS kivonat HTML <head> részbe importálás: <link href="style.css" rel="stylesheet" type="text/css"> CSS sablon általános leírása: szelektor { tulajdonság1: érték1; tulajdonság2: érték2;.kicsi_piros { font-size: 14px; HIVATKOZÁS: <p class="kicsi_piros">ez lesz a kicsi piros szöveg</p> Adott HTML elemre érvényes sablon h1 { font-size: 14px; Egyedi névvel ellátott sablon Fontosabb formázási utasítások Háttérszín: background- Azonosító alapú kiválasztás #kiemelt { font-size: 14px; HIVATKOZÁS: <p id="kiemelt">ez lesz a kiemelt szöveg</p> Betűszín: color: #000000; (# fekete szín) Betűméret: Betűtípus: Aláhúzás: Félkövér betűk: Dőlt betűk: Szöveg igazítás (középre): font-size: 14px; font-family: Arial, Helvetica, sans-serif; text-decoration: underline; font-weight: bold; font-style: italic; text-align: center; Körvonal: border: 1px solid red; (méret, típus, szín) Kitöltés: padding: 5px 2px 5px 2px; (fent-jobb-lent-bal sorrend) padding: 2px; (minden oldalt ugyanannyi) padding-top: 5px; (kitöltés csak fent) Margó: margin: 5px 2px 5px 2px; (hasonlóan a kitöltéshez)
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
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,
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 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
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:
Multimédia 2017/2018 II.
Multimédia 2017/2018 II. 1. gyakorlat HTML5, CSS3 alapok Alapvető HTML5 elemek Egyszerű HTML dokumentum Oldal cime
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
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:
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
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
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.
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.
Ö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
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
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!
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
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:
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
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
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
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,
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
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
A 27/2012 (VIII. 27.) NGM és a 12/2013 (III.28) NGM rendelet szakmai és vizsgakövetelménye alapján.
A 27/2012 (VIII. 27.) NGM és a 12/2013 (III.28) NGM rendelet szakmai és vizsgakövetelménye alapján. Szakképesítés, azonosító száma és megnevezése 54 346 01 Irodai asszisztens Tájékoztató Használható segédeszköz:
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
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
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
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
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
É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,
A 27/2012 (VIII. 27.) NGM és a 12/2013 (III.28) NGM rendelet szakmai és vizsgakövetelménye alapján.
A 27/2012 (VIII. 27.) NGM és a 12/2013 (III.28) NGM rendelet szakmai és vizsgakövetelménye alapján. Szakképesítés, azonosító száma és megnevezése 54 346 01 Irodai asszisztens Tájékoztató Használható segédeszköz:
A 27/2012 (VIII. 27.) NGM és a 12/2013 (III.28) NGM rendelet szakmai és vizsgakövetelménye alapján.
A 27/2012 (VIII. 27.) NGM és a 12/2013 (III.28) NGM rendelet szakmai és vizsgakövetelménye alapján. Szakképesítés, azonosító száma és megnevezése 54 346 01 Irodai asszisztens Tájékoztató Használható segédeszköz:
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
3. modul - Szövegszerkesztés
3. modul - Szövegszerkesztés Érvényes: 2009. február 1-jétől Az alábbiakban ismertetjük a 3. modul (Szövegszerkesztés) syllabusát, amely a gyakorlati vizsga alapját képezi. A modul célja Ezen a vizsgán
A 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
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)
Webshop készítése ASP.NET 3.5 ben I.
Webshop készítése ASP.NET 3.5 ben I. - Portál kialakíása - Mesteroldal létrehozása - Témák létrehozása Site létrehozása 1. File / New Web site 2. A Template k közül válasszuk az ASP.NEt et, nyelvnek (Language)
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/
A 27/2012 (VIII. 27.) NGM és a 12/2013 (III.28) NGM rendelet szakmai és vizsgakövetelménye alapján.
A 27/2012 (VIII. 27.) NGM és a 12/2013 (III.28) NGM rendelet szakmai és vizsgakövetelménye alapján. Szakképesítés, azonosító száma és megnevezése 54 346 01 Irodai asszisztens Tájékoztató Használható segédeszköz:
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Ó
SZABÁLYZATOK FORMÁTUMLEÍRÁSA
TOMORI PÁL FİISKOLA SZABÁLYZATOK FORMÁTUMLEÍRÁSA Változat száma: 1. Elfogadás dátuma: 2007. január 3. Határozat száma: 2007/1/6. Hatályos: 2007. január 3. Felelıs személy: Tóth Péter, fıtitkár oldalszám:
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
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
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
(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
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
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
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 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,
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
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
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,
Egyes esetekben e fejezet keretében készítjük el a Tartalomjegyzéket is, melynek technikai megvalósításáról majd az 5.6.6. fejezetben olvashat.
Szövegszerkesztés 1. Bevezetés Ebben a modulban a szövegszerkesztési szabályokat kívánjuk bemutatni. Feltételezzük, az olvasó már ismer legalább egy szövegszerkesztő programot, így annak teljes körű bemutatására
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
NEMZETI SZAKKÉPZÉSI ÉS FELNŐTTKÉPZÉSI HIVATAL. Komplex szakmai vizsga. Gyakorlati vizsgatevékenység
NEMZETI SZAKKÉPZÉSI ÉS FELNŐTTKÉPZÉSI HIVATAL Komplex szakmai vizsga Gyakorlati vizsgatevékenység Gyakorlati vizsgatevékenység időtartama: 120 perc A vizsgafeladat értékelési súlyaránya: 30% 315/2013.
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,
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ő
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...
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
Microsoft Office Word (2013) Jellemzői: Grafikus szövegszerkesztő program, sokféle formázási lehetőséggel. Ablak részei : címsor
menüszalagok Microsoft Office Word (2013) Jellemzői: Grafikus szövegszerkesztő program, sokféle formázási lehetőséggel. Ablak részei : címsor vonalzó Navigációs ablakrész görgetősáv állapotsor Szöveg formázása
A 27/2012 (VIII. 27.) NGM és a 12/2013 (III.28) NGM rendelet szakmai és vizsgakövetelménye alapján.
A 27/2012 (VIII. 27.) NGM és a 12/2013 (III.28) NGM rendelet szakmai és vizsgakövetelménye alapján. Szakképesítés, azonosító száma és megnevezése 54 346 01 Irodai asszisztens Tájékoztató A vizsgázó az
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
Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET)
Eötvös Loránd Tudományegyetem Informatikai Kar Webes alkalmazások fejlesztése 4. előadás (ASP.NET) 2016 Giachetta Roberto groberto@inf.elte.hu http://people.inf.elte.hu/groberto Nézetek kezelése Sok esetben
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
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,
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)
NEMZETI SZAKKÉPZÉSI ÉS FELNŐTTKÉPZÉSI HIVATAL. Komplex szakmai vizsga. Gyakorlati vizsgatevékenység
NEMZETI SZAKKÉPZÉSI ÉS FELNŐTTKÉPZÉSI HIVATAL Komplex szakmai vizsga Gyakorlati vizsgatevékenység Gyakorlati vizsgatevékenység időtartama: 120 perc A vizsgafeladat értékelési súlyaránya: 30% 315/2013.
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
Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET) Cserép Máté.
Eötvös Loránd Tudományegyetem Informatikai Kar Webes alkalmazások fejlesztése 4. előadás (ASP.NET) Cserép Máté mcserep@inf.elte.hu http://mcserep.web.elte.hu Készült Giachetta Roberto jegyzete alapján
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
NEMZETI SZAKKÉPZÉSI ÉS FELNŐTTKÉPZÉSI HIVATAL. Komplex szakmai vizsga. Gyakorlati vizsgatevékenység
NEMZETI SZAKKÉPZÉSI ÉS FELNŐTTKÉPZÉSI HIVATAL Komplex szakmai vizsga Gyakorlati vizsgatevékenység Gyakorlati vizsgatevékenység időtartama: 120 perc A vizsgafeladat értékelési súlyaránya: 30% 315/2013.
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
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,
HTML. Szerkesszünk honlapot.. az alapoktól
HTML Szerkesszünk honlapot.. az alapoktól HTML 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
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
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 IV. előadás Nyelv típusok HTML nyelv fontosabb elemei I. Mappaszerkezet és file struktúra Szerkesztők bemutatása,
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
Microsoft PowerPoint XP
Prezentáció Microsoft PowerPoint XP Feladatgyűjtemény 1. FELADAT AZ ELŐADÁS-TERVEZŐ VARÁZSLÓ HASZNÁLATA, MENTÉS, MENTÉS MÁSKÉNT Hozzon létre egy Marketingterv típusú bemutatót az Előadás-tervező varázsló
A 35/2016. (VIII. 31.) NFM rendelet szakmai és vizsgakövetelménye alapján.
A 35/2016. (VIII. 31.) NFM rendelet szakmai és vizsgakövetelménye alapján. Szakképesítés azonosítószáma és megnevezése 54 481 06 Informatikai rendszerüzemeltető Tájékoztató A vizsgázó az első lapra írja
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
WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK
ECDL Webszerkesztés, syllabus 2.0 WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK 1. Mi az FTP? a) Az FTP a multimédiás dokumentumok leíró nyelve. b) Az FTP a weboldalon lévő kattintható elem, amellyel egy másik
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
Diagram formázása. A diagram címének, a tengelyek feliratainak, jelmagyarázatának, adatfeliratainak formázása
A diagram címének, a tengelyek feliratainak, jelmagyarázatának, adatfeliratainak formázása Ha ezen elemeknek a betűtípusát, betűstílusát, betűméretét, betűszínét és az elem hátterét akarjuk formázni, akkor
1. kép. A Stílus beállítása; új színskála megadása.
QGIS Gyakorló Verzió: 1.7. Wroclaw Cím: A Print composer használata és a címkézés. Minta fájl letöltése innen: http://www.box.net/shared/87p9n0csad Egyre több publikációban szerepelnek digitális térképek,
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,
A DIPLOMADOLGOZAT FORMAI KÖVETELMÉNYEI
A DIPLOMADOLGOZAT FORMAI KÖVETELMÉNYEI A DOLGOZAT ÁTADÁSA A dolgozatot 4 nyomtatott és egy elektronikus (CD-n PDF formátumban, egyéb mellékletek) példányban kell átadni. A dolgozat egyszerű, puha papírkötésben
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
33 346 01 1000 00 00 Irodai asszisztens Irodai asszisztens. 33 346 01 0100 31 02 Gépíró, szövegszerkesztő Irodai asszisztens
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,
ECDL képzés tematika. Operáció rendszer ECDL tanfolyam
Operáció rendszer ECDL tanfolyam Alapok A Windows áttekintése Asztal Tálca Start menü Lomtár használata Súgó használata Felhasználói fiókok kezelése Kijelentkezés, felhasználóváltás Fájlok és mappák Sajátgép
ECDL Webszerkesztés, syllabus 2.0
2014 ECDL Foundation (ECDL-F) és Neumann János Számítógép-tudományi Társaság (NJSZT) Minden jog fenntartva. Jelen kiadványt, ill. annak részeit tilos reprodukálni, bármilyen formában vagy eszközzel közölni
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
Minta: nappali.html. ejjeli.html. A képek forrása: http://www.pwbelg.clara.net/aberrations/abs.html
Az alábbi feladatok középszintű érettségi példák. A megoldáshoz szükséges fájlok a /mnt/tanulo/_info/forraások/html mappában találhatók. Megoldásodat e-mail-ben várom, melynek közönséges böngészővel megjeleníthetőnek
Szöveges műveletek. Mielőtt nekikezdenénk első szövegünk bevitelének, tanuljunk meg néhány alapvető műveletet a 2003-as verzió segítségével:
Alapvető szabályok Mielőtt nekikezdenénk első szövegünk bevitelének, tanuljunk meg néhány alapvető műveletet a 2003-as verzió segítségével: Minden szöveges elem szövegdobozban, objektumban helyezkedik
Több oldalas dokumentum készítése. MS Word 2010 szövegszerkesztővel
Több oldalas dokumentum készítése MS Word 2010 szövegszerkesztővel Egy többoldalas dokumentummal szemben támasztott követelmények (példa feladaton keresztül bemutatva) Készítsünk hat oldalas dokumentumot,
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 213 05 Szoftverfejlesztő Tájékoztató A vizsgázó az első lapra írja fel a nevét!
VISEGRÁDI ORSZÁGOK ÉRETTSÉGI 2013 1 SZÖVEGSZERKESZTÉS FELADATOK. A következő országok alkotják a visegrádi országokat:
SZÖVEGSZERKESZTÉS VISEGRÁDI ORSZÁGOK A következő országok alkotják a visegrádi országokat: ÉRETTSÉGI 2013 1 Magyarország, Szlovákia, Csehország, és Lengyelország. 1. Az alábbi dokumentum a szövetség történetét,
Sakk-játék. 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ó Sakk-játék Feladat: JavaScript és CSS segítségével sakk-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 megtekintéséhez