Cara Membuat Website 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:

Di dalam HTML versi ke-5 setiap membuat dokumen html harus di awali dengan sintak 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 dan kemudian di akhiri dengan penutup