Mari kita mulai perjalanan seru untuk membangun website pertama Anda! Jangan khawatir jika Anda belum pernah menyentuh kode sebelumnya. Tutorial ini akan memandu Anda langkah demi langkah, menggunakan HTML dan CSS, dua bahasa dasar yang menjadi fondasi setiap website di internet. Tujuan kita adalah menciptakan website statis sederhana, yang berarti kontennya tidak berubah kecuali Anda mengubah kode secara manual. Kedengarannya menantang? Percayalah, dengan sedikit kesabaran dan ketelitian, Anda pasti bisa! Dalam tutorial ini, kita akan mempelajari dasar-dasar HTML untuk menyusun struktur konten, dan CSS untuk mempercantik tampilan website. Kita akan mulai dari konsep paling fundamental, seperti tag HTML, atribut, dan properti CSS, hingga implementasi praktis membuat layout sederhana, menambahkan gambar, dan mengatur teks agar enak dibaca. Siap untuk memulai? Mari kita terjun ke dunia pembuatan website! ## Apa Itu HTML dan CSS? HTML (HyperText Markup Language) adalah bahasa markah standar yang digunakan untuk membuat struktur halaman web. Ibarat kerangka rumah, HTML mendefinisikan elemen-elemen seperti judul, paragraf, gambar, tautan, dan lain-lain, serta bagaimana elemen-elemen tersebut disusun dalam halaman. Setiap elemen direpresentasikan dengan tag, yang terdiri dari tag pembuka dan tag penutup. CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk mengontrol tampilan visual dari dokumen HTML. CSS memungkinkan Anda mengubah warna, font, ukuran, tata letak, dan elemen visual lainnya dari halaman web. CSS bekerja dengan menerapkan aturan gaya ke elemen HTML tertentu, sehingga memberikan fleksibilitas dan kontrol yang lebih besar atas tampilan website Anda. Dengan CSS, Anda bisa membuat website yang menarik dan responsif, yang menyesuaikan tampilannya dengan berbagai ukuran layar. ## Persiapan Awal Sebelum kita mulai menulis kode, ada beberapa persiapan yang perlu dilakukan. Pastikan Anda memiliki: ### Text Editor Text editor adalah program yang digunakan untuk menulis dan mengedit kode. Ada banyak text editor gratis yang tersedia, seperti: * **Visual Studio Code:** Text editor populer dengan fitur lengkap, termasuk dukungan untuk berbagai bahasa pemrograman, debugging, dan ekstensi. * **Sublime Text:** Text editor ringan dan cepat dengan antarmuka yang bersih dan berbagai fitur yang dapat disesuaikan. * **Notepad++ (khusus Windows):** Text editor gratis dan open-source yang sederhana dan mudah digunakan, namun tetap memiliki fitur yang berguna untuk pengembangan web. Pilih text editor yang paling sesuai dengan preferensi Anda. Visual Studio Code adalah pilihan yang sangat baik karena memiliki banyak fitur berguna dan komunitas yang besar. ### Struktur Folder Buatlah folder baru di komputer Anda untuk menyimpan semua file website Anda. Beri nama folder tersebut, misalnya “website-pertama”. Di dalam folder ini, buat dua folder lagi: * **css:** Folder ini akan berisi file CSS yang akan kita gunakan untuk mengatur tampilan website. * **images:** Folder ini akan berisi semua gambar yang akan kita tampilkan di website. Struktur folder yang rapi akan memudahkan Anda dalam mengelola file-file website Anda. ### File HTML Dasar Di dalam folder “website-pertama”, buat file baru dengan nama “index.html”. File ini akan menjadi halaman utama website Anda. Buka file “index.html” dengan text editor yang telah Anda pilih, dan ketik kode HTML dasar berikut:
Ini adalah paragraf pertama di website saya.
Simpan file “index.html”. Sekarang, buka file tersebut dengan browser web Anda (misalnya Chrome, Firefox, atau Safari). Anda akan melihat halaman web sederhana dengan judul “Website Pertamaku” dan teks “Selamat Datang di Website Pertamaku!” dan paragraf yang Anda tulis. ## Membangun Struktur Halaman dengan HTML Sekarang kita sudah memiliki file HTML dasar, mari kita mulai membangun struktur halaman web yang lebih kompleks. Kita akan menambahkan beberapa elemen HTML untuk membuat layout sederhana. ### Heading Heading digunakan untuk memberikan judul pada bagian-bagian konten yang berbeda di halaman web. Ada enam tingkat heading, dari `
Ini adalah paragraf pertama di website saya.
Tentang Saya
Saya adalah seorang pengembang web pemula yang sedang belajar membuat website.
Pengalaman
Saya memiliki pengalaman dalam membuat website sederhana dengan HTML dan CSS.