Belajar HTML, CSS, dan JavaScript: Langkah Awal Menjadi Web Developer ??

Belajar HTML, CSS, dan JavaScript: Langkah Awal Menjadi Web Developer ??

Hai Sogi (Sobat Teknologi) welcome back with us..

Gimana ni kabar para Sogi , sehat ? Alhamdulillah pada sehat semua ya..

Mungkin ada beberapa dari kalian yang tidak asing dengan logo di atas ya 😄
Yap, benar! Logo tersebut adalah logo dari HTML (paling kiri), JavaScript (tengah), dan CSS (paling kanan).

HTML, CSS, dan JavaScript adalah fondasi utama dalam dunia web development. Biasanya, para web developer akan memulai perjalanan belajarnya dari ketiga bahasa ini.

Nah, buat kamu yang masih pemula atau ingin mulai belajar membuat website, HTML, CSS, dan JavaScript adalah langkah awal yang tepat untuk dipelajari.

Yuk, mulai eksplorasi dunia web development dari dasar dulu!

"Min itu semua bahasa pemrograman kah ?", "Min, itu banyak banget dong di pelajari", "Min, kalau bisa ini udh bisalah ya bikin web, hehehe", "Min mudah gk sih bahasanya takutnya mumet nih...".

Tenang para Sogi, kalem dulu gausah dibawa pusing...

Nah, hari ini kita akan bahas mengenai html, css,& javascript, let's go mari kita bedah satu-satu ya..

1. Html [HyperText Markup Language]

Html adalah singkatang dari HyperText Markup Language. Dan ingat baik-baik ya Sogi html bukanlah bagian bahasa pemrogramannya.

"Kenapa bukan bahasa pemrograman min, jadi html itu apa min..?"

Nah pada bingung kan...

Html adalah bahasa markup standar yang digunakan untuk membuat dan menyusun halaman web.

Html tidak bisa menjalankan logika atau perintah, karena hanya berfungsi untuk menandai dan menyusun struktur konten di halaman web. Menentukan struktur konten di sebuah halaman web. Mengatur judul, paragraf, gambar, link, tabel, dan lain-lain.Jadi pondasi utama dari setiap website, sebelum ditambahkan CSS (untuk tampilan) dan JavaScript (untuk interaktif).

Nah mimin spill ni kode sederhana untuk html nya ya..

Penjelasan singkatnya:

<html> = elemen utama HTML
<head> = bagian informasi (judul, meta, dsb)
<body> = isi utama yang terlihat di web
<h1> = judul besar
<p> = paragraf

Hasil nya bisa dilihat seperti ini :

- Tittle pada code untuk menunjukkan pada tulisan "Halaman Pertamaku" bisa dilihat di bagian paling atas di bagian tab atas

- h1 pada code adalah untuk menampilkan judul besar pada web

- p pada code adalah untuk menampilkan paragfraf pada web

HTML bukan bahasa pemrograman, tapi bahasa markup yang digunakan untuk membuat struktur halaman web.

Btw, ini hanya sebagian permulaan dari web developer ya karena masih banyak hal lainnya pada web developer

2. CSS [Cascading Style Sheets]

CSS adalah singkatan dari Cascading Style Sheets, yaitu bahasa yang digunakan untuk mengatur tampilan dan gaya dari elemen-elemen HTML di halaman web. Css juga bukan merupakan dari bahasa pemrograman ya. CSS hanyalah bahasa stylesheet (lembar gaya) yang digunakan untuk mengatur tampilan elemen di halaman web.

Nah, untuk melihat tampilan lebih baik dan lebih berwarna kita harus kasih sedikit bumbu-bumbu nih,
"Maksudnya bumbu-bumbu apa min?, ketumbar kah? jahe kah? atau bumbu siap jadi min ??"

Nah maksud mimin bumbunya itu adalah penghiasnya, bosen dan gak menarik pastikan kalau suatu web tanpa penghias ataupun pewarnaan serta desain yang menarik, maka muncul lah CSS ini untuk menghasilkan "bumbu-bumbu" tersebut, gitu lho...

Nah tentu saja CSS mempunyai fungsi nya..

Berikut beberapa fungsi utama CSS:

Mengatur warna (teks, latar belakang)
Mengatur layout dan posisi elemen
Menentukan ukuran font, margin, padding, border, dll
Membuat desain responsive (tampilan bisa menyesuaikan berbagai perangkat)
Membuat animasi dan efek transisi
Menyediakan konsistensi tampilan di seluruh halaman

Tau gak kalau ternyata CSS itu terbagi beberapa macam ??

"Gak tau lah min toh baru belajar ni 😅"

Hehehe iya juga ya, sini mimin jelasin nih...

Nah, CSS itu terbagi menjadi 3 :

1. Inline CSS

CSS langsung ditulis di dalam tag HTML menggunakan atribut style

Code :

Hasil :

Nah tampak beda kan sama yang html biasa nih..

Ini bentuk dari Inline CSS, tentu saja setiap masing-masing pembagian CSS ada kelebihannya masing-masing nih

✔️ Kelebihan:

Cepat dan langsung terlihat hasilnya
Cocok untuk uji coba cepat

❌ Kekurangan:

Sulit dirawat (tidak efisien kalau banyak elemen)
Gaya bercampur dengan konten HTML (kurang rapi)

2. Internal CSS

CSS ditulis di dalam file HTML, tepatnya di bagian <head> menggunakan tag <style>.

Code :

Hasil :

Beda lagi kan tata peletakannya ni..

✔️ Kelebihan:

Mudah diatur untuk halaman tunggal
Semua gaya ada dalam satu file HTML

❌ Kekurangan:

Tidak efisien untuk banyak halaman (harus ulang lagi)

3. External CSS

CSS ditulis di file terpisah (biasanya .css), lalu disambungkan ke HTML lewat tag <link>.

Code HTML nya :

Code CSS nya :

Hasil :

Beda banget kan sama yang sebelum-sebelumnya kan...

"Eh iya min, ini lebih bagus tu min, tapi kok ada 2 file kode nya ya min..?"

Nah itu dia 1 file untuk code html nya & 1 file untuk code css nya, sesuai dengan namanya yaitu external dan letaknya itu diluar dari html.

Nah cara pemanggilannya itu bisa di panggil dengan

ini adalah pemanggil si CSS nya, btw itu sesuaikan dengan nama file css nya ya, kalau mimin punya namanya style.css, nanti kalau gk sesuai kgk kepanggil nih, hehehehe

Tentu saja ada plus minus nya nih :

✔️ Kelebihan:

Rapi dan profesional
Satu file CSS bisa digunakan untuk banyak halaman
Lebih cepat dalam maintenance

❌ Kekurangan:

Harus koneksi ke file eksternal (tapi ini best practice)

3. Javascript

"Nah ini apalagi ni min ? sepupunya si java kah atau apa ni ?"

Nah kalau Javascript ini adalah bahasa pemrograman yang digunakan untuk membuat website menjadi interaktif dan dinamis.Kalau HTML adalah struktur, CSS adalah tampilan, maka JavaScript adalah otaknya — yang mengatur interaksi pengguna seperti klik, input, animasi, validasi, dan banyak lagi. (seperti gambar diatas sebelum penjelasan html).

JavaScript bisa digunakan untuk:

Membuat tampilan web interaktif (klik tombol, dropdown, tab, dll)
Mengubah konten secara dinamis tanpa reload halaman
Validasi form (sebelum data dikirim ke server)
Berinteraksi dengan server (misalnya dengan AJAX atau Fetch API)
Membuat animasi dan efek visual
Membuat aplikasi SPA (Single Page Application) seperti di React, Vue, atau Angular.

Bukan hanya CSS ada beberapa macam ni, tapi Javascript juga nih

Pembagian penulisan JavaScript bisa dilakukan dengan 3 cara, yaitu:

Inline JavaScript
Internal JavaScript
External JavaScript

1. Inline Javascript

Code :

Hasil :

Muncul seperti notif apabila bagian "Klik Saya" itu di klik.

Kode JavaScript ditulis langsung di dalam atribut onclick pada elemen <button>.

Ketika tombol diklik, fungsi alert() dijalankan → munculkan pop-up pesan.

✅ Kelebihan:

Penulisan cepat dan langsung di elemen HTML.
Cocok untuk aksi sederhana (misalnya 1 tombol klik).
Tidak perlu file tambahan.

❌ Kekurangan:

Tidak rapi (gaya bercampur dengan struktur).
Susah di-maintain kalau proyek besar.
Tidak scalable (tidak cocok untuk banyak fitur).
Bisa mengurangi performa loading dan SEO.

2. Internal JavaScript

Code :

Hasil :

Muncul seperti notif apabila bagian "Klik" itu di klik.

Internal JavaScript ditulis di dalam tag <script> pada bagian <head> atau <body> halaman HTML.Fungsi sapa() dibuat di dalam <script>

Tombol punya onclick="sapa()" → saat diklik, akan menjalankan fungsi sapa() yang memunculkan alert.

Kode JavaScript dan HTML berada dalam satu file, tapi kode JavaScript tetap terpisah dari elemen (tidak ditulis langsung di tag HTML seperti inline)

✅ Kelebihan:

Kode JavaScript berada dalam satu file HTML.
Cocok untuk proyek kecil yang hanya punya 1 halaman.
Tidak perlu file tambahan .js.

❌ Kekurangan:

Tidak reusable (tidak bisa dipakai di banyak halaman).
Jika banyak kode, file HTML jadi berat dan panjang.
Sulit diatur kalau struktur kodenya kompleks.

3. External JavaScript

Code HTML

Code JavaScript

Hasil :

Muncul seperti notif apabila bagian "Klik " itu di klik.

External JavaScript ditulis di dalam file terpisah (misalnya script.js) dan dihubungkan ke halaman HTML melalui tag <script src="script.js" defer></script>.

Fungsi sapa() didefinisikan di dalam file eksternal tersebut.

Tombol memiliki atribut onclick="sapa()" → saat tombol diklik, akan menjalankan fungsi sapa() yang memunculkan alert.

Kode JavaScript dan HTML berada dalam file yang berbeda, tetapi tetap saling terhubung.

✅ Kelebihan:

Paling direkomendasikan untuk proyek profesional.
File JavaScript terpisah → lebih rapi & mudah dikelola.
Bisa digunakan di banyak halaman (reusable).
Mempercepat loading HTML karena file JS bisa di-cache oleh browser.
Lebih SEO-friendly.

❌ Kekurangan:

Butuh koneksi ke file eksternal.
Harus hati-hati penempatan <script src=""> (biasanya di akhir body untuk menghindari error karena DOM belum siap).

Sudah paham sampai sini?
Kalau belum bisa dibaca kembali ya..

Cari Blog Ini

Word Tech Inc