00:00:00
Selamat datang kembali di channel web
00:00:02
programming Unpas Masih bersama saya
00:00:05
Sandi kagali sebagai instruktur pada
00:00:07
video ini ya Ini adalah video pertama
00:00:10
dari seri pertama yaitu seri mengenai
00:00:14
html mana pada seri ini kita akan bahas
00:00:17
mengenai html mulai dari Apa itu html
00:00:21
sejarahnya sampai kita nanti akan
00:00:23
membuat website sederhana menggunakan
00:00:26
bahasa HTML ya pada video ini saya akan
00:00:30
bahas mengenai pendahuluan html jadi di
00:00:33
sini kita enggak akan ngoding dulu ya
00:00:35
mungkin kita akan ngoding mulai dari
00:00:37
video berikutnya Oke kita langsung mulai
00:00:41
aja kita lihat html itu singkatan dari
00:00:46
hypertex markup language ya jadi dia
00:00:49
merupakan bahasa markup atau Mar markup
00:00:52
language bukan bahasa
00:00:55
pemogaman ya jadi seperti yang kalian
00:00:57
tahu kan kalau bahasa pemogaman itu eh
00:01:01
dia punya seperti variabel
00:01:04
function terus dia punya struktur
00:01:07
kontrol kayak pengkondisian pengulangan
00:01:11
dan lain sebagainya nah eh html itu
00:01:15
disebut markup language karena eh di
00:01:17
dalamnya itu terdapat serangkaian mark
00:01:20
up gitu ya yang nantinya mark up itu
00:01:22
kita akan sebut dengan tag yang
00:01:26
berfungsi untuk ngih tahu browser ee
00:01:29
bagaimana
00:01:30
sebuah konten akan ditampilkan misalkan
00:01:32
nanti Ee Kita mau menampilkan sebuah
00:01:36
teks gitu ya nah teks itu harus kita
00:01:38
kasih tahu dulu menggunakan sebuah tag
00:01:41
atau markup akan kita jadikan apa apakah
00:01:45
paragraf atau judul halaman judul
00:01:48
artikel ya atau nanti kita sebut heading
00:01:51
atau mau kita jadikan teks tersebut eh
00:01:54
link gitu ya
00:01:55
hyperlink jadi eh kenapa disebut markap
00:01:59
karena itu tadi berfungsi untuk
00:02:00
memberitahu
00:02:02
browser Bagaimana sebuah konten akan
00:02:04
ditampilkan gitu ya itu bedanya antara
00:02:06
markup dan programming language nah hml
00:02:10
ini itu pertama kali diciptakan oleh
00:02:14
seorang namanya tim bernersle Bapak tim
00:02:17
ini adalah seorang yang berjasa sampai
00:02:20
saat ini kenapa kita bisa mengakses web
00:02:22
tiap hari itu gara-gara bapak tim
00:02:24
berners ini tapi selain dia apa
00:02:27
menciptakan atau mengajukan ee
00:02:31
spesifikasi html yang pertama dia juga
00:02:33
menemukan banyak hal Ya seperti e
00:02:36
protokol http lalu html wordwi
00:02:41
web dan dia juga menciptakan web browser
00:02:43
pertama web server pertama dan halaman
00:02:46
web pertama Jadi gara-gara Bapak Inilah
00:02:49
kita bisa Facebookan sekarang tiap hari
00:02:53
ya Nah selain itu juga dia sekarang
00:02:56
menjadi direktur dari sebuah organisasi
00:02:59
atau k yang namanya w3c atau World Wi
00:03:03
web konsorsium jadi ini adalah
00:03:06
organisasi yang tugasnya itu membuat
00:03:09
standar-standar untuk segala sesuatu
00:03:11
yang ada di web ini nah ini webnya di
00:03:16
dalam sini kita bisa lihat mungkin kita
00:03:17
masuk dulu ke
00:03:19
aboutnya ada about w3c kalau kita Scroll
00:03:23
ke bawah nah ini ada apa sih yang
00:03:25
dilakukan oleh si w3c ini
00:03:28
ya ini ee kalau kita baca kegiatan utama
00:03:32
dari w3c iniah untuk mengembangkan
00:03:35
protokol dan panduan yang akan
00:03:38
memastikan perkembangan dari web ini
00:03:41
jangka panjang jadi tugasnya cukup Mulia
00:03:44
ya Nah di mana sih organisasi ini
00:03:48
tempatnya ternyata katanya kalau kita
00:03:51
lihat gima w3c ini eh bertempat ya dia
00:03:56
enggak punya markas utama gitu katanya
00:03:59
ada gabungan dari beberapa institusi
00:04:01
jadi ada di Amerika di Mit ada di
00:04:04
Prancis ada di Jepang dan ada di Cina ya
00:04:08
jadi orang-orang pintar di seluruh dunia
00:04:10
ini bergabung untuk menciptakan
00:04:12
standar-standar di dunia web ini ya Nah
00:04:16
standar-standarnya apa
00:04:17
aja kita bisa lihat di sini ada di
00:04:21
bagian
00:04:23
standarr ke bawah ini standarnya hampir
00:04:28
semua ya Ada web Des dan aplikasinya
00:04:30
arsitektur web web service dan lain
00:04:33
sebagainya yang akan yang akan kita
00:04:36
fokuskan adalah yang ada di sini web
00:04:38
desain dan aplikasi di mana di dalamnya
00:04:41
ada html CSS dan lain sebagainya kita
00:04:44
bisa lihat di dalamnya nah
00:04:46
ini bahwa w3s ini mengurusnya salah
00:04:50
satunya adalah html dan CSS Jadi kalau
00:04:52
misalkan html punya tag-tag baru atau
00:04:55
ada tag-tag lama yang hilang Nah itu
00:04:58
gara-gara si W3 ini Lalu nanti Aturan
00:05:01
itu diimplementasikannya gimana misalkan
00:05:04
mereka sudah punya aturan baru nih ya
00:05:05
mereka akan membuat Aturan itu supaya
00:05:09
bisa diimplementasikan di web browser
00:05:13
Itulah kenapa Salah satu alasan kita
00:05:15
harus update web browsernya karena
00:05:18
supaya kita juga bisa mengupdate
00:05:20
teknologi yang dirumuskan sama si w3c
00:05:22
tadi itulah ya Secara umumnya nah tapi
00:05:26
karena yang bikin web browser ini eh
00:05:30
beda ya perusahaannya beda developernya
00:05:33
juga
00:05:34
beda maka tiap-tiap browser ini juga
00:05:38
mengimplementasikan aturan tadi berbeda
00:05:40
juga ya walaupun e perbedaannya enggak
00:05:43
terlalu jauh Itulah kenapa kita harus
00:05:46
instal semua Browser supaya kita bisa
00:05:48
lihat tadi
00:05:50
perbedaannya ya bisa dari tampilan bisa
00:05:53
dari performance dan lain sebagainya Itu
00:05:55
jadi kalau si html punya standar baru
00:06:01
pasti setelah itu web browser juga
00:06:03
diupdate supaya bisa mengakomodir aturan
00:06:06
baru tadi atau standar baru tadi Nah ini
00:06:09
saya punya
00:06:11
contoh sebuah website yang namanya
00:06:14
Evolution of the web.com Di mana kita
00:06:17
bisa melihat perkembangan teknologi
00:06:19
internet diikuti juga dengan
00:06:21
perkembangan web browser ini website-nya
00:06:23
e bagus banget ya saya Bisa
00:06:27
tunjukkan Ini alamatnya
00:06:30
web ini kerennya lagi dia punya pilihan
00:06:33
untuk bahasa
00:06:34
Indonesia jadi saya bisa ganti
00:06:38
bahasanya lalu kita coba jelajahi ya
00:06:42
kalau kita klik lihat
00:06:45
website-nyaus
00:06:46
banget ini adalah
00:06:49
timeline ya dari kiri ke kanan itu
00:06:51
timeline
00:06:52
waktu dan kalau kita lihat e di dalamnya
00:06:55
ada
00:06:56
teknologinya ini ada mode siang atau
00:07:00
malam ya saya lebih suka lihatnya pakai
00:07:02
mode
00:07:03
malam backgroundnya hitam seperti ini
00:07:07
Nah kita lihat laginih e di atas ini ada
00:07:10
timeline
00:07:11
waktunya Di mana kita bisa lihat ini
00:07:14
Browser dan teknologi yang mendukungnya
00:07:16
pada tahun 91 Ini teknologi http e
00:07:21
temukan ya kalau kita sorot pakai Mouse
00:07:23
ada penjelasan singkatnya lalu kalau
00:07:25
saya klik selengkapnya saya Klik di sini
00:07:28
itu akan membuka Wikipedia dari
00:07:32
ee teknologi yang saya maksud gitu ya
00:07:36
atau yang saya pilih ya kita kembali ke
00:07:38
web-nya Nah setelah tahun 91 http
00:07:41
ditemukan tahun 92 ini html 1 juga
00:07:45
ditemukan Nah setelah itu web browser
00:07:48
pertama
00:07:50
diciptakan ya lalu berarti ini kalau
00:07:54
kita lihat mosaik adalah web eh browser
00:07:57
pertama sor web browser pertama pasti
00:08:00
dia mendukung teknologi html 1 lalu 94
00:08:04
netscape
00:08:05
ee diciptakan Mungkin ada yang tahu
00:08:08
netscap dan eh 95 opra dan seterusnya ya
00:08:14
ini kerennya lagi kalau saya klik html
00:08:20
Nah maka kita bisa lihat
00:08:23
ee versi-versinya ya Jadi ada urutan
00:08:28
berkembang teknologinya dalam sebuah
00:08:31
garis
00:08:32
gitu nah dan kalau misalkan kalian
00:08:36
perhatikan setiap ada perubahan html
00:08:39
pasti setelahnya ada
00:08:41
ee apa update dari web browser nah ini
00:08:48
ya lalu kalian bisa lihat perkembangan
00:08:50
dari web browser kalau kalau kita klik
00:08:53
web
00:08:54
browsernya itu kalian bisa lihat
00:08:58
perkembangannya ya ya ini website-nya
00:09:01
cukup keren kalau kita klik eh opra
00:09:04
Misalnya ini opra saya klik ini awalnya
00:09:06
opra tuh tampilannya
00:09:09
begini ya lalu berubah setiap saya Klik
00:09:13
Kanan dia berubah sampai yang terbaru ya
00:09:16
Jadi kalian bisa coba cek buka
00:09:19
website-nya lalu e bisa dipelajari lah
00:09:22
ya
00:09:24
teknologinya apa saja yang sudah muncul
00:09:27
yang kalian gunakan semakin mendekati ke
00:09:30
e tahun
00:09:31
sekarang teknologinya semakin lihat ini
00:09:34
semerawut nih ini artinya teknologi baru
00:09:37
tuh dari mulai 2008 sampai sekarang itu
00:09:40
banyak sekali ditemukan ya Jadi silakan
00:09:43
pelajari buka dan pelajari website ini
00:09:50
kita kembali ke
00:09:51
slide-nya kita lihat lagi t kita sudah
00:09:55
lihat perkembangan dari si ee teknologi
00:09:58
HTML ya dan Kalian juga mungkin di
00:10:00
dalamnya lihat tadi ada CSS ada juga
00:10:03
javascript ya jadi ada tiga teknologi
00:10:06
ini punya tugas masing-masing jadi html
00:10:10
itu diciptakan untuk membuat struktur
00:10:12
sebuah halaman ya dan menyajikan konten
00:10:17
gitu CSS digunakan untuk menghias
00:10:20
halaman tadi supaya halamannya terlihat
00:10:22
lebih cantik lebih bagus dan javascript
00:10:25
sebetulnya javascript bisa melakukan
00:10:27
banyak hal tapi khusus untuk mata kuliah
00:10:30
kita javascript yang akan kita gunakan
00:10:32
adalah untuk interaktivitas supaya eh
00:10:36
website-nya lebih interaktif terus jadi
00:10:39
bisa punya animasi bisa ada slidh dan
00:10:43
lain sebagainya ya walaupun eh di luar
00:10:47
dari itu javascript sebetulnya bisa
00:10:48
melakukan hal yang lain yang lebih
00:10:51
powerful jadi tolong gunakan sesuai
00:10:54
dengan fungsinya masing-masing walaupun
00:10:57
html juga bisa menghias font gitu
00:10:59
misalkan memberi warna mengatur ukuran
00:11:02
ya tapi ee CSS itu bisa melakukan jauh
00:11:05
lebih baik jadi eh jangan pernah
00:11:08
menghias sebuah halaman menggunakan HTML
00:11:11
ya kalau saya bisa ilustrasikan html itu
00:11:14
sebagai sebuah eh manekin misalnya ya
00:11:17
manekin polos gitu ya kan manekin tuh
00:11:20
punya kepalanya punya badan punya kaki
00:11:24
punya tangan Nah si manekin ini bisa
00:11:28
kita kasih baju apa aja kan Ya mungkin
00:11:32
hari ini bajunya warna merah besok
00:11:33
bajunya warna hijau nah baju-baju
00:11:36
tersebut atau aksesoris yang kita
00:11:38
kenakan ke manekin itu adalah teknologi
00:11:41
CSS ya sedangkan javascript di mana
00:11:45
javascript itu selain membuat
00:11:48
tampilannya lebih menarik tapi dia juga
00:11:51
membuat
00:11:53
eh apa menjadi lebih cerdas gitu ya
00:11:57
karena javascript adalah programming
00:11:59
dia bisa melakukan pengambilan keputusan
00:12:02
dia bisa
00:12:04
ee melakukan proses komputasi yang lebih
00:12:08
kompleks ya Jadi nanti si manekin ini
00:12:11
bisa jalan bisa bicara gitu
00:12:14
ya analoginya
00:12:16
begitulah gunakan sesuai dengan e
00:12:19
peruntukannya
00:12:22
masing-masing sehingga nih Saya punya
00:12:25
contoh
00:12:25
awalnya website Amazon tuh seperti ini
00:12:29
ya ini hanya digunakan menggunakan HTML
00:12:32
ini mungkin tahun
00:12:35
0-an ya lalu berubah evolusinya menjadi
00:12:38
seperti ini dan e sampai akhirnya
00:12:42
sekarang website Amazon tuh seperti ini
00:12:44
bagus ada slide show-nya kita bisa
00:12:47
eh interaksinya lebih e bagus lagi ya
00:12:53
dan ini adalah contoh lain website yang
00:12:56
selalu kita gunakan setiap hari Facebook
00:12:58
pada awalnya tampilannya seperti ini ya
00:13:00
bisa kalian lihat sangat sederhana
00:13:03
mungkin kalau kalian e disubuhkan
00:13:06
Facebook sekarang seperti ini gak akan
00:13:08
ada yang mau pakai ya ini waktu
00:13:10
awal-awal tahun 2004 Facebook
00:13:13
tampilannya seperti ini lalu
00:13:15
berevolusi jadi seperti ini berubah
00:13:19
lagi hingga sampai sekarang seperti ini
00:13:23
ya mungkin teknologinya juga lebih
00:13:25
kompleks Enggak cuman pakai html CSS
00:13:28
JavaScript ada yang lain ada yang
00:13:30
lain-lain Ya tapi kalau kalian lihat
00:13:33
ee Ini adalah website yang kita gunakan
00:13:36
tahun
00:13:37
lalu ya nanti kalau mau diakses bisa di
00:13:44
wwwpw1.if-unpas.org/2014 ya karena yang
00:13:46
2015 masih ee dalam pengembangan nah ini
00:13:50
website ini adalah website yang dibuat
00:13:55
murni hanya menggunakan HTML CSS dan
00:13:58
JavaScript saja enggak ada bahasa
00:14:00
pengugaman server site kayak PHP ASP dan
00:14:04
lain sebagainya enggak pakai atau pakai
00:14:06
database pakai MySQL Gitu enggak ya
00:14:09
hanya murni CSS eh sori html CSS dan
00:14:14
javascript jadi harapannya di akhir
00:14:17
semester itu kalian bisa membuat yang
00:14:20
seperti ini atau bahkan lebih bagus dari
00:14:23
ini ya hanya dengan menggunakan
00:14:25
pengetahuan dari HTML CSS dan Javas
00:14:29
scrip
00:14:30
saja Nah selanjutnya Apa selanjutnya
00:14:34
mungkin di video selanjutnya kita akan
00:14:36
mulai lakukan coding ya Jadi kita
00:14:38
mungkin bikin website dengan menggunakan
00:14:40
HTML yang sederhana dulu masih
00:14:43
menggunakan notepad belum menggunakan
00:14:45
kode editor ya jadi siapkan notepad-nya
00:14:47
di video berikutnya Oke mungkin sampai
00:14:51
sini dulu pengantarnya saya akhiri
00:14:53
sekian saya sandik gali terima kasih
00:14:56
atas perhatiannya sampai bertemu di
00:14:59
video berikutnya
