Belajar HTML Kode Dasar Untuk Pemula Tahap 1

  • 3 min read
  • May 23, 2020
Belajar Koding
Hosting Unlimited Indonesia

Belajar HTML (Hypertext Markup Language) dasar adalah kewajiban bagi seorang programmer web designer dan web developer. Apa perbedaan diantara keduanya ?. web designer adalah seseorang yang memiliki kemampuan untuk mendesain layout web menggunakan sketsa gambar dan implementasi dengan koding web dasar, HTML (Hypertext Markup Language). Sedangkan wed developer adalah seseorang yang memiliki kemampuan dalam memasarkan suatu web, dan juga berbagai jenis bahasa pemrograman web.

Dengan memahami apa itu HTML (Hypertext Markup Language), keputusan mengenai pengembangan suatu website akan berjalan dengan baik. Apakah HTML hanya diperuntukkan untuk web. Jawabannya iya.

Bahasa ini dikatakan oleh banyak pakar sebagai bahasa pengantar pemrograman web bersamaan dengan CSS (Cascading Style Sheets). Mari kita bahas.

Pengertian HTML

Dari pedoman yang admin gunakan, HTML (Hypertext Markup Language) adalah bahasa khusus untuk membuat halaman web menggunakan penanda kerangka. Terdiri dari 3 kata utama, yakni hypertext yang bermakna bukan sekedar teks, karena dapat berfungsi sebagai link. Selanjutnya kata markup, yang berarti penanda untuk mengatur format dan struktur halaman web, seperti <p>, <i>, atau <body>.

Terakhir adalah language, yang berarti bahasa. Tidak ditambahkan kata programming karena HTML (Hypertext Markup Language) tidak memiliki struktur dasar layak bahasa pemrograman pada umumnya (variabel, function, kondisi).

Cara kerja dari HTML (Hypertext Markup Language) sangat sederhana. Berawal dari client yang memanggil sebuah website dengan alamat URL (Uniform Resource Locator), lalu browser mendapatkan alamat dari web server. Kemudian browser menerjemahkan kode HTML (Hypertext Markup Language) menjadi konten grafis.

Berikut adalah contoh dari kode HTML (Hypertext Markup Language)

Struktur DOM pada HTML

DOM (Document Object Model) adalah dokumen yang digunakan untuk mempelajari hubungan dari suatu tag dengan tag HTML(Hypertext Markup Language) lainnya. Dari DOM (Document Object Model) kita dapat mengetahui bahwa suatu tag merupakan anak, bapak, atau saudara jauh dari tag lainnya. Agar lebih jelas, perhatikan gambar di bawah ini dengan sekssama.

Struktur DOM
Struktur DOM

Pada gambar di atas, kita dapat mengetahui bahwa tag tertinggi adalah HTML. Tag HTML memiliki 2 anak yakni tag head dan tag body. Masing-masing anak tersebut, juga memiliki anak lagi, yakni tag title untuk tag head dan tag p serta kawan-kawan untuk tag body. Gambar di atas hanya menggambarkan sebagian dari struktur DOM (Document Object Model).

Perlu waktu yang lama untuk memasukkan keseluruhan tag HTML. DOM (Document Object Model), seakan menjadi standar penulisan bagi programmer web. Artinya sebelum menuliskan sebuah tag, kita harus tau tag yang bertindak sebagai bapaknya. Meskipun beberapa tag tetap di mengerti web browser tanpa menulis tag bapaknya. Perlu di ingat cara ini sangatlah tidak dianjurkan atau tidak epic. Contoh seperti dibawah ini

Koding 1

Koding 2

Hasil kedua koding tetaplah sama. Berikut hasilnya;

Hasil Koding
Hasil kedua koding

Gambar diatas menunjukkan hasil yang sama antara kedua koding. Meskipun koding kedua hanya menuliskan teks di antara tag HTML, tapi tetap menghasilkan tampilan seperti koding pertama.

Jenis Tag pada HTML

Setelah mengetahui arti dari tag, kita juga perlu mengetahui jenis tagTag terbagi atas dua bagian. Pedoman utama yang admin gunakan, menyebutkan ada 2 jenis tag. Tag tersebut adalah self closing tag dan pair closing tag. Dari namanya, kita dapat mengetahui bahwa self closing tag, adalah tag yang menutup dirinya sendiri tanpa pasangan. Pair closing tag adalah tag yang menutupi dirinya dengan pasangannya.

Agar lebih mudah diingat, kita ganti istillah keduanya, yakni tag single dan tag couple.

Tag single

Contoh dari tag ini dapat ditemukan pada tag-tag seperti <br>, <img>, <meta>, <area>, <base>, <col>, <embed>, <hr>, <input>, <link>, <source>, <wbr>, dan lain-lain.

Mungkin anda sering menjumpai beberapa koding HTML (Hypertext Markup Language) yang menuliskan tag single dengan menambahkan tanda ‘/’. Semisal <br />. Tidak ada yang salah dengan ini, baik penulisan yang disertai tanda ‘/’ dan yang tidak, keduanya sama saja.

Berikut adalah contoh koding yang menggunakan tag single

Hasilnya…

Koding
Hasil koding tag single

Tag couple

Contoh dari tag ini sangatlah banyak. <html>, <head>, <body>, <p>, <b>, <i>, merupakan sebagian dari tag couple. Berikut adalah contoh koding menggunakan tag couple.

Hasilnya

Koding
Hasil koding tag couple

Penulisan kode HTML (Hypertext Markup Language) bersifat case insentitive. Huruf besar maupun kecil dianggap sama. Perlu diketahui pula, tag juga memiliki 2 jenis berdasarkan cara web browser menampilkannya. Yakni block level element dan inline level element.

Block level element, menampilkan tag HTML menjadi sebuah bagian atau baris baru, sedangkan inline level element, adalah tag HTML yang mengikuti tampilan yang sudah ada dari tag bapaknya. Contohnya dapat dilihat pada koding di bawah ini

Agar lebih terasa, kamu dapat mencoba koding diatas dan melihat hasilnya sendiri.

Tanda <!– teks –> pada koding diatas adalah cara penulisan komentar di HTML (Hypertext Markup Language). Setiap teks dijadikan komentar, tidak akan ditampilkan oleh web browser. Gunanya untuk mempermudah dokumentasi koding.

Kesimpulan

Dari tahap pertama ini, dapat dimengerti bahwa seseorang yang belajar HTML (Hypertext Markup Language) haruslah paham akan DOM (Document Object Model). Selain itu terdapat 2 jenis tag yakni tag single dan couple. Masing-masing tag juga ditampilkan secara berbeda tergantung apakah tag tersebut adalah block level atau inline level element. Teruslah giat belajar

sumber : di bawah

Pratama, Andre. 2015. HTML Uncover Panduan Belajar HTML untuk Pemula.Padang Panjang :www.duniailkom.com.

petanikode.com, w3schools.com

Hosting Unlimited Indonesia
Related Post :

Leave a Reply

Your email address will not be published. Required fields are marked *