Webprogramozás HTML alapok 2. 3. előadás
Hivatkozások - linkek Link: más webes tartalomra történő irányítás
Hivatkozások - linkek abszolút hivatkozás <a href= http://www.phys.ubbcluj.ro >fizika kar weboldala</a> relatív hivatkozás <a href= masodik.htm >más oldal</a> TARGET tulajdonság: target= _SELF target= _BLANK target= _TOP target= _PARENT target= név hivatkozás képre <a href= kep.jpg >valami kép</a> email link <a href="mailto:jferenc@phys.ubbcluj.ro">email nekem</a>
Példa elso.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title>első oldal</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> </head> <body> <a href="http://www.phys.ubbcluj.ro" target="_blank">fizika kar weboldala</a> <a href="masodik.htm" target="_self">második oldal</a> </body> </html> masodik.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title>második oldal</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> </head> <body> <a href="http://atom.ubbcluj.ro/jferenc" target="_blank">kurzus weboldala</a> <a href="elso.htm" target="_self">első oldal</a> </body> </html>
Oldalon belüli hivatkozások belső rész elnevezése: <a name= nev >valami</a> belső hivatkozás egy részre: <a href= #nev >hivatkozás egy részre</a> külső hivatkozás egy oldal részére: <a href= http://www.valami.com/oldal.htm#nev >hivatkozás egy részre</a> <a href= oldal.htm#nev >relatív hivatkozás egy részre</a>
Példa <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title>belső hivatkozások</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> </head> <body> <h1><a name="tartalom">tartalom</a></h1> <ul> <li><a href="#elso">első fejezet</a></li> <li><a href="#masodik">második fejezet</a></li> <li><a href="#harmadik">harmadik fejezet</a></li> </ul> <hr /> <h1><a name="elso"></a>első rész</h1> <p>valami tartalom...</p> <p align="right"><a href="#tartalom">vissza</a></p> <h1><a name="masodik"></a>első rész</h1> <p>valami tartalom...</p> <p align="right"><a href="#tartalom">vissza</a></p> <h1><a name="harmadik"></a>első rész</h1> <p>valami tartalom...</p> <p align="right"><a href="#tartalom">vissza</a></p> </body> </html>
Képek kép beszúrása: <img src="kep.jpg" align="left" hspace="10" vspace="10" border="1" /> kép elérése (relatív/abszolút) rendezés: left, right, middle, vízszintes/függőleges távolság keret egyéb tulajdonságok: width="100px" height="100px" width="50%" height="30%" kép, mint link <a href="oldal.htm"><img src="kep.png" alt="leiras" /></a>
Példa <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title>képek</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> </head> <body> <p><font color=yellow><img src="kep1.jpg" align="left" hspace="10" vspace="10" border="1" /></font>ha az aktuális lapra akarunk képeket behozni, az "IMG" kulcsszóval megtehetjük. Bekeretezhetjük a képet, és a szöveg mögé (ALIGN=right) vagy elé (ALIGN=left) tehetjük, úgy, hogy a szöveg a képet "körülveszi".</p> <p><font color=blue><img src="kep2.jpg" align="right" hspace="10" vspace="10" border="2" width="120" height="80" /></font>a "BORDER" mögött a keret méretét, a HSPACE ill. VSPACE mögött a kép mellett ill. az alatta-fölötte levõ üres rész méretét (képernyõ pontokban) adhatjuk meg. A keret színe az aktuális betûszín, amit minden képre külön beállíthatunk. Ha nem az eredeti méretében akarjuk a képet mutatni, akkor a "HEIGHT=" ill. "WIDTH=" paraméter is szóba jöhet. (Ezt is képpontokban mérve.) Ilyenkor torzulhat a kép, ha rossz arányban méretezzük át.</p> </body> </html>
Táblázatok sablon <table border="1"> <caption>táblázat leírás</caption> <tr><th>fejléc 1</th><th>Fejléc 2</th></tr> <tr><td>1. sor, 1. oszlop</td><td>1. sor, 2. oszlop</td></tr> <tr><td>2. sor, 1. oszlop</td><td>2. sor, 2. oszlop</td></tr> </table>
Táblázatok TABLE tulajdonságok cellpadding=hossz a cella kerete és tartalma közti üres hely mérete cellspacing=hossz a cellák közötti távolság width=érték a táblázat (vagy akár a cella) szélessége bgcolor=szín a táblázat (vagy cella) háttérszíne background="hatterkep.jpg" a táblázat (vagy cella) háttérképe
Példa <TABLE BORDER="3" BGCOLOR=silver CELLPADDING="4"> <TR><TH>Cella háttérszíne</th><th>szín neve</th> <TH>RGB kódja</th></tr> <TR><TD BGCOLOR=black> </TD><TD>black</TD> <TD>#000000</TD></TR> <TR><TD BGCOLOR=blue> </TD><TD>blue</TD> <TD>#0000FF</TD></TR> <TR><TD BGCOLOR=cyan> </TD><TD>cyan</TD> <TD>#00FFFF</TD></TR> <TR><TD BGCOLOR=green> </TD><TD>green</TD> <TD>#008000</TD></TR> <TR><TD BGCOLOR=magenta> </TD><TD>magenta</TD> <TD>#FF00FF</TD></TR> <TR><TD BGCOLOR=red> </TD><TD>red</TD> <TD>#FF0000</TD></TR> <TR><TD BGCOLOR=white> </TD><TD>white</TD> <TD>#FFFFFF</TD></TR> </TABLE>
Példa
Cellák egybeolvasztása <TABLE WIDTH="50%" BORDER="1" BGCOLOR=limegreen CELLPADDING="15"> <TR> <TD WIDTH="25%"> Elsõ sor</td> <TD COLSPAN="3"> három összevont oszloppal</td> </TR> <TR> <TD ROWSPAN="2">2. és 3. sor 1. oszlopa összevonva</td> <TD WIDTH="25%">Ez a</td> <TD WIDTH="25%">2.</TD> <TD WIDTH="25%">sor</TD> </TR> <TR> <TD>Ez a</td> <TD>3.</TD> <TD>sor</TD> </TR> </TABLE>
A BODY tulajdonságai BACKGROUND="kép.jpg" háttérkép BGCOLOR="szín" háttérszín TEXT="szín" az oldal szövegének színe LEFTMARGIN="hossz" bal margó vastagsága RIGHTMARGIN="hossz" jobb margó vastagsága TOPMARGIN="hossz" felső margó vastagsága BOTTOMMARGIN="hossz" alsó margó vastagsága
Oldal szerkezete táblázattal <html> <head> <title>oldal</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> </head> <body> <table width="80%" border="0" bgcolor="#cc0000" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" bgcolor="#990000" align="center" height="100px">fejléc</td> </tr> <tr> <td width="20%" bgcolor="#ff6600" align="center" valign="top"> <p>navigációs menü</p> <table width="90%" border="1" cellpadding="10px" cellspacing="0" bgcolor="#009900"> <tr><td><a href="#">link 1</a></td></tr> <tr><td><a href="#">link 2</a></td></tr> <tr><td><a href="#">link 3</a></td></tr> <tr><td><a href="#">link 4</a></td></tr> </table> <p> </p></td> <td align="center">tartalom</td> </tr> </table> </body> </html>
Oldal szerkezete táblázattal
IFRAME beágyazott keret <html> <head> <title>oldal</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> </head> <body> <table width="80%" border="0" bgcolor="#cc0000" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" bgcolor="#990000" align="center" height="100px">fejléc</td> </tr> <tr> <td width="20%" bgcolor="#ff6600" align="center" valign="top"> <p>navigációs menü</p> <table width="90%" border="1" cellpadding="10px" cellspacing="0" bgcolor="#009900"> <tr><td><a href="t1.htm" target="tartalom">link 1</a></td></tr> <tr><td><a href="t2.htm" target="tartalom">link 2</a></td></tr> <tr><td><a href="t3.htm" target="tartalom">link 3</a></td></tr> <tr><td><a href="t4.htm" target="tartalom">link 4</a></td></tr> </table> <p> </p></td> <td align="center"><iframe allowtransparency="true" height="500px" width="99%" scrolling="auto" name="tartalom" src="t1.htm">tartalom</iframe></td> </tr> </table> </body> </html>
IFRAME beágyazott keret t1.htm <html> <head> <title>untitled Document</title> <meta http-equiv="content-type content="text/html; charset=iso-8859-2"> </head> <body> <h1 align="center">tartalom 1</h1> </body> </html>