HTML nyelv ltalnos jellemzs HiperText Markup Language ler

  • Slides: 22
Download presentation
HTML nyelv

HTML nyelv

Általános jellemzés • Hiper-Text Markup Language • leíró nyelvtan • normál szövegfájl • HTML

Á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

Általános jellemzés • utasítások – „tag”-ek: < tag > • Nyitó és záró tag

Á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

Á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 • < < • > > • & & • ó ó •

Entitások • < < • > > • & & • ó ó • Ó Ó • ö ô • ő õ • szóköz  

Szintaxis <HTML> …első tag <HEAD> …fejléc <TITLE>cím</TITLE> …dokumentumcím </HEAD> <BODY> …törzs. . . </BODY></HTML>

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>

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

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"

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=10 px color=#ff 02 e 7> • bekezdés <div align=center>szöveg</div>

A HTML dokumentum szövegteste • bekezdés <p> illetve • bekezdésformázás <p align=center> • címsorok

A HTML dokumentum szövegteste • bekezdés <p> illetve • bekezdésformázás <p align=center> • címsorok <h 1>címsor 1</h 1> • 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>

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="#FF 3333" size=1>kicsi piros</font> <font size=2>N</font> <font size=3>ö</font>

Karakter formázás • • • <font color="#FF 3333" 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> • <H 1 align="left">Legfelső szintű címsor</H 1> • <H 2

Címszintek felépítése • <BANNER>címszalag</BANNER> • <H 1 align="left">Legfelső szintű címsor</H 1> • <H 2 align="center">2. szintű alcímsor</H 2> • <H 3 align="right">3. szintű alcímsor</H 3> • <H 4 nowrap>Negyedik szintű alcímsor</H 4> • <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

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:

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

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">. . . • <tab to="elso" align=„igazítás"> igazítás: left, center, right, decimal • <p><tab indent=32>alapértelmezett távolság: 32 • <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

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> 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

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> 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> <tr> <td> … </table> táblázat 1. sor 1. cella 2. cella táblázat

Táblázat <table> <tr> <td> … </table> táblázat 1. sor 1. cella 2. cella 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"> •

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

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='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="elérési_út/fájlnév. kit"> • blokkban pzicionálva: <img align="hely" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="fájlnév" hspace="vszám"

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

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>