Membuat Link ke Bagian Dokumen HTML
kali ini kita akan membahas bagaimana cara untuk
membuat/menampilkan/menyajikan link ke bagian dokumen HTML. Biasanya link ini
dipakai pada halaman web yang mempunyai informasi yang panjang atau halaman
yang memiliki daftar isi dibagian atasnya. Tujuan diberikannya link ini adalah
agar para pembaca tidak perlu repot-repot scrolling keatas ataupun bawah jika
mau menuju atau kembali kedokumen tertentu tersebut.
Kita juga dapat membuat link internal dalam suatu halaman contohnya
untuk daftar isi dengan link ke setiap babnya . Yang perlu digunakan adalah
atribut id (identifikasi) dan simbol “#”.
- Gunakan atribut id untuk menandai elemen yang ingin ditautkan/link. Contoh:
- Sekarang kita dapat membuat link ke elemen dengan menggunakan ”#” di atribut link. Tanda “#” harus diikuti dengan id dari tag yang ingin ditautkan/link.
- Lihat kode HTML yang lebih jelasnya:
Jika kode program diatas dijalankan maka dibrowser
kalian akan muncul seperti ini:
Link ini dapat dibagi menjadi 2, yaitu:
- Link ke bagian tertentu dalam dokumen yang sama
Untuk membuat link semacam ini,
pertama-tama kita perlu memberikan id atau nama pada bagian teks atau gambar
tertentu untuk bagian yang akan dituju. Pemberian id tersebut dilakukan dengan
cara menuliskan kode berikut :
<a
id=”tujuanLink”>Teks atau gambar</a>
untuk membuat link yang akan mengarah ke
teks atau gambar yang telah di namai tersebut adalah dengan menuliskan kode
seperti berikut :
<a
href=”#Tujuanlink”>Teks atau gambar</a>
Yang perlu
diingat adalah tanda # di atas menunjukan bahwa tujuan link adalah nama bagian,
bukan berupa file.
- Link ke bagian tertentu dalam dokumen lain
Untuk membuat link semacam ini, bagian
tertentu dalam dokumen lain tersebut harus di tandai dengan pemberian id
seperti pada sub-bab sebelumnya. Perbedaannya hanya pada penulisan tujuan
link-nya saja. Pada kasus seperti ini, kita perlu menambahkan id bagian pada
tujuan link, seperti berikut:
<a
href=”namafile#idBagian”>Teks atau gambar</a>
Contoh untuk dalam dokumen yang sama:
KET:
- Atas. Bagian ini adalah bagian paling atas dari dokumen dan berguna untuk kembali ke bagian menu (Jika penunjung sedang mengaktifkan bagian bawah dokumen)
- C. Bagian ini adalah bagian yang menerangkan tentang buku pemrograman C
- Cpp. Bagian ini adalah bagian yang menerangkan tentang buku pemrograman C++.
- Bcb. Bagian ini adalah bagian yang menerangkan tentang buku pemrograman borland C++Builder.
Jika kode HTML diatas dijalankan maka hasilnya
akan seperti ini:
Jika kita mengklik teks yang berwarna biru
tersebut maka kita akan otomatis tertuju pada bagian tertentu dari dokumen
tersebut. Tapi dikarenakan teksnya kurang panjang, jadi jika ingin melihat
linknya bekerja atau tidak maka kita harus mengecilkan atau memperbesar size
browsernya sampai harus bisa discroll contoh:
nah jika
kita mengklik link pemprograman C++ maka kita akan tertuju langsung pada C++
begitulah cara untuk membuat link dalam dokumen yang sama, silahkan coba sendiri untuk membuat link dalam dokumen yang berbeda. semoga berhasil! sekian dan terimakasih~
Membuat Link ke Bagian Dokumen HTML
Tag :
Read Post : Membuat Link ke Bagian Dokumen HTML
Comments : 0
Tag :
Read Post : Membuat Link ke Bagian Dokumen HTML
Format Tampilan Gambar dengan Map
Format
gambar yang ditambahkan dalam dokumen HTML, diantaranya dalam format GIF,
JPEG, PNG. Untuk menambahkan gambar kedalam dokumen HTML digunakan tag
<IMG> dengan dilengkapi atribut
img. Atribut tag <img> yang sering digunakan diantaranya src, align,
width, height, alt dan penulisan skrip secara umum adalah sebagai berikut :
<IMG SRC = ”directori gambar /
nama gambar” atribute=”nilai atribut”>
Gambar
dengan map memungkinkan untuk memasang beberapa link dalam satu gambar. Hal
tersebut memudahkan kita dalam memanggil sebuah halaman web dengan hanya
menempatkan sekelompok gambar menjadi satu gambar. Untuk membuat image map,
harus ditambahkan atribut USEMAP pada tag image.
<IMG SRC = ”directori gambar /
nama gambar” usemap="#planetmap">
Tampilan
gambar dengan map merupakan suatu area pada gambar /image yang dapat diberi
hyperlink area yang biasanya disebut ”hotspots”. Koordinatnya gambar ditentukan
menggunakan bidang geometri seperti rectangle, polygon dan lain sebagainya. Map
sendiri dapat diartikan sebagai peta. Untuk membuat image map digunakan tag
<map> dan <area>. Perintah <map> dapat didukung oleh pelbagai
browser, diantaranya internet explorer, mozilla firefox, opera, google chrome
maupun safari.
Tag
<map> digunakan untuk mendefinisikan sebuah tampilan gambar map pada sisi
client-side. Sebuah gambar map adalah gambar merupakan area yang dapat diklik.
Nama dari gambar yang dibutuhkan pada penulisan
atribut pada tag <map>.Hal ini dikaitkan dengan <img> usemap
atribut dan menciptakan hubungan antara gambar dan map nya. Bagian dari tag
<map> berisi sejumlah elemen <area>, yang mendefinisikan suatu
lokasi/daerah saat diklik di gambar map
dapat menghubungkan ke gambar lainnya yang sudah ditentukan.
Format penulisan gambar map
Penulisan
skript secara umum adalah sebagai berikut :
Keterangan:
Nama map à nama dari
map yang nantinya akan dipanggil oleh <image usemap>
Area shape à jenis
shape yang digunakan untuk menggambarkan area dari gambar map. Adapun jenis
shape map yan dapat digunakan adalah
Tipe Shape
|
Keterangan
|
Default
|
Semua area image
|
Rect
|
Area kotak tertentu
|
Poly
|
Area poligon
|
Circle
|
Area lingkaran tertentu
|
Aturan untuk
menuliskan nilai untuk menentukan koordinat pada image yang berguna sebagai
area hyperlink dapat dilihat pada daftar tabel di bawah ini:
Tipe Shape
|
Keterangan
|
Rect
|
left-x, top-y, right-x, bottom-y
|
Circle
|
center-x, center-y, radius
|
Poly
|
x1, y1, x2, y2, ...xn, yn.
|
Berikut
adalah contoh penulisan kode program untuk menampilkan gambar map, dimana
tag <area> menggunakan atribut shape:
Jika kode
program diatas dijalankan maka pada browser akan muncul gambar seperti dibawah
ini:
Gambar akan
menampilkan gambar matahari beserta 2 planet disekitarnya. Bila diklik misalnya
planet A maka akan muncul gambar D yang merupakan gambar detail planet A.
Keterangan
kode program diatas:
·
<img
src="planets.gif"> à menampilkan
gambar “planets.gif”
·
<map
name="planetmap"> à memberi
nama map=planetmap untuk kemudian planetmap tersebut dipanggil oleh tag<img
usemap=”#planetmap”> untuk ditampilkan pada halaman web sebagai gambar map.
·
<area
shape="rect" coords="0,0,82,126" à Penentuan
area map dan koordinat area
Pada HTML 5
ada beberapa atribut baru dan ada pula atribut HTML4.01 yang tidak berlaku pada
HTML 5. Berikut adalah daftar atribut yang berhubungan dengan gambar map.
Atribut
|
Nilai
|
Keterangan
|
alt
|
Berupa teks, misal Alt=”planet”
|
Aternatif teks tertentu untuk menunjukan
href
|
coords
|
Titik koordinat coords="0,0,82,126"
|
Berisi nilai koordinat dari
shape/bentuk area yang ditentukan
|
Download
|
Nama file
|
Hyperlink dari target untuk download Ini baru di HTML 5
|
Herf
|
URL
|
Target hyperlink untuk area
|
herflang
|
language_code
|
Bahasa tertentu dari target URL Ini baru di HTML 5
|
Media new
|
media query
|
Media/perangkat tertentu untuk target URL baru di HTML 5
|
Noherf
|
value
|
Tidak didukung dalam HTML5.
|
Rel
|
Alternate,
Author,
bookmark,
help,
license,
next,
nofollow,
noreferrer,
prefetch,
prev,
search tag
|
baru di HTML 5
hubungan tertentu antara dokumen yang sedang aktif dengan target URL
|
Shape
|
Default,
rect,
circle,
poly
|
Shape/bentuk yang digunakan sebagai area
|
Target
|
_blank,
_parent,
_self,
_top,
framename
|
Target URL
|
type
|
MIME_type
|
Tipe MIME sebagai target URL baru di HTML 5
|
Dan
begitulah cara membuat tampilan gambar map pada HTML. Bagian tersulit dari
menampilkan gambar map yaitu menentukan koordinat dari gambar yang akan kita
pakai. Kalau boleh jujur saya sendiripun kurang mengerti tentang menampilkan
gambar map diHTML. Tapi untuk lebih gampang menentukan koordinat gambar kalian
bisa menggunakan aplikasi Microsoft Expression. aplikasi ini akan membantu
kalian menentukan koordinatnya sehingga memudahkan kalian untuk memasukan
gambar map pada HTML. Sekian dan terimakasih~
Membuat Tampilan Gambar Dengan Map
Tag :
Read Post : Membuat Tampilan Gambar Dengan Map
Comments : 1
Tag :
Read Post : Membuat Tampilan Gambar Dengan Map
PEMBUATAN TABEL
PADA HTML!
Sekarang kita akan membahas tentang cara menyajikan pembuatan
tabel pada HTML. Dimulai dari pengertian tabel à
tabel disini merupakan cara untuk menampilkan informasi dalam bentuk sel yang
terdiri atas baris dan kolom.
Untuk menampilkan data dalam bentuk table pada HTML, maka digunakan
Tag <table>. Elemen table berisi property <tr> untuk menentukan baris (table
row) yang didalamnya terdapat properti <td>
untuk menampkan data pada setiap sel table (table data).
Dan
hasilnya akan seperti ini
Tabelnya
tidak terlihat karna kita tidak menggunakan border dan semacamnya. Kita akan
belajar menggunakannya setelah tau atribut apa saja yang dipakai untuk menghiasi atau mempercantik tabel yang akan kita buat nantinya.
Contohnya...
tag ini
digunakan untuk mendifinisikan table heading atau judul tiap kolom.
BERBAGAI ATRIBUT YANG DIGUNAKAN UNTUK TABLE
Atribut untuk tag <table>
Width
|
=panjang (lebar table, pixel atau persen)
|
Height
|
=panjang (tinggi table, pixel atau persen)
|
Border
|
=pixel (tebal garis tepi)
|
Cellspacing
|
=pixel (spasi antar sel)
|
Cellpadding
|
=pixel (spasi di dalam sel)
|
Align
|
=[left|center|right] (perataan table)
|
Bgcolor
|
=warna (warna latar belakang table)
|
Atribut untuk tag <tr>
Align
|
=[left|center|right] (perataan sebaris sel
secara horizontal)
|
Valign
|
=[top|middle|bottom] (perataaan sebaris sel
secara vertical)
|
Bgcolor
|
=warna (warna latar belakang baris)
|
Atribut untuk tag <td>
Align
|
=[left|center|right] (perataan horizontal)
|
Width
|
=[top|middle|bottom] (perataan vertical)
|
Height
|
=pixel (tinggi sel, pixel atau persen)
|
Bgcolor
|
=warna (warna latar belakang sel)
|
Dan pada
intinya tag utama dalam menyajikan table adalah
<table> ….. </table>
|
Mendifinisikan Tabel
|
<tr> … </tr>
|
Mendifinisikan table row atau baris
|
<td> … </td>
|
Data pada tabel/sel
|
<th> … </th>
|
Mendifinisikan table heading atau judul
tiap kolom
|
Setelah
mengenal atribut-atributnya kita akan mempelajari bagaimana cara menggunakan
atribut tersebut kedalam HTML.
Untuk tag
<table> kita bisa mengatur panjang, tinggi, lebar, warna, tebal, spasi
didalam maupun antar sel, dan perataan kanan, tengah dan kiri. Contoh:
Penggunaan width
Dan hasilnya..
Penggunaan height
Hasilnya..
Penggunaan border
Hasilnya...
Penggunaan cellspacing
Hasilnya..
Penggunaan Cellpadding
Hasilnya...
Penggunaan Align
Hasilnya..
Untuk align
kita menggunakan center untuk rata tengah, jika mau rata kanan atau kiri sama
saja tinggal mengganti center dengan left untuk rata kiri dan right untuk rata
tengah.
Penggunaan bgcolor
Hasilnya..
Nah untuk
atribut yang digunakan pada tag <tr> dan <td> kalian bisa
mencobanya sendiri. Untuk singkat waktu ini adalah hasil contoh dari gabungan
diatas.
Setelah
mengetahui bagaimana untuk memasukan tabel menggunakan HTML sekarang kita akan
belajar caranya membuat nested table
atau tabel bersarang yang artinya tabel didalam tabel
Perhatikan
contoh gambar berikut..
Bisa
kita lihat bahwa di kolom “Email account note” ada tabel lagi berisi tentang
catatan jenis email. Ini yang dinamakan tabel didalam tabel. Dalam penulisan
HTML “tabel bersarang” ini ditulis dengan menuliskan HTML tabel di dalam sebuah
sel dari tabel, letaknya adalah pada <td>….</td>
Contoh:
Hasilnya..
Berikut
ini langkah-demi langkah untuk membuat tabel bersarang atau tabel didalam tabel
(nested table):
- Buatlah tabel dengan 2 kolom dan 2 baris. HTML tag-nya adalah sebagai berikut :
- Tentukan sel dimana kita ingin menempatkan tabel bersarang. Kita akan menaruh di kolom 2 baris 2.
- Ganti teks dalam sel itu dengan tabel kedua. HTML akan terlihat seperti ini:
Hasilnya adalah sebagai
berikut :
Trik untuk tabel bersarang adalah untuk
selalu menutup tag tabel dalam sebelum menutup sel tabel luar
Sekian untuk
penjelasan bagaimana cara menyajikan table pada HTML. Kalian bisa bereksperimen
sendiri dengan atribut-atribut yang digunakan untuk menghiasi table yang akan
kalian buat. Terimakasih~
