20+ Contoh Coding HTML untuk Pemula: Syntax dan Caranya
Pelajari contoh coding hTML di artikel ini, lengkap!
Software Engineering
RevoU Staff
Bagi pemula yang ingin berkecimpung di dunia pengembangan web mungkin saja dihadapkan dengan kompleksitas materi yang harus dipelajari. Kamukah salah satunya? Kalau iya, kamu memulai di artikel yang tepat, karena HTML adalah salah satu bahasa yang harus kamu kuasai sebagai web developer.
Melalui artikel ini, kita akan membahas secara mendalam mengenai penulisan script code pengkodean atau coding HTML.
Apa itu HTML?
HTML, singkatan dari HyperText Markup Language, adalah bahasa mark up pemrograman yang digunakan untuk membuat struktur dasar sebuah halaman web. HTML berfungsi sebagai pondasi atau kerangka dari setiap situs web yang kamu kunjungi.
Mengapa HTML Penting?
Tanpa HTML, halaman web akan tampak kosong dan tidak terstruktur. Bayangkan jika sebuah bangunan tanpa pondasi, tentu tidak akan kuat dan kokoh, bukan? Begitu juga dengan halaman web, HTML adalah pondasi yang membuat halaman web dapat "berdiri" dengan struktur yang rapi.
Sintaks Dasar untuk Coding HTML
Sebelum lanjut lebih jauh, mari kita meluruskan bahwa istilah “coding HTML” sebenarnya tidaklah tepat. Alasannya, HTML bukan bahasa pemrograman sehingga tidak melibatkan konsep pemrograman tradisional seperti variabel, loop, dan conditional statement.
Meskipun demikian, istilah "coding HTML" sering digunakan secara informal untuk merujuk pada proses pembuatan dan penulisan kode, snippet, atau tag HTML untuk merancang dan menyusun halaman web.
Untuk menuliskan kode script HTML, sintaks atau aturan penulisan menjadi konsep dasar yang harus dipahami semua web developer. Sintaks HTML berisi serangkaian elemen atau tag, yang digunakan untuk mendefinisikan jenis konten.
Tag biasanya berpasangan dan mengandung konten di antara tag pembuka dan penutup. Misalnya, < p > adalah tag pembuka dan < /p > adalah tag penutup. Konten yang berada di antara kedua tag ini akan ditampilkan sebagai paragraf di halaman web.
Menutup setiap tag HTML adalah bagian penting dari sintaks HTML. Selain itu, ada beberapa aturan penulisan dalam script code HTML yang perlu diperhatikan:
Memberikan atribut ‘alt’ elemen < img >
Atribut ini memberikan deskripsi tambahan untuk elemen-elemen gambar dan berfungsi penting untuk aksesibilitas website. Semisal, pengguna dengan keterbatasan penglihatan atau yang menggunakan text-to-speech/voice reading extension, tetap bisa mendengar deskripsi alternatif yang diberikan melalui atribut ‘alt’ saat membaca halaman web.
Susun HTML sesuai hierarkinya
Elemen HTML harus diletakkan dalam hierarki yang benar dan terstruktur dengan baik. Artinya, elemen yang dibuka harus ditutup sebelum membuka elemen lainnya di dalamnya.
Misalnya, jika ada elemen < div > yang dibuka, maka elemen tersebut harus ditutup sebelum membuka elemen baru di baru di dalamnya. Ini membantu menjaga struktur yang jelas dan memastikan setiap elemen berada pada tempat yang tepat dalam struktur halaman.
Text Editor untuk Penulisan Script Code HTML
Dalam dunia pengembangan web, HTML editor yang kamu gunakan memengaruhi pengalaman selama membangun halaman web. VS Code adalah pilihan populer di antara developer karena fitur-fiturnya yang kaya dan integrasi alat pengembangan lanjutan. Dengan dukungan ekstensi dan antarmuka yang user-friendly. VS Code juga memudahkan penulisan dan debug kode.
Di sisi lain, Notepad adalah editor teks sederhana yang ada di hampir setiap komputer Windows. Meskipun tidak memiliki fitur khusus untuk pengembangan, Notepad tetap menjadi pilihan bagi mereka yang ingin memulai tanpa kerumitan. Kedua opsi ini menawarkan pendekatan yang berbeda, jadi pilihlah sesuai dengan preferensi dan kebutuhanmu.
Contoh Penulisan Script Code HTML
Berikut contoh penulisan dan tampilannya di browser untuk website fashion e-commerce rekaan bernama Ari&Style.
Script:
<!DOCTYPE html>
<html>
<head>
<title>Ari&Style Beranda</title>
</head>
<body>
<h1>Selamat Datang di Ari&Style</h1>
<nav>
<ul>
<li><a href="#pria">Pria</a></li>
<li><a href="#wanita">Wanita</a></li>
<li><a href="#aksesoris">Aksesoris</a></li>
</ul>
</nav>
<h2>Produk Terbaru</h2>
<footer>
<p>© 2023 Ari&Style</p>
</footer>
</body>
</html>Dengan kode HTML di atas, berikut contoh salah satu tampilan output-nya di browser:
Kode di atas menjelaskan beberapa elemen dasar lainnya dalam HTML:
< header >: Biasanya berisi judul situs dan navigasi utama.
< nav >: Digunakan untuk blok navigasi, biasanya berisi daftar link.
< ul >: Mendefinisikan daftar tidak berurutan, di mana setiap item daftar ditandai dengan bullet.
< li >: Menentukan item dalam daftar.
< a >: Membuat hyperlink.
< footer >: Biasanya berisi informasi tentang penulis, hak cipta, dan link ke dokumen terkait.
Berikutnya, mari berlatih dengan 20 contoh script code HTML sederhana di bawah ini untuk setiap bagian halaman website secara lebih mendetail:
#1 Membuat Judul Halaman
<title>Judul Halaman Anda</title>#2 Membuat Paragraf
<p>Ini adalah contoh paragraf.</p>#3 Membuat Tautan/Link
<a href="https://www.example.com">Kunjungi Website Kami</a>#4 Membuat Gambar
<img src="gambar.jpg" alt="Deskripsi Gambar">#5 Membuat Bullet List
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>#6 Membuat Heading Berbeda
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>#7 Membuat Teks Bold
<strong>Teks tebal ini</strong>#8 Membuat Select Dropdown
<select>
<option value="opsi1">Opsi 1</option>
<option value="opsi2">Opsi 2</option>
</select>#9 Menyisipkan Video YouTube
<iframe width="560" height="315"
src="https://www.youtube.com/embed/ID_VIDEO" frameborder="0" allowfullscreen></iframe>#10 Membuat Tabel Sederhana
<table border="1">
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
</tr>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
</table>#11 Mengatur Subscript
H<sub>2</sub>O#12 Mengatur Superscript
E = mc<sup>2</sup>#13 Menambahkan CTA Button
<button type="button">Klik Saya!</button>#14 Membuat Formulir
<form action="proses_form.php" method="post">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama">
<input type="submit" value="Kirim">
</form>#15 Mengatur Font
<p style="font-family: Arial;">Teks dengan font Arial</p>#16 Mengatur Text Size
<p style="font-size: 20px;">Teks dengan ukuran 20px</p>#17 Mengatur Text Color
<p style="color: red;">Teks berwarna merah</p>#18 Meng-highlight Text
<p><mark>Teks yang di-highlight</mark></p>#19 Menambahkan Quote
<blockquote>
Ini adalah kutipan atau quote.
</blockquote>#20 Membuat Cross-through Text
<p><s>Teks yang dicoret</s></p>Peran HTML dalam Web Development
Peran HTML dalam front-end development bukan hanya sebatas membangun struktur dan markup konten. Meskipun CSS bertanggung jawab atas tampilan dan styling, dan JavaScript untuk interaktivitas dan perilaku dinamis, HTML tetap menjadi dasar dari semua itu.
HTML memberikan struktur, makna, dan tata letak yang menjadi landasan bagi komponen-komponen lain dalam pengembangan front-end.
Dalam konteks front-end development, HTML bekerja sama erat dengan CSS dan JavaScript untuk menciptakan pengalaman pengguna yang kaya dan interaktif di halaman web. Peran HTML adalah membangun fondasi dan kerangka kerja yang memungkinkan CSS dan JavaScript berfungsi dengan baik.
Penutup
Dengan pemahaman yang baik tentang HTML, seorang web developer dapat menciptakan tata letak web yang terstruktur, aksesibilitas yang lebih baik, dan membangun dasar yang kokoh untuk pengembangan front-end yang sukses.
Dalam pekerjaan sehari-hari seorang web developer, HTML akan selalu menjadi elemen kunci dalam membangun user experience yang baik dan memastikan bahwa konten dapat diakses oleh semua pengguna.