Frontend Developer vs Backend Developer: Januari 2021

Minggu, 31 Januari 2021

APA ITU CSS3? | PERBEDAAN CSS DENGAN CSS3

Halo semuanya! kembali lagi di konten pemuda koding yang membahas seputar web development khususnya frontend development. di koten-konten sebelumnya kita membahas tentang CSS dari mulai sejarah, perkembangan, anatomi, sampai beberapa penggunaan CSS dalam halaman HTML. Nah dikonten kali ini kita akan membahas tentang versi CSS generasi ketiga dengan fiturnya yang keren-keren, yaitu CSS3. Di CSS3 ini beberapa fitur yang unik dan tentunya keren banyak ditambahkan di dalamnya. Penasaran apa aja itu? langsung aja kita ke pembahasannya ya!

CSS3 sebenarnya telah dipublikasi sejak tahun 1999 dan baru populer sekitar tahun 2010. Sebenarnya pengertian CSS3 yang berarti CSS dengan generasi ketiga ini serupa dengan pengertian CSS itu sendiri, yang membedakan adalah pada CSS3 ditambahkan fitur2 yang menunjang visualisasi yang lebih menarik dan interaktif, seperti animasi, transisi, transformasi, sampai layout yang fleksibel. Dengan adanya CSS3 ini maka pengalaman untuk pengguna akan lebih menarik lagi. Contoh dari fitur-fitur atau property pada CSS3 di antaranya:

Properti Border:

Border Color
Border Image
Border Radius
Box Shadow

Properti Background:

Background Origin
Background Clip
Background Size
Multiple Background

Properti Color:

HSL Color
HSLA Color
RGBA Color
Opacity

Properti Text:

Text Effects
Text Shadow
Text Overflow
Wordwrap

Properti User Interface:

User Intercafe
Box Sizing
Outline
Resize

Properti Lainnya:

Overflow X
Overflow Y
Media Queries
Web Font
Multi Column Layout

Meskipun penggunaan CSS3 sangat powerful, namun belum semua browser support CSS generasi ketiga ini. Beberapa browser yang sudah support dengan CSS3 adalah Mozila Firefox, Safari, Opera, Google Chrome dan Internet Explorer 9. Nah seperti itulah pembahasan singkat mengenai CSS generasi ketiga yang kehadirannya sangat powerful dan bermanfaat bagi web developer dalam pengembangan web. Sampai sini dulu konten kali ini, pemuda koding pamit dan sampai jumpa di konten selanjutnya ya! Salam koding.

Rabu, 27 Januari 2021

Penggunaan Inline CSS, Internal CSS dan Eksternal CSS

Halo semuanya! sebelumnya kita sudah membahas dan mencoba kenalan dengan salah satu teknologi internet yang nama nya CSS, dari mulai pengertian, fungsi CSS dalam pengembangan web, sejarah, perkembangan, fitur-fitur yang ada sampai anatomi dari CSS itu sendiri. Nah dikonten kali ini saatnya kita mencoba kenalan lebih dalam dan juga mencoba menuliskan sintaks-sintaks CSS nya. Dengan mengenal lebih dalam tentang CSS, diharapkan kalian mampu membuat halaman HTML kalian menjadi lebih menarik dan juga interaktif. Jadi, penulisan pada CSS ada 3 cara, yaitu inline, embedded, dan eksternal file, yakni dengan memanggil file lain untuk terhubung dengan HTML yang dibuat. Pemuda koding akan coba bahas satu per satu ya!

Inline CSS

Gaya penulisan CSS pada inline CSS ini adalah dengan cara menambahkan atribut style di dalam elemen HTML yang akan diberikan style. Dengan menuliskan CSS dengan cara inline elemen, maka style ini yang akan dieksekusi lebih dulu oleh browser saat dijalankan. Cara ini kurang direkomendasikan karena setiap kita ingin memberikan style, kita harus menambahkannya di setiap tag HTML yang ingin diberikan style CSS. Memori yang digunakan akan semakin besar seiring dengan bertambahkan tag HTML yang nantinya akan dibuat.

Embedded / Internal CSS

Penulisan kode pada Embedded CSS atau Internal CSS adalah dengan menuliskan tag <style> di dalam tag <head> kemudian konten CSS dituliskan didalam tag <style> yang telah dibuat tadi. Dengan menuliskan CSS menggunakan cara ini nantinya style CSS akan dipanggil setiap kali halaman di load, sehingga akan meningkatkan kecepatan akses. Penulisan style menggunakan cara ini telah meminimalisir dari penggunaan css yang berulang, namun dalam hal tertentu penggunaan style ini belum sepenuhnya sempurna, karena ketika kita ingin membuat template yang akan digunakan oleh beberapa halaman HTML, setiap halaman akan dituliskan CSS yang sama secara berulang. Maka dalam kasus ini akan memakan memori yang seharusnya dapat diminimalisir penggunaannya.

Eksternal CSS

Cara ini sangat direkomendasikan untuk menuliskan CSS dalam pengembangan web, yaitu dengan membuat file CSS terpisah dan memanggil file tersebut pada halaman HTML dengan menambahkan tag <link> dan menambahkan atribut href yang mengarah kepada path dari file yang akan dituju. Dengan menerapkan cara ini, maka penggunaan memori dan penulisan kode akan jauh lebih efisien dibandingkan cara-cara sebelumnya. Cara ini memungkinkan kita bekerja dengan lebih terstruktur karena tidak mencampur antara HTML dan CSS yang dibuat. Eksternal CSS juga memungkinkan kita untuk memiliki satu file CSS yang terhubung ke banyak halaman HTML sehingga lebih mudah untuk melakukan kolaborasi dan efisiensi memori serta manajemen file yang baik.

Seperti itulah penjelasan singkat mengenai cara-cara atau gaya penulisan yang bisa diterapkan jika kita ingin menuliskan kode CSS untuk memperindah halaman HTML yang dibuat. Semoga kalian jadi lebih semangat untuk mempelajari lebih dalam mengenai teknologi CSS ini. Sekian dulu konten pemuda koding kali ini, tetap semangat ngodingnya ya! dan sampai jumpa di konten-koten berikutnya. Salam koding!

Senin, 25 Januari 2021

APA ITU CSS? | Pengertian CSS dalam pengembangan web

Halo semuanya! di konten kali ini pemuda koding akan mencoba membahas tentang apa itu CSS. Sebelumnya kita telah membahas beberapa topik mengenai HTML. Mulai dari sejarah, peranan, HTML5 sampai sintaks dan struktur dari penggunaan HTML yang saat ini kita gunakan. Gimana? udah nyoba membuat website kamu sendiri?? Seperti yang dibahas pada materi HTML bahwa HTML merupakan tag-tag yang menyusun suatu website. Jika diibaratkan seperti kerangka manusia. Nah jika manusia membutuhkan pakaian untuk terlihat menarik, maka di dalam dunia pemrograman web kita memerlukan yang namanya CSS.

Nama CSS didapat dari fungsi pada penggunaannya. Setiap style yang berbeda dapat dideklarasikan secara berurutan yang akan membentuk hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau biasa disebut W3C pada tahun 1996 dalam pengembangan web. Sampai saat ini CSS mempunyai 3 versi, yaitu CSS1, CSS2 dan CSS3.

CSS1 merupakan CSS pertama yang ditetapkan oleh W3C sebagai bahasa standard dalam pembuatan website. Fitur yang terdapat pada CSS versi pertama ini antara lain:

Pengaturan Font (efek tebal)
Margin, border, dan padding
Posisi teks, gambar, table, dll
Text attributes
Warna, teks, dan background

Kemudian CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan pada printer, dan pada CSS3 adalah versi terbaru CSS yang mampu melakukan berbagai hal untuk membuat website yang lebih interaktif.

Cascading Style Sheet atau yang biasa disebut CSS ini berfungsi untuk membuat tampilan dari kerangka website yang kita buat semakin menarik dan interaktif. Sehingga dapat menambah pengalaman user dalam menggunakan atau mengunjugi website yang dibuat. CSS bukan termasuk bahasa pemrograman ya, sehingga tidak mampu untuk memberika perintah logika pemrograman didalamnya. Dengan CSS kita dapat memanipulasi tampilan yang ada pada tag-tag HTML yang telah kita buat sebelumnya. Contohnya seperti mengatur ukuran teks, gambar, mengubah warna, mengatur penjajaran (alignment), spasi antar elemen, sampai membuat animasi dan transisi dapat dilakukan oleh CSS.

Seperti itulah penjelansan singkat mengenai apa itu CSS. Gimana semuanya? seru ya materi kali ini! sekian dulu konten kali ini kita akan lanjut pembahasan lebih dalam mengenai CSS di konten berikutnya, jadi tetap semangat belajar pemrogramannya dan sampai jumpa di koten selanjutnya! salam koding.

Minggu, 10 Januari 2021

Struktur Dasar HTML5 | Web Development

Halo temen-temen pemuda koding! Kembali lagi di konten pemuda koding yang membahas seputar dunia perkodingan khususnya web development. Di konten sebelumnya kita udah membahas tentang sejarah perkembangan HTML sampai ke tahap HTML5 yang bisa kita rasakan sekarang. Nah setelah kita tau sejarah dari HTML5, kali ini pemuda koding akan coba bahas struktur dari si HTML5 ini nih, apa bedanya ya sama HTML sebelumnya? Langsung aja kita ke pembahasannya ya!

Seperti yang bisa kalian liat pada gambar diatas, kita coba kupas satu-satu ya.

Tag <!DOCTYPE html> : tag ini merupakan sebuah deklarasi untuk mengidentifikasi jenis dokumen HTML yang digunakan supaya browser dapat mengetahui dan dapat menentukan bagaimana memperlakukan kode yang akan dibuat. Proses pendeklarasian ini cukup dilakukan sekali saja diawal baris pada dokumen yang kita buat. Di versi sebelumnya dapat dituliskan <! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN" "Http://www.w3.org/TR/html4/strict.dtd">. Panjang banget ya hehehe. Di versi html5 semua itu disederhanakan jadi cukup !DOCTYPE html aja.
Tag <html>...</html> : tag ini mempuyai fungsi sebagai root. Jadi setelah kita mendeklarasikan type dari dokumen, nah dokumen yang kita tulis akan disimpan didalam tag <html></html> ini. Jadi semua tag ada ada didalam tag <html> adalah gambaran dari HTML.
Tag <head>...</head> : tag ini berfungsi untuk memberikan informasi tentang dokumen yang kita buat, jadi di dalam tag ini kita dapat menambahkan tag-tag yang biasanya digunakan untuk memberikan informasi berupa penulis, judul, kata kunci pada dokumen, jenis encoding dan masih banyak lagi iformasi yang bisa ditambahkan pada tag ini.
Tag <meta> : tag ini digunakan untuk memberikan intruksi pada browser untuk menerjemahkan karakter-karakter di dalam halaman html yang kita buat sebagai UTF-8. Walaupun tag ini merupakan tag yang bersifat opsional, hampir setiap halaman HTML5 menggunakan tag meta ini.
Tag <title>...</title> : fungsi dari tag ini untuk memberikan informasi berupa judul pada dokumen html yang kita buat. Judul ini biasanya yang akan tampil pada halaman browser.
Tag <body>...</body> : tag ini lah yang akan menyimpan isi dari suatu dokumen yang nantinya akan ditampilkan oleh web browser.

Nah, jadi seperti itu penjelasan singkat tentang tag-tag pada HTML5 temen-temen. Gimana? Makin ga sabar buat mulai ya! Okedeh sekian dulu konten kali ini temen-temen. Pemuda koding pamit dulu ya! Sampai jumpa di konten-konten selanjutnya ya! Salam koding.

Minggu, 03 Januari 2021

Sejarah HTML 5

Halo temen-temen pemuda koding! di konten sebelumnya pemuda koding udah bahas tentang peranan HTML dalam pengembangan website. nah di kontent kali ini pemuda koding akan berbagi tentang HTML5 nih, kita akan kenalan dengan sejarah dari HTML5. langsung aja yuk kita bahas!

Seperti yang udah kita bahas sebelumnya, jadi HTML pertama kali dicetuskan oleh bapak yang bernama Tim Berners-Lee pada tahun 1991. Beliau adalah seorang ahli fisika dari lembaga yang bernama CERN. Seiring perkembangan zaman, HTML pun mengalami banyak perubahan pada penulisan tag-tag yang ada maupun penambahan tag-tag baru yang membuat website semakin powerful untuk dikembangkan oleh developer. pada tahun 2004 kelompok kerja aplikasi hypertext (Web Hypertext Aplication Technology Working Group, WHATWG) mulai membuat standar baru saat W3C sedang berfokus pada pengembangan XHTML 2.0 pada masa depan, sedangkan HTML 4.01 belum pernah diperbarui sejak tahun 2000. sejak tahun 2009 W3C dan WHATWG mulai bekerja sama dalam mengembangkan HTML5 setelah W3C membubarkan kelompok kerja pengembangan XHTML 2.0

meskipun HTMl5 telah dikenal luas oleh para pengembang web sejak lama, tetapi HTML baru populer pada tahun 2010 setelah CEO Apple.inc, Steve Jobs, mengatakan bahwa dengan pengembangan HTML5 maka Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web. editor HTML5 yang bernama Ian hikson berharap HTML dapat mencapai tahap kandidat direkomendasikan pada tahun 2012. dalam sebuah wawancara hikson memperkirakan hal itu dapat terjadi pada tahun 2022, meskipun begitu banyak bagian spesifikasi yang sudah stabil dan dapat diterapkan pada produk.

nah kurang lebih seperti itulah sejarah dari terciptanya HTML5 yang telah melalui proses yang panjang sampai bisa kita gunakan saat ini. gimana temen-temen? seru ya bisa mengetahui sejarah dari HTML5 ini? jadi kita ga cuma sekedar memanfaatkan teknologi ini, tapi kita juga bisa belajar banyak dari sejarah pengembangan HTML5 ini. okedeh sekian dulu ya kontent kali ini, tetap semangat explore kodingnya ya! pemuda koding pamit dulu dan sampai ketemu di konten selanjutnya! salam koding.

Frontend Developer vs Backend Developer