Perbedaan HTML, CSS, Javascript, dan JQuery beserta contohnya



Perbedaan HTML, CSS, Javascript, dan JQuery beserta contohnya


Baiklah pada postingan sebelumnya saya sudah membahas mengenai Perbedaan hosting luar negeri dan hosting lokal secara lengkap. Pada kesempatan kali ini saya kembali menulis mengenai perbedaan html, css, javascript, dan jquery. Sambil menulis sekalian belajar juga mengenai ini.

Informasi-informasi yang akan saya sampaikan di dalam postingan ini saya dapatkan dari berbagai macam sumber, sumbernya dapat kalian lihat pada akhir postingan ini. Semoga dari apa yang saya sharing kan ini dapat bermanfaat dan sekaligus ilmu yang akan berguna nantinya.

Baiklah disini saya akan menjelaskan satu per satu mengenai html, css, javascript, jquerynya dari pengertiannya, contohnya, fungsinya, dan perkembangan sejarahnya sampai sekarang.


HTML
HTML adalah bahasa markup internet (web) berupa kode dan simbol yang dimasukkan kedalam sebuah file yang ditujukan untuk ditampilkan dalam sebuah website. Intinya HTML itu adalah bahasa markup yang digunakan untuk membuat website. HTML ini dapat dilhat oleh semua orang yang terkoneksi dengan internet, yang pasti menggunakan aplikasi Penjelajah Internet seperti Google Chrome, Mozilla Firefox, Internet Explorer, dll.

Sebelumnya diatas juga sudah saya jelaskan, HTML adalah singkatan dari Hyper Text Markup Language. Tapi kalau cuma tau singkatannya aja gak cukup, seperti
  • HyperText adalah metode dimana kita 'berpindah' disekeliling website, dengan meng-klik sebuah teks yang bernama hyperlink.
  • Markup adalah hal yang dilakukan oleh tag HTML kepada teks yang ada didalamnya, misalnya saja kita menandai sebuah teks dengan tag <i> maka hasilnya teks tersebut akan berubah menjadi italic (huruf yang miring), atau tag <b> maka hasilnya teks tersebut akan berubah menjadi tebal. 
  • Language adalah sebuah bahasa yang memiliki kata-kata berupa kode dan syntax seperti bahasa yang lain.
Untuk saat ini bahasa HTML masih terus menerus dikembangkan dikarenakan pengguna internet perkembangannya sangat pesat. Oleh karena itu bahasa HTML harus dikembangkan lagi agar bisa menciptakan halaman web yang berkualitas. 

Fungsi dan Kegunaan HTML

Sebagai bahasa Markup internet, HTML memiliki banyak fungsi dan kegunaan. Beberapa manfaat dari HTML diantaranya:
  • Untuk membuat halaman web, Bahasa HTML digunakan untuk membuat web. Semua halaman web pasti dibuat dengan menggunakan HTML.
  • Sebagai pondasi bagi sebuah website, Sebuah rumah jika tidak memiliki pondasi pasti akan roboh, begitu juga dengan HTML jika tidak memiliki pondasi, kita tidak dapat mengimplementasikan bahasa lainnya seperti CSS (bahasa untuk mendesain website), Javascript ( Bahasa untuk perilaku website, dan PHP (bahasa pemograman server website).
  • Untuk menandai teks pada halaman website, misalnya kita dapat menandai sebuah teks menjadi bergaris bawah dengan menggunakan tag html <u> 
  • Untuk menandai elemen/bagian pada halaman web, sebuah web memiliki beberapa bagian seperti header, navigasi, main, dan footer. Kita dapat menandai bagiannya dengan HTML.
  • dll.

Struktur Dasar HTML
#Element 
Element terdiri dari 3 bagian, yaitu tag pembuka, isi dan penutup. Contohnya untuk menampilkan judul dari sebuah halaman, kita membuat kode html seperti ini:

<title>Website Milik Faiz</title>

Yang berwarna merah itu tag pembuka, yang berwarna biru adalah isi, dan yang berwarna ungu itu adalah tag penutup. isi adalah optinal, tidak masalah jika tidak diberikan isi, tapi kalau untuk tag pembuka atau penutup. Keduanya harus ada dalam html, jika tidak maka akan error dan kode tidak akan berfungsi.

ada juga pembuka dan penutup yang berbeda dengan contoh yang ada diatas, contohnya seperti ini:

<input type="text" value="isian" />

pada tag input kita tidak perlu menutupnya dengan tag </input> cukup dengan /> . Bahkan dengan menuliskan > saja juga bisa.

#Tag 
Tag adalah teks khusus berupa dua karakter < dan >. Contohnya tag <head> dengan nama head, <body> dengan nama body, dan lain ain lah. Tag ini sudah diatur dari sananya, gak bisa diganti misalnya diganti nama kalian <sutejo>, <andrie> , <paino> jelas tidak akan berfungsi.

#Atribut 
Atribut terdapat didalam script sebuah elemen, fungsinya untuk memberi informasi tambahan tentang elemen. Nilai dari atribut harus ditutup dengan tanda kutip.

<input type="pasword"/> 

kode diatas akan membuat kotak isian yang dikhususkan untuk menulis pasword. Dalam artian, jika kita menulis di isian tersebut tulisan kita akan berubah menjadi bintang-bintang seperti ini. *********

Sejarah Perkembangan HTML
  • HTML 1.0 : versi pertama dari html, fitur dari versi ini masih sangat terbatas seperti antara lain heading, paragraf, hypertext, list, efek tebal, dan miring pada teks. versi html 1.0 ini mendukung peletakan gambar tapi tidak mendukung untuk peletakan teks disekeliling gambar.
  • HTML 2.0 : versi yang ini membawa yang versi sebelumnya dan tambahan fitur terbaru seperti fitur form, dengan form kita bisa memasukkan data kita seperti nama, email, serta komentar yang ingin disampaikan. 
  • HTML 3.0 : versi ini juga memberikan fitur baru seperti fitur pembuatan tabel.
  • HTML 3.2 : versi html ini adalah lanjutan dari vitur sebelumnya, karena banyaknya perang antar browser , untuk mengatasi hal ini dibentukkan sebuah organisasi yang menangani standart dari html. Organisasi ini bernama World Wide Web Consortium (W3C).
  • HTML 4.0 : dengan adanya organisasi W3C ini perang browser itu pun berhenti. HTML lalu berkembang menjadi html 4.0 . Versi ini mendapatkan banyak perubahan seperti text, link, image, table, form, meta, dan lain-lain.
  • HTML 4.01 : versi ini keluar hanya untuk memperbaiki kesalahan kesalahan yang versi sebelumnya.
  • XHTML 1.0 : versi ini adalah gabungan dari html dan xml, karena xhtml tidak se-fleksibel html, maka tidak banyak orang yang menyukai versi ini.
  • HTML 5 : html 5 adalah versi terakhir dari html, html banyak sekali membawa perubahan terhadap versi sebelumnya, banyak tag tag baru yang diperkenalkan, seperti <header> , <aside>, <section>, dan tag lainnya. selain itu juga html 5 mendukung streaming video tanpa menggunakan flash.



CSS
CSS atau Cascading Style Sheets merupakan bahasa desainer web. Namun sebenarnya apa yang dimaksud dengan CSS? kita akan membahasnya disini.

Pengertian CSS Dalam bahasa bakunya, seperti yang dikutip dalam wikipedia, CSS adalah "kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup." dimana bahasa markup ini salah satunya adalah html.

Untuk pengertian bebasnya CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman html. Dengan CSS kita bisa mengubah desain dari teks, link, warna, gambar, dan latar belakang dari hampir semua kode html.

CSS biasanya selalu dikaitkan dengan html, karena keduanya memang saling melengkapi. HTML ditujukan untuk membuat struktur atau konten dihalaman web sedangkan CSS ditujukan untuk tampilan dari halaman web tersebut. Seperti dalam istilahnya, "HTML for content, CSSfor presentation"

Kelebihan CSS 
  • CSS mampu membuat efek animasi, hanya saja tidak sesempurna jika menggunakan software
  • CSS mampu memberikan efek grafis terhadap teks, table, kolom, serta dapat menata huruf.
  • CSS mampu menampilkan berbagai macam jenis font atau huruf.
  • CSS mampu mengkrontruksi secara visual tampilan block,  seperti merubah ukuran kotak, tranformasi 2D atau 3D, memberikan efek sudur dan bayangan
  • CSS mampu memanipulasi secara visual warna, desain tekstur.
  • CSS lebih dimudahkan dalam hal kompatibiltas websitenya dengan dukungan fitur barunya yaitu media query.

Fungsi dan Kegunaan CSS Awal mula diperlukan CSS karena kebutuhan akan halaman web yang semakin kompleks. Pada awal kemunculan HTML, kita bisa membuat paragraf berwarna merah dengan menulis langsung kode tersebut didalam Tag HTML, atau membuat latar belakang sebuah halaman dengan warna biru. Contoh kode HTML itu sebagai berikut:
 <!DOCTYPE html>
<html>
<head>
      <title>Test Tag Font HTML</title>
</head>

<body>
  <p>
    CSS merupakan bahasanya <font color="red">desainer web</font>.
    Namun sebenarnya, apa itu CSS?
  <br />
    <font color="red">CSS </font> adalah kumpulan kode yang digunakan
    untuk mendefenisikan desain dari bahasa markup,
    <font color="red">salah satunya adalah HTML</font>.
  <br />
    Dengan CSS kita bisa mengubah desain dari
    <font color="red">text, warna, gambar dan latar belakang</font>
    dari (hampir) semua kode tag HTML.
  </p>
</body>
</html> 
Hasilnya:
Kode HTML Tanpa kode CSS

saya menggunakan tag <font> untuk membuat beberapa kata didalam paragraf tersebut berwarna merah. Hal ini sebenarnya tidak salah, dan semuanya berjalan sesuai dengan keinginan. Untuk artikel yang memiliki 5 paragraf, kita tinggal copy dan pastekan tag <font color="red"> pada kata-kata tertentu yang ingin dilabelkan berwarna merah dalam tulisannya. Dalam color="red" sebenarnya dituliskan dengan kode atau bahasa inggrisnya juga bisa, misalnya ingin dituliskan tag <font color="#e74c3c"> juga bisa, tapi akan lebih mudah jika kita menggunakannya dalam bahasa inggrisnya saja.

Namun setelah website tersebut memiliki misalkanlah 50 artikel seperti diatas, dan karena sesuatu hal kalian ingin merubah seluruh teks merah tadi menjadi biru, maka akan membutuhkan waktu yang lama untuk mengubahnya satu per sat, halaman per halaman.

Dalam kondisi ini, CSS mencoba 'memisahkan' tampilan dari konten. Untuk paragraf yang sama, berikut kode HTML jika ditambahkan kode CSS:
 <!DOCTYPE html>
<html>
<head>
   <title>Test Background Color CSS</title>
   <style type="text/css">
     .warna {
       color: red;
     }
   </style>
</head>
 
<body>
    <p>
      CSS merupakan bahasanya <span class=warna>desainer web</span>.
      Namun sebenarnya, apa itu CSS?
    <br />
      <span class=warna>CSS </span>adalah kumpulan kode
      yang digunakan untuk mendefenisikan desain dari bahasa markup,
      <span class=warna>salah satunya adalah HTML</span>.
    <br />
      Dengan CSS kita bisa mengubah desain dari
      <span class=warna>text, warna, gambar dan latar belakang</span>
      dari (hampir) semua kode tag HTML.
    </p>
</body>
</html> 
Hasilnya:
Kode HTML dengan Kode CSS
Dalam contoh diatas saya mengubah tag <font> menjadi tag <span>. Tag <span> sendiri merupakan tag yang tidak bermakna. Namun bisa di kontumasi dengan CSS. Tag span saya tambahkan dengan atribut atribut class="warna". Atribut class berguna untuk memasukkan kode CSS pada tag <style > pada contoh diatas yang terdapat dibagian head. 

Jika ingin merubah warna pada tulisan atau teksnya tinggal saja mengganti CSS color="red" menjadi warna yang diinginkan contoh warna biru tetapi dalam bahasa inggris, misalnya color="blue", dll. Maka akan otomatis berubah menjadi warna biru.

CSS Memungkinkan kita merubah tampilan dari halaman, tanpa mengubah isi halaman.
Sebenarnya masih banyak Tutorial Dasar untuk CSS ini, kalau dibahasnya satu-satu disini mungkin akan banyak, nanti akan saya update lagi, saya akan memberikan e-book yang bisa kalian download dan bisa kalian pelajari sendiri. Lengkap dari dasarnya hingga akhirnya, e-book ini saya dapatkan dari website luar negeri, website itu adalah inspirasi saya untuk belajar hal beginian, karena website itu membagikan e-book nya secara gratis maka saya akan memberikan kepada kalian gratis pula :D



Javascript
Javascript adalah bahasa pemograman yang digunakan untuk membuat interaksi atau menambah fitur dinamis ke dalam halaman web. Untuk membuat website, kita harus menggunakan fitur JavaScript. Namun, saat ini javascript hampir digunakan hampir dalam setiap web modern. Sehingga bahasa pemograman web, JavaScript merupakan salah satu bahasa pemograman yang wajib dikuasai.

Nama javascipt agak menyesatkan karena mirip dengan platform untuk software java milik oracle. Padahal tidak ada hubungannya sama sekali, dan juga javascript bukan scripting language.

Secara umum javascript dipergunakan untuk memanipulasi document ' Document Object Model (DOM) ' yang meliput elemen-elemen pada sebuah halaman web. Jadi, sebuah bahasa pemograman yang dirancang untuk penggunaan browser (peramban) web.

Javascript di eksekusi pada client side (sisi pengguna = pengguna komputer): Sebuah server website mengirim javascript ke peramban milik pengguna, dan peramban tersebut menginterpretasikan dan menjalankan kodenya.  Semua ini terjadi dalam sebuah sandbox, yang menjaga agar javascript tidak menyentuh internal system dan mencegah malicious code (kode jahat) yang dapat menginfeksi komputer penggunanya.

Contoh program JavaScript yang paling simple adalah ("Hello World!");  yang kemungkinan diletakkan dalam sebuah laman HTML didalam tag <script> untuk memerintahkan browser menginterprementasikan sebagai JavaScript, misalnya <script> alert("Hello World!"); </script>  Kode ini menampilkan sebuah munculan pop-up kotak alert pada peramban web. Lebih mudah bila melihat contoh dibawah ini:

JavaScript dapat mengubah isi HTML.

Fungsi diatas ditulis seperti ini:

<button onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'
"type="button">Klik Saya!</button> 

Kesimpulannya adalah javascript adalah bahasa pemograman yang dirancang untuk berjalan dilingkungan klien yang dikombinasikan dengan dokumen HTML. Javacript dijalankan dengan bantuan browser sehingga dapat melakukan interaksi dengan user, melakukan kontrol browser dan memanipulasi dokumen web atau materi web saat ditampilkan serta beberapa validasi data.


JQuery
JQuery adalah library JavaScript paling populer dan paling banyak digunakan untuk saat ini. Hampir situs-situs atau website-website menggunakan JQuery untuk memudahkan proses penulisan kode javascript , termasuk wordpress secara default juga menggunakan JQuery.

JQuery merupakan kumpulan dari berbagai fungsi 'siap pakai' untuk memudahkan dalam pembuatan aplikas. Dengan demikian JQuery adalah kumpulan fungsi-fungsi javascript yang memudahkan penulisan kode javascipt.

JQuery pertama kali dikembangkan oleh John Resig di tahun 2006, Situs resmi dari JQuery adalah JQuery.com. JQuery berkembang menjadi proyek opensource dan menjadi library javascript yang paling populer di dunia.



Mengapa Harus Menggunakan JQuery? JQuery menyediakan berbagai efek animasi yang menarik, beberapa diantaranya sangat mudah digunakan dan hanya membutuhkan 1 atau 2 baris kode program. Khusus untuk membuat animasi ini, JQuery juga memiliki JQery UI yang fokus ke animasi dan interaksi user.

JQuery juga memiliki banyak plugin atau kode tambahan untuk fungsi-fungsi lanjutan, seperti membuat efek slideshow, image carousel, hinggal JQuery Mobile.

Walaupun memiliki banyak fitur menarik, jQuery tetaplah sebuah fungsi tambahan dari JavaScript. Untuk dapat menggunakan jQuery dengan baik, anda sebaiknya sudah memahami cara penggunaan JavaScript.

Demikianlah Perbedaan HTML, CSS, JavaScript, dan jQuery beserta contonya, semoga bermanfaat.
Terima kasih kepada sumber sumber yang telah membagikan ilmunya serta konten atau artikelnya yang baik ini, inilah sumber-sumber yang saya dapatkan untuk menulis artikel diatas.

Sumber
http://blogtutorials-01.blogspot.co.id/2012/07/cara-membuat-garis-horizontal-di.html
http://www.carawebs.info/2013/03/cara-membuat-garis-horizontal-rules-html.html
http://www.panduantemplateblog.com/2014/11/pengaruh-perubahan-http-ke-https-gambar.html
http://www.burung-net.com/2015/05/pengertian-html-fungsi-html-serta-sejarah-html.html

sumber CSS:
http://www.duniailkom.com/tutorial-belajar-css-part-1-pengertian-css-apa-yang-dimaksud-dengan-css/
http://imaniania5.blogspot.co.id/2013/10/pengertiandefinisi-dan-fungsi-dari-css.html
http://www.ficripebriyana.com/2014/04/pengertian-css-cascading-style-sheets.html
http://jelasinblog.blogspot.co.id/2014/12/perbedaan-javascript-dan-jquery-beserta.html
https://id.wikipedia.org/wiki/Cascading_Style_Sheets
http://tutorial.belajarweb.net/css/syntax-css.html
http://www.w3function.com/blog/?p=det&idn=31

Sumber JQuery:
https://upyes.wordpress.com/2013/01/30/pengertian-jquery/
http://cyber-cre4tive.blogspot.co.id/2014/04/pengertian-dan-fungsi-jquery.html
http://ekajogja.com/jquery-definisi-fitur-penggunaan-jquery-dalam-pengembangan-website/
https://indonesiakode.blogspot.co.id/2015/10/pengertian-jquery-dan-fungsinya-terbaru.html
https://id.wikipedia.org/wiki/JQuery
http://mudi.mywapblog.com/contoh-jquery-sederhana.xhtml
https://www.malasngoding.com/pengertian-dan-cara-menggunakan-jquery/
http://www.dumetschool.com/blog/Contoh-Sederhana-Method-Text-jQuery

Sumber HTML:
https://id.wikipedia.org/wiki/HTML
http://www.burung-net.com/2015/05/pengertian-html-fungsi-html-serta-sejarah-html.html
http://www.temukanpengertian.com/2013/06/pengertian-html.html
http://sayamudji.blogspot.co.id/2013/04/hal-1-diri-stylebackground-40e0d0.html
http://edyutomo.com/internet-dan-komputer/belajar-html-modul-dasar-cara-membuat-kode-html/
http://www.kitapunya.net/2015/12/pengertian-html-dan-contoh-html.html

SUmber javascript:
https://upyes.wordpress.com/2013/02/01/pengertian-javascript/comment-page-1/
https://id.wikipedia.org/wiki/JavaScript
http://hengkiproject.blogspot.co.id/2015/09/pengertian-dan-fungsi-javascript-dalam.html
https://bukanlagiaku.blogspot.co.id/2015/05/pengertian-javascript-dan-contohnya.html?showComment=1459756623903

Update: 14 Oktober 2016, 23:05.


www.pi-sang.com adalah blog yang membahas berbagai hal yang ada, seperti Wisata, Kuliner, dan Teknologi. Kontak kami melalui : andriepreneur@gmail.com..