Baik, setelah sebelumnya kita telah mengenal HTML melalui artikel Pengenalan Materi HTML selanjutnya kita akan membahas mengenai struktur HTML agar pada saat membuat sebuah website kita lebih mudah dalam membaca kodingan yang kita buat.
Tapi sebelum kita mulai menulis kode HTML kita akan mempersiapkan tools yang akan kita gunakan, sebenarnya untuk menulis kode HTML dapat dilakukan menggunakan berbagaimacam text editor yang ada di internet yaitu seperti Sublime Text, Notepad++, Visual Studio Code, dan masih banyak lagi. Biasanya saya sendiri menggunakan Visual studio code untuk menulis kode (ngoding) karna fiturnya lumayan banyak dan juga gratis.
Dari sekian banyak teks editor yang ada kali ini kita akan gunakan yang sudah ada di komputer atau laptop yang kita miliki yaitu dengan menggunakan Notepad agar kita tidak perlu melakukan instalasi software lain mengingat yang kita pelajari ini masih sangat basic sekali.
Daftar Isi
1. Membuat folder untuk menyimpan file
Oke langsung saja kita mulai, pertama kita buat terlebih dahulu folder yang akan kita gunakan untuk latihan dimana saja. Silahkan beri nama sesuai dengan keinginan kalian, disini saya akan membuat folder bernama “latihan-html”
2. Membuat file index.html
Setelah kita membuat folder latihan selanjutnya kita akan membuat folder index.html. Apa itu index.html? File dengan nama “index” merupakan file yang akan dibuka pertama kali oleh browser, sehingga jika folder kita berisi beberapa file seperti “index.html” dan “coba.html” maka yang akan diakses oleh browser untuk pertama kali adalah file “index.html” untuk lebih jelasnya nanti jika sudah mencoba membuka folder yang kita buat dengan webserver.
Untuk membuat file “index.html” caranya cukup mudah yaitu dengan klik kanan di dalam folder yang telah kita buat tadi, kemudian pilih “new” lalu pilih “Dokumen Teks” atau “Text Document”
Kemudian akan terbuat file dengan ekstensi .txt seperti dibawah ini.
Kemudian ganti nama file dengan klik kanan lalu pilih “rename” kemudian ganti nama dengan “index” jangan lupa untuk mengganti ekstensi dengan .html sehingga nama file akan menjadi “index.html” seperti dibawah ini. Jika pada saat rename tidak bisa mengganti ekstensi menjadi .html silahkan atur agar file ekstensi dapat terlihat dengan cara klik view pada bagian atas (taskbar) kemudian klik show kemudian centang filename extensions.
3. Buka file dengan notepad
Setelah membuat folder dan file index.html selanjutnya kita buka file tersebut menggunakan notepad dengan cara klik kanan pada file index.html kemudian open with noteoad.
Setelah terbuka silahkan tulis kode dibawah ini
<!DOCTYPE html>
<html>
<head>
<title>Latihan HTML</title>
</head>
<body>
<h1>Halo Dunia</h1>
</body>
</html>
4. Penjelasan Kode
Kode diatas merupakan struktur dasar pada HTML yang akan selalu digunakan saat kita membuat sebuah website.
<!DOCTYPE html> //Tag ini digunakan sebagai penanda bahwa file index.html yang kita buat ditulis menggunakan HTML versi terbaru yaitu HTML versi 5.
<html> // Tag ini digunakan sebagai tag pengenal bahwa dokumen ini merupakan dokumen HTML.
<head> // Tag head digunakan untuk menulis judul dokumen, dan menulis tag meta yang dapat digunakan untuk menambahkan deskripsi sebuah halaman web.
<title>Latihan HTML</title> //tag title ini digunakan untuk memberikan judul halaman yang akan terlihat pada tab browser
</head>
<body> //Tag body merupakan tag penting tag ini digunakan untuk menulis konten website yang akan kita buat
<h1>Halo Dunia</h1>
</body>
</html>
5. Hasil
Sekarang coba buka file index.html yang kita buat tadi dengan cara double click pada file index.html, setelah dibuka maka akan tampil halaman website pertama yang kita buat pada tutorial kali ini.
Nah cukup sekian tutorial kali ini semoga dapat membantu dalam memahami pembuatan website teman-teman yang masih awam dengan web development. Terimakasih!
Leave a Reply