Materi PWPB XI Format Kaitan Pada Web

BAB III
FORMAT KAITAN PADA HALAMAN WEB

KOMPETENSI INTI

3.      Memahami, menerapkan, menganalisis, dan mengevaluasi tentang pengetahuan faktual, konseptual, operasional dasar, dan metakognitif sesuai dengan bidang dan lingkup kerja Rekayasa Perangkat Lunak pada tingkat teknis, spesifik, detail, dan kompleks, berkenaan dengan ilmu pengetahuan, teknologi, seni, budaya, dan humaniora dalam konteks pengembangan potensi diri sebagai bagian dari keluarga, sekolah, dunia kerja, warga masyarakat nasional, regional, dan internasional.

4.      Melaksanakan tugas spesifik dengan menggunakan alat, informasi, dan prosedur kerja yang lazim dilakukan serta memecahkan masalah sesuai dengan bidang kerja Rekayasa Perangkat Lunak. Menampilkan kinerja di bawah bimbingan dengan mutu dan kuantitas yang terukur sesuai dengan standar kompetensi kerja. Menunjukkan keterampilan menalar, mengolah, dan menyaji secara efektif, kreatif, produktif, kritis, mandiri, kolaboratif, komunikatif, dan solutif dalam ranah abstrak terkait dengan pengembangan dari yang dipelajarinya di sekolah, serta mampu melaksanakan tugas spesifik di bawah pengawasan langsung. Menunjukkan keterampilan mempersepsi, kesiapan, meniru, membiasakan, gerak mahir, menjadikan gerak alami dala ranah konkret terkait dengan pengembangan dari yang dipelajarinya di sekolah serta mampu melaksanakan tugas spesifik di bawah pengawasan langsung.

 

KOMPETENSI DASAR

3.5 Menerapkan format kaitan pada halaman web

4.5 Membuat kode html untuk menampilkan format kaitan pada halaman web

 

APERSEPSI

Di dalam situs web biasanya akan tcrlihat tcks yang warnanya berbeda, bawah, bcrada dalam kotak (tombol). Inilah yang discbut hyperlink atau link. Jika bagian ini diklik, Anda akan dibawa kc halaman web lainnya. Anda akan mengctahui bahwa teks terscbut aktif (link) karena jika melewatkan pointer mouse di atasnya, pointer itu betilbah menjadi pointing finger. Pranala atau hipertaut (Inggris : hyperlink) adalah sebuah acuan dalam dokumen hiperteks (hypertext) ke dokumen yang lain atau sumber lain, seperti halnya suatu kutipan di dalam literatur. Dikombinasikan dengan sebuah jaringan data dan sesuai dengan protokol akses, sebuah komputer dapat diminta untuk memperoleh sumber yang direferensikan.

MENGAMATI

Pelajarilah buku teks maupun sumber lain tentang format kaitan dan format formulir pada halaman web dengan baik dan benar!

 

AYO PAHAMI

FORMATKAITAN PADA HALAMAN WEB

Ada beberapa cara (format) untuk menampilkan pranala pada halaman web. Jika pengunjung website sedang mengeklik suatu kata atau gambar yang mengandung hyperlink, ia akan diarahkan untuk menuju ke alamat URL yang ada di dalam hyperlink tersebut. Sebuah embedded link (pranala yang tersimpan) adalah salah satu dari beberapa cara yang biasa digunakan dengan tipe/gaya teks khusus. Hyperlink adalah sebuah fungsi k'husus untuk menghubungkan setiap masing-masing halaman website satu sama lainnya atau ke website yang lain.

1.      Konsep Hyperlink dalam HTML

Link berguna untuk menghubungkan antardokumen HTML. Link merupakan singkatan dari hyperlink, yang identik dengan sebuah fungsi dalam HTML yang digunakan untuk memudahkan user untuk menelusuri seluruh isi atau informasi yang tersimpan dalam website bersangkutan. Dalam HTML, sebuah objek teks yang berupa link akan ditampilkan dengan font berwarna biru style underline (bergaris bawah). Jika pointer mouse ditujukan ke link tersebut, pointer mouse akan berubah menjadi telunjuk tangan. Selanjutnya, jika sebuah link sudah pernah diakses atau dikunjungi, warna dari teks/objek link tersebut akan berubah menjadi ungu.

a.      Mengenal Jenis Link

Link dalam suatu objek 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. Browser web akan menyorot (highlight) teks atau gambar yang  didefinisikan sebagai link dengan warna dan garis bawah untuk menunjukkan bahwa itu adalah hyperlink atau link.

1)      Link Absolut

Link absolut adalah link yang mengarah langsung pada website  tertentu, di mana sebuah dokumen dikunci pada alamat valid sebuah  website dan tidak tergantung pada direktori lokasi dokumen html  berada. Oleh sebab itu, alamat dapat digunakan pada website lain selama alamat tersebut masih valid. Perhatikan contoh berikut.

 

 

<a href =https://fadhilsolution.com>Kunjungi blog saya</A>

 

Sebenarnya, sebuah link tidak harus ke halaman lain. Pada  dasarnya, penggunaan atribut href dapat juga ditujukan pada ID  sebuah tag. Oleh sebab itu, jika diklik akan menuju pada ID tersebut dan tidak ke halaman lain meskipun dapat mengarahkan ke halaman  lain dengan atribut ID pada halaman tujuan dan secara otomatis  browser akan mengarah ke bagian elemen pemilik ID.

2)      Link Relatif

Link relatif adalah link yang mengarah langsung pada lokasi path atau direktori tujuan yang tersimpan pada web server atau komputer tanpa diawali dengan alamat domain website tersebut. Oleh sebab itu, pengunaannya sangat tergantung pada lokasi file berada. Apabila ingin mundur selangkah pada lokasi halaman sekarang ke halaman

sebelumnya, Anda harus menggunakan "../" agar dapat pindah ke halaman pada direktori di atasnya atau ke halaman sebelumnya.

b.      Sintaks Link

Sintaks link adalah <a href="url"> nama link</a>. Link dapat dibuat pada suatu teks atau gambar dengan cara meletakkan teks atau gambar  tersebutdi antara tag pembuka < A HREF> dan tag penutup </A>.

2.      Tag-Tag untuk Hyperlink

Peran link dalam halaman web sangat besar dan selalu dibutuhkan untuk memudahkan pengguna web dalam berinteraksi dengañ halamanhalaman web yang ada. Link dalam HTML ditandai dengan tag <A> (Anchor), yang terdiri atas atribut HREE yang digunakan untuk menuliskan lokasi tujuan (file) dari link dan variabel NAME yang digunakan untuk menyimpan nama variabel kunci sebagai lokasi (bagian) 9ang akan dituj1Ê oleh link. Links tag identik dengan sebuah tag pada html yang digunakan untuk menghubungkan dokumen satu dengan dokumen lainnya yang bersumber dari dalam (internal) maupun dari luar (external).

a.      <a>

<a> berfungsi dalam mendefinisikan sebuah hyperlink yang digunakan untuk menghubungkan halaman satu ke halaman lain. Tidak semua elemen yang ditulis antara tag <a> menjadi sebuah hyperlink. Pembuatan link dengan tag <a> ini bergantung pada atribut href. Jika sebuah teks atau gambar didefinisikan dengan menggunakan tag <a> dan tidak memiliki atribut href di dalamnya, elemen tersebut menunjukan sebuah placeholder. Berikut ini atribut-atribut yang digunakan pada <a>.

Atribut	Value	Deskripsi	Keterangan
charset	char_encoding	Menentukan character-set pada dokumen yang terhubung	Optional
coord	coordinates	Menentukan koordinat link	Optional
download	filename	Menentukan bahwa target akan di-download ketika pengguna mengeklik hyperlink	Optional
href	URL	Menentukan URL dari halaman yang akan dituju	Wajib
hreflang	language code	Menentukan bahasa pada dokumen an terhubun	Optional
media	media_query	Menentukan media/perangkat apa yang akan dioptimalkan pada dokumen yang terhubun	Optional
name	section name	Menentukan nama anchor (tag <a>)	Optional
rel	altemate; author; bookmark; extemal; help; license; next; nofollow; noreferrer; noopener; prev; search; tag;	Menentukan hubungan antara dokumen yang berjalan dan dokumen yang dituju	Optional
rev	text	Menentukan hubungan antara dokumen yang dituju dan dokumen yang berjalan	Optional
shape	default rect circle poly	Menentukan bentuk link	Optional
target	blank; _parent; self; top; framename;	Menentukan di mana dokumen yang dituju akan dibuka	Optional
type	media_type	Menentukan jenis media dari dokumen yang dituju	Optional

b.      <link>

<link> berfungsi untuk menghubungkan dokumen yang bersangkutan dengan sumber file yang berasal dari luar (external).  Berikut ini atribut-atribut yang digunakan pada <link>.

Atribut	Value	Deskripsi	Keterangan
charset	char encoding	Menentukan pengodean karakter dari dokumen yang terhubung	optional
crossorigin	anonymous use-credentials	Menentukan  bagaimana sebuah elemen menangani permintaan cross-origin	Optional
href	URL	Menentukan lokasi dokumen yang akan dihubungkan	wajib
hreflang	language code	Menentukan bahasa teks dalam dokumen yang terhubung	optional
media	media query	Menentukan pada perangkat apa dokumen yang terhubung akan ditampilkan	optional
rel	Alternate; author; dnsprefetch; help; icon; license; next; pingback; preconnect; prefetch; preload; prerender; prev; search; stylesheet;	Menentukan hubungan antara dokumen yang berjalan dan dokumen terkait	wajib
rev	reversed relationship	Menentukan hubungan antara dokumen terkait dan dokumen yang berjalan	optional
sizes	Height x Width any	Menentukan ukuran file yang terhubung (hanya untuk atribut rel yang bernilai "icon")	optional
target	_blank; _self; _top; _parent; frame_name;	Menentukan di mana dokumen yang terhubung harus dimuat	optional
type	media type	Menentukan jenis media dari dokumen yang terhubung	optional

 

c.       <nav>

<nav> berfungsi untuk mendefinisikan link navigasi (navigation links).

d.      Mailto

Kadang-kadang, Anda ingin memudahkan pengguna untuk mengirimkan e-mail ke suatu alamat e-mail tertentu. Hal ini mudah dilakukan dengan tag hyperlink ini, yaitu dengan menambah "mailto" dan alamat e-mail tujuan.

3.       

 

MENANYA

·         Masing-masing siswa membuat beberapa pertanyaan tentang tag-tag untuk hyperlink yang kurang dimengerti kemudian saling tukar dengan teman sebangku.

·         Mintalah mereka untuk menjawabnya. Apabila mengalami kesulitan, bertanyalah pada guru!

 

Lihat Materi Versi PDF

Download Materi

Assessmen !

Klik Link Berikut Ini