Top Advertisement

Pengenalan Web: Langkah Awal Menjadi Website Developer

Pengenalan Web: Langkah Awal Menjadi Website Developer

Artikel ini ditujukan sebagai bekal dasar dalam Pemrograman Web. Dikhususkan untuk yang masih awam mengenai website dan istilah-istilah di dalamnya. Kami jabarkan dengan lugas dan jelas dengan bantuan ilustrasi. Semoga banyak hal bisa kamu pahami setelah membaca artikel ini. 

Definisi Web

Kamu sekarang sedang membuka website zendcode.web.id. Dalam website ini  terdapat banyak halaman yang semuanya tergabung menjadi satu, zendcode.web.id. 

"Website dapat katakan sebagai kumpulan beberapa halaman web yang berupa Dokumen HTML, yang antar halaman memiliki keterkaitan atau berhubungan, dan dapat diakses melalui internet menggunakan Web Browser. "

Website adalah kosakata Bahasa Inggris, yang dalam Bahasa Indonesia berarti `Situs Web`. Website bisa disebut `Web` saja, `Site atau Situs`, atau juga `Web Page`. 

Namun sebenarnya istilah `Web Page` untuk menyebut website kuranglah tepat.  Karena page artinya adalah halaman (satu halaman). Sedangkan website terdiri dari `banyak halaman web` -- `web page(s)`. 


Istilah `Homepage` dalam Situs Web

Penggunaan kata Web Page biasanya lebih merujuk pada halaman utama dari sebuah situs web. Ketika kamu mengunjungi alamat web: https://www.zendcode.web.id, yang akan muncul adalah halaman utama `main page` atau `homepage`, singkatnya `home` saja. 

Homepage juga punya sebutan lain, root page.  Root page adalah halaman yang ada di root directory / root folder. Saat alamat situs zendcode.web.id dikunjungi, yang ditampilkan adalah Dokumen HTML yang ada dalam root folder

Dalam praktik umumnya, dokumen HTML root page atau homepage ini diberi nama `index.html`. Sebenarnya bisa saja diberi nama yang lain, `home.html` misal. 

Namun jika website sudah disimpan di Web Server, penamaan harus mengikuti standar yang ditentukan pihak web hosting, umumnya `index.html`. Jika tidak, maka homepage tidak akan tampil, melainkan hanya tampilan folder dengan file-file di dalamnya. 

Setiap web hosting memiliki standar atau aturannya sendiri. Namun kebanyakan mereka menggunakan `index.html`. 


Struktur Dasar Situs Website

Dalam homepage, umumnya terdapat tautan `hyperlink atau link` yang menautkan atau menghubungkan homepage ke halaman-halaman lain di situs tersebut. 

Ilustrasi Struktur situs web: root/homepage, kategori, sub kategori, halaman.html


2 Jenis Website (Statis dan Dinamis)

Dilihat dari bagaimana konten website dibuat dan disajikan ke pengguna/pengunjung web, website dibagi menjadi dua jenis, web statis dan dinamis. 


Website Statis

Seperti definisi statis yang memiliki makna: diam, tidak bergerak, tidak berubah, dan tetap. Website Statis adalah website yang isinya tetap, tidak berubah ubah. 

Setiap penguna akan melihat tampilan dan informasi yang sama. Pengguna tidak dapat mengubah isinya, hanya bisa melihat-lihat saja. Yang bisa mengubah hanyalah pemilik website tersebut. Jika pemilik web tidak mengubah konten, maka kontennya akan tetap sama atau statis. 

Contoh website statis: 

  1. Website portofolio. Contohnya seperti: Kurnia - Frontend Web Developer dan Dezign - UI/UX Design Portfolio
  2. Blog. Contohnya Blog ZendCode ini.


Website Dinamis

Sedangkan dinamis adalah antonim dari statis, memiliki makna: terus menerus berubah, bergerak, dan berkembang. 

Pernah dengar frasa "dinamika kehidupan"

Dari kata dinamis pula, ia adalah kondisi manusia dalam hidup yang berubah ubah, kadang di atas kadang di bawah, naik turun, pasang surut. 

Kita ambil satu makna dinamis untuk mendefinisikan website dinamis. `terus menerus berubah`. Artinya sebuah website dinamis akan mengalami terus mengalami perubahan yang di sebabkan oleh interaksi pengguna. Website dinamis akan memiliki konten sesuai dengan preferensi pengguna. Pengguna adalah yang menentukan bagaimana website tersebut ditampilkan. 

Ciri utama website dinamis adalah website yang memerlukan user login. Setiap akun pengguna akan memiliki preferensi masing-masing, dan website akan ditampilkan berdasarkan preferensi pengguna. 

Contoh website dinamis: 

  1. Website media sosial. Sosial media seperti Facebook dan Instagram adalah website dinamis. Konten yang ditampilkan ke pengguna adalah apa yang pengguna minati, ikuti, dan sukai. Ketika kamu mengikuti akun dengan konten pemrograman, maka isi beranda kamu juga konten-konten pemrograman. 
  2. Website toko online. Pasti kamu sering berbelanja online. Coba perhatikan apakah produk-produk yang ditampilkan selalu sama? Pasti berubah-ubah. Produk yang ditampilkan di beranda berasal dari riwayat pencarian pengguna. Jika kamu mencari "sepatu" maka toko online akan merekomendasikan produk yang serupa. 
  3. Website forum. Forum seperti Quora.com adalah website dinamis. Forum adalah tempat berdiskusi. Umumnya salah satu pengguna akan memulai diskusi dengan membuat postingan atau thread, lalu pengguna lain akan memberikan respon dengan memberi komentar. 



Sejarah Website


3 Komponen Utama Dalam Website Menurut Tim Berners-Lee

Tim Berners Lee
Tim Berners Lee © CERN


Pada bulan Oktober 1990, Tim telah menulis tiga teknologi dasar yang tetap menjadi dasar dari web saat ini.

1. HTML (Hypertext Markup Language)

HTML merupakan singkatan dari "Hypertext Markup Language". Ini adalah bahasa markup yang digunakan untuk memformat dan mengatur konten pada halaman web.

HTML menggunakan elemen-elemen atau "tag" untuk memberikan struktur pada konten seperti teks, gambar, video, tautan, tabel, dan elemen-elemen lainnya. Browser web membaca dan menginterpretasikan kode HTML untuk menampilkan konten dengan format yang sesuai.


2. URI (Uniform Resource Identifier)

URI merupakan singkatan dari "Uniform Resource Identifier". Ini adalah metode standar untuk mengidentifikasi sumber daya di web, seperti dokumen, gambar, video, atau halaman web.

URI mencakup URL (Uniform Resource Locator) yang digunakan untuk menunjukkan lokasi tepat dari sumber daya di web, serta URN (Uniform Resource Name) yang memberikan nama unik untuk suatu sumber daya tanpa memperhatikan lokasi. 

Dengan menggunakan URI, kita dapat mengakses dan mengidentifikasi sumber daya di web secara unik.


3. HTTP (Hypertext Transfer Protocol)

HTTP merupakan singkatan dari "Hypertext Transfer Protocol". Ini adalah protokol yang digunakan untuk mentransfer data melalui internet. HTTP memungkinkan komunikasi antara web server dan web browser. 

Ketika Anda memasukkan URL ke dalam browser, browser menggunakan protokol HTTP untuk mengirim permintaan ke server yang meng-host website tersebut.

Server kemudian merespons dengan mengirimkan konten yang diminta kembali ke browser. HTTP juga memungkinkan tautan atau hyperlink antara halaman-halaman web, sehingga pengguna dapat berpindah dari satu halaman ke halaman lainnya melalui tautan yang diklik.


Dengan demikian, HTML, URI, dan HTTP merupakan komponen utama dalam membangun dan mengakses halaman-halaman web. HTML digunakan untuk memformat konten pada halaman, URI digunakan untuk mengidentifikasi sumber daya secara unik, dan HTTP digunakan untuk mentransfer data antara web server dan web browser. Dengan kombinasi ketiganya, kita dapat menjelajahi dan berinteraksi dengan website di internet.




3 Teknologi Dasar Pembangun Halaman Website

Tiga teknologi dasar yang umum digunakan dalam pembangunan halaman website adalah sebagai berikut:


1. HTML (Hypertext Markup Language)

HTML merupakan bahasa markup standar untuk membangun struktur dan mengatur konten pada halaman web. Dengan menggunakan elemen-elemen HTML, seperti tag, atribut, dan nilai-nilai, kita dapat memformat teks, menambahkan gambar, membuat tautan, membuat tabel, dan masih banyak lagi. HTML menyediakan kerangka dasar yang diperlukan untuk membangun halaman web.


2. CSS (Cascading Style Sheets)

CSS merupakan teknologi yang digunakan untuk mengatur tampilan dan tata letak halaman web. Dengan CSS, kita dapat mengendalikan aspek visual seperti warna, jenis font, ukuran, margin, padding, dan posisi elemen-elemen pada halaman. CSS memisahkan presentasi visual dari struktur HTML, sehingga memungkinkan pemisahan antara konten dan tampilan, serta memberikan fleksibilitas dalam desain web.


3. JavaScript

JavaScript adalah bahasa pemrograman yang digunakan untuk memberikan interaksi dan fungsionalitas dinamis pada halaman web. Dengan JavaScript, kita dapat membuat efek animasi, validasi formulir, pemrosesan data, pemanggilan API, manipulasi elemen HTML, dan banyak lagi. JavaScript memungkinkan interaksi pengguna yang lebih responsif dan dinamis di dalam website.


Kombinasi ketiga teknologi ini (HTML, CSS, dan JavaScript) memberikan dasar yang kuat untuk membangun halaman web yang kaya akan konten, visual menarik, dan interaktif. Dengan HTML sebagai struktur dasar, CSS untuk tampilan dan tata letak, serta JavaScript untuk interaksi, kita dapat menciptakan pengalaman pengguna yang lebih baik dan dinamis di web.