Halo smart internet people, apa kabarnya anda hari ini? Semoga dalam keadaan yang sehat semua dan semuanya dalam keadaan yang penuh berkelipahan dari Tuhan. Kali ini saya akan kembali berbagi pengetahuan kepada anda semua dan topik bahasan kali ini adalah Apa bedanya HTML, CSS, dan JS?
Yes! Mungkin bagi orang-orang IT, hal ini adalah hal yang sangat-sangat cetek, yang sangat-sangat, yaaah, kerendahan deh, yang sangat-sangat basic. Tapi, sekali lagi, channel ini saya dedikasikan untuk Anda yang bukan orang IT, yang awam dengan orang IT, tapi tertarik untuk mempelajari dunia IT, internet, website, dan sebagainya.
Sehingga, mudah-mudahan dengan pembahasan kali ini, Anda akan semakin tercerahkan. dan semakin terbuka wawasannya tentang dunia IT. Oke, jadi mungkin di antara smart internet people ada yang sedang membutuhkan sebuah pembuatan website.
Mungkin Anda punya bisnis, punya usaha di mana bisnis ini akan dibuatkan website-nya atau Anda sendiri sedang belajar membuat website dan Anda akan menemukan hal-hal atau perkataan semacam ini jadi kalau Anda punya bisnis Anda ingin bisnis Anda dibuatkan website-nya Anda datang ke IT developer atau IT consultant mereka akan menyodokan proposal di dalam proposal itu akan di biasanya ada misalnya kayak teknologinya menggunakan HTML menggunakan CSS, JS, dan sebagainya ya, mungkin Anda akan bingung ini apa sih? binatang apa sih ini? nanti di sini kita akan bahas satu per satu dan saya akan praktekkan supaya Anda tahu secara visual, oh ternyata ini loh bedanya ini, ini, ini, ini.
Oke, jadi jelas semua. Oke, yang pertama adalah HTML. Apa sih HTML itu?
HTML itu adalah singkatan. Singkatan dari Hypertext Markup Language. Jadi, kalau bahasa gampangnya ya, bahasa umumnya ya, bahasa yang gampang deh, adalah sekumpulan... Perintah yang digunakan untuk merepresentasikan ya apa ya bahasa enaknya ya mengejawantahkan gitu ya bahasa gua pejabat banget yang ya mentranslasikan lah ya mentranslasikan dari perintah kita sebagai pembuat websitenya ke layar browser ya karena pada umumnya kan website itu dibuka di layar browser jadi layar browser itu tahu Oh kita ini nyuruh Luruh gue apa kata browser itu?
Misalnya, saya pengen ada satu tulisan di mana ini luruh besar, ah sorry, ini luruh bold, ini luruh miring. Browser tahu, oh bagian sini itu huruf bold, bagian sini itu huruf miring. Jadi mereka tahu, browser itu tahu nyuruh apa. Itulah perintah-perintah yang kita gunakan untuk mentranslasikan itu ke layar browser. Dan HTML ini bukan bahasa pemrograman.
Jadi kalau ada orang yang mungkin ke Anda bilang, oh gue bisa bahasa programming. Gue adalah programmer. Wih, keren lo. Iya. Lo bisa bahasa program apa?
HTML. Oke. Again, HTML itu bukan bahasa pemrograman. HTML itu adalah struktur sekumpulan perintah, bahasa sekumpulan tek-tek perintah yang digunakan untuk mentranslasikan apa yang kita mau ke dalam browser. Ya.
Nah. Sekarang, kayak gimana sih contohnya? Kita akan contohkan, kita akan praktekkan sekarang.
Kita akan praktekkan langsung, jadi saya akan membuatkan satu simple banget halaman website, sehingga Anda bisa punya gambaran, oh ternyata seperti ini loh HTML itu. Saya akan coba praktekkan dengan menggunakan satu tools yang sangat sederhana sekali, yaitu Notepad. Jadi kalau bikin website itu nggak usah susah, kayaknya nggak usah terlalu canggih. Programnya itu Notepad aja udah bisa sebenarnya ya. Jadi kita bikin pakai notepad, disini saya akan praktekkan langsung Sehingga anda nanti tau bedanya gimana Saya akan bikin perintah sederhana Sebenarnya di HTML itu ada strukturnya tuh rapi ya Jadi kayak pertama ada, ini ada dog type kayak gitu kan Dog type, lalu ada tag HTML pembuka Lalu ada tag HTML penutup ya, seperti itu sebenarnya Tapi disini karena saya hanya mempraktekkan secara simpelnya aja, yuk kita langsung aja saya bikin kalimat.
Ya, misalnya saya sedang... belajar HTML ya nih saya sedang belajar HTML Oke saya gedein Oke kita save kita save di lokal komputer kita kita bikin dulu di sini namanya index.html ya kita kasih nama namanya index dengan extensionnya.html ya karena HTML itu yang dibaca oleh si browser save Oke, udah ada, saya dulu pernah bikin. Nah, sekarang kita coba buka di browser ya.
Kita buka di My Document, tadi ada. Nah ini dia, index.html-nya, kita buka, klik dua kali. Nah, muncul kan di sini. Saya sedang belajar.
HTML, oke, sekarang saya mau memerintahkan nih si browser untuk kalimat saya sedang belajarnya itu huruf miring, ya, saya pengen saya bilang nih sebenarnya ke browser hey browser, ee Saya sedang belajar itu dimiringin ya. Terus HTML-nya ditebelin gitu ya. Caranya gimana? Ya itu tadi. Jadi saya akan masukkan perintahnya.
Perintahnya adalah kalau miring. I gitu. Italic. Singkatan dari item. klik ya terus ditutup dengan teks lagi nah ini jadi inilah yang saya sorot nih ini adalah perintah perintah HTML ini dan ditutup dengan ini coba kita save lagi ya save lalu kita reload di sini Hai nah miringkan ini sekarang jadinya saya sedang belajar HTML saya sedang belajarnya miring lalu saya pengen lagi bilang ke browser browser HTML ini kata HTML ini saya bikin tebel ya oke kata browser kasih gua perintah kata browser saya kasih Perintahnya supaya kata HTML itu jadi tebal.
Perintahnya adalah bold atau strong ya. Strong gini atau bold. Saya lebih prefer bold.
B. Dan ditutup dengan tag B disini. Oke. lalu saya save lagi ya ya file ini file save atau ctrl s ya lalu di browser saya coba reload lagi html nya harusnya huruf bold tuh berubah kan saya reload jadi huruf bold nah itulah yang namanya html jadi sekumpulan perintah-perintah yang sudah ada standarnya pakemnya untuk browser tuh bisa ngerti oh gue tuh disuruh apa sih sama si pembuat website nya gitu saya kasih contoh lagi ya cek Saya kasih contoh lagi satu. Saya pengen ini ada hyperlink.
Hyperlink itu apa sih? Hyperlink itu kayak kalau Anda misalnya nge-scroll, terus Anda mouse over. Mouse over itu apa ya? Mouse-nya itu diarahkan ke gambar atau ke tulisan, maka tulisan itu akan ada kayak bisa di-click gitu loh.
Nah, itu namanya hyperlink. Saya akan bikin hyperlink, dan hyperlink itu saya mau arahkan ke website-nya. CNN.com ya biar gampang jadi saya akan bikin katanya kata-katanya klik disini yang gampang deh klik disini gitu kan ini saya bikin titik dulu biar biar ada jeda ya klik disini oke nah klik disini itu saya akan mau bikin hyperlink ini saya save dulu lalu di browser saya coba reload klik disini ya kalau di klik sekarang mouse nih lihat mouse nya saya geser-geser ke tulisan ini nggak akan ada berubah apa-apa nggak bisa di klik karena saya belum kasih perintah ke browser untuk bisa di klik sekarang saya mau kasih perintahnya perintahnya adalah ahref ahref sama dengan misalnya cnn.com ya https cnn.com oke lalu ditutup juga dengan ahref lagi disini nah yang saya sorot ini ini adalah perintah html text html untuk membuat hyperlink halaman ini bisa ke halaman yang lain saya save ya lalu saya reload disini nah lihat bisa diklik sekarang kalau kita sorot Mouse kita akan berubah jadi tanda tangan begini ya dan ini bisa diklik saya klik top dia akan ke websitenya CNN harusnya Coba kita tungguin Nah kan websitenya CNN kan di sini gitu ya Jadi itulah eh perintah-perintah atau yang Sebenarnya masih banyak lagi perintah HTML itu banyak banget. Saya dulu sampai hafal, tapi sekarang udah agak lupa beberapa. Sebenarnya kalau mau lihat, Anda bisa lihat di YouTube banyak, atau di kursus Udemy juga, udemy.com.
Bisa cari kursus HTML di situ. Di Google juga banyak sih perintah-perintah HTML. Jadi yang tadi itu hanya sekian dari, hanya sebagian kecil dari perintah HTML.
Tapi Anda bisa punya insight. Ternyata ini tuh, HTML itu. Yaitu, Terima Kumpulan perintah-perintah yang diselipkan. di dalam kalimat-kalimat yang kita bikin di website HTML ya jadi ini untuk HTML Hypertext Markup Language semoga Anda bisa tercerahkan setelah melihat praktek ini yang berikutnya adalah CSS apa sih CSS itu? CSS juga singkatan dari Cascading Style Sheet ya Cascading Style Sheet apa sih artinya dan apa tugasnya dia?
sama sebenarnya yaitu tugasnya adalah untuk membuat satu bentuk halaman website itu menjadi lebih bagus, lebih indah jadi kalau tadi HTML dia hanya membuat satu perintah untuk kayak semacam, yaudah lu bikin huruf gede, lu bikin huruf kecil lu bikin italic, lu bikin heading, lu bikin hyperlink, that's all, tapi bagaimana dengan coloring bagaimana dengan tata letak misalnya ada 3 kolom lalu juga bagaimana tentang misalnya fontnya bisa berwajib berwarna dan sebagainya Nah itulah yang di gunakan oleh CSS itulah pentingnya CSS digunakan jadi CSS ini juga sama sekumpulan perintah-perintah yang digunakan untuk membuat atau mempercantik tampilan website yang kita buat tadi ya Yuk kita praktek lagi dengan CSS di sini di file website tadi ya saya belum berubah apa-apa ya Dan ini masih saya sorot seperti yang tadi. Saya akan menambah satu style. Dimana style ini akan mempercantik lah. Walaupun nggak cantik-cantik banget seperti mantan.
Tapi saya akan memperindah sedikit. Supaya ada warna di situ ya. Yuk kita coba praktekan.
Pertama adalah kita ketik style. Nah, style ditutup dengan style. Jadi HTML tahu, oh style ini adalah untuk mendeklarasikan, bukan perang ya, mendeklarasikan perintah-perintah yang akan digunakan untuk... mentranslasikan apa yang dimaui oleh si pembuat website ya jadi contohnya begini saya mau bikin tadi kan yang website kita yang ini ya website kita halaman web kita yang ini yang ini kan nah ini kan polos nih ya kan Saya sedang belajar HTML, di sini polos.
Saya mau bikin background-nya jadi abu-abu deh. Background-nya jadi abu-abu. Maka di sini saya akan perintahkan di antara style ini, saya akan perintahkan berupa body tutup lagi. Di antara body tutup ini saya bikin background. Background misalnya.
A5, A5, A5, A5, A5, ya abu-abu ya. Ini kode RGB sebenarnya, jadi kalau terbiasa bikin website atau terbiasa desain grafis, akan tahu lah ini kode RGB ini apa, ini apa, gitu. Banyak sekali sih, tapi yang ada beberapa pasti akan tahu.
Oke, saya save. Harusnya di halaman ini, saat saya reload, background-nya jadi abu. Kita coba save. See abu-abu. Oke.
Dan saya mau bikin fontnya ya. Font saya sedang belajar ini warnanya orange ya. Warnanya oranye nih ya.
Saya mau bikin gitu. Jadi yang saya lakukan adalah di tag HTML i tadi ini yang saya sorot ya. Saya tambahkan lagi style disini. Sama dengan color.2 abu-abu itu adalah ff6600 kalau nggak salah ya.
Yuk kita save. Kita reload lagi browsernya. Kita reload sini.
Nah kan orange jadinya. Jadi ciasat itu adalah kayak gini nih. Kodenya color sama dengan apa untuk menandakan warna. warna depan ya font background untuk menentukan warna belakang seperti itu ya body untuk menentukan bahwa section yang akan dirubah adalah section seluruh body ya seperti itu nah hal-hal inilah jadi Jadi untuk mempercantik tampilan website.
Jadi kalau misalnya kita kembali ke case tadi kita yaitu cnn.com. Nah cnn.com itu lihat kita banyak sekali ini ada CSS. Contohnya ini tulisan yang ini warnanya merah. Yang ini warnanya hitam.
Tapi kalau di mouse kita diarahkan jadi berubah jadi merah. Terus ini ada. Tuh lihat. Jadi 3 kolom ya. 3 kolom ini ya ini adalah CSS.
CSS semua yang ngatur CSS semua ya Jadi CSS itu untuk mempercantik tampilan kita. Sampai ke bawah. Ini ada kayak feature section yang saya sorot. Feature section.
Terus ada garis. Itu juga semua kerjaannya CSS. CSS itu mempercantik tampilan website kita.
Seperti itu. Yang berikutnya adalah JS. Apa sih JS itu? JavaScript.
Singkatan dari JavaScript. Nah, kalau ini benar adalah bahasa pemrograman. Karena dengan JavaScript kita bisa... bisa membuat sebuah conditional formatting seperti misalnya if-else if-then-else contoh misalnya kalau if makanan sama dengan garam dan rasa sama dengan asin else if makanan sama dengan gula dan rasa sama dengan manis gitu jadi ada kondisinya if ini then ini jika ini maka ini jika ini maka ini Nah itu adalah bahasa kompleks itu adalah dikategorikan bahasa pemrograman.
So, GIS adalah bahasa pemrograman, karena dia bisa melakukan hal tersebut. Nah, fungsinya apa di pembuatan website ini? Fungsinya adalah untuk membuat satu conditional tertentu, atau untuk membuat satu website lebih interaktif.
Lebih interaktif, lebih berguna. Dalam artian berguna itu, bisa membuat atau memudahkan segala bentuk notifikasi, informasi, navigasi, Digasi antar halaman website itu digunakan JS, JavaScript. Yuk kita contohin simple JavaScript sehingga Anda bisa punya insight, oh apa itu JavaScript. Seperti biasa kita kembali ke halaman website yang kita bangun.
Sekarang saya akan tambahkan JavaScript untuk menampilkan simple banget pop-up tampilan kita. Jadi kalau di klik bukan lari ke website CNN kayak tadi, tapi menampilkan pop-up di browser ya. Yuk kita contohkan. kalau salah-salah sorry karena ini saya live langsung dan saya agak-agak lupa tentang javascript tapi kita coba aja ya kita coba aja saya akan bikin section lagi baru disini script jadi kalau javascript itu sectionnya ada lagi dibuat namanya script dan ditutup dengan slash script disini ya kalau css kan style ditutup dengan slash style sama dengan disini atau enggak dibikin langsung di tag htmlnya bisa kalau script disini ditutup dengan dengan slash script disini oke saya akan bikin satu function ya apa itu function? function itu fungsi function itu fungsi untuk memfungsikan satu keadaan tertentu ya disini saya akan memfungsikan satu keadaan dimana kalau di klik itu muncul pop up ya function apa ya misalnya pop up deh pop up Oke, kita bikin gini.
Lalu di dalamnya ada namanya alert. Misalnya, Hai, saya adalah pop up. Nih, pakai C ya. Oke, jadi kalau di klik nantinya, yang tadi itu, yang tadinya lari ke CNN. Sekarang kalau di klik nih, harusnya muncul ini nih, tulisan ini nih, yang saya sorot nih.
Hai saya adalah popup niche gitu ya. Oke. Disini di link tadi ini saya ganti. Supaya fungsi javascriptnya bisa dieksekusi ya. Saya ganti.
Saya bikin onclick disini. Onclick sama dengan. Apa namanya fungsinya?
Popup. Popup. Oke.
Ya, kita klik disini, eh sorry, kita klik, kita save ya. Kita kembali ke halaman. Ini kita reload.
Nah, sekarang kalau saya klik disini, harusnya akan membuka satu pop-up window. Eh satu pop-up. Satu pop-up di browser saya. Jadi nggak lari ke CNN lagi. Ya kita coba.
Mudah-mudahan berhasil. Nah kan. Berhasil. Di sini saya adalah pop-up nih.
Kan sesuai dengan apa yang... yang tadi saya tulis disini ya kan itulah fungsi-fungsi javascript mau lihat lagi fungsi javascript yang lain kita lihat lagi balik ke CNN kita lihat lagi fungsi-fungsi javascript misalnya kalau disini coba saya cari ya disini itu nih nah ini nih kan suka ada kan di website tuh menu yang kalau di klik tuh ada menu lagi di bawahnya gitu kan muncul kayak gini nih nah Ini adalah tugasnya javascript Terus ini nih Ini kayaknya dia akan Ada menu lagi deh Oh dia begini Yang tadi kan kontennya hilang ya Kalau di klik, kita klik lagi Kontennya ada lagi Nah itu juga tugas javascript Untuk membuat seperti itu Jadi Javascript itu membuat Lebih interaktif, membuat lebih Functional aja website nya Gitu ya Seperti itulah untuk tugasnya JavaScript. So, itu tadi fungsinya HTML, CSS, dan JavaScript. Anda mudah-mudahan sekarang sudah tahu tiga fungsi itu seperti apa, dan Anda sekarang punya insight yang lebih luas lagi tentang fungsi-fungsi itu, jadi Anda semakin tahu, oh, ternyata website itu ada HTML, ada CSS, JS, fungsinya HTML apa, fungsi JS apa, fungsi CSS apa.
Semoga video ini bermanfaat untuk Anda dan menambah wawasan Anda tentang dunia IT, website, internet, dan sebagainya. Sampai ketemu lagi di video berikutnya.