00:00:01
kali ini yang akan kita pelajari dalam
00:00:02
html adalah hyperlink atau sering juga
00:00:07
disebut dengan link saja atau web link
00:00:09
ya Jadi sama aja link adalah sebuah
00:00:13
koneksi dari sebuah sumber web ke sumber
00:00:16
lain itu menurut spesifikasinya dengan
00:00:18
kata lain jika tidak ada hyperlink maka
00:00:21
tidak akan ada juga yang disebut dengan
00:00:24
web ya jadi komponen hyperlink ini
00:00:26
adalah komponen yang sangat penting
00:00:27
dalam sebuah web
00:00:30
link pada HTML dibuat dengan menggunakan
00:00:33
tag A atau singkatan dari anor ya
00:00:36
mungkin Kenapa disebut Anger Karena aner
00:00:39
itu adalah jangkar analoginya adalah
00:00:42
jangkar itu pasti terhubung pada sebuah
00:00:45
kapal sama seperti hyperlink juga pasti
00:00:47
terhubung pada sebuah sumber begitu ya
00:00:51
cara membuatnya langsung saja kita coba
00:00:54
saya akan buka sublim tek saya seperti
00:00:57
biasa saya sudah punya latihan en dengan
00:01:00
file halaman 1.html di dalamnya ya di
00:01:04
dalam html-nya saya akan coba buat
00:01:06
sebuah paragraf yang berisi seperti ini
00:01:10
seperti ini saya punya paragraf yang
00:01:12
bertuliskan Klik di sini untuk
00:01:14
mengetahui informasi lebih lanjut yang
00:01:17
nantinya kata di sini akan saya jadikan
00:01:20
sebuah link sehingga kita bisa klik
00:01:22
untuk terhubung ke sumber lain atau ke
00:01:25
halaman lain ya jadi cara menuliskannya
00:01:27
adalah kita tambahkan tag a sebelum kata
00:01:30
di sini dan tutup a setelah kata di sini
00:01:34
ya kita lihat dulu
00:01:36
hasilnya Ini hasilnya nah kata di sini
00:01:39
belum menjadi sebuah hyperlink Karena
00:01:42
untuk membuat hyperlink kita butuh satu
00:01:44
atribut yang dinamakan dengan HF di
00:01:47
dalam hf ini kita bisa menuliskan
00:01:49
sumbernya nah yang bisa kita Tuliskan di
00:01:52
dalam HF itu ada beberapa jenis ya kalau
00:01:55
kita lihat di
00:01:56
slide-nya dalam hf ini yang pertama kita
00:01:59
bisa Tuliskan exterernal link atau link
00:02:02
ke website lain ya kita coba Misalkan
00:02:06
kita akan terhubung ke Google saya harus
00:02:09
menuliskan http jadi http-nya harus
00:02:12
dituliskan
00:02:15
titik2/google.com ya kalau kita lihat
00:02:17
hasilnya lagi kembali ke browser lalu
00:02:20
refresh Nah sekarang kalau kalian lihat
00:02:23
ini otomatis linknya berubah style-nya
00:02:26
ya warnanya menjadi Ungu atau biru Lalu
00:02:29
ada garis bawahnya Apa perbedaannya
00:02:32
antara ungu dan biru kalau ungu itu kita
00:02:35
sudah pernah mengunjungi linknya Kenapa
00:02:37
Di Sini Ungu Karena saya sudah pernah
00:02:39
menggunakan browser ini saya sudah
00:02:41
pernah mengunjungi google.com sebelumnya
00:02:44
tapi kalau warnanya biru terang itu
00:02:46
artinya kalian belum pernah sama sekali
00:02:48
mengunjungi website tersebut Kalau saya
00:02:50
coba klik kalau terhubung dengan
00:02:51
internet langsung masuk ke google.com
00:02:54
itu yang pertama kita bisa isi hfnya
00:02:56
menggunakan sternal link tapi jangan
00:02:59
jangan lupa Tuliskan juga protokolnya
00:03:02
http.2 Yang kedua kita bisa simpan
00:03:05
internal link atau halaman website lain
00:03:08
yang ada di dalam e domain kita atau
00:03:11
satu satu domain dengan website yang
00:03:13
kita buat contohnya saya buat halaman
00:03:15
lain misalkan produk atau admin ya kita
00:03:19
Coba buat satu buah file lagi di dalam
00:03:21
sublim Tex kita kasih
00:03:25
nama halam2.html
00:03:30
isinya seperti ini kalau kita kembali
00:03:33
Saya akan ganti hf-nya dengan file yang
00:03:37
akan saya tuuh yaitu
00:03:39
halam2.html ya kita tidak perlu
00:03:41
menuliskan http karena ini satu domain
00:03:45
bahkan saya simpan di dalam satu folder
00:03:47
yang sama jadi saya tinggal puliskan
00:03:49
halam2.html kalau kita lihat hasilnya
00:03:53
refresh Klik di sini Nah maka dia akan
00:03:56
pindah ke halaman du untuk kembali ke
00:03:59
halaman hal S kita harus ubah halaman
00:04:01
duanya saya harus tambahkan tag A lagi
00:04:04
di bawah H1
00:04:06
ini seperti ini ya saya tambahkan reff
00:04:09
halaman 1.html lalu tulisannya Kembali
00:04:12
ke halaman 1 J kalau saya refresh saya
00:04:15
bisa bolak-balik ke halaman 1 ke halaman
00:04:18
2 ya jadi itu tadi penggunaan HF untuk
00:04:22
eksternal dan internal
00:04:24
url ya Nah ini ada yang disebut dengan
00:04:27
relatif url apa
00:04:30
Apa maksud dari relative url itu
00:04:32
contohnya begini kalau misalkan saya
00:04:34
masuk ke dalam foldernya latihan 6
00:04:37
misalnya lalu saya buat sebuah folder
00:04:39
lagi misalnya
00:04:40
admin dan saya simpan halaman du ini ke
00:04:43
dalam folder admin ya lalu saya kembali
00:04:47
ke browsernya ini di halaman 1 kalau
00:04:50
saya Klik di
00:04:52
sini akan terjadi error karena sekarang
00:04:55
kalau kita lihat di sublem tsnya dia
00:04:57
akan mengarah ke halaman du sedangkan
00:04:59
sekarang halaman 2 sudah pindah ke dalam
00:05:01
folder admin jadi untuk bisa berjalan
00:05:03
dengan normal kita harus tambahkan nama
00:05:05
foldernya admin seperti ini ya Jadi ini
00:05:09
saya bacanya di folder yang sama di
00:05:12
latihan 6 masuk dulu ke folder admin
00:05:15
lalu cari halaman 2.html Nah sekarang
00:05:19
dari halaman 2 mau kembali ke halaman 1
00:05:22
itu error juga kenapa Karena sekarang
00:05:25
halaman duanya ada di dalam folder admin
00:05:29
kalau saya tulis halaman 1.html artinya
00:05:31
dia akan mencari di folder yang sama dan
00:05:34
halaman 1.html tidak berada di folder
00:05:37
yang sama tapi berada di satu folder di
00:05:40
atasnya Nah untuk itu kita harus
00:05:44
tambahkan titik-titik slash ini artinya
00:05:48
naik satu folder di atasnya lalu cari
00:05:51
halaman 1.html Jadi sekarang dari
00:05:54
halaman du kalau saya klik dia naik satu
00:05:57
folder lalu mencari halaman satu maka
00:05:59
Mak halamannya tampil karena sudah benar
00:06:01
itu yang disebut dengan relative url
00:06:04
Coba kalau begini
00:06:07
misalnya sekarang saya simpan halaman 1
00:06:10
ke dalam folder
00:06:12
user ya saya
00:06:15
simpan ke dalam folder user kita cek
00:06:19
lagi halaman 1 dan halaman
00:06:23
2 kita buka lagi halaman 1 dan halaman
00:06:26
2 nah ini kalau saya jalankan di browser
00:06:29
itu pasti error
00:06:34
lagi nah sekarang saya mau kasih tugas
00:06:37
untuk kalian Bagaimana caranya agar
00:06:40
linknya tetap jalan ya silakan pause
00:06:42
dulu videonya coba mengetahui apa yang
00:06:45
harus diperbaiki agar halamannya jalan
00:06:48
Kalau sudah kalian boleh play lagi
00:06:50
videonya kita lihat hasilnya
00:06:54
sama-sama yang harus kalian perbaiki di
00:06:56
halaman sat adalah karena halaman 1
00:06:58
sekarang berada di dalam folder user
00:07:01
jadi kita harus keluar dulu Naik dulu
00:07:03
satu
00:07:04
folder ya naik dulu satu folder itu
00:07:07
artinya kita berada di latihan 6 lalu
00:07:09
masuk ke folder admin ya Jadi kita harus
00:07:12
tambahkan titik-titik slash begitu pula
00:07:15
halnya dengan halaman
00:07:18
du Jadi sekarang kita ada di sini kita
00:07:21
harus naik dulu satu folder lalu
00:07:23
sekarang kita masuk ke halaman user ya
00:07:28
jadi itu yang harus kalian perbaiki
00:07:30
kalau kita lihat lagi hasilnya Open di
00:07:32
browser Saya klik di sini lalu kembali
00:07:36
ke halaman satu itu jalan dengan normal
00:07:38
gitu ya itu untuk menggunakan relative
00:07:43
url yang ketiga kita bisa simpan page
00:07:45
anchor atau yang biasa disebut dengan
00:07:47
bagian tertentu dari sebuah halaman Jadi
00:07:49
bukan hanya kita masuk ke sebuah halaman
00:07:52
tapi kita pindahnya ke bagian tertentu
00:07:54
dari sebuah halaman nah contohnya gimana
00:07:57
kita lihat ya nah Nah sekarang kita
00:08:00
lihat lagi di Sublime teks-nya halaman 1
00:08:03
dan halaman 2 sudah saya perbaiki lagi
00:08:04
jadi seperti awal ya jadi enggak ada
00:08:06
lagi folder user dan folder admin nah
00:08:09
yang saya baru buat adalah ini halaman
00:08:12
3.html ini kalau kalian lihat jangan
00:08:14
dulu kaget dengan isinya kalian enggak
00:08:17
perlu bingung nanti kita telusuri
00:08:19
satu-satu yang pertama saya Tuliskan
00:08:21
eh heading 1 bertuliskan ini adalah
00:08:25
halaman 3 lalu ceritanya nanti di
00:08:28
halaman 3 ini saya punya tiga buah
00:08:30
artikel yang masing-masing punya judul
00:08:33
yang menggunakan H2 dan artikelnya ya
00:08:36
ini tidak perlu khawatir dengan Apa itu
00:08:38
lorem ipsum dolor dan seterusnya ini
00:08:42
adalah placeholder atau teks sembarang
00:08:44
yang digunakan untuk melihat apakah
00:08:46
sebuah paragraf itu akan tampil sesuai
00:08:49
dengan keinginan kita atau tidak ya
00:08:51
nanti sublim t akan dengan mudah membuat
00:08:53
ini tapi Intinya saya punya nanti tiga
00:08:56
buah bagian bagian pertama
00:09:00
ya saya tulis bagian satu yang memiliki
00:09:02
dua buah paragraf lalu saya pisahkan
00:09:05
dengan 10 buah BR ya supaya nanti
00:09:08
jaraknya ada 10 spasi Lalu ada bagian
00:09:13
dua ya saya juga tulis menggunakan H2 di
00:09:17
bagian dua ini saya punya tiga buah
00:09:18
paragraf jadi artikelnya ada tiga buah
00:09:20
paragraf sama dibatasi juga oleh 10 buah
00:09:23
BR dan yang terakhir ini kita buat
00:09:26
sama-sama saya akan buat bagian tiga
00:09:28
jadi kita buat dengan menggunakan H2 ya
00:09:31
ketik H2 tab lalu bagian
00:09:34
3 lalu di sini ceritanya kita akan buat
00:09:36
satu buah paragraf jadi bagian 1 2
00:09:39
paragraf bagian 2 3 paragraf bagian 3
00:09:41
hanya satu cara menuliskannya kita
00:09:43
tinggal Tuliskan P ya lalu diisi dengan
00:09:46
kalau di sublim test kita bisa tulis
00:09:48
lorem l o r e m lalu tekan tab ya l-nya
00:09:54
huruf kecil sehingga dia akan otomatis
00:09:56
membuat teks lorem ipsum atau teks SP
00:09:59
folder ini Oke sekarang kita sudah punya
00:10:01
tiga buah bagian kalau kita lihat
00:10:03
hasilnya
00:10:05
Oke jadi idenya begini J nanti setelah
00:10:07
H1 saya akan membuat Ul yang berisi tiga
00:10:11
buah link menggunakan list item ya
00:10:14
sehingga kalau saya Klik nanti dia akan
00:10:16
pindah ke bagian satu kalau saya klik
00:10:18
list Yang kedua kita pindah ke bagian
00:10:21
dua kalau saya klik list yang ketiga
00:10:23
Kita pindah ke bagian
00:10:26
tig begitu ya Oh Oh ya yang saya lupa
00:10:30
tambahkan di bagian 3 adalah 10 buah BR
00:10:32
jadi Tolong tambahkan dulu
00:10:35
begini sekarang yang akan kita lakukan
00:10:37
adalah setelah
00:10:39
H1 saya akan menambahkan Ul di mana di
00:10:42
dalamnya Akan terdapat tiga buah list
00:10:44
item yang pertama seperti ini yang
00:10:46
pertama saya Tuliskan Li saya tambahkan
00:10:49
a reff-nya kosongkan dulu kita tulis di
00:10:52
dalamnya ke bagian satu lalu untuk
00:10:56
selanjutnya kalian bisa copy paste aja
00:10:58
ya oke
00:10:59
kalau kita lihat
00:11:01
hasilnya ini tampil jadi kalau saya klik
00:11:03
ini nanti dia pindah seperti ini kalau
00:11:06
saya klik yang dua nanti dia
00:11:08
pindah seperti ini ya ceritanya begitu
00:11:12
nah Apa yang harus kita lakukan kita
00:11:14
harus memberikan penanda pada tiap-tiap
00:11:17
bagian yang ingin kita pindah atau
00:11:19
anernya tadi ya misalkan gini untuk H2
00:11:22
kita harus beri dia ID misalkan ini
00:11:26
bagian S
00:11:29
untuk bagian dua juga sama kita kasih
00:11:32
ID bagian 2 dan yang terakhir untuk
00:11:36
bagian
00:11:40
3 gitu Jadi sekarang kita sudah punya
00:11:44
anor-nya kita sudah punya penandanya
00:11:46
tinggal kita Panggil di hf-nya kita
00:11:49
Tuliskan Crash nah ini untuk penanda
00:11:52
untuk ID ya kalian tulis saja bagian
00:11:55
sat Yang kedua juga sama Crash bagian 2
00:12:01
yang ketiga Crash bagian 3 Nah jadi ini
00:12:03
bacanya saya akan pindah ke halaman yang
00:12:06
sama tapi mencari anor yang bagian satu
00:12:10
atau ID bagian satu jadi kalau kita
00:12:15
kembali Saya klik dia akan pindah ke
00:12:17
bagian
00:12:18
satu Saya klik bagian dua dia akan
00:12:21
pindah ke bagian dua Nah untuk pada saat
00:12:24
saya klik yang bagian tigaah itu tidak
00:12:26
berada di sini tulisannya tidak berada
00:12:28
di atas itu karena spasinya habis jadi
00:12:31
halamannya ini paling bawah agar bagian
00:12:34
tig berada di atas ini kita harus
00:12:37
tambahkan BR
00:12:39
dulu ini br-nya kurang jadi misalkan
00:12:41
saya tambahkan dua baris lagi jadi
00:12:43
br-nya ada
00:12:44
30 nantinya ini kalian lakukannya dengan
00:12:49
CSS bagian satu bagian dua bagian tiga
00:12:54
ya begitu untuk
00:12:56
menambahkan anor
00:12:59
dan Kalian juga bisa berpindah ke bagian
00:13:01
lain di halaman lain contohnya di
00:13:05
halaman 1 Saya mau punya harf lagi ini
00:13:08
saya tulis misalkan saya tulis ini ke
00:13:10
halaman 3 bagian 3 jadi yang perlu saya
00:13:13
tulis di sini adalah halaman 3.html tapi
00:13:16
saya mau pindahnya ke bagian 3 jadi itu
00:13:20
bisa ya Kalau saya Klik Kanan
00:13:24
Open kalau saya Klik di sini dia ke
00:13:26
halaman du kalau saya klik halaman 3
00:13:29
langsung ke bagian
00:13:31
tig itu tadi mengenai page anchor ya Nah
00:13:34
selanjutnya yang akan kita coba adalah
00:13:36
begini Ini adalah halaman 1 pada saat
00:13:39
saya Klik di sini itu langsung pindah ke
00:13:42
halaman 2 Tapi di Window yang sama atau
00:13:45
di tab yang sama kadang-kadang kita
00:13:47
ingin pada saat kita klik sebuah link
00:13:49
itu membuka tab baru Mungkin kalian
00:13:51
pernah mengalami itu ya Nah untuk
00:13:54
melakukan itu kita harus menambahkan
00:13:56
sebuah atribut ini adalah atribut yang
00:13:59
harus kita gunakan yaitu
00:14:02
target value-nya ada empat yang bisa
00:14:05
kita pilih unders self itu untuk membuka
00:14:08
link di halaman yang sama sedangkan und
00:14:10
Blank itu untuk membuka di Tab baru ya
00:14:13
untuk parent dan top ini enggak akan
00:14:15
saya bahas karena ini berhubungan dengan
00:14:16
frame kita belum belajar mengenai frame
00:14:19
Jadi dua ini dululah Kalau kalian tidak
00:14:21
Tuliskan targetnya artinya yang
00:14:23
dipanggil adalah
00:14:24
undself tapi kalau ingin membuka tab
00:14:26
baru yang dipanggil adalah und Black
00:14:29
kita coba nih untuk halaman 1.html
00:14:32
begitu saya Klik di sini saya penginnya
00:14:35
membuka tab baru Jadi saya tambahkan di
00:14:37
sini
00:14:39
target und Blank seperti itu
00:14:44
ya saya refresh Saya klik nah kalian
00:14:49
bisa lihat dibuka di Tab baru itu jadi
00:14:52
cara penggunaan target dan yang terakhir
00:14:56
bagaimana kita menghubungkan h hyperlink
00:14:59
dengan image J Nanti kalian bisa saja
00:15:02
hyperlinknya itu bukan teks tapi image
00:15:04
nah tapi karena kita belum belajar
00:15:06
tentang image ini saya simpan dulu
00:15:08
untuk video Selanjutnya ya Jadi sampai
00:15:12
sini dulu terima kasih atas perhatiannya
00:15:14
saya sandikagali sampai jumpa lagi