Cara menggunakan notepad javascript online

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

1. Pengenalan HTML, CSS, Javascript
2. Persiapkan semua hal yang diperlukan
3. Buat situs web dengan HTML, CSS, dan Javascript
4. Pembuatan website secara online sehingga dapat diakses melalui internet

Oke kita mulai dari yang pertama

1. PerkenalanHTML, 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 # MempersiapkanSemua 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 DenganHTML 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

Bagaimana cara menjalankan JavaScript?

Aplikasi apa yang menggunakan JavaScript?

Di mana JavaScript biasanya digunakan?

Di mana kode JavaScript ditempatkan?