Cara Kerja Website Dalam Menampilkan Data Pada Layar

Cara Kerja Website Dalam Menampilkan Data Pada Layar

Setelah sebelumnya kita belajar mengenai Internet di postingan Cara Kerja Internet dan kita sudah mengetahui bahwa sebenarnya internet itu sangat simpel selain itu kita juga sudah tahu bahwa internet backbone di dunia sangatlah banyak.

Kali ini kita akan mencoba untuk belajar bersama tentang Cara Kerja Website.

Jadi sebenarnya apa sih yang dilakukan oleh HTML, CSS dkk, untuk mengakses suatu website kita membutuhkan Web Browser bukan, seperti Chrome dan Mozila dimana browser ini akan me lookup ip addres dari website yang ingin kamu lihat sehingga browser bisa menerima data dan dapat menampilkan tampilan website keren ke layar monitormu.

Sekarang data yang diterima oleh web browser biasanya memiliki tiga jenis tipe file yaitu HTML, CSS, dan Javascript.

Mungkin kamu sering mendengar ke tiga jenis tipe file tadi akan tetapi apakah kamu tahu kegunaanya? Kenapa juga ada cukup banyak tipe file untuk bisa menampilkan sebuah website, kenapa tidak menggunakan satu file saja seperti yang kita tahu yaitu misalnya file website.

Jadi di setiap file ini mereka memiliki tanggung jawabnya masing-masing, seperti halnya HTML ia memiliki peran sebagai struktur dari sebuah website, jadi jikalau website adalah sebuah rumah, maka HTML adalah seorang pekerja yang bertugas untuk membuat pondasi awal seperti membangun tembok, pilar penyangga dan atap.

Jadi pada dasarnya HTML adalah file yang berguna untuk membangun struktur rumahmu.

Oleh karena itu ketika kamu menulis kode HTML kamu sama saja membuat struktur website yang kamu kelola, kamu bisa menambahkan gambar, membuat link, button maupun text box.

Dan yang kedua adalah file CSS dimana tugasnya ialah mendekorasi website yang kamu miliki, jadi jika website adalah rumah maka CSS adalah orang yang melakukan dekorasi ruangan seperti mengecat tembok dll, intinya dia bertugas untuk melakukan styling sesuai dengan apa yang kamu inginkan.

Jadi saat menulis CSS kamu bisa mengubah tampilan website sesuka hatimu, misalnya saja saya ingin button ini berwarna merah, saya ingin gambar ini memiliki border radius sehingga gambar tidak kotak tetapi bulat atau oval.

Dan file yang terakhir adalah file javascript yang berekstensi .js, javascript ialah bahasa pemrogramman yang mengizinkanmu untuk melakukan sesuatu di dalam sebuah webste. Jika kita asumsikan sekali lagi kalau website adalah rumah, maka Javascript ini adalah orang yang melakukan penyetelan yang berhubungan dengan interaksi manusia, misalnya melakukan pemasangan lampu dimana lampu ini bisa nyala mati sesuai dengan interaksi yang kita berikan.

Contoh mudahnya di dalam website ialah PopUp, kalau kalian sering searching di google kemudian membuka website atau blog yang ada iklanya kalian mungkin akan sering menemukan iklan pop up dimana ia mneggunakan javascript sebagai interaksinya digabung dengan HTML untuk struktur popipnya dan CSS untuk stylenya.

Berikut lebih jelasnya, gambar di bawah ialah halaman google tanpa css dan javascript.

JUST html

Dan ini halaman google dengan HTML dan CSS.

google with css and html

Dan ini halaman google dengan HTML, CSS dan Javascript.

with js

Seperti yang kalian lihat jika javascript dinyalakan maka fitur search suggestion akan aktif sehingga di dalam halaman ini terlihat adanya aktivitas atau behavior yang berjalan tidak serta merta diam.

Nah sekarang coba kalian buka www.tresnadev.com dan kalian coba inspect element dengan cara klik kanan dan pilih inspect.

inspect element

Maka kalian akan melihat berbagai maca kode, nah kode ini merupakan kode HTML, CSS dan Javascript, kalian bisa melakukan editing disini secara langsung, misalnya mengganti tulisan pada halaman website sesuai dengan keinginan, akan tetapi hal ini hanya berlaku di komputermu saja, ketika kamu me refresh halaman maka tulisanya akan berubah seperti sedia kala.

edit relatime html

Itulah tutorial Web Development mengenai Cara Kerja Website, semoga bisa membantu dan bermanfaat, dan jangan lupa bertanya jika masih ada kendala dalam mempelajari materi ini, salam hangat dari Tresnadev Team.

0 Comments

Post a comment