Citra Grafis Dan Link

Kali ini saya akan menjelaskan tentang cara menempatkan citra grafis dalam kode HTML dan juga tentang cara memasukkan link. Banyak macam citra grafis dengan ekstensi yang berbeda. Namun, sebaiknya anda menggunakan hanya 2 tipe gambar, yaitu: file-file GIF (cocok untuk logo) & file-file JPEG atau JPG (cocok untuk foto). Oleh karena itu, saya akan memberi contoh sebuah kode HTML untuk citra grafis lengkap dengan atributnya.
Contoh:
<img src=”Santos.jpeg” align=”center” border=”2” width=”100” height=”100” alt=”gambar santos”>

Penjelasan dari kode tersebut:
Img= tag pembuka untuk citra grafis
Src=tempat gambar yang akan dimasukkan
Align=tempat gambar akan ditempatkan (kiri, tengah, kanan)
Border=garis tepi dari gambar tersebut (pixel)
Width=lebar dari gambar tersebut (pixel)
Height=tinggi dari gambar tersebut (pixel)

Karena gambar tidak akan saya perlihatkan, saya akan menjelaskan gambar tersebut secara tertulis saja:
Nama gambar tersebut adalah “Santos” dengan ekstensi “.jpeg” yang berada di satu folder yang sama dengan file kode HTML yang kita gunakan, berada ditengah halaman, dengan tebal garis pinggir sebesar 2 pixel, mempunyai lebar sebesar 100 pixel dan tinggi sebesar 100 pixel.

Note: Jika ingin menggunakan gambar yang tidak satu file dengan kode HTML anda, maka anda harus menambahkan “nama drive:\folder1\folder2\...\nama gambar” contoh: ”D:\santos\pictures\santos.jpeg”.

Setelah menjelaskan tentang penempatan gambar, saya akan menjelaskan tentang pembuatan link. Link digunakan untuk membuah konektivitas(hubungan) dengan halaman lain. Untuk menggunakannya kita harus memasukkan tag <a href=””>___ </a>. Ada beberapa jenis link:
1. Membuat link ke halaman lain
2. Membuat link pada alamat e-mail
3. Membuat link ke bagian lain pada halaman yang sama
4. Membuat link ke bagian lain pada halaman yang berbeda
5. Membuat link dengan menggunakan gambar
Saya akan memberi contoh bagian-bagian diatas:
1. <a href=”halamanlain.html”>ke halaman lain</a>
2. <a href=”mailto:sabanari_santos@yahoo.co.id”>Ke e-mailku</a>
3. <a href=”#bagianlain”>ke paling atas</a>
4. <a href=”halamanlain.html#bagian lain”>ke bagian lain pada halaman yang berbeda</a>
5. <a href=”halamanlain.html”><img src=”Santos.jpeg” width=”100” height=”100”> </a>

Semoga artikel ini bermanfaat bagi anda sekalian. TUHAN MEMBERKATI

Related Posts: