Saat ini, hampir semua orang bisa membuat website tanpa memahami coding. Padahal, penting juga lho untuk memahami pondasi pembentuk website, yaitu HTML.
Sekarang, coba bayangkan website Anda masih polos. Lalu, Anda pun menginstal tema. Sayangnya, layout website terlihat jauh dari harapan. Header terlalu besar, posisi menu hanya bisa di tengah, tampilan konten kurang cocok. Bahkan saat Anda berusaha memodifikasinya dengan plugin, hasilnya tetap tidak maksimal.
Nah supaya itu tidak terjadi, Anda perlu belajar HTML. Sehingga, kemampuan Anda tidak dibatasi oleh fitur dan template yang sudah tersedia. Jadi, Anda mampu menciptakan fungsi yang tidak dimiliki website tetangga. Menarik, bukan?
Nah, Anda sudah datang ke tempat yang tepat! Di sini, kami akan mendampingi Anda belajar HTML pemula dengan cara yang sederhana. Dalam sekali baca, Anda akan memahami:
1. Apa Itu HTML?
2. Apa Itu Tag, Elemen, dan Atribut?
3. Kerangka Inti HTML
4. Belajar HTML dengan Editor HTML
5. Memilih Browser Terbaik
6. Membuat Halaman Website Pertama
7. Melengkapi Halaman Website
8. Mengatur Template Halaman Website
9. Kode Warna HTML
Tanpa berlama-lama lagi, yuk kita mulai perjalanan belajar HTML pemula ini!
Apa Itu HTML?
HTML (Hypertext Markup Language) merupakan gabungan dari dua istilah: hypertext dan markup language. Apa sih itu?
Hypertext yaitu dokumen berisi tautan yang memungkinkan pengguna terhubung ke halaman lain.
Sedangkan markup language merupakan bahasa komputer yang terdiri dari sekumpulan kode untuk mengatur struktur dan menyajikan informasi.
Apa Itu Tag, Elemen, dan Atribut?
Agar lebih mudah belajar HTML, Anda harus berkenalan dengan tag, elemen, dan atribut. Mereka adalah tiga sekawan yang menjadi atom pembentuk HTML.
Berikut masing-masing penjelasannya.
- Tag, digunakan sebagai awalan instruksi atau perintah yang akan dibaca web browser. Misalnya: tag <bold>. Tag ini akan meminta browser menampilkan teks dalam format tebal;
- Element, merupakan keseluruhan kode yang terdiri dari tag pembuka (<>) hingga tag penutup (</ >). Contohnya: <h1> Contoh Elemen </h1>. Meski demikian, tidak semua tag HTML memiliki pasangan penutup;
- Attribute, yaitu informasi atau perintah tambahan yang berada di dalam elemen. Misalnya: <img src=”pantai.jpg” alt=”Pantai Baron.”> Elemen ini menggunakan tag <img> dengan atribut sumber gambar (src) dan alt text (alt).
Setelah memahami komponen pembentuk HTML, silakan pelajari coding HTML dasar. Dengan mengetahui coding HTML dasar, Anda akan lebih siap untuk menggunakan tag HTML yang lebih menantang.
Kerangka Inti HTML
Sampai sini, Anda sudah mengetahui apa saja atom penyusun HTML. Jika atom-atom tersebut dikumpulkan, terbentuklah dokumen HTML.
Namun, mari usir bayangan dokumen HTML yang dipenuhi ratusan tag. Kita akan mengulik bentuk dokumen HTML paling sederhana dan menjadi kerangka inti yang menyusun setiap dokumen HTML di dunia ini.
- <!DOCTYPE html> berfungsi untuk mendeklarasikan kepada komputer bahwa Anda akan menuliskan perintah dalam kode HTML;
- <html></html> merupakan tag yang menandakan bahwa Anda memulai dan mengakhiri dokumen dalam kode HTML;
- <head><head> diisi dengan metadata dari dokumen HTML. Seperti judul tab, deskripsi, dan lain-lain;
- <body></body> diisi dengan konten halaman website.
Setelah mengantongi kerangka inti HTML, Anda dapat melengkapinya sesuai dengan tujuan dan kebutuhan halaman website Anda.
Bonus info, jika Anda penasaran untuk melihat dokumen HTML sebuah halaman website, silakan lakukan trik berikut: klik kanan pada mouse dan pilih ‘View page source’. Atau sederhananya dengan menekan Ctrl + U.
Belajar HTML dengan Editor HTML
Dari tadi, kita sudah mempelajari teori belajar HTML dasar. Pasti, Anda sudah tidak sabar untuk segera mempraktikkannya.
Kalau begitu, sekarang saatnya Anda menyiapkan editor HTML. Editor HTML merupakan lembar kerja untuk membuat dan mengedit dokumen HTML.
Ada berbagai editor HTML yang bisa Anda gunakan secara gratis. Seperti Notepad++, Atom, Bracket, dan banyak lagi. Namun sebelum memilih editor HTML, pastikan OS komputer Anda kompatibel.
Nah setelah menginstal editor HTML, Anda bisa belajar HTML dengan lebih mudah. Sebab, fitur yang ditawarkan editor HTML akan mempercepat proses kerja Anda.
No comments:
Post a Comment