Scribd Logo
Unggah

Selamat datang di Scribd!

  • 15 Tag HTML Yang Tidak Memiliki Pasangan Penutup

    Diunggah oleh

    Diah Yulia Citra
    12 tayangan6 halaman

    Judul Asli

    15 Tag HTML yang tidak Memiliki Pasangan Penutup

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    12 tayangan6 halaman

    15 Tag HTML Yang Tidak Memiliki Pasangan Penutup

    Diunggah oleh

    Diah Yulia Citra

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 6

    15 Tag HTML yang tidak Memiliki

    Pasangan Penutup
    # HTML # HTML5

    Sebuah elemen dalam HTML terdiri dari tag pembuka dan tag penutup. Namun, ada juga
    yang tidak memiliki tag penutup.

    Kasihan juga ya, hehe

    Meskipun demikian, elemen ini tetap valid dan dapat dibaca browser. Elemen yang tidak
    memiliki tag penutup ini juga disebut void element, karena tidak memiliki isi.

    Apa saja tag-tag yang tidak memiliki penutup itu?

    mari kita simak…

    1. Tag <area>
    Tag <area> fungsinya untuk mendefinisikan area pada image map. Image map merupakan
    sebuah gambar yang memiliki area yang bisa diklik. Tag <area> selalu berada di dalam tag
    <map>.

    Contoh:

    <img src="https://www.w3schools.com/tags/planets.gif" width="145"


    height="126" alt="Planets" usemap="#planetmap">

    <map name="planetmap">
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
    <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
    <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
    </map>

    Demo dapat dilihat di: w3schools.com

    2. Tag <base>
    Tag <base> fungsinya untuk membuat base URL dan target untuk sebuah link relatif. Contoh
    penggunaanya:

    <!DOCTYPE html>
    <html>
    <head>
    <base href="https://www.w3schools.com/images/" target="_blank">
    </head>
    <body>

    <p><img src="stickman.gif" width="24" height="39" alt="Stickman"> - Notice


    that we have only specified a relative address for the image. Since we have
    specified a base URL in the head section, the browser will look for the
    image at "https://www.w3schools.com/images/stickman.gif".</p>

    <p><a href="https://www.w3schools.com">W3Schools</a> - Notice that the link


    opens in a new window, even if it has no target="_blank" attribute. This is
    because the target attribute of the base element is set to "_blank".</p>

    </body>
    </html>

    Perhatikanlah contoh di atas, gambar stickman.gif akan dicari pada alamat base URL yang
    diberikan pada tag <base>. Kemudian, link W3Schools akan dibuka pada jendela baru,
    karena pada tag <base> sudah ditentukan targetnya.

    Demo: http://jsbin.com/muhawoqifi/edit?html,output

    3. Tag <br>
    Tag ini fungsinya untuk membuat baris baru. Contoh penggunaanya:

    <p>
    Langit seolah-olah menangis.<br>
    Hujan waktu itu sangat berkesan.
    </p>

    hasilnya:

    Langit seolah-olah menangis.


    Hujan waktu itu sangat berkesan.

    4. Tag <col>
    Tag <col> fungsinya untuk memberikan atribut untuk kolom pada tabel. Tag ini ditulis dalam
    tag <colgroup>. Dengan tag <col> ini, kita tidak harus membuat attribut untuk setiap sel
    tabel (<td>), karena sudah terwakili olehnya.

    Contoh penggunaan:

    <table>
    <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
    </colgroup>
    <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
    </tr>
    <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
    </tr>
    <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
    </tr>
    </table>

    Demo hasilnya: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_col_test

    5. Tag <embed>
    Tag <embed> fungsinya untuk membuat container untuk aplikasi eksternal atau konten
    interaktif seperti animasi flash.

    Contoh penggunaan:

    <!DOCTYPE html>
    <html>
    <body>

    <embed src="helloworld.swf">

    </body>
    </html>

    Demo: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_embed

    6. Tag <hr>
    Tag <hr> fungsinya untuk membuat garis horizontal (horizontal row). Contoh penggunaanya:

    <h4>Waktu itu...</h4>
    <hr>
    <p>Tak kusangka, hari itu bakal menjadi hari terakhirku berjumpa
    denganmu</p>

    Hasilnya:

    Waktu itu...

    Tak kusangka, hari itu bakal menjadi hari terakhirku berjumpa denganmu

    7. Tag <img>
    Tag yang satu ini pasti sudah banyak yang tahu fungsinya. Yap… benar sekali. fungsinya
    untuk menampilkan gambar.
    Contoh penggunaan:

    <img src="foto-si-doi.jpg">

    8. Tag <input>
    Tag <input> fungsinya untuk membuat elemen input pada form. Tag ini memiliki atribut
    type yang akan menentukan jenis inputannya.

    Contoh:

    <form action="proses.php" method="POST">


    <input type="text" name="username" placeholder="Username">
    <input type="password" name="password" placeholder="Password">
    <input type="submit" value="Masuk">
    </form>

    9. Tag <keygen>
    Tag <keygen> fungsinya untuk membuat kunci rahasia pada form. Tag ini digunakan untuk
    keamanan.

    Contoh penggunaan:

    <form action="/action_page.php" method="get">


    Username: <input type="text" name="usr_name">
    Encryption: <keygen name="security">
    <input type="submit">
    </form>

    10. Tag <link>


    Tag <link> digunakan untuk mendefinisikan hubungan antara dokumen HTML dengan
    resource eksternal seperti CSS. Tag ini juga bisa digunakan untuk membuat favicon.

    Contoh penggunaan:

    <head>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="icon" href="favicon.png">
    </head>

    11. Tag <meta>


    Tag <meta> digunakan untuk mendefinisikan Metadata sebuah halaman web. Metadata tidak
    akan ditampilkan pada halaman web, melainkan akan dibaca oleh mesin atau Bot (robot).
    Contohnya, data yang akan tampil pada mesin pencari.
    Tag <meta> ini penting untuk SEO (search engine optimization). Jadi, kalau membuat web
    tanpa menggunakan tag <meta>, kemungkinan akan sulit terindeks oleh mesin pencari.

    Contoh penggunaan tag <meta>:

    <head>
    <meta charset="UTF-8">
    <meta name="description" content="Web Programmer pengguna Linux">
    <meta name="keywords" content="Programmer,Linux,Petanikode,Petani Kode">
    <meta name="author" content="Petani Kode">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    12. Tag <param>


    Tag <param> digunakan untuk memberikan parameter kepada plug-in yang di-embed
    menggunakan elemen <object>.

    Contoh:

    <object data="horse.wav">
    <param name="autoplay" value="true">
    </object>

    Hasilnya: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_param

    13. Tag <source>


    Tag <source> digunakan untuk mendefinisikan sumber file media untuk <audio> dan
    <video>.

    Contoh:
    <audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    Browser anda tidak mendukung elemen audio.
    </audio>

    Demo: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_source_src

    14. Tag <track>


    Tag <track> digunakan untuk mendefinisikan taks untuk elemen media (<audio> dan
    <video>). Bisa dalam bentuk subtitle, caption, dan teks lainnya.

    Contoh penggunaan:

    <video width="320" height="240" controls>


    <source src="forrest_gump.mp4" type="video/mp4">
    <source src="forrest_gump.ogg" type="video/ogg">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en"
    label="English">
    <track src="subtitles_no.vtt" kind="subtitles" srclang="no"
    label="Norwegian">
    </video>

    15. Tag <wbr>


    WBR merupakan singkatan dari Word Break Opportunity. Tag ini hampir mirip dengan tag
    <br>. Bedanya, tag ini tidak langsung membuat baris baru seperti <br>.

    Tag ini akan membuat baris baru saat tidak ada lagi ruang di samping.

    Contoh penggunaan:

    <p>
    To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request
    Object.
    </p>

    Maka nanti, kalau ukuran layarnya dipersempit, teks akan ditampilkan sperti ini:

    To learn AJAX, you must be familiar with the XML


    Http
    Request Object.

    Anda mungkin juga menyukai