Web technológiák 1. Gy: HTML, CSS 117/1 v: 2016.09.19
A Web világa 1. A HTML, a CSS és a JavaScript a legnépszerűbb programozási nyelvek a világon. A Web ezekre épül. A böngészők értelmezik és megjelenítik a HTML dokumentumokat, melyeket a CSS tesz széppé, elegánssá, és a JavaScript-től lesznek mozgalmasak, dinamikusak, és interaktívak. 117/2
A Web világa 2. Interfész a JS és a HTML közti kommunikációhoz Forrás: Pixels4Kids Adatok/Elrendezés 117/3 Formátum/Kinézet Dinamizmus/ Interaktivitás
A Web világa 3. Népszerű böngészők 117/4 Forrás: Pixels4Kids Eszközkészlet a JS könnyebb használatához
Témakörök HTML CSS 117/5
HTML alapok 1. A HTML dokumentum egy olyan szövegfájl, amely a szövegen kívül tartalmaz ún. "HTML-tag"-eket formázóutasításokat, valamint más megjelenítendő objektumokra történő hivatkozásokat is. Megjelenítése böngésző programmal lehetséges Kötött szerkezetű Head Fejléc: információk a lapról Body Dokumentumtörzs: a megjelenő tartalom A HTML utasítások a szövegben < és > jelek között szerepelnek Formázási lehetőségek: mint egy szövegszerkesztőben Betűtípus, méret, szín, háttérszín, bekezdés, táblázat 117/6
HTML alapok 2. <html> <head> <title>első weboldalam</title> </head> <body> <p>helló Világ!</p> </body> </html> 1. Jegyzettömb, beírás 2. Mentés: pl. prb.htm 3. 2x Megnézés böngészőben 117/7
Az igazi kód 117/8
</html> </body> HTML alapok 3. 117/9 <html> <head> <title>almalap</title> </head> <body> <p> <!-- bekezdés --> <b>az alma:</b><br> </p> <ul> <!-- felsorolás --> <li>finom,</li> <li>mókás,</li> <li>szeletelt.</li> </ul>
<html> <body> HTML alapok 4. <p> <img src="alma.jpg" width="160" height="170"> <!-- kép --> <br> <!-- sortörés --> AlmaInfo: <a href="http://www.almalap.hu/">link az AlmaLapra</a> </p> </body> </html> 117/10
Milyen szerkesztőt használjunk Jegyzettömb Notepad++ 117/11
Fejlécelemek (Head) <TITLE> Cím </TITLE> <BASEFONT SIZE=12> <META NAME="mező" CONTENT="érték"> <META NAME="Author" CONTENT="BitMan"> <META NAME="robot" CONTENT="deny"> Index/noindex, follow/nofollow, deny, all <META NAME="generator" CONTENT="jegyzettömb"> <META NAME="Keywords" CONTENT="oktatás, humor, bringa, zene"> <META NAME="Description" CONTENT="A legklasszabb lap a világon!"> 117/12
Fejlécelemek (Head) Példa <html lang="hu"> <head> <link rel="shortcut icon" href="favicon.ico"/> <meta charset="utf-8"> <meta name="description" content="minden az almáról"> <meta name="keywords" content="alma, almalap, alma jellemzők"> <meta name="generator" content="jegyzettömb"> <meta name="robots" content="index,follow"> <meta name="distribution" content="local"> <meta name="author" content="bitman"> <title>almalap</title> </head> 117/13
Dokumentumtörzs elemek (Body) <BODY BACKGROUND="fájlnév.kit" BGCOLOR="színkód" TEXT="színkód" LINK="színkód" VLINK="színkód" > Háttérkép Háttérszín Szövegszín Linkszín Bejárt link színe Pl: <body bgcolor ="#ffffcc", text ="#003300"> 117/14
Színkódok A színkódok megadhatók: Névvel: "darkblue", Hexa kóddal: "#00008b", RGB kóddal: "rgb(0,0,139)", 117/15
117/16 FFF FFF CCC CCC 999 999 666 666 333 333 000 000 FFC C00 FF9 900 FF6 600 FF3 300 99C C00 CC9 900 FFC C33 FFC C66 FF9 966 FF6 633 CC3 300 CC0 033 CCF F00 CCF F33 333 300 666 600 999 900 CCC C00 FFF F00 CC9 933 CC6 633 330 000 660 000 990 000 CC0 000 FF0 000 FF3 366 FF0 033 99F F00 CCF F66 99C C33 666 633 999 933 CCC C33 FFF F33 996 600 993 300 663 333 993 333 CC3 333 FF3 333 CC3 366 FF6 699 FF0 066 66F F00 99F F66 66C C33 669 900 999 966 CCC C66 FFF F66 996 633 663 300 996 666 CC6 666 FF6 666 990 033 CC3 399 FF6 6CC FF0 099 33F F00 66F F33 339 900 66C C00 99F F33 CCC C99 FFF F99 CC9 966 CC6 600 CC9 999 FF9 999 FF3 399 CC0 066 990 066 FF3 3CC FF0 0CC 00C C00 33C C00 336 600 669 933 99C C66 CCF F99 FFF FCC FFC C99 FF9 933 FFC CCC FF9 9CC CC6 699 993 366 660 033 CC0 099 330 033 33C C33 66C C66 00F F00 33F F33 66F F66 99F F99 CCF FCC CC9 9CC 996 699 993 399 990 099 663 366 660 066 006 600 336 633 009 900 339 933 669 966 99C C99 FFC CFF FF9 9FF FF6 6FF FF3 3FF FF0 0FF CC6 6CC CC3 3CC 003 300 00C C33 006 633 339 966 66C C99 99F FCC CCF FFF 339 9FF 99C CFF CCC CFF CC9 9FF 996 6CC 663 399 330 066 990 0CC CC0 0CC 00F F33 33F F66 009 933 00C C66 33F F99 99F FFF 99C CCC 006 6CC 669 9CC 999 9FF 999 9CC 993 3FF 660 0CC 660 099 CC3 3FF CC0 0FF 00F F66 66F F99 33C C66 009 966 66F FFF 66C CCC 669 999 003 366 336 699 666 6FF 666 6CC 666 699 330 099 993 3CC CC6 6FF 990 0FF 00F F99 66F FCC 33C C99 33F FFF 33C CCC 339 999 336 666 006 699 003 399 333 3FF 333 3CC 333 399 333 366 663 3CC 996 6FF 660 0FF 00F FCC 33F FCC 00F FFF 00C CCC 009 999 006 666 003 333 339 9CC 336 6CC 000 0FF 000 0CC 000 099 000 066 000 033 663 3FF 330 0FF 00C C99 009 9CC 33C CFF 66C CFF 669 9FF 336 6FF 003 3CC 330 0CC 00C CFF 009 9FF 006 6FF 003 3FF Biztonságos színek és Hexa kódjuk.
Kedvenc színválasztó oldalam 117/17 BBITITMAN
Címszintek, igazítás Címek, alcímek 6 szint mélységben (h1..h6) <h1 align="irány"> Szöveg </h1> <h2 align="irány"> Szöveg </h2> 117/18
Címszintek, igazítás Forráskód <html> <head> <title> HTML próbalap </title> </head> <body> <h1 align="left"> Szöveg </h1> <h2 align="center"> Szöveg </h2> <h3 align="right"> Szöveg </h3> </body> </html> www.minta.hu 117/19
A dokumentum tagolása Bekezdések, blokkok <p align= "irány"> <! bekezdés--> szövegek, képek <br> <!-- sortörés --> <! non-breaking space, nem eltávolítható szóköz --> </p> <div align= "irány"> <! névtelen blokk --> szövegek, képek </div> <div class= "név" align= "irány"><! nevesített blokk--> szövegek, képek </div> 117/20
Bekezdések formázó utasításai <pre> - Megjelenés: ahogyan beírtuk (szóközök, sortörések megmaradnak), fix szélességű betűkkel <em> - Kiemelt rész. Általában dőlt. <strong> - Fontos rész. Általában félkövér. <code> - Számítógép kód forma. <samp> - Program kimenet forma. <kbd> - Billentyűzet bevitel forma. <var> - Változók megjelenítésére. Ezek a formátumok CSS segítségével felüldefiniálhatók, így lehetőséget adnak a kívánt külalak eléréséhez. 117/21
Bekezdések formázó utasításai Forráskód <html> <head> <title>próba</title> </head> <body> <p> Szöveg <pre> pre megkülönböztetett</pre> résszel.<br> Szöveg <em> em megkülönböztetett</em> résszel.<br> Szöveg <strong> strong megkülönböztetett</strong> résszel.<br> Szöveg <code>code megkülönböztetett</code> résszel.<br> Szöveg <samp>samp megkülönböztetett</samp> résszel.<br> Szöveg <kbd>kbd megkülönböztetett</kbd> résszel.<br> Szöveg <var>var megkülönböztetett</var> résszel.<br> </body> </html> www.bitman.hu 117/22
Bekezdések Normál és <pre> megjelenés Forráskód <html> <head> <title>próba</title> </head> <body> <p>a böngésző mindig csak egy szóközt hagy a szövegben, és kiveszi a sortöréseket. <hr /> <!--vízszintes vonal--> <pre> Ha a pre tagot alkalmazzuk, a szöveg úgy fog megjelenni, ahogyan beírtuk. </pre> </body> </html> www.bitman.hu 117/23
Kódok megjelenítése Forráskód <html> <head> <title>próba</title> </head> <body> <pre><code> public static void main(string[] args) { System.out.println("Hello, world!"); } </code></pre> </body> </html> www.bitman.hu 117/24
Speciális karakterek Azok a karakterek, melyekkel a html utasításokat adjuk meg, nem jelennek meg normál karakterként. Ezek helyett speciális kódokat kell használni. < helyett < kódot kell írni, vagy < kódot > helyett > kódot kell írni, vagy > kódot & helyett & kódot kell írni, vagy & kódot helyett " kódot kell írni, vagy " kódot További speciális karakterek: Nem törhető szóköz: &nbps; vagy Opcionális elválasztójel: vagy 117/25
Speciális karakterek (2) Karakter Kódnév Számkód «««½ ½ ½ 117/26 Karakter Kódnév Számkód»»»
Karakterformátumok <b>szöveg</b><br> félkövér <i>szöveg</i><br> dőlt <u>szöveg</u><br> aláhúzott <s>szöveg</s><br> áthúzott <tt>szöveg</tt><br> fixpontos <big>szöveg</big><br> nagyméretű <small>szöveg</smallbig><br> kisméretű H<sub>2</sub>SO<sub>4</sub><br> alsó index 16<sup>30</sup><br> felső index www <font face="név" color="szín" size=szám> </font> 117/27
Karakterformátumok Forráskód <html> <head><title>html próbalap </title></head> <body> <p> <font size="5" face="arial" color="red"> Arial, 5-ös méretű, piros szöveg. </font> </p> <p> <font size="3" face="times" color="blue"> Times, 3-as méretű, kék szöveg. </font> </p> </body> </html> www.bitman.hu 117/28
Többféle stílus egy bekezdésben Ha egy szövegrészt a többitől eltérő stílusban akarunk megjeleníteni, használjuk a <span>... </span> utasítást. <p>a bekezdésben <span class="kiemelt"> ez a szövegrész kiemelt </span> betűkkel lesz kiírva a képernyőre. www.bitman.hu A bekezdésben ez a szövegrész kiemelt betűkkel lesz kiírva a képernyőre. A kiemelt osztályt természetesen definiálni kell! 117/29
Felsorolás számozás Forráskód <ul> <li>hapci</li> <li>morgó</li> <li>szundi</li> </ul> www.bitman.hu <ol> <li>elment vadászni,</li> <li>meglőtte,</li> <li>hazavitte,</li> <li>mind megette.</li> </ol> 117/30
Többszintű felsorolás 117/31 Forráskód <ul> <li>zöldségek: <ul> <li>paprika</li> <li>paradicsom</li> </ul> </li> <li>gyümölcsök: <ul> <li>alma <ul> <li>piros</li> <li>zöld</li> <li>sárga</li> </ul> </li> <li>banán</li> </ul> </li> </ul> www.bitman.hu
Definíciós lista Forráskód <html> <head> <title>próba</title> </head> <body> <dl> <dt>adat</dt> <dd>információ, közlés, hír, értesülés, azaz elemi ismeret.</dd> <dt>bit</dt> <dd>az adatmennyiség elemi egysége.</dd> <dt>bájt</dt> <dd>általánosan használt tárolókapacitás-mértékegység a számítástechnikában.</dd> </dl> </body> </html> www.bitman.hu 117/32
Képek <IMG SRC="elérési_út/fájlnév.kit"> <IMG ALIGN="irány" SRC="elérési_út/fájlnév.kit" HSPACE="vszám" VSPACE="fszám" WIDTH="szméret" HEIGHT="mméret" UNITS="egység" USEMAP="#jelző" ISMAP ALT="szöveg">. (H)(V)SPACE térköz (margó) Width, height kép mérete Units méretegység (pixel) Usemap, Ismap terület-érzékeny link Alt: Szöveges leírás 117/33
Usemap <MAP NAME="jelző"> <AREA SHAPE="alak" COORDS="koordináták" HREF="hivatkozás">... </MAP> <AREA SHAPE="circle" COORDS="kpx,kpy,sugár" <AREA SHAPE="rect" COORDS="bfx,bfy,jax,jay" <AREA SHAPE="polygon" COORDS="c1x,c1y,c2,c2y " 117/34
Usemap (2) <img src="logo1.jpg" usemap="#m1" width=960 height=240> <map name="m1"> <area shape="circle" coords="233,52,20" href=" "> <area shape="rect" coords="800,6,900,50" href=" "> </map> 117/35
Usemap (3) 117/36
<area shape="circle" coords="200,50,30" href="kikoto.htm"> <area shape="rect" coords="50,380,130,310" href="kincs.htm"> <area shape="polygon" coords="420,140, 330,300, 475,290" href="hajo.htm"> 117/37
Táblázatok Táblázat kezdete Sor 117/38 <TABLE> <TBODY> <TR> <TD> ID </TD> <TD>NÉV</TD> <TD>SZÜLÉV</TD> <TD>CÍM</TD> </TR> <TR><TD>1</TD> <TD>Béla</TD> <TD>1990</TD> <TD>Budapest</TD></TR> <TR><TD>2</TD> <TD>Géza</TD> <TD>1992</TD> <TD>Győr</TD></TR> <TR><TD>3</TD> <TD>Jenő</TD> <TD>1993</TD> <TD>Miskolc</TD></TR> </TBODY> </TABLE> Oszlop www.bitman.hu
Táblázatok (2) <TABLE cellspacing=1 cellpadding=6 width=282 border=1 BgColor="FFFF99"> <TBODY> <TR BgColor="FFFF33"> <TD width="15%"><p>id</p></td> <TD width="24%"><p>nev</p></td> <TD width="29%"><p>szulev</p></td> <TD width="32%"><p>cim</p></td></tr> <TR> Háttérszín <TD><P align=right>1</p></td> <TD><P>Béla</P></TD> <TD><P>1975</P></TD> Cellák közti távolság Cella szélesség <TD><P>Budapest</P></TD></TR> Teljes szélesség Cellamagasság www.bitman.hu Külső szegély, és mérete 117/39
1 1. Weblapon belülre mutató link 2 2. Webhelyen belülre mutató link 3 3. Webhelyen kívülre mutató link Linkek a webhelyen 2 2 index.html 1 www.origo.hu 117/40 3
1 Weblapon belüli linkek Forráskód <html> <head><title> HTML próbalap </title></head> <body> Szöveg<br> <a name="hsz">hasznos szöveg</a> <br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> <a href="#hsz">ugrás a Hasznos szöveghez</a> <br> Szöveg<br> </body> </html> 117/41 www.bitman.hu
Webhelyen belüli és külső linkek 2 <a href="mam.htm">mai menü</a> <a href="fotok/foto.htm">fotók</a> 3 <a href="http://www.w3schools.com/">link a W3Schools weblapra</a> <a href="http://www.w3schools.com/" target="_blank" >Link a W3Schools weblapra</a> 117/42
Frame-ek (keretek) Ne használd! Terület felbontása kisebb egységekre <HTML> <HEAD><TITLE>Brekk</TITLE></HEAD> <BODY> <frameset cols="60%,40%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> </frameset> </BODY> </HTML> 117/43 Forráskód www.bitman.hu
Frame-ek (keretek) Forráskód <HTML> <HEAD><TITLE>Kakukk</TITLE></HEAD> <BODY> <frameset rows="60%,40%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> </frameset> </BODY> </HTML> www.bitman.hu 117/44
IFrame Ezt használhatod! Weblap a weblapban Forráskód <HTML> <HEAD><TITLE>Retek</TITLE></HEAD> <BODY> <iframe src="frame_a.htm" width="150" height="150"> </iframe> </BODY> </HTML> www.bitman.hu 117/45
HTML űrlap Forráskód <html> <head> <title> Bejelentkezés </title> </head> <body> <form> <p>kérem a nevemet: <br> <input type=text name="nev" size="17"> </form> </body> </html> www.bitman.hu 117/46
HTML űrlap Beviteli elemek <input type= xxx > www.bitman.hu text password checkbox radio select submit reset 117/47
HTML űrlap Beviteli elemek (2) <form> <p>kérem a nevemet: <br> <input type=text name="nev" size=17> </p> <p>kérem a jelszavamat: <br> <input type=password name="pswd" size=17> </p> <p>naplózás: <input type=checkbox name="naplo"> Titkosítás: <input type=checkbox name="titkos" checked="checked"> </p> 117/48
HTML űrlap Beviteli elemek <p>betűméret: S<input type=radio name="rb" value="s"> M<input type=radio name="rb" value="m"> L<input type=radio name="rb" value="l" checked="checked"> XL<input type=radio name="rb" value="xl"></p> Módszer: <SELECT NAME="menu"> <OPTION> Lassan, ráérek. <OPTION> Tempósan, sietek! <OPTION> Még nem vagy kész? </SELECT><br><br><br> <p><input type=submit name="kuldes" value="belépek"> <input type="reset" value="töröl"></p> </form> 117/49
Témakörök HTML CSS 117/50
CSS Cascading Style Sheets CSS egy stílusleíró nyelv, mely a HTML vagy XHTML típusú strukturált dokumentumok megjelenését írja le. Segítségével a dizájn elválasztható a tartalomtól Egymásba ágyazható stílusok (öröklődés) A HTML tagok szülő-gyermek viszonyának megfelelően is működik az öröklődés Szövegek formázására, rétegek kezelésére HTML kódelemek módosítására 117/51 Forrás: Weblabor
A tartalom és a megjelenés szétválása 1990 1997-től HTML Struktúra Adat Dizájn HTML Struktúra Adat CSS Dizájn 117/52
HTML példa Forráskód <html> <head> <title>html példa</title> </head> <body> <h1><font size="4" color="#a00000">bevezetés</font></h1> <p><font size="2" color="#00a000">a vers...</font></p> <h1><font size="4" color="#a00000">tárgyalás</font></h1> <p><font size="2" color="#00a000">a költő...</font></p> <h1><font size="4" color="#a00000">összefoglalás</font></h1> <p><font size="2" color="#00a000">végezetül...</font></p> </body> </html> 117/53
CSS példa 1. Inline (soron belüli) CSS Forráskód <html> <head> <title>css példa</title> </head> <body> <h1 style="font-size:20px; color:#a00000;">bevezetés</h1> <p style="font-size:12px; color:#00a000">a vers...</p> <h1 style="font-size:20px; color:#a00000;">tárgyalás</h1> <p style="font-size:12px; color:#00a000">a költő...</p> <h1 style="font-size:20px; color:#a00000;">összefoglalás</h1> <p style="font-size:12px; color:#00a000">végezetül...</p></body> </html> 117/54
CSS példa 2. Belső stíluslap 117/55 Forráskód <html> <head> <title>css példa</title> <style type="text/css"> h1 { font-size: 20px; color: #a00000; } p { font-size: 12px; color: #00a000; } </style> </head> <body> <h1>bevezetés</h1> <p>a vers...</p> <h1>tárgyalás</h1> <p>a költő...</p> <h1>összefoglalás</h1> <p>végezetül</p> </body> </html>
CSS példa 3. Külső stíluslap Forráskód <html> <head> <title>css példa</title> <link rel="stylesheet" type="text/css" href="kulso.css"> </head> <body> <h1>bevezetés</h1> <p>a vers...</p> <h1>tárgyalás</h1> <p>a költő...</p> <h1>összefoglalás</h1> <p>végezetül</p> </body> </html> 117/56 kulso.css h1 { font-size: 20px; color: #a00000; } p { font-size: 12px; color: #00a000; }
A CSS és a HTML viszonya Beágyazott (belső) stíluslap 117/57 HTML fejlécben, a style elemben kell megadni a kódot Külső stíluslap Külön fájlban (több weblaphoz egy stíluslap) HTML fejlécben, link hivatkozással: <head> <link rel="stylesheet" href="kulso.css" type="text/css"> </head> Elemhez rendelve Inline CSS <h1 style="font-size: 20px; color: #a00000;">bevezetés</h1> Importálva <style type="text/css"> @import url(http://www.honlapunk.hu/stilusok/masik.css); </style>
A Web világa 4. A HTML dokumentum tartalmazza a weblapon megjelenő információkat. A HTML tag-ekkel ajánlott a megjelenő adatok szerkezetét, tagolását, az egyes dokumentumterületek azonosítását elvégezni. Ha megfelelően azonosíthatók a dokumentum egyes területei (id, class), a formázás, a kinézet kialakítása nagyon egyszerű CSS segítségével. A CSS sokkal több formázási lehetőséget tartalmaz, mint a HTML, így elegánsabb, stílusosabb weblapok hozhatók létre. 117/58
Szakasz osztályú blokk Fejezet osztályú blokk Oldal osztályú blokk A dokumentum tagolása HTML-ben 117/59 <div class= fejezet > <div class= oldal > <h1>ez itt egy fejezet címe</h1> <h2>ez itt a fejezet leírása</h2> </div> <div class= szakasz > <h1>ez egy szakasz</h1> <p>ez egy bekezdés a szakaszban.</p> <p>ez a második bekezdés.</p> </div> </div> fejezet oldal <h1> <h2> szakasz <h1> <p> <p>
117/60
A tagolásnak megfelelő formázás CSS-ben.fejezet { color: #422c1b; }.oldal { float: left; width: 48%; background-color: #dbc2a9; text-align: center; }.szakasz { margin-left: 50%; background-color: #f2eae4; } fejezet oldal <h1> <h2> szakasz <h1> <p> <p> 117/61
A tagolásnak megfelelő formázás CSS-ben konyv.css 117/62.fejezet { color: #422c1b; }.oldal { float: left; width: 48%; background-color: #dbc2a9; text-align: center; }.szakasz { margin-left: 50%; background-color: #f2eae4; } konyv.htm <div class= fejezet > <div class= oldal > <h1>ez itt egy fejezet címe</h1> <h2>ez itt a fejezet leírása</h2> </div> <div class= szakasz > <h1>ez egy szakasz</h1> <p>ez egy bekezdés a... ban.</p> <p>ez a második bekezdés.</p> </div> </div>
117/63
Öröklődés (példa) Forráskód <html> <head> <link rel="stylesheet" type="text/css" href="ks.css"> <style> p {text-align: center} </style> </head> <body bgcolor="lightyellow"> Sima szöveg<br> <p>helló Világ!</p> </body> </html> 3 2 1 + 2 + 3 1 ks.css p {font-size: 14pt; color: indigo} www.bitman.hu 117/64
117/65
Stílusok formátuma kiválasztó { tulajdonság } kiválasztó: Azt határozza meg, mely HTML elemekre vonatkozzon a definíció, tulajdonság: a megjelenés paraméterei. Szinte tetszőleges sorrendiség: kiválasztó { tulajdonság } kiválasztó { tulajdonság } kiválasztó, kiválasztó { tulajdonság; tulajdonság; } 117/66
Kiválasztók Elem css h1, h2, h3 {color: red} Osztály css.fontos {color: green} html <h1>ez itt egy fejezet címe</h1> <h2>ez itt a fejezet leírása</h2> html <p class="fontos">belépési feltételek</p> Azonosító css #st1 {color: yellow} html <p id="st1">belépési feltételek</p> 117/67
Kiválasztók (2) Helyzet-érzékeny mód css Pl. táblázatban, a félkövér betűk legyenek kékek table b {color: blue} html <table><tr><td><b>név</b></td> Tulajdonság alapján Pl. Beviteli mezőben a jelszó legyen kék css input[type="password"] {color: blue} html <form> <p>jelszó:<br> <input type=password name="pswd" size="17"></p> 117/68
117/69
Bekezdések megjelenése Betűkészletek 117/70 body { font-family: Arial, Helvetica, sans-serif; } Általános: serif, sans-serif, cursive, fantasy, monospace Dőlt betűforma body { font-style: italic; } Választék: normal, italic, oblique Félkövér betűk body { font-weight: bold; } Választék: lighter, normal, bold Betűméret body { font-size: 14px; } { font-size: 1.5em; } xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger body { font: italic bold 14px Arial, Helvetica, sans-serif; }
Bekezdések megjelenése (2) Szín h1 { color: black; } vagy { color: #FFFFFF; } Betűk közötti távolság h1 { letter-spacing: 10px; } (lehet negatív is) Igazítás h1 { text-align: center; } Választék: left, center, right, justify Link dekorációja a { text-decoration: none; } Választék: none, underline, overline, line-through, blink Szöveg első sorának behúzása p { text-indent: 40px; } 117/71
Bekezdések megjelenése (3) Betű transzformáció h1 { text-transform: uppercase; } Választék: none, capitalize, uppercase, lowercase Árnyékolás h1 { text-shadow: 5px 5px 3px #000000; } távolság lefelé, távolság jobbra, elmosódottság sugara, szín Szavak közti távolság p { word-spacing: 10px; } (lehet negatív is) Sormagasság p { line-height: 20px; } 117/72
Doboz modell 1. 117/73
Doboz modell 2. Content Tartalom: lehet kép, szöveg, vagy blokk. Megadható a szélessége és a magassága. Margin Margó. Láthatatlan terület, segítségével elválaszthatók az egyes dobozok. Padding A tartalom és a szegély közötti láthatatlan terület. Border Szegély, mely kijelöli a doboz területét. Megadható a színe, szélessége. 117/74
Doboz modell soron belül Jelenség: a piros keretű doboz középen (az elválasztásnál) kettétörik, és a keret mindkét sorban hat, viszont a törésnél, azaz a sorok megfelelő szélénél nem. Ha több sorba kerül az elem, akkor több helyen is kettétörik a doboz! 117/75
Háttér Háttérszín 117/76 body { background-color: white; } Háttérkép body { background-image: url(hattér.gif); background-position: top left; background-attachment: scroll; background-repeat: repeat; } background-position: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right background-attachement: fixed, scroll background-repeat: repeat, repeat-x, repeat-y, no-repeat body { background: white url(hattér.gif) no-repeat fixed center center; }
117/77 html <html> <head> <title>weblappróba</title> </head> <body background="auto.jpg"> <p>szöveg az oldalon. </p> </body> </html>
css body { background: url(auto.jpg) no-repeat center center fixed; } 117/78
css body { background: url(auto.jpg) repeat-x bottom left; } 117/79
css body { background: url(auto.jpg) repeat-x bottom center; } 117/80
Keret IE Körben egyforma p { border: 2px solid blue; } szélesség, stílus, szín Oldalanként más-más p { border-left: 1px solid red; border-top: 3px double blue; border-right: 2px dotted green; border-bottom: 2px dashed black; } Stílus választék: none, hidden, dotted, dashed, solid, double, groove, ridge, inset outset www.bitman.hu 117/81
Keret Firefox Körben egyforma P { border-style:solid; border-color:#ffcc00; border-width: 5px;} Fontos a sorrend is! www.bitman.hu 117/82
Keret Firefox Oldalanként más-más p { border-top-style:dotted; border-top-color:#ffcc00; border-top-width: 2px; border-right-style:solid; border-right-color:#cc00ff; border-right-width: 5px; border-bottom-style:dashed; border-bottom-color:#009900; border-bottomwidth: 4px; border-left-style:double; border-left-color:#ffcccc; border-left-width:10px; } www.bitman.hu 117/83
Körlapok CSS-el kor.htm <html> <head> <link rel="stylesheet" type="text/css" href="kor.css"> </head> <body> <div class="circle"/> <div class="circle middle"/> <div class="circle right"/> </body> </html> 117/84 kor.css.circle{ position:absolute; width:100px; height:100px; border-radius:50px; background:green; left:100px; }.circle.middle{ background:red; left:200px; }.circle.right{ background:blue; left:200px; }
Körvonalak Kereten belül, az elem előtt (felett) Minden vonal mindig egyforma p { outline-width: 2px; outline-style: solid; outline-color: #000000; } szélesség, stílus, szín p { outline: 2px solid #000000; } 117/85
Margók Egyforma 117/86 body { margin: 0px; } Különböző p { margin: 0px 1px 2px 3px; } Felül, jobbra, alul, bal oldalon Csak kétféle body { margin: 10px 0px; } Függőleges, vízszintes Profi p { margin-left: 3px; margin-top: 0px; margin-right: 1px; margin-bottom: 2px; }
Kitöltés Egyforma body { padding: 5px; } Különböző p { padding: 0px 1px 2px 3px; } Felül, jobbra, alul, bal oldalon Csak kétféle body { padding: 10px 0px; } Függőleges, vízszintes Profi p { padding-left: 3px; padding-top: 0px; padding-right: 1px; 117/87 padding-bottom: 2px; }
Listaelemek (felsorolás, számozás) ul, ol (dd) ul { list-style-type: disc } ul { list-style-position: inside } ul { list-style-image: url(pont.gif) } ul { list-style: square inside url(pont.gif) } Stílus választék: none, disc, circle, square, decimal, decimalleading-zero, lower-roman, upper-roman, lower-alpha, upperalpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha Pozíció: inside, outside 117/88
Listaelemek (példa) Forráskód <html><head><title>css példa</title> <style type="text/css"> ul { list-style-type: circle; list-style-position: inside; } ol { list-style-type: upper-roman; list-style-position: outside; } </style> </head> <body> <ul> <li>retek</li><li>paprika</li> <li>hagyma</li><li>karfiol</li> </ul> <ol> <li>retek</li><li>paprika</li> <li>hagyma</li><li>karfiol</li> </ol> </body> 117/89 </html> www.bitman.hu
Pozícionálás Elemek helyzetének megadása h1 { position: static; } Választék: static ahol tartunk, relative ahol tartunk eltolással, absolute a dokumentumban rögzítve, fixed a képernyőhöz rögzítve #fejlec { position: relative; top: -15px; left: 10px; } #lablec { position: absolute; bottom: 10px; right: 10px; } #cimke { position: fixed; bottom: 10px; right: 10px; } 117/90
left right Elhelyezkedés méret A pozíció és a méret összefügg top top, bottom, height left, right, width height bottom width Ha kettőt megadunk, a harmadik kiadódik! 117/91 #szoveg { position: absolute; top: 10px; left: 10px; bottom: 10px; right: 10px; background: #eeeeee; } #szoveg { position: absolute; top: 10px; left: 10px; height: 380px; width: 780px; background: #eeeeee; }
Méretkorlátok Helyfoglaláshoz, vagy kilógás megakadályozására #content { min-height: 500px; } Választék: min-height, max-height, min-width, maxwidth Túlcsordulás.box { width: 200px; height: 200px; overflow: auto; } Választék: visible a túllógás is látszódjon, hidden a kilógás elrejtése, scroll görgetősáv használata, auto görgetősáv, de csak ha kell 117/92
Pozícionálás példák 1. css #div-1 { position: static; } www.bitman.hu Alapértelmezetten minden elem static pozíciójú, ami azt jelenti, hogy a beírt HTML kód sorrendjének megfelelően jelennek meg az elemek. 117/93
Pozícionálás példák 2. css #div-1 { position: relative; top:20px; left:-40px; } www.bitman.hu Ahol a beírt HTML kódnak megfelelően megjelenne az elem, ahhoz képest a megadott eltolással jelenik meg. 117/94
Pozícionálás példák 3. css #div-1a { position: absolute; top:0; right:0; width:200px; } www.bitman.hu A megjelenés nem függ a HTML kód sorrendjétől, az objektum a böngésző ablakának előírt pozíciójába kerül. 117/95
Pozícionálás példák 4. css #div-1 { position: relative; } #div-1a { position: absolute; top:0; right:0; width:200px; } www.bitman.hu Ha a div-1 relatív pozíciójú, minden elem a div-1-en belül hozzá igazodik. Így az abszolút pozíciójú div-1a a div-1 jobb felső sarkához igazítódik. 117/96
Pozícionálás példák 5. css #div-1 { position: relative; } #div-1a { position: absolute; top:0; right:0; width:200px; } #div-1b { position: absolute; top:0; left:0; width:200px; } www.bitman.hu Az abszolút pozícionálás előnye, hogy a kódbeli sorrendtől eltérően jeleníthetők meg az egyes elemek. A példában a div-1 elemet elfedik az abszolút pozíciójú elemek. 117/97
Pozícionálás példák 6. css #div-1a { float: left; width:200px; } www.bitman.hu A div-1a elem illeszkedik (lebeg) a div-1 elem bal széléhez, a div- 1b elem szövege pedig körbefolyik körülötte. Főleg képeknél használatos, de működik más elemek (szövegek, táblázatok ) esetén is. 117/98
Pozícionálás példák 7. css #div-1a { float: left; width:190px; } #div-1b { float: left; width:190px; } #div-1c { clear: both; } www.bitman.hu A lebegő elemek után törölhető a lebegés (clear), az ezt követő elemek ismét a teljes szélességet elfoglalhatják. 117/99
Rétegek A mélységet akkor tudjuk értelmezni a monitor sík kijelzőjén, ha több elem egymásra kerül, egymást elfedi. Ekkor az fogja elfedni a másikat, mely előrébb, "közelebb" van a felhasználóhoz, vagy másként mondva, "feljebb" van a z tengelyen. A z tengelyen való elhelyezkedést a z-index tulajdonság segítségével, egy egész számot használva adhatjuk meg. Az alapértelmezett érték 0. Ha más értéket adunk meg, a nagyobb számmal bíró elem kerül közelebb a felhasználóhoz. Z Y X 117/100
Rétegek Forráskód <html> <head> <title>z-index</title> </head> <body> <p><img src = "hatter.jpg" style = "position: absolute; top: 0px; left: 0px; z-index: 1"/></p> <p><img src = "b.png" style = "position: absolute; top: 70px; left: 60px; z-index: 2"/></p> <p style = "position: absolute; top: 50px; left: 50px; z-index: 3; font-size: 20pt">BitMan</p> </body> </html> 1. réteg: háttérkép 2. réteg: B betű 3. réteg: BitMan www.bitman.hu 117/101
CSS példák (1) Forráskód <html> <head> <style type="text/css"> h1 {font-family:arial; font-size:28pt; color:red;} p {font-size:20pt; line-height:28pt; color:green; text-align:justify;} </style> </head> <body> <h1>csodás napunk van.</h1> <p>süt a nap, a hőmérséklet 23 fok, Celsiusban. Néhány bárányfelhő béget a csodás égszínkék égbolton, a madarak szerelmesen csicseregnek a zöld levelű fák ágain.</p> </body> </html> 117/102
117/103
CSS példák (2) Forráskód <html> <head> <style type="text/css"> * {font-size:12pt} i {color:blue} i, b {font-size:18pt} h1 i {color:red} h1 > b {color:green} i + b {color:yellow} </style> </head> <body> <h1><b>ma</b> csodás <i>napunk <b>van</b></i>.</h1> <i>holnap</i> <b>is</b> <b>csodás</b> nap lesz. </body> </html> 117/104 www.bitman.hu
CSS példák (3) Forráskód <html> <head> <style type="text/css"> h3.red { font-family: Arial; font-size: 10pt; color:red} h3.green { font-family: Times New Roman; font-size: 14pt; color:green} </style> </head> <body> <h3 class="red">csodás napunk van.</h3> <h3 class="green">csodás napunk van.</h3> </body> </html> www.bitman.hu 117/105
CSS példák (4) 117/106 Forráskód <html> <head> <style type="text/css"> p: {font-size: 12pt; line-height: 12pt; } p:first-letter {font-size: 300%; color: red;} p#dd:first-letter {float:left;} </style> </head> <body> <p> A sor első betűje háromszor akkora lesz, mint a többi betű. A float: left tulajdonság nélkül az első betű "kilóg" az első sorból. </p> <p id="dd"> A sor első betűje itt is háromszor akkora lesz, mint a többi betű, de a float: left tulajdonságot megadva a szöveg "körülöleli" az első betűt. </p> </body> </html> www.bitman.hu p: first-letter: minden <p> elem első betűje.
CSS példák (5) 117/107 Forráskód <html> <head> <style type="text/css"> p: first-child {background: yellow;} p + p {background: lightgreen;} </style> </head> <body> <p>első bekezdés.</p> <p>második bekezdés.</p> <p>harmadik bekezdés.</p> <div> <p>negyedik bekezdés.</p> </div> <p>ötödik bekezdés.</p> <p>hatodik bekezdés.</p> <p>hetedik bekezdés.</p> </body> </html> www.bitman.hu p: first-child: minden olyan <p> elem, mely a szülőnek az első gyermeke. p + p: minden olyan <p> elem, mely közvetlenül egy másik <p> elem után van.
CSS példák (6) www.bitman.hu <html> <head> <style type="text/css"> p {padding:5px;margin:10px;}.fontos {color:red;} p.szegely {border:1px solid black;} h1.szegely {border:2px dotted blue;} </style> </head> <body> <h1>címsor</h1> <p class="fontos">piros színű bekezdés, mert a fontos osztályba tartozik.</p> <p class="szegely">fekete szegély van a bekezdésen, mert a szegely osztályba van sorolva.</p> <p class="szegely fontos">a bekezdés piros színű és fekete szegéllyel ellátott mert a szegely és fontos osztályba is be van sorolva.</p> <h1 class="szegely fontos">címsor</h1> <p>a fenti címsor piros, mert be van sorolva a fontos osztályba. Szegélye is van, mert be van sorolva a szegely osztályba. Azonban más a szegélye, mint a bekezdésnek, mert a <h1> elemre más tulajdonságokkal hoztuk létre a szegely nevű osztályt.</p> </body> </html> 117/108 Forráskód Egy elem egyszerre több osztályba is tartozhat!
117/109
117/110
117/111
117/112
117/113
117/114
117/115
Felhasznált irodalom Weblabor.hu: A fejlesztői forrás W3schools.com: The world s largest web development site Rimár Miklós: Html, css szakdolgozat KBB TE Ruff Laura-Ildikó: Web programozás elektronikus jegyzetek http://www.barelyfitz.com/screencast/htmltraining/css/positioning/ Kromesch Sándor: Egyszerűen Web 117/116
VÉGE VÉGE 117/117