lifelong learner — urip iku urup, currently working on accenture.

Bagaimana website dapat dibuat dan dapat ditampilkan oleh browser

0
Degananda.com -

Situs web pada dasarnya dibuat dengan menggunakan HTML (Hypertext markup language) dan CSS (Cassading style sheet). Namun, seiring dengan perkembangan teknologi terutama website e-commerce , CMS(Content management system), enterprise software dibangun tidak hanya dengan mengunakan HTML dan CSS saja melainkan menggunakan teknologi lain. Contohnya website tracking yang terhubung langsung dengan GPS akan melibatkan protokol untuk menjembatani komunikasi antara web server dengan devices itu sendiri.

HTML

Hypertext markup langauge atau yang kerap disebut dengan HTML . Markup dalam bahasa indonesia dapat diartikan sebagai anotasi. Dalam suatu kumpulan kata contohnya perbedaan antara anotasi dan konten dari kumpulan kata tersebut adalah anotasi secara mudah dibedakan (oleh manusia).

Perhatikan kalimat dibawah ini

Pengumuman bagi siswa dan siswi kelas IX-B untuk mengirimkan tugas melalui email : degananda.ferdian@gmail.com

Dari kalimat diatas anotasi yang tampak adalah huruf “@” (at) atau biasa orang kerap menyebutnya dengan sebutan A Keong.

Hal ini juga berlaku dengan HTML itu sendiri. Kode HTML adalah anotasi yang ada didalam suatu halaman web. Perhatikan gambar dibawah ini untuk membedakan text biasa dan HTML didalam source code suatu halaman web.

Anotasi dari source diatas adalah



<h4 class="h4"><span class=""></span></h4>


sedangkan text di source code tersebut yakni
Where can I find more info about degananda.com?

Fungsi HTML

HTML yang berfungsi sebagai anotasi didalam source code halaman web akan diterjemahkan oleh browser untuk membungkus text menjadi format yang diinginkan. Contohnya untuk menebalkan suatu kalimat maka kita membutuhkan anotasi bold yang membungkus suatu text. Perhatikan contoh berikut ini

<b>Degananda Ferdian</b>

source code tersebut saat dibaca atau dirender oleh browser akan menghasilkan atau menampilkan tulisan “degnanda ferdian” secara bold (tebal).

CSS

Casading style sheet atau biasa singkat dengan nama “CSS” adalah suatu kode stylesheet  yang digunakan untuk mengatur tampilan(presentasi) dari suatu website. Tampilan yang dimaksut sering kali disebut dengan sebutan presentation semantics yakni suatu aturan yang digunakan untuk mendefinisikan bagaimana kode yang terdapat didalam suatu web akan ditampilkan.

Contoh presentation semantics dalam kasus menampilkan website adalah aturan yang mengatur mengenai format bagaimana suatu text dapat ditransformasikan bentuk ataupun warnannya. Presentation semantics dalam markup(html) harus mengikuti format <kodemarkup/anotasi>text</kodemarkup/anotasi>.

Intinnya presentation semantics ini akan mengatur bagaimana kita harus menuliskan suatu anotasi. Ketika anotasi(HTML) yang kita tuliskan tidak mengikuti format presentation semantics maka akan terjadi dua kemungkinan

  1. Tampilan tidak akan menjadi seperti yang kita inginkan karena anotasi tidak fahami oleh browser.
  2. Tampilan menjadi seperti yang kita inginkan namun, format anotasi (HTML) yang kita tuliskan tidak standar. Perhatikan bahwa tidak standar bukan berarti kode tersebut tidak berjalan. Akan terdapat berbagai akibat tidak standarnya kode html yang kita tuliskan. Salah satunnya adalah nilai google page rank yang rendah dan juga dapat mengakibatkan website kita susah untuk diteumakan di google search.

Sehingga dapat kita simpulkan CSS bertanggung jawab atas kustomisasi tampilan dari website yang kita buat. perhatikan meme dibawah ini terkait CSS agar lebih mudah memahaminnya.

CSS akan membeautify atau mempercantik website yang kita miliki. Ingat bahwa CSS hanya akan berjalan pada anotasi HTML saja. CSS tidak akan mengenali text biasa yang terdapat di sourcecode web.

Tanpa CSS, website hanya akan terlihat plain/datar. CSS ibarat makeup yang dapat memutihkan atau mempergelap wajah kita sesuai dengan kode stylesheet yang telah didefinisikan.

Kemampuan CSS

CSS selalu berevolusi hingga kini menginjak versi ke-3 (CSS) beberapa kemampuan yang dapat dilakukan CSS

  1. Mengatur jarak antar komponen (html),contoh padding tabel, margin tabel, posisi (x,y).
  2. Mengganti warna dari suatu komponen.
  3. Mengganti ukuran dari suatu komponen. Contoh mengatur lebar gambar ataupun lebar dari textarea, button, etc.
  4. Dan lain sebagainnya yang akan kita bahas secara spesifik dikonten mengenai CSS.

Apa yang kita lihat saat membuka website

Saat kita memanggil website dengan mengetikan alamat(url) website tersebut dibrowser maka browser akan mendapatkan dua file yakni HTML dan CSS. Browser akan mengintepretasikan(menggabungkan, menerjemahkan HTML dan CSS) menjadi tampilan website yang dapat di lihat oleh manusia.

Selain HTML dan CSS juga terdapat komponen lain yang ditampilkan oleh browser dalam suatu website yakni gambar, video dan beberapa media lain (font, csv, etc) atau bahkan script yang mengatur interaksi antara browser , user , web server dan html atau biasa kita sebut dengan javascript.

Beberapa situs  juga sering kita temui masih menggunakan flash. Mengapa kami sebut masih? karena saat ini HTML 5 memiliki teknologi yang lebih advance dibandingkan dengan flash Untuk dapat mempelajari teknologi yang lebih advanced dalam hal web programming seperti javascript, html 5 ataupun flash(jika memang membutuhkan, not recomended) maka kita harus mengetahui dasar-dasar dari HTML(syntax anotasi yang di interpretasikan oleh browser) dan CSS karena kedua hal itu adalah komponen utama dari suatu website.

Bagaimana website dibuat

Website yang sederhana hanya akan menggunakan dua komponen yakni HTMl dan CSS. Semakin kompleks website tersebut akan melibatkan berbagai teknologi web saat ini. Contohnya untuk website 2.0 (yang konten dapat dibuat oleh user) maka memerlukan teknologi database dan web server yang dapat menjembatani antara presentation layer, application layer dan database layer.

Website yang dapat kita katakan kompleks seperti e-commerce, banking, CMS, e-commerce software dan lain sebagainnya yang memang tidak dapat dibangun dengan hanya mengandalkan HTML dan CSS saja. Namun untuk dapat membuat website yang kompleks maka kita harus mengetahui dasar-dasar dari HTML dan CSS karena sangat fundalmental bagi seorang web developer.

Apakah konten yang dihasilkan advanced technology pada browser?

Website seperti e-commerce ataupun CMS memang dibangun dengan teknologi yang kompleks dibelakangnya seperti menggunakan jboss, database microsoft sql server, web service yang sangat canggih dalam mengolah pertukaran data dengan http. Namun percayalah, serumit apapun teknologi yang digunakan dalam backend ataupun frontend dari suatu website , Web server hanya akan mengembalikan HTML pada browser. karena hanya html sajalah yang dapat di intepretasikan oleh browser sehingga dapat dilihat dan dimengerti oleh user(manusia).

teknologi backend(server) yang populer saat ini adalah asp.net , php, python , golang, nodejs dan lain-lain yang mana teknologi tersebut dapat menunjang kita dalam membangun website yang kompleks. Untuk menuju kesana maka kita membutuhkan pengetahuan mendasarkan mengenai dua komponen fundamenatal dari suatu website yakni HTML dan CSS.

HTML 5 dan CSS 3

HTML dan CSS terus berkembang seiring dengan berjalannya waktu. Saat ini tahun 2018, versi html terahir adalah HTML 5 dan CSS 3. Perbedaan utama antara HTML, CSS dengan versi-versi terdahulunnya adalah kemampuan yang ditawarkan. Contohnya dulu, untuk melakukan animasi kita membutuhkan flash player. Sekarang dengan mengkombinasikan HTML 5 dan CSS 3 saja kita dapat membuat suatu animasi didalam browser. Lebih advanced lagi ketika menggabungkannya juga dengna javascript semakin kompleks pula animasi yang dapat dihasilkan.

Untuk dapat memahami HTML 5 dan CSS 3 maka kita perlu mempelajari versi HTML dan CSS sebelum rilis versi 5 dan 3. Tantangan dalam menggunakan HTMl 5 dan CSS 3 adalah support dari browser. Meski saat ini sudah banyak browser yang melakukan support. namun kita tidak dapat memprediksi browser versi berapa yang digunakan oleh user pada saat mengakses website yang kita buat. Intinnya, jangan menggunakan kode / anotasi baik pada HTML, CSS atau javascript yang jarang disupport oleh browser karena dapat merusak tampilan atau bahkan fungsionalitas dari website itu sendiri.