Cara menambahkan link gambar di html

Link dalam sebuah website dapat diartikan sebagai jalan pintas yang menghubungkan antara halaman satu dengan halaman yang lain yang lain. Banyak manfaat dari adanya link, mulai dari mempercantik tata letak website, dan halaman menjadi lebih produktif karena isinya akan lebih beragam informasi. Lalu bagaimana membuat link dengan menggunakan bahasa pemograman HTML?

Table of Contents Show

Membuat link tulisan
Membuat Link Gambar
Bagaimana Menambahkan gambar di HTML?
Bagaimana Cara Menambahkan Hyperlink dalam HTML?
Kenapa gambar tidak bisa muncul di HTML?
Apa HTML yang benar untuk menyisipkan gambar latar belakang?

Untuk membuat seperti link di atas juga tidak sulit, berikut penjelasannya

DAFTAR ISI

Membuat link tulisan

Untuk membuat link tulisan, kamu hanya perlu menuliskan tag <a href=”halaman tujuan kamu”>Judul Artikel</a>. Untuk lebih jelasnya mari ikuti langkah-langkah berikut ini.

1. Buka XAMPP Control Panel dan aktifkan Apache dan MySql.

2. Buka text editor, seperti Notepad++, atau Dreamweaver dan ketiklah script code berikut. Kita buat laman1.php.

3. Simpan script code di atas tekan Ctrl+S, simpan di folder xampplite – htdocs – buat folder baru (disini saya buat folder baru dengan nama “inwepo”) – saya simpan dengan nama file “laman1.php”.

<html>
<head>
<title>Laman 1</title>
</head>
<body>

	<font FONT FACE="Comic Sans MS" size="5" color='green'>Cara Membuat Link dengan Bahasa Pemograman HTML</font> <br/>
	<a href="laman2.php" target="_blank">Klik Disini</a>

</body>
</html>

4. Buka kembali text editor kamu, seperti Notepad++, atau Dreamweaver dan ketiklah script code berikut. Kita buat laman2.php.

<html>
<head>
<title>Laman 2</title>
</head>
<body>

	<font FONT FACE="Comic Sans MS" size="5" color='blue'>Hai, kamu sudah sampai di Halaman Lain</font> <br/>

 </body>
 </html>

5. Simpan script code di atas tekan Ctrl+S, simpan di folder xampplite – htdocs – buat folder baru (disini saya buat folder baru dengan nama “inwepo”) – saya simpan dengan nama file “laman2.php”.

6. Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah http://localhost/inwepo/laman1.php

Tampilan sebelum di-klik

Tampilan setelah di-klik

Membuat Link Gambar

Untuk membuat gambar, kamu perlu menuliskan <IMG SRC=”nama_file.jpeg/ png”>. Oh ya, yang harus diingat simpan file gambar kamu di folder yang sama di xampplite – htdocs (disini folder saya bernama ‘inwepo’), karena bila berbeda folder gambar kamu tidak akan keluar. Sedangkan untuk menampilkan link gambar kamu perlu menuliskan <a href=”halaman tujuan kamu”> IMG SRC=”nama_file.jpeg/ png”></a>. Untuk lebih jelasnya mari ikuti langkah-langkah berikut ini.

1. Buka XAMPP Control Panel dan aktifkan Apache dan MySql.

2. Buka text editor, seperti Notepad++, atau Dreamweaver dan ketiklah script code berikut. Kita buat laman_gambar_1.php.

<html>
<head>
<title>Laman Gambar 1</title>
</head>
<body>

	<font FONT FACE="Comic Sans MS" size="5" color='green'>klik gambar bunga matahari dibawah ini</font> <br/><br/>
	<a href="laman2.php" target="_blank"><IMG SRC="bunga_matahari.jpg"></a>

</body>
</html>

4. Buka kembali text editor kamu, seperti Notepad++, atau Dreamweaver dan ketiklah script code berikut. Kita buat laman_gambar_2.php.

<html>
<head>
<title>Laman Gambar 2</title>
</head>
<body>

	<font FONT FACE="Comic Sans MS" size="5" color='blue'>Hai, kamu sudah sampai di Halaman Lain</font> <br/>

 </body>
 </html>

6. Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah http://localhost/inwepo/laman_gambar_1.php.

Tampilan sebelum di-klik

Tampilan setelah di-klik

Demikian penjelasan dari tutorial tentang menampilkan link tulisan, dan link gambar dengan menggunakan bahasa pemrograman HTML. Selamat mencoba.

Bagaimana Menambahkan gambar di HTML?

Cara Memasukkan Gambar di HTML.

Langkah 1: Memastikan Format Gambar Sudah Sesuai..

Langkah 2: Memasukkan Atribut Sumber Gambar pada Tag HTML Images..

Langkah 3: Memberikan Atribut Alt Text pada Tag HTML Images..

Langkah 4: Mencantumkan Keterangan Gambar..

Cara 1: Mengubah Dimensi Gambar..

Cara 2: Memberikan Bingkai Gambar..

Bagaimana Cara Menambahkan Hyperlink dalam HTML?

Cara Membuat Link di HTML Link pada HTML dapa dibuat dengan tag <a> , kemudian tag ini harus memiliki atribut href untuk menentukan alamat URL tujuan dari link. Link akan ditampilkan dengan warna biru dan garis bawah. Ini adalah style standar dari setiap browser.

Kenapa gambar tidak bisa muncul di HTML?

Salah satu penyebab gambar tidak muncul di web adalah kesalahan nama folder gambar di kode HTML. Kesalahan tersebut membuat server tidak akan bisa menemukan gambar yang diminta untuk ditampilkan. Jika nama folder sudah dikoreksi, akses kembali halaman website yang gambarnya tidak muncul.

Apa HTML yang benar untuk menyisipkan gambar latar belakang?

Tikkan <div style="background-image: url('[image url]');"> di baris berikutnya. Inilah label HTML untuk menambahkan gambar latar belakang pada halaman web. Ganti "[image url]" dengan lokasi URL asli dari gambar yang diinginkan.