Salah satu pertanyaan yang sering diajukan oleh pemula dalam belajar HTML adalah: “Apa perintah yang paling pertama dalam mengawali pembuatan HTML?” Artikel ini akan membahas secara rinci langkah-langkah yang harus diikuti untuk membuat dokumen HTML, mulai dari perintah awal hingga penggunaan berbagai elemen dan atribut.
Mengenal HTML
HTML atau HyperText Markup Language merupakan bahasa pemrograman yang digunakan untuk membuat struktur dan tampilan sebuah halaman web. HTML menggunakan sistem tag atau tanda yang disebut dengan elemen untuk mengatur tampilan teks, gambar, video, dan konten lainnya pada halaman web.
Cara Membuat Dokumen HTML Sederhana
Membuat dokumen HTML bisa jadi terlihat sulit bagi pemula, akan tapi sebenarnya tidak sesulit yang dibayangkan. Jika kamu belum tau caranya, silahkan ikuti langkahnya beirkut ini :
✅ Persiapan
Yang pertama harus dilakukan adalah menyiapkan peralatan yang dibutuhkan seperti browser. Ada beberapa browser yang bisa kita gunakan seperti Google Chrome, Internet Explorer, Mozilla Firefox, Safari, Opera, dan masih banyak lagi.
Selain browser, kita juga perlu menyiapkan teks editor seperti Notepad, Notepad++, Sublime Text, Atom, dan Visual Studio Code. Tapi sebaiknya bagi pemula, gunakanlah teks editor yang sederhana seperti Notepad agar lebih mudah dipahami dan tidak membingungkan.
✅ Membuat dokumen file HTML
Setelah menyiapkan editor teks dan pengetahuan dasar, saatnya membahas perintah yang paling pertama dalam mengawali pembuatan HTML.
Untuk membuat dokumen file HTML, Kamu hanya perlu mengikuti empat langkah sederhana berikut ini:
1. Buka Notepad
Untuk pengguna Windows 10 atau yang lebih baru, buka Layar Start dengan mengklik gambar jendela di bagian kiri bawah layar, kemudian ketik Notepad pada kolom pencarian.
Sedangkan untuk pengguna Windows 7 atau yang lebih lama, buka Start > Programs > Accessories > Notepad.
2. Menulis tag HTML
Setelah membuka Notepad, tulis kode HTML yang dibutuhkan untuk membuat halaman web. Berikut adalah perintah awal yang harus kamu tulis dalam dokumen HTML:
<!DOCTYPE html>
<html>
<head>
<title>Judul post</title>
</head>
<body>
<h1>Hello Word</h1>
<p>Paragraf pertama.</p>
</body>
</html>Mari kita bahas masing-masing bagian dari perintah awal tersebut:
- <!DOCTYPE html>
Ini adalah perintah yang harus ditulis di baris pertama dokumen HTML. Perintah ini memberitahu web browser bahwa dokumen yang akan dibaca adalah HTML versi 5. Ini penting karena setiap versi HTML memiliki perbedaan dalam sintaks dan fitur yang didukung. - <html>
Elemen ini digunakan untuk membungkus seluruh konten HTML. Elemen ini memiliki pasangan penutup yaitu </html>. - <head>
Elemen ini berfungsi untuk menyimpan informasi tentang dokumen HTML yang tidak ditampilkan pada halaman web, seperti judul halaman, karakter set yang digunakan, dan style atau skrip yang diterapkan pada dokumen. Elemen ini memiliki pasangan penutup yaitu </head>. - <title>
Elemen ini digunakan untuk menentukan judul halaman yang akan ditampilkan pada tab browser atau judul jendela browser. Elemen ini harus diletakkan di dalam elemen <head> dan memiliki pasangan penutup yaitu </title>. - <body>
Elemen ini digunakan untuk menyimpan konten yang akan ditampilkan pada halaman web, seperti teks, gambar, video, dan konten interaktif lainnya. Elemen ini memiliki pasangan penutup yaitu </body>.
3. Simpan File HTML
Setelah menulis kode HTML, simpan file tersebut dengan ekstensi .html. Pilih File > Save As, kemudian beri nama file dan pastikan Kamu memilih “All Files” pada jenis file dan menambahkan ekstensi .html pada nama file.
4. Buka Halaman Web Kamu di Browser
Setelah file HTML disimpan, buka file tersebut menggunakan browser seperti Google Chrome, Mozilla Firefox, atau Microsoft Edge. Kamu dapat melakukannya dengan mengklik kanan pada file HTML dan memilih “Open with” kemudian memilih browser yang ingin Kamu gunakan.
Sekarang, Kamu sudah berhasil membuat halaman web sederhana menggunakan HTML.
Selamat mencoba dan jangan ragu untuk terus belajar dan mengembangkan kemampuan Kamu dalam membuat halaman web yang lebih kompleks!
✅ Menambahkan Elemen dan Atribut
Setelah menulis perintah awal, kamu bisa mulai menambahkan elemen dan atribut sesuai kebutuhan. Berikut adalah beberapa elemen dasar yang sering digunakan dalam pembuatan dokumen HTML:
- <h1> hingga <h6>: Elemen ini digunakan untuk menambahkan judul atau subjudul pada halaman web. Angka yang digunakan menentukan tingkatan dari judul tersebut, di mana <h1> merupakan judul utama dan <h6> merupakan subjudul tingkat terendah.
- <p>: Elemen ini digunakan untuk menambahkan paragraf teks pada halaman web.
- <a>: Elemen ini digunakan untuk membuat tautan atau hyperlink yang mengarah ke URL lain atau bagian tertentu dalam dokumen HTML.
- <img>: Elemen ini digunakan untuk menampilkan gambar pada halaman web.
- <ul> dan <ol>: Elemen ini digunakan untuk membuat daftar, baik yang tidak berurutan (<ul>) atau berurutan (<ol>). Elemen ini harus digabungkan dengan elemen <li> untuk menambahkan item dalam daftar tersebut.
- <table>: Elemen ini digunakan untuk membuat tabel yang terdiri dari baris dan kolom. Elemen ini harus digabungkan dengan elemen <tr> (baris), <th> (header), dan <td> (data sel) untuk membuat struktur tabel yang lengkap.
Selain elemen, kamu juga bisa menambahkan atribut pada elemen untuk memberikan informasi tambahan atau mengatur tampilan dan perilaku elemen tersebut. Berikut adalah beberapa atribut yang umum digunakan dalam elemen HTML:
- href: Atribut ini digunakan pada elemen <a> untuk menentukan URL tujuan dari tautan tersebut.
- src: Atribut ini digunakan pada elemen <img> untuk menentukan sumber file gambar yang akan ditampilkan.
- alt: Atribut ini digunakan pada elemen <img> untuk memberikan teks alternatif yang akan ditampilkan jika gambar tidak dapat dimuat.
- id: Atribut ini digunakan untuk memberikan identifikasi unik pada elemen HTML, yang berguna untuk mengatur tampilan atau perilaku elemen tersebut melalui CSS atau JavaScript.
- class: Atribut ini digunakan untuk memberikan kelas pada elemen HTML, yang memungkinkan kamu mengatur tampilan atau perilaku beberapa elemen sekaligus melalui CSS atau JavaScript.
✅ Mengatur Tampilan dengan CSS
Setelah menambahkan elemen dan atribut pada dokumen HTML, kamu mungkin ingin mengatur tampilan halaman web tersebut agar lebih menarik. Salah satu cara untuk mengatur tampilan halaman web adalah dengan menggunakan CSS (Cascading Style Sheets).
CSS merupakan bahasa pemrograman yang digunakan untuk mengatur tampilan elemen HTML, seperti warna, ukuran, posisi, dan animasi. CSS bisa ditambahkan pada dokumen HTML melalui beberapa cara, seperti:
1. Inline style
Menambahkan atribut style pada elemen HTML yang ingin diatur tampilannya. Contoh:
<p style="color: red;">Teks berwarna merah</p>2. Internal style
Menambahkan elemen <style> di dalam elemen <head> dokumen HTML. Contoh:
<head>
<style>
p {
color: red;
}
</style>
</head>3. External style
Membuat file CSS terpisah dan menghubungkannya dengan dokumen HTML melalui elemen <link>. Contoh:
<head>
<link rel="stylesheet" href="styles.css">
</head>✅ Mengaktifkan Interaksi dengan JavaScript
Selain mengatur tampilan, kamu juga bisa menambahkan interaksi pada halaman web dengan menggunakan JavaScript. JavaScript merupakan bahasa pemrograman yang memungkinkan kamu untuk mengubah konten, tampilan, dan perilaku elemen HTML secara dinamis.
JavaScript bisa ditambahkan pada dokumen HTML melalui beberapa cara, seperti:
1. Inline event
Menambahkan atribut event pada elemen HTML yang ingin diaktifkan interaksinya, seperti onclick, onmouseover, atau onkeydown. Contoh:
<button onclick="alert('Hello, World!');">Klik Saya!</button>2. Internal script
Menambahkan elemen <script> di dalam elemen <head> atau <body> dokumen HTML. Contoh:
<head>
<script>
function showMessage() {
alert('Hello, World!');
}
</script>
</head>
<body>
<button onclick="showMessage();">Klik Saya!</button>
</body>3. External script
Membuat file JavaScript terpisah dan menghubungkannya dengan dokumen HTML melalui elemen <script>. Contoh:
<head>
<script src="scripts.js"></script>
</head>Dengan mengikuti langkah-langkah di atas, kamu telah berhasil mengawali pembuatan HTML dan mempelajari beberapa elemen, atribut, serta teknik untuk mengatur tampilan dan interaksi halaman web. Teruslah belajar dan eksplorasi lebih banyak tentang HTML, CSS, dan JavaScript untuk menjadi seorang web developer profesional.
🔥 Baca juga : 7+ Cara Membuat Tabel di HTML & CSS Berwarna ️hanya 5 Menit
Baiklah, demikan informasi yang bisa kita share di kesempatan ini terkait perintah yang paling pertama dalam pembuatan HTML. Semoga bisa bermanfaat untuk kamu semuanya, apabila ada hal yang ingin kamu tanyakan, silahkan bisa bertanya melalui kolom komentar yang tersedia dibawah ini! Terima kasih, sampai jumpa di sharing kita berikutnya ya.
