Membuat Website Sederhana Dengan HTML Dan CSS
Pada kesempatan kali ini kita akan membahas cara membuat website dengan menggunakan html dan css. Namun harus di pastikan setidaknya kalian sudah memahami dasar-dasar html.
Sebetulnya saat ini untuk membuat website itu sangat mudah, bahkan ada beberapa CMS yang telah menyediakan fitur website builder sehingga kita bahkan tidak perlu sedikitpun untuk ngoding. Namun sangat baik jika kalian memahami cara membuat website dari nol tanpa bantuan tools atau CMS yang ada saat ini.
Secara umum website yang sering kita jumpai di internet menggunakan bahasa markup HTML dan CSS (Cascading Style Sheet) serta bahasa pemrograman javascript dan PHP. Namun untuk membuat website sederhana bersifat statis cukup dengan HTMLdan CSS saja.
Kenapa Harus Belajar CSS Juga?
Untuk menjawab pertanyaan ini perhatikan ilustrasi gambar di bawah ini:
Saat membangun sebuah website saya ilustrasikan seperti membuat kerangka bangunan rumah, html ibaratnya komponen-komponen untuk membangun sebuah rumah sedangkan CSS akan membuat komponen-komponen tersebut menjadi satu kesatuan yang utuh sehingga rumah tersebut bisa dibangun dengan pas dan menarik.
CSS kita gunakan untuk mengatur jarak antar elemen, ukuran (tinggi, lebar), ukuran dan jenis font, warna, efek hover dan masoh banyak lagi.
Jadi kita tidak bisa hanya memakai html saja untuk membuat website, kita membutuhkan css juga.
Oke, Saya harus mulai dari mana ?
Untuk mulai langkah awal kita butuh tools untuk coding dan menjalankan hasil codingan. Secara sederhana yang kita butuhkan hanya teks editor dan broeswer.
1. Teks Editor
Teks editor ini akan menjadi tools untuk kalian membuat kode-kode HTML dan CSS yang di butuhkan untuk membangun sebuah halaman website.
Notepad menjadi aplikasi yang paling standar dan sudah tersedia di platform windows. Jika kalian ingin yang profesional sebaiknya kalian pakai notepad++ atau sublime text 3. Dari ketiganya yang paling saya rekomendasikan adalah sublime text 3.
Semua aplikasi di atas bisa kalian download secara gratis di internet.
2. Browser
Website html yang kita buat melalui teks editor selanjutnya akan kita jalankan di aplikasi browser.
Browser yang saya rekomendasikan adalah chrome dan firefox kalian bisa memilih salah satunya.
Mengenal Struktur Dasar Dokumen HTML
Secara umum struktur dasar dari suatu dokumen HTML adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Web dengan HTML dan CSS - Kelasprogrammer.com</title>
</head>
<body>
<!--Elemen yang ditampilkan di halaman browser -->
</body>
</html>Di dalam HTML versi ke-5 setiap membuat dokumen html harus di awali dengan sintak <!DOCTYPE html> sintak ini berfungsi untuk memberitahu kepada browser bahwa dokumen html yang dibuat menggunakan versi ke-5, fungsi lain sekaligus membantu browser untuk menampilkan setiap elemen html dengan baik (karena menggunakan versi terbaru).
Selanjutnya dokumen HTML selalu di mulai dengan tag pembuka <html> dan kemudian di akhiri dengan penutup </html>
Setiap tag di html di desain memiliki pasangan, ada tag pembuka dan tag penutup, walaupun ada juga beberapa tag yang single (berdiri sendiri) seperti <br> untuk membuat baris baru <hr> untuk membuat garis horizontal dan lainnya.
Tag selanjutnya adalah tag <head> yang berfungsi sebagai heading dari dokumen html yang kita buat. Pada bagian <head> bisa kita buat judul dokumen, inisialisasi css, desktripsi dan meta tag lainnya.
Di dalam tag <head> terdapat tag <title> untuk membuat judul yang nantinya akan di tampilkan pada menu tab di browser.
Bagian utama dalam struktur dokumen html adalah bagian <body> karena di bagian ini berkaitan dengan elemen yang tampil dan di lihat oleh pengguna, kita akan banyak membuat kode-kode html nya.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Web dengan HTML dan CSS - Kelasprogrammer.com</title>
</head>
<body>
<!--Elemen yang ditampilkan di halaman browser -->
</body>
</html>Di dalam HTML versi ke-5 setiap membuat dokumen html harus di awali dengan sintak <!DOCTYPE html> sintak ini berfungsi untuk memberitahu kepada browser bahwa dokumen html yang dibuat menggunakan versi ke-5, fungsi lain sekaligus membantu browser untuk menampilkan setiap elemen html dengan baik (karena menggunakan versi terbaru).
Selanjutnya dokumen HTML selalu di mulai dengan tag pembuka <html> dan kemudian di akhiri dengan penutup </html>
Setiap tag di html di desain memiliki pasangan, ada tag pembuka dan tag penutup, walaupun ada juga beberapa tag yang single (berdiri sendiri) seperti <br> untuk membuat baris baru <hr> untuk membuat garis horizontal dan lainnya.
Tag selanjutnya adalah tag <head> yang berfungsi sebagai heading dari dokumen html yang kita buat. Pada bagian <head> bisa kita buat judul dokumen, inisialisasi css, desktripsi dan meta tag lainnya.
Di dalam tag <head> terdapat tag <title> untuk membuat judul yang nantinya akan di tampilkan pada menu tab di browser.
Bagian utama dalam struktur dokumen html adalah bagian <body> karena di bagian ini berkaitan dengan elemen yang tampil dan di lihat oleh pengguna, kita akan banyak membuat kode-kode html nya.
Menentukan Struktur navigasi
Struktur navigasi web adalah adalah suatu struktur untuk menggambarkan bagaimana suatu halaman di dalam website yang saling berhubungan antara satu dengan lainnya.
Penting untuk membuat struktur navigasi sebelum kita membuat website. Berikut ini contoh navigasi halaman website yang akan kita buat:
Saat pertama kali pengguna mengakses website, halaman index akan menjadi halaman utama yang terdiri dari menu home, kontak saya dan tentang saya, halaman home bisa kita gunakan sebagai halaman index yang berisi konten artikel-artikel pada website kita.
Membuat Layout Website
Layout adalah tata letak dari setiap komponen elemen di dalam website. Layout berfungsi untuk memetakan bagian-bagian dalam halaman website. Dengan desain layout yang baik akan memberikan kenyamanan kepada pengunjung.
Secara umum website memiliki 4 bagian layout yaitu
- Header – Berisi judul website
- Navigasi – Untuk membuat menu navigasi
- Konten – Bagian utama yang menjadi sasaran informasi yang ingin di sampaikan ke pengunjung
- Footer – Bagian paling bawah biasa berisi keterangan tambahan seperti informasi kepemilikan atau copyright.
Baca Juga :
- Kerajinan Bahan Limbah Yang Kreatif Dan Berguna
