Készítette: Subecz Zoltán, Szolnoki Főiskola, http://suzo.uw.hu, subecz@szolf.hu

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ékBevezetés.......................................................................................................................................................2HTML alapok................................................................................................................................................4CSS alapok.....................................................................................................................................................5Szövegek készítése........................................................................................................................................7Linkek..........................................................................................................................................................11Multimédia...................................................................................................................................................12Listák...........................................................................................................................................................13Táblázatok....................................................................................................................................................14Címsorok és formázásuk..............................................................................................................................15Az oldalszerkezet kialakítása.......................................................................................................................17Űrlapok........................................................................................................................................................21Fejré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, 2005Letö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 alattKiadó: 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.cchttp://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-edithttp://www.activestate.com/komodo-edit/downloads

TK 1-107A TK kimaradó részeit Házi feladatként kell átnézni!

- 3 -

HTML alapok

TK. 31-3432: Feladat kipróbálása

Komodo Edit => File menü => New => New file jobb alsó sarokban. nyelv beállítása: HTMLMintafeladat beírása

KiegészítésekTK/35: MegjegyzésekTK/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ésHTML5: 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 CSSsegí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:

<p> Ez egy bekezdés</p>

<head> -be a 45. oldalról: <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style>

45: Soron belüli stílusKiegészítve az előző oldal:

<p style="color: blue; margin-left: 50px">Ez egy bekezdés</p>

45-46: A CSS nyelvtanaOldalt 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ásAz előzőt kiegészítjük:HTML-be:

<p class="jobb"> Ez egy jobbra igazított bekezdés. </p> <p class="bal"> Ez egy középre igazított bekezdés. </p>

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éldaKészítsünk id1 néven azonosítót. ( tulajdonsága: szín:piros)Alkalmazzuk az oldalon.

<style type="text/css">#id1 {

color: red}</style>

<body><p id="id1">a</p>

</body>

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.

<body> <h1> Címsor 1 </h1> <h2> Címsor 2 </h2> <h3> Címsor 3 </h3> <h4> Címsor 4 </h4> <p> Szöveg1 </p> <p> Szöveg2 <br> Új sor</p></body>

76: A szöveg színeEgymás után próbáljuk ki a következő CSS formázásokat.

<head> <title>Weblapom címe</title> <style type="text/css"> h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)} </style></head>

76. Betűtávolság

76: Szótávolságh1 {word-spacing: 50px}

76: A szöveg igazításaA 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ójaCsak az első 3. Az <a…> címkét majd később nézzük.

77: A szöveg behúzásaVáltoztassunk a méreten.

- 7 -

77: Kis-, és nagybetű formázás

Bővítsük a HTML részt:

<p class="nagybetu">Szöveg 4</p> <p class="kisbetu">Szöveg 5</p> <p class="kiskapitalis">Szöveg 6</p>

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 <pre>…..</pre> 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éldaPróbáljuk ki a következő HTML kódot:

<body>Első sorMásodik sor<br>Harmadik sor<pre>Negyedik sorÖtödik sor</pre>alma körte<pre>alma körte</pre></body>

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ányaPélda

<head>……<style type="text/css">.rtl { direction: ltr; }.ltr { direction: rtl; }</style></head><body><p class="rtl">Szöveg!</p><p class="ltr">Szöveg!</p></body>

Így írja ki:

Szöveg!

!Szöveg

77: Betűtípus megadása

Bővítsük a HTML-t: <p class="sansserif">Szöveg 7</p>

CSS-be:h3 {font-family: times}p {font-family: courier}p.sansserif {font-family: sans-serif}

78: Betűméretfont-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: <p class="normal">Szöveg 4</p> <p class="vastagabb">Szöveg 5</p> <p class="legvastagabb">Szöveg 6</p>

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: <a href="http://www.szolf.hu" >Szolnoki Főiskola</a>

80: A target tulajdonság<a href="http://www.szolf.hu" target="_blank">Szolnoki Főiskola</a>

80: A name tulajdonság:Majd találkozunk vele a példáknál.

81: Linkek formázásaEgy új linket is beszúrni a HTML-be + a CSS-eket. <a href="http://www.origo.hu" >Origo</a>

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<style type="text/css">a.ext {background: url("kep.jpg")}</style></head><body><a title="" class="ext" target="_blank" href="www.szolf.hu">Szolnoki Főiskola</a></body>

- 11 -

Multimédia

TK. 81-85

81: Képek<img src="kep.jpg">

82: base: Meghatároz egy alap URL-t a relatív URL-ek számára.

Példa:

<head> <base href="http://onlinesoft.hu/"> </head> <body> <a href="/"><img src="/media/PCT_logo_text.png" /></a> </body>

82: Az alt tulajdonság<img src="kep.jpg" alt="1. képem">

82: Méret megadása<img src="kep.jpg" width="144" height="50">

82: Kép használata linkként<a href="http://www.szolnok.hu" ><img src="kep.jpg" width="144" height="50"></a>

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ő…………………………………..<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>

Római számokkal írja a sorszámot……………………………..

<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>

kép a lista jelölő:…………………………………..<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>

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: <body>…..</body> részt bemásolni

Készítsük el a CSS alapját a <head> -be: <style type="text/css"> </style>

54. HáttérszínMásoljuk be a CSS-be.

54. HáttérképMá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ésHa 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élyekCSS-t kipróbálni.

56. SzegélyszínAz első kipróbálni: pl. a h2 formázásába betenni.A többit csak megbeszélni

57. A szegély vastagságaAz 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ülDobozmodell:

A tartalmat veszik körbe: padding, border, margin

http://www.standardsmode.hu/html-css/dobozmodell/http://www.webmake.hu/webkeszites/css/dobozmodellhttp://www.arcania.hu/Informatika/HTML/box-model.htmlhttp://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éldaHTML-be:

<p class="keret" >Próba</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 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éretekHTML-be:

<div id="doboz">Ez egy bekezdés.

</div>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és60. 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éseEgy 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ánybanMajd: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:<style type="text/css">.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. )</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 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ágot2. 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. oldAz 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:

<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 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 linkjehttp://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álni95. Password: a keresztnevet titkosítva olvassuk be.95: Rádiógombok kipróbálni

checked érték használatával95: Jelölőnégyzetek kipróbálni

Mindkettőhöz a checked érték használatával96: Label elem kipróbálni96. Ű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ás97. Lenyíló lista. Kipróbálni

size="5" –el kipróbálnimultiple nem működött Explorerben.98.felső kipróbálni

98. Több soros szöveges mezők. Kipróbálni98. 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. 104Pl. Egy oldal forrásában megkeresni a meta elemeket. pl. www.origo.hu

- 21 -