Website HTML dan CSS adalah dasar bagi seorang pengembang atau web developer dalam membuat website. Jika kamu tertarik membuat website dan bingung memulainya, maka mulailah dengan belajar HTML dan CSS.
Bagi Sobat Jagoan yang ingin mempelajari lebih banyak mengenai website HTML dan CSS, yuk simak penjelasannya dalam artikel berikut ini!
Apa itu HTML dan CSS?
Sebelum mempelajari cara membuat website HTML, ada baiknya kamu memahami arti dari HTML tersebut. HTML adalah singkatan dari Hyper Text Markup Language yang memiliki makna sebagai bahasa markup yang digunakan untuk membuat sebuah halaman web.
Buat kamu yang masih bingung apa itu bahasa markup, bahasa ini adalah bahasa pemrograman dalam komputer yang digunakan untuk memproses format teks dan juga berbagai media di dalamnya.
Dalam pembuatan website HTML, kamu juga membutuhkan bantuan dari CSS. CSS sendiri adalah Cascading Style Sheets yang digunakan untuk menyederhanakan format pembuatan website HTML dengan mengatur elemen yang terdapat dalam bahasa markup yang sudah terlampir.
CSS lebih mudah dipelajari tetapi tetap menjadi elemen yang penting dalam pembuatan website berbasis HTML karena bisa mengatur penyajian tampilan dari website yang akan kamu buat. Sehingga, website HTML dan CSS ini akan menghasilkan sesuatu yang lebih powerful.
Cara Membuat Website HTML dan CSS
Sebelum memulai cara membuat website HTML dan CSS, pastikan kamu sudah menyediakan Text Editor dan Web Browser agar proses pembuatan berjalan dengan lancar ya, Sob.
Text Editor akan digunakan sebagai tempat bagi kamu menulis kode HTML, sedangkan Web Browser digunakan untuk mengetes hasil coding. Kamu bisa pakai tool apa saja sesuai yang kamu suka, ya!
1. Menyusun struktur proyek web
Langkah awal dalam cara pembuatan website HTML dan CSS adalah membuat folder untuk menyimpan proyek website kamu. Kamu bisa menggunakan VSCode untuk mengerjakan langkah ini dan membuka folder yang kamu inginkan.
Selanjutnya, buatlah folder bernama images guna menyimpan berbagai gambar yang nantinya akan dimasukkan dalam website HTML milikmu.
Jika sudah, kamu dapat melanjutkan langkah yang sama dengan membuat folder untuk index.html dan style.css. Dalam index.html akan berisi inti dari proyek website kamu, sedangkan style.css akan menjadi pembantu inti dalam pengerjaan website HTML milikmu, Sob!
Baca juga: Cara Membuat Website Sendiri Gratis Tanpa Coding, Mudah!
2. Add kode pada file index.html
Cara membuat website HTML dan CSS berikutnya adalah menambahkan kode pada index.html. File ini merupakan pondasi utama dari website HTML dan CSS yang akan kamu buat, sehingga kamu harus membuatnya terlebih dahulu sebelum melanjutkan ke berbagai tahap berikutnya.
Pada dasarnya, dalam pembuatan Index HTML ini, kamu perlu mengetahui 4 bagian utama yang menyusun bagian tersebut, yaitu:
- Tag HTML: tempat untuk menyimpan berbagai elemen HTML yang telah kamu buat
- Tag DTD/Doctype: tag ini harus ditulis di awal bagian karena berfungsi mendeklarasikan tipe dokumen serta file HTML untuk diproses pada web browser
- Tag Body: di sini kamu bisa mengisinya dengan berbagai konten yang ingin kamu tulis dalam website HTML-mu
- Tag Head: ini akan memberimu ruang untuk menulis berbagai elemen website yang nantinya tidak akan muncul secara visual dalam websitemu. Bisa berupa source css, source js, dan lain-lain.
Dengan mengetahui hal-hal berikut, kamu sudah bisa memulai untuk membuat websitemu sendiri yang bisa pula digunakan untuk membuat portofolio. Kamu bisa menyesuaikannya dengan berbagai kebutuhanmu.
Kamu juga bisa menggunakan website HTML templates untuk memudahkanmu memproses berbagai index HTML yang harus kamu tulis sehingga terbentuk website yang menarik.
3. Add kode pada file Style.css
Tanpa adanya CSS, hasilnya akan kurang menarik karena hanya berupa tulisan-tulisan yang tertata ke bawah tanpa adanya berbagai bentuk dan pola. Oleh karena itu, kamu membutuhkan langkah yang ketiga agar website buatan kamu menjadi semakin keren.
CSS di sini akan berperan sebagai pemoles yang indah untuk website yang sedang kamu buat dan dapat kamu ganti di kemudian hari jika kamu merasa bosan dengan tampilan yang sudah ada.
Seperti halnya Index HTML, struktur penulisan dari CSS juga terbagi menjadi beberapa bagian, antara lain:
- Blok Deklarasi, wadah untuk menuliskan kode style untuk CSS yang diawali dengan tanda kurung kurawal atau {}
- Selektor, kata kunci yang menghubungkan style CSS dengan Index HTML. Biasanya berupa tag, class, id, dan elemen lainnya dalam HTML
- Properti dan nilai, berbagai aturan yang akan diberikan pada selektor yang dipilih
4. Mengakses web dalam web browser
Langkah terakhir, setelah semua langkah selesai, kamu bisa langsung mengetikkan Index HTML kamu pada web browser. Kamu juga bisa membukanya sambil membuka text editor, agar semua perubahan yang ingin kamu lakukan bisa langsung terlihat hasilnya pada web browser.
Sekarang, website kamu sudah bisa digunakan, Sob!
Beberapa contoh website HTML biasanya dimulai dari yang simpel terlebih dahulu. Seperti pembuatan heading, lalu mengubah bentuk tulisan agar lebih estetik, menambahkan gambar, dan juga mengubah warna dari tulisan konten website kamu.
Sebagai contoh website HTML, untuk membuat heading kamu bisa menggunakan perintah “<h1> Heading 1 <h1>”. Sementara untuk angkanya dapat kamu sesuaikan dengan kebutuhanmu, mau Heading 2, 3, atau seterusnya. Cukup mudah kan, Sob?
Atau mungkin kamu butuh contoh website HTML untuk membuat paragraf? Bisa! Kamu cukup menuliskan <p> text </p> pada text editor di tempat yang kamu inginkan. Dijamin tulisan website mu makin rapi dan lebih enak dibaca.
Baca juga: Blogspot Adalah Platform Blog, Ini Fungsi dan Cara Membuatnya
Sekian informasi mengenai apa itu website HTML maupun CSS dan beberapa pengetahuan sebelum kamu mulai membuat website. Bagi kamu yang baru memulainya, terapkan beberapa penjelasan di atas dengan teliti dan hati-hati, ya.
Lalu, daripada kalian bingung dan pusing bikin website terus, namun akhirnya gak sesuai ekspektasi, hubungi Jagoan Hosting sekarang juga untuk mendapatkan paket hosting murah seharga Rp15.000/bulan aja. Udah paket komplit dengan Gratis Domain dan SSL, lho!
