Sample Text

Rabu, 18 Maret 2015

HTML Images & Links



MENAMBAHKAN GAMBAR

Dokumen HTML akan lebih menarik apabila disisipkan gambar. Sedangkan format gambar yang hampir dikenal semua browser adalah GIF dan JPEG. Untuk menambah gambar digunakan tag <img />

Tag <img /> mempunyai atribut :


Atribut
Fungsi
Scr
Align

Width
Height
Alt
Merujuk pada URL atau direktori lokasi gambar.
Posisi teks disekitar gambar, nilainya adalah top, middle, bottom, left, right.
Lebar gambar satuan pixel.
Tingggi gambar satuan pixel.
Menampilkan teks pengganti jika gambar tidak tampil.                            


Example :
<html>
<body>
 <h2>Spectacular Mountains</h2>
 <img src="pic_mountain.jpg" alt="Mountain View">
</body>
</html>

Image  Size - Width and Height
Kamu dapat menggunakan style atribut untuk menentukan lebar dan tinggi suatu gambar.
Nilai-nilai yang ditentukan dalam pixel.

Example :
<img src="pic_mountain.jpg" alt="Mountain View" style="width:128px;height:128px">

Using an Images as a Links 
Mengguankan gambar sebagai link.

Example : 
<a href ="http://www.facebook.com">
<img src="facebook.jpg" alt="huruf ef" style="middle"/>
</a>

Membuat Image Berjalan
Example :
<marquee><img src="facebook.jpg" alt="huruf ef" align="top"/></marquee>

Membuat Image Berjalan dari Kiri ke Kanan
Example :
<marquee align="center" direction="right" height="45" scrollamount"5" width="70%"><img src="facebook.jpg" alt="huruf ef" align="top"/></marquee>

Note :
Pada huruf / angka yang berwarna merah dapat anda sesuaikan menurut
keinginan,kata "right" adalah perintah untuk menggerakkan teks ke arah
kanan. Anda dapat merubahnya menjadi "left".jika ingin teks berjalan dari arah kanan ke arah kiri.
Huruf "45" pada kode diatas adalah untuk mengatur ukuran tinggi bidang
gerak teks, anda dapat merubahnya dan menyesuaikan menurut ukuran
bidang gerak pada website / blog anda.
Sedangkan huruf "2" pada perintah scrollamount adalah untuk mengatur
kecepatan gerak teks. Semakin besar nominalnya maka kecepatan gerak teks akan semakin bertambah.
70%" pada code width diatas adalah ukuran lebar bidang gerak teks. Anda bisa merubah prosentasenya sesuai dengan keinginan anda.


Membuat Image Berjalan dari Kiri dan Kembali ke Kanan
Example :
<marquee align="center" direction="left" height="50" scrollamount="5" width="70%" behavior="alternate"> <img src="facebook.jpg" alt="huruf ef" align="top"/></marquee>

Example :
<html>
<head>
<title>Menggunakan Link</title>
</head>
<body>
<a href="http://www.facebook.com">Klik Disini</a> untuk menuju situs facebook.com <br/>
Atau dapat juga Klik gambar ini :
<a href="http://www.facebook.com">
<marquee align="center" direction="left" height="50" scrollamount="5" width="70%" behavior="alternate"> <img src="facebook.jpg" alt="huruf ef" align="top"/></marquee>
</a>
</body>
</html>


MENAMBAHKAN LINKS
Links merupakan suatu gambar atau teks yang terkait dengan suatu alamat tertentu. Jika link di klik maka dokumen HTML akan menuju ke alamat tersebut. Ditandai dengan Anchor, yaitu tag <a>. Tag <a> mempunyai atribut href yang digunakan sebagai link tujuan.

Example :
<a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>

Example : 
<html>
<head>
<title>Menggunakan Link</title>
</head>
<body>
<a href="http://www.facebook.com">Klik Disini</a> untuk menuju situs facebook.com <br/>
Atau dapat juga Klik gambar ini :
<a href="http://www.facebook.com">
<img src="facebook.jpg" alt="huruf ef" align="top"/>
</a>
</body>
</html>
















Text Widget

Diberdayakan oleh Blogger.

About Me

Followers

Pengikut

 

© 2013 Anuhtiam blogspot. All rights resevered. Designed by Templateism

Back To Top