Pengenalan Dasar HTML untuk Pemula

HTML memang bahasa yang wajib dipelajari bagi kamu yang ingin menjadi web developer.

Karena…

HTML merupakan bahasa dasar untuk membuat web. Saya yakin, kamu sudah pernah mendengar HTML sebelumnya. Tapi tidak ada salahnya membaca kembali artikel ini.

Pada tutorial ini, kita akan benar-benar membahas dari nol hingga kamu bisa membuat halaman HTML sendiri.

Mari kita mulai!

Apa itu HTML?

Menurut Wikipedia:

HTML atau HyperText Markup Language merupakan bahasa markah untuk membuat halaman web.

HTML menggunakan markup/tag sebagai penanda struktur. Ia berfungsi menentukan struktur konten di halaman.

Ibarat batu bata untuk rumah, HTML adalah fondasi halaman web.

Untuk mempercantik tampilan web, kita membutuhkan CSS. Dan untuk membuat web menjadi interaktif, kita gunakan JavaScript.

Peralatan untuk Belajar HTML

Sebelum praktik, siapkan dulu beberapa alat berikut:

1. Teks Editor

Teks editor digunakan untuk menulis kode HTML. Kamu bisa pakai Notepad, Notepad++, atau teks editor lain.

Di tutorial ini, kita menggunakan Visual Studio Code karena fitur-fiturnya sangat membantu pemula.

2. Web Browser untuk Membuka HTML

Web browser akan kita gunakan untuk membuka HTML. Kamu juga bebas menggunakan web browser apapun.

Saran saya sih... gunakan web browser yang terbaru, karena kita juga akan menggunakan HTML versi yang terbaru. Firefox atau Google Chrome, saya kira sudah cukup.

Membuat Dokumen HTML Pertama

Kini tiba saatnya, kamu harus mencoba sendiri membuat dokumen HTML. Caranya sangat mudah.

Mari kita mulai dengan membuka teks editor, lalu tulislah kode berikut.

<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Belajar HTML #01</title>
    </head>
    <body>
      <p>Hello World!</p>
    </body>
  </html>

Setelah itu, simpan dengan nama code hello-world.html /code .

Tips: Untuk pengguna Notepad di Windows, simpan nama file dengan tanda petik: code hello-world.html /code> agar berekstensi .html.

Atau aktifkan em File name extensions /em di menu View Windows Explorer.

Sekarang coba buka file tersebut di browser, hasilnya akan seperti ini:

Kita sudah berhasil membuat halaman web pertama dengan HTML.

Kini giliran saya menjelaskan maksud dari kode di atas, tapi sebelum itu.. saya akan jelaskan dulu tentang nama file untuk HTML.

Nama File untuk HTML

Ada beberapa hal yang perlu diperhatikan dalam membuat nama file HTML:

1. Extensi file HTML

Setiap file HTML harus berekstensi .html, .xhtml (untuk XHTML), dan .htm saja. Jika tidak menggunakan ekstensi ini, maka ia tidak akan bisa dibaca oleh web browser.

Nama filenya adalah hello-world.txt.

Sedah jelas, ini bukan file HTML, melainkan sebuah file teks biasa. Maka.. browser akan menampilkan isi file tersebut apa adanya.

2. Nama Khusus untuk Homepage

Jika kamu ingin membuat halaman untuk homepage, maka sebaiknya gunakan nama index.html. Karena ia akan otomatis dibuka saat website dikunjungi.

Contohnya, saat kamu membuka www.petanikode.com.. maka file HTML yang akan dibuka adalah index.html yang berada di server petanikode.

3. Hindari Beberapa Hal ini..

Nama file HTML biasanya akan tercantum pada URL, maka sebaiknya hindari menggunakan spasi pada nama file HTML, agar URL yang dibentuk lebih bagus.

Spasi pada URL, biasanya akan otomatis diubah menjadi %20.

Sebagai ganti spasi, kamu bisa gunakan tanda min (-) atau underscore (_).

Berikanlah nama file HTML dengan file yang biasa, hindari menggunakan huruf besar, campuran dari huruf besar dan kecil, dan juga menggunakan simbol.

Meskipun nama ini bisa valid, tapi kurang bagus untuk dibaca.. baik oleh manusia, maupun mesin.

berikutnya kita akan pelajari tentang kode-kode HTML.

Struktur Dasar HTML

Berikut ini adalah kode HTML yang baru saja kita buat:

Penulisan kode HTML selalu dimulai dengan deklarasi DOCTYPE, lalau menuliskan tag html dan di dalamnya terdapat tag head dan body.

Kalau kita perhatikan.. struktur dasar kode HTML terdiri dari tiga bagian penting:

Bagian Deklarasi
Bagian HEAD
Bagian BODY

Pelajari Apa itu Tag HTML

1. Apa itu Tag HTML?

Tag adalah komponen dasar dalam HTML. Tag digunakan untuk menandai elemen-elemen dalam dokumen HTML. Tag biasanya ditulis di antara tanda kurung sudut seperti p, h1, div, dan sebagainya.

<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Belajar HTML #01</title>
    </head>
    <body>
      <p>Ini Adalah Paragraf!</p>
       <h1>Ini adalah heading level 1</h1>
    </body>
  </html>

Penjelasan:

<p> adalah tag pembuka.
<p> adalah tag penutup.
Konten di antara tag tersebut adalah isi elemen.

Contoh Tag Lain:


<p>Ini adalah paragraf!</p>
<h1>Ini adalah heading level 1</h1>
<a href="#">Tautan</a>
<img src="gambar.jpg" alt="Gambar">

Elemen Tanpa Penutup (Self-Closing): Ada beberapa elemen yang tidak memiliki isi dan tidak membutuhkan tag penutup, misalnya:


<img src="gambar.jpg" alt="Gambar">
<br>
<hr>

2.Atribut HTML

Atribut adalah informasi tambahan yang disisipkan dalam tag untuk memberikan pengaturan atau nilai spesifik.

Biasanya ditulis di dalam tag pembuka, dengan format:


<tag atribut="nilai"> .... <tag>

Contoh


<a href="https//">.....<a>

Pada contoh di atas:

<a> adalah tag tautan.
href adalah atribut yang menyimpan nilai berupa URL.
"https://www.google.com" adalah nilai dari atribut tersebut.

Fungsi Atribut

Menyediakan informasi tambahan tentang elemen (contoh: URL, id, class, title).
Dapat mempengaruhi perilaku atau tampilan dari elemen.
Bisa digunakan untuk pengaturan interaksi dengan CSS dan JavaScript.

Contoh Gabungan Tag, Elemen, dan Atribut:


<a href="https://www.youtube.com/?reload=9" target="_blank"> Buka Youtube <a>

Penjelasan:

<a> adalah tag pembuka.
href dan target adalah atribut.
"https://www.youtube.com/?reload=9" adalah nilai dari href.
"Buka Youtube" adalah isi elemen.
</a> adalah tag penutup.

Ringkasan

Komponen	Penjelasan	Contoh
`<tag>`	Tag pembuka untuk menandai awal sebuah elemen HTML.	`<p>`, `<a>`, `<div>`
`</tag>`	Tag penutup untuk menandai akhir dari elemen.	`</p>`, `</a>`, `</div>`
Atribut	Properti tambahan yang memberikan informasi pada elemen.	`href="..."`, `src="..."`, `alt="..."`
Nilai Atribut	Isi dari atribut yang menentukan detailnya.	`"https://example.com"`, `"gambar.jpg"`
Isi Elemen	Konten atau teks yang berada di antara tag pembuka dan penutup.	`Hello World`, `Buka YouTube`

Membuat Paragraf di HTML

Paragraf di HTML

Dalam HTML, paragraf digunakan untuk menampilkan teks dalam bentuk blok yang terpisah, seperti layaknya paragraf pada dokumen biasa. Paragraf sangat penting dalam membuat struktur teks yang rapi dan mudah dibaca.

1. Tag Dasar untuk Paragraf

Untuk membuat paragraf di HTML, kita menggunakan tag <p> Ini adalah tag khusus yang menandakan bahwa isi di dalamnya adalah sebuah paragraf.

<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Belajar HTML #01</title>
    </head>
    <body>
      <p> Ini Adalah Paragraf </p>
    </body>
  </html>

Penjelasan

<p> adalah tag pembuka paragraf.
</p> adalah tag penutup paragraf.
Teks di antara tag tersebut adalah isi paragraf.

Setiap kali kamu membuat tag

, browser akan menampilkan teks tersebut dalam blok baru, dengan spasi (jarak) otomatis di atas dan bawahnya.

2. Menulis Beberapa Paragraf

HTML tidak otomatis membuat baris baru ketika kamu menekan Enter di editor. Jadi, jika kamu ingin membuat dua paragraf, kamu harus menggunakan dua tag <p> yang berbeda.

<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Belajar HTML #01</title>
    </head>
    <body>
      <p> Ini adalah paragraf pertama </p>
      <p> Ini adalah paragraf Kedua </p>
    </body>
  </html>

HAsil:

Browser akan menampilkan kedua paragraf tersebut dalam dua blok teks yang terpisah, dengan spasi di antaranya

3. Jangan Menulis Paragraf Tanpa Tag

Banyak pemula menulis seperti ini

Paragraf 1 
Paragraf 2

Masalahnya: Browser akan menampilkan semua teks tersebut dalam satu blok yang sama tanpa pemisah. Karena HTML mengabaikan spasi dan baris baru di dalam kode, kamu wajib menggunakan tag <p> untuk setiap paragraf.

4. Tambahan: Menambahkan Gaya ke Paragraf

Kamu bisa menambahkan style (gaya visual) pada paragraf dengan menggunakan CSS.

Contoh

<p style="color: blue; font-size: 18px; text-align: justify;">Ini adalah paragraf dengan warna biru, ukuran font 18px, dan rata kiri-kanan. </p>

5. Baris Baru di Dalam Paragraf

Jika kamu ingin menambahkan baris baru di dalam paragraf tanpa membuat paragraf baru, kamu bisa menggunakan tag <br> (break).

<p>Ini adalah baris pertama.<br> 
Ini adalah baris kedua dalam paragraf yang sama.</p>

6. Etika Penulisan Paragraf di HTML

Beberapa tips penting:

Jangan membuat paragraf hanya untuk satu kata atau satu kalimat pendek (kecuali memang perlu).
Gunakan paragraf untuk memisahkan ide atau gagasan utama.
Gunakan heading (<h1>,<h2>,dst) untuk memberi judul tiap bagian, bukan <p>

Contoh Lengkap

<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Contoh Paragraf HTML</title>
    </head>
    <body>
      <h1> Belajar HTML: Paragraf </h1>
      <p> HTML memungkinkan kita untuk membuat paragraf teks dengan mudah menggunakan tag <p>. Paragraf membantu memecah konten agar lebih mudah dibaca </p>
      <p> Setiap paragraf akan otomatis ditampilkan dalam blok terpisah oleh browser. Ini sangat berguna ketika kita ingin membuat struktur tulisan yang jelas dan rapi. </p>
       <p> Jika kamu ingin membuat baris baru di dalam paragraf yang sama, gunakan tag <br> </p>
    </body>
  </html>

Kesimpulan

Gunakan <p> untuk membuat paragraf di HTML.
Jangan hanya mengandalkan Enter di keyboard — HTML butuh tag <p>.
Gunakan <p> untuk baris baru di dalam paragraf.
Tambahkan CSS untuk memperindah tampilan paragraf.
Paragraf membantu menyusun konten menjadi lebih terstruktur dan mudah dipahami.

Membuat Heading di HTML

Heading di HTML

Heading (judul) di HTML digunakan untuk memberi struktur pada halaman web. Heading membantu pengunjung dan mesin pencari memahami hierarki dan isi dari sebuah halaman.

1. Tag Dasar untuk Heading

HTML menyediakan enam level heading, dari <h1> hingga <h6>. Heading level 1 (<h1>) adalah yang paling penting dan biasanya digunakan untuk judul utama halaman, sedangkan <h6> untuk subjudul yang paling rendah.

<h1>Ini Heading Utama</h1>
<h2>Ini Subheading Level 2</h2>
<h3>Ini Subheading Level 3</h3>
<h4>Ini Subheading Level 4</h4>
<h5>Ini Subheading Level 5</h5>
<h6>Ini Subheading Level 6</h6>

Setiap tag heading secara otomatis ditampilkan dengan ukuran dan ketebalan berbeda sesuai levelnya. Namun, kamu bisa mengatur tampilannya menggunakan CSS.

2. Fungsi Heading

Struktur: Heading membantu membuat struktur halaman menjadi lebih rapi dan logis.
SEO: Heading penting untuk optimasi mesin pencari (SEO), karena mesin pencari memperhatikan isi dari tag <h1>, <h2>, dan seterusnya.
Aksesibilitas: Membantu pembaca layar memahami isi halaman dengan lebih cepat.

3. Jangan Gunakan Heading untuk Teks Biasa

Beberapa pemula sering menggunakan heading hanya untuk memperbesar teks. Hal ini tidak disarankan. Jika kamu hanya ingin memperbesar ukuran teks, gunakan CSS.

<p style="font-size: 24px;">Ini paragraf yang diperbesar dengan CSS</p>

4. Contoh Struktur Heading yang Baik

Gunakan heading secara berurutan dan jangan lompat level tanpa alasan. Berikut contoh struktur yang benar:

<h1>Tutorial HTML</h1>
<h2>1. Dasar HTML</h2>
<h3>1.1 Tag Paragraf</h3>
<h3>1.2 Tag Heading</h3>
<h2>2. CSS Dasar</h2>
<h3>2.1 Selektor CSS</h3>

5. Mengatur Tampilan Heading dengan CSS

Kamu bisa mengatur ukuran, warna, dan gaya teks heading menggunakan CSS. Contohnya:

<style>
  h1 {
    color: navy;
    font-size: 36px;
    text-align: center;
  }
</style>
<h1>Judul Utama Halaman</h1>

Kesimpulan

Gunakan tag <h1> hingga <h6> untuk membuat judul dan subjudul.
Jaga struktur heading agar tetap berurutan dan logis.
Jangan gunakan heading hanya untuk memperbesar teks, gunakan CSS untuk itu.
Heading membantu pembaca dan mesin pencari memahami isi halaman.

Cara Membuat Komentar

Komentar di HTML

Komentar dalam HTML digunakan untuk memberi catatan, penjelasan, atau menonaktifkan kode tanpa menghapusnya. Komentar ini tidak akan ditampilkan di browser saat halaman dibuka.

1. Cara Menulis Komentar

Komentar di HTML ditulis menggunakan sintaks khusus sebagai berikut:

<!-- Ini adalah komentar -->

Semua teks di antara  dianggap sebagai komentar dan tidak akan tampil di halaman web.

2. Fungsi Komentar

Penjelasan: Memberi catatan untuk diri sendiri atau developer lain agar lebih mudah memahami kode.
Debugging: Menonaktifkan bagian tertentu dari kode HTML saat pengujian.
Organisasi: Membagi dan memberi label pada bagian-bagian kode agar lebih terstruktur.

3. Contoh Penggunaan Komentar

Berikut adalah contoh nyata penggunaan komentar dalam kode HTML:

<!-- Bagian Header -->
<header>
  <h1>Selamat Datang</h1>
</header>

<!-- Konten utama dimulai dari sini -->
<main>
  <p>Ini adalah isi utama halaman.</p>
</main>

4. Menonaktifkan Kode Sementara

Kamu juga bisa menggunakan komentar untuk "mematikan" kode HTML tanpa menghapusnya:

<!-- <img src="gambar.jpg" alt="Gambar Ini Dinonaktifkan" /> -->

Browser tidak akan menampilkan gambar tersebut karena kode-nya berada di dalam komentar.

5. Tips Menggunakan Komentar

Gunakan komentar seperlunya, jangan terlalu banyak agar tidak membuat file HTML menjadi berantakan.
Pastikan komentar tidak ditempatkan di dalam tag yang tidak mendukungnya seperti dalam atribut.
Komentar sebaiknya menjelaskan tujuan atau fungsi dari suatu bagian kode.

Kesimpulan

Komentar HTML ditulis menggunakan .
Tidak terlihat oleh pengguna akhir dan hanya muncul di kode sumber.
Digunakan untuk memberi catatan, membantu debugging, dan menonaktifkan sementara bagian kode.

Text Formatting HTML

Text Formatting di HTML

Text formatting (pemformatan teks) di HTML digunakan untuk mengubah tampilan teks, seperti menebalkan, memiringkan, atau menandai teks penting. Ini membantu menonjolkan informasi penting dalam halaman web.

1. Tag Pemformatan Dasar

Berikut adalah beberapa tag pemformatan teks yang sering digunakan:

<b>Teks Tebal</b>
<strong>Teks Penting</strong>
<i>Teks Miring</i>
<em>Teks Penekanan</em>
<mark>Teks Sorotan</mark>
<small>Teks Kecil</small>
<del>Teks Dicoret</del>
<ins>Teks Disisipkan</ins>
<sub>Teks Subskrip</sub>
<sup>Teks Superskrip</sup>

2. Perbedaan Antara `<b>` dan `<strong>`

<b>: Hanya menampilkan teks dalam bentuk tebal, tanpa makna khusus.
<strong>: Memberi penekanan penting pada teks (diperhatikan oleh mesin pencari dan pembaca layar).

3. Contoh Penggunaan dalam Paragraf

Tag pemformatan bisa digunakan di dalam paragraf untuk menonjolkan bagian tertentu:

<p>Belajar <strong>HTML</strong> sangat <em>penting</em> untuk menjadi web developer.</p>
<p>Gunakan <mark>tag mark</mark> untuk menyorot teks.</p>

4. Format Teks Khusus

HTML juga menyediakan tag untuk menambahkan makna tertentu pada teks, seperti:

<del>: Menandai teks yang dihapus.
<ins>: Menandai teks yang disisipkan.
<sub> dan <sup>: Digunakan untuk rumus kimia atau matematika.

<p>H<sub>2</sub>O adalah air.</p>
<p>E = mc<sup>2</sup> adalah rumus Einstein.</p>

5. Tips Penggunaan

Gunakan <strong> dan <em> untuk penekanan yang bermakna (semantik).
Gunakan CSS jika ingin lebih banyak kontrol atas gaya teks.
Hindari penggunaan tag pemformatan hanya untuk estetika, utamakan makna.

Kesimpulan

HTML menyediakan berbagai tag untuk memformat teks seperti <b>, <i>, <mark>, dan lainnya.
Beberapa tag seperti <strong> dan <em> punya makna semantik untuk SEO dan aksesibilitas.
Gunakan tag sesuai tujuan, dan kombinasikan dengan CSS untuk tampilan yang lebih menarik.

Cara Membuat Link di HTML

Dalam HTML, link (tautan) adalah elemen yang digunakan untuk mengarahkan pengguna ke halaman lain, dokumen, bagian tertentu dalam halaman, atau bahkan aplikasi email. Link dibentuk menggunakan elemen <a> (anchor).

Langkah 1: Membuat Link Dasar

Link dasar dibuat dengan elemen <a> dan atribut href sebagai tujuan tautannya:

<a href="https://www.google.com">Kunjungi Google</a>

Ketika pengguna mengklik "Kunjungi Google", browser akan membuka alamat https://www.google.com.

Langkah 2: Menambahkan Atribut Target

Gunakan atribut target untuk menentukan di mana link akan dibuka:

_self (default): Membuka di tab yang sama.
_blank: Membuka di tab baru.

<a href="https://youtube.com" target="_blank">Buka YouTube di Tab Baru</a>

Langkah 3: Link ke Halaman Internal

Untuk mengarahkan ke halaman lain dalam satu website (internal link), cukup gunakan nama file atau folder tujuannya:

<a href="kontak.html">Halaman Kontak</a>

Langkah 4: Link ke Bagian Tertentu dalam Halaman

Kamu bisa membuat link yang langsung menuju bagian tertentu dari halaman dengan menggunakan ID:

<a href="#produk">Lihat Produk</a>

...

<section id="produk">
  <h2>Daftar Produk</h2>
</section>

Langkah 5: Membuat Link Email

Kamu bisa membuat link yang membuka aplikasi email dengan format mailto::

<a href="mailto:admin@example.com">Kirim Email</a>

Langkah 6: Link untuk Download File

Gunakan atribut download agar browser mendownload file, bukan membukanya:

<a href="dokumen.pdf" download>Download PDF</a>

Langkah 7: Menambahkan Link pada Gambar dan Tombol

Kamu bisa membungkus elemen seperti gambar atau tombol di dalam <a> agar bisa diklik seperti link:

Contoh Link Gambar:

<a href="produk.html">
  <img src="gambar-produk.jpg" alt="Produk">
</a>

Contoh Link Tombol Bootstrap:

<a href="checkout.html" class="btn btn-primary">Beli Sekarang</a>

Tips Tambahan

Gunakan teks link yang jelas, hindari "klik di sini".
Pastikan semua link bekerja (hindari broken link).
Gunakan rel="noopener noreferrer" jika memakai target="_blank".
Link dapat distyling dengan CSS untuk menyesuaikan warna, hover, dan animasi.

Kesimpulan

Tag <a> digunakan untuk membuat berbagai jenis link.
Link dapat diarahkan ke halaman luar, dalam, bagian tertentu, email, atau file.
Kamu bisa menggabungkan <a> dengan gambar, tombol, atau CSS untuk hasil yang lebih menarik.

Beri Dukungan untuk Update Materi Selanjutnya

Jika Anda merasa materi ini bermanfaat, bantu kami untuk terus mengembangkan konten pembelajaran yang berkualitas. Dukungan seikhlasnya dari Anda sangat berarti bagi kelangsungan proyek ini.

Donasi Sekarang

Pengenalan Dasar HTML untuk Pemula

Apa itu HTML?

Peralatan untuk Belajar HTML

1. Teks Editor

2. Web Browser untuk Membuka HTML

Membuat Dokumen HTML Pertama

Nama File untuk HTML

1. Extensi file HTML

2. Nama Khusus untuk Homepage

3. Hindari Beberapa Hal ini..

Struktur Dasar HTML

Pelajari Apa itu Tag HTML

1. Apa itu Tag HTML?

2.Atribut HTML

Ringkasan

Membuat Paragraf di HTML

Paragraf di HTML

1. Tag Dasar untuk Paragraf

2. Menulis Beberapa Paragraf

3. Jangan Menulis Paragraf Tanpa Tag

4. Tambahan: Menambahkan Gaya ke Paragraf

5. Baris Baru di Dalam Paragraf

6. Etika Penulisan Paragraf di HTML

Kesimpulan

Membuat Heading di HTML

Heading di HTML

1. Tag Dasar untuk Heading

2. Fungsi Heading

3. Jangan Gunakan Heading untuk Teks Biasa

4. Contoh Struktur Heading yang Baik

5. Mengatur Tampilan Heading dengan CSS

Kesimpulan

Cara Membuat Komentar

Komentar di HTML

1. Cara Menulis Komentar

2. Fungsi Komentar

3. Contoh Penggunaan Komentar

4. Menonaktifkan Kode Sementara

5. Tips Menggunakan Komentar

Kesimpulan

Text Formatting HTML

Text Formatting di HTML

1. Tag Pemformatan Dasar

2. Perbedaan Antara <b> dan <strong>

3. Contoh Penggunaan dalam Paragraf

4. Format Teks Khusus

5. Tips Penggunaan

Kesimpulan

Cara Membuat Link di HTML

Cara Membuat Link di HTML

Langkah 1: Membuat Link Dasar

Langkah 2: Menambahkan Atribut Target

Langkah 3: Link ke Halaman Internal

Langkah 4: Link ke Bagian Tertentu dalam Halaman

Langkah 5: Membuat Link Email

Langkah 6: Link untuk Download File

Langkah 7: Menambahkan Link pada Gambar dan Tombol

Tips Tambahan

Kesimpulan

Beri Dukungan untuk Update Materi Selanjutnya

2. Perbedaan Antara `<b>` dan `<strong>`