Buat para pemula atau yang lagi belajar tentang HTML , ini ada sedikit ilmu yang saya pelajari tentang tag link dan image di Html , langsung aja capcus ;;)
LINK
Link adalah tujuan dari kata Hypertext
dari HTML. Tujuan kata Hypertext dari HTML adalah membuat sebuah
text jika di-klik akan pindah ke halaman lainnya. HTML menggunakan tag
link untuk keperluan ini.
Tag link
ditulis dengan <a>, singkatan cari anchor (jangkar)
Setiap tag
link setidaknya memiliki sebuah atribut href. Dimana href akan
berisi alamat yang dituju. (href adalah singkatan dari hypertext reference).
Silahkan buka text editor dan buat kode seperti dibawah ini.
Contoh
penggunaan tag link <a>:
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Link
</title>
</head>
<body>
<h1>Belajar Tag
Link</h1>
</body>
</html>
|
Contoh
diatas menggunakan alamat absolut, artinya kita menuliskan alamat link
dengan lengkap.
Namun jika
halaman web yang kita tuju adalah di dalam folder tempat kita menjalankan file
ini, tidak perlu menuliskan alamat lengkap dari link tersebut, atau disebut
juga alamat relatif.
Seandainya
kita ingin membuat link kepada file hello.html pada folder yang sama,
kode HTMLnya akan menjadi :
Contoh
penggunaan tag link <a>:
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Link
</title>
</head>
<body>
<h1>Belajar Tag
Link</h1>
<p>Halaman HTML pertama saya
adalah <a href="Rizal.html">Hello
Rizal</a></p>
</body>
</html>
|
alamat absolute ditulis dengan lengkap, seperti http://www.Rizal.com, atau jika kita merujuk kepada halaman tertentu, menjadi http://www.Rizal.com/nama_halaman.html.
Alamat
relatif maksudnya adalah relatif kepada file tempat kita memanggil link ini.
Seandainya nama file adalah Contoh_link.html, dan dalam folder yang sama
terdapat halaman Contoh_list.html, kita dapat menggunakan href=”Contoh_list.html”.
Jika file
tersebut berada di dalam folder HelloZal, maka alamat relatifnya menjadi
href=”HelloZal/Contoh_list.html”. Namun bagaimana jika halaman tersebut
berada 2 tingkat di luar folder saat ini? Kita dapat menggunakan href=”../../Contoh_list.html”,
untuk naik 2 folder diatasnya.
Atribut
penting dari lainnya tag link adalah target.
Secara
default, setiap link yang kita tulis akan terbuka pada halaman itu juga, jika
ingin halaman tersebut terbuka pada tab lain, tunakan atribut target=”_blank”.
Contoh
penggunaan tag link <a> dengan atribut target:
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Link
</title>
</head>
<body>
<h1>Belajar Tag
Link</h1>
target=”_blank”>Rizal</a>
dan akan terbuka pada tab baru</p>
</body>
|
========================================================
Image
Sulit
membayangkan sebuah halaman HTML tanpa gambar untuk standard web saat
ini. Tag Image digunakan untuk menampilkan gambar kedalam halaman web,
menggunakan <img>.
Atribut src dalam tag <img>
Atribut src
adalah singkatan dari source, adalah alamat dari gambar yang akan
ditampilkan. Alamat ini bisa relatif atau absolute
Untuk contoh
kode HTML tentang image ini, sediakan sebuah gambar yang akan digunakan
sebagai tampilan, dan tempatkan gambar tersebut ke dalam satu folder dengan
halaman contoh. Gambar dapat berupa JPEG, PNG, maupun GIF
Pada contoh
dibawah ini saya menggunakan sebuah gambar koala.jpg yang berada dalam satu
folder dengan halaman HTML. Savelah sebagai img.html
Contoh
penggunaan tag <img>:
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag
Image</title>
</head>
<body>
<h1>Tag Gambar</h1>
<img src="az.jpg"
/>
</body>
</html>
|
Perhatikan
bahwa tag <img> tidak memiliki elemen, sehingga langsung ditutup
dengan />
Atribut alt dalam tag <img>
Tag image
juga memiliki atribut penting lainnya, yaitu alt
Atribut alt
adalah singkatan dari alternative description, dimana alt
digunakan untuk keterangan dari gambar jika gambar tersebut gagal ditampilkan
oleh browser. Atau web broser yang disetting untuk tidak menampilkan gambar
Contoh
penggunaan atribut alt pada tag <img>:
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag
Image</title>
</head>
<body>
<h1> Tag Gambar</h1>
<img alt="ini gambarnya" src="az.jpg"/>
</body>
</html>
|
Atribut width dan height dalam
tag <img>
Atribut
lainnya membolehkan kita untuk menentukan besar dari gambar yang ditampilkan,
yaitu width dan height.
Contoh
penggunaan atribut width dan height pada tag <img>:
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag
Image</title>
</head>
<body>
<h1>Belajar Tag
Gambar</h1>
<img alt="ini gambarnya" src="az.jpg" height="200" width="100" />
</body>
</html>
|
Tidak ada komentar:
Posting Komentar