Mulai Tulis Kode HTML
Ikuti langkah berikut untuk membuat file HTML pertama Anda:
Mendesain Website dengan CSS
Setelah kerangka website sudah dibuat, langkah selanjutnya adalah mendesain website dengan CSS. CSS digunakan untuk mengatur tampilan situs web, seperti warna, jenis huruf, ukuran teks, jarak antar elemen, dan lainnya.
Berikut adalah contoh kode CSS untuk mendesain website makanan:
Tahapan Membuat Website Makanan dengan HTML dan CSS
Rancangan website adalah langkah awal yang sangat penting. Pikirkan tentang desain dan tampilan yang ingin kamu capai. Pikirkan juga tentang konten yang akan kamu tampilkan di situs kamu. Kamu juga perlu merencanakan struktur situs dan navigasi.
Mengenal Apa itu HTML dan CSS
Pada bagian ini kamu akan berkenalan lebih “akrab” dengan HTML dan CSS yang akan memudahkan kamu dalam membuat dan mengelola website. Dengan mengetahui pengertian dan cara kerjanya, ini akan memudahkan kamu dalam mempelajari cara membuat website dengan HTML dan CSS.
HTML adalah singkatan dari HyperText Markup Language. Ini adalah bahasa markup standar untuk pembuatan halaman website atau web page. Dengan HTML memungkinkanmu untuk melakukan pembuatan website meliputi struktur bagian, paragraf, tautan, dan sebagainya menggunakan elemen HTML seperti tag dan atribut. HTML memiliki banyak kasus penggunaan seperti:
Perlu juga dicatat bahwa HTML tidak dianggap sebagai bahasa pemrograman karena tidak dapat membuat fungsionalitas dinamis. Saat ini HTML “hanya” dianggap sebagai standar pengkodean resmi untuk website. World Wide Web Consortium (W3C) adalah organisasi yang memelihara dan mengembangkan spesifikasi HTML, bersama dengan menyediakan pembaruan rutin.
Website biasanya mencakup beberapa halaman HTML yang berbeda misalnya halaman beranda, halaman tentang, dan halaman kontak. Semuanya akan memiliki file HTML terpisah. File HTML adalah dokumen yang diakhiri dengan ekstensi .html atau .htm. Browser website membaca akan file HTML dan menampilkan kontennya sehingga pengguna internet dapat melihatnya.
Semua halaman HTML memiliki serangkaian elemen HTML yang terdiri dari sekumpulan tag dan atribut. Elemen HTML adalah penyusun utama “bangunan” halaman web. Tag memberi tahu browser tempat elemen dimulai dan diakhiri, sedangkan atribut menjelaskan karakteristik elemen. Tiga bagian utama dari suatu elemen adalah:
Contoh dari HTML ini adalah sebagai berikut:
ini adalah sebuah paragraf
Kode HTML ini akan menampilkan visual seperti berikut ini:
Lalu bagaimana cara membuat website dengan HTML dan CSS? Eits, sabar dulu, kamu perlu memahami apa itu CSS terlebih dulu.
CSS adalah singkatan dari Cascading Style Sheets dan digunakan untuk menyesuaikan gaya elemen yang ditulis dalam bahasa markup seperti HTML. Ini memisahkan konten dari representasi visual website. Jika HTML tadi berfungsi untuk membuat struktur konten website maka CSS ini merupakan sarana untuk melakukan editing secara lebih lanjut file HTML yang telah dibuat. Hubungan antara HTML dan CSS sangat erat karena HTML adalah dasar dari sebuah website dan CSS adalah bagian estetika dari keseluruhan website.
CSS menggunakan sintaks berbasis bahasa Inggris sederhana dengan seperangkat aturan yang mengaturnya. Seperti yang telah dijelaskan sebelumnya bahwa CSS adalah sarana untuk melakukan editing lebih dari HTML, maka CSS ini bekerja dengan cara menambahkan atribut gaya dalam sebuah tag yang ada atau pada class dan id tertentu. Misalkan kamu bisa memberi atribut gaya pada tag
secara keseluruhan atau membuat sebuah class untuk diterapkan pada tag
yang dituju.
Sebagai contoh, paragraf yang telah dibuat tadi akan ditambahkan gaya atau style yang dibuat dengan css. Misalkan saja membuat ketebalan huruf semakin tebal dan bergaris bawah. Berikut ini cara untuk membuat seluruh tag p memiliki gaya yang sama:
text-decoration: underline;
Atau kamu bisa membuat class untuk gaya ini dan membuatnya hanya berlaku pada tag
yang kamu kehendaki. Class ditunjukan dengan awalan . (titik). Berikut ini adalah contohnya:
text-decoration: underline;
Setelah itu, panggil nama class tersebut ke kode HTML yang kamu buat tadi seperti berikut ini:
ini adalah sebuah paragraf
Dengan menambahkan CSS tersebut maka konten yang kamu buat tadi telah memiliki gaya atau style yang kamu kehendaki seperti pada gambar dibawah ini:
Semua konsep yang telah dijelaskan diatas akan memudahkanmu memahami cara membuat website dengan HTML dan CSS.
Baca Juga: Padding dalam CSS: Pengertian, Fungsi, dan Contohnya
Siapkan Konten Website
Ini adalah langkah awal dan penting untuk belajar cara membuat website dengan HTML dan CSS. Tentunya kamu harus tahu apa yang akan kamu buat dalam website tersebut. Hal yang perlu kamu siapkan adalah:
Untuk memudahkan, kamu bisa menulis konten dalam sebuah dokumen sendiri agar nantinya bisa kamu copy dan paste dalam proses pembuatan website. Terkait tata letak setiap halaman, kamu bisa membuat wireframe agar lebih mudah dalam melakukan eksekusi nantinya. Sekali lagi, ini adalah langkah penting dalam cara membuat website dengan HTML dan CSS, lakukan dengan baik!
Membuat DOCTYPE dan Tag HTML
Pertama, kita harus mendeklarasikan DOCTYPE dan membuka tag HTML kita. Ini adalah bagian paling atas dari file HTML kamu dan harus terlihat seperti ini:
Modul yang akan datang
Membuat website sendiri memang menjadi tantangan tersendiri. Namun, dengan pengetahuan yang tepat dan pemahaman tentang HTML dan CSS, kamu bisa membuat website makananmu sendiri yang menarik dan fungsional. Di artikel ini, kita akan membahas cara membuat website makanan dengan HTML dan CSS.
Sampai jumpa kembali di artikel menarik lainnya!
Di artikel ini, kita akan menjelaskan langkah demi langkah untuk membuat website dari nol menggunakan HTML dan CSS. Jika Anda siap untuk belajar, simak panduan lengkap berikut ini!
Pengetesan dan Perbaikan
Setelah website kamu dibuat dan didesain, pastikan untuk mencobanya di berbagai browser dan perangkat untuk memastikan bahwa semua elemen berfungsi dengan baik dan tampil dengan benar. Gunakan feedback ini untuk membuat perbaikan dan penyesuaian sebelum situs kamu live.
Kini kamu telah mengetahui cara sederhana untuk membuat website makanan dengan HTML dan CSS. Jangan takut untuk berkreasi dan mengeksplorasi lebih banyak kemungkinan dalam desain dan fungsionalitas situs web kamu. Selamat mencoba!
Buat Website Responsif dengan Media Query
Gunakan media query CSS untuk menyesuaikan tampilan website di berbagai ukuran layar. Berikut adalah contoh media query sederhana untuk layar yang lebih kecil:
