Categories

Link gambar di html

Menampilkan Gambar pada Halaman Web

Rumus untuk menampilkan gambar adalah:

<img src=”alamat URL dari gambar tersebut”>

JPG, GIF, PNG dan SWF (flash) adalah format gambar yang boleh ditampilkan di web. Kode HTML untuk gambar atau image tidak membutuhkan tag penutup.

Kode Tambahan

Ada beberapa kode html tambahan untuk mempercantik tampilan gambar.

  • border=”x” (untuk menentukan berapa tebal “bingkai” untuk gambar tersebut. Bila tak mau pakai bingkai, masukkan angka 0 atau NOL untuk menggantikan x)
  • align=”left” atau align=”right” dan seterusnya (untuk menentukan apakah gambar itu mau dibuat rata kanan, rata kiri, dst)
  • alt=”isi dengan teks tertentu” (ini adalah teks yang akan menyertai gambar tersebut).

Contoh :

1. Alamat link: http://www.ayobelajarwebsite.com

2. gambar yang mau di-link: http://www.madania.info/madu.jpg

<img src=http://www.madania.info/madu.jpg border=”1” alt=”Khasiat Madu” align=”left”>

Agar tidak bingung, kita buatkan langkah-langkahnya ya…

A. Rumus untuk membuat link:

<a href=”http://www.ayobelajarwebsite.com “><img src=http://www.madania.info/madu.jpg border=”1” alt=”Khasiat Madu” align=”left”></a>

B. Rumus untuk menampilkan gambar:

<img src=”2″><a href=http://www.ayobelajarwebsite.com” target=”_blank”><img src=http://www.madania.info/madu.jpg border=”0” alt=”Khasiat Madu” align=”left”></a>

Anda harus banyak latihan, supaya tidak bingung dan akan lebih familiar dengan kode-kode tersebut.

Pelajari juga kode HTML untuk hyperlink dan membuat table

Table di html

Membuat Tabel

Tabel terdiri dari baris dan kolom. Tabel diawali dengan tag <table> dan diakhiri dengan tag </table>.

Setelah <table>, kode berikutnya adalah <tr> ini adalah kode untuk memulai baris baru pada setiap tabel.

Kode berikutnya adalah kolom. Ini ditandai dengan kode <td>

Untuk membuat tabel yang memiliki 1 kolom dan 1 baris, adalah sebagai berikut :

<table>

<tr>

<td> </td>

</tr>

</table>

Sekarang, kita membuat tabel dengan 2 kolom dan 1 baris, caranya :

<table>

<tr>

<td></td>

<td></td>

</tr>

</table>

Sekarang kita buat tabel dengan 1 kolom dan 2 baris, caranya :

<table>

<tr>

<td> </td>

</tr>

<tr>

<td> </td>

</tr>

</table>

Semua data yang akan ditaruh di dalam tabel, ditaruh di antara kode <td> dan <td>.

Table vs CSS

Sebelum CSS dikenal, satu-satunya kode HTML yang biasa digunakan untuk mengatur tata letak (lay out) halaman web adalah table.

Kini, setelah era CSS, banyak peran tabel yang bisa digantikan oleh kode-kode CSS. Tapi tentu saja, pada kasus tertentu, kode-kode table tetap diperlukan.

Informasi lain mengenai kode dasar di HTML : Hyperlink di HTML

Hyperlink di html

Kode-kode HTML

Membuat Link

Link atau hyperlink adalah teks atau gambar atau unsur apapun, yang bila diklik akan membawa kita ke halaman web lain.

Cara membuat link adalah sebagai berikut :

<a href=”Alamat URL atau alamat link”>teks atau gambar atau apapun yang akan diberi link</a>

Sebagai contoh:

Saya menulis artikel, di dalamnya ada link menuju “affiliate link AB” saya.

Cara membuatnya (Ini hanya contoh kalimat):

“Saya sudah beberapa bulan ini bergabung dengan <a href=”http://www.asianbrain.com/index.php?aff_code=185390″>Asian Brain</a>

Maka, di halaman web, nanti akan terlihat seperti ini:

“Saya sudah beberapa bulan ini bergabung dengan Asian Brain

Nah, bagian yang diberi warna biru (teks atau gambar atau apapun yang akan diberi link) bisa diisi dengan teks, gambar, atau apapun.

Bagaimana caranya agar link itu terbuka dengan jendela baru?

Kita tambahkan saja tag berikut ini di dalam kode HTML tersebut : target=”_blank”  atau target=”new”

Berikut adalah kode lengkapnya (agar lebih mudah, dibuat dalam bentuk perbandingan ya….)

Kode HTML sebelum ditambahkan target=”_blank”:

“Saya sudah beberapa bulan ini bergabung dengan <a href=”http://www.asianbrain.com/index.php?aff_code=185390″>Asian Brain</a>

Kode HTML setelah ditambahkan target=”_blank”:

“Saya sudah beberapa bulan ini bergabung dengan <a href=”http://www.asianbrain.com/index.php?aff_code=185390″ target=”_blank”>Asian Brain</a>

Pelajari juga cara membuat website dengan Frontpage