Scribd Logo
Upload

Welcome to Scribd!

  • Webszerkesztes Tagek

    Uploaded by

    Kriszta
    16 views3 pages
    Webszerkesztes-tagek

    Original Title

    Webszerkesztes-tagek

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Webszerkesztes-tagek

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    16 views3 pages

    Webszerkesztes Tagek

    Uploaded by

    Kriszta
    Webszerkesztes-tagek

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 3

    A HTML dokumentumok szerkezete

    A szabványos HTML dokumentum egy DOCTYPE paranccsal kezdődik, mely megadja azt a dokumentumtípus-
    definíciót (DTD), amelynek a dokumentum megfelel.

    <!DOCTYPE html>
    <head>
    <meta charset="UTF-8">
    <title></title> fejrész
    </head>
    <body>
    .
    . dokumentumtörzs
    .
    </body>
    </html>

    Alkalmazható strict, transitional és frameset dokumentumtípus is:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    A dokumentum törzsben gyakran előforduló HTML tagek (elemek, címkék)


    Tagek általános formája

    páros tagek

    <tag attribútum="érték" attribútum2="érték" ...> ... </tag>

    <a href="http://mmi.elte.hu" target="_blank">Az ELTE MMI honlapja</a>

    páratlan tagek
    <tag attribútum="érték" attribútum2="érték" ... >

    <img src="img/logo.jpg" alt="MMI logó" >

    Szövegmegjelenítés
    <h1>szöveg</h1> címsor
    további címsorok: <h2>,<h3>,<h4>,<h5>,<h6> ahol a <h1>
    jelenti a legnagyobb mértékű kiemelést.

    <p>szöveg</p> bekezdés

    <br> sortörés

    <b>szöveg</b> betűstílusok félkövér <b>


    <i>szöveg</i> dőlt <i>
    <u>szöveg</u> aláhúzott <u>

    Felsorolás
    <ul>
    <li>piros</li>  piros Az <ul> parancs tartalmazhat
    újabb <ul> parancsot, amivel így
    <li>sárga</li>  sárga több szintű felsorolás készíthető.
    <li>zöld</li>  zöld
    </ul>
    Számozás
    <ol> Az <ol> parancs tartalmazhat
    <li>piros</li> 1. piros
    2. sárga újabb <ol> parancsot, amivel így
    <li>sárga</li> több szintű felsorolás készíthető.
    <li>zöld</li> 3. töld
    </ol>

    Kép
    1. <img src="elte.jpg" alt="ELTE logó">
    2. <img src="images/elte.jpg" alt="ELTE logó">
    3. <img src="images/elte.jpg" alt="ELTE logó" title="ELTE logó">
    4. <img src="elte.jpg" height="640" width="480" alt="ELTE logó">
    5. <img src="elte.jpg" height="100" alt="ELTE logó">
    1. Az elte.jpg képfájl megjelenítése. Az alt attribútumnál megadott szöveg jelenik meg a kép helyén, ha a böngésző valamilyen okból
    (lassú internetkapcsolat, hibás kód) nem tudja megjeleníteni a képet. A képernyőolvasó szoftverek is ezt a szöveget használják.
    2. Az images mappában található elte.jpg képfájl megjelenítése.
    3. A title attribútumnál megadott szöveg extra információt ad a képről, ha az egér mutatója a kép fölött áll.
    4. Az elte.jpg képfájl megjelenítése 640 pixel szélességben (width) és 480 pixel magasságban (height). Ha a kép pixelmérete kisebb a
    beállított értéknél, az attribútum felnagyítja, ha nagyobb, lekicsinyíti az eredeti képet. Ez a méretezés csak a megjelenített méretekre
    vonatkozik, a fájlmérete nem fog változni!
    5. Az elte.jpg képfájl megjelenítése 100 pixel magassággal. Ebben az esetben a kép szélessége arányosan változik.

    Link
    1. <a href="http://emc.elte.hu">ELTE</a>
    2. <a href="images/elte_foep.jpg" target="_blank">Az ELTE Főépülete</a>
    3. <a href="index.html">Vissza a főoldalra!</a>
    4. <a href="mailto:posta@emc.elte.hu">Írj nekünk!</a>
    5. <a href="elte_logo.jpg"><img src="elte_logo_kicsi.jpg" alt="ELTE-logo" /></a>
    6. <a href="#fejezet2">ugrás a 2. fejezetre</a>
    1. Az "ELTE" linkre kattintva, az emc.elte.hu weboldal nyílik meg, azonos böngészőablakban mint, amiben a link található.
    2. "Az ELTE Főépülete" linkre kattintva, új ablakban (target="_blank") nyílik meg az images mappában lévő elte_foep.jpg képfájl.
    3. A "Vissza a főoldalra!" linkre kattintva, az index.html oldal nyílik meg.
    4. Az "Írj nekünk!" linkre kattintva, elindul az alapértelmezett levelezőprogram, majd új levelet nyit a posta@emc.elte.hu cím beillesztésével.
    5. Az elte_logo_kicsi.jpg képre kattintva, a böngésző a megnyitja az elte_logo.jpg képfájlt.
    6. A "fejezet2" érték lehetővé teszi, hogy az id attribútummal megjelölt HTML tag (pl. <p id="fejezet2">) az előtte lévő tartalom
    átugrásával, azonnal elérhető legyen. Érékként használható útvonal- és fájlmegjelölés is, pl.:
    <a href="doc/bevezeto.html#fejezet2">ugrás a bevezető 2. fejezetre</a>

    Táblázat
    <table width="250" cellpadding="0" cellspacing="0" border="1">
    <tr>
    <td>1.sor, 1. cella</td>
    <td>1.sor, 2. cella</td> 1.sor, 1. cella 1.sor, 2. cella
    </tr> 2.sor, 1. cella 2.sor, 2. cella
    <tr>
    <td>2.sor, 1. cella</td> böngészőn megjelenítve
    <td>2.sor, 2. cella</td>
    </tr>
    </table>

    250 pixel széles táblázat, melynek celláiban nincs belső margó (cellpadding) beállítva, nincs a cellák között
    távolság (cellspacing), és látható a szegélye (border).

    <tr>...</tr> táblázatsor
    <td>...</td> adatcella
    <td colspan="2">...</td> egyesített cellák száma
    <td rowspan="2">...</td> egyesített sorok száma
    Példák táblázatos megjelenítésre

    <table width="250" cellpadding="5" cellspacing="0" border="1">


    <tr> Név Telefon
    <td>Név</td>
    <td colspan="2">Telefon</td> Rendőrség 107 112
    </tr>
    <tr>
    <td>Rendőrség</td> böngészőn megjelenítve
    <td>107</td>
    <td>112</td>
    </tr>
    </table>

    <table width="250" cellpadding="5" cellspacing="0" border="1">


    <tr> Név Rendőrség
    <td>Név</td>
    <td>Rendőrség</td> 107
    </tr> Telefon
    <tr>
    112
    <td rowspan="2">Telefon</td>
    <td>107</td>
    </tr> böngészőn megjelenítve
    <tr>
    <td>112</td>
    </tr>
    </table>

    Egyéb

    <!-- Megjegyzés --> Tetszőleges szöveg megjelenítése a


    HTML kódban
    A <!-- és --> jelek között lévő szöveg csak a
    forráskódban jelenik meg, a böngésző nem
    fogja megjeleníteni.

    <!-- <a href="index.html">Vissza a főoldalra!</a> --> Ezzel a megoldással szoktak tageket törlés
    nélkül inaktiválni.

    Egyedi karakterek

    &nbsp; &lt; &gt; &quot; &amp; &copy;


    (nem-törhető) szóköz < > " & ©

    ajánlott irodalmak és források: http://www.w3schools.com  http://www.w3.org/  http://weblabor.hu/  http://hu.wikipedia.org/wiki/HTML


    Robert W. Sebesta: A World Wide Web programozása (Panem Kiadó, Budapest 2005)

    You might also like