Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
1
HTML nyelv
2
Á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)
3
Á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
4
Entitások < < > > & & ó ó Ó Ó ö ô
< < > > & & ó ó Ó Ó ö ô ő õ szóköz
5
Szintaxis <HTML> …első tag <HEAD> …fejléc
<TITLE>cím</TITLE> …dokumentumcím </HEAD> <BODY> …törzs . </BODY></HTML> …lezáró tag-ek
6
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.
7
A HTML dokumentum fejléce
karakterkészlet <META http-equiv=content-type content=text/html;charset=iso > 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>
8
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>
9
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”>
10
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>
11
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>
12
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>
13
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>
14
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.
15
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!
16
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!
17
Táblázat <table> táblázat <tr> 1. sor <td> 1. cella
… </table> táblázat vége
18
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
19
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
20
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">
21
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=„ levélküldő <a href="mailto: nekem! képre írt <a href=„fájlnév”>link_szöveg</a>
22
Űrlapok Nyitás <FORM> tag Zárás </FORM> Attributumok:
name – Az űrlap neve method – átvitel típusa
23
Ű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
24
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’>
25
Jelszó Jelszó: <INPUT TYPE=‘password’> Attributumok:
name – szövegdoboz neve size – szövegdoboz hossza <INPUT TYPE=‘password’ name=‘jelszo’ size=’20’>
26
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’>
27
Csoportosítás <FIELDSET> </FIELDSET>
<fieldset> <legend>Adatok:</legend> Név: <input type="text" size="30" /><br /> <input type="text" size="30" /><br/> </fieldset> <LEGEND></LEGEND> - Címet definiál
28
Többsoros szövegbevitel
<textarea rows="4" cols="20"> Kezdeti szöveg tartalom </textarea> Row – sor Cols - oszlop
29
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>
30
VÉGE
Hasonló előadás
