Ksztette: Subecz Zoltn, Szolnoki Fiskola, http://suzo.uw.hu, subecz@szolf.

hu

HTML - CSS
A kvetkez flvben lesz a HTML, XML szerkeszts nev tantrgyuk. Mivel a Kliensoldali programozs is a HTML-re pl, ezrt most elszr tnzzk Weblap-szerkeszts HTML nyelven CSS formzssal tmt. s majd a kvetkez flvben nzzk a Javascript-et.

Tartalomjegyzk
Tartalomjegyzk............................................................................................................................................1 Bevezets.......................................................................................................................................................2 HTML alapok.................................................................................................................................................4 CSS alapok.....................................................................................................................................................5 Szvegek ksztse.........................................................................................................................................7 Linkek..........................................................................................................................................................11 Multimdia...................................................................................................................................................12 Listk............................................................................................................................................................13 Tblzatok....................................................................................................................................................14 Cmsorok s formzsuk..............................................................................................................................15 Az oldalszerkezet kialaktsa.......................................................................................................................17 rlapok........................................................................................................................................................21 Fejrsz..........................................................................................................................................................21

-1-

Bevezets
Ajnlott irodalom: rn ezt is hasznljuk:
- Debolt, V.: Html s CSS - Webszerkeszts stlusosan; Kiskapu Kft., Budapest, 2005 Letlthet az Internetrl => Google ( pldul: "HTML.es.CSS.webszerkesztes.stilusosan.pdf" ) - Julie C. Meloni, Michael Morrison Tanuljuk meg a HTML5 s CSS hasznlatt 24 ra alatt Kiad: Kiskapu - Sikos Lszl: Stluslapok a weben CSS kziknyv; BBS-INFO Kiad 2005 ONLINE:

rn fleg ezt a knyvet hasznljuk:

- http://nagygusztav.hu/web-programozas oldalrl letlthet: web_programozas_-_szines.pdf (2011-es kiads) doksi.hu oldalrl sok knyv letlthet a tmban: http://html.lap.hu/ http://css.lap.hu/ J HTML s CSS referencia magyarul: http://documentation.onlinesoft.cc http://www.sourcecodepower.com/

-2-

Aki mg nem hozott ltre magnak trhelyet a www.uw.hu ingyenes szolgltatnl, az regisztrljon a sznetben. Ide fogjuk feltlteni a weblapjainkat. TK: Nagy Gusztv tanknyve TK2: Debolt, V.: Html s CSS - Webszerkeszts stlusosan; Az els TK-et nzzk vgig, s ehhez lesznek kiegsztsek a TK2-bl. TK2-ben j pldk erre a feladattpusokra: 64-75, 84-110 Weblap-szerkeszts HTML nyelven CSS formzssal HTML oldalt az ingyenes Komodo Edit programmal fogjuk szerkeszteni. De szerkeszthetjk pl. Jegyzettmbbel is, vagy a szintn ingyenes Notepad++ programmal is. Komodo Edit letlthet: http://www.activestate.com/komodo-edit http://www.activestate.com/komodo-edit/downloads TK 1-107 A TK kimarad rszeit Hzi feladatknt kell tnzni!

-3-

HTML alapok
TK. 31-34 32: Feladat kiprblsa Komodo Edit => File men => New => New file jobb als sarokban. nyelv belltsa: HTML Mintafeladat bersa Kiegsztsek TK/35: Megjegyzsek TK/38: Szabvnyossg Egy Internetes oldalon megnzni. pl. www.origo.hu Ezeket nem kell kvlrl megtanulni: Komodo Edit => File men => New => File from Template => HTML template kivlasztsa. Egy elre formzott oldallal indt. TK/39: Els 2 bekezds HTML5: http://hu.wikipedia.org/wiki/HTML5

-4-

CSS alapok
CSS: A CSS belltsok kzl azokat is kell tudni, amelyikre nem nznk pldt,de szerepel a TK-ben. HTML-re mr lttunk pldt a 32. oldalon. TK. 41-47: Azonost alap kivlasztsig. Vagyis a HTML mellett a CSS-t is megismerjk. Azt is kell hasznlni. 42: A stlusok hasznlatnak okai: A HTML tagok eredetileg arra lettek megalkotva, hogy a dokumentum tartalmt definiljk. 43: A HTML 4.0-s verzijval s a vele prhuzamosan fejlesztett CSS segtsgvel ltrejtt egy jl hasznlhat eszkzpros a webfejlesztk rszre. 43: belekeveredtek a HTML nyelvbe a megjelentst befolysol elemek. Vagyis: A HTML-ben is vannak formzsok (pl. igaztsok, pl. kzpre igazts, font belltsok, pl. betszn, ) , de azokat nem hasznljuk, hanem minden formzst a CSS-el oldjuk meg. A HTML-t csak a tartalom felvitelhez hasznljuk. 44: A kls stluslap alkalmazsa a legidelisabb eset. Ekkor a HTML llomny az oldal informatv rszt tartalmazza, a kls CSS llomny pedig sszegyjtve a megjelentsre vonatkoz formzsokat. 45: Begyazott stluslap, soron belli stlus A 32. o pldjt kiegsztve: HTML-be: <p> Ez egy bekezds</p> <head> -be a 45. oldalrl: <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> 45: Soron belli stlus Kiegsztve az elz oldal: <p style="color: blue; margin-left: 50px">Ez egy bekezds</p> 45-46: A CSS nyelvtana Oldalt kiegsztjk a kvetkez stlussal: p{ text-align: center; color: black; font-family: arial }

-5-

46. Osztly alap kivlaszts Az elzt kiegsztjk: HTML-be: <p class="jobb"> Ez egy jobbra igaztott bekezds. </p> <p class="bal"> Ez egy kzpre igaztott bekezds. </p> CSS-be: p.jobb {text-align: right} p.bal {text-align: center} 47: Azonost alap kivlaszts. Egy id azonostt egy HTML lapon csak egyszer lehet hasznlni. Plda Ksztsnk id1 nven azonostt. ( tulajdonsga: szn:piros) Alkalmazzuk az oldalon. <style type="text/css"> #id1 { color: red } </style> <body> <p id="id1">a</p> </body> Majd visszatrnk mg a 49-72-re.

-6-

Szvegek ksztse
Alapbelltsokat nznk meg, amelyeket majd pldkon gyakorolunk. TK. 72-74: Szvegek ksztse TK. 76-79: Szvegek Komodo Edit: File men => New => File from Template => HTML Ksztsk el a kvetkez HTML oldalt, amihez gyakoroljuk majd a CSS formzsokat. <body> <h1> Cmsor 1 </h1> <h2> Cmsor 2 </h2> <h3> Cmsor 3 </h3> <h4> Cmsor 4 </h4> <p> Szveg1 </p> <p> Szveg2 <br> j sor</p> </body> 76: A szveg szne Egyms utn prbljuk ki a kvetkez CSS formzsokat. <head> <title>Weblapom cme</title> <style type="text/css"> h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)} </style> </head> 76. Bettvolsg 76: Sztvolsg h1 {word-spacing: 50px} 76: A szveg igaztsa A sorkizrt igaztsnak tbb soros bekezdsek esetn van rtelme. majd nznk r pldt. 77: A szveg dekorcija Csak az els 3. Az <a> cmkt majd ksbb nzzk. 77: A szveg behzsa Vltoztassunk a mreten.

-7-

77: Kis-, s nagybet formzs Bvtsk a HTML rszt: <p class="nagybetu">Szveg 4</p> <p class="kisbetu">Szveg 5</p> <p class="kiskapitalis">Szveg 6</p> A CSS rszbe rjuk be: p.nagybetu {text-transform: uppercase} p.kisbetu {text-transform: lowercase} p.kiskapitalis {font-variant: small-caps;} 77: Elvlaszt karakterek rtelmezse: A HTML-ben amit a <pre>..</pre> kz runk,: - Ha tbb sorba rjuk, akkor a Bngszben is tbb sor lesz - Ha tbb szkzt tesznk, akkor a bngszben is gy lesz. Plda Prbljuk ki a kvetkez HTML kdot: <body> Els sor Msodik sor <br>Harmadik sor <pre>Negyedik sor tdik sor </pre> alma krte <pre> alma krte </pre> </body> 77: CSS-ben a white-space hasonl: .proba { => a tulajdonsgok kztt szerepel a white-space, amit kivlasztva a lehetsges rtkeket is adja.

-8-

77: CSS-ben a direction: szveg irnya Plda <head> <style type="text/css"> .rtl { direction: ltr; } .ltr { direction: rtl; } </style> </head> <body> <p class="rtl">Szveg!</p> <p class="ltr">Szveg!</p> </body> gy rja ki: Szveg! ! Szveg 77: Bettpus megadsa Bvtsk a HTML-t: <p class="sansserif">Szveg 7</p> CSS-be: h3 {font-family: times} p {font-family: courier} p.sansserif {font-family: sans-serif} 78: Betmret font-size: => bersa utn lehetsgnk van a mret s a mrtkegysg kivlasztsra. (pl. px, cm, mm, % .) em: font mret. Pl. ha a font mret 12pt, akkor 2em=24pt Vltoztassuk a TK-bl bert rtkeket. 78: Betstlus 78: Betvastagsg HTML-t trni: <p class="normal">Szveg 4</p> <p class="vastagabb">Szveg 5</p> <p class="legvastagabb">Szveg 6</p> CSS-be: p.normal {font-weight: normal} p.vastagabb {font-weight: bold} p.legvastagabb {font-weight: 900} A legvastagabb nem biztos, hogy mkdik. -9-

79: Els bet s els sor Kln-kln kiprblni a kt stlust.

- 10 -

Linkek
TK. 79-81 Pldul, HTML-be: <a href="http://www.szolf.hu" >Szolnoki Fiskola</a> 80: A target tulajdonsg <a href="http://www.szolf.hu" target="_blank">Szolnoki Fiskola</a> 80: A name tulajdonsg: Majd tallkozunk vele a pldknl. 81: Linkek formzsa Egy j linket is beszrni a HTML-be + a CSS-eket. <a href="http://www.origo.hu" >Origo</a> 81: Kimen linkek formzsa: A link mgtt lthat a kp. De a kpnek csak akkora rszlete, ami belefr a sorba. Plda <style type="text/css"> a.ext { background: url("kep.jpg") } </style> </head> <body> <a title="" class="ext" target="_blank" href="www.szolf.hu">Szolnoki Fiskola</a> </body>

- 11 -

Multimdia
TK. 81-85 81: Kpek <img src="kep.jpg"> 82: base: Meghatroz egy alap URL-t a relatv URL-ek szmra. Plda: <head> <base href="http://onlinesoft.hu/"> </head> <body> <a href="/"><img src="/media/PCT_logo_text.png" /></a> </body> 82: Az alt tulajdonsg <img src="kep.jpg" alt="1. kpem"> 82: Mret megadsa <img src="kep.jpg" width="144" height="50"> 82: Kp hasznlata linkknt <a href="http://www.szolnok.hu" ><img src="kep.jpg" width="144" height="50"></a> 83-85: Flash lejtsz begyazsa: Csak a lnyeget

- 12 -

Listk
TK: 86-89 86-88: HTML kdokat kiprblni. 88: fekete ngyzet a lista jell .. <style type = "text/css"> ul.negyzet { list-style-type:square} } </style> </head> <body> <ul class="negyzet"> <li>els</li> <li>masodik</li> <li>harmadik</li> </ul> </body> Rmai szmokkal rja a sorszmot .. <style type = "text/css"> ol.romai { list-style-type:upper-roman} } </style> </head> <body> <ol class="romai"> <li>els</li> <li>masodik</li> <li>harmadik</li> </ul> </body> kp a lista jell: .. <style type = "text/css"> ul.kep { list-style-image:url('jel.gif')} } </style> </head> <body> <ul class="kep"> <li>els</li> <li>masodik</li> <li>harmadik</li> - 13 -

</ul> </body>

Tblzatok
TK. 89-94 Pldkat kiprblni. Majd visszatrnk a 94-105-re: rlap, Fejrsz TK. 49-52: nhny kis tma: csak a lnyeget 1-2 mondatban.

- 14 -

Cmsorok s formzsuk
TK 52-58 Komodo Edit: File men => New => File from Template => HTML Prbljuk ki az 52. oldal feladatt: <body>..</body> rszt bemsolni Ksztsk el a CSS alapjt a <head> -be: <style type="text/css"> </style> 54. Httrszn Msoljuk be a CSS-be. 54. Httrkp Msoljunk egy kp fjlt a html fjl mell. (kep.jpg) Trljk a CSS-eket. CSS-be: body {background-image: url('kep.jpg'); 54. Ismtlds Ha az elz kpnl nagy mret volt s nem volt ismtlds, akkor keressenek az Interneten egy kis kpet ( pl. www.origo.hu ) s az tltsk be httrnek. Kiprblni a csak egy irny ismtldst: background-repeat: repeat-y; 55: Pozci. Az elz kis ppel folytassuk. Bvtsk az elz pldt a httrkpes pozcionlssal. CSS: body { background-image: url('kep2.jpg'); background-repeat: no-repeat; background-position: top center; }

- 15 -

55: Httrkp ragasztva: Az oldal tartalmt sokszor msoljuk egyms al, hogy grgethet legyen. CSS-be: body {background-image: url('kep2.jpg'); background-repeat: no-repeat; background-attachment: fixed; 56. Szeglyek CSS-t kiprblni. 56. Szeglyszn Az els kiprblni: pl. a h2 formzsba betenni. A tbbit csak megbeszlni 57. A szegly vastagsga Az elst kiprblni: A p formzst trni. 58. Trkzk a szeglyen bell s kvl Dobozmodell: A tartalmat veszik krbe: 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 kiprblni pl. a h1 formzshoz. Az els (2cm) a fels marg. a tbbi az ramutat jrsval megegyezen. A padding rtkeket hasonlan kell megadni! A margra lehet negatv rtket is megadni. Prbljuk ki: rjuk t a 2cm-t -1cm-re. Egy plda HTML-be: <p class="keret" >Prba</p> 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 kialaktsa
TK. 59-72 Komodo Edit => File men => New => File from Template => HTML A tervezs fzisban rdemes a dobozok kr szeglyt felvenni, hogy lssuk, hogy hol a szle. ( Br a kls marg mg ez utn kvetkezik. ) 59. Mretek HTML-be: <div id="doboz"> Ez egy bekezds. </div> CSS-be: div#doboz { width: 500px; height: 300px; padding: 50px; border: solid 1px; } VAGY: A id="doboz" s a #doboz nlkl. 59. Megjelents 60. o fels pldjt HTML-be s CSS-be berni. - a kt bekezds egy sorban fog megjelenni - A DIV-be rt szveg nem lesz megjelentve. 60. A lebegtets 60. Kp lebegtetse Egy kis mret kppel kiprblni a fels HTML-t. A kp eltt s utn is megsokszorozni a szveget 10x-10x pldnyban Majd: CSS-be: img { float: right; } 62. o. fels HTML s CSS pldt is kiprblni. A kp eltti s utni sok szveg maradjon meg. A stlusban a width rtket prbljuk ki nagyobb mretben is.

- 17 -

62: Horizontlis men A men tbb linkbl ll lista. A link alhzst kikapcsoljuk. A menpontok egyms mell kerlnek. Az egeret rmozgatva az egyik menre, annak megvltozik a szne. Prbljuk ki a HTML s CSS-eket. A plda egy egyszerbb, vltozata: <style type="text/css"> .minta { text-decoration:none; (A link alhzsa nem jelenik meg.) background-color:yellow; (Egy sznes tglalapba rja a szveget.) } a:hover { background-color:#ff3300} ( Ha az egeret rmozgatja, akkor megvltozik a link szne. ) </style> <body> <a class= "minta" href="http://www.szolf.hu">Men 1</a> <a class= "minta" href="http://www.szolnok.hu">Men 2</a> <a class= "minta" href="http://www.origo.hu">Men 3</a> </body> 63-66. Felesleges tblzatok nlkli oldalkialakts 64-65 HTML-CSS pldt kiprblni: - elszr CSS nlkl, majd CSS-el. 1. CSS: Megrajzolja a keretet az egsz kr. Megnveli a sortvolsgot 2. CSS: elkszti a fejlcet s a lblcet. 3. CSS: elkszti a kt hasbot. Msik mdszer a 2 hasbos elrendezsre: (TK2. 68) position: absolute; 68. old Az absolute pozcionls miatt content doboz elhelyezdik, mintha a left doboz nem is lenne. A left doboz pedig a megadott pozciba kerl. div.left { position: absolute; top: 60px; left: 10px; width: 160px; margin: 0; padding: 1em; }

- 18 -

66. Pozicionlsi smk 67. Relatv pozci Az gy eltolt elem eredeti helye resen marad, oda ms elem nem fog becsszni. Pldt kiprblni. Van benne pl. negatv pozcionls is. A fekete Fcm a kvetkez bekezdsben lett volna az eltols nlkl. Ahol az res hely van. Onnan lett felfel mozgatva. 68. Abszolt pozci Az abszolt mdon pozcionlt elem nem tart fenn egy terletet. Kiprblni. 69. Z-index (TK2. 107-110) HTML-be: <div id="elso">z-index:1 </div> <div id="masodik">z-index:2 </div> <div id="harmadik">z-index:3 </div> 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 fell.

- 19 -

Feladatok: Az suzo.uw.hu => Web-programoz => Kliensoldali programozs oldalon lv HTML-CSS-.-ZIP feladatok elksztse Oldalak, ahonnan lehet formtumot letlteni, msolni, 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 Egyb: Google: free css templates - De brmelyik oldalnak meg tudjuk nzni a stlust, CSS kialaktst. pl. Explorerben: Eszkzk men => Fejleszti eszkzk

- 20 -

rlapok
TK: 94-104 Az rlapelemek tnyleges lekezelsre a Szerveroldali programozsban lesz lehetsg (PHP). Ezt a TK 97. oldaln is ltjuk. 94.: Kiprblni 95. Password: a keresztnevet titkostva olvassuk be. 95: Rdigombok kiprblni checked rtk hasznlatval 95: Jellngyzetek kiprblni Mindketthz a checked rtk hasznlatval 96: Label elem kiprblni 96. rlap adatok elkldse kiprblni. A klds lekezelshez majd meg kell rni a PHP szkriptet. => Szerver oldali programozs 97. Lenyl lista. Kiprblni size="5" el kiprblni multiple nem mkdtt Explorerben. 98.fels kiprblni 98. Tbb soros szveges mezk. Kiprblni 98. Mezcsoportok Egyms utn msolni 2 fieldset -et kln bekezdsbe. 101-103: Pldt kiprblni. Csak bemsolssal megnzni.

Fejrsz
TK. 104 Pl. Egy oldal forrsban megkeresni a meta elemeket. pl. www.origo.hu

- 21 -