A HTML nyelv fogalma, felépítése, szintaktikája
  1. HTML nyelv fogalma: HTML (HyperText Markup Language) -> HiperSzöveges JelölőNyelv. Ezt a jelölőnyelvet használják arra, hogy a weboldalak külső megjelenési formáját, tartalmát leírják. Nem programozási nyelv!

  2. Felépítése: a nyelv alapvetően címkékből (tag-ek) épül fel.
    A címkéknek két típusa van:
    1. páros címke: rendelkezik nyitó- és zárócímkével. Például: <html>... </html>
    2. páratlan címke: elmarad a zárócímke, pontosabban fogalmazva a nyitó- és a zárórész egyetlen formulába van sűrítve. Például: <br/>

  3. Szintaktikája: egy általános HTML címke felépítése:

    ahol a tul1, tul2, tuln a címke tulajdonságainak felsorolásást jelenti .

  4. Weboldal általános szerekezeti felépítése:
    Egy weboldal alapvetően két szerkezeti egységből áll, amelyet a <html> ... </html> címkék közé zárunk.
    A két egység a következő:
    1. fejrész, mely a <head> ... </head> tagek között áll. Ezek az elemek valójában nem látszanak a böngészőnk ablakában, viszont nagyon fontos információs szereppel bírnak a weboldal megjelenése, besorolása, rangsorolása szempontjából.
    2. törzsrész, mely a <body> ... </body> tagek között áll. Valójában ez a rész látható a böngésző ablakban.
    Minta:
    forráskód böngészőbeli eredmény
  5. Weboldal forráskódjának szerkesztése egyszerű szövegszerkesztő alkalmazásban:
    Egy weboldal elkészítéséhez nincs szükségünk bonyolult webszerkesztő programra, elegendő egy nagyon egyszerű dokumentumszerkesztő alkalmazás, mint például a WordPad, vagy a Jegyzettömb.
    Ne használd az MS Word-öt, mivel a fájl mentésekor olyan - számodra nem látható! - elemekkel is kiegészíti a html oldalt, amely nemkívánatos a megjelenéskor!

    A weboldal mentésekor két alapvető szabályt kell alkalmaznod:
    1. a fájlt .htm vagy .html kiterjesztéssel mentsd!
    2. a fájl típusa: egyszerű szöveg

  6. A legfontosabb HTML címkék összefoglaló táblázata:
  7. CímkeLeírás
    <html> .. </html> html oldal
    <head> .. </head> fejrész
    <body> .. </body> törzsrész
    <p>Bekezdés</p> bekezdés (paragraph)
    <h1>Címsor 1</h1> Egyes szintű címsor (heading)
    <h6>Címsor 6</h6> Hatos szintű címsor (heading). A közbenső szintek értelemszerűen: <h2>..</h2> <h3>..</h3>, <h4>..</h4> <h5>..</h5>
    <br/> újsor
    <i>szöveg</i> dőlt (italic) kiemelés
    <b>szöveg</b> félkövér (bold) kiemelés
    <strong>szöveg</strong> fontos, (erősen kiemelt) szöveg. Nagy különbséget nem látni az előzőhöz képest.
    <img src="uri" alt="leírás" width="" height=""/> a megadott forráson (source) elérhető kép (image) beszúrása leírással (alternate), //img megadott szélességben (width), magasságban (height)
    <figure>ide illesztjük be a képet, stb.
        <figcaption>Felirat</figcaption>
    </figure>
    illusztráció (figure), felirattal (figure caption)
    <ul>
        <li>listaelem</li>
    </ul>
    felsoroláslista (unordered list), listaelemmel (list item)
    <ol>
        <li>listaelem</li>
    </ol>
    sorszámozott lista (ordered list), listaelemmel (list item)
    <a href="uri">link szövege</a> hiperhivatkozás (link) (a=anchor, href=annak az oldalnak az elérési címe, ahova a hiperhivatkozás mutat)
    <video controls width="" height="">
        <source src="mp4_videó_url"
           type="video/mp4" />
    </video>
    Videó (mp4) (video) beillesztése, vezérlő eszköztárral (controls), megadott szélességben (width), magasságban (height). A forrás elérhetőségét (source) és típusát (type) is meg kell adjuk. )
    <audio controls>
        <source src="mp3_hang_url"
           type="video/mpeg" />
    </audio>
    Hangállomány (mp3) (audio) beillesztése, vezérlő eszköztárral (controls). A forrás elérhetőségét(source) és típusát (type) is meg kell adjuk. )
    <!-- megjegyzés --> Megjegyzés (comment) elhelyezése a HTML kódban
    <table>
        <caption></caption>
            <tr>
                <th></th>
                <td></td>
            </tr>
    </table>
    Táblázat kialakítása
    • table: táblázat
    • caption: felirat
    • tr: táblázat sora (table row)
    • td: adat cella (table data)
    • th: fejléc cella (table heading)
    <style type="text/css">...</style> stíluslap, melynek típusa css/szöveg (text)
    <link rel="stylesheet" type="text/css" href="url"> külső stíluslapok meghívása a HTML oldal fej részében.
    <iframe name="keretnev" width="" height="">...</iframe> belső keret meghatározása, ahol a "keretnev" kifejezés határozza meg azt a területet, ahova a meghívás történik.
PHP Code Snippets Powered By : XYZScripts.com