2008/09 ősz
1. Word / Excel 2. Solver 3. ZH 4. Windows 5. Windows 6. ZH 7. HTML - CSS 8. HTML - CSS 9. ZH 10. Adatszerkezetek, változók, tömbök 11. Számábrázolási kérdések 12. ZH 13. Pótlás
Alapfogalmak HTML URL MIME dokumentumtípusok HTTP protokoll Stb. A HTML nyelv elemei Dokumentumtípus deklaráció Általános címkék Formázást végző címkék Táblázatot kezelő címkék
Bevezetés az informatikába
HTML (Hypertext Markup Language) Leírónyelv formázott dokumentumok leírására XHTML XML (Extensible Markup Language) szabványnak megfelelő HTML
HTTP (Hypertext Transfer Protocol) HTML formátumú fájlok, adatok továbbítására készült hálózati protokoll CERN-ben találták ki dokumentációk megosztására Állapotmentes protokoll (nincs bejelentkezett állapot) akkor ez bőven elég volt, de manapság korlátokat jelent Pl.: Mivel minden oldalletöltés különálló kapcsolatban történik, nehézkes webes bejelentkezés (később Cookie-k bevezetésével némiképp orvosolva)
Webszerver, HTTP-szerver A HTTP-kéréseket kiszolgáló számítógép Ill. a rajta futó szerverprogram (pl. Apache) HTTP-kliens A böngészőprogram. Hívják még User Agent-nek is. URL (Uniform Resource Locator) Egy dokumentum megtalálásához szükséges alapvető információk egy címbe sűrítve: Protokoll (nem csak http!) Gép vagy tartomány címe (+ portszám) A dokumentumhoz vezető elérési út a célgépen Pl.: http://mobil.nik.bmf.hu/tantargyak/bi-1.html MIME (Multipurpose Internet Mail Extension) E-mail formátumot kiterjesztő szabvány ASCII-tól eltérő karakterkészletű szövegek, csatolt állományok, több részből álló üzenetek MIME tartalomtípusok az e-maileken túlmenően is fontossággal bírnak pl. HTTP protokoll használatakor
CSS (Cascading Style Sheets) Stílusleíró nyelv Cél: Kinézet elkülönítése a HTML struktúrától, így a munka átláthatóbb JavaScript Kliensoldali programnyelv (böngésző futtatja) Java-hoz kevés köze van Szintaxis némileg hasonló
Bevezetés az informatikába
Szöveges file, akár Notepad-dal szerkeszthető Sima szöveg = output a weblapra Formázó, strukturáló elemek (tag-ek): <elem>szöveg</elem> Lezáró tag nem mindig kell (kiv. XHTML) <,> jelek szövegként: < > (less than, greater than) Bizonyos elemeknek adhatunk attribútumokat is: <p class= stilusnev >szöveg</p> <input type= text name= felhasznalonev > Ajánlások: idézőjelek használata, kisbetűk
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2"> <title>a dokumentum címe<title> </head> <body> </body> </html> <html>, <head>, <body>
<h1>,<h2>,<h3> Címsor1, 2, 3 Hierarchia jelölésére <strong>, <em> (régen: <b>, <i>) (Szemantikai vagy stílus jelölés?) <p> Új bekezdés <br> Kötelező sortörés (XHTML: <br />) <hr /> Vízszintes vonal (XHTML: <hr />)
<a> href, target Nem elég www.cim.hu, kell a protokoll is! Kis-nagybetű, /-jelre figyelni <img /> src alt <ul>+<li>, illetve <ol>+<li> <span> <div>
<table>, <thead>, <tbody>, <tr>, <td> <table> <thead> <tr> <td>mező1</td><td>mező2</td><td>mező3</td><td>mező4</td> </tr> </thead> <tbody> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr> </tbody> </table> <td>adat</td><td>adat</td><td>adat</td><td>adat</td> <td>adat</td><td>adat</td><td>adat</td><td>adat</td> <td>adat</td><td>adat</td><td>adat</td><td>adat</td> <td>adat</td><td>adat</td><td>adat</td><td>adat</td>
<form> name method action <input> name value type text, radiobutton, checkbox, submit, stb.
Böngészőfüggetlenség nem csak grafikus böngészők léteznek! Karakteres böngészők Felolvasóprogramok vakok számára Telefonok, PDA-k Ne építsünk JavaScript-re, Flash-re navigációt Ha nincs a böngészőben, a teljes tartalom elérhetetlen JS ellenőrizhet adatbevitelt, de ezt tegyük meg a szerveren is Menüt legjobb <ul> elemekkel listaként megírni (és CSS-ből megformázni), így CSS-t nem ismerő böngészőkben is értelmezhető Esetleg kínáljunk alternatív, JS és Flash nélküli verziót
Kép beillesztése esetén mindig töltsük ki az alt attribútumot Használjuk a <h1><h2><h3> elemeket a szöveg hierarchiájának reprezentálására (keresők indexeléskor figyelembe veszik) Frame-eket csak indokolt esetben Előnyei: nem kell a teljes oldalnak letöltődnie Hátrányai: könyvjelzőkön keresztül nem elérhető a tartalom, beágyazott oldalak címe nem látszik, keresők általi indexelés problémás
<table> vagy <div> a weblap teljes struktúrájának szerkesztésére? <div> használata javasolt CSS-ből formázzuk Hátrány: IE6 float típusú elemek margóját duplázza <table> Eredetileg nem erre való Néha mégis egyszerűbb Hátrány: nincs maximális szélessége ha a tartalom nem fér bele, szétcsúszik a kinézet
Felkészülést segítő hivatkozások, könyvek http://www.w3schools.com/ http://hu.wikipedia.org/wiki/webc%c3%adm http://hu.wikipedia.org/wiki/mime http://hu.wikipedia.org/wiki/http http://hu.wikipedia.org/wiki/html http://hu.wikipedia.org/wiki/css http://hu.wikipedia.org/wiki/javascript http://www.w3.org/tr/html4/
2008/09 ősz
1. Word / Excel 2. Solver 3. ZH 4. Windows 5. Windows 6. ZH 7. HTML - CSS 8. HTML - CSS 9. ZH 10. Adatszerkezetek, változók, tömbök 11. Számábrázolási kérdések 12. ZH 13. Pótlás
CSS alapfogalmak Mire jó, hol használjuk? Szelektorok, szintaxis Gyakorlás CSS menü készítése
Bevezetés az informatikába
CSS Cascading Style Sheets Cél: dokumentum struktúráját (HTML) elkülönítsük a stílusbeli formázásoktól (CSS) Alapvetően HTML, XHTML formázására, de használható XML fileok megjelenítésére is Előnyei: Jobban elkülöníti a fejlesztő és a dizájner munkáját Növeli az áttekinthetőséget Növeli a weblapok használhatóságát, megjelenés kezelhetőségét (CSS fájlt bármikor egy mozdulattal lecserélem!) Pl.: nyomtatható verzió nem kell új tartalom, csak másik CSS fájlt húzunk rá Javasolt: http://www.csszengarden.com/
HTML elemek style="" attribútuma <head> részben közvetlenül: <head> <style type="text/css"> </style> </head> hr {color: #ff0000} p {margin-left: 20px} Külön.css file, belinkelése: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
Stílust leíró szabályok sora Szelektor + deklarációs szakasz Deklaráció: { és } között, tulajdonság neve: érték; formában
* minden elemre Elem neve adott HTML elemre Pl.: li Leszármazott neve pl.: li a Class vagy id HTML attribútumok alapján pl.: div.osztalynev, div#idnev (div előtte nem kötelező, de szűkít!) Pszeudo-osztályok Pl.: :hover, :visited, :first-line Lehet kombinálni! Pl.: div.foelem li a.menu:hover
Lásd CSS Specifikáció! Google, CSS Reference első találat: http://www.w3schools.com/css/css_reference.asp Fontos! Ez csak irányadó specifikáció, a megvalósítás böngészőfüggő!
Bevezetés az informatikába
Készítsünk egy felsorolást. A felsorolás elemei lesznek a menüpontok. Minden egyes listaelem tartalmazza a linket a kívánt html oldalra Kód Várt kinézet
Tüntessük el a felsorolás előtti pöttyöket és nullázzuk a margó és padding értékeket, mert a különböző böngészők más-más alapértékekkel rendelkeznek Kód Várt kinézet
<li> elemeknek adjunk háttérszínt, és az <a> színét is változtassuk meg Kód Várt kinézet
Válasszuk el a menüket egy vékony vonallal úgy, hogy nem használunk méretre vágott képet vagy táblázat cellát Kód Várt kinézet
Állítsuk a menü szélességét 100px-re. A menü szövegek köré adjunk üres helyet. Figyeljünk a margó nullázására, mert böngészőnként eltérhetnek az alapértékek. Állítsuk be a karakterkészletet és a karakter formázásokat. Kód Várt kinézet
Figyeljük meg, mi történik, ha kivesszük a line-height sort! helyes A padding nem működik megfelelően. A line-height határozza meg a sorok közti távolságot. (Line-height - karakter magassága)/2 = szöveg fölött és alatt lévő üres hely (padding). helytelen Alapértelmezésben 16px, ha kisebb távolságokat szeretnénk a sorok között, akkor figyelembe kell venni ezt is.
Mentsük le a képet innen és illesszük a menü aljához: http://mobil.nik.bmf.hu/tantargyak/bi-1/css/img.jpg Kód Várt kinézet
Ha az egér az adott menüpont fölött van, az legyen más színű! Kód Várt kinézet
Felkészülést segítő hivatkozások, könyvek Wikipedia: http://hu.wikipedia.org/wiki/css http://en.wikipedia.org/wiki/cascading_style_sheets CSS referencia: http://www.w3schools.com/css/css_reference.asp http://www.w3schools.com/css/css_howto.asp CSS Zen Garden: http://www.csszengarden.com/