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 Hiper-Text Markup Language leíró nyelvtan
normál szövegfájl HTML szerkesztő programok .html , .htm kiterjesztés böngésző: compiler és interpreter DOS-os nyelvtani szabályok index.html
3
Á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)
4
Á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
5
Entitások < < > > & & ó ó Ó Ó ö ô
< < > > & & ó ó Ó Ó ö ô ő õ szóköz
6
Szintaxis <HTML> …első tag <HEAD> …fejléc
<TITLE>cím</TITLE> …dokumentumcím </HEAD> <BODY> …törzs . </BODY></HTML> …lezáró tag-ek
7
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.
8
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>
9
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>
10
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”>
11
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>
12
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>
13
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>
14
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>
15
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.
16
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!
17
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!
18
Táblázat <table> táblázat <tr> 1. sor <td> 1. cella
… </table> táblázat vége
19
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
20
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
21
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">
22
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>
Hasonló előadás
