06 Format Link Pada Web

FORMAT LINK PADA HALAMAN WEB
Tujuan Kegiatan
1. Memahami pengertian link pada halaman web
2. Mengenal jenis link pada halaman web
3. Membuat link pada halaman web
Refleksi materi pada pertemuan sebelumnya.

Sebelum masuk ke pembahasan format link pada halaman web, kita
akan melaksanakan refleksi dan mengingat kembali sedikit materi pada
pertemuan sebelumnya. buatlah kode html untuk menampilkan halaman
sebagai berikut
Pembahasan
Link merupakan suatu objek yang dapat berupa teks atau gambar
yang dipakai dalam kode HTML untuk menuju dari suatu bagian ke bagian
yang lain pada halaman yang sama, atau menuju ke halaman (file) yang
berbeda. Default suatu link biasnya ditandai dengan teks warna biru
dengan garis bawah, dan jika pointer mouse ditujukan ke link tersebut,
maka akan berubah menjadi telunjuk tangan,
Link atau Hyperlink adalah elemen HTML yang berfungsi
menghubungkan suatu halaman web ke halaman web yang lain. Tidak
hanya untuk menghubungkan halaman, link juga punya fungsi lain seperti
scroll top, download file, menjalankan fungsi javascript, dan lain-lain.
Elemen ini bisa diklik, dan nanti akan membuka halaman lain sesui alamat
URL yang diberikan.
Link dalam HTML ditandai dengan tag <a> yang terdiri dari atribut
href yang digunakan untuk menuliskan lokasi tujuan (file) dari link dan
variabel name yang digunakan untuk menyimpan nama variabel kunci
sebagai lokasi (bagian) `yang akan dituju oleh link. Bentuk sederhana dari
tag<a> adalah sebagai berikut.
<a href="https://www.google.com/">Halaman Google</a>
1. <a> adalah tag untuk membuka link
2. href adalah atribut untuk menentukan alamat URL link tujuan
3. https://www.google.com adalah alamat URL tujuan yang akan
terbuka ketika link di klik
4. Halaman Google adalah teks label untuk link
5. </a> adalah tag untuk menutup link
Sebelum memulai kegiatan ini, buka kembali folder yang telah kalian
buat pada pertemuan sebelumnya, kemudian buatlah folder baru di dalam
folder tadi dengan nama folder: latihanlink. Setelah itu, bukalah VS Code
dan open folder latihanlink, kemudian buatlah sebuah file html dengan
nama latihan1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Latihan Link 1</title>
</head>
<body>
<p>Untuk mencari referensi lain, silahkan buka halaman google
melalui link berikut:</p>
<a href="https://www.google.com/">Halaman Google</a>
</body>
</html>
Hasilnya sebagai berikut.

Selanjutnya pada folder latihanlink buatlah 2 file html dengan nama
index.html dan contact.html.
Pada file index.html ketik kode berikut

<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Index</title>
</head>
<body>
<h2>Selamat datang</h2>
<p>Ini adalah halaman utama dari website saya. Untuk masuk
ke halaman kontak, bisa klik link di bawah</p>
<a href="contact.html">Contact</a>
</body>
</html>
Pada file contact.html ketik kode berikut

<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Contact</title>
</head>
<body>
<h3>Ini adalah halaman kontak</h3>
<p>
Untuk informasi lebih lanjut bisa mengirimkan email ke
<i><u>libratahendra@gmail.com</u></i><br />
Atau bisa juga Watsapp ke nomor +62812240123<br /><br />
Untuk kembali ke halaman utama, klik <a
href="index.html">Disini</a>
</p>
</body>
</html>
Halaman utama atau index
Halaman contact
1. Jenis Link Pada HTML

Berdasarkan alamat URL yang dituju, link pada HTML dibagi menjadi
dua kelompok yaitu Eksternal Link dan Internal Link
A. Eksternal Link
External Link adalah link yang menuju domain lain. Eksternal link
digunakan untuk membuka web atau domain lain. Misalnya seperti:
membuka halaman facebook, membuka chat whatsapp, membuka
youtube, dan sebagainya. Cara membuat eksternal link sebenarnya sama
saja seperti internal link, perbedaanya terletak pada alamt URL yang
diberikan.
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Link Eksternal</title>
</head>
<body>
<h2>Contoh link esternal</h2>
<p>
Link Eksternal untuk membuka website google, facebook,
dan <i>call to action</i> untuk whatsapp
</p>
<p>
Untuk membuka website google, klik <a
href="https://www.google.com/">disini</a><br />
Untuk membuka website facebook, klik <a
href="https://www.facebook.com/">disini</a><br />
Untuk melakukan chat via whatsapp, klik <a
href="http://api.whatsapp.com/send?phone=087862240881">disini</a>
</p>
</body>
</html>
Hasilnya sebagai berikut.

B. Internal Link
Internal Link adalah link yang menuju ke domain atau halaman web
itu sendiri. Internal link biasanya digunakan untuk menghubungkan
halaman yang satu dengan yang lainnya dalam satu website atau domain.
Editlah kode pada file index.html yang telah dibuat sebelumnya.
Masukkan kode berikut
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Link Internal</title>
</head>
<body>
<p>
<a href="index.html">Home</a> - <a
href="contact.html">Contact</a> - <a href="about.html">About</a>
</p><hr />
<p align="justify">
Selamat datang di website saya. Ini adalah website dengan
menggunakan internal link. Saat ini kamu berada di halaman utama
atau home. Untuk berpindah ke halaman lain, bisa klik link di
atas
</p>
</body>
</html>
Kode
<p align="justify">
atribut align berfungsi untuk membuat tulisan justify (rata kanan iri) pada
tampilan web.
Editlah kode pada file contact.html yang telah dibuat sebelumnya.

Masukkan kode berikut
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Contact</title>
</head>
<body>
<p>
</p><hr />
<p>
Untuk informasi lebih lanjut, kamu bisa cek di sosial
media kami <a
href="https://www.facebook.com/hendra.librata/">Klik
Disini</a><br />
Atau bisa juga menghubungi kami di whatsapp berikut <a
href="http://api.whatsapp.com/send?phone=087862240881">Klik
Disini</a>
</p>
</body>
</html>
Kode di atas menggunakan kombinasi antara link internal dan eksternal.

Facebook dan Whatsapp merupakan link eksternal.
Langkah terakhir, pada folder yang sama buatlah sebuah file html baru
dengan nama about.html dan masukkan kode berikut
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>About</title>
</head>
<body>
<p>
</p><hr />
<p>
Ini adalah halaman about dari website saya. Ini adalah
contoh website dengan link internal.
</p>
</body>
</html>
Hasilnya sebagai berikut. Kini kita bisa berpindah-pindah dari halaman
index, contact dan about dengan mudah. Pastikan ketiga file tersebut
berada di folder yang sama
2. Atribut Link Pada HTML
Selain atribut href terdapat juga beberapa atribut yang sering

ditambahkan pada link, seperti: target, title, dan lain-lain.
A. Atribut Target
Atribut ini berfungsi untuk menentukan target dari pembukaan
link. Ada beberapa target yang biasanya digunakan:
1. _blank akan membuka link pada jendela atau tab baru;
2. <iframe> sebuah komponen HTML yang memungkinkan
menyematkan video dan file lainnya ke dalam sebuah
halaman website
3. _top menuju bagian paling atas pada halaman;
Kita kembali ke file link1.html untuk mencoba membuat
membuka link pada tab/ jendela baru. Tambahkan kode berikut
<a href="https://www.google.com/" target="_blank" >Halaman
Google</a>
Simpan (ctrl + s) file di tersebut. Kemudian coba jalankan pada
browser dan klik link tersebut.
Selanjutnya kia masuk ke iframe. iFrame adalah singkatan dari
Inline Frame, sebuah komponen dari file HTML yang memungkinkan
Anda menyematkan video dan file lainnya ke dalam sebuah halaman
website. Proses untuk menyematkan file dengan teknik ini disebut
sebagai embed iFrame.
Ketika menggunakan iframe HTML, file yang disematkan bisa
berasal dari halaman lain website Anda. Namun, bisa juga dari website
lain. Contoh yang paling umum dari penggunaan iFrame adalah
penyematan video YouTube.
Buatlah sebuah file baru dengan nama frame.html kemudian
masukkan kode berikut
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Link Frame</title>
</head>
<body>
<h2>menyematkan video dari halaman youtube</h2><hr />
<p>
Simaklah video berikut
</p><br />
<iframe src="https://www.youtube.com/embed/RD7_ecpmU9A"
width="320" height="240" frameborder="0"></iframe>
</body>
</html>
Kegiatan selanjutnya adalah menggunakan link anchor dengan
tanda pagar #. Arti tanda pagar pada URL sebenarnya adalah anchor
(jangkar). Jangkar ini nantinya akan membawa kita ke lokasi tertentu di
dalam dokumen HTML.
Cara membuat link anchor adalah dengan mengisi alamat URL
dengan tanda pagar (#), lalu diisi dengan nama id dari elemen yang akan
dituju. buatlah file baru dengan nama anchor.html kemudian ketik
kode berikut
<body>
<h2>Contoh menggunakan anchor</h2><hr />
<a href="#pendahuluan">Pendahuluan</a><br />
<a href="#isi">Isi</a><br />
<a href="#penutup">Penutup</a><br />
<a href="#pustaka">Daftar Pustaka</a>
<p align="justify">Berikut adalah contoh penggunaan lin
dalam 1 halaman website. Dimana link tersebut digunakan untuk
berpindah ke atas, tengah ataupun bawah dalam halaman web
tersebut</p>
<h3 id="pendahuluan">Pendahuluan</h3>
<p align="justify">Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Dolorum quibusdam molestiae, velit vero magni
sequi accusamus incidunt, modi eveniet omnis delectus, nemo
provident necessitatibus saepe commodi eum nesciunt?
Repudiandae impedit sit consequatur, vitae, fugit voluptates
ducimus, officiis mollitia similique temporibus commodi
incidunt hic. Quaerat iure eveniet libero distinctio
dignissimos, nobis eos quisquam sint molestiae ipsa laudantium
ratione quod vitae quam aliquid optio, voluptatum iusto
perferendis aut voluptates, natus dolorem dolorum incidunt
doloremque! Labore tempore dolore odit magnam nam aliquam atque
dicta ducimus sunt cum laboriosam quos quod dolor maxime est,
quas at quibusdam quis, explicabo laudantium sint.
Reprehenderit, eum possimus.</p>
<p align="justify">Lorem ipsum dolor sit amet consectetur
adipisicing elit. Facere aliquid ipsa similique quo optio rem
rerum nemo dolore molestias fugiat, ab cum beatae soluta aut
facilis architecto nulla ea nihil, hic illum. Aut ratione,
quidem, autem officiis culpa eum, mollitia sunt alias fugit
corporis rem quas vel ullam sint at?</p>
<a href="#top"><i><u>kembali ke atas</u></i></a>
</body>
Untuk perintah
<a href="#top"><i><u>kembali ke atas</u></i></a>
kita tidak perlu membuat id=top, karena browser sudah paham jika ada
link anchor yang menuju ke #top maka ia akan dibawa ke bagian
teratas dari dokumen.
B. Atribut Title
Atribut ini berfungsi untuk membuat tooltips. Tooltips adalah
informasi tambahan yang akan tampil saat link disentuh pointer atau
saat kita menahan tap di hp. Buka kembali file link1.html kemudian
tambahkan atribut title pada kode berikut
<body>
<p>Untuk mencari referensi lain, silahkan buka halaman
google melalui link berikut:</p>
<a href="https://www.google.com/" target="_blank"
title="menuju halaman google" >Halaman Google</a>
</body>
Hasilnya, akan muncul pop up sesuai dengan value yang kita inputkan
3. Link Menggunakan Gambar
Sebuah gambar atau image dapat difungsikan menjadi sebuah link

yang menghubungkan halaman satu dengan halaman lainnya.
Penggunaan sebuah link dengan gambar akan memudahkan pengguna
mengenali halaman yang akan dituju dari pada menggunakan teks
keterangan. Gambar tersebut merupakan pengganti teks pada link yang
akan dituju.
Untuk membuat link dengan gambar, kita harus memastikan lokasi
gambar disimpan apakah berada pada folder yang sama dengan halaman
HTML atau tidak. Nama file dan ekstensi file gambar tersebut ditempatkan
di dalam atribut src.
<body>
<p>Untuk mencari referensi lain, silahkan klik logo google di
bawah ini:</p>
<a href="https://www.google.com/" target="_blank"
title="menuju halaman google">
<img src="../gambar/google.png" alt="logo google"
height="100" width="100">
</a>
</body>

06 Format Link Pada Web

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

06 Format Link Pada Web

Diunggah oleh

Hak Cipta:

Format Tersedia

FORMAT LINK PADA HALAMAN WEB

Refleksi materi pada pertemuan sebelumnya.

Hasilnya sebagai berikut.

Pada file index.html ketik kode berikut

Pada file contact.html ketik kode berikut

1. Jenis Link Pada HTML

Hasilnya sebagai berikut.

Editlah kode pada file contact.html yang telah dibuat sebelumnya.

Kode di atas menggunakan kombinasi antara link internal dan eksternal.

Selain atribut href terdapat juga beberapa atribut yang sering

Sebuah gambar atau image dapat difungsikan menjadi sebuah link

Anda mungkin juga menyukai