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
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>
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>
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 :
<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>
Menggunakan tipe atribut <ul type="disc">, dari pada <ul style="list-style-type:disc>, juga bekerja. Tapi di HTML5, tipe atribut tidak valid pada unordered list, hanya pada ordered list.
