Di sini Anda akan belajar cara membuat situs web menggunakan HTML, CSS, dan Javascript dari awal
Panduannya lengkap, sederhana dan mudah diikuti dan Anda dapat mengunduh contoh kode
Pada bagian terakhir saya akan menjelaskan bagaimana membuat website Anda online di internet
"Panggil aku MasHarry"
PERHATIAN.
Jika anda ingin membuat website tanpa harus menulis kode program, silahkan baca artikel cara membuat website untuk pemula
DETAIL DISKUSI
Panduan cara membuat website menggunakan HTML, CSS dan JS dibagi menjadi 4 bagian
- Pengenalan HTML, CSS, Javascript
- Persiapkan semua hal yang diperlukan
- Buat situs web dengan HTML, CSS, dan Javascript
- Pembuatan website secara online sehingga dapat diakses melalui internet
Oke kita mulai dari yang pertama
1. Perkenalan
HTML, CSS, dan Javascript
Sebelum membuat website menggunakan HTML, CSS dan Javascript Anda perlu mengetahui apa itu dan bagaimana penggunaannya sehingga Anda akan tahu kapan menggunakannya.
HTML
HTML adalah singkatan dari Hypertext Markup Language, ini adalah sekumpulan kode komputer yang digunakan khusus untuk membuat website, semua website dibuat menggunakan HTML
CSS
Cascading Style Sheet atau lebih dikenal dengan CSS merupakan kode program yang berguna untuk mendesain website agar tampilan website menjadi lebih indah. Anda bisa membuat website tanpa CSS tapi tampilannya tidak akan menarik.
JavaScript
Javascript merupakan salah satu bahasa pemrograman web yang dapat digunakan untuk memanipulasi kode HTML dan CSS agar tampilan website kita lebih interaktif dan dinamis.
Pada bagian selanjutnya Anda perlu menyiapkan beberapa hal yang dibutuhkan untuk membuat website dengan html css dan javascript
2 # Mempersiapkan
Semua Hal yang Dibutuhkan
Sebelum membuat website dengan menggunakan HTML, CSS dan Javascript, ada beberapa hal yang perlu anda persiapkan di komputer anda
Berikut daftar yang perlu disiapkan
- Perangkat Komputer
- server web
- Editor Teks
- Kerangka
Perangkat Komputer
Persiapan utama adalah harus menggunakan komputer atau laptop, tidak boleh menggunakan smartphone
Karena disini anda akan menulis banyak sekali kode program dan itu hanya bisa dilakukan di komputer
server web
Untuk dapat menjalankan website dari komputer Anda, Anda memerlukan webserver, yaitu sebuah aplikasi yang berjalan di komputer Anda agar website tersebut dapat diakses dari komputer lain.
Editor Teks
Karena anda ingin membuat website dengan kode program html css dan javascript maka anda membutuhkan aplikasi text editor yang berguna untuk menulis kode-kode website
Kita bisa menulis kode semua HTML, CSS dan Javascript menggunakan Notepad, yang merupakan aplikasi yang diinstal pada Microsoft Windows, tetapi saya sangat tidak menyarankan menggunakannya karena akan sangat sulit.
Jadi ada baiknya anda menggunakan software editor yang memang didesain khusus untuk menulis kode program yang memudahkan anda
Saat ini banyak sekali software editor yang tersedia di internet, ada yang berbayar dan ada juga yang gratis
- SublimeText – Gratis
- Microsoft Visual Code – Opensource dan Gratis
- Adobe Dreamweaver – Berbayar
Anda hanya perlu menggunakan salah satu perangkat lunak
Saya pribadi lebih suka software editor Visual Code (ingat, ini bukan Visual Studio karena ini 2 software yang berbeda)
Saya sarankan Anda juga menggunakan perangkat lunak karena setiap panduan latihan yang saya sebutkan di sini semuanya menggunakan Visual Code
Unduh dan instal Kode Visual, tautan unduh kode visual.
Kerangka
Framework adalah kerangka kerja modular yang berisi kode html, css dan javascript siap pakai yang dapat digunakan dan digunakan secara modular sesuai kebutuhan sehingga Anda tidak perlu mengetik semua kode dari awal.
Ada banyak sekali jenis framework yang bisa sobat gunakan, namun kali ini saya akan menggunakan framework yang cukup populer dan banyak digunakan oleh teman-teman kita, yaitu framework yang bernama bootstrap.
Ekstensi Kode Visual
Visual Code memiliki fitur bernama extension, yaitu sebuah program kecil yang dibuat untuk memenuhi fitur tambahan yang tidak ada pada aplikasi Visual Code bawaan.
Saya menyarankan Anda untuk memasang Ekstensi yang akan kami gunakan untuk latihan di sini. Ekstensi yang perlu Anda instal adalah
1. Bootstrap 4 Cuplikan
Ini adalah ekstensi yang membantu kita menulis kode HTML tertentu hanya dengan singkatan. Anda hanya perlu mengetikkan beberapa kode dan boom otomatis extension ini akan melengkapi sisa kodenya, untuk lebih mudahnya coba perhatikan gambar berikut
2. Server Langsung
Untuk dapat menjalankan website di komputer, diperlukan aplikasi web server. Dari pada anda install software tambahan, lebih baik manfaatkan Live Server Extension yang berfungsi untuk menjalankan web server di komputer anda
Pemasangan Ekstensi
Setelah Anda mengetahui apa yang Anda butuhkan sekarang Anda perlu menginstal ekstensi, caranya cukup sederhana Anda hanya perlu melihat menu di sebelah kiri yang bertuliskan Extension lalu klik menu tersebut hingga muncul kolom pencarian kemudian ketik "Bootstrap 4 Snippet" setelah itu tekan enter. Pada daftar hasil pencarian, silahkan klik tombol install berwarna hijau pada Extension Bootstrap 4 Snippet. Anda juga dapat melakukan hal yang sama untuk menginstal ekstensi Live Server
3# Buat Situs Web Dengan
HTML CSS & Javascript
Bagian 3 – Berlatih Membuat Situs Web HTML, CSS & Javascript
Sebelum kita masuk ke prakteknya, ada baiknya anda mengetahui beberapa hal tentang framework. Kami akan menggunakan Framework untuk menulis kode program yang diperlukan
Dalam sistem komputer, framework adalah kerangka kerja program yang dibuat untuk memudahkan kita dalam proses penulisan kode. Beberapa fungsi dan logika yang sudah tersedia secara umum sehingga kita tidak perlu membuatnya lagi tentunya hal ini akan menghemat waktu belajar kita, jadi anda tinggal mengetahui cara menggunakannya
Ada beberapa framework yang akan kita gunakan, diantaranya adalah
- Kerangka CSS adalah Bootstrap 4
- Javascript menggunakan jQuery
Saya tidak akan membahas dan menjelaskan framework pada artikel ini karena kita akan fokus pada bagaimana menggunakan framework dalam menulis semua kode program yang diperlukan untuk membuat website. Anda tidak perlu khawatir karena itu bukan sesuatu yang sulit, justru akan memudahkan Anda
Kiat. Anda bisa berkreasi dengan membuat website sesuai dengan kebutuhan Anda, namun agar berhasil mengikuti panduan disini, saya sarankan Anda mengikuti tepat setelah itu Anda bisa berkreasi dan tidak pernah berhenti berkreasi
Tata letak situs web
Pertama kita akan menentukan layout website yang akan kita buat, saya sudah mendesainnya dengan gaya layout website standar pada umumnya. Pertama ada Header di bagian atas, lalu di bawahnya ada menu di kiri dan konten di kanan, di bawahnya kita akan membuat footer. Jika digambarkan tata letaknya kurang lebih seperti di bawah ini