Tutorial HTML - Pengenalan Istilah Utama Pada HTML (Bagian 2)


Pada artikel kali ini saya akan menjelaskan hal-hal yang ringan saja, yaitu mengenai unsur-unsur utama yang membentuk suatu halaman HTML. Unsur utama dari HTML ada 3 macam yaitu TAG, ATRIBUT, dan ELEMEN. Yuk kita bahas satu per satu

TAG

Pada artikel sebelumnya sudah pernah saya bahas sedikit mengenai tag ini. Tag ini biasanya terdiri dari tag pembuka dan tag penutup. Tag pembuka menunjukkan awalan dari suatu tag dimulai dan akan diakhiri dengan sebuah tag penutup. Namun tidak semua tag dalam HTML memiliki tag pembuka dan tag penutup. Ada juga tag yang hanya menggunakan tag pembuka saja.

Format penulisan tag secara umum adalah sebagai berikut

<tag pembuka>teks yang akan ditampilkan</tag penutup>

Contoh dari penggunaan tag adalah sebagai berikut :

<p> Ini contoh penulisan paragraf </p>

Tag p digunakan untuk menunjukkan bahwa anda sedang menulisan suatu paragraf. Bedanya dengan tulisan yang tanpa menggunakan tag p adalah jika anda menuliskan sesuatu di dalam tag p maka browser akan menambahkan margin atas dan bawah secara otomatis yang nantinya bisa anda atur ukurannya dengan menggunakan CSS

Penjelasan mengenai penggunaan CSS akan saya jelaskan pada artikel tutorial yang selanjutnya ya :). 

Sedangkan contoh untuk tag-tag yang hanya menggunakan tag pembuka saja adalah sebagai berikut
  • <br> digunakan untuk membuat line break (seperti ketika anda menekan tombol enter)
  • <hr> digunakan untuk membuat satu garis
  • <img> digunakan untuk menampilkan suatu gambar (image)


ATRIBUT

Unsur kedua adalah atribut. Atribut adalah pelengkap dari sebuah tag. Format penulisan atribut adalah sebagai berikut :

<tag pembuka nama atribut = "isi atribut">.....</tag penutup>

Suatu atribut ditulis di dalam tag pembuka dan dalam 1 tag pembuka bisa memiliki beberapa atribut sekaligus. Contoh dari penggunaan atribut adalah sebagai berikut :

<img src="a.jpg" alt="ini gambar kucing">

Seperti yang kita tahu, tag img digunakan untuk menampilkan suatu gambar. Namun tanpa atribut apapun tentu saja tidak akan ada gambar yang ditampilkan. Pada contoh di atas, saya menggunakan atribut src yang berfungsi untuk menunjukkan file gambar yang akan ditampikan yaitu "a.jpg" dan juga atribut alt. Atribut alt ini digunakan jika gambar a.jpg yang anda ingin tampilkan tadi tidak dapat ditampilkan oleh browser (misal koneksi internet lambat atau gambar a.jpg tidak tersedia) maka browser akan menampilkan tulisan "ini gambar kucing" sebagai ganti gambar a.jpg yang gagal ditampilkan.



ELEMEN

Unsur terakhir adalah elemen. Elemen adalah 1 kesatuan mulai dari tag pembuka sampai dengan tag penutup. Jadi misalnya ada contoh kode seperti berikut ini 

<html>
    <head>
        <meta charset="UTF-8">
        <title>Title of the document</title>
    </head>
    <body>
        <p> ini paragraf 1 </p>
        <br>
        <img src = "a.jpg">
    </body>
</html>

Pada contoh di atas di dalam satu elemen html terdapat berbagai macam elemen yaitu head, meta, title, body, dll.

Sedangkan di dalam elemen head terdapat elemen meta dan title.


Sekian dulu penjelasan saya mengenai unsur-unsur html ini. Semoga penjelasan pada artikel ini dapat mudah dimengerti :). Jika ada yang mau ditanyakan berkaitan dengan penjelasan pada artikel ini, anda dapat menggunakan kolom komentar di bawah. Biasanya saya akan menjawab semua pertanyaan yang ada. Pada artikel tutorial bagian 3 nanti baru akan saya mulai cara penulisan kode-kode di html. Terima kasih.
Tutorial HTML - Pengenalan Istilah Utama Pada HTML (Bagian 2) Tutorial HTML - Pengenalan Istilah Utama Pada HTML (Bagian 2) Reviewed by Donny Winarto on January 12, 2020 Rating: 5

1 comment:

  1. Your Affiliate Money Printing Machine is waiting -

    Plus, making money with it is as simple as 1 . 2 . 3!

    Here is how it works...

    STEP 1. Tell the system which affiliate products you want to push
    STEP 2. Add PUSH button traffic (this LITERALLY takes 2 minutes)
    STEP 3. See how the system explode your list and upsell your affiliate products all on it's own!

    Are you ready to make money automatically???

    The solution is right here

    ReplyDelete

Powered by Blogger.