Web technológiák 1. Gy: HTML, CSS B IT MAN. 117/1 v:

Átírás

1 Web technológiák 1. Gy: HTML, CSS 117/1 v:

2 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

3 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

4 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

5 Témakörök HTML CSS 117/5

6 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

7 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

8 Az igazi kód 117/8

9 </html> </body> HTML alapok /9 <html> <head> <title>almalap</title> </head> <body> <p>  <b>az alma:</b><br> </p> <ul>  <li>finom,</li> <li>mókás,</li> <li>szeletelt.</li> </ul>

10 <html> <body> HTML alapok 4. <p> <img src="alma.jpg" width="160" height="170">  <br>  AlmaInfo: <a href=" az AlmaLapra</a> </p> </body> </html> 117/10

11 Milyen szerkesztőt használjunk Jegyzettömb Notepad++ 117/11

12 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

13 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

14 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

15 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

16 117/16 FFF FFF CCC CCC FFC C00 FF9 900 FF6 600 FF C C00 CC9 900 FFC C33 FFC C66 FF9 966 FF6 633 CC3 300 CC0 033 CCF F00 CCF F CCC C00 FFF F00 CC9 933 CC CC0 000 FF0 000 FF3 366 FF F F00 CCF F66 99C C CCC C33 FFF F CC3 333 FF3 333 CC3 366 FF6 699 FF F F00 99F F66 66C C CCC C66 FFF F CC6 666 FF CC3 399 FF6 6CC FF F F00 66F F C C00 99F F33 CCC C99 FFF F99 CC9 966 CC6 600 CC9 999 FF9 999 FF3 399 CC FF3 3CC FF0 0CC 00C C00 33C C C C66 CCF F99 FFF FCC FFC C99 FF9 933 FFC CCC FF9 9CC CC CC C C33 66C C66 00F F00 33F F33 66F F66 99F F99 CCF FCC CC9 9CC C C99 FFC CFF FF9 9FF FF6 6FF FF3 3FF FF0 0FF CC6 6CC CC3 3CC C C C C99 99F FCC CCF FFF 339 9FF 99C CFF CCC CFF CC9 9FF 996 6CC CC CC0 0CC 00F F33 33F F C C66 33F F99 99F FFF 99C CCC 006 6CC 669 9CC 999 9FF 999 9CC 993 3FF 660 0CC CC3 3FF CC0 0FF 00F F66 66F F99 33C C F FFF 66C CCC FF 666 6CC CC CC6 6FF 990 0FF 00F F99 66F FCC 33C C99 33F FFF 33C CCC FF 333 3CC CC 996 6FF 660 0FF 00F FCC 33F FCC 00F FFF 00C CCC CC 336 6CC 000 0FF 000 0CC FF 330 0FF 00C C CC 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.

17 Kedvenc színválasztó oldalam 117/17 BBITITMAN

18 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

19 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> 117/19

20 A dokumentum tagolása Bekezdések, blokkok <p align= "irány"> <! bekezdés--> szövegek, képek <br>  <! 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

21 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

22 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> 117/22

23 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 />  <pre> Ha a pre tagot alkalmazzuk, a szöveg úgy fog megjelenni, ahogyan beírtuk. </pre> </body> </html> 117/23

24 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> 117/24

25 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

26 Speciális karakterek (2) Karakter Kódnév Számkód «««½ ½ ½ 117/26 Karakter Kódnév Számkód»»»

27 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

28 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> 117/28

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

30 Felsorolás számozás Forráskód <ul> <li>hapci</li> <li>morgó</li> <li>szundi</li> </ul> <ol> <li>elment vadászni,</li> <li>meglőtte,</li> <li>hazavitte,</li> <li>mind megette.</li> </ol> 117/30

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

32 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> 117/32

33 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

34 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

35 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

36 Usemap (3) 117/36

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

38 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

39 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 Külső szegély, és mérete 117/39

40 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 /40 3

41 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

42 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=" a W3Schools weblapra</a> <a href=" target="_blank" >Link a W3Schools weblapra</a> 117/42

43 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

44 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> 117/44

45 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> 117/45

46 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> 117/46

47 HTML űrlap Beviteli elemek <input type= xxx > text password checkbox radio select submit reset 117/47

48 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

49 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

50 Témakörök HTML CSS 117/50

51 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

52 A tartalom és a megjelenés szétválása től HTML Struktúra Adat Dizájn HTML Struktúra Adat CSS Dizájn 117/52

53 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

54 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

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

56 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; }

57 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 url( </style>

58 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

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

60 117/60

61 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

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

63 117/63

64 Ö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> ks.css p {font-size: 14pt; color: indigo} 117/64

65 117/65

66 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

67 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

68 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

69 117/69

70 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; }

71 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

72 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

73 Doboz modell /73

74 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

75 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

76 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; }

77 117/77 html <html> <head> <title>weblappróba</title> </head> <body background="auto.jpg"> <p>szöveg az oldalon. </p> </body> </html>

78 css body { background: url(auto.jpg) no-repeat center center fixed; } 117/78

79 css body { background: url(auto.jpg) repeat-x bottom left; } 117/79

80 css body { background: url(auto.jpg) repeat-x bottom center; } 117/80

81 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 117/81

82 Keret Firefox Körben egyforma P { border-style:solid; border-color:#ffcc00; border-width: 5px;} Fontos a sorrend is! 117/82

83 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; } 117/83

84 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; }

85 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

86 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; }

87 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; }

88 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

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

90 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

91 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; }

92 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

93 Pozícionálás példák 1. css #div-1 { position: static; } 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

94 Pozícionálás példák 2. css #div-1 { position: relative; top:20px; left:-40px; } Ahol a beírt HTML kódnak megfelelően megjelenne az elem, ahhoz képest a megadott eltolással jelenik meg. 117/94

95 Pozícionálás példák 3. css #div-1a { position: absolute; top:0; right:0; width:200px; } 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

96 Pozícionálás példák 4. css #div-1 { position: relative; } #div-1a { position: absolute; top:0; right:0; width:200px; } 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

97 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; } 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

98 Pozícionálás példák 6. css #div-1a { float: left; width:200px; } 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

99 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; } 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

100 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

101 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 117/101

102 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

103 117/103

104 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

105 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> 117/105

106 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> p: first-letter: minden <p> elem első betűje.

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

108 CSS példák (6) <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!

109 117/109

110 117/110

111 117/111

112 117/112

113 117/113

114 117/114

115 117/115

116 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 Kromesch Sándor: Egyszerűen Web 117/116

117 VÉGE VÉGE 117/117