HTML adalah tulang punggung internet saat ini. Jutaan situs web bersama-sama membentuk internet. Di sinilah HTML menjadi fondasi semua situs web ini. Dua puluh tahun yang lalu, bahkan jika Anda hanya seorang blogger hobi, Anda harus menguasai beberapa kode web untuk melindungi diri sendiri atau menambahkan fungsi sederhana ke situs Anda. Namun sekarang, tersedia begitu banyak editor dan plugin sehingga pengetahuan dasar HTML pun tidak lagi diperlukan.
Masalahnya, jika Anda tidak mengetahui beberapa hal mendasar, Anda bisa dengan mudah mengalami masalah serius di blog Anda dan harus menyewa pengembang mahal untuk memperbaiki masalah yang mungkin kecil. Tidak hanya itu, membuat perubahan pada blog Anda, seperti menambahkan widget teks khusus, membutuhkan sedikit pengetahuan.
Dan jika Anda mengalami tata letak konten yang tidak terlihat benar, pengetahuan HTML dapat membantu Anda kembali ke jalur yang benar.
Sebelum Anda Memulai – Dasar-Dasar HTML
Apa itu HTML?
HTML adalah singkatan dari Hyper Text Markup LBahasa. Ini adalah bahasa standar untuk menandai konten pada peramban web.
HTML direpresentasikan oleh "Elemen". Elemen juga dikenal sebagai "Tag".
Mengapa HTML dibutuhkan?
Peramban web hanya dapat menampilkan situs web jika ditulis dalam bahasa yang didukungnya. HTML adalah bahasa markah yang paling umum dan paling mudah diterima oleh peramban web.
Itulah mengapa Anda membutuhkan HTML.
Apakah HTML peka huruf besar-kecil?
HTML tidak peka huruf besar-kecil. Namun, praktik terbaiknya adalah menulis HTML dengan huruf besar-kecil yang tepat.
Langkah-Langkah Membuat File HTML Pertama Anda
Anda bisa membuat berkas HTML dasar menggunakan Notepad di komputer. Namun, akan sulit jika harus menulis banyak baris kode.
Anda membutuhkan Editor Kode. Editor kode yang baik akan memudahkan penulisan dan pengorganisasian kode yang besar. Saya menggunakan dan merekomendasikan Notepad++ (gratis dan sumber terbuka) untuk menulis bahasa pemrograman web. Ada editor lain yang bisa Anda gunakan seperti Sublime Text, Atom, dll.
Inilah yang perlu Anda lakukan:
- Instal editor kode
- Buka pintunya
- Buat file baru
- Simpan sebagai file .html
1. Halo Dunia!
Salin dan tempel kode berikut ke dalam berkas HTML baru Anda, lalu simpan. Sekarang jalankan di peramban web Anda.
Kode HTML
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Keluaran:
Selamat! Anda telah membuat berkas HTML pertama Anda. Anda tidak perlu memahaminya saat ini. Kami akan membahasnya nanti.
Memahami Struktur HTML
Setiap berkas HTML memiliki struktur dasar yang umum. Di sinilah semuanya dimulai. Dan setiap halaman kode yang besar akan kembali ke struktur ini setelah dipangkas.
Jadi, mari kita coba memahaminya dari kode "Hello World!". Elemen-elemen berikut adalah bagian wajib untuk setiap berkas HTML.
- = Ini adalah deklarasi ke browser bahwa ini adalah berkas HTML. Anda harus menentukannya sebelum menandai.
- = Ini adalah elemen akar dari sebuah berkas HTML. Semua yang Anda tulis berada di antara Dan .
- = Ini adalah bagian meta informasi untuk peramban. Kode di dalam tag ini tidak memiliki keluaran visual.
- = Ini adalah bagian yang ditampilkan oleh peramban web. Apa yang Anda lihat di situs web sebenarnya adalah rendering kode di antara Dan .
2. Tag HTML
HTML adalah gabungan ratusan tag yang berbeda. Anda perlu mempelajari cara kerjanya. Anda juga harus memastikan bahwa mereka telah menggunakannya dengan benar.
Tag HTML biasanya memiliki tag pembuka dan penutup. Tag pembuka memiliki kata kunci yang diapit oleh tanda kurang dari (<) dan lebih besar dari (>). Tag penutup memiliki semua yang sama, kecuali garis miring (/) tambahan setelah tanda kurang dari (<).
Tag Kepala
Semua tag kepala berada di antara Dan Mereka berisi informasi meta untuk peramban web dan mesin pencari. Pada dasarnya, mereka tidak memiliki keluaran visual.
Tag judul menentukan judul halaman web yang terlihat di tab browser. Informasi ini digunakan oleh program web dan mesin pencari. Anda dapat menggunakan maksimal satu judul per berkas HTML.
Kode:
<title>My first web page</title>
Tag tautan menghubungkan halaman HTML Anda dengan sumber daya eksternal. Kegunaan utamanya adalah menghubungkan halaman HTML dengan lembar gaya CSS. Tag ini bersifat menutup sendiri dan tidak memerlukan akhiran Di sini rel berarti hubungan dengan berkas dan src berarti sumber.
Kode:
<link rel="stylesheet" type="text/css" src="style.css">Meta adalah tag penutup otomatis lain yang menyediakan informasi meta dari sebuah berkas HTML. Mesin pencari dan layanan web lainnya menggunakan informasi ini. Tag meta wajib digunakan jika Anda ingin mengoptimalkan halaman Anda untuk mesin pencari.
Kode:
<meta name="description" content="This is the short description that search engines show"Tag skrip digunakan untuk menyertakan skrip sisi server atau membuat tautan ke berkas skrip eksternal. Tag ini dapat memiliki dua atribut pada tag pembuka. Satu adalah tipe dan yang lainnya adalah sumber (src).
Kode:
<script type="text/javascript" src="scripts.js"></script>Tag noscript berfungsi ketika skrip dinonaktifkan di peramban web. Tag ini membuat halaman kompatibel bagi mereka yang tidak mengizinkan skrip di peramban web mereka.
Kode:
<noscript><p>Alas! Scripts are disabled.</p></noscript>Tag Tubuh
Semua tag tubuh berada di antara Dan Mereka memiliki keluaran visual. Di sinilah pekerjaan terbanyak dilakukan. Anda harus menggunakan tag ini untuk menyusun konten halaman utama Anda.
ke
Ini adalah tag heading. Heading yang paling penting ditandai dengan dan yang paling tidak penting dengan Anda harus menggunakannya dalam hierarki yang benar.
Kode:
<h1>This is a h1 heading</h1>
<h2>This is a h2 heading </h2>
<h3>This is a h3 heading </h3>
<h4>This is a h4 heading </h4>
<h5>This is a h5 heading </h5>
<h6>This is a h6 heading </h6>Keluaran:
Tag Pemformatan
Teks dalam berkas HTML dapat diformat menggunakan berbagai tag pemformatan. Ini diperlukan ketika Anda ingin menyorot kata atau baris dari konten Anda.
Kode:
<p>You can highlight your text in many ways.</p>
<p>You can <strong>bold</strong>, <u>underline</u>, <em>italic</em>, <mark>mark</mark>, <sub>subscript</sub>, <sup>superscript</sup> and more!</p>Keluaran:
Anda dapat mengalihkan beberapa kode dari proses rendering menggunakan tag komentar. Kode tersebut akan muncul di kode sumber tetapi tidak akan dirender. Kegunaan utama tag ini adalah untuk membuat dokumentasi berkas HTML untuk referensi di kemudian hari.
Contoh:
<!-- <p>You can comment out any code by surrounding them in this way</p> -->Tag HTML Penting Lainnya
Anchor adalah tag penting yang digunakan hampir di mana-mana. Anda tidak akan melihat halaman web apa pun tanpa setidaknya satu tautan anchor.
Strukturnya sama. Ada bagian pembuka dan penutup . Teks yang ingin Anda jangkar berada di antara dan .
Ada beberapa atribut yang menentukan ke mana dan bagaimana pengguna pergi setelah mengkliknya.
- ahref="" = Menentukan tautan tujuan. Tautan diapit tanda kutip ganda.
- target="" = Menentukan apakah URL akan terbuka di tab browser baru atau di tab yang sama. target="_blank" untuk tab baru dan target="_self" untuk dibuka di tab yang sama.
- rel="" = Menentukan hubungan halaman saat ini dengan halaman yang ditautkan. Jika Anda tidak mempercayai halaman yang ditautkan, Anda dapat menentukan rel="nofollow".
Kode:
<p><a target="_blank" href="https://www.google.com/">Click here</a> to go to Google.
It will open in a new tab.</p>
<p><a target="_self" href="https://www.google.com/">Click here</a>.
It will also take you to Google but will open in the current tab.</p>Keluaran:
Tag gambar adalah tag penting lainnya yang tanpanya Anda tidak dapat membayangkan banyak situs web berbasis gambar.
adalah tag yang menutup sendiri. Tidak memerlukan penutupan tradisional seperti Ada beberapa atribut yang perlu Anda ketahui sebelum Anda dapat menggunakannya dengan benar.
- src="" = Ini untuk menentukan tautan sumber gambar. Letakkan tautan tepat di antara tanda kutip ganda.
- alt="" = Ini adalah singkatan dari teks alternatif. Saat gambar Anda tidak dimuat, teks ini akan memberi pengguna gambaran tentang gambar yang hilang.
- lebar="" = Menentukan lebar gambar dalam piksel.
- Tinggi="" = Menentukan tinggi gambar dalam piksel.
<p>This is the Googleplex in August 2014.</p>
<p>This image has a width of 500 pixels and a height of 375 pixels.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG"
alt="Google's Headquarter in August 2014" width="500" height="375" />Keluaran:
Tips: Ingin menyisipkan gambar yang bisa diklik? Bungkus kode gambar dengan tag. Lihat caranya.
atau
Tag daftar untuk membuat daftar item. singkatan dari daftar berurut (daftar bernomor) dan singkatan dari daftar yang tidak berurutan (poin-poin penting).
Item daftar di dalam atau ditandai dengan . li singkatan dari daftar. Anda dapat memiliki sebanyak mungkin seperti yang Anda inginkan di dalam induknya atau menandai.
Kode:
<p>This is an ordered list:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>This is an unordered list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Keluaran:
Tag tabel digunakan untuk membuat tabel data. Ada beberapa tag internal yang mendefinisikan header, baris, dan kolom tabel.
adalah kode induk terluar. Dalam tag ini, singkatan dari table row, singkatan dari kolom tabel dan singkatan dari table header.
Kode:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
<tr>
<td>Jo
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</table>Keluaran:
Catatan: Nilai di dalam yang pertama adalah judul. Jadi, kami menggunakan yang menerapkan efek teks tebal pada teks.
Pengelompokan Tabel
Anda dapat memperluas fungsionalitas tabel menggunakan elemen pengelompokan tabel. Terkadang Anda perlu membuat tabel besar yang terbagi menjadi beberapa halaman.
Dengan mengelompokkan data tabel Anda ke dalam header, body, dan footer, Anda dapat mengaktifkan pengguliran independen. Bagian header dan body akan dicetak ke setiap halaman yang telah direntangkan tabel Anda.
Tag pengelompokan tabel adalah:
- = Untuk membungkus judul tabel. Mencetak ke setiap halaman terpisah tabel.
- = Untuk membungkus data utama tabel. Anda dapat memiliki sebanyak mungkin sesuai kebutuhan Anda. A tag berarti sekelompok data yang terpisah.
- = Untuk membungkus informasi footer tabel. Mencetak ke setiap halaman terpisah tabel.
Harap dicatat bahwa penggunaan pengelompokan tidak wajib. Anda dapat menggunakannya untuk membuat tabel yang lebih besar lebih mudah dibaca. Beberapa pengembang khusus menggunakan tag ini sebagai Pemilih CSS.
Berikut ini adalah cara kita dapat mengelompokkan tabel contoh kita menjadi Bahasa Indonesia: Dan :
Kode:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total Persons:</td>
<td>3</td>
</tr>
</tfoot>
</table>Keluaran:
Elemen formulir digunakan untuk membuat formulir interaktif untuk halaman web. Formulir HTML berisi beberapa elemen yang berurutan. Misalnya: , , dll.
Atribut tindakan dalam formulir sangat penting. Atribut ini merujuk ke halaman sisi server atau pihak ketiga untuk memproses informasi. Untuk pemrosesan, Anda perlu menentukan metode terlebih dahulu.
Anda dapat menggunakan salah satu dari dua metode, "get" atau "post". "Get" mengirimkan semua informasi dalam format URL, sedangkan "Post" mengirimkan informasi dalam isi pesan.
Ada banyak jenis input untuk formulir. Jenis input yang paling dasar adalah teks. Ditulis sebagai Tipe-tipenya juga bisa berupa radio, kotak centang, email, dan sebagainya. Seharusnya ada input tipe kirim di bagian bawah untuk membuat tombol kirim.
Tag digunakan untuk membuat label dan mengaitkannya dengan input. Aturan untuk mengaitkan label dengan input adalah memiliki nilai yang sama pada atribut for="" pada label dan atribut id="" pada input.
Kode:
<form action="#">
<label for="firstname">First Name: </label>
<input type="text" id="firstname"><br>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname"><br>
<label for="bio">Short Bio: </label>
<textarea id="bio" rows="10" cols="30" placeholder="Enter your bio here..."></textarea><br>
<label>Gender:</label><br>
<label for="male">Male</label>
<input type="radio" name="gender" id="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female"><br>
<input type="submit" value="Submit">
<form>Keluaran:
Catatan: Saya telah mengarahkan tindakan ke nilai null karena tidak terhubung ke server mana pun untuk memproses informasi.
3. Atribut HTML
Atribut adalah salah satu jenis pengubah untuk tag HTML. Atribut menambahkan konfigurasi baru ke tag HTML.
Atribut terlihat seperti attributename="" dan terletak di tag HTML pembuka. Nilai atribut diapit oleh tanda kutip ganda.
id="" dan class=""
id dan class adalah pengidentifikasi tag HTML. Elemen HTML yang berbeda diberi nama yang berbeda menggunakan pengidentifikasi. Anda dapat menggunakan satu pengidentifikasi class untuk beberapa elemen. Namun, Anda tidak dapat menggunakan satu pengidentifikasi id untuk beberapa elemen.
Kode:
<h1 class="heading">This is the main title</h1>href=""
href adalah singkatan dari Hypertext Reference. Tag ini mengarahkan pengguna ke tautan referensi. Tag jangkar menggunakan href untuk mengarahkan pengguna ke URL tujuan.
Kode:
<a href="https://www.google.com/">Google</a>src=""
src adalah singkatan dari source. Ini mendefinisikan sumber media atau sumber daya yang Anda gunakan dalam berkas HTML. Sumbernya bisa berupa URL lokal atau pihak ketiga.
Kode:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />alt = ""
Alt adalah singkatan dari alternative. Ini adalah teks cadangan yang digunakan ketika elemen HTML tidak dapat dimuat.
Kode:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt="Google's Headquarter" />gaya=""
Atribut style sering digunakan dalam tag HTML. Atribut ini menjalankan fungsi CSS di dalam tag HTML. Properti gaya Anda diapit oleh tanda kutip ganda.
Kode:
<h2 style="color:red">This is another title</h2>4. Tampilan Kode: Blok vs Inline
Beberapa elemen selalu dimulai pada baris baru dan mengambil lebar penuh yang tersedia. Ini adalah elemen "Blok".
Mantan: Bahasa Indonesia: Bahasa Indonesia: - , bentuk dll.
Beberapa elemen hanya menempati ruang yang diperlukan dan tidak dimulai pada baris baru. Ini adalah elemen "Inline".
Mantan: , , , , dll.
Anda perlu membedakan elemen blok dari elemen sebaris saat menggunakan gaya CSS. Dalam panduan HTML ini, hal ini tidak terlalu diperlukan.
Kode:
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h2>This is a H2 heading. It has Block display.</h2>
<h2>This is <u>another</u> H2 heading. Here the underline tag has Inline display.</h2>
</body>
</html>Keluaran:
5. Kutipan ganda vs kutipan tunggal dalam HTML
Pertanyaan ini sangat jelas. Apa yang harus Anda gunakan dalam HTML? Tanda kutip tunggal atau tanda kutip ganda? Orang-orang sepertinya menggunakan keduanya, tetapi mana yang benar?
Dalam HTML, tanda kutip tunggal dan tanda kutip ganda sama saja. Keduanya tidak berpengaruh pada hasil keluaran.
Anda bisa menggunakan kode apa pun yang Anda inginkan. Namun, mencampur keduanya dalam satu halaman kode dianggap praktik yang buruk. Anda harus konsisten dengan salah satunya.
6. HTML Semantik vs HTML Non-semantik
HTML semantik adalah versi terbaru dari HTML, yang juga disebut HTML5. Ini adalah versi pengembangan dari HTML non-semantik dan XHTML.
Mengapa HTML5 lebih baik? Pada versi sebelumnya, elemen HTML diidentifikasi dengan nama id/kelas. Misalnya: dianggap sebagai sebuah artikel.
Dalam HTML5, Tag merepresentasikan dirinya sendiri sebagai sebuah artikel tanpa memerlukan id/pengidentifikasi kelas apa pun.
Berkat HTML5, kini mesin pencari dan aplikasi web lainnya dapat memahami halaman web dengan lebih baik. Situs web semantik terbukti lebih efektif untuk SEO.
Berikut adalah daftar beberapa tag HTML5 yang populer:
- = Ini untuk membungkus konten utama yang ingin Anda tunjukkan kepada pemirsa.
- = Ini untuk menandai bagian header suatu konten seperti judul atau meta penulis.
- = Ini menentukan konten yang ditentukan pengguna atau independen untuk pemirsa Anda.
- = Dapat mengelompokkan kode apa pun seperti header, footer, atau sidebar. Bisa dibilang, ini adalah bentuk semantik dari div.
- = Di sinilah tempat konten footer, pernyataan sanggahan, atau teks hak cipta Anda berada.
- = Memungkinkan Anda memasukkan berkas audio tanpa mengalami masalah plugin apa pun.
- = Seperti , Anda dapat menyisipkan video menggunakan tag ini tanpa masalah plugin.
Struktur HTML5 sederhana akan terlihat seperti ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first web page</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>This is the title of the article</h2>
<p>Posted by John Doe</p>
</header>
<p>Content of the article goes here</p>
</article>
</main>
<footer>
<p>Copyright 2025 John Doe</p>
</footer>
</body>
</html>7. Validasi HTML
Sebagian besar profesional web memvalidasi kode mereka setelah selesai. Mengapa perlu memvalidasi kode ketika sudah berfungsi dengan baik?
Ada dua kemungkinan alasan untuk memvalidasi kode Anda:
- Ini akan membantu Anda membuat kode Anda kompatibel lintas-peramban dan lintas-platform. Kode tersebut mungkin tidak menampilkan kesalahan di peramban Anda saat ini, tetapi mungkin muncul di peramban lain. Validasi kode akan memperbaikinya.
- Mesin pencari dan program web lainnya mungkin berhenti merayapi halaman Anda jika terdapat kesalahan. Anda dapat mengonfirmasi melalui validasi bahwa tidak ada kesalahan besar.
W3C Validator adalah layanan validasi kode paling populer. Mereka memiliki beberapa metode untuk memvalidasi kode. Anda dapat mengunggah berkas atau langsung memasukkan kode ke mesin validasi mereka.
Mengambil Langkah Berikutnya: Dari Menulis HTML hingga Membangun dan Menghosting Situs Web Anda
Setelah Anda memahami dasar-dasar HTML dengan baik, Anda siap membuat halaman web yang fungsional dan terstruktur dengan baik. Baik Anda melanjutkan pengkodean secara manual atau lebih menyukai pendekatan yang lebih efisien, ada banyak alat yang dapat membantu Anda mewujudkan proyek Anda.
Jika Anda ingin membangun situs web tanpa harus mendalami kode, pertimbangkan untuk menjelajahi daftar pembuat situs web tanpa kode terbaik kamiPlatform ini memungkinkan Anda merancang dan meluncurkan situs web profesional dengan mudah, menggunakan antarmuka drag-and-drop yang intuitif—sempurna untuk mewujudkan ide Anda dengan cepat tanpa mengorbankan fleksibilitas.
Bagi mereka yang siap menjalankan proyek HTML mereka, memilih layanan hosting yang tepat sangatlah penting. Lihat beberapa penyedia hosting situs web statis terbaik dalam panduan ini untuk menemukan pilihan terjangkau yang melengkapi situs berkode manual Anda dengan sempurna.
Apa pun pilihan Anda, menggabungkan keahlian HTML Anda dengan perangkat dan solusi hosting yang tepat akan membangun fondasi bagi kehadiran online Anda. Selamat coding!
