DASAR-DASAR KODE HTML

Dasar-Dasar Koding HTML untuk Pemula

Pendahuluan

Menurut pandangan saya pribadi, HTML adalah pintu masuk paling mudah bagi siapa pun yang ingin belajar membuat website. HTML tidak serumit bahasa pemrograman lain karena fungsinya adalah menyusun struktur halaman web , bukan menjalankan logika yang rumit.

HTML sangat cocok untuk pemula karena:

Mudah...
Tidak membutuhkan perangkat lunak yang mahal
Bisa langsung dijalankan di browser

Apa itu HTML?

HTML adalah singkatan dari HyperText Markup Language . HTML bukan bahasa pemrograman, melainkan bahasa penanda (markup) yang digunakan untuk memberi struktur pada konten website, seperti teks, gambar, tabel, dan tautan.

Dengan HTML, kami memberi tahu browser:

Mana judul
Mana paragraf
Mana gambar
Mana tabel

Struktur Dasar HTML

Setiap file HTML memiliki struktur dasar seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Judul Website</title>
</head>
<body>
    <h1>Halo Dunia</h1>
    <p>Ini adalah website pertama saya.</p>
</body>
</html>

Penjelasan Singkat:

<!DOCTYPE html>→ Menandakan dokumen HTML5
<html>→ Pembungkus seluruh kode HTML
<head>→ Informasi website (judul, meta)
<body>→ Isi utama yang tampil di browser

Konsep Dasar Tag HTML

HTML menggunakan tag yang ditulis dengan tanda kurung sudut <>.

Contoh:

<p>Ini adalah paragraf</p>

Biasanya tag memiliki:

Tag pembuka :<p>
Tag penutup :</p>

Namun ada juga tag yang tidak memiliki penutup, seperti <br>dan <img>.

Tag HTML yang Paling Sering Digunakan

1. Judul (Judul)

<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Judul Kecil</h3>

Heading digunakan untuk judul dan membantu SEO.

2. Paragraf

<p>Ini adalah paragraf.</p>

Digunakan untuk menulis teks biasa.

3. Tautan (Link)

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

Digunakan untuk berpindah halaman.

4. Gambar

<img src="gambar.jpg" alt="Deskripsi gambar">

Menampilkan gambar di halaman web.

Tabel Dasar HTML

Tabel digunakan untuk menampilkan data secara rapi.

Contoh Kode Tabel:

<table border="1">
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Kelas</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Irpan</td>
    <td>X</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Budi</td>
    <td>XI</td>
  </tr>
</table>

Penjelasan:

<table>→ Membuat tabel
<tr>→ Baris tabel
<th>→ Judul kolom
<td>→ Isi tabel

Tabel Tag HTML dan Fungsinya

Tag HTML	Fungsi	Contoh Penggunaan
`<html>`	Membungkus seluruh HTML	Struktur utama
`<head>`	Situs web informasi	Judul, meta
`<body>`	Isi halaman	Konten ditampilkan
`<h1>`	Judul utama	Menuju
`<p>`	Paragraf	Teks
`<a>`	Link	Navigasi
`<img>`	Gambar	Media
`<table>`	Tabel	Data
`<tr>`	Baris tabel	Struktur
`<td>`	Kolom isi	Data
`<th>`	Judul kolom	Judul

Cara Menjalankan HTML

Buka Notepad atau VS Code
Tulis kode HTML
Simpan dengan namaindex.html
Klik dua kali file tersebut
Website langsung tampil di browser

Semoga Artikelnya membantu ya teman-teman...

Cntoh kodingan HTML yang bisa kamu coba edit

<!DOCTYPE html>

<html>

<head>

<title>Situs Web Pertama Saya</title>

</head>

<body>

<h1>Selamat Datang</h1>

<p>Ini adalah website HTML pertama yang saya buat sendiri.</p>

<h2>Tentang Saya</h2>

<p>Nama saya Irpan. Saya sedang belajar dasar-dasar HTML.</p>

<ul>

<li>Membaca</li>

Menu</li>

<li>Belajar Coding</li>

</ul>

<h2>Kontak</h2>

<p>

Kunjungi Google:

</p>

</body>

</html>

Search This Blog

irpanmenulis.blogspot.com

PANDUAN CODINGAN HTML DENGAN MUDAH DAN CEPAT