HTML nyelv
Általános jellemzés utasítások – „tag”-ek: < tag > Nyitó és záró tag (pl.: <td> , </td>) foglalt szavak (pl.:head, body, table, img,…) Dos-os fájlnevek használata elérési út (pl.: ../mappa/nev.jpg) színkód RGB – hexadecimális formátum: #rrggbb (pl.:fekete=#000000)
Általános jellemzés szerver – kliens oldalak ftp kapcsolat könyvtárstruktúra lap elemei azonos könyvtárban minden könyvtárban: index.html ../ egy szinttel fentebb hivatkozás: ../könyvtár_név/fájl.kit
Entitások < < > > & & ó ó Ó Ó ö ô < < > > & & ó ó Ó Ó ö ô ő õ szóköz
Szintaxis <HTML> …első tag <HEAD> …fejléc <TITLE>cím</TITLE> …dokumentumcím </HEAD> <BODY> …törzs . </BODY></HTML> …lezáró tag-ek
A HTML dokumentum fejléce A böngésző nem jeleníti meg, meta-információ <TITLE>dokumentum címe</TITLE> <META name="mező„ content="érték"> pl.: alkotó, létrehozó, tartalom, keresőszavak, stb.
A HTML dokumentum fejléce karakterkészlet <META http-equiv=content-type content=text/html;charset=iso-8859-1> alkotó <META content=„Gipsz Jakab" name=author> kulcsszavak a keresőmotoroknak <META content=„címszó1, címszó2" name=keywords> szkriptek (java, php, vb, …) <SCRIPT> </SCRIPT>
A HTML dokumentum szövegteste <BODY> megjelenítendő rész</BODY> <BODY background="fájlnév.kit" bgcolor="színkód" text="színkód" link="színkód" vlink="színkód" alink="színkód"> karakter <FONT face=arial size=10px color=#ff02e7> bekezdés <div align=center>szöveg</div>
A HTML dokumentum szövegteste bekezdés <p> illetve <br> bekezdésformázás <p align=center> címsorok <h1>címsor1</h1> táblázat <table><tr><td>…</td></tr></table> hivatkozás <a href=„lapnév.html”>szöveg</a> kép <img src=„kép.jpg” alt=„szöveg”>
Karakter formázás <b>félkövér</b> <i>dőlt</i> <u>aláhúzott</u> <s>áthúzott</s> <em>kiemelt</em> <cite>idézet</cite> <strong>kiemelés</strong> <big>nagyméretű</big> <small>kisméretű</small> <sub>alsó index</sub> <sup>felső index</sup> <blink>villogó</blink>
Karakter formázás <font color="#FF3333" size=1>kicsi piros</font> <font size=2>N</font> <font size=3>ö</font> <font size=4>v</font> <font size=5>e</font> <font size=6>k</font> <font size=7>v</font> <font size=8>ő</font> <font face="Arial CE" size=9>ARIAL CE</font> <font face="Symbol" size=10>SYMBOL</font>
Címszintek felépítése <BANNER>címszalag</BANNER> <H1 align="left">Legfelső szintű címsor</H1> <H2 align="center">2. szintű alcímsor</H2> <H3 align="right">3. szintű alcímsor</H3> <H4 nowrap>Negyedik szintű alcímsor</H4> <DIV align="center">szakasz</DIV>
Bekezdések felépítése <p>alapértelmezett bekezdés</p> <p align=hely>igazított bekezdés hely: left, center, right, justify <p nowrap>tördelés tiltása</p> sortörés elem, nem új bekezdés: <br>
Tabulálás nem minden böngésző támogatja pozicionálás táblázattal, stílussal (css) <p>Szöveg<tabstop ID="elso">szöveg folytatás<tabstop ID="masodik"> ... <br><tab to="elso" align=„igazítás"> igazítás: left, center, right, decimal <p><tab indent=32>alapértelmezett távolság: 32 <br><tab>ez a 32. karakternél kezdődik.
Felsorolás <ul> felsorolás kezdete <li>szöveg első sor <li>szöveg második s <ul><li>szöveg második szint … </ul></ul> felsorolás vége <ul type=„típus”> felsorolás elem beállítása típus: circle, disc, square <ul src=„fájlnév.kit"> felsorolás elem beállítása <li> -nek nincs záró tag-je!
Sorszámozás <ol> sorszámozás kezdete <li>szöveg első sorszám <li>szöveg második sorszám <ol><li>szöveg második szint … </ol></ol> sorszámozás vége <ol seqnum="szám"> kezdő sorszám beállítása <ol continue> előző sorszámozás folytatása <li> -nek nincs záró tag-je!
Táblázat <table> táblázat <tr> 1. sor <td> 1. cella … </table> táblázat vége
Táblázat minden sorban azonos számú cella <table border="szám" align="hely" cellpadding="pszám" cellspacing="kszám" bgcolor="szín"> elegendő az első sor celláit méretezni <td width=„szám” height=„szám”> cellák egyesítése: colspan=„cellaszám” – vízszintes rowspan=„cellaszám” - függőleges
Képek szigorúan kisbetűs, DOS-os nevek azonos mappában a lappal a kép méretének változtatásával a foglalt terület nem változik átlátszó: „interlaced” hivatkozás írható rá scriptekkel effektek pozicionálás
Képek aktuális szövegpozícióban: <img src="elérési_út/fájlnév.kit"> blokkban pzicionálva: <img align="hely" src="fájlnév" hspace="vszám" vspace="fszám" width="szméret" height="mmeret" alt="szöveg">
Hivatkozások a HTML lényege lapon belül <a href="#vege">végére</a> <a name=„vege”>vége</a> lapok között <a href=„fájlnév”><img src="fájlnév"></a> külső <a href=„http://www.lap.hu”>lap</a> levélküldő <a href="mailto: hmg@index.hu">írj</a> nekem! képre írt <a href=„fájlnév”>link_szöveg</a>
Űrlapok Nyitás <FORM> tag Zárás </FORM> Attributumok: name – Az űrlap neve method – átvitel típusa
Űrlapelemek Kezdés <INPUT> tag Attributum <TYPE>, ennek értékeként adjuk meg, hogy milyen típusú az űrlapelem. Pl: <INPUT TYPE=‘text’> - szövegdoboz
Szövegdoboz Szövegdoboz: <INPUT TYPE=‘text’> Attributumok: name – szövegdoboz neve size – szövegdoboz hossza value - érték <INPUT TYPE=‘text’ name=‘nev’ size=’20’>
Jelszó Jelszó: <INPUT TYPE=‘password’> Attributumok: name – szövegdoboz neve size – szövegdoboz hossza <INPUT TYPE=‘password’ name=‘jelszo’ size=’20’>
Gomb Gomb: <INPUT TYPE=‘button’> Attributumok: name – gomb neve value – felirat Egyéb gomb típus: submit, reset <INPUT TYPE=‘button’ name=‘gomb’ value=’katt ide’>
Csoportosítás <FIELDSET> </FIELDSET> <fieldset> <legend>Adatok:</legend> Név: <input type="text" size="30" /><br /> Email: <input type="text" size="30" /><br/> </fieldset> <LEGEND></LEGEND> - Címet definiál
Többsoros szövegbevitel <textarea rows="4" cols="20"> Kezdeti szöveg tartalom </textarea> Row – sor Cols - oszlop
Legördülő lista <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>
VÉGE