1 / 22

HTML nyelv

HTML nyelv. Á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 >

chelsea-roth
Download Presentation

HTML nyelv

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 • < &lt; • > &gt; • & &amp; • ó &oacute; • Ó &Oacute; • ö &ocirc; • ő &otilde; • szóköz &nbsp;

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

  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>Negyedikszintű 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 <td> 2. cella <tr> 2. sor <td> 1. cella <td> 2. 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ízszintesrowspan=„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=„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>

More Related