Sesuai dengan judul kita akan sedikit membahas tentang struktur HTML. Sebelum kita bercerita lebih jauh tentang sturktur HTML, ada baiknya kalau kita mengetahui apa itu HTML. HTML adalah kependekan dari HyperText Markup Language yaitu bahasa pemrograman standart yang digunakan untuk membuat halaman web.
Donga rasa pengertiannya cukup itu saja, jangan panjang-panjang biar gak bingung. Jika kita sudah mengetahui pengertian HTML tentunya kita akan mudah untuk mendefenisikan struktur HTML. Untuk pengertiannya bebas saja, yang penting kita mengerti, kalau Donga lebih suka mengartikan struktur HTML itu adalah susunan dari bahasa pemrograman agar bisa menampilkan objek di halaman web. Tapi itu defenisi pribadi lho..sob, kalau ada yang kurang silahkan ditambahkan.
Untuk lebih memahami struktur HTML ini marilah kita kita lihat bagian-bagian dari HTML satu persatu.
Struktur Dasar HTML
<html>
<head> ... </head>
<body>
...
</body>
</html>
Dari struktur dasar ini, kita akan mengenal bagian-bagian dari HTML.
1. Tag
Adalah kode html yang ditulis dengan tanda "<" sebagai awal kode dan ditutup dengan ">" sebagai akhir kode.
Contoh tag pada struktur HTML diatas adalah :
<html>
<head>
<body>
Tag terdiri dari dua bagian : Tag_Pembuka dan Tag_Penutup.
Konsep Tag
<tag_pembuka> ... </tag_penutup>
//untuk tag_penutup ditandai dengan tanda "/" sebelum nama tag.
Contoh Tag secara lenkap :
<html> ... </html>
<head> ... </head>
<body> ... </body>
Catatan : html, head, dan body adalah nama tag
Namun perlu di ingat bahwa ada jenis tag yang tidak memiliki tag penutup yaitu tag img (image)
Konsep Tag Tanpa Tag Penutup
<tag/>
Contoh :
<img /> atau lebih lengkapnya <img src="http://www.klikdonga.blogspot.co.id" />
2. Element
Adalah semua yang terdapat pada kode mulai dari <tag_pembuka> sampai <tag_penutup>.
Contoh :
<html> ... </html>
ini adalah contoh element html, mengapa dikatakan element html? Karena nama dari tag pembuka dan tag penutupnya adalah html. Tetapi istilah yang sering digunakan untuk element <html> ...</html> ini adalah, element root karena mengandung seluruh element. Sedangkan seluruh element yang ada didalamnya adalah element leaf.
Lalu Bagaimana dengan kode berikut ini ?
<head> ... </head>
<body> ... </body>
Kode pertama adalah element head,
Kode kedua adalah element body.
Konsep Element :
<h1> ... </h1>
contoh di atas adalah element header ditandai dengan <h1> ... </h1> dengan content/isi element "..."
Contoh Lengkap
<h1> Selamat Datang </h1>
ini adalah element header yang memiliki content/isi elemen "Selamat Datang"
3. Attribute
Adalah bagian yang berfungsi melengkapi tampilan dari sebuah element.
Contoh :
<p align="left" >Selamat Datang</p>
contoh di atas adalah element paragraf ditandai dengan <p> ... </p>. Tulisan yang berwarna merah adalah "attribute". attribut ini bernama "align" yang akan menempatkan tulisan "Selamat Datang"di sebelah kiri jika web browser di jalankan. Sedangkan kata "left" adalah "value" dari element paragraf tersebut.
Contoh lain :
<a href="www.klikdonga.blogspot.co.id"> Klik Disini </a>
element <a> ... </a> adalah element yang bernama "anchor link", sedangkan "href" adalah attribute dari element anchor. Sedangkan "www.klikdonga.blogspot.co.id" adalah nilai atau value dari attribute "href". untuk tulisan "Klik Disini" adalah isi dari element anchor jadi secara garis besar, element ini berfungsi untuk menghubungkan satu halaman web dengan halaman web lain.
Untuk mengetahui lebih banyak bermacam-macam attribute html, Sobat bisa mengunjungi Alamat ini : https://www.w3schools.com/html/html_attributes.asp
4. Event
Istilah lain yang perlu kita ketahui pada struktur html adalah event. Menurut Donga kita tidak hanya harus tahu, tapi harus mengerti perbedaan antara attribute dan event. Jika kita tinjau dari pengertian attribute, sebenarnya event termasuk sebuah attribute dari element html, karena bagian dari pelengkap element. Tetapi jika kita tinjau dari fungsinya, maka attribute dan event akan berbeda.
Attribute berfungsi untuk merubah tampilan dari element pada struktur html. Sedangkan event berfungsi untuk reaksi jika dilakukan sebuah tindakan terhadap element html tesebut. Biasanya event erat kaitannya dengan fungsi Javascript.
Contoh event :
<button onclick="myFunction()">Klik Disini</button>
Element di atas adalah element button ditandai dengan <button> ... </button>. Text berwarna merah adalah sebuah event yang diberi nama onclick dan memiliki value "myFunction()". Sedangkan isi dari element adalah "Klik Disni". Secara umum element ini dibuat agar sebuah tombol akan memberikan suatu reaksi, jika tombol tersebun mendapatkan tindakan berupa "klik" satu kali dari mouse. Sebagai contoh silahkan Sobat klik tombol di bawah ini.
Untuk contoh yang lebih banyak mengenai event ini, silahkan sobat kunjungi
https://www.w3schools.com/tags/ref_eventattributes.asp
Oke ... itu saja catatan Donga kali ini, mudah-mudahan ada manfaatnya. Untuk pengembangan lebih lanjut, dipersilahkan Sobat sekalian berkreasi sendiri, jika ada masalah boleh menghubungi Donga. Jika bisa dibantu Insya Allah akan Donga bantu. Jangan lupa, kritik dan saran membangun silahkan tinggalkan di kolom komentar agar kita bisa saling menerangi, karena ilmu itu ibarat cahaya, semakin banyak kita bagikan, maka akan semakin terang di sekitar kita.
Donga rasa pengertiannya cukup itu saja, jangan panjang-panjang biar gak bingung. Jika kita sudah mengetahui pengertian HTML tentunya kita akan mudah untuk mendefenisikan struktur HTML. Untuk pengertiannya bebas saja, yang penting kita mengerti, kalau Donga lebih suka mengartikan struktur HTML itu adalah susunan dari bahasa pemrograman agar bisa menampilkan objek di halaman web. Tapi itu defenisi pribadi lho..sob, kalau ada yang kurang silahkan ditambahkan.
Untuk lebih memahami struktur HTML ini marilah kita kita lihat bagian-bagian dari HTML satu persatu.
Struktur Dasar HTML
<html>
<head> ... </head>
<body>
...
</body>
</html>
Dari struktur dasar ini, kita akan mengenal bagian-bagian dari HTML.
1. Tag
Adalah kode html yang ditulis dengan tanda "<" sebagai awal kode dan ditutup dengan ">" sebagai akhir kode.
Contoh tag pada struktur HTML diatas adalah :
<html>
<head>
<body>
Tag terdiri dari dua bagian : Tag_Pembuka dan Tag_Penutup.
Konsep Tag
<tag_pembuka> ... </tag_penutup>
//untuk tag_penutup ditandai dengan tanda "/" sebelum nama tag.
Contoh Tag secara lenkap :
<html> ... </html>
<head> ... </head>
<body> ... </body>
Catatan : html, head, dan body adalah nama tag
Namun perlu di ingat bahwa ada jenis tag yang tidak memiliki tag penutup yaitu tag img (image)
Konsep Tag Tanpa Tag Penutup
<tag/>
Contoh :
<img /> atau lebih lengkapnya <img src="http://www.klikdonga.blogspot.co.id" />
2. Element
Adalah semua yang terdapat pada kode mulai dari <tag_pembuka> sampai <tag_penutup>.
Contoh :
<html> ... </html>
ini adalah contoh element html, mengapa dikatakan element html? Karena nama dari tag pembuka dan tag penutupnya adalah html. Tetapi istilah yang sering digunakan untuk element <html> ...</html> ini adalah, element root karena mengandung seluruh element. Sedangkan seluruh element yang ada didalamnya adalah element leaf.
Lalu Bagaimana dengan kode berikut ini ?
<head> ... </head>
<body> ... </body>
Kode pertama adalah element head,
Kode kedua adalah element body.
Konsep Element :
<h1> ... </h1>
contoh di atas adalah element header ditandai dengan <h1> ... </h1> dengan content/isi element "..."
Contoh Lengkap
<h1> Selamat Datang </h1>
ini adalah element header yang memiliki content/isi elemen "Selamat Datang"
3. Attribute
Adalah bagian yang berfungsi melengkapi tampilan dari sebuah element.
Contoh :
<p align="left" >Selamat Datang</p>
contoh di atas adalah element paragraf ditandai dengan <p> ... </p>. Tulisan yang berwarna merah adalah "attribute". attribut ini bernama "align" yang akan menempatkan tulisan "Selamat Datang"di sebelah kiri jika web browser di jalankan. Sedangkan kata "left" adalah "value" dari element paragraf tersebut.
Contoh lain :
<a href="www.klikdonga.blogspot.co.id"> Klik Disini </a>
element <a> ... </a> adalah element yang bernama "anchor link", sedangkan "href" adalah attribute dari element anchor. Sedangkan "www.klikdonga.blogspot.co.id" adalah nilai atau value dari attribute "href". untuk tulisan "Klik Disini" adalah isi dari element anchor jadi secara garis besar, element ini berfungsi untuk menghubungkan satu halaman web dengan halaman web lain.
Untuk mengetahui lebih banyak bermacam-macam attribute html, Sobat bisa mengunjungi Alamat ini : https://www.w3schools.com/html/html_attributes.asp
4. Event
Istilah lain yang perlu kita ketahui pada struktur html adalah event. Menurut Donga kita tidak hanya harus tahu, tapi harus mengerti perbedaan antara attribute dan event. Jika kita tinjau dari pengertian attribute, sebenarnya event termasuk sebuah attribute dari element html, karena bagian dari pelengkap element. Tetapi jika kita tinjau dari fungsinya, maka attribute dan event akan berbeda.
Attribute berfungsi untuk merubah tampilan dari element pada struktur html. Sedangkan event berfungsi untuk reaksi jika dilakukan sebuah tindakan terhadap element html tesebut. Biasanya event erat kaitannya dengan fungsi Javascript.
Contoh event :
<button onclick="myFunction()">Klik Disini</button>
Element di atas adalah element button ditandai dengan <button> ... </button>. Text berwarna merah adalah sebuah event yang diberi nama onclick dan memiliki value "myFunction()". Sedangkan isi dari element adalah "Klik Disni". Secara umum element ini dibuat agar sebuah tombol akan memberikan suatu reaksi, jika tombol tersebun mendapatkan tindakan berupa "klik" satu kali dari mouse. Sebagai contoh silahkan Sobat klik tombol di bawah ini.
Untuk contoh yang lebih banyak mengenai event ini, silahkan sobat kunjungi
https://www.w3schools.com/tags/ref_eventattributes.asp
Oke ... itu saja catatan Donga kali ini, mudah-mudahan ada manfaatnya. Untuk pengembangan lebih lanjut, dipersilahkan Sobat sekalian berkreasi sendiri, jika ada masalah boleh menghubungi Donga. Jika bisa dibantu Insya Allah akan Donga bantu. Jangan lupa, kritik dan saran membangun silahkan tinggalkan di kolom komentar agar kita bisa saling menerangi, karena ilmu itu ibarat cahaya, semakin banyak kita bagikan, maka akan semakin terang di sekitar kita.
Tidak ada komentar:
Tulis komentar