Popular Post

Apa Itu Latency (Ping)? Kenapa Game Bisa Lag (Penjelasan Mudah)

Posted by on
0

Pengenalan HTML

Posted by on

Pada artikel kali ini kita akan membahas HTML, yaitu bahasa dasar yang digunakan untuk membuat halaman website.

Jika kamu ingin belajar membuat website dari nol, maka memahami HTML adalah langkah pertama yang wajib dilakukan.

Selamat membaca 😊


Apa Itu HTML?

HTML adalah singkatan dari HyperText Markup Language.

HTML disebut HyperText karena memungkinkan kita membuat teks yang bisa menjadi link (tautan). Ketika link tersebut diklik, pengguna dapat berpindah dari satu halaman ke halaman lain.

Contohnya seperti ketika kita mengklik sebuah menu di website, lalu halaman langsung berubah. Itulah konsep hypertext.

HTML juga disebut Markup Language karena menggunakan tanda khusus (markup/tag) untuk memberi struktur dan fungsi pada teks. Dengan menggunakan tag tertentu, teks bisa diubah menjadi:

  • Paragraf

  • Judul

  • Teks tebal (bold)

  • Teks miring (italic)

  • Link

  • Gambar

  • Daftar (list)

  • Dan lainnya

Pengertian Tag dalam HTML

Dalam HTML, setiap bagian teks harus diberi penanda (tag) agar browser mengetahui fungsi teks tersebut.

Sebagian besar tag HTML ditulis berpasangan, yaitu:

  • Tag pembuka

  • Tag penutup

Di antara kedua tag tersebut terdapat isi atau konten, yang disebut sebagai elemen HTML.

Contoh:

<p>Ini adalah paragraf</p>

Penjelasan:

  • <p> → tag pembuka paragraf

  • </p> → tag penutup paragraf

Namun perlu diketahui, tidak semua tag HTML memiliki pasangan, contohnya tag <br> atau <img>.

Struktur Dasar HTML

Setiap halaman HTML memiliki struktur dasar yang hampir sama, yaitu:

  • <!DOCTYPE html>

  • <html>

  • <head>

  • <body>

Mari kita pahami satu per satu.

1. Tag DOCTYPE

Tag <!DOCTYPE html> digunakan untuk memberi tahu browser bahwa dokumen yang kita buat adalah dokumen HTML versi modern (HTML5).

Tag ini sebaiknya selalu ditulis di baris pertama.

2. Tag HTML

Tag <html> adalah tag utama yang membungkus seluruh isi halaman web.

Semua kode HTML harus berada di dalam tag ini.

3. Tag Head

Bagian <head> berisi informasi tentang halaman web seperti:

  • Judul halaman (<title>)

  • Meta description

  • Link CSS

  • Script JavaScript

  • Setting SEO

Bagian ini tidak langsung terlihat oleh pengguna.

4. Tag Body

Tag <body> berisi semua konten yang ditampilkan di browser, seperti:

  • Teks

  • Gambar

  • Video

  • Tombol

  • Menu

  • Form

Semua tampilan website berada di dalam bagian ini.

Tools untuk Belajar HTML

Untuk belajar HTML, kita hanya membutuhkan dua tools utama:

1. Browser

Browser digunakan untuk menampilkan hasil kode HTML yang kita tulis.

Contoh browser:

  • Google Chrome

  • Mozilla Firefox

  • Microsoft Edge

  • Opera

2. Text Editor

Text editor digunakan untuk menulis kode HTML.

Sebenarnya kita bisa menggunakan Notepad biasa, tetapi lebih disarankan menggunakan editor modern seperti:

  • Notepad++

  • VS Code

  • Sublime Text

Editor modern memiliki fitur seperti:

  • Pewarnaan syntax

  • Auto indent

  • Line number

  • Auto suggestion

Hal ini akan sangat membantu saat belajar coding.

Contoh Program HTML Pertama (Hello World)

Berikut contoh kode HTML sederhana:

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>

<body>
<p>Hello World</p>
</body>

</html>

Cara Menyimpan File HTML

Langkah-langkahnya:

  1. Klik File → Save As

  2. Pilih folder penyimpanan

  3. Beri nama file misalnya hello.html

  4. Pastikan ekstensi file adalah .html atau .htm

  5. Klik Save

Cara Menjalankan File HTML

  1. Klik dua kali file HTML yang sudah disimpan

  2. File akan terbuka di browser

  3. Akan muncul tulisan Hello World

Selesai 🎉

Kesimpulan

HTML adalah bahasa dasar dalam pembuatan website. Dengan memahami:

  • Struktur HTML

  • Tag

  • Cara menulis dan menjalankan file

kita sudah memulai langkah pertama menjadi web developer.

Pada artikel berikutnya kita akan mulai belajar tag-tag HTML penting seperti heading, paragraf, link, gambar, dan list.

Semoga bermanfaat 🙏

Comments

  1. AnonymousFebruary 16, 2017 at 10:55 PM

    nice post !! Thank You !

    ReplyDelete
  2. AnonymousMarch 14, 2017 at 12:19 AM

    keren gannn lanjutkann

    ReplyDelete
  3. Diva FathiyaFebruary 29, 2020 at 12:26 AM

    This comment has been removed by the author.

    ReplyDelete
  4. Diva FathiyaFebruary 29, 2020 at 12:40 AM

    Halo kak nama saya Diva Fathiya. Makasih ya, laman blog mu sangat membantu saya dalam memahami apa itu HTML, penjelasannya sangat membuat saya mengerti apalagi untuk saya yg masih pemula yg baru berada di semester. oh ya kak jangan lupa ya kunjungi website kampus saya https://www.atmaluhur.ac.id.

    ReplyDelete
  5. Diva FathiyaFebruary 29, 2020 at 12:40 AM

    Halo kak nama saya Diva Fathiya. Makasih ya, laman blog mu sangat membantu saya dalam memahami apa itu HTML, penjelasannya sangat membuat saya mengerti apalagi untuk saya yg masih pemula yg baru berada di semester. oh ya kak jangan lupa ya kunjungi website kampus saya https://www.atmaluhur.ac.id.

    ReplyDelete

Post a Comment