Welcome To My Blog: Mari belajar HTML bagian ke 2

Cara Membuat Link di HTML

Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang ketika di-klik akan pindah ke tautan halaman lainnya. HTML dengan menggunakan tag <a>untuk keperluan ini.

Untuk lebih jelas cara membuat link di HTML. Silahkan buka text editor, Adobe Dreamweaver atau aplikasi lain dan buat kode seperti dibawah ini.

Contoh penggunaan tag link <a>:

Maka hasilnya akan terlihat seperti ini :

Atribut tag <a>: target

Atribut penting lainnya dari tag <a> adalah target. Atribut ini digunakan untuk menentukan apakah link yang dituju terbuka di jendela browser saat ini, atau terbuka di jendela baru.

Secara default, setiap link yang kita tulis akan terbuka pada jendela yang sama (menimpa halaman web saat ini). Tetapi apabila kita ingin halaman tersebut terbuka pada tab baru, gunakan atribut target=”_blank”.

Contoh penggunaan tag link <a> dengan atribut target:

Maka hasilnya akan terlihat seperti ini, apabila link di klik maka akan terbuka tab baru dan tidak menindih halaman yang sedang digunakan saat itu.

Selain digunakan untuk menghubungkan halaman HTML, Tag <a> juga bisa digunakan untuk dihubungkan ke bagian lain dari halaman yang sama, atau disebut Internal Link. Cara pembuatan internal link adalah dengan membuat link berisi atribut id dari tag lain.

Menyisipkan Gambar di HTML

Pada kesempatan kali ini saya akan sharing bagaimana cara menyisipkan gambar di html. Menampilkan gambar di HTML bukanlah hal yang rumit. kita bisa menyisipkan gambar di web, mengatur ukuran gambar, posisi gambar html, dan memberikan link gambar di html serta keterangan pada gambar tersebut dengan kode html. Perintah untuk menampilkan format gambar atau menambah gambar di HTML atau halaman web ditandai dengan tag <img> dan atribut ” src “ untuk lokasi dari gambar yang akan kita ambil.

Atribut src dalam tag <img>

Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. 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.

Cara menyisipkan gambar di HTML

Untuk lebih jelasnya kita liat contoh kode menyisipkan gambar dengan html sbb:

<html>
<body>
<img src=”http://seputarti.com/logo.png”>
<h2>
Belajar menyisipkan gambar dengan html.
</h2>
</body>
</html>

Nah kita liat kode html tag <img> dan atribut src mengarah pada lokasi gambar, yaitu logo.png. kita juga bisa menyisipkan gambar dengan extensi jpg, png, gif, bmt, swf, dll. Berikut adalah contoh dari kode di atas:

Mengatur Ukuran Gambar di HTML dan Mengatur Posisi Gambar di HTML

OKE, di atas adalah cara mudah menyisipkan gambar di html, sekarang kita akan mencoba menambah atribut untuk mengatur ukuran dan posisi serta keterangan gambar yang kita sisipkan pada halaman web. berikut adalah contoh kode sederhana menambah dan mengatur gambar html:

<html>
<body>
<img src=”http://seputarti.com/logo.png” alt=”Ini gambar logo” width=”90″ height=”35″ style=”float:right;”>
<h2>
Belajar menyisipkan gambar dengan html.
</h2>
</body>
</html>

Nah, atribut alt adalah untuk memberi keterangan gambar html dan kita mengatur lebar serta tingi gambar di html dalam satuan pixel, serta untuk posisi gambar agak memerlukan css dalam hal ini memakai float right(rata kanan). Berikut adalah contoh hasilnya menyisipkan gambar serta mengatur lebar gamabr, tinggi dan posisi gambar :

Membuat Link Pada Gambar di HTML

Next, kita akan mencoba membuat link gambar dalam html dengan menggunakan tag <a>. tag <a> atau hiperlinkselalu diikuti dengan href=””. dimna merupakan tujuan dari link yang diberikan pada gambar. oke langsung saja kita coba membuat kode html sederhana untuk link gambar :

<html>
<body>
<a href=”http://seputarti.com”><img src=”http://seputarti.com/logo.png”></a>
<h2>
Belajar menyisipkan gambar dengan html, dan memberikan link pada gambar.
</h2>
</body>
</html>

Mengatur Ukuran Garis Tepi (border) Gambar di HTML

Oke gan, itu adalah kode membuat link pada gambar dengan html. gambar tersebut akan mengarah pada home web saya jika di klik. oh iya tambahan saja, jika anda ingin menebalkan border pada gambar bisa menggunakan atribut border=””. makin besar nilainya, maka makin besar ukuran bordernya/garis tepi gambar tersebut.

Keterangan :

• Align/float = adalah atribut posisi gambar di sebelah kanan , kiri , tengah , atas dan buttom .

• Width = pengaturan lebar gambar yang akan ditampilkan pada halaman web .
• Height= pengaturan tinggi gambar yang akan ditampilkan pada halaman web .
• Alt = adalah deskripsi gambar jika kursor di tempat gambar .
• Border = garis tebal yang mengelilingi gambar .

berikut adalah contoh gmbar bergerak :