Selamat datang kembali di channel web programming Unpas Masih bersama saya Sandika Gali sebagai instruktur pada video ini Ini adalah video pertama dari seri pertama yaitu seri mengenai HTML Di mana pada seri ini kita akan bahas mengenai HTML mulai dari apa itu HTML, sejarahnya Sampai kita nanti akan membuat website sederhana menggunakan bahasa HTML Pada video ini Saya akan bahas mengenai pendahuluan HTML. Jadi di sini kita nggak akan modding dulu ya. Mungkin kita akan modding mulai dari video berikutnya.
Oke, kita langsung mulai aja. Kita lihat HTML. Itu singkatan dari Hypertext Markup Language. Jadi dia merupakan bahasa markup atau markup language, bukan bahasa pengogaman. Jadi seperti yang kalian tahu kan kalau bahasa pengogaman itu...
Dia punya variable, function, terus dia punya struktur kontrol, kayak pengkondisian, pengulangan, dan lain sebagainya. Nah, HTML itu disebut markup language karena di dalamnya itu terdapat serangkaian markup, yang nantinya markup itu kita akan sebut dengan tag, yang berfungsi untuk ngasih tahu browser bagaimana... sebuah konten akan ditampilkan. Misalkan nanti kita mau menampilkan sebuah teks gitu ya. Nah, teks itu harus kita kasih tahu dulu.
Menggunakan sebuah tag atau markup, akan kita jadikan apa? Apakah paragraf, atau judul halaman, judul artikel, atau nanti kita sebut heading, atau mau kita jadikan teks tersebut link gitu ya, hyperlink. Jadi, kenapa disebut markup?
Karena itu tadi. berfungsi untuk memberitahu browser bagaimana sebuah konten akan ditampilkan. Itu bedanya antara markup dan programming language.
Nah, HTML ini pertama kali diciptakan oleh seorang namanya Tim Berners-Lee. Bapak Tim ini adalah seorang yang berjasa sampai saat ini kenapa kita bisa mengakses web tiap hari itu gara-gara Bapak Tim Berners-Lee ini. Tapi selain dia menciptakan atau...
mengajukan spesifikasi HTML yang pertama, dia juga menemukan banyak hal. Seperti protokol HTTP, lalu HTML, WordWipeWeb, dan dia juga menciptakan web browser pertama, web server pertama, dan halaman web pertama. Jadi, gara-gara bapak inilah kita bisa Facebook-an sekarang tiap hari. Nah, selain itu juga, dia sekarang menjadi direktur. dari sebuah organisasi atau konsorsium yang namanya W3C atau World Wide Web Konsorsium.
Jadi ini adalah organisasi yang tugasnya itu membuat standar-standar untuk segala sesuatu yang ada di web ini. Nah ini webnya, di dalam sini kita bisa lihat, mungkin kita masuk dulu ke about-nya, ada about W3C, kalau kita scroll ke bawah, nah ini ada Apa sih yang dilakukan oleh si W3C ini? Di sini kalau kita baca, kegiatan utama dari W3C ini adalah untuk mengembangkan protokol dan panduan yang akan memastikan perkembangan dari web ini jangka panjang. Jadi tugasnya cukup mulia ya. Nah di mana sih organisasi ini, tempatnya?
Ternyata katanya, kalau kita lihat, Gimana W3C ini bertempat ya? Katanya dia nggak punya markas utama gitu. Katanya ada gabungan dari beberapa institusi. Jadi ada di Amerika, di MIT, ada di Perancis, ada di Jepang, dan ada di Cina. Jadi orang-orang pinter di seluruh dunia ini bergabung untuk menciptakan standar-standar di dunia web ini ya.
Nah standar-standarnya apa aja? Kita bisa lihat di sini ada di bagian standar. Kita scroll ke bawah, ini standarnya hampir semua ya, ada web design dan aplikasinya, arsitektur web, web service, dan lain sebagainya.
Yang akan kita fokuskan adalah yang ada di sini, web design dan aplikasi. Kemudian di dalamnya ada HTML, CSS, dan lain sebagainya. Kita bisa lihat di dalamnya, ini, bahwa web 3.0 ini, salah satunya adalah HTML dan CSS.
Jadi kalau misalkan HTML, punya tag-tag baru atau ada tag-tag lama yang hilang itu gara-gara si W3C ini Kalau nanti aturan itu diimplementasikannya gimana? Misalkan mereka udah punya aturan baru nih ya. Mereka akan membuat aturan itu supaya bisa diimplementasikan di web browser. Itulah kenapa salah satu alasan kita harus update web browsernya. Karena supaya kita juga bisa mengupdate teknologi yang diperumuskan sama si M3C tadi.
Itulah ya secara umumnya. Nah tapi karena yang bikin web browser ini... perusahaannya beda, developernya juga beda, maka tiap-tiap browser ini juga mengimplementasikan aturan tadi berbeda juga, walaupun perbedaannya nggak terlalu jauh.
Itulah kenapa kita harus install semua browser supaya kita bisa lihat tadi perbedaannya. Bisa dari tampilan, bisa dari performance, dan lain sebagainya. Jadi kalau si HTML punya standar baru, Pasti setelah itu web browser juga diupdate supaya bisa mengakomodir aturan baru tadi atau standar baru tadi.
Nah ini saya punya contoh sebuah website yang namanya evolutionoftheweb.com dimana kita bisa melihat perkembangan teknologi internet diikuti juga dengan perkembangan web browser. Nah ini websitenya bagus banget ya. Saya bisa tunjukkan alamatnya evolutionoftheweb.com Ini kerennya lagi dia punya pilihan untuk bahasa Indonesia.
Jadi saya bisa ganti bahasanya. Lalu kita coba jelajahi ya. Jadi kalau kita klik, ini website-nya bagus banget.
Ini adalah timeline. Dari kiri ke kanan itu timeline waktu. Dan kalau kita lihat, di dalamnya ada teknologinya.
Ini ada mode siang atau malam ya. Saya lebih suka lihatnya pakai mode malam, jadi pekerjaannya hitam seperti ini. Nah, ini kita lihatnya gini.
Di atas ini ada timeline waktunya, di mana kita bisa lihat ini browser dan teknologi yang mendukungnya. Ada tone 91, ini teknologi HTTP ditemukan ya. Kalau kita sorot pakai mouse, ada penjelasan singkatnya.
Lalu kalau saya klik selengkapnya, saya klik di sini, itu akan membuka. Wikipedia dari teknologi yang saya maksud gitu ya, atau yang saya pilih. Kita kembali ke webnya.
Nah, setelah tahun 91 HTTP ditemukan, tahun 92 ini HTML1 juga ditemukan. Nah, setelah itu web browser pertama diciptakan. Lalu, berarti ini kalau kita lihat mosaik adalah web browser pertama. pasti dia mendukung teknologi HTML 1 lalu 94 Netscape diciptakan mungkin ada yang tahu Netscape dan 95 Opera dan seterusnya ya ini karena lagi kalau saya klik HTML maka kita bisa lihat versi-versinya jadi ada urutan perkembangan teknologinya dalam sebuah garis nah dan kalau misalkan kalian perhatikan setiap ada perubahan HTML pasti setelahnya ada update dari web browser nah ini ya lalu kalian bisa lihat perkembangan dari web browser kodik kalau kita klik web browsernya itu kalian bisa lihat perkembangannya website nya cukup keren kalau kita klik opera misalnya opera saya klik awalnya opera tampilannya begini lalu berubah setiap saya klik kanan dia berubah sampai yang terbaru jadi kalian bisa coba cek buka website nya lalu bisa dipelajari layar teknologi nya apa saja yang sudah muncul yang kalian gunakan Semakin mendekati ke tahun sekarang, teknologinya semakin merawut. Ini artinya teknologi baru itu dari mulai 2008 sampai sekarang itu banyak sekali ditemukan.
Jadi silakan belajari buka dan belajari website ini. Kita kembali ke slide-nya. Kita lihat lagi. Tadi kita sudah lihat perkembangan dari si teknologi HTML. Ya, dan...
Kalian juga mungkin di dalamnya lihat tadi ada CSS, ada juga JavaScript ya. Jadi ada tiga teknologi ini punya tugas masing-masing. Jadi HTML itu diciptakan untuk membuat struktur sebuah halaman dan menyajikan konten.
CSS digunakan untuk menghias halaman tadi supaya halamannya terlihat lebih cantik, lebih bagus. Dan JavaScript, sebenarnya JavaScript bisa melakukan banyak hal, tapi khusus untuk... mata kuliah kita, javascript yang akan kita gunakan adalah untuk interaktifitas supaya websitenya lebih interaktif, jadi bisa punya animasi, bisa ada slideshow dan lain sebagainya walaupun di luar dari itu javascript sebetulnya bisa melakukan hal yang lain yang lebih powerful jadi tolong gunakan sesuai dengan fungsinya masing-masing Walaupun HTML juga bisa menghias font, misalkan memberi warna, mengatur ukuran, tapi CSS itu bisa melakukan jauh lebih baik.
Jadi jangan pernah menghias sebuah halaman menggunakan HTML. Kalau saya bisa ilustrasikan, HTML itu sebagai sebuah manekin, manekin polos, manekin itu punya kepalanya, punya badan, punya kaki, punya tangan. Si manekin ini bisa kita kasih baju apa saja.
Mungkin hari ini bajunya warna merah, besok bajunya warna hijau. Baju-baju tersebut atau aksesoris yang kita kenakan ke manekin itu adalah teknologi CSS. Sedangkan JavaScript di mana?
JavaScript itu selain membuat tampilannya lebih menarik, tapi dia juga membuat... menjadi lebih cerdas, karena javascript adalah programming language dia bisa lakukan pengambilan keputusan, dia bisa melakukan proses komputasi yang lebih kompleks jadi nanti si manekin ini bisa jalan, bisa bicara analoginya begitulah, gunakan sesuai dengan peruntukannya masing-masing, sehingga nih Saya punya contoh awalnya website Amazon tuh seperti ini. Ini hanya digunakan menggunakan HTML. Mungkin tahun 90-an ya.
Lalu berubah evolusinya menjadi seperti ini. Dan sampai akhirnya sekarang website Amazon tuh seperti ini. Ini bagus ada slideshow-nya. Kita bisa interaksinya lebih bagus lagi ya. Dan ini adalah...
Contoh lain, website yang selalu kita gunakan setiap hari, Facebook. Pada awalnya tampilannya seperti ini. Bisa kalian lihat, sangat sederhana. Mungkin kalau kalian disubuhkan Facebook sekarang seperti ini, nggak akan ada yang mau pakai. Ini waktu awal-awal tahun 2004, Facebook tampilannya seperti ini, lalu berevolusi, jadi seperti ini, berubah lagi, hingga sampai sekarang seperti ini.
Mungkin teknologinya juga lebih kompleks, nggak cuma pakai HTML, CSS, JavaScript, ada yang lain. Tapi kalau kalian lihat, ini adalah website yang kita gunakan tahun lalu. Jadi kalau mau diakses bisa di www.pws1.if-unpass.org slash 2014, karena yang 2015 masih dalam pengembangan.
Nah, website ini adalah website... yang dibuat murni hanya menggunakan HTML, CSS, dan JavaScript saja. Nggak ada bahasa penggambaran server-side kayak PHP, ASP, dan lain sebagainya. Nggak pakai database, pakai MySQL, gitu.
Nggak, ya. Hanya murni HTML, CSS, dan JavaScript. Jadi, harapannya di akhir semester itu kalian bisa membuat yang seperti ini, atau bahkan lebih bagus dari ini. hanya dengan menggunakan pengetahuan dari HTML, CSS, dan JavaScript saja.
Nah, selanjutnya apa? Selanjutnya, mungkin di video selanjutnya kita akan mulai lakukan coding ya. Jadi kita mungkin bikin website dengan menggunakan HTML yang sederhana dulu, masih menggunakan notepad, belum menggunakan kode editor ya. Jadi siapkan notepadnya di video berikutnya. Oke, mungkin sampai sini dulu pengantarnya.
Saya akhiri sekian, saya Sandika Gali, terima kasih atas perhatiannya, sampai bertemu di video berikutnya.