Oke sebelumnya Anda sudah praktekkan menulis tag - tag HTML menggunakan HTML Editor. Nah sekarang Anda akan saya kenalkan dengan dasar - dasar HTML. Jangan kuatir kalau ada tag - tag HTML yang belum Anda pelajari sebelumnya karena saya akan bahas mendetail di tutorial selanjutnya. Disini saya hanya akan mengenalkan secuil saja kok untuk permulaan.
HTML Document
Setiap kali Anda membuat dokumen atau file HTML, maka ada beberapa tag yang harus ada pada dokumen Anda karena tag - tag HTML ini merupakan tag dasar yang menjadi bagian dari struktur HTML. Tag - tag HTML tersebut adalah <!DOCTYPE html>, <html>, <head> dan <body>.
Mungkin muncul pertanyaan dari Anda bagaimana jika salah satu tag HTML tersebut tidak disertakan?
Oke,
Sebelum menjawab pertanyaan tersebut, ayo kita simak dulu penjelasan dari masing - masing tag HTML tersebut satu per satu.
Perlu Anda ingat bahwa tag - tag HTML memiliki pasangannya masing - masing yaitu tag pembuka dan tag penutupnya. Untuk memuat Anda paham, lihat penjelasan di bawah ini.
Mungkin muncul pertanyaan dari Anda bagaimana jika salah satu tag HTML tersebut tidak disertakan?
Oke,
Sebelum menjawab pertanyaan tersebut, ayo kita simak dulu penjelasan dari masing - masing tag HTML tersebut satu per satu.
Tag <!Doctype>
Doctype atau DTD adalah singkatan dari Document Type Declaration yang berguna untuk memberitahu browser bahwa bahasa yang digunakan adalah HTML. Kalau misalnya DTD tidak Anda deklarasikan dalam membuat file HTML maka browser tetap akan membaca file HTML Anda seolah - olah tidak ada sesuatu yang berubah. Tetapi kalau kita lihat dengan lebih mendetail maka fie HTML yang tidak ada DTD akan dijalankan oleh browser pada quirk mode
Pada quirk mode, browser membaca halaman web sedikit berbeda karena tidak ditemukan deklarasi DTD di didalamnya dan browser mengidentifikasi bahwa halaman web Anda merupakan halaman yang usang, nah supaya tetap dapat ditampilkan dengan baik oleh browser, maka browser menggunakan quirk mode secara otomatis untuk menampilkan halaman web Anda
Tag <html>
Ini adalah tag pembuka di dalam semua halaman web. Tag - tag HTML harus bedara di diantara (diapit) oleh tag <html> ini.
Tag <head>
Tag <head> digunakan untuk mendefinisikan halaman, biasanya berisi tentang metatag dalam HTML, tag - tag CSS dan Javascript. Contoh yang paling mudah yaitu untuk memberi judul pada setiap halaman web, maka tag HTML yang digunakan adalah <title> nah tag <title>
ini diletakkan di antara tag <head> dan </head>.
Tag <body>
Tag - tag HTML yang ada di dalam tag <body> inilah yang akan ditampilkan di browser, kalau Anda sebelumnya sudah membaca tentang HTML Editor, maka Anda akan pahami bahwa hanya tag yang berada di antara tag <body> dan </body> yang akan ditampilkan di browser. Selain itu, ada juga tag pada <head> yang bisa ditampilkan oleh browser tapi tidak semua, salah satunya yaitu tag <title> yang tadi sudah kita bahas.
<tag pembuka>Ini adalah bagian yang ditampilkan di browser</tag penutup>
contoh :
Silakan Anda coba ketik di Notepad dan lihat tampilannya di browser.
HTML Headings
<h1> menandakan bahwa text yang diapit dengan tag ini adalah text yang penting dan tag yang diapit <h6> kurang begitu penting. Contoh penggunaan :
Coba Anda ketik di notepad, simpan dan buka di browser Anda untuk melihat perbedaan dari tag <h1> sampai <h6>.
HTML Paragraf
Untuk membuat paragraf di HTML, tag yang digunakan adalah <p>. Contoh :
Silakan coba di notepad, simpan dan buka di browser Anda. Lihat disitu, akan ada 2 paragraf yang ditampilkan.
HTML Link
Link adalah huruf, kata, kalimat atau gambar yang diapit dengan tag < a href="">dan </a>. Kalau Anda berusaha klik maka dia akan mengarahkan Anda ke object lain. Object yang saya maksud disini bisa saja halaman website (bisa milik Anda sendiri atau milik orang lain) dan bisa juga efek tertentu akan muncul jika Anda klik .
Contoh :
<a href="https://klikfadhil.blogspot.co.id">Belajar HTML Dasar Mudah Untuk Pemula</a>
Sekarang coba Anda ketik di Notepad, simpan dan buka di browser. Lalu klik tulisan "Belajar HTML Dasar Mudah Untuk Pemula" maka Anda akan diarahkan menuju blog saya.
Anda bisa merubah tujuannya ke halaman profil facebook Anda dengan cara merubah isi dari attribute href dari https://klikfadhil.blogspot.co.id menjadi misalnya saja https://www.facebook.com/rakhmat.fadhillah. Sekarang kalau Anda coba lagi, maka akan diarahkan ke halaman profil Facebook saya.
HTML Gambar
Jika Anda ingin menampilkan gambar, maka tag yang digunakan adalah <img>. Nah tag <img> memiliki beberapa atribut yaitu src yang merupakan source dari file, alt yang berarti alternatif jika gambar tidak muncul, width dan height yang merupakan ukuran dari gambar.
Contoh :
Nah untuk mengetahui fungsi atribut alt, silakan Anda hapus tulisan "placehold.it" kemudian refresh browser Anda dan lihat apa yang muncul. Anda juga bisa saja merubah ukuran dari width dan heightnya lho. Silakan dicoba ya.
Oke, tadi sudah Anda pelajari beberapa dasar tentang tag - tag HTML dan cara pengetikannya, sekarang kita bahas mulai lebih detail di tutorial selanjutnya tentang HTML Heading.
