HTML-Tingkat lanjutan 2
Setelah Anda mempelajari HTML-Tingkat lanjutan 1 pada postingan ini sebelumnya mudah-mudahan Anda sudah memahami tentang elemen – element utama HTML tentang Format Font dan Text, , sekarang saya akan memaparkan tentang fungsi-fungsi elemen Hyperlink, Background , Alternatif link gambar , menentukan posisi gambar pada tingkatan HTML-lanjutan 2 ini, yang tentunya akan dibutuhkan jika Anda ingin memanipulasi content website Anda agar dengan mudah Anda memaksimalkan teknik SEO untuk mempromosikan website atau blog Anda.
Hyperlink HTML
Hyperlink digunakan untuk menghubungkan antar halaman dokumen di dalam web.
Tag HTML Hyperlink biasa disebut dengan anchor (a) kemudian diikuti dengan href
sebagai alamat tujuan dari link tersebut. Berikut kita akan membuat suatu Hyperlink
ke suatu alamat url:
<html>
<head></head>
<body>
<p>Aku sekarang sedang membuat hyperlink</p>
Jika anda ingin mengunjungi Microsoft
<a href="http://www.microsoft.com/">Klik disini</a><br>
<a href="http://www.yahoo.com/">Link ini</a> akan membawa anda ke Yahoo.com
<p>Untuk membuat hyperlink url agar dibuka pada jendela browser yang baru:<p>
<a href="http://www.mp3.com/"target="_blank">Website Musik</a>
<p>Agar hyperlink tidak bergaris bawah:<p>
<a href="http://www.mp3.com/"target="_blank" style="text-decoration: none">Website Musik</a>
<p>Hyperlink ke suatu halaman tertentu dalam web:<p>
<!--dengan catatan anda harus tau nama halaman tujuan tersebut-->
<a href="http://wordpress.htmlcssguides.com/belajar-css/">Link ini</a> akan membawa anda ke halaman belajar css.
</body>
</html>
Untuk membuat hyperlink dengan menggunakan gambar (image). Pastikan gambar tersebut berada pada folder yang sama dengan dokumen html Anda dan harus tahu nama dan extentionnya, kemudian ganti ke atribut yang bertuliskan scr, misalkan jika nama gambar tersebut adalah yahoo.gif, maka :
<a href="http://www.yahoo.com"> <img src="yahoo.gif" border="0" width="147" height="31"></a>
Img merupakan atribut untuk suatu image (gambar), border adalah garis yang mengelilingi sisi image, width dan height merupakan lebar dan tinggi dari image. Kreatiflah untuk menganti nilai yang ada diantar tanda "…"sehingga anda akan lebih mengerti. Untuk memposisikan gambar, tambahkan dengan atribut align="…", left= kiri, center= tengah dan right= kanan.
<a href="http://www.yahoo.com"> <img src="yahoo.gif" border="0" width="147" height="31" align="left"></a>
Sekarang coba geser mouse Anda ke gambar di atas, jangan di-klik, perhatikan akan ditampilkan suata tulisan singkat mengenai gambar tesebut, ini disebut dengan screen tips, cara membuatnya adalah menambahkan title pada tag anchor (a) sehingga menjadi :
<a href="http://www.yahoo.com" title="Hai...Klik gb. ini maka Anda akan dibawa ke Yahoo."><img src="contoh.jpg" border="0" width="147" height="31" align="left" alt="yahoo"></a>
Agar cepat mengakses internet kita boleh mengatur browser untuk tidak menampilkan image (gambar). Dan semua gambar akan ditampilkan dengan teks alternatif (alt), jika gambar tesebut tidak memiliki alternatif teks maka hanya akan dilambangkan dengan lambang x.
<a href="http://www.yahoo.com"> <img border="0" src="contoh.jpg" width="120" height="30" align="left" alt="Text Alternatif Yahoo.com"></a>
Background HTML
Dengan menggunakan latar belakang (background) maka website kita akan nampak semakin menarik. Untuk memasukkan latar belakang kita bisa menggunakan pilihan warna maupun grafik (gambar).
Sekarang kita mulai dengan menggunakan pilihan warna:
<html>
<head></head>
<body bgcolor="#FF99FF">
<p>Hai.. Saat ini saya sedang belajar membuat latar belakang dengan warna</p>
<p>Kalau anda kurang suka dengan warnanya... ganti aja deh... kode warnanya... </p>
</body>
</html>
Untuk nilai dari atribut bgcolor diatas Anda bisa menggunakan Kode hexadecimal, Nilai RGB atau Nama dari warna tersebut.
Coba anda ganti nilai dari atribut bgcolor dengan contoh dibawah ini:
<body bgcolor="#FFFF00"><body bgcolor="rgb(250,250,0)"><body bgcolor="yellow">
Memasukan grafik atau gambar.
Memasukan gambar bisa dari harddisk CPU kita ataupun dari URL.untuk memasukangambar kedalam halaman web kode HTML yang dipakai adalah
<img src="alamat url gambar">
Untuk mengambil gambar menggunakan link URL, kita bisa menggunakan penyedia jasa penyimpanan gambar seperti photo bucket atau image schack, yang nantinya kita akan ambil link penyimpanan gambarnya untuk kita panggil dihalaman web kita, contohnya seperti ini, jika kita sudah mengupload gambar kita disalah satu penyedia jasa penyimpanan gambar tersebut maka yang harus kita lakukan adalah meng-copy paste direct link gambar tersebut. Contohnya direct link dari gambar
yang telah diupload adalah :
http://img665.imageshack.us/img665/3066/flower250x150.gif
maka untuk memanggilnya :
<img src=http://img665.imageshack.us/img665/3066/flower250x150.gif
Menentukan posisi gambar align
Untuk membuat gambar bisa berada diposisi kanan, kiri atau tengah maka kode HTML
yang digunakan adalah align="posisi gambar yang diinginkan" contohnya berikut ini :
<img src="http://img665.imageshack.us/img665/3066/flower250x150.gif" align="left">
untuk menentukan posisi gambar juga bisa menggunakan cara seperti ini :
<center><img src="http://img665.imageshack.us/img665/3066/flower250x150.gif" align="left"></center>
Memberikan keterangan pada gambar "Alt"
Jika Anda melihat gambar pada halaman Web, apabila kursor mouse mengenai gambar maka akan muncul keterangan pada gambar tersebut, agar gambar yang kita masukan kedalam web ada keterangan gambarnya, maka kode HTML yang digunakan adalah "alt" atau disebut juga alternative, dengan menambahkan keterangan pada gambar bisa membantu website kita cepat terindex oleh search engine google. Contohnya sebagai berikut :
<img src="http://img665.imageshack.us/img665/3066/flower250x150.gif” alt="keterangangambar">
Selanjutnya membuat latar belakang dengan grafik atau gambar.
Pertama anda harus punya gambar yang ber-extention .gif atau .jpg yang akan dijadikan background, masukkan (copy) gambar tersebut ke folder tempat file dokumen HTML anda berada, dan harus tahu nama dan perluasan (extention) dari file tersebut, misalkan nama filenya adalah: background.jpg
<html>
<head></head>
<body background="background.jpg">
<font color="blue"><h1 color="red">Selamat datang di Websiteku</h1></font><hr color="#ff0000" size="2">
<p><font face="Verdana" size="4" color="black">Halo semua Saat ini saya sedang belajar membuat latar belakang dengan gambar,<br>
Masukanlah gambar yang menarik bagi Anda...</font></p>
</body>
</html>
Kemudian latar belakang dapat juga menggunakan gambar yang ada di website orang lain, tapi dengan catatan anda harus sedang terhubung ke internet (online) dan harus tahu alamat url dari gambar tersebut di internet. Untuk mengetahui alamat suatu gambar klik kanan gambar tersebut kemudian pilih properties dan lihat image location, copy alamat tersebut dan ganti ke contoh dibawah ini diawali dari http:
<html> <head></head> <body background="http://i1188.photobucket.com/albums/z405/ animated_favicon1.gif"> <p>Saat ini saya sedang belajar membuat latarbelakang dengan menggunakan gambar dari website orang lain!</p> <p>semoga dapat memperindah tampilan website Anda…</p> </body> </html>
Untuk mempelajari HTML tingkat mahir silahkan Anda kunjungi disini…