Apa itu Javascript? | Sejarah Javascript

Halo semuanya! kembali di konten pemuda koding yang membahas seputar web development khususnya frontend development. Kali ini pemuda koding akan mengajak kalian berkenalan sama teknologi yang kian hari kian populer dan saat ini teknologi ini sudah mendukung dari sisi server. Ya betul banget, Javascript. Apa sih itu javascript? kapan kita menggunakan teknologi ini? nah kita akan coba kenalan dengan teknologi yang satu ini ya!

    Pada awalnya sebuah lembaga riset National Center of Supercomputing Aplication dari Cambridge meluncurkan sebuah web browser bernama Mosaic pada tahun 1993 dengan menambahkan tag image pada halaman browser tersebut yang mana itu melanggar spesifikasi yang diberikan oleh Tim Berners-Lee. Kemudian Para Dosen dan mahasiswa dari Universitas tersebut mendirikan perusahaan baru yang bernama Netscape Communicator dan membuat kembali browser yang bernama Netscape Navigator yang tentunya semakin melanggar spesifikasi yang diberikan oleh Tim Berners-Lee. 

    Untuk membuat browser yang lebih interaktif maka Netscape merekrut System Engineer yang bernama Brendan Eich. Kemudian Ia membuat sebuah bahasa pemrograman dengan menggabungkan fitur-fitu dari bahasa java, scheme dan self dalam waktu 10 hari yang diberi nama Mocha. Cepet banget ya, hebat banget bapak Brendan ini. Kemudian mocha diimplementasikan kedalam Netscape Navigator dan diubah namanya menjadi Livescript karena saat itu software-software yang ada di Netscape ada kata Live di depannya. Akhirnya Netscape Navigator menjadi browser yang sangat populer pada saat itu sampai-sampai mempunyai ambisi untuk mengalahkan Microsoft.

Dengan ambisi itu Netscape mengajak SUN Microsystem yang memiliki Java untuk bekerja sama dalam mengalahkan Microsoft. SUN berpendapat untuk memasukan bahasa Java kedalam Netscape Navigator tetapi ditolak oleh pihak Netscape karena Livescript dirasa lebih teroptimasi untuk web browser. Akhirnya disepakati untuk mengganti nama Livescript menjadi Javascript untuk keperluan marketing.

Nah seperti itu penjelasan singkat mengenai sejarah dari terbentuknya javascript. Sampai sini dulu ya temen-temen, kita akan sambung mengenai sejarah dan perkembangan javascript di konten selanjutnya ya! semangat terus ngodingnya, pemuda koding pamit dan sampai jumpa di konten-koten selanjutnya! salam koding.

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. 

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!

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.

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. 

1. 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.
2. 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.
3. 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.
4. 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.
5. 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.
6. 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.

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.

Peranan HTML Dalam Pengembangan Website

Apa sih itu HTML?    

    Halo semuanya, masih semangat belajar kodingnya kan? di artikel sebelumnya pemuda koding udah bahas apa aja perbedaan frontend developer dan backend developer dalam pengembangan sebuah website. Di artikel tersebut pemuda koding membahas bahasa apa saja yang menjadi dasar untuk dikuasai oleh seorang frontend developer. Kali ini pemuda koding akan membahas hal yang paling mendasar dalam sebuah website, yaitu HTML. HTML bukanlah sebuah bahasa pemrograman. HTML tidak dapat membuat fungsionalitas web menjadi dinamis tetapi HTML menjadi sebuah dasar dari suatu halaman website.

Sejarah HTML 

    Hypertext Markup Language atau biasa disebut HTML adalah sebuah bahasa markup atau bahasa penanda jika diartikan secara ilmiah. Mengapa bisa disebut markup language (penanda)? karena HTML terdiri dari tag-tag yang memiliki fungsi untuk mengorganisir dan memformat dokument seperti Microsoft Word. Pada tahun 1991, seorang ahli fisika dari lembaga penelitian CERN yang bernama Tim Berners-Lee memperkenalkan hypertext di internet. Pada awal kemunculannya HTML terdiri dari 18 tag HTML. Sejak saat itu setiap kali HTML merilis versi terbarunya, selalu ada tag dan atribut (tag modifier) baru. Berkat popularitasnya, HTML kini diangga sebagai web standart yang resmi. Spesifikasi dari HTML di-maintain dan di kembangkan oleh World Wid Web Consortiumm (W3C). Upgrade besar-besaran dari versi HTML terjadi pada tahun 2014 yaitu pengenalan HTML5. Pada upgrade versi tersebut, terdapat semantic baru yang memiliki arti dari kontennya sendiri. Contohnya seperti <article>, <header>, <footer>, <nav>, <button> dan yang lainnya. Seperti apa sih struktur dari bahasa markah ini? oke deh pemuda koding akan kasih contohnya dibawah ini.

Penggunaan Tag HTML    

    Penggunaan HTML terdiri dari struktur kode sederhana (tag dan atribut). Contohnya kita akan menuliskan sebuah paragraf maka kita menuliskan paragraf tersebut didalam sebuah tag pembuka <p> dan tag penutup </p>. Tag HTML dituliskan dengan tag pembuka dan tag penutup. Biasanya tag penutup ditulis dengan "/" dan jika tag yang tidak memiliki elemen didalamnya maka tidak ada tag penutupnya. Contohnya seperti <img src="" alt="" />. Tag tersebut tidak memerlukan elemen didalamnya sehingga penutupnya dapat ditulis sebelum tanda ">". Contoh dari penggunaan tag <p> dan <img> sebagai berikut.

Contoh source code

Hasil yang ditampilkan browser

    Nah itu dia penjelasan tentang HTML dari mulai sejarah sampai penggunaannya. Gimana temen-temen, udah dicoba? silahkan dipraktekan dan semangat terus ya belajar ngodignya. Sekian dulu pembahasan tentang HTML dari pemuda koding, kita ketemu di konten selanjutnya ya! salam koding.