Bizzie ingin belajar cara membuat website yang bagus, namun bingung harus mulai dari mana? Bizzie bisa memulainya dari HTML dan CSS. Sebab, bagi seorang web developer, HTML dan CSS merupakan fondasi yang wajib dipelajari untuk mengembangkan website. Bukan tanpa alasan, cara membuat website sederhana dengan html dan css, merupakan bagian penting dalam merancang desain tampilan situs.
Tujuannya tidak lain agar tampilan website dapat terlihat profesional dan memiliki tujuan yang jelas. Meskipun sederhana, inilah awal dari design website yang keren dan profesional, sebagai dasar pengenalan sebuah struktur atau arsitektur kerangka situs milik Bizzie. Oleh sebab itu, artikel kali ini akan membahas tentang cara membuat website sederhana dengan html dan css. Yuk, segera disimak informasi dan panduan lengkapnya di bawah ini!
Cara Membuat Website dengan HTML dan CSS
Sebelum masuk ke cara membuat website sederhana dengan html dan css, Bizzie harus menyiapkan Web Browser dan Text Editor terlebih dahulu. Web browser digunakan untuk mengakses website, sedangkan Text editor digunakan sebagai alat untuk menulis kode.
Pada tutorial ini, akan digunakan Visual Studio Code (VS Code) sebagai teks editornya serta Google Chrome sebagai browsernya. Bizzie bebas menggunakan tool favorit Bizzie. Yang pasti, website yang akan Bizzie buat kali ini adalah website portfolio sederhana menggunakan HTML dan CSS saja. Menariknya, cara membuat website sederhana dengan html dan css tersebut, Bizzie hanya perlu mengikuti 4 langkah, antara lain:
- Membuat Struktur Project Web.
- Menambahkan Kode pada File index.html.
- Menambahkan Kode pada File style.css.
- Mengakses Website di Web Browser
Bizzie tertarik mencobanya? Yuk, langsung saja ikuti panduan lengkap cara membuat website sederhana dengan html dan css berikut ini!
1. Membuat Struktur Project Web
Pertama-tama cara membuat website sederhana dengan html dan css, Bizzie coba buka folder penyimpanan proyek website portfolio Bizzie dan bukalah folder tersebut pada VS Code. Pada contoh ini digunakan nama “Web Portfolio”. Lalu, Bizzie buat folder baru dengan nama images. Folder ini merupakan tempat penyimpanan gambar/assets yang akan digunakan pada website.
Selanjutnya, Bizzie buat dua file baru bernama index.html dan style.css web portfolio tersebut. Sementara, Index.html adalah inti dari halaman website yang dibuat, Bizzie bisa menambahkan konten website pada file ini. Sedangkan, file style.css ialah file pelengkap HTML yang digunakan untuk mengubah serta mempercantik tampilan website.
2. Menambahkan Kode pada File index.html
cara membuat website sederhana dengan html dan css berikutnya adalah dengan menambahkan kode File HTML yang berisi kode utama untuk membangun struktur website Bizzie. Ibarat mobil, HTML pada website sama seperti rangka mobil yang membentuk dan menopang body mobil tersebut. Oleh karena itu, file ini perlu untuk bizzie dibuat terlebih dahulu sebelum menggunakan cara membuat website sederhana dengan html dan css yang benar.
Pada dasarnya, struktur pada tiap-tiap halaman HTML tersusun atas 4 bagian utama, diantaranya meliputi:
- Tag DTD/Doctype: Document Type Declaration (DTD) wajib ditulis pada awal dokumen. Tag ini memiliki fungsi untuk mendeklarasikan tipe dokumen maupun versi HTML yang digunakan untuk diproses pada web browser.
- Tag HTML: Merupakan sarana atau wadah dari semua elemen html.
- Tag Head: Berisikan informasi website yang tidak tampil pada halaman web browser. Contohnya, title, source js, source css, dan meta charset.
- Tag Body: Berisi seluruh elemen yang tampil pada halaman web browser. Di sinilah bagian semua konten ditulis.
3. Menambahkan Kode pada File style.css
Berikutnya adalah cara membuat website sederhana dengan html dan css agar tampilannya lebih rapi dan menarik. Seperti yang sudah dibahas di atas, tanpa CSS, tampilan website hanya akan sebatas text. Apabila kembali kepada analogi mobil sebelumnya, CSS di website layaknya cat mobil yang dapat diganti dan disesuaikan untuk membuat tampilan mobil terlihat lebih keren dan cantik. Meskipun rangka atau strukturnya cenderung sama, Bizzie dapat mengubah style tampilan sesuai selera Bizzie.
Adapun struktur penulisan CSS ini terdiri dari 3 bagian, antara lain:
Selektor: Merupakan kata kunci yang menghubungkan style pada file CSS dengan file HTML. Selektor bisa berupa class, tag, id, maupun atribut yang terdapat pada file HTML.
Blok Deklarasi: Merupakan wadah dan sarana tempat menulis style CSS yang ditandai dengan tanda kurung kurawal {}.
Properti dan Nilai: Merupakan sekumpulan aturan yang diberikan kepada selektor yang dipilih.
4. Mengakses Website di Web Browser
cara membuat website sederhana dengan html dan css yang efektif adalah dengan membuka teks editor dan browser bersamaan. Mengapa demikian? Karena dengan Bizzie membukanya secara bersamaan, setiap perubahan yang Bizzie lakukan pada file HTML maupun CSS bisa langsung terlihat pada browser. Sehingga, pada akhirnya proses pengembangan website akan berlangsung lebih cepat serta mudah untuk dimodifikasi.
Untuk dapat menjalankan website, Bizzie hanya perlu membuka file index.html pada browser pilihan Bizzie. Apabila Bizzie melakukan perubahan pada kode, jangan lupa untuk refresh halaman web untuk melihat perubahannya.
Itulah cara membuat website sederhana dengan html dan css yang bisa Bizzie coba. Pastinya mudah sekali, kan? Hanya dengan menggunakan file HTML dan CSS, Bizzie sekarang bisa membuat website portfolio milik Bizzie sendiri. Namun yang paling disayangkan, website tersebut hanya mampu diakses offline karena semua asetnya tersimpan di komputer Bizzie saja. Supaya bisa dilihat banyak orang, Bizzie perlu meng online-kan dulu, ya!
Caranya, Bizzie tentu memerlukan layanan web hosting untuk menyimpan aset Bizzie agar bisa diakses online. Namun, pastikan Bizzie hanya menggunakan web hosting terpercaya! Selamat mencoba cara membuat website sederhana dengan html dan css ini!
