Cara Membuat Link dan Menyisipkan Gambar di HTML

Jumat, 25 Mei 2012

Cara Membuat Link dan Menyisipkan Gambar di HTML

Kali ini kita akan belajar HTML lebih dalam lagi, yaitu mengenai pembuatan link dan penyisipan gambar. Selain itu juga akan penulis kenalkan pada pemakaian atribut untuk link dan gambar untuk situs web.

Cara Membuat Link

Untuk menyisipkan link, digunakan tag <a>. Susunan sederhananya adalah :

<a href="URL">Teks</a>

Contoh penulisannya :

<a href="http://cara-caranya.blogspot.com">Ini Link Menuju ke Tip Komputer dan Internet</a>

Hasilnya, sebaris kata "Ini Link Menuju ke Tip Komputer dan Internet" akan berubah menjadi objek link yang siap di-klik pengunjung.

Cara Menyisipkan Gambar

Untuk menyisipkan gambar, digunakan tag <img>. Susunan sederhananya adalah :

<img src="URL GAMBAR" />

Contoh penulisannya :

<img src="http://www.google.co.id/intl/id_id/images/logo.gif" />

Hasilnya, gambar logo Google akan tampil di browser.

Gambar Logo Google

Gambar juga bisa dijadikan sebuah link, caranya cukup menempatkan tag <img> di antara tag <a> :

<a href="URL"><img src="URL GAMBAR" /></a>

Mengenal Atribut

Beberapa tag HTML menggunakan atribut. Atribut merupakan informasi tambahan yang disisipkan ke sebuah tag pembuka. Susunannya adalah namaatribut=”nilai”.

Jika Anda perhatikan kembali, contoh tag <a> dan <img> di atas disertai atribut :

href=http://cara-caranya.blogspot.com
src=" http://www.google.co.id/intl/id_id/images/logo.gif

Atribut href dipakai untuk merujuk URL target link, sedangkan atribut src dipakai untuk merujuk URL target gambar yang akan ditampilkan. Tag <a> dan <img> juga dapat diberi beberapa atribut lainnya.

Sebagian besar tag HTML dapat disisipi atribut. Ada beberapa atribut yang bisa diterapkan di berbagai tag, namun ada juga atribut yang hanya bisa diterapkan ke tag tertentu, seperti tag <a>dan <img> di atas.

Atribut antara lain lazim dipakai untuk memformat style teks dan gambar, mengatur warna, dan mengatur tabel.

style="background-color:red" (mengatur warna latar menjadi merah)
style="font-size:12px" (mengatur ukuran hurud menjadi 12 piksel)
style="font-family:Verdana" (mengatur teks menggunakan font Verdana)
style="text-align:center" (mengatur teks menjadi rata tengah)

Contoh pemakaiannya, coba sisipkan atribut style pada tag <BODY> agar warna halaman web menjadi merah :
<BODY style="background-color:red">

Sebagai referensi, daftar lengkap tag HTML dan atribut yang dapat menyertainya bisa Anda lihat di situs internet : http://www.w3schools.com/tags/default.asp.

12 komentar:

Unknown29 Juni 2012 pukul 21.59
wah tutorialnya sangat bermanfaat...
salam kenal dari saya Budidaya Jamur
BalasHapus
Balasan
autowild1 Juli 2012 pukul 10.14
asiiiik aku jd bisa bikin link, kalo gambar yg slide show gimana gan...?http://autowild-and.blogspot.com/
BalasHapus
Balasan
Unknown25 Juli 2012 pukul 22.17
mantap ilmunya neh,,mkch bos
BalasHapus
Balasan
Miko Ahmad Fauzi17 September 2012 pukul 22.13
wah makasih mas informasinya,Menangkap Gambar Screen desktop dengan SCREENHUNTER PRO 6.O FULL VERSION
BalasHapus
Balasan
Unknown22 Februari 2013 pukul 20.34
Makasih gan informasinya berbagi ya. http://blograhasiadownload.com
BalasHapus
Balasan
Unknown14 Juni 2013 pukul 11.02
Ini nih maksud ane gan. Thanks gan :D
BalasHapus
Balasan
WickyF18 Desember 2014 pukul 21.59
sangat bermanfaat sekali buat blog baru saya sob..
makasih banyak sobat..

jangan lupa Kunjung balik kesini juga ya >> tutorialblogwiky.blogspot.com

BalasHapus
Balasan
Unknown21 Maret 2015 pukul 09.53
makasih banyak buat infonya gan...

ijin shareya....

http://acemaxs86.com/
BalasHapus
Balasan
TOKO SEPATU MURAH1 Juli 2015 pukul 00.24
bagus sobata bisa dimodifikasi blog saya.
silahkan berkunjung kewebsite saya sobat di www.centralsepatu.com
BalasHapus
Balasan

Tambahkan komentar