HTML: Pendahuluan dan pengenalan dasar

Tuesday, 14 September 2021

HTML: Pendahuluan dan pengenalan dasar

Halo apa kabar teman-teman? semoga baik-baik saja selama masa pandemi ini.

Kita akan coba belajar HTML dari dasar. Sebenarnya saya sudah pernah membuat postingan tentang HTML dasar, namun karena satu dan lain hal, saya putuskan untuk membuat lagi dari awal. —rajin kali..

Sebelum itu, ambil posisi yang enak buat baca postingan ini + siapkan cemilan kalo ada.

Pengertian HTML

HyperText Markup Language atau lebih dikenal dengan sebutan “HTML” adalah sebuah bahasa “Markup atau Markah” yang berisikan kumpulan tanda.

Tanda pada HTML biasa disebut dengan “Tag”.

Setiap Tag (penanda) punya tujuan masing-masing, seperti Paragraf, Gambar, dan lain-lain.

Nah, dari kumpulan tanda tadi, kemudian dibaca oleh mesin dan diubah menjadi sebuah tampilan.

😾 : “Paham? Kalo belum, coba baca lagi, kalo udah kita lanjut..”

Sejarah Singkat HTML

HTML dibuat oleh seorang fisikawan bernama Tim Bernes-Lee pada tahun 1991, kemudian dirilis pertama kali di tahun 1993.

Beliau juga penemu dari WWW (World Wide Web) atau biasa kita sebut “Internet” pada tahun 1989 dan mulai dijalankan pada tahun 1990.

🙀 : “Keren..”

Struktur Dasar HTML

Di HTML, kita butuh kerangka dasar untuk menyimpan semua tag/tanda untuk nanti ditampilkan.

<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

🙈 : “Banyak sekali..”

Sekilas memang terlihat begitu, tapi kalau sudah belajar, itu biasa saja.

Istilah Umum HTML

Ada beberapa istilah HTML yang harus diingat, yaitu:

  • Tag
  • Attribute
  • Element

Istilah tersebut akan sering kita pakai pada saat membuat sebuah website menggunakan HTML.

1. Tag

Tag adalah sebuah “penanda” untuk menampilkan sesuatu seperti Teks, Gambar, Video, dan lain-lain.

Contoh Tag

<p> </p>

Sebuah tag memiliki nama tag, tanda pembuka, tanda penutup.

  • p adalah “nama tag”
  • <p> adalah “Tag Pembuka”
  • </p> adalah “Tag Penutup”

Penulisan tag cukuplah mudah, kita perlu menulis nama tag di antara tanda < > untuk pembuka. Sedangkan untuk penutup, kita menulis nama tag diantara < /> seperti contoh diatas.

Penggunaan tag <p> bertujuan untuk menampilkan teks/paragraf. Pada contoh diatas hanyalah sebuah “tag kosong”.

Untuk membuat sebuah paragraf, kita perlu isi tag seperti ini : <p>Hai Dunia</p> maka akan menampilkan tulisan “Halo Dunia” di layar.

Pengenalan Tag HTML

😼 : “Bingung? silahkan dibaca lagi. Gaperlu dihafal, biarin aja ngalir sendiri.. wkwkwk”

2. Attribute

Setelah kita memahami tag, selanjutnya ada istilah yang sering digunakan yaitu “Attribute”.

Attribute digunakan untuk memberi “identitas atau keterangan/kelengkapan” pada sebuah tag.

🦕 : “Maksudnya gimana? Gunanya apa?”

Sebagai contoh, kita akan pake sebuah tag untuk menampilkan sebuah link, yaitu <a>.

Pada tag link mempunyai sebuah attribute bawaan/default untuk menampung alamat sebuah halaman website.

Contoh:

<a href="www.google.com">Ini Google</a>

Hasilnya: Ini Google

Selain attribute bawaan, kita juga bisa memberi attribute lain, gunanya sebagai “pengenal”.

Misalnya kita pake contoh tag seperti diatas yaitu <p>.

Ceritanya kita punya banyak tag <p>, nantinya digunakan untuk menampilkan beberapa paragraf.

<p>Ini paragraf satu</p>
<p>Ini paragraf dua</p>
<p>Ini paragraf tiga</p>
<p>Ini paragraf empat</p>
<p>Ini paragraf lima</p>

Ketika seperti ini, komputer kita menganggapnya sama yaitu paragraf. Komputer tidak tau mana Paragraf 1, Paragraf 2, dan seterusnya.

Ibarat ada sejejer orang berbaris tanpa kartu pengenal (ID Card). Kita tidak akan tau namanya, kecuali kita bertanya. Begitupun dengan HTML.

Untuk itu, kita perlu memberi pengenal kepada tag, agar nantinya komputer mengenali langsung sebuah tag secara spesifik.

Kalau anda perhatikan contoh diatas, attribute ditulis di dalam tag. Lebih tepatnya didalam tag pembuka.

Attribute terdiri dari nama atributte dan nilai attribute.

<p id="judul">Selamat datang!</p>

Penjelasan:

  • id : nama attribute
  • judul : nilai attribute

Attribute pada Tag HTML

🦧 : “Semoga ga membingungkan..”

3. Element

Element adalah bentuk kesatuan dari sebuah tag dan nilai serta attribute yang utuh.

Ketika kita membuat sesuatu menggunakan tag, misal:

Contoh element sederhana:

<p>Selamat datang!</p>

atau element yang cukup kompleks:

<p id="judul">Selamat datang!</p>

maka itu disebut sebagai sebuah Element HTML.

Contoh Element HTML

😺 : “Paham sampe sini?”

Persiapan Belajar HTML Dasar

Kita tidak butuh banyak instal ini itu buat belajar HTML. Cukup dengan Notepad biasa + browser udah bisa.

Tapi, demi kenyamanan, saya sarankan untuk instal:

  • Teks Editor (Notepad++ atau SublimeText)
  • Browser (Chrome, Edge, Firefox)

Pilih salah satu saja dari Teks Editor dan Browser yang ada.

Untuk tutorial ini, saya menggunakan:

  • Sistem Operasi: Windows
  • Teks Editor: SublimeText
  • Browser: Google Chrome

Boleh memilih sama seperti saya (biar sama), atau juga sesuai selera masing-masing.

Siapkan juga cemilan biar lebih naikin mood. —Bisa juga dengan Teh atau Kopi.

#html