Lama tak sua akhir ya kita kembali lagi ke dunia perkomputeran. Sesuai tajuk daripada blog ini, maka pada kesempatan kali ini saya ingin mencoba memaparkan bgaimana cara menjadi seorang web developer dengan menguasai beberapa bahasa pemrograman seperti javascript, php, python dan lain sebagainya. Sebagai seorang pemula ada baiknya jika belajar dari dasar, akan tetapi mempeajari beberapa bahasa pemrograman dari dasar akan menambah kebingungan sebagai seorang pemula karena pada dasarnya beberapa bahasa pemrograman terkenal seperti Javascript dan PHP hanya melakukan penenalan dan perhitungan dasar matematika. Ini akan menyisakan kebingungan para pembelajar pemula, karena pemula merasa tidak menemukan jawaban atas pertanyaamnya terlebih mengobati penasarannya. Nah, bagi yang pemula yang masih kebingungan dalam menyusun dan memilih bahasa pemrograman yang cocok untuk projectnya ada baiknya dikenali dulu kebutuhannya, jika hanya sebatas untuk menjadi seorang web developer pilihannya hanya dua yaitu menjadi Front-end atau Back-end atau menjadi keduanya.
terdapat sebuah tombol dengan warba latar dan bertuliskan tombol. Tombol diatas dibuat tanpa menggunakan sentuhan CSS, darilah itu bentuk dan warnanya alami tidak memiliki kesan bagi yang melihat, namun bagaimana kalo kita tambahkan sentuhan css seperti kita rubah warna latar dan tulisannya? Untuk dapat membuatnya maka kita perlu menambahkan syntax <style> pada <head> untuk membuat internal CSS. Berikut contohnya.
tombol yang kita buat diawal sekarang memiliki warna latar yang berbeda dan warna tulisan yang berbeda pula bukan? Artinya kita sidah berhasil merubah tampilan sebuah element.
Front-end untuk pemula
Apa itu front-end? Kegiatan atau aktivitas design yang dilakukan dengan menyusun baris kode yang dapat digunakan sebagai user interface sehingga memberikan pengalaman baru terhadap pengguna saat mengakses halaman website tertentu. Ini asumsi ane ya, bukan dari wiki atau yang lainnya. Nah, kemudian apa hubungannya dan apa salahnya serta apa fungsinya front-end dengan web developer? Jika ditanya hubungan sudah pasti hubungannya sangat erat, karena sebuah web tanpa front-end tidak akan mungkin disebut web, karena pada setiap yang tampil pada web seperti warna, element, gambar, video, tombol dan yang lainnya adalah bagian dari front-end. Bayangkan saja sebuah web tanpa front-end, apa yang dapat user lakukan? Dalam hal ini saya perlu memberitakan bahwa bahasa pemrograman yang dapat digunakan untuk menguasai front-end adalah sebagai berikut:
(1) HTML (HyperText Markup Language), (2) CSS (Cascading StyleSheet), (3) JS (Javascript).
HTML (hypertext markup language)
Apa itu HTML? Tulisan yang digunakan untuk menandai tulisan sebagai bagian dari struktur web. HTML merupakan bagian dasar atau kerangka dalam membuat sebuah web karena setiap element yang akan digunakan oleh user/pengunjung merupakan hasil dari html. HTML memiliki struktur khusus sebagai kerangka yaitu <html>, <head> dan <body>. Masing - masing struktur memiliki peran dan pasangan, seperti <html> perannya adalah memberitahukan kepada browser bahwa apapun yang ada di dalamnya akan dibungkus oleh html dan harus dirender menjadi tampilan, sedangkan pasangannya adalah </html>, dimana <html> sebagai pembuka dan </html> sebagai penutup. <head> merupakan salah satu unsur yang ada dalam <html> struktur ini kemudian disebut dengan syntax atau tag, fungsi dari <head> adalah menyimpan sejumlah informasi pada bagian kepala website, biasanya berisi tentang beberapa informasi seperti judul web dan tautan - tautan yang akan digunakan dalam web nanti kita akan membahasnya kemudian, seperti <html>, <head> pun memiliki pasangan sebagai penutupnya yaitu </head> jadi apapun yang ada di dalamnya akan ditampilkan pada bagian kepala website. Sedangkan <body> merupakan syntax yang digunakan untuk menampung isi dari website tersebut, didalamnya terdapat ratusan bahkan ribuan syntax yang digunakan tergantung dari website itu sendiri apakah isinya benar - benar banyak atau hanya sedikit.
CSS (cascading styleSheet)
Apa itu CSS? CSS merupakan salah satu bagian dari bahasa pemrograman yang dapat digunakan sebagai modifier untuk element atau syntax yang digunakan oleh html. Sehingga banyak web developer menyebutnya sebagai kulit daripada website. Contoh kecil fungsi dari css adalah tulisan ini, ada yang tebal ada yang miring dan ada yang memiliki warna dan ada yang tidak. CSS dapat digunakan dengan 2 (dua) metode yaitu dengan cara internal dan external. Untuk lebih memudahkan pembaca memahami penggunaan CSS, maka akan saya berikan contoh yang mudah - mudahan dapat memberikan wawasan baru, berikut saya sertakan screenshoot penulisan syntax html tanpa dilengkapi css.
Penambahan syntax <button> adalah untuk membuat sebuah tombol pada website, sehingga saat dipreview maka tampilan webnya akan menjadi seperti berikut:
Syntax <style> digunakan untuk menandai browser bahwa syntax tersebut dapat digunakan merubah properties dari sebuah element. Tulisan button yang ada di dalam style adalah untuk memilih element dengan syntax button untuk diberi / dirubah propertiesnya. Setiap properties yang akan ditempelkan pada element harus berada dalam tanda buka dan tutup kurung kurawa { }. Tulisan background-color merupakan sebuah properties yang ditambahkan pada element button sehingga memberikan perubahan warna latar pada semua element button. Tulisan color digunakan untuk menabahkan properties pada element button yang merupakan pengubah warna font/tulisan. Sehingaa saat kode - kode inu dieksekusi akan menjadi seperti gambar di bawah ini.
Comments
Post a Comment