Sebelum masuk tutorial, bagi kalian yang belum membaca tutorial sebelumnya, saya rekomendasikan untuk membacanya terlebih dahulu, kalian bisa klik disini untuk menuju ke artikel sebelumnya. Ok, bila sudah membacanya kita lanjut ke tutorialnya.
Pada tutorial sebelumnya kita sudah membahas tentang text editor dan juga hal yang paling dasar dari dokumen HTML. Tapi sebenarnya kita belum menggunakan tag HTML dan hanya menuliskan text pada file berekstensi .html. Nah kali ini kita benar - benar membahas dan mempelajari HTML dan mengakrapkan diri dengan hal - hal seperti tag, elemen dan atribut.
DOCTYPE
Sebelum kita belajar lebih dalam mengenai HTML, kita harus tahu apa itu
DOCTYPE. Lalu apakah itu
DOCTYPE?
DOCTYPE adalah sebuah deklarasi yang biasanya muncul pada baris paling awal pada sebuah dokumen
HTML 5. Sebenarnya secara teknis deklarasi ini tidak harus kita tulis, namun tak ada saahnya juga kita tulis, ini juga menandakan bahwa halaman yang kita buat adalah dokumen bertipe
html. Deklarasi
DOCTYPE bisa dilihat seperti ini:
DASAR HALAMAN HTML
Membuat dokumen html yang benar membutuhkan tag HTML. Tag HTML digunakan untuk mendeskripsikan dan memberi arti apa sebenarnya isi dari konten dalam tag tersebut dan juga memberi struktur pada sebuah halaman.
Mari mulai dengan dokumen HTML yang paling dasar.
Abaikan deklarasi DOCTYPE sejenak, disini kalian bisa melihat bahwa tag html menjaring/ mengapit keseluruhan dokumen. Ini memberi tahu browser "Hei, semua antara dua tag ini (<html> dan </html>) adalah dokumen html". Setelah tag html biasanya dalam sebuah website akan terdapat 2 tag lainnya yakni, tag head dan tag body.
TAG HEAD
Dalam tag head ini kalian dapat menambahkan metadata untuk mendeskripsikan halaman html kalian. Apa kegunaan metadata? Metadata yang kalian tambahkan berguna untuk browser atau mesin pencari untuk lebih memahami halaman html yang kamu buat itu tentang apa. Seperti contoh, Apa icon yang digunakan pada halaman yang kita buat, siapa yang membuat halaman, apa inti dari isi halaman, dan lainnya.
Fun Fact : ini bisa membantu SEO website kalian loh. Apa itu SEO? kita bahas dilain kesempatan saja :D.
Hal yang biasanya terdapat pada tag head adalah tag tittle, link ke file css dan javascript, dan juga metadata tadi.
Untuk mengatur judul halaman :
Untuk mengubah judul halaman kamu, tinggal ganti saja tulisan berwana putih dengan tulisan sesuai keinginanmu.
Menambah deskripsi halaman :
Menambah / mengubah icon halaman :
Mengatur penulis dari halaman :
TAG BODY
Selanjutnya adalah tag body, tag body adalah tag dimana konten kalian akan ditampilkan. Kalian bisa menaruh apapun yang kalian inginkan selama masih berada diantara tag <body> dan </body>.
Pada contoh sebelumnya diatas, kita melihat terdapat tag h1, yang merupakan singkatan dari header1. Terdapat juga tag header yang lain seperti h2, h3, h4, dan sebagainya. Cobalah membuat file contoh dibawah ini, simpan lalu buka pada browser kamu.
Menggunakan HTML memerlukan tag pembuka di awal dan tag penutup diakhir dan apapun yang berada di tengah/ diantara tag pembuka dan tag penutup adalah isi konten. Untuk membedakan tag pembuka dan tag penutup adalah tag penutup memiliki "
/" atau garis miring, sedangkan tag pembuka tidak memilikinya.
Namun, ada beberapa tag yang tidak perlu menggunakan tag penutup. Tag yang tidak memerlukan tag penutup adalah kasus dimana tidak ada konten di dalamnya.
ELEMENTS
Jadi, sekarang kamu sudah tahu apa itu tag. Jadi apa itu elemen? perbedaan antara tag dan elemen bisa kamu lihat pada kasus dibawah ini :
tag adalah title dan elemen adalah tag pembuka dan tag penutup dan juga apa yang ada didalam / diantara tag. Dengan kata lain adalah semua elemen
title.
Mudah bukan? ini akan menjadi perbedaan penting saat kamu sudah mulai bisa dengan HTML. tag adalah yang mengelilingi konten, sedangkan tag dan apa yang ada didalamnya adalah elemen.
ATRIBUT
Selain tag, HTML memiliki sebuah cara untuk membantu kamu dalam merancang konten kamu. Yuk kenalan dengan
Atribut.
Atribut mendeskripsikan tag apa yang ada didalam tag tersebut. Sintak untuk atribut sangat sederhana, coba lihat kode dibawah ini :
Dalam contoh tadi,
class adalah atribut dan
spesial adalah nilainya. Atribut mendeskripsikan tag, nah sekarang karena dalam contoh terdapat
tag h1 maka, tag h1 yang memiliki class
spesial akan berbeda dengan tag h1 yang lainnya / tag h1 yang tidak memiliki class
spesial.
Dibawah ini merupakan contoh bagaimana atribut dengan nilainya di aplikasikan dalam tag.
CLASS
Class adalah atribut penting dalam HTML karena dapat ditempatkan pada hampir semua tag di html. Nilai dari atribut ini juga dapat diulangi sebanyak yang kamu mau, misalnya seperti ini :
ID
Atribut penting lainnya yang terdapat pada html adalah
ID. pada halaman HTML yang valid, nilai dari atribut ini haruslah unik, maksudnya adalah nilai dari atribut
ID harus berbeda dari yang lain. Contohnya adalah, kamu memberi atribut
ID pada sebuah tag
h1 dengan nilai
satu, maka kamu tidak boleh menggunakan tag
h1 dengan atribut
ID yang memiliki nilai
satu. Contoh mudahnya bisa kamu lihat pada kode dibawah ini :
Nah, sekarang kamu sudah semakin familiar dengan tag, atribut, dan elemen pada HTML. Mari belajar lebih lagi pada tutorial selanjutnya ! Apabila kamu punya kritik dan saran silahkan utarakan di kolom komentar ya.
