Webprogramozás HTML alapok
Alapfogalmak internet: az egész világot körülölelő számítógép hálózat www (World Wide Web): az interneten működő, egymással ún. hiperlinkekkel összekötött dokumentumok rendszere HTTP (Hyper Text Transfer Protocol): egy információátviteli mód az interneten, az eredeti célja a HTML lapok publikálása és fogadása volt HTML (Hyper Text Markup Language): egy leíró nyelv, melyet web oldalak készítéséhez fejlesztettek ki XHTML
HTML példa <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>madarasi Menedékház</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> </head> <body bgcolor="#c3bfb6" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> <table width="100%" height="572" cellpadding="0" cellspacing="0" align="center"> <tr> <td height="572"><img src="images/pixel.gif"></td> <td width="3" height="572" bgcolor="#ffffff"><img src="images/pixel.gif"></td> <td width="770" height="572"> <table width="770" height="572" cellpadding="0" cellspacing="0"> <tr> <td width="770" height="194"> <table width="770" height="194" cellpadding="0" cellspacing="0"> <tr> <td width="263" height="194"><img src="images/pozamenedekhaz.jpg"></td> <td width="305" height="194"><img src="images/logo.jpg"></td> <td width="202" height="194"> <table width="202" height="194" cellpadding="0" cellspacing="0"> <tr> <td width="202" height="21">
HTML dokumentum részei Dokumentum Típus Definíció (DTD) <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN > HTML fejléc technikai és dokumentációs adatokat tartalmaz <head> <title>az oldal címec me</title> Kötelező!!! <meta http-equiv="content-type" content="text/html;charset=az oldal kódolása"> <meta name="author" content="az oldal készítője"> <meta name="keyword" content="kulcsszó1, kulcsszó2"> <meta name="description" content="az oldal leírása"> <meta http-equiv="refresh" content="5;url=http://www.w3schools.com"> </head> HTML törzs a megjelenítendő információkat tartalmazza <body> Az oldal tartalma </body>
Példa oldal <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <title>az oldal címe</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> </head> <body> Az oldal tartalma </body> </html>
Formázási elemek Címsorok: <h1>, <h2>,, <h6> Bekezdések: <p>bekezdés szövege</p> <blockquote>valami</blockquote> <pre>előre formázott</pre> új sor: <br /> Rendezési tulajdonságok: ALIGN = left / right / center / justify példák: <h1 align= center >Címsor</h1> <p align= right >Jobbra rendezett bekezdés</p>
Szövegformázás <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title>szövegformázás</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> </head> <body> <p>így lehet <B>kétféle</B>, nem mindig azonos <STRONG>kövér</STRONG>, <I>kétféle</I> <EM>dõlt</EM>, <U>aláhúzott</U>, <BLINK>villogó</BLINK> ill. <KBD>FIX jelszélességû</kbd> szövegrészt írni.</p> <p><b><u>kombinálhatjuk is.</u></b></p> <p>így pedig <SUP>felsõ</SUP>, ill. <SUB>alsó</SUB> indexet írhatunk.</p> <p>lehetõség van a <TT>TT=teletype</TT>, <BIG>BIG</BIG>, <SMALL>SMALL</SMALL> és <STRIKE>STRIKE</STRIKE> jeltipusok használatára. (Nem minden böngészõ érti mindegyiket. Ha nem érti, figyelmen kívül hagyja.)</p> <p>láthatjuk, hogy egy parancs hatása olyan másikkal zárható le, ami a "parancs"-szó ismétlésébõl és egy az elé tett "/" jelbõl áll.</p> </body> </html>
Szövegformázás
Betütípus beállítások <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title>betütípus beállítások</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> </head> <body> <P>A "FONT" paranccsal betûméretet vagy betûszínt állíthatunk be. A méret 1-tõl kezdve növekszik, a szín vagy angol elnevezés (140 lehetõségbõl), vagy RGB kód #RRGGBB formában. Az RGB (Red=piros, Green=zöld, Blue=kék) kód hexadecimálisan (16-os számrendszerben) írandó, és így a piros-zöld-kék arányt több, mint 16 millió módon adhatjuk meg (#000000 és #FFFFFF között).</p> <P><B>Néhány példa:</b></p> <P align="center"><font SIZE=1>1-es méret</font><br /> <FONT SIZE=2>2-es méret</font><br /> <FONT SIZE=3>3-as méret</font><br /> <FONT SIZE=4>4-es méret</font><br /> <FONT SIZE=5>5-ös méret</font><br /> <FONT SIZE=6>6-os méret</font><br /> <B><FONT COLOR=red>red</FONT> <FONT COLOR=#FF0000>= #FF0000</FONT><BR /> <FONT COLOR=green>green</FONT> <FONT COLOR=#008000>= #008000</FONT><BR /> <FONT COLOR=lime>lime</FONT> <FONT COLOR=#00FF00>= #00FF00</FONT><BR /> <FONT COLOR=blue>blue</FONT> <FONT COLOR=#0000FF>= #0000FF</FONT><BR /> <FONT COLOR=#ABCDEF SIZE=5>#ABCDEF (nincs neve)</font></b><br /> <FONT COLOR=#123456 SIZE=5>#123456 (meg ennek sincs)</font></b></p> </body> </html>
Betütípus beállítások
Speciális karakterek < < > > & & á á Á Á í í ú ú õ õ ő ő Ő Ő ô ô û û ű ű Ű Ű Ö Ö é é ß ß û û † ‰»» ««± ±
Listák <h1> A felsorolás többszintes is lehet, többféle kezdőjellel. </h1> <UL> <LI>elsõ <LI>második <LI>harmadik bekezdéssel, amik közül ez a harmadik jóval hosszabb az elõzõ kettõnél, ezért csak több sorban fér el. </UL> <UL TYPE=round> <LI>Európa <LI>Ázsia <LI>Amerika <ul type=square> <li>észak-amerika <UL TYPE=disc> <LI>Kanada <LI>USA </UL> <li>közép-amerika <li>dél-amerika </ul> <LI>Afrika </UL> <h1>számozott listák:</h1> <OL TYPE=i> <LI>számozva (TYPE=1, elhagyható) <LI>római számozva (TYPE=I) <LI>kis római számozva (TYPE=i) <LI>kisbetûzve (TYPE=a) <LI>vagy nagybetûzve (TYPE=A) </OL>
Listák
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>