Cara Membuat Website
Menggunakan HTML CSS & Javascript
Disini kamu bakal belajar cara membuat website menggunakan HTML, CSS dan Javascript dari NOL sampai jadi.
Panduannya lengkap, sederhana dan mudah di ikuti lalu contoh kode boleh kamu download.
Pada bagian akhir saya akan jelaskan bagaimana cara agar website kamu bisa online di internet.
"Panggil saya MasHary"
PERHATIAN!
Kalau kamu mau membuat website tanpa harus menulis kode program silakan baca artikel cara membuat website untuk pemula.
RINCIAN PEMBAHASAN
Panduan cara membuat website menggunakan HTML CSS dan JS dibuat menjadi 4 bagian:
- Pengenalan HTML, CSS, Javascript.
- Mempersiapkan semua hal yang diperlukan.
- Membuat website dengan HTML, CSS dan Javascript.
- Membuat website menjadi online biar bisa di akses lewat internet.
Ok kita mulai dari yang pertama....
1# Pengenalan
HTML, CSS dan Javascript
Sebelum membuat website menggunakan HTML, CSS dan Javascript kamu perlu tau apa itu dan kegunaanya jadi kamu bakal tau kapan harus menggunakanya.
HTML
HTML merupakan kepanjangan dari Hypertext Markup Language ini adalah kumpulan kode komputer yang digunakan khusus untuk membuat website, semua website dibuat menggunakan HTML.
CSS
Cascading Style Sheet yang lebih di kenal dengan sebutan CSS adalah kode program yang berguna mendesain website agar tampilan website menjadi lebih cantik. Kamu bisa membuat website tanpa CSS tapi tampilanya tidak akan menarik.
Javascript
Javascript adalah salah satu bahasa pemrograman web yang bisa digunakan memanipulasi kode HTML dan CSS sehingga tampilan website kita lebih interaktif dan dinamis.
Di Bagian selanjutnya kamu perlu mempersiapkan beberapa hal yang di perlukan untuk membuat website dengan html css dan javascript.
2# Mempersiapkan
Semua Hal yang Diperlukan
Sebelum membuat website menggunakan HTML CSS dan Javascript maka ada beberapa hal yang perlu kamu siapkan agar di komputer kamu.
Berikut daftar yang perlu di persiapkan:
- Perangkat Komputer
- Webserver
- Teks Editor
- Framework
Perangkat Komputer
Persiapan utama adalah kamu harus menggunakan komputer atau laptop, kamu gak bisa gunakan smartphone.
Karena disini kamu bakal banyak menulis kode program dan itu semua hanya bisa di lakukan di komputer.
Webserver
Untuk bisa menjalankan website dari komputer kamu maka kamu membutuhkan webserver, yaitu sebuah aplikasi yang dijalankan di komputer kita sehingga nanti website bisa di akses dari komputer lain.
Teks Editor
Karena kamu mau membuat website dengan kode program html css dan javascript maka kamu membutuhkan sebuah aplikasi teks editor yang berguna untuk menulis kode-kode website.
Kita bisa menulis kode semua HTML, CSS dan Javascript menggunakan Notepad yaitu sebuah aplikasi yang sudah terinstall di Microsoft Windows, tapi saya sangat tidak menyarankan untuk menggunakanya karena akan sangat sulit sekali.
Jadi lebih baik kamu pakai software editor yang di desain khusus memang untuk menulis kode program yang memudahkan kamu.
Sekarang ini ada banyak sekali software editor yang tersedia di internet, ada yang berbayar ada juga yang gratis diantaranya:
- SublimeText – Gratis
- Microsoft Visual Code – Opensource dan Gratis
- Adobe Dreamweaver – Berbayar
Kamu hanya perlu menggunakan salah satu dari software tersebut.
Saya sendiri lebih suka software editor Visual Code (ingat ya bukan Visual Studio karena itu 2 software yang berbeda).
Saya menyarankan kamu juga menggunakan software karena setiap panduan praktek yang saya sebutkan disini semuanya menggunakan Visual Code.
Download lalu install Visual Code, link download visual code.
Framework
Framework adalah suatu kerangka modular yang isinya memuat kode html css dan javascript yang sudah jadi ini dapat dipakai dan digunakan secara modular sesuai kebutuhan jadi kamu tidak perlu mengetik semua kode dari awal.
Ada banyak jenis framework yang bisa kamu pakai tapi kali ini saya akan menggunakan framework yang cukup popular dan banyak digunakan teman-teman kita yaitu framework yang bernama bootstrap.
Extension Visual Code
Visual Code punya fitur yang namanya extension yaitu program kecil yang di buat untuk memenuhi fitur-fitur tambahan yang tidak ada di aplikasi bawaan Visual Code.
Saya menyarankan kamu untuk menginstall Extension yang akan kita gunakan untuk praktek disini. Adapun extension yang perlu kamu install adalah:
1. Bootstrap 4 Snippet
Ini adalah extension yang membantu kita untuk menulis kode-kode HTML tertentu hanya dengan singkatan. Kamu hanya cukup mengetikan beberapa kode lalu boom otomatis extension ini akan melengkapi sisa kodenya, untuk lebih mudah coba kamu perhatikan gambar berikut:
2. Live Server
Untuk bisa menjalankan website di komputer, kamu membutuhkan aplikasi web server. Daripada kamu install software tambahan jadi lebih baik kita memanfaatkan Extension Live Server yang berfungsi untuk menjalankan web server di komputer kamu.
Instalasi Extension
Setelah kamu tahu apa saja yang di perlukan sekarang kamu perlu lakukan proses instalasi extension tersebut, caranya cukup mudah kamu hanya perlu melihat menu pada bagian kiri yang bertuliskan Extension kemudian klik menu tersebut sehingga muncul kolom search (pencarian) lalu ketikan “Bootstrap 4 Snippet” setelah itu tekan enter. Pada daftar hasil pencarian silakan klik tombol hijau install pada Extension Bootstrap 4 Snippet. Kamu juga bisa lakukan hal yang sama untuk install extension Live Server.
3# Membuat Website Dengan
HTML CSS & Javascript
Bagian 3 – Praktek Membuat Website HTML, CSS & Javascript
Sebelum kita langsung praktek maka ada baiknya kamu mengetahui beberapa hal tentang framework. Kita akan menggunakan Framework untuk penulisan kode-kode program yang di perlukan.
Dalam sistem komputer, framework merupakan kerangka program yang dibuat untuk memudahkan kita dalam proses penulisan kode. Beberapa fungsi dan logika yang sudah umum disediakan sehingga kita tidak perlu membuatnya lagi tentu ini akan menghemat waktu belajar kita, jadi kamu hanya perlu tau cara menggunakannya saja.
Ada beberapa framework yang akan kita gunakan diantaranya adalah:
- CSS Framework yaitu Bootstrap 4
- Javascript menggunakan jQuery
Saya tidak akan membahas dan menjelaskan framework tersebut artikel ini karena kita akan berfokus pada cara menggunakan framework tersebut dalam penulisan semua kode program yang di perlukan untuk membuat website. Kamu tidak perlu khawatir karena itu bukan sesuatu yang sulit justru itu akan memudahkan kamu.
Tips! Kamu boleh berkreasi dengan membuat website sesuai kebutuhan kamu, tetapi untuk berhasil mengikuti panduan disini maka saya sarankan kamu mengikuti dulu persis setelah itu kamu bisa berkreasi dan jangan pernah berhenti berkreasi!
Layout Website
Pertama kita akan menentukan layout website yang akan kita buat, saya sudah mendesainya dengan gaya layout website standar pada umumnya. Pertama ada Header pada bagian atas lalu di bawahnya ada menu di bagian kiri dan konten pada bagian kanan, di bawahnya kita akan buat footer. Jika di gambarkan layout kurang lebih seperti di bawah ini