1 / 24

HTML nyelv Óbudai egyetem 2011 ősz

HTML nyelv Óbudai egyetem 2011 ősz. Általános jellemzés. Hiper-Text Markup Language leíró nyelvtan normál szövegfájl HTML szerkesztő programok .html , .htm kiterjesztés index.html. Általános jellemzés. utasítások – „ tag ”-ek: < tag > Nyitó és záró tag (pl.: <td> , </td>)

shannon-dominguez
Download Presentation

HTML nyelv Óbudai egyetem 2011 ősz

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Óbudai egyetem2011 ősz

  2. Általános jellemzés • Hiper-Text Markup Language • leíró nyelvtan • normál szövegfájl • HTML szerkesztő programok • .html , .htm kiterjesztés • 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,…) • elérési út (pl.: ../mappa/nev.jpg) • színkód • RGB – hexadecimális formátum: #rrggbb (pl.:fekete=#000000)

  4. Szintaxis <HTML> …első tag <HEAD> …fejléc <TITLE>cím</TITLE> …dokumentumcím </HEAD> <BODY> …törzs . . . </BODY> </HTML> …lezáró tag-ek

  5. A HTML dokumentum fejléce • A böngésző nem jeleníti meg, meta-információ • Kivétel: <TITLE>dokumentum címe</TITLE> • karakterkészlet<META http-equiv=content-typecontent=text/html; charset=iso-8859-1> • alkotó<META content="Szerkeszt Elek" name=author> • kulcsszavak a keresőmotoroknak<META content="állat, madár, papagáj" name=keywords> • szkriptek (java, php, …) <SCRIPT> </SCRIPT>

  6. A HTML dokumentum szövegteste • <BODY> tartalmi 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="4" color="#ff02e7"> • bekezdés <div align="center">szöveg</div>

  7. A HTML dokumentum szövegteste • bekezdés <p> illetve <br> • 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">

  8. Karakter formázás • <font …>szöveg</font> • <font color="#FF3333"size="1">kicsi piros</font> • <font face="Arial CE"size="7">ARIAL CE</font> • <b>félkövér</b> • <i>dőlt</i> • <u>aláhúzott</u>

  9. Karakter formázás • <s>áthúzott</s> • <cite>idézet</cite> • <em>kiemelt</em> • <strong>kiemelés</strong> • <big>nagyméretű</big> • <small>kisméretű</small> • <sub>alsó index</sub> • <sup>felső index</sup> • <blink>villogó</blink>

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

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

  12. Felsorolás <ul>felsorolás kezdete <li>szöveg első sor <li>szöveg második sor <ul><li>szöveg második szintű felsorolás</ul> felsorolás vége </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">saját felsorolás elem beállítása <li> -nek nincs záró tag-je!

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

  14. Képek • aktuális szövegpozícióban:<img src="elérési_út/fájlnév.kit"> • blokkban pozicionálva:<img align="hely" src="fájlnév" hspace="vszám" vspace="fszám" width="szméret" height="mmeret" alt="szöveg">

  15. 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!

  16. Táblázat <table> táblázat <tr> 1. sor <td></td> 1. cella <td></td> 2. cella </tr> 1. sor lezárása <tr> 2. sor <td></td> 1. cella <td></td> 2. cella </tr> 2. sor lezárása </table> táblázat vége

  17. Táblázat • minden sorban azonos számú cella<table border="szám" align="hely" cellpadding="szám"  cellspacing="szá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

  18. HTML kódszerkesztők Html-mankó (Editor2Web) Notepad++

  19. HTML szerkesztők WYSIWYG, a „What You See Is What You Get”, azaz  „amit látsz, azt kapod” NVU Dreamweaver FrontPage

  20. Kiegészítés CSS használata - http://www.csszengarden.com/tr/magyar/

More Related