AWAL SIAGIAN KABAR-INTERNET

Belajar HTML Part 4: HTML Heading

Di dalam tutorial HTML Dasar, saya sudah bahas sekilas tentang Heading yang berguna untuk membuat judul pada HTML. Sekarang saya akan bahas tutorial yang sedikit lebih spesifik tentang heading yaitu HTML heading.

HTML Heading

Pada dokumen HTML ada tag yaitu tag heading. Tag heading memiliki urutan dimulai dari <h1> sampai <h6>. Tag ini sering digunakan untuk judul, bisa judul utama, subjudul, bab dan subbab. Semakin besar urutannya maka ukuran hurufnya akan semakin kecil.

Fungsinya apa ?

1. Fungsinya untuk mendefinisikan judul secara khusus.

2. Untuk faktor SEO, penggunaan heading ini untuk menekankan kepada search engine bahwa artikel kita memiliki topik penting yang dibahas dan memudahkan search engine untuk mengenali struktur pada halaman yang kta buat.

3. Untuk mengklasifikasikan judul. Misal judul yang paling utama menggunakan tag <h1>, untuk subjudul menggunakan tag <h2>, untuk bab menggunakan tag <h3> dan seterusnya.

Untuk lebih jelasnya ayo kita lihat penampakannya ya.

Sekarang coba Anda ganti tulisan - tulisan yang diapit oleh tag - tag h diatas dengan judul - judul karangan Anda sendiri. Setelah itu lihat hasilnya di browser.

Anda akan lihat perbedaan di setiap baris judul ya? Mulai tebal dan besar sampai kecil dan tipis. Kalau Anda lihat mulai dari <h1> itu adalah judul utama yang memiliki prioritas paling penting, dalam teknik SEO heading <h1> ini digunakan untuk mempermudah search engine mengenali isi artikel Anda. Nah di HTML, fungsi heading ini secara khusus untuk judul, jadi tolong inget - inget ya.

Penting ! Meskipun tag heading mampu menebalkan dan membesarkan tulisan, gunakan tag ini khusus hanya untuk judul.

Oiya satu hal lagi yang perlu Anda tahu bahwa browser akan menambahkan space putih istilahnya margin atau jarak atas dan bawah secara otomatis sebelum dan setelah heading. Lihat gambar di bawah ini.

Margin (jarak atas dan bawah) sebelum dan sesudah heading

Disini Anda sudah pelajari HTML Heading yang digunakan untuk memprioritaskan judul, mengklasifikasikan judul dan membuat search engine lebih mudah mengenali struktur halaman. Kalau ada judul, ada juga paragraf. Nah di HTML kita bisa membuat paragraf yang akan saya bahas di tutorial selanjutnya yaitu HTML paragraf. Silakan disimak.

Belajar HTML Part 3: HTML Dasar

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.

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.

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.

<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

Untuk membuat heading di HTML, kita gunakan tag <h1> sampai <h6>.
<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.

Belajar HTML Part 2 : HTML Editor

Setelah mempelajari tentang apa itu HTML di tutorial sebelumnya yang membahas pengertian HTML dan penerapannya dalam pembuatan website, sekarang kita akan bahas HTML editor yang memudahkan kita untuk mengetik tag - tag HTML.

Mengetik HTML dengan HTML Editor

Website bisa dibuat dan dimodifikasi menggunakan HTML editor atau yang sering disebut code editor oleh kebanyakan para programmer. Code editor adalah aplikasi, software atau sebut saja alat yang kita gunakan untuk mengetik tag - tag HTML.

Karena tutorial ini saya buat cenderung untuk Anda yang masih pemula, maka saya sarankan untuk menggunakan notepad saja terlebih dahulu. Kenapa? Karena menggunakan notepad dengan tampilan yang simple dapat membantu Anda belajar HTML dengan cepat.

Selain itu Anda tidak perlu repot - repot untuk instal karena sudah tersedia (built-in) di laptop Anda masing - masing.

Step 1: Buka Notepad (Windows)

Windows 8 - Windows 10

1. Buka Start Screen (simbol windows yang terletak di pojok kiri bawah)

2. Lalu ketik Notepad

Windows 7 kebawah

1. Buka Start > Apllication > Notepad

Step 1: Buka TextEdit (Mac)

1. Buka Finder > Application > TextEdit

Ubah sedikit aturannya supaya bisa menyimpan file dengan benar. Di Preferences > Format > pilih "Plain Text"

Kemudian, dibawah tulisan "Open and Save" dan cetang pada tulisan "Ignore rich text commands in HTML files".

Setelah itu buka jendela baru (new window) untuk mengetik tag - tag HTML.

Step 2: Mengetik Beberapa Tag HTML

Berikut ini tag - tag HTML sederhana yang saya buat untuk Anda, jadi silahkan di ketik di code editor yang Anda gunakan ya.

Step 3: Simpan Menjadi File HTML

Setelah Anda selesai menulis syntax HTML tadi, sekarang coba simpan filenya. Pilih File > Save As di menu notepad.

Beri nama index.html pada file tersebut dan jangan lupa pilih encoding-nya menggunakan UTF-8 (ini format yang biasa digunakan untuk HTML)

Penting ! Tadi kita beri nama file "index.html". Anda bisa menggunakan htm atau html sebagai extensi filenya. Tidak ada perbedaan, tapi saya sarankan menggunakan html karena extensi ini yang sering digunakan. Oke?

Step 4: Lihat Halaman HTML di Browser

Setelah tadi sudah berhasil Anda simpan, sekarang coba buka file index.html. Anda bisa langsung double click file itu atau klik kanan dan pilih open with lalu pilih browser.

Jika berhasil, maka hasilnya kurang lebih akan seperti ini ya.

Oke kalau hasilnya sudah sesuai dengan gambar diatas, Anda sudah selesai mempelajari HTML Editor dengan baik. Ayo lanjutkan ke tutorial selanjutnya yang membahas dasar - dasar pengetikan HTML dan apa saja yang harus diperhatikan ketika mengetik tag - tag HTML yang saya tulis di pembahasan HTML Dasar.