Készítette: Subecz Zoltán, Szolnoki Főiskola, http://suzo.uw.hu,
[email protected]
HTML - CSS A következő félévben lesz a HTML, XML szerkesztés nevű tantárgyuk. Mivel a Kliensoldali programozás is a HTML-re épül, ezért most először átnézzük Weblap-szerkesztés HTML nyelven CSS formázással témát. És majd a következő félévben nézzük a Javascript-et.
Tartalomjegyzék Tartalomjegyzék............................................................................................................................................1 Bevezetés.......................................................................................................................................................2 HTML alapok.................................................................................................................................................4 CSS alapok.....................................................................................................................................................5 Szövegek készítése.........................................................................................................................................7 Linkek..........................................................................................................................................................11 Multimédia...................................................................................................................................................12 Listák............................................................................................................................................................13 Táblázatok....................................................................................................................................................14 Címsorok és formázásuk..............................................................................................................................15 Az oldalszerkezet kialakítása.......................................................................................................................17 Űrlapok........................................................................................................................................................21 Fejrész..........................................................................................................................................................21
-1-
Bevezetés Ajánlott irodalom: Órán ezt is használjuk: - Debolt, V.: Html és CSS - Webszerkesztés stílusosan; Kiskapu Kft., Budapest, 2005 Letölthető az Internetről => Google ( például: "HTML.es.CSS.webszerkesztes.stilusosan.pdf" ) - Julie C. Meloni, Michael Morrison Tanuljuk meg a HTML5 és CSS használatát 24 óra alatt Kiadó: Kiskapu - Sikos László: Stíluslapok a weben – CSS kézikönyv; BBS-INFO Kiadó 2005 ONLINE:
Órán főleg ezt a könyvet használjuk: - http://nagygusztav.hu/web-programozas oldalról letölthető: web_programozas_-_szines.pdf (2011-es kiadás) doksi.hu oldalról sok könyv letölthető a témában: http://html.lap.hu/ http://css.lap.hu/ Jó HTML és CSS referencia magyarul: http://documentation.onlinesoft.cc http://www.sourcecodepower.com/
-2-
Aki még nem hozott létre magának tárhelyet a www.uw.hu ingyenes szolgáltatónál, az regisztráljon a szünetben. Ide fogjuk feltölteni a weblapjainkat. TK: Nagy Gusztáv tankönyve TK2: Debolt, V.: Html és CSS - Webszerkesztés stílusosan; Az első TK-et nézzük végig, és ehhez lesznek kiegészítések a TK2-ből. TK2-ben jó példák erre a feladattípusokra: 64-75, 84-110 Weblap-szerkesztés HTML nyelven CSS formázással HTML oldalt az ingyenes Komodo Edit programmal fogjuk szerkeszteni. De szerkeszthetjük pl. Jegyzettömbbel is, vagy a szintén ingyenes Notepad++ programmal is. Komodo Edit letölthető: http://www.activestate.com/komodo-edit http://www.activestate.com/komodo-edit/downloads TK 1-107 A TK kimaradó részeit Házi feladatként kell átnézni!
-3-
HTML alapok TK. 31-34 32: Feladat kipróbálása Komodo Edit => File menü => New => New file jobb alsó sarokban. nyelv beállítása: HTML Mintafeladat beírása Kiegészítések TK/35: Megjegyzések TK/38: Szabványosság Egy Internetes oldalon megnézni. pl. www.origo.hu Ezeket nem kell kívülről megtanulni: Komodo Edit => File menü => New => File from Template => HTML template kiválasztása. Egy előre formázott oldallal indít. TK/39: Első 2 bekezdés HTML5: http://hu.wikipedia.org/wiki/HTML5
-4-
CSS alapok CSS: A CSS beállítások közül azokat is kell tudni, amelyikre nem nézünk példát,de szerepel a TK-ben. HTML-re már láttunk példát a 32. oldalon. TK. 41-47: Azonosító alapú kiválasztás–ig. Vagyis a HTML mellett a CSS-t is megismerjük. Azt is kell használni. 42: A stílusok használatának okai: A HTML tagok eredetileg arra lettek megalkotva, hogy a dokumentum tartalmát definiálják. 43: A HTML 4.0-ás verziójával és a vele párhuzamosan fejlesztett CSS segítségével létrejött egy jól használható eszközpáros a webfejlesztők részére. 43: belekeveredtek a HTML nyelvbe a megjelenítést befolyásoló elemek. Vagyis: A HTML-ben is vannak formázások (pl. igazítások, pl. középre igazítás…, font beállítások, pl. betűszín,… ) , de azokat nem használjuk, hanem minden formázást a CSS-el oldjuk meg. A HTML-t csak a tartalom felviteléhez használjuk. 44: A külső stíluslap alkalmazása a legideálisabb eset. Ekkor a HTML állomány az oldal informatív részét tartalmazza, a külső CSS állomány pedig összegyűjtve a megjelenítésre vonatkozó formázásokat. 45: Beágyazott stíluslap, soron belüli stílus A 32. o példáját kiegészítve: HTML-be: Ez egy bekezdés -be a 45. oldalról: body {background-color: red} p {margin-left: 20px} 45: Soron belüli stílus Kiegészítve az előző oldal: Ez egy bekezdés 45-46: A CSS nyelvtana Oldalt kiegészítjük a következő stílussal: p{ text-align: center; color: black; font-family: arial }
-5-
46. Osztály alapú kiválasztás Az előzőt kiegészítjük: HTML-be: Ez egy jobbra igazított bekezdés. Ez egy középre igazított bekezdés. CSS-be: p.jobb {text-align: right} p.bal {text-align: center} 47: Azonosító alapú kiválasztás. Egy id azonosítót egy HTML lapon csak egyszer lehet használni. Példa Készítsünk id1 néven azonosítót. ( tulajdonsága: szín:piros) Alkalmazzuk az oldalon. #id1 { color: red } a Majd visszatérünk még a 49-72-re.
-6-
Szövegek készítése Alapbeállításokat nézünk meg, amelyeket majd példákon gyakorolunk. TK. 72-74: Szövegek készítése TK. 76-79: Szövegek Komodo Edit: File menü => New => File from Template => HTML Készítsük el a következő HTML oldalt, amihez gyakoroljuk majd a CSS formázásokat. Címsor 1 Címsor 2 Címsor 3 Címsor 4 Szöveg1 Szöveg2 Új sor 76: A szöveg színe Egymás után próbáljuk ki a következő CSS formázásokat. Weblapom címe h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)} 76. Betűtávolság 76: Szótávolság h1 {word-spacing: 50px} 76: A szöveg igazítása A sorkizárt igazításnak több soros bekezdések esetén van értelme. majd nézünk rá példát. 77: A szöveg dekorációja Csak az első 3. Az címkét majd később nézzük. 77: A szöveg behúzása Változtassunk a méreten.
-7-
77: Kis-, és nagybetű formázás Bővítsük a HTML részt: Szöveg 4 Szöveg 5 Szöveg 6 A CSS részbe írjuk be: p.nagybetu {text-transform: uppercase} p.kisbetu {text-transform: lowercase} p.kiskapitalis {font-variant: small-caps;} 77: Elválasztó karakterek értelmezése: A HTML-ben amit a ….. közé írunk,: - Ha több sorba írjuk, akkor a Böngészőben is több sor lesz - Ha több szóközt teszünk, akkor a böngészőben is úgy lesz. Példa Próbáljuk ki a következő HTML kódot: Első sor Második sor Harmadik sor Negyedik sor Ötödik sor alma körte alma körte 77: CSS-ben a white-space hasonló: .proba { => a tulajdonságok között szerepel a white-space, amit kiválasztva a lehetséges értékeket is adja.
-8-
77: CSS-ben a direction: szöveg iránya Példa …… .rtl { direction: ltr; } .ltr { direction: rtl; } Szöveg! Szöveg! Így írja ki: Szöveg! ! Szöveg 77: Betűtípus megadása Bővítsük a HTML-t: Szöveg 7 CSS-be: h3 {font-family: times} p {font-family: courier} p.sansserif {font-family: sans-serif} 78: Betűméret font-size: => beírása után lehetőségünk van a méret és a mértékegység kiválasztására. (pl. px, cm, mm, % ….) em: font méret. Pl. ha a font méret 12pt, akkor 2em=24pt Változtassuk a TK-ból beírt értékeket. 78: Betűstílus 78: Betűvastagság HTML-t átírni: Szöveg 4 Szöveg 5 Szöveg 6 CSS-be: p.normal {font-weight: normal} p.vastagabb {font-weight: bold} p.legvastagabb {font-weight: 900} A legvastagabb nem biztos, hogy működik. -9-
79: Első betű és első sor Külön-külön kipróbálni a két stílust.
- 10 -
Linkek TK. 79-81 Például, HTML-be: Szolnoki Főiskola 80: A target tulajdonság Szolnoki Főiskola 80: A name tulajdonság: Majd találkozunk vele a példáknál. 81: Linkek formázása Egy új linket is beszúrni a HTML-be + a CSS-eket. Origo 81: Kimenő linkek formázása: A link mögött látható a kép. De a képnek csak akkora részlete, ami belefér a sorba. Példa a.ext { background: url("kep.jpg") } Szolnoki Főiskola
- 11 -
Multimédia TK. 81-85 81: Képek 82: base: Meghatároz egy alap URL-t a relatív URL-ek számára. Példa: 82: Az alt tulajdonság 82: Méret megadása 82: Kép használata linkként 83-85: Flash lejátszó beágyazása: Csak a lényeget
- 12 -
Listák TK: 86-89 86-88: HTML kódokat kipróbálni. 88: fekete négyzet a lista jelölő ………………………………….. ul.negyzet { list-style-type:square} } első masodik harmadik Római számokkal írja a sorszámot …………………………….. ol.romai { list-style-type:upper-roman} } első masodik harmadik kép a lista jelölő: ………………………………….. ul.kep { list-style-image:url('jel.gif')} } első masodik harmadik - 13 -
Táblázatok TK. 89-94 Példákat kipróbálni. Majd visszatérünk a 94-105-re: Űrlap, Fejrész TK. 49-52: néhány kis téma: csak a lényeget 1-2 mondatban.
- 14 -
Címsorok és formázásuk TK 52-58 Komodo Edit: File menü => New => File from Template => HTML Próbáljuk ki az 52. oldal feladatát: ….. részt bemásolni Készítsük el a CSS alapját a -be: 54. Háttérszín Másoljuk be a CSS-be. 54. Háttérkép Másoljunk egy kép fájlt a html fájl mellé. (kep.jpg) Töröljük a CSS-eket. CSS-be: body {background-image: url('kep.jpg'); 54. Ismétlődés Ha az előző képnél nagy méretű volt és nem volt ismétlődés, akkor keressenek az Interneten egy kis képet ( pl. www.origo.hu ) és az töltsék be háttérnek. Kipróbálni a csak egy irányú ismétlődést: background-repeat: repeat-y; 55: Pozíció. Az előző kis éppel folytassuk. Bővítsük az előző példát a háttérképes pozícionálással. CSS: body { background-image: url('kep2.jpg'); background-repeat: no-repeat; background-position: top center; }
- 15 -
55: Háttérkép ragasztva: Az oldal tartalmát sokszor másoljuk egymás alá, hogy görgethető legyen. CSS-be: body {background-image: url('kep2.jpg'); background-repeat: no-repeat; background-attachment: fixed; 56. Szegélyek CSS-t kipróbálni. 56. Szegélyszín Az első kipróbálni: pl. a h2 formázásába betenni. A többit csak megbeszélni 57. A szegély vastagsága Az elsőt kipróbálni: A p formázását átírni. 58. Térközök a szegélyen belül és kívül Dobozmodell: A tartalmat veszik körbe: padding, border, margin http://www.standardsmode.hu/html-css/dobozmodell/ http://www.webmake.hu/webkeszites/css/dobozmodell http://www.arcania.hu/Informatika/HTML/box-model.html http://www.begin.fanfusion.org/dobozmodell.php A 2. CSS-t kipróbálni pl. a h1 formázásához. Az első (2cm) a felső margó. a többi az óramutató járásával megegyezően. A padding értékeket hasonlóan kell megadni! A margóra lehet negatív értéket is megadni. Próbáljuk ki: Írjuk át a 2cm-t -1cm-re. Egy példa HTML-be: Próba CSS-be: .keret {background-color: yellow; border-style: solid; border-color: #ff0000 #00ff00 #0000ff rgb(255,0,255); border-width: 4px; margin-right: 70%;
- 16 -
Az oldalszerkezet kialakítása TK. 59-72 Komodo Edit => File menü => New => File from Template => HTML A tervezés fázisában érdemes a dobozok köré szegélyt felvenni, hogy lássuk, hogy hol a széle. ( Bár a külső margó még ez után következik. ) 59. Méretek HTML-be: Ez egy bekezdés. CSS-be: div#doboz { width: 500px; height: 300px; padding: 50px; border: solid 1px; } VAGY: A id="doboz" és a #doboz nélkül. 59. Megjelenítés 60. o felső példáját HTML-be és CSS-be beírni. - a két bekezdés egy sorban fog megjelenni - A DIV-be írt szöveg nem lesz megjelenítve. 60. A lebegtetés 60. Kép lebegtetése Egy kis méretű képpel kipróbálni a felső HTML-t. A kép előtt és után is megsokszorozni a szöveget 10x-10x példányban Majd: CSS-be: img { float: right; } 62. o. felső HTML és CSS példát is kipróbálni. A kép előtti és utáni sok szöveg maradjon meg. A stílusban a width értéket próbáljuk ki nagyobb méretben is.
- 17 -
62: Horizontális menü A menü több linkből álló lista. A link aláhúzását kikapcsoljuk. A menüpontok egymás mellé kerülnek. Az egeret rámozgatva az egyik menüre, annak megváltozik a színe. Próbáljuk ki a HTML és CSS-eket. A példa egy egyszerűbb, változata: .minta { text-decoration:none; (A link aláhúzása nem jelenik meg.) background-color:yellow; (Egy színes téglalapba írja a szöveget.) } a:hover { background-color:#ff3300} ( Ha az egeret rámozgatja, akkor megváltozik a link színe. ) Menü 1 Menü 2 Menü 3 63-66. Felesleges táblázatok nélküli oldalkialakítás 64-65 HTML-CSS példát kipróbálni: - először CSS nélkül, majd CSS-el. 1. CSS: Megrajzolja a keretet az egész köré. Megnöveli a sortávolságot 2. CSS: elkészíti a fejlécet és a láblécet. 3. CSS: elkészíti a két hasábot. Másik módszer a 2 hasábos elrendezésre: (TK2. 68) position: absolute; 68. old Az absolute pozícionálás miatt content doboz elhelyeződik, mintha a left doboz nem is lenne. A left doboz pedig a megadott pozícióba kerül. div.left { position: absolute; top: 60px; left: 10px; width: 160px; margin: 0; padding: 1em; }
- 18 -
66. Pozicionálási sémák 67. Relatív pozíció Az így eltolt elem „eredeti” helye üresen marad, oda más elem nem fog becsúszni. Példát kipróbálni. Van benne pl. negatív pozícionálás is. A fekete Főcím a következő bekezdésben lett volna az eltolás nélkül. Ahol az üres hely van. Onnan lett felfelé mozgatva. 68. Abszolút pozíció Az abszolút módon pozícionált elem nem tart fenn egy területet. Kipróbálni. 69. Z-index (TK2. 107-110) HTML-be: z-index:1 z-index:2 z-index:3 CSS-be: #elso { position: absolute; left: 100px; top:50px; width: 180px; height: 160px; z-index:1; background: #F00; } #masodik { position: absolute; left: 200px; top:100px; width: 180px; height: 160px; z-index:2; background: #0F0; } #harmadik { position: absolute; left: 300px; top:150px; width: 180px; height: 160px; z-index:3; background: #00F; } Amelyiknek nagyobb a Z-indexe az lesz felül.
- 19 -
Feladatok: Az suzo.uw.hu => Web-programozó => Kliensoldali programozás oldalon lévő HTML-CSS-…….-ZIP feladatok elkészítése Oldalak, ahonnan lehet formátumot letölteni, másolni, ötleteket szerezni. http://www.opendesigns.org/ http://www.openwebdesign.org/ http://topcsstemplates.com/ jobb oldalon sok hasonló oldal linkje http://www.oswd.org/ http://www.similarsitesearch.com/alternatives-to/opendesigns.org Egyéb: Google: free css templates - De bármelyik oldalnak meg tudjuk nézni a stílusát, CSS kialakítását. pl. Explorerben: Eszközök menü => Fejlesztői eszközök
- 20 -
Űrlapok TK: 94-104 Az Űrlapelemek tényleges lekezelésére a Szerveroldali programozásban lesz lehetőség (PHP). Ezt a TK 97. oldalán is látjuk. 94.: Kipróbálni 95. Password: a keresztnevet titkosítva olvassuk be. 95: Rádiógombok kipróbálni checked érték használatával 95: Jelölőnégyzetek kipróbálni Mindkettőhöz a checked érték használatával 96: Label elem kipróbálni 96. Űrlap adatok elküldése kipróbálni. A küldés lekezeléséhez majd meg kell írni a PHP szkriptet. => Szerver oldali programozás 97. Lenyíló lista. Kipróbálni size="5" –el kipróbálni multiple nem működött Explorerben. 98.felső kipróbálni 98. Több soros szöveges mezők. Kipróbálni 98. Mezőcsoportok Egymás után másolni 2 fieldset -et külön bekezdésbe. 101-103: Példát kipróbálni. Csak bemásolással megnézni.
Fejrész TK. 104 Pl. Egy oldal forrásában megkeresni a meta elemeket. pl. www.origo.hu
- 21 -
