B I T M A N B I v: T M A N

Átírás

1 Web technológiák 1. Gy: HTML, CSS B I v: T M A N 1/64

2 Témakörök HTML CSS 2/64

3 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ű Fejléc Head Dokumentumtörzs Body 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 3/64

4 HTML alapok 2. <HTML> <HEAD> <TITLE> Az oldal címe </TITLE> </HEAD> <BODY> Helló Világ! </BODY> </HTML> 1. Jegyzettömb, beírás 2. Mentés: pl. prb.htm 3. 2x Megnézés böngészőben 4/64

5 Az igazi kód 5/64

6 HTML alapok 3. Almalap elkészítése 1. Félkövér szöveg Oldal címe Normál szöveg több sorban Kép Link 6/64

7 HTML alapok 4. Almalap elkészítése 2. <HTML> Félkövér <HEAD><TITLE> Almalap </TITLE></HEAD> <BODY> Sortörés <p> <b> Az alma: </b> <br> - Finom,<br> Bekezdés - Mókás,<br> - Szeletelt</p> <p> <img src="alma.jpg" width="170" height="176"> <br><br> AlmaInfo: <a href=" alma honlapja</a> </p> </BODY> </HTML> 7/64 Kép beszúrás: fájl neve, szélesség, magasság Link beszúrás: hivatkozás, megjelenő szöveg

8 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!"> 8/64

9 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 9/64

10 10/64 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.

11 Címszintek Címek, alcímek 6 szint mélységben <H1 ALIGN="irány"> Szöveg </H1> <H2 ALIGN="irány"> Szöveg </H2> NOWRAP Sortörés kikapcsolása <hr /> Vízszintes vonal <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> 11/64

12 A dokumentum tagolása <DIV CLASS="osztály" ALIGN="irány"> </DIV> NOWRAP Sortörés kikapcsolása <P ALIGN="irány"> </P> Bekezdés <BR> Sortörés Nem tördelhető szóköz 12/64

13 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 <FONT FACE="név" COLOR="szín" SIZE=szám> </FONT> 13/64

14 Karakterformátumok <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> 14/64

15 Felsorolás számozás <ul> <li>retek</li> <li>paprika</li> <li>hagyma</li> </ul> <ol> <li>retek</li> <li>paprika</li> <li>hagyma</li> </ol> 15/64

16 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 16/64

17 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 " 17/64

18 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> 18/64

19 Táblázatok Táblázat kezdete Sor 19/64 <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

20 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 20/64

21 Hiperhivatkozások a webhelyen index.html 21/64

22 Weblapon belüli linkek <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> 22/64

23 Webhelyen belüli és külső linkek <a href="mam.htm">mai menü</a> <a href="fotok/foto.htm">fotók</a> <a href=" a W3Schools weblapra</a> <a href=" target="_blank" >Link a W3Schools weblapra</a> 23/64

24 Frame-ek (keretek) Ne használd! Terület felbontása kisebb egységekre <HTML> <HEAD><TITLE>Brekk</TITLE></HEAD> <frameset cols="60%,40%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> </frameset> </HTML> 24/64

25 Frame-ek (keretek) <HTML> <HEAD><TITLE>Kakukk</TITLE></HEAD> <frameset rows="60%,40%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> </frameset> </HTML> 25/64

26 IFrame Ezt használhatod! Weblap a weblapban <HTML> <HEAD><TITLE>Retek</TITLE></HEAD> <BODY> <iframe src="frame_a.htm" width="150" height="150"> </iframe> </BODY> </HTML> 26/64

27 HTML űrlap <html> <head> <title> Bejelentkezés </title> </head> <body> <form> <p>kérem a nevemet: <br> <input type = text name="tm" size=17> </form> </body> </html> 27/64

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

29 HTML űrlap Beviteli elemek (2) <form> <p>kérem a nevemet: <br> <input type=text name="tm" size=17> </p> <p>kérem a jelszavamat: <br> <input type=password name="tm2" size=17> </p> <p>naplózás: <input type=checkbox name="tm3"> Titkosítás: <input type=checkbox name="tm4" checked="checked"> </p> 29/64

30 HTML űrlap Beviteli elemek <p>betűméret: S<input type=radio name="tmr" value="s"> M<input type=radio name="tmr" value="m"> L<input type=radio name="tmr" value="l" checked="checked"> XL<input type=radio name="tmr" 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> 30/64

31 Témakörök HTML CSS 31/64

32 CSS Cascading Style Sheets Vízesés stílusú lap Egymásba ágyazható stíluslapok Szövegek formázására, rétegek kezelésére HTML kódelemek módosítására 32/64 Forrás: Weblabor

33 CSS példa Formázás HTML parancsokkal <html><head><title>css 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> 33/64

34 CSS példa Formázás css-el <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> 34/64

35 A CSS és a HTML viszonya Beágyazott stíluslap 35/64 HTML fejlécben, a style elemben (előző oldal példája) 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 <h1 style="font-size: 20px; color: #a00000;">bevezetés</h1> Importálva <style type="text/css"> url( --> </style>

36 Stílusok formátuma kiválasztó { tulajdonság } kiválasztó: 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; } 36/64

37 Kiválasztók Elem h1, h2, h3 { color: #a00000; } Osztály <style type="text/css">.fontos { color: #ff0000; } </style> <body> <p class="fontos" >A retekmag olyan...</p> 37/64

38 Kiválasztók (2) Azonosító Csak egyszer, egy elemre használható! <style type="text/css"> #st1 { color: #ff0000; } </style> <body> <p id="st1" >A retekmag olyan...</p> 38/64

39 Kiválasztók (3) Helyzet-érzékeny mód Pl. táblázatban, a félkövér betűk legyenek sötétkékek <style type="text/css"> table b { color: #0000a0; } </style> Tulajdonság alapján Pl. Beviteli mezőben a jelszó legyen kék <style type="text/css"> input[type="password"] { color: #0000a0; } </style> 39/64

40 Bekezdések megjelenése Betűkészletek 40/64 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; }

41 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; } 41/64

42 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óttság sugara, szín Szavak közti távolság p { word-spacing: 10px; } (lehet negatív is) Sormagasság p { line-height: 20px; } 42/64

43 Doboz modell /64 1 margó: a befoglaló doboz és a keret közti távolság 2 keret 3 kitöltés: a keret és a tartalom közti távolság 4 az elem magassága (IE: a doboz magassága!) 5 az elem szélessége (IE: a doboz szélessége!)

44 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! 44/64

45 Háttér Háttérszín 45/64 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; }

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

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

48 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; } 48/64

49 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; } 49/64

50 Margók Egyforma 50/64 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; }

51 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; 51/64 padding-bottom: 2px; }

52 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 52/64

53 Listaelemek (példa) <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> </html> 53/64

54 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; } 54/64

55 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! 55/64 #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; }

56 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 56/64

57 Rétegek A sík harmadik dimenziója Z tengely Alapérték: 0 Z Y X #message { z-index: 1; } 1. réteg: háttérkép 2. réteg: B betű 3. réteg: BitMan 57/64

58 Rétegek (példa) <html><head><title>css példa</title></head> <body> <p><img src = "hatter.jpg" style = "position: absolute; top: 0px; left: 0px; z-index: 1" alt = "Első réteg" /></p> <p style = "position: absolute; top: 50px; left: 50px; z-index: 3; font-size: 20pt">BitMan</p> <p><img src = "BM.png" style = "position: absolute; top: 70px; left: 60px; z-index: 2" alt = "Második réteg" /></p> </body> </html> 58/64

59 CSS példák (1) <HTML><HEAD> <STYLE type="text/css"> H1 { font-family: Arial; font-size: 18pt; Color:red } P { font-size: 12pt; line-height:20pt } </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> 59/64

60 CSS példák (2) <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> 60/64

61 CSS példák (3) <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> 61/64

62 62/64

63 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 63/64

64 VÉGE V É G E 64/64