Nurul Huda
Nurul Huda
  1. Beranda ›
  2. Web ›
  3. HTML ›
  4. HTML Dasar
  5. › HTML Dasar: Pengenalan (Halo Dunia!)

HTML Dasar: Pengenalan (Halo Dunia!)

HTML Dasar: Pengenalan (Halo Dunia!)

Daftar Isi

Pengertian HTML

HTML adalah singkatan dari Hypertext Markup Language. Ia adalah bahasa markah [1] yang dibangun dan disusun untuk merepresentasikan sebuah halaman web.

Jika sebuah halaman website adalah tubuh manusia, maka HTML ini kita bisa ibaratkan sebagai tulangnya.

Kenapa?

Karena ia merepresentasikan struktur bagan tubuh sebuah halaman web.

Tiga Unsur Penyusun Halaman Web

Untuk bisa menguasai pemrograman web secara komprehensif, setidaknya kita harus mempelajari 3 unsur penting penyusun halaman web [2]:

  • HTML
  • CSS
  • Javascript

HTML sebagai tulang, sendi, dan hal-hal lain yang merepresentasikan struktur bangunan tubuh halaman web.

Sedangkan bagian tubuh lainnya seperti kulit, rambut, atau aksesoris lain yang menyelimuti tubuh seperti pakaian, sepatu, topi dan sebagainya, maka itu direpresentasikan dan didefinisikan oleh CSS.

Ada pun javascript, maka tugasnya adalah sebagai motor penggerak sendi-sendi dari halaman web. Jika kita ingin sebuah popup muncul ketika tombol tertentu ditekan, atau kita ingin menampilkan countdown waktu, atau membuat slider gambar, zoom gambar, dan lain sebagainya. Maka hal-hal interaktif tersebut adalah tugas yang akan diemban oleh javascript.

Kenapa Harus Mempelajari HTML?

Pertanyaan selanjutnya: Kenapa harus mempelajari HTML?

  • HTML adalah dasar dari segala dasar pemrograman web. Sehingga mempelajarinya tidak bisa dihindarkan lagi.
  • Jika kita seorang blogger, maka memahami HTML akan membantu kita untuk mengubah template blog.
  • Membuat kita memahami apa yang terjadi ketika meng-copy-paste tulisan dari internet ke dalam Microsoft Word atau Google Docs.
  • Sebagai pintu utama sebelum mempelajari CSS dan Javascript (DOM).
  • Dan lain sebagainya.

Contoh HTML Sederhana

Kode HTML tersusun dari elemen, tag, dan konten.

Berikut ini contoh kode HTML yang sangat sederhana.

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar HTML Dasar | Jago Ngoding</title>
</head>
<body>
  <h1>Halo, dunia!</h1>
  <p>Aku akan mempelajari HTML</p>
</body>
</html>

Kode di atas berisi beberapa informasi seperti:

  • tipe dokumen (yakni html)
  • judul dokumen (<title>)
  • dan konten dokumen (<body>) yang memiliki 2 elemen:
    • heading Halo, dunia!
    • dan paragraf Aku akan mempelajari HTML

Membuat dan Menampilkan Halaman Web HTML

Pada dasarnya, hampir semua halaman yang kita akses di internet adalah dokumen HTML –tanpa kita sadari.

Sehingga, untuk menampilkan halaman web HTML kita hanya perlu file HTML dan browser.

File HTML bisa berupa file asli yang ada di lokal PC kita, atau alamat web yang bisa diakses online.

Contoh.

  1. Kita bisa membuat sebuah file baru dengan nama halo-dunia.html.

    Kalian bisa menggunakan berbagai macam teks editor. Semisal:

    • notepad
    • notepad++
    • sublime text
    • vscode
    • atom
    • vim
    • dan lain sebagainya.

    Yang penting, kalian bisa membuat file dengan ekstensi .html.

  2. Lalu paste kode HTML halo dunia di atas ke dalam file halo-dunia.html yang sudah kita buat.

  3. Buka file manager, cari lokasi file.

  4. Buka file tersebut dengan browser:

    • bisa dengan klik 2x
    • atau tekan ENTER
    • atau klik kanan open -> with browser.

Setelah terbuka dengan baik, maka dokumen halo-dunia.html akan menghasilkan output kira-kira seperti berikut:

Bahasan-Bahasan Dasar HTML

Pada dasarnya, HTML adalah bahasa markup yang senantiasa berkembang. Pernah mempelajarinya di masa lalu tidak menjamin ilmu yang kita ketahui tetap relevan hingga sekarang dan tahun-tahun yang akan datang.

Agar tetap bisa mengikuti perkembangannya dengan baik, kita perlu menguasai dasar-dasar dari HTML.

Insyaallah pada seri tutorial html ini, kita akan mempelajari pokok-pokok HTML meliputi: istilah-istilah dasar tag, elemen, dan atribut; sifat inline dan block pada suatu elemen; heading; paragraf; tipografi; tabel; form; link; media; dan sebagainya.

Pembahasan Selanjutnya

Pada pertemuan selanjutnya, insyaallah kita akan membahas tentang senjata atau perkakas-perkakas yang bisa kita gunakan untuk ngoding HTML.

Stay tune!

Referensi

[1] https://id.wikipedia.org/wiki/HTML - diakses tanggal 14 Februari 2021
[2] https://www.internetingishard.com/html-and-css/introduction/ - diakses 14 Februari 2021

Belajar Ngoding di Udemy