HTML (Hypertext Markup Language) adalah bahasa pemrograman yang digunakan untuk membuat dan mengatur tampilan halaman web. Dengan HTML, kita dapat menambahkan teks, gambar, audio, video, dan elemen lainnya ke dalam halaman web.
Bagi yang masih awam dengan HTML, mungkin terlihat rumit dan sulit untuk dipelajari. Namun, sebenarnya membuat kode HTML cukup mudah dan dapat dipelajari dengan cepat.
1. Mulailah dengan Text Editor
Text editor adalah program yang digunakan untuk menulis kode HTML. Beberapa contoh text editor yang populer adalah Notepad, Notepad++, Sublime Text, dan Visual Studio Code.
Pilih text editor yang Anda sukai dan buka program tersebut.
2. Mulailah dengan Tag HTML Dasar
Setiap kode HTML harus dimulai dengan tag HTML dasar. Tag ini memberi tahu browser bahwa halaman web yang kita buat menggunakan kode HTML.
Untuk menambahkan tag HTML dasar, ketikkan kode berikut:
<!DOCTYPE html>
Kode tersebut harus diletakkan di awal dokumen HTML.
3. Menambahkan Head dan Body
Setelah menambahkan tag HTML dasar, kita perlu menambahkan tag head dan body. Tag head berisi informasi tentang halaman web, seperti judul halaman, deskripsi, dan meta tag. Sedangkan tag body berisi konten halaman web yang akan ditampilkan.
Untuk menambahkan tag head dan body, ketikkan kode berikut:
<head></head><body></body>
4. Menambahkan Judul Halaman
Judul halaman adalah judul yang ditampilkan pada tab browser ketika halaman web dibuka. Untuk menambahkan judul halaman, tambahkan tag title di dalam tag head:
<title>Judul Halaman</title>
5. Menambahkan Paragraf
Paragraf adalah elemen dasar dalam HTML. Untuk menambahkan paragraf, gunakan tag p:
<p>Isi paragraf di sini</p>
6. Menambahkan Heading
Heading digunakan untuk membuat judul atau sub-judul pada halaman web. Ada enam level heading dalam HTML, dimulai dari h1 hingga h6. Heading level 1 (h1) adalah yang paling penting, sedangkan heading level 6 (h6) adalah yang paling tidak penting.
Untuk menambahkan heading, gunakan tag h1 hingga h6:
<h1>Judul Heading</h1>
7. Menambahkan Gambar
Gambar dapat menambahkan visualisasi pada halaman web. Untuk menambahkan gambar, gunakan tag img:
<img src="namafile.jpg" alt="deskripsi gambar">
Src adalah atribut yang menunjukkan lokasi file gambar, sedangkan alt adalah deskripsi alternatif untuk gambar tersebut.
8. Menambahkan Link
Link digunakan untuk menghubungkan halaman web satu dengan yang lain. Untuk menambahkan link, gunakan tag a:
<a href="alamat-link">Teks link</a>
Href adalah atribut yang menunjukkan alamat URL tujuan, sedangkan teks link adalah teks yang akan ditampilkan sebagai link.
9. Menambahkan Daftar
Daftar digunakan untuk menampilkan informasi dalam bentuk daftar. Ada dua jenis daftar dalam HTML, yaitu ordered list (daftar terurut) dan unordered list (daftar tidak terurut).
Untuk menambahkan ordered list, gunakan tag ol:
<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ol>
Untuk menambahkan unordered list, gunakan tag ul:
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>
10. Menambahkan Tabel
Tabel digunakan untuk menampilkan data dalam bentuk tabel. Untuk menambahkan tabel, gunakan tag table:
<table><tr><th>Kolom 1</th><th>Kolom 2</th></tr><tr><td>Isi 1</td><td>Isi 2</td></tr>
</table>
Tag tr digunakan untuk menambahkan baris, th digunakan untuk menambahkan header kolom, dan td digunakan untuk menambahkan isi kolom.
11. Menambahkan Formulir
Formulir digunakan untuk mengumpulkan data dari pengguna. Untuk menambahkan formulir, gunakan tag form:
<form action="proses.php" method="post"><label for="nama">Nama:</label><input type="text" id="nama" name="nama"><label for="email">Email:</label><input type="email" id="email" name="email"><input type="submit" value="Kirim">
</form>
Action adalah atribut yang menunjukkan alamat URL tempat data akan diproses, sedangkan method adalah metode pengiriman data (post atau get). Input type text digunakan untuk menambahkan kotak teks, sedangkan input type email digunakan untuk menambahkan kotak email. Label digunakan untuk memberi label pada input, sedangkan submit digunakan untuk menambahkan tombol kirim.
12. Menambahkan Video
Video dapat menambahkan konten multimedia pada halaman web. Untuk menambahkan video, gunakan tag video:
<video src="namafile.mp4" width="640" height="360" controls></video>
Src adalah atribut yang menunjukkan lokasi file video, sedangkan width dan height adalah ukuran video dalam piksel.
13. Menambahkan Audio
Audio juga dapat menambahkan konten multimedia pada halaman web. Untuk menambahkan audio, gunakan tag audio:
<audio src="namafile.mp3" controls></audio>
Src adalah atribut yang menunjukkan lokasi file audio, sedangkan controls adalah atribut yang menambahkan kontrol pemutar audio.
14. Menambahkan Karakter Khusus
Karakter khusus seperti tanda kutip, simbol matematika, dan karakter bahasa lain dapat ditambahkan pada halaman web menggunakan kode HTML khusus. Contohnya:
<p>I love <b><i>HTML</i></b>!</p>
Tag b digunakan untuk menambahkan teks tebal, sedangkan tag i digunakan untuk menambahkan teks miring.
15. Menambahkan CSS
CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan halaman web. CSS dapat digunakan untuk mengubah warna, font, ukuran, dan tata letak elemen HTML.
Untuk menambahkan CSS pada halaman web, buat file CSS terpisah atau gunakan tag style di dalam tag head:
<head><style>p {color: red;font-size: 20px;}</style>
</head>
Kode tersebut akan mengubah warn
Artikel Cara Membuat Kode HTML
© Copyright 2023 TEKNOBGT.COM
